From b92bf89f75a5da576a51d7e8c51e117d20de62d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Wed, 23 Feb 2022 09:20:56 +0100
Subject: [PATCH 1/8] use flex container for placeholders to dynamcially adjust
 the white box for vendor logo

---
 .../EmbedPlaceholder/EmbedPlaceholder.vue     | 126 ++++--------------
 .../EmbedPlaceholderPur.vue                   |   5 +
 2 files changed, 34 insertions(+), 97 deletions(-)

diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
index 4b4b0e3..7d878c9 100644
--- a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
+++ b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -1,63 +1,15 @@
 <template>
-  <div
-    class="embed-placeholder__container"
-    :data-vendor-id="vendorId"
-  >
+  <div class="embed-placeholder__container" :data-vendor-id="vendorId">
     <div class="embed-placeholder__header">
       <slot name="header">
-        <svg
-          width="100%"
-          height="265"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <rect
-            x="38"
-            y="62"
-            width="81"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <rect
-            x="38"
-            y="88"
-            width="81"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <rect
-            x="38"
-            y="75"
-            width="61"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <rect
-            x="38"
-            y="173"
-            width="81"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <rect
-            x="38"
-            y="199"
-            width="81"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <rect
-            x="38"
-            y="186"
-            width="61"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <path
-            d="M289.782 110.125L313 78L343 78"
-            stroke="#868E96"
-            stroke-width="3"
-          />
+        <svg width="100%" height="265" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="38" y="62" width="81" height="8" fill="#E9ECEF" />
+          <rect x="38" y="88" width="81" height="8" fill="#E9ECEF" />
+          <rect x="38" y="75" width="61" height="8" fill="#E9ECEF" />
+          <rect x="38" y="173" width="81" height="8" fill="#E9ECEF" />
+          <rect x="38" y="199" width="81" height="8" fill="#E9ECEF" />
+          <rect x="38" y="186" width="61" height="8" fill="#E9ECEF" />
+          <path d="M289.782 110.125L313 78L343 78" stroke="#868E96" stroke-width="3" />
           <path
             d="M287.287 170.75C292.847 161.12 296.117 150.339 296.845 139.242C297.572 128.145 295.737 117.03 291.481 106.756C287.226 96.4817 280.663 87.3243 272.303 79.9919C263.942 72.6596 254.006 67.3489 243.264 64.4707L239.511 78.4766C248.105 80.7792 256.053 85.0278 262.742 90.8936C269.431 96.7595 274.68 104.085 278.085 112.305C281.49 120.524 282.958 129.416 282.376 138.294C281.794 147.171 279.178 155.796 274.729 163.5L287.287 170.75Z"
             fill="#868E96"
@@ -70,34 +22,14 @@
             d="M152.396 142.061C153.976 157.128 160.236 171.321 170.296 182.647C180.357 193.974 193.713 201.864 208.489 205.209C223.264 208.555 238.716 207.188 252.675 201.301C266.633 195.414 278.397 185.302 286.314 172.386L273.951 164.808C267.618 175.142 258.207 183.231 247.04 187.941C235.873 192.651 223.511 193.744 211.691 191.067C199.871 188.391 189.186 182.079 181.137 173.018C173.088 163.957 168.08 152.602 166.816 140.549L152.396 142.061Z"
             fill="#CED4DA"
           />
-          <rect
-            x="349"
-            y="62"
-            width="81"
-            height="8"
-            fill="#868E96"
-          />
-          <rect
-            x="349"
-            y="88"
-            width="81"
-            height="8"
-            fill="#868E96"
-          />
-          <rect
-            x="349"
-            y="75"
-            width="61"
-            height="8"
-            fill="#868E96"
-          />
+          <rect x="349" y="62" width="81" height="8" fill="#868E96" />
+          <rect x="349" y="88" width="81" height="8" fill="#868E96" />
+          <rect x="349" y="75" width="61" height="8" fill="#868E96" />
         </svg>
       </slot>
     </div>
     <div class="embed-placeholder__headline">
-      <slot name="headline">
-        An dieser Stelle findest du Inhalte von Drittanbietern
-      </slot>
+      <slot name="headline"> An dieser Stelle findest du Inhalte von Drittanbietern </slot>
     </div>
     <div class="embed-placeholder__description">
       <slot name="description">
@@ -105,17 +37,9 @@
       </slot>
     </div>
     <consent-actions v-slot="{ consentVendor, consentPurpose }">
-      <slot
-        name="button"
-        v-bind="{ consentVendor, consentPurpose }"
-      >
-        <button
-          class="embed-placeholder__button"
-          @click.prevent="giveConsent(consentVendor, consentPurpose)"
-        >
-          <slot name="buttonLabel">
-            externen Inhalt aktivieren
-          </slot>
+      <slot name="button" v-bind="{ consentVendor, consentPurpose }">
+        <button class="embed-placeholder__button" @click.prevent="giveConsent(consentVendor, consentPurpose)">
+          <slot name="buttonLabel"> externen Inhalt aktivieren </slot>
         </button>
       </slot>
     </consent-actions>
@@ -131,7 +55,8 @@
             rel="noopener noreferrer"
             target="_blank"
             @click.prevent="loadPrivacyManagerModal(privacyManagerId)"
-          >hier</a>.
+            >hier</a
+          >.
         </slot>
       </div>
     </privacy-manager>
@@ -153,7 +78,7 @@ type ConsentAction = (id: string) => void;
 
 type Methods = {
   giveConsent: (consentVendor: ConsentAction, consentPurpose: ConsentAction) => void;
-}
+};
 
 type NonNullish = Record<string, unknown>;
 
@@ -172,7 +97,7 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
     purposeId: {
       type: String,
       default: '',
-    }
+    },
   },
   methods: {
     giveConsent(consentVendor: ConsentAction, consentPurpose: ConsentAction): void {
@@ -183,8 +108,8 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
       if (this.purposeId) {
         consentPurpose(this.purposeId);
       }
-    }
-  }
+    },
+  },
 });
 </script>
 
@@ -195,15 +120,22 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   padding: 12px;
   max-width: 500px;
   margin: 0 auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .embed-placeholder__header {
+  position: relative;
   background: #ffffff;
   border: 1px solid #ced4da;
   box-sizing: border-box;
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 10px;
+
+  display: flex;
+  justify-content: center;
+  flex: 1;
 }
 
 .embed-placeholder__headline {
diff --git a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
index a3ff2ea..2ab147f 100644
--- a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
+++ b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
@@ -139,12 +139,17 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
 
 <style>
 .embed-placeholder__header--pur {
+  position: relative;
   background: #ffffff;
   border: 1px solid #ced4da;
   box-sizing: border-box;
   border-radius: 8px;
   padding: 12px;
   margin-bottom: 24px;
+
+  display: flex;
+  justify-content: center;
+  flex: 1;
 }
 
 .embed-placeholder__description--pur {

From ee97dd91b708daf91afe9334e6609db1ebaf1eee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Wed, 23 Feb 2022 12:10:34 +0100
Subject: [PATCH 2/8] asjust svg logos

---
 .../__snapshots__/EmbedConsent.test.ts.snap   | 101 ++----------------
 .../EmbedFacebookConsent.test.ts.snap         |  62 ++---------
 .../EmbedFacebookPlaceholder.vue              |  59 +---------
 .../EmbedFacebookPlaceholder.test.ts.snap     |  62 ++---------
 .../EmbedFacebookPlaceholderPur.vue           |  13 +--
 .../EmbedInstagramConsent.test.ts.snap        |  47 +++-----
 .../EmbedInstagramPlaceholder.vue             |  48 ++-------
 .../EmbedInstagramPlaceholder.test.ts.snap    |  47 +++-----
 .../EmbedInstagramPlaceholderPur.vue          |  19 ++--
 .../EmbedPlaceholder/EmbedPlaceholder.vue     |  24 ++---
 .../EmbedPlaceholder.test.ts.snap             | 101 ++----------------
 .../EmbedPlaceholderPur.vue                   |  23 ++--
 .../EmbedPodigeeConsent.test.ts.snap          |  12 +--
 .../EmbedPodigeePlaceholder.vue               |   5 +-
 .../EmbedPodigeePlaceholder.test.ts.snap      |  12 +--
 .../EmbedPodigeePlaceholderPur.vue            |   5 +-
 .../EmbedPodigeePlaceholderPur.test.ts.snap   |   8 +-
 .../EmbedSocialNetworksConsent.test.ts.snap   |  88 +++++++--------
 .../EmbedSocialNetworksPlaceholder.vue        |  87 ++++++---------
 ...mbedSocialNetworksPlaceholder.test.ts.snap |  88 +++++++--------
 .../EmbedSocialNetworksPlaceholderPur.vue     |  38 +++++--
 .../EmbedTwitterConsent.test.ts.snap          |  62 ++---------
 .../EmbedTwitterPlaceholder.vue               |  59 +---------
 .../EmbedTwitterPlaceholder.test.ts.snap      |  62 ++---------
 .../EmbedTwitterPlaceholderPur.vue            |  13 +--
 .../EmbedYoutubeConsent.test.ts.snap          |  47 ++++----
 .../EmbedYoutubePlaceholder.vue               |  45 ++++----
 .../EmbedYoutubePlaceholder.test.ts.snap      |  47 ++++----
 .../EmbedYoutubePlaceholderPur.vue            |  28 +++--
 29 files changed, 392 insertions(+), 920 deletions(-)

diff --git a/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap b/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap
index a38681f..f087060 100644
--- a/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap
+++ b/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap
@@ -10,111 +10,34 @@ exports[`EmbedConsent component should render the placeholder by default 1`] = `
   >
     <svg
       fill="none"
-      height="265"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="62"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="88"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="61"
-        x="38"
-        y="75"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="173"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="199"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="61"
-        x="38"
-        y="186"
-      />
-       
-      <path
-        d="M289.782 110.125L313 78L343 78"
-        stroke="#868E96"
-        stroke-width="3"
-      />
-       
       <path
-        d="M287.287 170.75C292.847 161.12 296.117 150.339 296.845 139.242C297.572 128.145 295.737 117.03 291.481 106.756C287.226 96.4817 280.663 87.3243 272.303 79.9919C263.942 72.6596 254.006 67.3489 243.264 64.4707L239.511 78.4766C248.105 80.7792 256.053 85.0278 262.742 90.8936C269.431 96.7595 274.68 104.085 278.085 112.305C281.49 120.524 282.958 129.416 282.376 138.294C281.794 147.171 279.178 155.796 274.729 163.5L287.287 170.75Z"
-        fill="#868E96"
+        d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
+        fill="#CED4DA"
+        opacity="0.4"
       />
        
       <path
-        d="M241.671 64.0628C230.542 61.3497 218.928 61.3124 207.781 63.954C196.635 66.5956 186.273 71.8409 177.545 79.26C168.817 86.6791 161.971 96.0608 157.568 106.636C153.166 117.212 151.332 128.68 152.217 140.101L166.673 138.981C165.965 129.844 167.433 120.669 170.955 112.209C174.477 103.749 179.953 96.2433 186.936 90.308C193.918 84.3727 202.208 80.1765 211.125 78.0632C220.042 75.9499 229.333 75.9797 238.237 78.1502L241.671 64.0628Z"
+        d="M72.8214 45.8522L42.6667 37.7723V6.77197C59.8294 8.13047 73.3334 22.4883 73.3334 40.0002C73.3334 41.9967 72.8214 45.8522 72.8214 45.8522Z"
         fill="#CED4DA"
+        opacity="0.6"
       />
        
       <path
-        d="M152.396 142.061C153.976 157.128 160.236 171.321 170.296 182.647C180.357 193.974 193.713 201.864 208.489 205.209C223.264 208.555 238.716 207.188 252.675 201.301C266.633 195.414 278.397 185.302 286.314 172.386L273.951 164.808C267.618 175.142 258.207 183.231 247.04 187.941C235.873 192.651 223.511 193.744 211.691 191.067C199.871 188.391 189.186 182.079 181.137 173.018C173.088 163.957 168.08 152.602 166.816 140.549L152.396 142.061Z"
+        d="M37.3334 6.77197C20.1707 8.13047 6.66675 22.4883 6.66675 40.0002C6.66675 58.4097 21.5906 73.3335 40.0001 73.3335C48.1951 73.3335 55.6994 70.3762 61.504 65.4706L37.3669 41.3335H37.3334V6.77197Z"
         fill="#CED4DA"
       />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="81"
-        x="349"
-        y="62"
-      />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="81"
-        x="349"
-        y="88"
-      />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="61"
-        x="349"
-        y="75"
-      />
     </svg>
   </div>
    
   <div
     class="embed-placeholder__headline"
   >
-    
-      An dieser Stelle findest du Inhalte von Drittanbietern
-    
+     An dieser Stelle findest du Inhalte von Drittanbietern 
   </div>
    
   <div
@@ -128,9 +51,7 @@ exports[`EmbedConsent component should render the placeholder by default 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-          externen Inhalt aktivieren
-        
+     externen Inhalt aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap b/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap
index 517bb4a..5114331 100644
--- a/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap
+++ b/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap
@@ -10,58 +10,14 @@ exports[`EmbedFacebookConsent component should render the placeholder by default
   >
     <svg
       fill="none"
-      height="84"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="16"
-        cy="16"
-        fill="#E9ECEF"
-        r="16"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="40"
-        y="7"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="6"
-        width="40"
-        x="40"
-        y="19"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="44"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="60"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="75%"
-        y="76"
-      />
-       
       <path
-        d="M20 10.0611C20 4.50451 15.5229 0 10 0C4.47715 0 0 4.50451 0 10.0611C0 15.0828 3.65684 19.2452 8.4375 20V12.9694H5.89844V10.0611H8.4375V7.84452C8.4375 5.32296 9.93047 3.93012 12.2146 3.93012C13.3088 3.93012 14.4531 4.12663 14.4531 4.12663V6.60261H13.1922C11.95 6.60261 11.5625 7.37822 11.5625 8.17387V10.0611H14.3359L13.8926 12.9694H11.5625V20C16.3432 19.2452 20 15.0828 20 10.0611Z"
-        fill="#1877F2"
-        style="transform: translateX(calc(100% - 20px));"
+        d="M73.3334 40.2035C73.3334 21.6815 58.4095 6.6665 40 6.6665C21.5905 6.6665 6.66669 21.6815 6.66669 40.2035C6.66669 56.9426 18.8561 70.8172 34.7917 73.3332V49.8979H26.3281V40.2035H34.7917V32.8149C34.7917 24.4097 39.7683 19.7669 47.3822 19.7669C51.0293 19.7669 54.8438 20.4219 54.8438 20.4219V28.6752H50.6406C46.5 28.6752 45.2084 31.2606 45.2084 33.9127V40.2035H54.4531L52.9753 49.8979H45.2084V73.3332C61.1439 70.8172 73.3334 56.9426 73.3334 40.2035Z"
+        fill="#CED4DA"
       />
     </svg>
   </div>
@@ -69,9 +25,7 @@ exports[`EmbedFacebookConsent component should render the placeholder by default
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus Facebook
-  
+     An dieser Stelle findest du Inhalte aus Facebook 
   </div>
    
   <div
@@ -86,9 +40,7 @@ exports[`EmbedFacebookConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue b/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue
index 8a2f380..e77f12c 100644
--- a/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue
+++ b/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue
@@ -1,63 +1,14 @@
 <template>
-  <embed-social-networks-placeholder
-    :privacy-manager-id="privacyManagerId"
-    :vendor-id="vendorId"
-  >
+  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
     <template #header>
-      <svg
-        width="100%"
-        height="84"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          r="16"
-          fill="#E9ECEF"
-        />
-        <rect
-          x="40"
-          y="7"
-          width="60"
-          height="10"
-          fill="#E9ECEF"
-        />
-        <rect
-          x="40"
-          y="19"
-          width="40"
-          height="6"
-          fill="#E9ECEF"
-        />
-        <rect
-          y="44"
-          width="100%"
-          height="8"
-          fill="#E9ECEF"
-        />
-        <rect
-          y="60"
-          width="100%"
-          height="8"
-          fill="#E9ECEF"
-        />
-        <rect
-          y="76"
-          width="75%"
-          height="8"
-          fill="#E9ECEF"
-        />
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-          style="transform: translateX(calc(100% - 20px));"
-          d="M20 10.0611C20 4.50451 15.5229 0 10 0C4.47715 0 0 4.50451 0 10.0611C0 15.0828 3.65684 19.2452 8.4375 20V12.9694H5.89844V10.0611H8.4375V7.84452C8.4375 5.32296 9.93047 3.93012 12.2146 3.93012C13.3088 3.93012 14.4531 4.12663 14.4531 4.12663V6.60261H13.1922C11.95 6.60261 11.5625 7.37822 11.5625 8.17387V10.0611H14.3359L13.8926 12.9694H11.5625V20C16.3432 19.2452 20 15.0828 20 10.0611Z"
-          fill="#1877F2"
+          d="M73.3334 40.2035C73.3334 21.6815 58.4095 6.6665 40 6.6665C21.5905 6.6665 6.66669 21.6815 6.66669 40.2035C6.66669 56.9426 18.8561 70.8172 34.7917 73.3332V49.8979H26.3281V40.2035H34.7917V32.8149C34.7917 24.4097 39.7683 19.7669 47.3822 19.7669C51.0293 19.7669 54.8438 20.4219 54.8438 20.4219V28.6752H50.6406C46.5 28.6752 45.2084 31.2606 45.2084 33.9127V40.2035H54.4531L52.9753 49.8979H45.2084V73.3332C61.1439 70.8172 73.3334 56.9426 73.3334 40.2035Z"
+          fill="#CED4DA"
         />
       </svg>
     </template>
-    <template #headline>
-      An dieser Stelle findest du Inhalte aus Facebook
-    </template>
+    <template #headline> An dieser Stelle findest du Inhalte aus Facebook </template>
     <template #description>
       Um mit Inhalten aus Facebook und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir
       deine Zustimmung.
diff --git a/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap b/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap
index 978d93e..ccc8b55 100644
--- a/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap
@@ -10,58 +10,14 @@ exports[`EmbedFacebookPlaceholder should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="84"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="16"
-        cy="16"
-        fill="#E9ECEF"
-        r="16"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="40"
-        y="7"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="6"
-        width="40"
-        x="40"
-        y="19"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="44"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="60"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="75%"
-        y="76"
-      />
-       
       <path
-        d="M20 10.0611C20 4.50451 15.5229 0 10 0C4.47715 0 0 4.50451 0 10.0611C0 15.0828 3.65684 19.2452 8.4375 20V12.9694H5.89844V10.0611H8.4375V7.84452C8.4375 5.32296 9.93047 3.93012 12.2146 3.93012C13.3088 3.93012 14.4531 4.12663 14.4531 4.12663V6.60261H13.1922C11.95 6.60261 11.5625 7.37822 11.5625 8.17387V10.0611H14.3359L13.8926 12.9694H11.5625V20C16.3432 19.2452 20 15.0828 20 10.0611Z"
-        fill="#1877F2"
-        style="transform: translateX(calc(100% - 20px));"
+        d="M73.3334 40.2035C73.3334 21.6815 58.4095 6.6665 40 6.6665C21.5905 6.6665 6.66669 21.6815 6.66669 40.2035C6.66669 56.9426 18.8561 70.8172 34.7917 73.3332V49.8979H26.3281V40.2035H34.7917V32.8149C34.7917 24.4097 39.7683 19.7669 47.3822 19.7669C51.0293 19.7669 54.8438 20.4219 54.8438 20.4219V28.6752H50.6406C46.5 28.6752 45.2084 31.2606 45.2084 33.9127V40.2035H54.4531L52.9753 49.8979H45.2084V73.3332C61.1439 70.8172 73.3334 56.9426 73.3334 40.2035Z"
+        fill="#CED4DA"
       />
     </svg>
   </div>
@@ -69,9 +25,7 @@ exports[`EmbedFacebookPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus Facebook
-  
+     An dieser Stelle findest du Inhalte aus Facebook 
   </div>
    
   <div
@@ -86,9 +40,7 @@ exports[`EmbedFacebookPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue b/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue
index 611ed74..44bfa2a 100644
--- a/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue
+++ b/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue
@@ -6,17 +6,10 @@
     :switch-label="'Facebook freigeben'"
   >
     <template #header>
-      <svg width="100%" height="84" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="16" cy="16" r="16" fill="#E9ECEF" />
-        <rect x="40" y="7" width="60" height="10" fill="#E9ECEF" />
-        <rect x="40" y="19" width="40" height="6" fill="#E9ECEF" />
-        <rect y="44" width="100%" height="8" fill="#E9ECEF" />
-        <rect y="60" width="100%" height="8" fill="#E9ECEF" />
-        <rect y="76" width="75%" height="8" fill="#E9ECEF" />
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-          style="transform: translateX(calc(100% - 20px))"
-          d="M20 10.0611C20 4.50451 15.5229 0 10 0C4.47715 0 0 4.50451 0 10.0611C0 15.0828 3.65684 19.2452 8.4375 20V12.9694H5.89844V10.0611H8.4375V7.84452C8.4375 5.32296 9.93047 3.93012 12.2146 3.93012C13.3088 3.93012 14.4531 4.12663 14.4531 4.12663V6.60261H13.1922C11.95 6.60261 11.5625 7.37822 11.5625 8.17387V10.0611H14.3359L13.8926 12.9694H11.5625V20C16.3432 19.2452 20 15.0828 20 10.0611Z"
-          fill="#1877F2"
+          d="M73.3334 40.2035C73.3334 21.6815 58.4095 6.6665 40 6.6665C21.5905 6.6665 6.66669 21.6815 6.66669 40.2035C6.66669 56.9426 18.8561 70.8172 34.7917 73.3332V49.8979H26.3281V40.2035H34.7917V32.8149C34.7917 24.4097 39.7683 19.7669 47.3822 19.7669C51.0293 19.7669 54.8438 20.4219 54.8438 20.4219V28.6752H50.6406C46.5 28.6752 45.2084 31.2606 45.2084 33.9127V40.2035H54.4531L52.9753 49.8979H45.2084V73.3332C61.1439 70.8172 73.3334 56.9426 73.3334 40.2035Z"
+          fill="#CED4DA"
         />
       </svg>
     </template>
diff --git a/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap b/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap
index 0fbe6b1..ccdf86b 100644
--- a/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap
+++ b/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap
@@ -10,43 +10,24 @@ exports[`EmbedInstagramConsent component should render the placeholder by defaul
   >
     <svg
       fill="none"
-      height="312"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="12"
-        cy="12"
-        fill="#E9ECEF"
-        r="12"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="32"
-        y="7"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="100%"
-        style="height: calc(100% - 32px);"
-        width="100%"
-        y="32"
+      <path
+        d="M40.0002 12.6724C48.9013 12.6724 49.9545 12.7068 53.4702 12.8669C56.7199 13.0151 58.4851 13.5576 59.6601 14.0141C61.2161 14.6188 62.3263 15.3413 63.4933 16.507C64.6604 17.6741 65.3828 18.7842 65.9862 20.3403C66.4427 21.5152 66.9852 23.2804 67.1334 26.5301C67.2935 30.0445 67.3279 31.0991 67.3279 40.0001C67.3279 48.9011 67.2935 49.9544 67.1334 53.4701C66.9852 56.7198 66.4427 58.4849 65.9862 59.6599C65.3815 61.216 64.659 62.3261 63.4933 63.4932C62.3263 64.6602 61.2161 65.3827 59.6601 65.9861C58.4851 66.4426 56.7199 66.9851 53.4702 67.1333C49.9558 67.2934 48.9013 67.3278 40.0002 67.3278C31.0992 67.3278 30.0446 67.2934 26.5302 67.1333C23.2805 66.9851 21.5154 66.4426 20.3404 65.9861C18.7843 65.3814 17.6742 64.6589 16.5072 63.4932C15.3401 62.3261 14.6177 61.216 14.0143 59.6599C13.5578 58.4849 13.0153 56.7198 12.8671 53.4701C12.707 49.9557 12.6726 48.9011 12.6726 40.0001C12.6726 31.0991 12.707 30.0458 12.8671 26.5301C13.0153 23.2804 13.5578 21.5152 14.0143 20.3403C14.619 18.7842 15.3414 17.6741 16.5072 16.507C17.6742 15.34 18.7843 14.6175 20.3404 14.0141C21.5154 13.5576 23.2805 13.0151 26.5302 12.8669C30.0459 12.7068 31.0992 12.6724 40.0002 12.6724ZM40.0002 6.6665C30.947 6.6665 29.8117 6.70488 26.2564 6.86763C22.7089 7.02906 20.2848 7.59273 18.1651 8.41707C15.9726 9.2692 14.1135 10.4085 12.2611 12.2622C10.4086 14.1147 9.26803 15.9738 8.4159 18.165C7.59156 20.2847 7.02788 22.7088 6.86646 26.2562C6.70503 29.8116 6.66666 30.9469 6.66666 40.0001C6.66666 49.0533 6.70503 50.1886 6.86778 53.744C7.02921 57.2914 7.59288 59.7155 8.41722 61.8352C9.26935 64.0278 10.4086 65.8868 12.2624 67.7393C14.1162 69.5931 15.9739 70.7323 18.1664 71.5844C20.2862 72.4088 22.7102 72.9725 26.2577 73.1339C29.8131 73.2966 30.9484 73.335 40.0016 73.335C49.0548 73.335 50.19 73.2966 53.7454 73.1339C57.2929 72.9725 59.717 72.4088 61.8367 71.5844C64.0292 70.7323 65.8883 69.5931 67.7407 67.7393C69.5945 65.8855 70.7338 64.0278 71.5859 61.8352C72.4102 59.7155 72.9739 57.2914 73.1353 53.744C73.2981 50.1886 73.3365 49.0533 73.3365 40.0001C73.3365 30.9469 73.2981 29.8116 73.1353 26.2562C72.9739 22.7088 72.4102 20.2847 71.5859 18.165C70.7338 15.9724 69.5945 14.1134 67.7407 12.2609C65.8869 10.4071 64.0292 9.26788 61.8367 8.41575C59.717 7.59141 57.2929 7.02773 53.7454 6.8663C50.1887 6.70488 49.0534 6.6665 40.0002 6.6665Z"
+        fill="#CED4DA"
       />
        
       <path
-        d="M11.6001 0H28.4001C34.8001 0 40.0001 5.2 40.0001 11.6V28.4C40.0001 31.4765 38.778 34.427 36.6026 36.6024C34.4271 38.7779 31.4766 40 28.4001 40H11.6001C5.20012 40 0.00012207 34.8 0.00012207 28.4V11.6C0.00012207 8.52349 1.22226 5.57298 3.39768 3.39756C5.57311 1.22214 8.52361 0 11.6001 0ZM11.2001 4C9.29056 4 7.45922 4.75857 6.10895 6.10883C4.75869 7.45909 4.00012 9.29044 4.00012 11.2V28.8C4.00012 32.78 7.22012 36 11.2001 36H28.8001C30.7097 36 32.541 35.2414 33.8913 33.8912C35.2416 32.5409 36.0001 30.7096 36.0001 28.8V11.2C36.0001 7.22 32.7801 4 28.8001 4H11.2001ZM30.5001 7C31.1632 7 31.799 7.26339 32.2679 7.73223C32.7367 8.20107 33.0001 8.83696 33.0001 9.5C33.0001 10.163 32.7367 10.7989 32.2679 11.2678C31.799 11.7366 31.1632 12 30.5001 12C29.8371 12 29.2012 11.7366 28.7324 11.2678C28.2635 10.7989 28.0001 10.163 28.0001 9.5C28.0001 8.83696 28.2635 8.20107 28.7324 7.73223C29.2012 7.26339 29.8371 7 30.5001 7ZM20.0001 10C22.6523 10 25.1958 11.0536 27.0712 12.9289C28.9466 14.8043 30.0001 17.3478 30.0001 20C30.0001 22.6522 28.9466 25.1957 27.0712 27.0711C25.1958 28.9464 22.6523 30 20.0001 30C17.348 30 14.8044 28.9464 12.9291 27.0711C11.0537 25.1957 10.0001 22.6522 10.0001 20C10.0001 17.3478 11.0537 14.8043 12.9291 12.9289C14.8044 11.0536 17.348 10 20.0001 10ZM20.0001 14C18.4088 14 16.8827 14.6321 15.7575 15.7574C14.6323 16.8826 14.0001 18.4087 14.0001 20C14.0001 21.5913 14.6323 23.1174 15.7575 24.2426C16.8827 25.3679 18.4088 26 20.0001 26C21.5914 26 23.1175 25.3679 24.2428 24.2426C25.368 23.1174 26.0001 21.5913 26.0001 20C26.0001 18.4087 25.368 16.8826 24.2428 15.7574C23.1175 14.6321 21.5914 14 20.0001 14Z"
-        fill="#868E96"
-        style="transform: translate(calc(50% - 20px), 50%);"
+        d="M40.0003 22.8833C30.5462 22.8833 22.8837 30.5472 22.8837 39.9999C22.8837 49.4527 30.5462 57.1166 40.0003 57.1166C49.4545 57.1166 57.117 49.4541 57.117 39.9999C57.117 30.5458 49.4545 22.8833 40.0003 22.8833ZM40.0003 51.1107C33.8634 51.1107 28.8896 46.1355 28.8896 39.9999C28.8896 33.8644 33.8647 28.8892 40.0003 28.8892C46.1372 28.8892 51.1111 33.8644 51.1111 39.9999C51.1111 46.1355 46.1372 51.1107 40.0003 51.1107Z"
+        fill="#CED4DA"
       />
        
       <path
-        d="M5.80006 0H14.2001C17.4001 0 20.0001 2.6 20.0001 5.8V14.2C20.0001 15.7383 19.389 17.2135 18.3013 18.3012C17.2136 19.3889 15.7383 20 14.2001 20H5.80006C2.60006 20 6.10352e-05 17.4 6.10352e-05 14.2V5.8C6.10352e-05 4.26174 0.611131 2.78649 1.69884 1.69878C2.78655 0.61107 4.26181 0 5.80006 0ZM5.60006 2C4.64528 2 3.72961 2.37928 3.05448 3.05442C2.37935 3.72955 2.00006 4.64522 2.00006 5.6V14.4C2.00006 16.39 3.61006 18 5.60006 18H14.4001C15.3548 18 16.2705 17.6207 16.9456 16.9456C17.6208 16.2705 18.0001 15.3548 18.0001 14.4V5.6C18.0001 3.61 16.3901 2 14.4001 2H5.60006ZM15.2501 3.5C15.5816 3.5 15.8995 3.6317 16.1339 3.86612C16.3684 4.10054 16.5001 4.41848 16.5001 4.75C16.5001 5.08152 16.3684 5.39946 16.1339 5.63388C15.8995 5.8683 15.5816 6 15.2501 6C14.9185 6 14.6006 5.8683 14.3662 5.63388C14.1318 5.39946 14.0001 5.08152 14.0001 4.75C14.0001 4.41848 14.1318 4.10054 14.3662 3.86612C14.6006 3.6317 14.9185 3.5 15.2501 3.5ZM10.0001 5C11.3261 5 12.5979 5.52678 13.5356 6.46447C14.4733 7.40215 15.0001 8.67392 15.0001 10C15.0001 11.3261 14.4733 12.5979 13.5356 13.5355C12.5979 14.4732 11.3261 15 10.0001 15C8.67398 15 7.40221 14.4732 6.46453 13.5355C5.52684 12.5979 5.00006 11.3261 5.00006 10C5.00006 8.67392 5.52684 7.40215 6.46453 6.46447C7.40221 5.52678 8.67398 5 10.0001 5ZM10.0001 7C9.20441 7 8.44135 7.31607 7.87874 7.87868C7.31613 8.44129 7.00006 9.20435 7.00006 10C7.00006 10.7956 7.31613 11.5587 7.87874 12.1213C8.44135 12.6839 9.20441 13 10.0001 13C10.7957 13 11.5588 12.6839 12.1214 12.1213C12.684 11.5587 13.0001 10.7956 13.0001 10C13.0001 9.20435 12.684 8.44129 12.1214 7.87868C11.5588 7.31607 10.7957 7 10.0001 7Z"
-        fill="black"
-        style="transform: translateX(calc(100% - 20px));"
+        d="M57.7944 26.206C60.0035 26.206 61.7943 24.4152 61.7943 22.206C61.7943 19.9969 60.0035 18.2061 57.7944 18.2061C55.5853 18.2061 53.7944 19.9969 53.7944 22.206C53.7944 24.4152 55.5853 26.206 57.7944 26.206Z"
+        fill="#CED4DA"
       />
     </svg>
   </div>
@@ -54,9 +35,7 @@ exports[`EmbedInstagramConsent component should render the placeholder by defaul
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus Instagram
-  
+     An dieser Stelle findest du Inhalte aus Instagram 
   </div>
    
   <div
@@ -71,9 +50,7 @@ exports[`EmbedInstagramConsent component should render the placeholder by defaul
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue b/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue
index ebd8d77..07f0619 100644
--- a/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue
+++ b/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue
@@ -1,50 +1,22 @@
 <template>
-  <embed-social-networks-placeholder
-    :privacy-manager-id="privacyManagerId"
-    :vendor-id="vendorId"
-  >
+  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
     <template #header>
-      <svg
-        width="100%"
-        height="312"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="12"
-          cy="12"
-          r="12"
-          fill="#E9ECEF"
-        />
-        <rect
-          x="32"
-          y="7"
-          width="60"
-          height="10"
-          fill="#E9ECEF"
-        />
-        <rect
-          y="32"
-          width="100%"
-          height="100%"
-          fill="#E9ECEF"
-          style="height: calc(100% - 32px);"
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          d="M40.0002 12.6724C48.9013 12.6724 49.9545 12.7068 53.4702 12.8669C56.7199 13.0151 58.4851 13.5576 59.6601 14.0141C61.2161 14.6188 62.3263 15.3413 63.4933 16.507C64.6604 17.6741 65.3828 18.7842 65.9862 20.3403C66.4427 21.5152 66.9852 23.2804 67.1334 26.5301C67.2935 30.0445 67.3279 31.0991 67.3279 40.0001C67.3279 48.9011 67.2935 49.9544 67.1334 53.4701C66.9852 56.7198 66.4427 58.4849 65.9862 59.6599C65.3815 61.216 64.659 62.3261 63.4933 63.4932C62.3263 64.6602 61.2161 65.3827 59.6601 65.9861C58.4851 66.4426 56.7199 66.9851 53.4702 67.1333C49.9558 67.2934 48.9013 67.3278 40.0002 67.3278C31.0992 67.3278 30.0446 67.2934 26.5302 67.1333C23.2805 66.9851 21.5154 66.4426 20.3404 65.9861C18.7843 65.3814 17.6742 64.6589 16.5072 63.4932C15.3401 62.3261 14.6177 61.216 14.0143 59.6599C13.5578 58.4849 13.0153 56.7198 12.8671 53.4701C12.707 49.9557 12.6726 48.9011 12.6726 40.0001C12.6726 31.0991 12.707 30.0458 12.8671 26.5301C13.0153 23.2804 13.5578 21.5152 14.0143 20.3403C14.619 18.7842 15.3414 17.6741 16.5072 16.507C17.6742 15.34 18.7843 14.6175 20.3404 14.0141C21.5154 13.5576 23.2805 13.0151 26.5302 12.8669C30.0459 12.7068 31.0992 12.6724 40.0002 12.6724ZM40.0002 6.6665C30.947 6.6665 29.8117 6.70488 26.2564 6.86763C22.7089 7.02906 20.2848 7.59273 18.1651 8.41707C15.9726 9.2692 14.1135 10.4085 12.2611 12.2622C10.4086 14.1147 9.26803 15.9738 8.4159 18.165C7.59156 20.2847 7.02788 22.7088 6.86646 26.2562C6.70503 29.8116 6.66666 30.9469 6.66666 40.0001C6.66666 49.0533 6.70503 50.1886 6.86778 53.744C7.02921 57.2914 7.59288 59.7155 8.41722 61.8352C9.26935 64.0278 10.4086 65.8868 12.2624 67.7393C14.1162 69.5931 15.9739 70.7323 18.1664 71.5844C20.2862 72.4088 22.7102 72.9725 26.2577 73.1339C29.8131 73.2966 30.9484 73.335 40.0016 73.335C49.0548 73.335 50.19 73.2966 53.7454 73.1339C57.2929 72.9725 59.717 72.4088 61.8367 71.5844C64.0292 70.7323 65.8883 69.5931 67.7407 67.7393C69.5945 65.8855 70.7338 64.0278 71.5859 61.8352C72.4102 59.7155 72.9739 57.2914 73.1353 53.744C73.2981 50.1886 73.3365 49.0533 73.3365 40.0001C73.3365 30.9469 73.2981 29.8116 73.1353 26.2562C72.9739 22.7088 72.4102 20.2847 71.5859 18.165C70.7338 15.9724 69.5945 14.1134 67.7407 12.2609C65.8869 10.4071 64.0292 9.26788 61.8367 8.41575C59.717 7.59141 57.2929 7.02773 53.7454 6.8663C50.1887 6.70488 49.0534 6.6665 40.0002 6.6665Z"
+          fill="#CED4DA"
         />
         <path
-          style="transform: translate(calc(50% - 20px), 50%);"
-          d="M11.6001 0H28.4001C34.8001 0 40.0001 5.2 40.0001 11.6V28.4C40.0001 31.4765 38.778 34.427 36.6026 36.6024C34.4271 38.7779 31.4766 40 28.4001 40H11.6001C5.20012 40 0.00012207 34.8 0.00012207 28.4V11.6C0.00012207 8.52349 1.22226 5.57298 3.39768 3.39756C5.57311 1.22214 8.52361 0 11.6001 0ZM11.2001 4C9.29056 4 7.45922 4.75857 6.10895 6.10883C4.75869 7.45909 4.00012 9.29044 4.00012 11.2V28.8C4.00012 32.78 7.22012 36 11.2001 36H28.8001C30.7097 36 32.541 35.2414 33.8913 33.8912C35.2416 32.5409 36.0001 30.7096 36.0001 28.8V11.2C36.0001 7.22 32.7801 4 28.8001 4H11.2001ZM30.5001 7C31.1632 7 31.799 7.26339 32.2679 7.73223C32.7367 8.20107 33.0001 8.83696 33.0001 9.5C33.0001 10.163 32.7367 10.7989 32.2679 11.2678C31.799 11.7366 31.1632 12 30.5001 12C29.8371 12 29.2012 11.7366 28.7324 11.2678C28.2635 10.7989 28.0001 10.163 28.0001 9.5C28.0001 8.83696 28.2635 8.20107 28.7324 7.73223C29.2012 7.26339 29.8371 7 30.5001 7ZM20.0001 10C22.6523 10 25.1958 11.0536 27.0712 12.9289C28.9466 14.8043 30.0001 17.3478 30.0001 20C30.0001 22.6522 28.9466 25.1957 27.0712 27.0711C25.1958 28.9464 22.6523 30 20.0001 30C17.348 30 14.8044 28.9464 12.9291 27.0711C11.0537 25.1957 10.0001 22.6522 10.0001 20C10.0001 17.3478 11.0537 14.8043 12.9291 12.9289C14.8044 11.0536 17.348 10 20.0001 10ZM20.0001 14C18.4088 14 16.8827 14.6321 15.7575 15.7574C14.6323 16.8826 14.0001 18.4087 14.0001 20C14.0001 21.5913 14.6323 23.1174 15.7575 24.2426C16.8827 25.3679 18.4088 26 20.0001 26C21.5914 26 23.1175 25.3679 24.2428 24.2426C25.368 23.1174 26.0001 21.5913 26.0001 20C26.0001 18.4087 25.368 16.8826 24.2428 15.7574C23.1175 14.6321 21.5914 14 20.0001 14Z"
-          fill="#868E96"
+          d="M40.0003 22.8833C30.5462 22.8833 22.8837 30.5472 22.8837 39.9999C22.8837 49.4527 30.5462 57.1166 40.0003 57.1166C49.4545 57.1166 57.117 49.4541 57.117 39.9999C57.117 30.5458 49.4545 22.8833 40.0003 22.8833ZM40.0003 51.1107C33.8634 51.1107 28.8896 46.1355 28.8896 39.9999C28.8896 33.8644 33.8647 28.8892 40.0003 28.8892C46.1372 28.8892 51.1111 33.8644 51.1111 39.9999C51.1111 46.1355 46.1372 51.1107 40.0003 51.1107Z"
+          fill="#CED4DA"
         />
         <path
-          style="transform: translateX(calc(100% - 20px));"
-          d="M5.80006 0H14.2001C17.4001 0 20.0001 2.6 20.0001 5.8V14.2C20.0001 15.7383 19.389 17.2135 18.3013 18.3012C17.2136 19.3889 15.7383 20 14.2001 20H5.80006C2.60006 20 6.10352e-05 17.4 6.10352e-05 14.2V5.8C6.10352e-05 4.26174 0.611131 2.78649 1.69884 1.69878C2.78655 0.61107 4.26181 0 5.80006 0ZM5.60006 2C4.64528 2 3.72961 2.37928 3.05448 3.05442C2.37935 3.72955 2.00006 4.64522 2.00006 5.6V14.4C2.00006 16.39 3.61006 18 5.60006 18H14.4001C15.3548 18 16.2705 17.6207 16.9456 16.9456C17.6208 16.2705 18.0001 15.3548 18.0001 14.4V5.6C18.0001 3.61 16.3901 2 14.4001 2H5.60006ZM15.2501 3.5C15.5816 3.5 15.8995 3.6317 16.1339 3.86612C16.3684 4.10054 16.5001 4.41848 16.5001 4.75C16.5001 5.08152 16.3684 5.39946 16.1339 5.63388C15.8995 5.8683 15.5816 6 15.2501 6C14.9185 6 14.6006 5.8683 14.3662 5.63388C14.1318 5.39946 14.0001 5.08152 14.0001 4.75C14.0001 4.41848 14.1318 4.10054 14.3662 3.86612C14.6006 3.6317 14.9185 3.5 15.2501 3.5ZM10.0001 5C11.3261 5 12.5979 5.52678 13.5356 6.46447C14.4733 7.40215 15.0001 8.67392 15.0001 10C15.0001 11.3261 14.4733 12.5979 13.5356 13.5355C12.5979 14.4732 11.3261 15 10.0001 15C8.67398 15 7.40221 14.4732 6.46453 13.5355C5.52684 12.5979 5.00006 11.3261 5.00006 10C5.00006 8.67392 5.52684 7.40215 6.46453 6.46447C7.40221 5.52678 8.67398 5 10.0001 5ZM10.0001 7C9.20441 7 8.44135 7.31607 7.87874 7.87868C7.31613 8.44129 7.00006 9.20435 7.00006 10C7.00006 10.7956 7.31613 11.5587 7.87874 12.1213C8.44135 12.6839 9.20441 13 10.0001 13C10.7957 13 11.5588 12.6839 12.1214 12.1213C12.684 11.5587 13.0001 10.7956 13.0001 10C13.0001 9.20435 12.684 8.44129 12.1214 7.87868C11.5588 7.31607 10.7957 7 10.0001 7Z"
-          fill="black"
+          d="M57.7944 26.206C60.0035 26.206 61.7943 24.4152 61.7943 22.206C61.7943 19.9969 60.0035 18.2061 57.7944 18.2061C55.5853 18.2061 53.7944 19.9969 53.7944 22.206C53.7944 24.4152 55.5853 26.206 57.7944 26.206Z"
+          fill="#CED4DA"
         />
       </svg>
     </template>
-    <template #headline>
-      An dieser Stelle findest du Inhalte aus Instagram
-    </template>
+    <template #headline> An dieser Stelle findest du Inhalte aus Instagram </template>
     <template #description>
       Um mit Inhalten aus Instagram und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen
       wir deine Zustimmung.
diff --git a/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap b/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap
index 4d1b0d3..ea2e33d 100644
--- a/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap
@@ -10,43 +10,24 @@ exports[`EmbedInstagramPlaceholder should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="312"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="12"
-        cy="12"
-        fill="#E9ECEF"
-        r="12"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="32"
-        y="7"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="100%"
-        style="height: calc(100% - 32px);"
-        width="100%"
-        y="32"
+      <path
+        d="M40.0002 12.6724C48.9013 12.6724 49.9545 12.7068 53.4702 12.8669C56.7199 13.0151 58.4851 13.5576 59.6601 14.0141C61.2161 14.6188 62.3263 15.3413 63.4933 16.507C64.6604 17.6741 65.3828 18.7842 65.9862 20.3403C66.4427 21.5152 66.9852 23.2804 67.1334 26.5301C67.2935 30.0445 67.3279 31.0991 67.3279 40.0001C67.3279 48.9011 67.2935 49.9544 67.1334 53.4701C66.9852 56.7198 66.4427 58.4849 65.9862 59.6599C65.3815 61.216 64.659 62.3261 63.4933 63.4932C62.3263 64.6602 61.2161 65.3827 59.6601 65.9861C58.4851 66.4426 56.7199 66.9851 53.4702 67.1333C49.9558 67.2934 48.9013 67.3278 40.0002 67.3278C31.0992 67.3278 30.0446 67.2934 26.5302 67.1333C23.2805 66.9851 21.5154 66.4426 20.3404 65.9861C18.7843 65.3814 17.6742 64.6589 16.5072 63.4932C15.3401 62.3261 14.6177 61.216 14.0143 59.6599C13.5578 58.4849 13.0153 56.7198 12.8671 53.4701C12.707 49.9557 12.6726 48.9011 12.6726 40.0001C12.6726 31.0991 12.707 30.0458 12.8671 26.5301C13.0153 23.2804 13.5578 21.5152 14.0143 20.3403C14.619 18.7842 15.3414 17.6741 16.5072 16.507C17.6742 15.34 18.7843 14.6175 20.3404 14.0141C21.5154 13.5576 23.2805 13.0151 26.5302 12.8669C30.0459 12.7068 31.0992 12.6724 40.0002 12.6724ZM40.0002 6.6665C30.947 6.6665 29.8117 6.70488 26.2564 6.86763C22.7089 7.02906 20.2848 7.59273 18.1651 8.41707C15.9726 9.2692 14.1135 10.4085 12.2611 12.2622C10.4086 14.1147 9.26803 15.9738 8.4159 18.165C7.59156 20.2847 7.02788 22.7088 6.86646 26.2562C6.70503 29.8116 6.66666 30.9469 6.66666 40.0001C6.66666 49.0533 6.70503 50.1886 6.86778 53.744C7.02921 57.2914 7.59288 59.7155 8.41722 61.8352C9.26935 64.0278 10.4086 65.8868 12.2624 67.7393C14.1162 69.5931 15.9739 70.7323 18.1664 71.5844C20.2862 72.4088 22.7102 72.9725 26.2577 73.1339C29.8131 73.2966 30.9484 73.335 40.0016 73.335C49.0548 73.335 50.19 73.2966 53.7454 73.1339C57.2929 72.9725 59.717 72.4088 61.8367 71.5844C64.0292 70.7323 65.8883 69.5931 67.7407 67.7393C69.5945 65.8855 70.7338 64.0278 71.5859 61.8352C72.4102 59.7155 72.9739 57.2914 73.1353 53.744C73.2981 50.1886 73.3365 49.0533 73.3365 40.0001C73.3365 30.9469 73.2981 29.8116 73.1353 26.2562C72.9739 22.7088 72.4102 20.2847 71.5859 18.165C70.7338 15.9724 69.5945 14.1134 67.7407 12.2609C65.8869 10.4071 64.0292 9.26788 61.8367 8.41575C59.717 7.59141 57.2929 7.02773 53.7454 6.8663C50.1887 6.70488 49.0534 6.6665 40.0002 6.6665Z"
+        fill="#CED4DA"
       />
        
       <path
-        d="M11.6001 0H28.4001C34.8001 0 40.0001 5.2 40.0001 11.6V28.4C40.0001 31.4765 38.778 34.427 36.6026 36.6024C34.4271 38.7779 31.4766 40 28.4001 40H11.6001C5.20012 40 0.00012207 34.8 0.00012207 28.4V11.6C0.00012207 8.52349 1.22226 5.57298 3.39768 3.39756C5.57311 1.22214 8.52361 0 11.6001 0ZM11.2001 4C9.29056 4 7.45922 4.75857 6.10895 6.10883C4.75869 7.45909 4.00012 9.29044 4.00012 11.2V28.8C4.00012 32.78 7.22012 36 11.2001 36H28.8001C30.7097 36 32.541 35.2414 33.8913 33.8912C35.2416 32.5409 36.0001 30.7096 36.0001 28.8V11.2C36.0001 7.22 32.7801 4 28.8001 4H11.2001ZM30.5001 7C31.1632 7 31.799 7.26339 32.2679 7.73223C32.7367 8.20107 33.0001 8.83696 33.0001 9.5C33.0001 10.163 32.7367 10.7989 32.2679 11.2678C31.799 11.7366 31.1632 12 30.5001 12C29.8371 12 29.2012 11.7366 28.7324 11.2678C28.2635 10.7989 28.0001 10.163 28.0001 9.5C28.0001 8.83696 28.2635 8.20107 28.7324 7.73223C29.2012 7.26339 29.8371 7 30.5001 7ZM20.0001 10C22.6523 10 25.1958 11.0536 27.0712 12.9289C28.9466 14.8043 30.0001 17.3478 30.0001 20C30.0001 22.6522 28.9466 25.1957 27.0712 27.0711C25.1958 28.9464 22.6523 30 20.0001 30C17.348 30 14.8044 28.9464 12.9291 27.0711C11.0537 25.1957 10.0001 22.6522 10.0001 20C10.0001 17.3478 11.0537 14.8043 12.9291 12.9289C14.8044 11.0536 17.348 10 20.0001 10ZM20.0001 14C18.4088 14 16.8827 14.6321 15.7575 15.7574C14.6323 16.8826 14.0001 18.4087 14.0001 20C14.0001 21.5913 14.6323 23.1174 15.7575 24.2426C16.8827 25.3679 18.4088 26 20.0001 26C21.5914 26 23.1175 25.3679 24.2428 24.2426C25.368 23.1174 26.0001 21.5913 26.0001 20C26.0001 18.4087 25.368 16.8826 24.2428 15.7574C23.1175 14.6321 21.5914 14 20.0001 14Z"
-        fill="#868E96"
-        style="transform: translate(calc(50% - 20px), 50%);"
+        d="M40.0003 22.8833C30.5462 22.8833 22.8837 30.5472 22.8837 39.9999C22.8837 49.4527 30.5462 57.1166 40.0003 57.1166C49.4545 57.1166 57.117 49.4541 57.117 39.9999C57.117 30.5458 49.4545 22.8833 40.0003 22.8833ZM40.0003 51.1107C33.8634 51.1107 28.8896 46.1355 28.8896 39.9999C28.8896 33.8644 33.8647 28.8892 40.0003 28.8892C46.1372 28.8892 51.1111 33.8644 51.1111 39.9999C51.1111 46.1355 46.1372 51.1107 40.0003 51.1107Z"
+        fill="#CED4DA"
       />
        
       <path
-        d="M5.80006 0H14.2001C17.4001 0 20.0001 2.6 20.0001 5.8V14.2C20.0001 15.7383 19.389 17.2135 18.3013 18.3012C17.2136 19.3889 15.7383 20 14.2001 20H5.80006C2.60006 20 6.10352e-05 17.4 6.10352e-05 14.2V5.8C6.10352e-05 4.26174 0.611131 2.78649 1.69884 1.69878C2.78655 0.61107 4.26181 0 5.80006 0ZM5.60006 2C4.64528 2 3.72961 2.37928 3.05448 3.05442C2.37935 3.72955 2.00006 4.64522 2.00006 5.6V14.4C2.00006 16.39 3.61006 18 5.60006 18H14.4001C15.3548 18 16.2705 17.6207 16.9456 16.9456C17.6208 16.2705 18.0001 15.3548 18.0001 14.4V5.6C18.0001 3.61 16.3901 2 14.4001 2H5.60006ZM15.2501 3.5C15.5816 3.5 15.8995 3.6317 16.1339 3.86612C16.3684 4.10054 16.5001 4.41848 16.5001 4.75C16.5001 5.08152 16.3684 5.39946 16.1339 5.63388C15.8995 5.8683 15.5816 6 15.2501 6C14.9185 6 14.6006 5.8683 14.3662 5.63388C14.1318 5.39946 14.0001 5.08152 14.0001 4.75C14.0001 4.41848 14.1318 4.10054 14.3662 3.86612C14.6006 3.6317 14.9185 3.5 15.2501 3.5ZM10.0001 5C11.3261 5 12.5979 5.52678 13.5356 6.46447C14.4733 7.40215 15.0001 8.67392 15.0001 10C15.0001 11.3261 14.4733 12.5979 13.5356 13.5355C12.5979 14.4732 11.3261 15 10.0001 15C8.67398 15 7.40221 14.4732 6.46453 13.5355C5.52684 12.5979 5.00006 11.3261 5.00006 10C5.00006 8.67392 5.52684 7.40215 6.46453 6.46447C7.40221 5.52678 8.67398 5 10.0001 5ZM10.0001 7C9.20441 7 8.44135 7.31607 7.87874 7.87868C7.31613 8.44129 7.00006 9.20435 7.00006 10C7.00006 10.7956 7.31613 11.5587 7.87874 12.1213C8.44135 12.6839 9.20441 13 10.0001 13C10.7957 13 11.5588 12.6839 12.1214 12.1213C12.684 11.5587 13.0001 10.7956 13.0001 10C13.0001 9.20435 12.684 8.44129 12.1214 7.87868C11.5588 7.31607 10.7957 7 10.0001 7Z"
-        fill="black"
-        style="transform: translateX(calc(100% - 20px));"
+        d="M57.7944 26.206C60.0035 26.206 61.7943 24.4152 61.7943 22.206C61.7943 19.9969 60.0035 18.2061 57.7944 18.2061C55.5853 18.2061 53.7944 19.9969 53.7944 22.206C53.7944 24.4152 55.5853 26.206 57.7944 26.206Z"
+        fill="#CED4DA"
       />
     </svg>
   </div>
@@ -54,9 +35,7 @@ exports[`EmbedInstagramPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus Instagram
-  
+     An dieser Stelle findest du Inhalte aus Instagram 
   </div>
    
   <div
@@ -71,9 +50,7 @@ exports[`EmbedInstagramPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue b/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue
index 21995b6..4ce75e8 100644
--- a/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue
+++ b/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue
@@ -6,19 +6,18 @@
     :switch-label="'Instagram freigeben'"
   >
     <template #header>
-      <svg width="100%" height="312" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="12" cy="12" r="12" fill="#E9ECEF" />
-        <rect x="32" y="7" width="60" height="10" fill="#E9ECEF" />
-        <rect y="32" width="100%" height="100%" fill="#E9ECEF" style="height: calc(100% - 32px)" />
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-          style="transform: translate(calc(50% - 20px), 50%)"
-          d="M11.6001 0H28.4001C34.8001 0 40.0001 5.2 40.0001 11.6V28.4C40.0001 31.4765 38.778 34.427 36.6026 36.6024C34.4271 38.7779 31.4766 40 28.4001 40H11.6001C5.20012 40 0.00012207 34.8 0.00012207 28.4V11.6C0.00012207 8.52349 1.22226 5.57298 3.39768 3.39756C5.57311 1.22214 8.52361 0 11.6001 0ZM11.2001 4C9.29056 4 7.45922 4.75857 6.10895 6.10883C4.75869 7.45909 4.00012 9.29044 4.00012 11.2V28.8C4.00012 32.78 7.22012 36 11.2001 36H28.8001C30.7097 36 32.541 35.2414 33.8913 33.8912C35.2416 32.5409 36.0001 30.7096 36.0001 28.8V11.2C36.0001 7.22 32.7801 4 28.8001 4H11.2001ZM30.5001 7C31.1632 7 31.799 7.26339 32.2679 7.73223C32.7367 8.20107 33.0001 8.83696 33.0001 9.5C33.0001 10.163 32.7367 10.7989 32.2679 11.2678C31.799 11.7366 31.1632 12 30.5001 12C29.8371 12 29.2012 11.7366 28.7324 11.2678C28.2635 10.7989 28.0001 10.163 28.0001 9.5C28.0001 8.83696 28.2635 8.20107 28.7324 7.73223C29.2012 7.26339 29.8371 7 30.5001 7ZM20.0001 10C22.6523 10 25.1958 11.0536 27.0712 12.9289C28.9466 14.8043 30.0001 17.3478 30.0001 20C30.0001 22.6522 28.9466 25.1957 27.0712 27.0711C25.1958 28.9464 22.6523 30 20.0001 30C17.348 30 14.8044 28.9464 12.9291 27.0711C11.0537 25.1957 10.0001 22.6522 10.0001 20C10.0001 17.3478 11.0537 14.8043 12.9291 12.9289C14.8044 11.0536 17.348 10 20.0001 10ZM20.0001 14C18.4088 14 16.8827 14.6321 15.7575 15.7574C14.6323 16.8826 14.0001 18.4087 14.0001 20C14.0001 21.5913 14.6323 23.1174 15.7575 24.2426C16.8827 25.3679 18.4088 26 20.0001 26C21.5914 26 23.1175 25.3679 24.2428 24.2426C25.368 23.1174 26.0001 21.5913 26.0001 20C26.0001 18.4087 25.368 16.8826 24.2428 15.7574C23.1175 14.6321 21.5914 14 20.0001 14Z"
-          fill="#868E96"
+          d="M40.0002 12.6724C48.9013 12.6724 49.9545 12.7068 53.4702 12.8669C56.7199 13.0151 58.4851 13.5576 59.6601 14.0141C61.2161 14.6188 62.3263 15.3413 63.4933 16.507C64.6604 17.6741 65.3828 18.7842 65.9862 20.3403C66.4427 21.5152 66.9852 23.2804 67.1334 26.5301C67.2935 30.0445 67.3279 31.0991 67.3279 40.0001C67.3279 48.9011 67.2935 49.9544 67.1334 53.4701C66.9852 56.7198 66.4427 58.4849 65.9862 59.6599C65.3815 61.216 64.659 62.3261 63.4933 63.4932C62.3263 64.6602 61.2161 65.3827 59.6601 65.9861C58.4851 66.4426 56.7199 66.9851 53.4702 67.1333C49.9558 67.2934 48.9013 67.3278 40.0002 67.3278C31.0992 67.3278 30.0446 67.2934 26.5302 67.1333C23.2805 66.9851 21.5154 66.4426 20.3404 65.9861C18.7843 65.3814 17.6742 64.6589 16.5072 63.4932C15.3401 62.3261 14.6177 61.216 14.0143 59.6599C13.5578 58.4849 13.0153 56.7198 12.8671 53.4701C12.707 49.9557 12.6726 48.9011 12.6726 40.0001C12.6726 31.0991 12.707 30.0458 12.8671 26.5301C13.0153 23.2804 13.5578 21.5152 14.0143 20.3403C14.619 18.7842 15.3414 17.6741 16.5072 16.507C17.6742 15.34 18.7843 14.6175 20.3404 14.0141C21.5154 13.5576 23.2805 13.0151 26.5302 12.8669C30.0459 12.7068 31.0992 12.6724 40.0002 12.6724ZM40.0002 6.6665C30.947 6.6665 29.8117 6.70488 26.2564 6.86763C22.7089 7.02906 20.2848 7.59273 18.1651 8.41707C15.9726 9.2692 14.1135 10.4085 12.2611 12.2622C10.4086 14.1147 9.26803 15.9738 8.4159 18.165C7.59156 20.2847 7.02788 22.7088 6.86646 26.2562C6.70503 29.8116 6.66666 30.9469 6.66666 40.0001C6.66666 49.0533 6.70503 50.1886 6.86778 53.744C7.02921 57.2914 7.59288 59.7155 8.41722 61.8352C9.26935 64.0278 10.4086 65.8868 12.2624 67.7393C14.1162 69.5931 15.9739 70.7323 18.1664 71.5844C20.2862 72.4088 22.7102 72.9725 26.2577 73.1339C29.8131 73.2966 30.9484 73.335 40.0016 73.335C49.0548 73.335 50.19 73.2966 53.7454 73.1339C57.2929 72.9725 59.717 72.4088 61.8367 71.5844C64.0292 70.7323 65.8883 69.5931 67.7407 67.7393C69.5945 65.8855 70.7338 64.0278 71.5859 61.8352C72.4102 59.7155 72.9739 57.2914 73.1353 53.744C73.2981 50.1886 73.3365 49.0533 73.3365 40.0001C73.3365 30.9469 73.2981 29.8116 73.1353 26.2562C72.9739 22.7088 72.4102 20.2847 71.5859 18.165C70.7338 15.9724 69.5945 14.1134 67.7407 12.2609C65.8869 10.4071 64.0292 9.26788 61.8367 8.41575C59.717 7.59141 57.2929 7.02773 53.7454 6.8663C50.1887 6.70488 49.0534 6.6665 40.0002 6.6665Z"
+          fill="#CED4DA"
         />
         <path
-          style="transform: translateX(calc(100% - 20px))"
-          d="M5.80006 0H14.2001C17.4001 0 20.0001 2.6 20.0001 5.8V14.2C20.0001 15.7383 19.389 17.2135 18.3013 18.3012C17.2136 19.3889 15.7383 20 14.2001 20H5.80006C2.60006 20 6.10352e-05 17.4 6.10352e-05 14.2V5.8C6.10352e-05 4.26174 0.611131 2.78649 1.69884 1.69878C2.78655 0.61107 4.26181 0 5.80006 0ZM5.60006 2C4.64528 2 3.72961 2.37928 3.05448 3.05442C2.37935 3.72955 2.00006 4.64522 2.00006 5.6V14.4C2.00006 16.39 3.61006 18 5.60006 18H14.4001C15.3548 18 16.2705 17.6207 16.9456 16.9456C17.6208 16.2705 18.0001 15.3548 18.0001 14.4V5.6C18.0001 3.61 16.3901 2 14.4001 2H5.60006ZM15.2501 3.5C15.5816 3.5 15.8995 3.6317 16.1339 3.86612C16.3684 4.10054 16.5001 4.41848 16.5001 4.75C16.5001 5.08152 16.3684 5.39946 16.1339 5.63388C15.8995 5.8683 15.5816 6 15.2501 6C14.9185 6 14.6006 5.8683 14.3662 5.63388C14.1318 5.39946 14.0001 5.08152 14.0001 4.75C14.0001 4.41848 14.1318 4.10054 14.3662 3.86612C14.6006 3.6317 14.9185 3.5 15.2501 3.5ZM10.0001 5C11.3261 5 12.5979 5.52678 13.5356 6.46447C14.4733 7.40215 15.0001 8.67392 15.0001 10C15.0001 11.3261 14.4733 12.5979 13.5356 13.5355C12.5979 14.4732 11.3261 15 10.0001 15C8.67398 15 7.40221 14.4732 6.46453 13.5355C5.52684 12.5979 5.00006 11.3261 5.00006 10C5.00006 8.67392 5.52684 7.40215 6.46453 6.46447C7.40221 5.52678 8.67398 5 10.0001 5ZM10.0001 7C9.20441 7 8.44135 7.31607 7.87874 7.87868C7.31613 8.44129 7.00006 9.20435 7.00006 10C7.00006 10.7956 7.31613 11.5587 7.87874 12.1213C8.44135 12.6839 9.20441 13 10.0001 13C10.7957 13 11.5588 12.6839 12.1214 12.1213C12.684 11.5587 13.0001 10.7956 13.0001 10C13.0001 9.20435 12.684 8.44129 12.1214 7.87868C11.5588 7.31607 10.7957 7 10.0001 7Z"
-          fill="black"
+          d="M40.0003 22.8833C30.5462 22.8833 22.8837 30.5472 22.8837 39.9999C22.8837 49.4527 30.5462 57.1166 40.0003 57.1166C49.4545 57.1166 57.117 49.4541 57.117 39.9999C57.117 30.5458 49.4545 22.8833 40.0003 22.8833ZM40.0003 51.1107C33.8634 51.1107 28.8896 46.1355 28.8896 39.9999C28.8896 33.8644 33.8647 28.8892 40.0003 28.8892C46.1372 28.8892 51.1111 33.8644 51.1111 39.9999C51.1111 46.1355 46.1372 51.1107 40.0003 51.1107Z"
+          fill="#CED4DA"
+        />
+        <path
+          d="M57.7944 26.206C60.0035 26.206 61.7943 24.4152 61.7943 22.206C61.7943 19.9969 60.0035 18.2061 57.7944 18.2061C55.5853 18.2061 53.7944 19.9969 53.7944 22.206C53.7944 24.4152 55.5853 26.206 57.7944 26.206Z"
+          fill="#CED4DA"
         />
       </svg>
     </template>
diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
index 7d878c9..6a1f700 100644
--- a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
+++ b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -2,29 +2,21 @@
   <div class="embed-placeholder__container" :data-vendor-id="vendorId">
     <div class="embed-placeholder__header">
       <slot name="header">
-        <svg width="100%" height="265" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect x="38" y="62" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="88" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="75" width="61" height="8" fill="#E9ECEF" />
-          <rect x="38" y="173" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="199" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="186" width="61" height="8" fill="#E9ECEF" />
-          <path d="M289.782 110.125L313 78L343 78" stroke="#868E96" stroke-width="3" />
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
-            d="M287.287 170.75C292.847 161.12 296.117 150.339 296.845 139.242C297.572 128.145 295.737 117.03 291.481 106.756C287.226 96.4817 280.663 87.3243 272.303 79.9919C263.942 72.6596 254.006 67.3489 243.264 64.4707L239.511 78.4766C248.105 80.7792 256.053 85.0278 262.742 90.8936C269.431 96.7595 274.68 104.085 278.085 112.305C281.49 120.524 282.958 129.416 282.376 138.294C281.794 147.171 279.178 155.796 274.729 163.5L287.287 170.75Z"
-            fill="#868E96"
+            opacity="0.4"
+            d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
+            fill="#CED4DA"
           />
           <path
-            d="M241.671 64.0628C230.542 61.3497 218.928 61.3124 207.781 63.954C196.635 66.5956 186.273 71.8409 177.545 79.26C168.817 86.6791 161.971 96.0608 157.568 106.636C153.166 117.212 151.332 128.68 152.217 140.101L166.673 138.981C165.965 129.844 167.433 120.669 170.955 112.209C174.477 103.749 179.953 96.2433 186.936 90.308C193.918 84.3727 202.208 80.1765 211.125 78.0632C220.042 75.9499 229.333 75.9797 238.237 78.1502L241.671 64.0628Z"
+            opacity="0.6"
+            d="M72.8214 45.8522L42.6667 37.7723V6.77197C59.8294 8.13047 73.3334 22.4883 73.3334 40.0002C73.3334 41.9967 72.8214 45.8522 72.8214 45.8522Z"
             fill="#CED4DA"
           />
           <path
-            d="M152.396 142.061C153.976 157.128 160.236 171.321 170.296 182.647C180.357 193.974 193.713 201.864 208.489 205.209C223.264 208.555 238.716 207.188 252.675 201.301C266.633 195.414 278.397 185.302 286.314 172.386L273.951 164.808C267.618 175.142 258.207 183.231 247.04 187.941C235.873 192.651 223.511 193.744 211.691 191.067C199.871 188.391 189.186 182.079 181.137 173.018C173.088 163.957 168.08 152.602 166.816 140.549L152.396 142.061Z"
+            d="M37.3334 6.77197C20.1707 8.13047 6.66675 22.4883 6.66675 40.0002C6.66675 58.4097 21.5906 73.3335 40.0001 73.3335C48.1951 73.3335 55.6994 70.3762 61.504 65.4706L37.3669 41.3335H37.3334V6.77197Z"
             fill="#CED4DA"
           />
-          <rect x="349" y="62" width="81" height="8" fill="#868E96" />
-          <rect x="349" y="88" width="81" height="8" fill="#868E96" />
-          <rect x="349" y="75" width="61" height="8" fill="#868E96" />
         </svg>
       </slot>
     </div>
@@ -122,6 +114,7 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   margin: 0 auto;
   display: flex;
   flex-direction: column;
+  aspect-ratio: 1;
 }
 
 .embed-placeholder__header {
@@ -135,6 +128,7 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
 
   display: flex;
   justify-content: center;
+  align-items: center;
   flex: 1;
 }
 
diff --git a/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap b/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap
index 615833a..b33251e 100644
--- a/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap
@@ -10,111 +10,34 @@ exports[`EmbedPlaceholder should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="265"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="62"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="88"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="61"
-        x="38"
-        y="75"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="173"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="81"
-        x="38"
-        y="199"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="61"
-        x="38"
-        y="186"
-      />
-       
-      <path
-        d="M289.782 110.125L313 78L343 78"
-        stroke="#868E96"
-        stroke-width="3"
-      />
-       
       <path
-        d="M287.287 170.75C292.847 161.12 296.117 150.339 296.845 139.242C297.572 128.145 295.737 117.03 291.481 106.756C287.226 96.4817 280.663 87.3243 272.303 79.9919C263.942 72.6596 254.006 67.3489 243.264 64.4707L239.511 78.4766C248.105 80.7792 256.053 85.0278 262.742 90.8936C269.431 96.7595 274.68 104.085 278.085 112.305C281.49 120.524 282.958 129.416 282.376 138.294C281.794 147.171 279.178 155.796 274.729 163.5L287.287 170.75Z"
-        fill="#868E96"
+        d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
+        fill="#CED4DA"
+        opacity="0.4"
       />
        
       <path
-        d="M241.671 64.0628C230.542 61.3497 218.928 61.3124 207.781 63.954C196.635 66.5956 186.273 71.8409 177.545 79.26C168.817 86.6791 161.971 96.0608 157.568 106.636C153.166 117.212 151.332 128.68 152.217 140.101L166.673 138.981C165.965 129.844 167.433 120.669 170.955 112.209C174.477 103.749 179.953 96.2433 186.936 90.308C193.918 84.3727 202.208 80.1765 211.125 78.0632C220.042 75.9499 229.333 75.9797 238.237 78.1502L241.671 64.0628Z"
+        d="M72.8214 45.8522L42.6667 37.7723V6.77197C59.8294 8.13047 73.3334 22.4883 73.3334 40.0002C73.3334 41.9967 72.8214 45.8522 72.8214 45.8522Z"
         fill="#CED4DA"
+        opacity="0.6"
       />
        
       <path
-        d="M152.396 142.061C153.976 157.128 160.236 171.321 170.296 182.647C180.357 193.974 193.713 201.864 208.489 205.209C223.264 208.555 238.716 207.188 252.675 201.301C266.633 195.414 278.397 185.302 286.314 172.386L273.951 164.808C267.618 175.142 258.207 183.231 247.04 187.941C235.873 192.651 223.511 193.744 211.691 191.067C199.871 188.391 189.186 182.079 181.137 173.018C173.088 163.957 168.08 152.602 166.816 140.549L152.396 142.061Z"
+        d="M37.3334 6.77197C20.1707 8.13047 6.66675 22.4883 6.66675 40.0002C6.66675 58.4097 21.5906 73.3335 40.0001 73.3335C48.1951 73.3335 55.6994 70.3762 61.504 65.4706L37.3669 41.3335H37.3334V6.77197Z"
         fill="#CED4DA"
       />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="81"
-        x="349"
-        y="62"
-      />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="81"
-        x="349"
-        y="88"
-      />
-       
-      <rect
-        fill="#868E96"
-        height="8"
-        width="61"
-        x="349"
-        y="75"
-      />
     </svg>
   </div>
    
   <div
     class="embed-placeholder__headline"
   >
-    
-      An dieser Stelle findest du Inhalte von Drittanbietern
-    
+     An dieser Stelle findest du Inhalte von Drittanbietern 
   </div>
    
   <div
@@ -128,9 +51,7 @@ exports[`EmbedPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-          externen Inhalt aktivieren
-        
+     externen Inhalt aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
index 2ab147f..b62e070 100644
--- a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
+++ b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
@@ -2,29 +2,21 @@
   <div class="embed-placeholder__container" :data-vendor-id="vendorId">
     <div class="embed-placeholder__header--pur">
       <slot name="header">
-        <svg width="100%" height="265" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <rect x="38" y="62" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="88" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="75" width="61" height="8" fill="#E9ECEF" />
-          <rect x="38" y="173" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="199" width="81" height="8" fill="#E9ECEF" />
-          <rect x="38" y="186" width="61" height="8" fill="#E9ECEF" />
-          <path d="M289.782 110.125L313 78L343 78" stroke="#868E96" stroke-width="3" />
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
-            d="M287.287 170.75C292.847 161.12 296.117 150.339 296.845 139.242C297.572 128.145 295.737 117.03 291.481 106.756C287.226 96.4817 280.663 87.3243 272.303 79.9919C263.942 72.6596 254.006 67.3489 243.264 64.4707L239.511 78.4766C248.105 80.7792 256.053 85.0278 262.742 90.8936C269.431 96.7595 274.68 104.085 278.085 112.305C281.49 120.524 282.958 129.416 282.376 138.294C281.794 147.171 279.178 155.796 274.729 163.5L287.287 170.75Z"
-            fill="#868E96"
+            opacity="0.4"
+            d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
+            fill="#CED4DA"
           />
           <path
-            d="M241.671 64.0628C230.542 61.3497 218.928 61.3124 207.781 63.954C196.635 66.5956 186.273 71.8409 177.545 79.26C168.817 86.6791 161.971 96.0608 157.568 106.636C153.166 117.212 151.332 128.68 152.217 140.101L166.673 138.981C165.965 129.844 167.433 120.669 170.955 112.209C174.477 103.749 179.953 96.2433 186.936 90.308C193.918 84.3727 202.208 80.1765 211.125 78.0632C220.042 75.9499 229.333 75.9797 238.237 78.1502L241.671 64.0628Z"
+            opacity="0.6"
+            d="M72.8214 45.8522L42.6667 37.7723V6.77197C59.8294 8.13047 73.3334 22.4883 73.3334 40.0002C73.3334 41.9967 72.8214 45.8522 72.8214 45.8522Z"
             fill="#CED4DA"
           />
           <path
-            d="M152.396 142.061C153.976 157.128 160.236 171.321 170.296 182.647C180.357 193.974 193.713 201.864 208.489 205.209C223.264 208.555 238.716 207.188 252.675 201.301C266.633 195.414 278.397 185.302 286.314 172.386L273.951 164.808C267.618 175.142 258.207 183.231 247.04 187.941C235.873 192.651 223.511 193.744 211.691 191.067C199.871 188.391 189.186 182.079 181.137 173.018C173.088 163.957 168.08 152.602 166.816 140.549L152.396 142.061Z"
+            d="M37.3334 6.77197C20.1707 8.13047 6.66675 22.4883 6.66675 40.0002C6.66675 58.4097 21.5906 73.3335 40.0001 73.3335C48.1951 73.3335 55.6994 70.3762 61.504 65.4706L37.3669 41.3335H37.3334V6.77197Z"
             fill="#CED4DA"
           />
-          <rect x="349" y="62" width="81" height="8" fill="#868E96" />
-          <rect x="349" y="88" width="81" height="8" fill="#868E96" />
-          <rect x="349" y="75" width="61" height="8" fill="#868E96" />
         </svg>
       </slot>
     </div>
@@ -149,6 +141,7 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
 
   display: flex;
   justify-content: center;
+  align-items: center;
   flex: 1;
 }
 
diff --git a/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap b/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap
index dc6816d..9151d80 100644
--- a/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap
+++ b/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap
@@ -10,15 +10,15 @@ exports[`EmbedPodigeeConsent component should render the placeholder by default
   >
     <svg
       fill="none"
-      height="172"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8.81401 2.93521C6.15111 1.24064 2.6665 3.15348 2.6665 6.30985V45.6898C2.6665 48.8462 6.15111 50.759 8.81401 49.0645L39.7554 29.3745C42.2254 27.8027 42.2254 24.197 39.7554 22.6252L8.81401 2.93521Z"
+        d="M30.814 16.9352C28.1511 15.2406 24.6665 17.1535 24.6665 20.3099V59.6898C24.6665 62.8462 28.1511 64.759 30.814 63.0645L61.7554 43.3745C64.2254 41.8027 64.2254 38.197 61.7554 36.6252L30.814 16.9352Z"
         stroke="#CED4DA"
         stroke-width="4"
-        style="transform: translate(calc(50% - 18px), calc(50% - 18px)) scale(0.9);"
       />
     </svg>
   </div>
@@ -41,9 +41,7 @@ exports[`EmbedPodigeeConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-    
-          externen Inhalt aktivieren
-        
+     externen Inhalt aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue b/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue
index 03522ca..f0f4874 100644
--- a/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue
+++ b/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue
@@ -1,10 +1,9 @@
 <template>
   <embed-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
     <template #header>
-      <svg width="100%" height="172" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-          style="transform: translate(calc(50% - 18px), calc(50% - 18px)) scale(0.9)"
-          d="M8.81401 2.93521C6.15111 1.24064 2.6665 3.15348 2.6665 6.30985V45.6898C2.6665 48.8462 6.15111 50.759 8.81401 49.0645L39.7554 29.3745C42.2254 27.8027 42.2254 24.197 39.7554 22.6252L8.81401 2.93521Z"
+          d="M30.814 16.9352C28.1511 15.2406 24.6665 17.1535 24.6665 20.3099V59.6898C24.6665 62.8462 28.1511 64.759 30.814 63.0645L61.7554 43.3745C64.2254 41.8027 64.2254 38.197 61.7554 36.6252L30.814 16.9352Z"
           stroke="#CED4DA"
           stroke-width="4"
         />
diff --git a/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap b/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap
index 4fc59af..6202396 100644
--- a/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap
@@ -10,15 +10,15 @@ exports[`EmbedPodigeePlaceholder should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="172"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8.81401 2.93521C6.15111 1.24064 2.6665 3.15348 2.6665 6.30985V45.6898C2.6665 48.8462 6.15111 50.759 8.81401 49.0645L39.7554 29.3745C42.2254 27.8027 42.2254 24.197 39.7554 22.6252L8.81401 2.93521Z"
+        d="M30.814 16.9352C28.1511 15.2406 24.6665 17.1535 24.6665 20.3099V59.6898C24.6665 62.8462 28.1511 64.759 30.814 63.0645L61.7554 43.3745C64.2254 41.8027 64.2254 38.197 61.7554 36.6252L30.814 16.9352Z"
         stroke="#CED4DA"
         stroke-width="4"
-        style="transform: translate(calc(50% - 18px), calc(50% - 18px)) scale(0.9);"
       />
     </svg>
   </div>
@@ -41,9 +41,7 @@ exports[`EmbedPodigeePlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-          externen Inhalt aktivieren
-        
+     externen Inhalt aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue b/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue
index 3819d40..3fb2b3a 100644
--- a/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue
+++ b/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue
@@ -6,10 +6,9 @@
     :switch-label="'Podigee freigeben'"
   >
     <template #header>
-      <svg width="100%" height="172" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-          style="transform: translate(calc(50% - 18px), calc(50% - 18px)) scale(0.9)"
-          d="M8.81401 2.93521C6.15111 1.24064 2.6665 3.15348 2.6665 6.30985V45.6898C2.6665 48.8462 6.15111 50.759 8.81401 49.0645L39.7554 29.3745C42.2254 27.8027 42.2254 24.197 39.7554 22.6252L8.81401 2.93521Z"
+          d="M30.814 16.9352C28.1511 15.2406 24.6665 17.1535 24.6665 20.3099V59.6898C24.6665 62.8462 28.1511 64.759 30.814 63.0645L61.7554 43.3745C64.2254 41.8027 64.2254 38.197 61.7554 36.6252L30.814 16.9352Z"
           stroke="#CED4DA"
           stroke-width="4"
         />
diff --git a/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap b/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap
index d32684c..b7a6188 100644
--- a/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap
+++ b/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap
@@ -10,15 +10,15 @@ exports[`EmbedPodigeePlaceholderPur should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="172"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
       <path
-        d="M8.81401 2.93521C6.15111 1.24064 2.6665 3.15348 2.6665 6.30985V45.6898C2.6665 48.8462 6.15111 50.759 8.81401 49.0645L39.7554 29.3745C42.2254 27.8027 42.2254 24.197 39.7554 22.6252L8.81401 2.93521Z"
+        d="M30.814 16.9352C28.1511 15.2406 24.6665 17.1535 24.6665 20.3099V59.6898C24.6665 62.8462 28.1511 64.759 30.814 63.0645L61.7554 43.3745C64.2254 41.8027 64.2254 38.197 61.7554 36.6252L30.814 16.9352Z"
         stroke="#CED4DA"
         stroke-width="4"
-        style="transform: translate(calc(50% - 18px), calc(50% - 18px)) scale(0.9);"
       />
     </svg>
   </div>
diff --git a/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap b/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap
index 5669e08..072c5ba 100644
--- a/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap
+++ b/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap
@@ -22,52 +22,48 @@ exports[`EmbedSocialNetworksConsent component should render the placeholder by d
   >
     <svg
       fill="none"
-      height="84"
-      width="100%"
+      height="80"
+      viewBox="0 0 102 80"
+      width="102"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="16"
-        cy="16"
-        fill="#E9ECEF"
-        r="16"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="40"
-        y="7"
-      />
+      <g
+        opacity="0.3"
+      >
+        <path
+          d="M65.9658 42.7696C68.8825 39.1697 73.3392 36.8686 78.3333 36.8686C83.3274 36.8686 87.7841 39.1697 90.7008 42.7696C89.9041 43.8122 88.9786 44.751 87.948 45.5624C85.7549 42.6446 82.2645 40.7575 78.3333 40.7575C74.4021 40.7575 70.9117 42.6446 68.7186 45.5624C67.688 44.751 66.7625 43.8122 65.9658 42.7696Z"
+          fill="#CED4DA"
+        />
+         
+        <path
+          clip-rule="evenodd"
+          d="M78.3333 35.1009C82.2384 35.1009 85.404 31.9352 85.404 28.0302C85.404 24.1251 82.2384 20.9595 78.3333 20.9595C74.4283 20.9595 71.2626 24.1251 71.2626 28.0302C71.2626 31.9352 74.4283 35.1009 78.3333 35.1009ZM78.3333 31.212C80.0906 31.212 81.5151 29.7875 81.5151 28.0302C81.5151 26.2729 80.0906 24.8484 78.3333 24.8484C76.576 24.8484 75.1515 26.2729 75.1515 28.0302C75.1515 29.7875 76.576 31.212 78.3333 31.212Z"
+          fill="#CED4DA"
+          fill-rule="evenodd"
+        />
+      </g>
        
-      <rect
-        fill="#E9ECEF"
-        height="6"
-        width="40"
-        x="40"
-        y="19"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="44"
-      />
+      <g
+        opacity="0.5"
+      >
+        <path
+          d="M11.2991 42.7696C14.2158 39.1697 18.6724 36.8686 23.6666 36.8686C28.6607 36.8686 33.1174 39.1697 36.0341 42.7696C35.2374 43.8122 34.3119 44.751 33.2813 45.5624C31.0881 42.6446 27.5977 40.7575 23.6666 40.7575C19.7354 40.7575 16.245 42.6446 14.0519 45.5624C13.0213 44.751 12.0958 43.8122 11.2991 42.7696Z"
+          fill="#CED4DA"
+        />
+         
+        <path
+          clip-rule="evenodd"
+          d="M23.6666 35.1009C27.5716 35.1009 30.7373 31.9352 30.7373 28.0302C30.7373 24.1251 27.5716 20.9595 23.6666 20.9595C19.7615 20.9595 16.5959 24.1251 16.5959 28.0302C16.5959 31.9352 19.7615 35.1009 23.6666 35.1009ZM23.6666 31.212C25.4238 31.212 26.8484 29.7875 26.8484 28.0302C26.8484 26.2729 25.4238 24.8484 23.6666 24.8484C21.9093 24.8484 20.4848 26.2729 20.4848 28.0302C20.4848 29.7875 21.9093 31.212 23.6666 31.212Z"
+          fill="#CED4DA"
+          fill-rule="evenodd"
+        />
+      </g>
        
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="60"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="75%"
-        y="76"
+      <path
+        clip-rule="evenodd"
+        d="M62.9892 30.7877C62.9892 37.4821 57.5624 42.9089 50.868 42.9089C44.1737 42.9089 38.7468 37.4821 38.7468 30.7877C38.7468 24.0934 44.1737 18.6665 50.868 18.6665C57.5624 18.6665 62.9892 24.0934 62.9892 30.7877ZM50.868 45.9392C42.3066 45.9392 35.3333 49.8841 30.3333 56.0553L34.3857 58.1763C38.1453 53.1744 44.1289 49.9392 50.868 49.9392C57.6072 49.9392 63.5736 53.1744 67.3333 58.1763L71.3333 56.0553C66.3332 49.8841 59.4294 45.9392 50.868 45.9392ZM58.8888 30.6665C58.8888 35.0848 55.3071 38.6665 50.8888 38.6665C46.4705 38.6665 42.8888 35.0848 42.8888 30.6665C42.8888 26.2482 46.4705 22.6665 50.8888 22.6665C55.3071 22.6665 58.8888 26.2482 58.8888 30.6665Z"
+        fill="#CED4DA"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
@@ -75,9 +71,7 @@ exports[`EmbedSocialNetworksConsent component should render the placeholder by d
   <div
     class="embed-placeholder__headline"
   >
-    
-      An dieser Stelle findest du Inhalte aus sozialen Netzwerken
-    
+     An dieser Stelle findest du Inhalte aus sozialen Netzwerken 
   </div>
    
   <div
@@ -91,9 +85,7 @@ exports[`EmbedSocialNetworksConsent component should render the placeholder by d
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue b/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue
index a616043..c546111 100644
--- a/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue
+++ b/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue
@@ -1,71 +1,50 @@
 <template>
-  <embed-placeholder
-    :privacy-manager-id="privacyManagerId"
-    :purpose-id="purposeId"
-    :vendor-id="vendorId"
-  >
+  <embed-placeholder :privacy-manager-id="privacyManagerId" :purpose-id="purposeId" :vendor-id="vendorId">
     <template #header>
       <slot name="header">
-        <svg
-          width="100%"
-          height="84"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="16"
-            cy="16"
-            r="16"
-            fill="#E9ECEF"
-          />
-          <rect
-            x="40"
-            y="7"
-            width="60"
-            height="10"
-            fill="#E9ECEF"
-          />
-          <rect
-            x="40"
-            y="19"
-            width="40"
-            height="6"
-            fill="#E9ECEF"
-          />
-          <rect
-            y="44"
-            width="100%"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <rect
-            y="60"
-            width="100%"
-            height="8"
-            fill="#E9ECEF"
-          />
-          <rect
-            y="76"
-            width="75%"
-            height="8"
-            fill="#E9ECEF"
+        <svg width="102" height="80" viewBox="0 0 102 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g opacity="0.3">
+            <path
+              d="M65.9658 42.7696C68.8825 39.1697 73.3392 36.8686 78.3333 36.8686C83.3274 36.8686 87.7841 39.1697 90.7008 42.7696C89.9041 43.8122 88.9786 44.751 87.948 45.5624C85.7549 42.6446 82.2645 40.7575 78.3333 40.7575C74.4021 40.7575 70.9117 42.6446 68.7186 45.5624C67.688 44.751 66.7625 43.8122 65.9658 42.7696Z"
+              fill="#CED4DA"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M78.3333 35.1009C82.2384 35.1009 85.404 31.9352 85.404 28.0302C85.404 24.1251 82.2384 20.9595 78.3333 20.9595C74.4283 20.9595 71.2626 24.1251 71.2626 28.0302C71.2626 31.9352 74.4283 35.1009 78.3333 35.1009ZM78.3333 31.212C80.0906 31.212 81.5151 29.7875 81.5151 28.0302C81.5151 26.2729 80.0906 24.8484 78.3333 24.8484C76.576 24.8484 75.1515 26.2729 75.1515 28.0302C75.1515 29.7875 76.576 31.212 78.3333 31.212Z"
+              fill="#CED4DA"
+            />
+          </g>
+          <g opacity="0.5">
+            <path
+              d="M11.2991 42.7696C14.2158 39.1697 18.6724 36.8686 23.6666 36.8686C28.6607 36.8686 33.1174 39.1697 36.0341 42.7696C35.2374 43.8122 34.3119 44.751 33.2813 45.5624C31.0881 42.6446 27.5977 40.7575 23.6666 40.7575C19.7354 40.7575 16.245 42.6446 14.0519 45.5624C13.0213 44.751 12.0958 43.8122 11.2991 42.7696Z"
+              fill="#CED4DA"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M23.6666 35.1009C27.5716 35.1009 30.7373 31.9352 30.7373 28.0302C30.7373 24.1251 27.5716 20.9595 23.6666 20.9595C19.7615 20.9595 16.5959 24.1251 16.5959 28.0302C16.5959 31.9352 19.7615 35.1009 23.6666 35.1009ZM23.6666 31.212C25.4238 31.212 26.8484 29.7875 26.8484 28.0302C26.8484 26.2729 25.4238 24.8484 23.6666 24.8484C21.9093 24.8484 20.4848 26.2729 20.4848 28.0302C20.4848 29.7875 21.9093 31.212 23.6666 31.212Z"
+              fill="#CED4DA"
+            />
+          </g>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M62.9892 30.7877C62.9892 37.4821 57.5624 42.9089 50.868 42.9089C44.1737 42.9089 38.7468 37.4821 38.7468 30.7877C38.7468 24.0934 44.1737 18.6665 50.868 18.6665C57.5624 18.6665 62.9892 24.0934 62.9892 30.7877ZM50.868 45.9392C42.3066 45.9392 35.3333 49.8841 30.3333 56.0553L34.3857 58.1763C38.1453 53.1744 44.1289 49.9392 50.868 49.9392C57.6072 49.9392 63.5736 53.1744 67.3333 58.1763L71.3333 56.0553C66.3332 49.8841 59.4294 45.9392 50.868 45.9392ZM58.8888 30.6665C58.8888 35.0848 55.3071 38.6665 50.8888 38.6665C46.4705 38.6665 42.8888 35.0848 42.8888 30.6665C42.8888 26.2482 46.4705 22.6665 50.8888 22.6665C55.3071 22.6665 58.8888 26.2482 58.8888 30.6665Z"
+            fill="#CED4DA"
           />
         </svg>
       </slot>
     </template>
     <template #headline>
-      <slot name="headline">
-        An dieser Stelle findest du Inhalte aus sozialen Netzwerken
-      </slot>
+      <slot name="headline"> An dieser Stelle findest du Inhalte aus sozialen Netzwerken </slot>
     </template>
     <template #description>
       <slot name="description">
         Um mit Inhalten aus sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir deine Zustimmung.
       </slot>
     </template>
-    <template #buttonLabel>
-      soziale Netzwerke aktivieren
-    </template>
+    <template #buttonLabel> soziale Netzwerke aktivieren </template>
   </embed-placeholder>
 </template>
 
diff --git a/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap b/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap
index 044a773..636f304 100644
--- a/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap
@@ -10,52 +10,48 @@ exports[`EmbedSocialNetworksPlaceholder should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="84"
-      width="100%"
+      height="80"
+      viewBox="0 0 102 80"
+      width="102"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="16"
-        cy="16"
-        fill="#E9ECEF"
-        r="16"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="40"
-        y="7"
-      />
+      <g
+        opacity="0.3"
+      >
+        <path
+          d="M65.9658 42.7696C68.8825 39.1697 73.3392 36.8686 78.3333 36.8686C83.3274 36.8686 87.7841 39.1697 90.7008 42.7696C89.9041 43.8122 88.9786 44.751 87.948 45.5624C85.7549 42.6446 82.2645 40.7575 78.3333 40.7575C74.4021 40.7575 70.9117 42.6446 68.7186 45.5624C67.688 44.751 66.7625 43.8122 65.9658 42.7696Z"
+          fill="#CED4DA"
+        />
+         
+        <path
+          clip-rule="evenodd"
+          d="M78.3333 35.1009C82.2384 35.1009 85.404 31.9352 85.404 28.0302C85.404 24.1251 82.2384 20.9595 78.3333 20.9595C74.4283 20.9595 71.2626 24.1251 71.2626 28.0302C71.2626 31.9352 74.4283 35.1009 78.3333 35.1009ZM78.3333 31.212C80.0906 31.212 81.5151 29.7875 81.5151 28.0302C81.5151 26.2729 80.0906 24.8484 78.3333 24.8484C76.576 24.8484 75.1515 26.2729 75.1515 28.0302C75.1515 29.7875 76.576 31.212 78.3333 31.212Z"
+          fill="#CED4DA"
+          fill-rule="evenodd"
+        />
+      </g>
        
-      <rect
-        fill="#E9ECEF"
-        height="6"
-        width="40"
-        x="40"
-        y="19"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="44"
-      />
+      <g
+        opacity="0.5"
+      >
+        <path
+          d="M11.2991 42.7696C14.2158 39.1697 18.6724 36.8686 23.6666 36.8686C28.6607 36.8686 33.1174 39.1697 36.0341 42.7696C35.2374 43.8122 34.3119 44.751 33.2813 45.5624C31.0881 42.6446 27.5977 40.7575 23.6666 40.7575C19.7354 40.7575 16.245 42.6446 14.0519 45.5624C13.0213 44.751 12.0958 43.8122 11.2991 42.7696Z"
+          fill="#CED4DA"
+        />
+         
+        <path
+          clip-rule="evenodd"
+          d="M23.6666 35.1009C27.5716 35.1009 30.7373 31.9352 30.7373 28.0302C30.7373 24.1251 27.5716 20.9595 23.6666 20.9595C19.7615 20.9595 16.5959 24.1251 16.5959 28.0302C16.5959 31.9352 19.7615 35.1009 23.6666 35.1009ZM23.6666 31.212C25.4238 31.212 26.8484 29.7875 26.8484 28.0302C26.8484 26.2729 25.4238 24.8484 23.6666 24.8484C21.9093 24.8484 20.4848 26.2729 20.4848 28.0302C20.4848 29.7875 21.9093 31.212 23.6666 31.212Z"
+          fill="#CED4DA"
+          fill-rule="evenodd"
+        />
+      </g>
        
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="60"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="75%"
-        y="76"
+      <path
+        clip-rule="evenodd"
+        d="M62.9892 30.7877C62.9892 37.4821 57.5624 42.9089 50.868 42.9089C44.1737 42.9089 38.7468 37.4821 38.7468 30.7877C38.7468 24.0934 44.1737 18.6665 50.868 18.6665C57.5624 18.6665 62.9892 24.0934 62.9892 30.7877ZM50.868 45.9392C42.3066 45.9392 35.3333 49.8841 30.3333 56.0553L34.3857 58.1763C38.1453 53.1744 44.1289 49.9392 50.868 49.9392C57.6072 49.9392 63.5736 53.1744 67.3333 58.1763L71.3333 56.0553C66.3332 49.8841 59.4294 45.9392 50.868 45.9392ZM58.8888 30.6665C58.8888 35.0848 55.3071 38.6665 50.8888 38.6665C46.4705 38.6665 42.8888 35.0848 42.8888 30.6665C42.8888 26.2482 46.4705 22.6665 50.8888 22.6665C55.3071 22.6665 58.8888 26.2482 58.8888 30.6665Z"
+        fill="#CED4DA"
+        fill-rule="evenodd"
       />
     </svg>
   </div>
@@ -63,9 +59,7 @@ exports[`EmbedSocialNetworksPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-    
-      An dieser Stelle findest du Inhalte aus sozialen Netzwerken
-    
+     An dieser Stelle findest du Inhalte aus sozialen Netzwerken 
   </div>
    
   <div
@@ -79,9 +73,7 @@ exports[`EmbedSocialNetworksPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue b/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue
index 06cad00..2f00e23 100644
--- a/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue
+++ b/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue
@@ -7,13 +7,37 @@
   >
     <template #header>
       <slot name="header">
-        <svg width="100%" height="84" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="16" cy="16" r="16" fill="#E9ECEF" />
-          <rect x="40" y="7" width="60" height="10" fill="#E9ECEF" />
-          <rect x="40" y="19" width="40" height="6" fill="#E9ECEF" />
-          <rect y="44" width="100%" height="8" fill="#E9ECEF" />
-          <rect y="60" width="100%" height="8" fill="#E9ECEF" />
-          <rect y="76" width="75%" height="8" fill="#E9ECEF" />
+        <svg width="102" height="80" viewBox="0 0 102 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <g opacity="0.3">
+            <path
+              d="M65.9658 42.7696C68.8825 39.1697 73.3392 36.8686 78.3333 36.8686C83.3274 36.8686 87.7841 39.1697 90.7008 42.7696C89.9041 43.8122 88.9786 44.751 87.948 45.5624C85.7549 42.6446 82.2645 40.7575 78.3333 40.7575C74.4021 40.7575 70.9117 42.6446 68.7186 45.5624C67.688 44.751 66.7625 43.8122 65.9658 42.7696Z"
+              fill="#CED4DA"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M78.3333 35.1009C82.2384 35.1009 85.404 31.9352 85.404 28.0302C85.404 24.1251 82.2384 20.9595 78.3333 20.9595C74.4283 20.9595 71.2626 24.1251 71.2626 28.0302C71.2626 31.9352 74.4283 35.1009 78.3333 35.1009ZM78.3333 31.212C80.0906 31.212 81.5151 29.7875 81.5151 28.0302C81.5151 26.2729 80.0906 24.8484 78.3333 24.8484C76.576 24.8484 75.1515 26.2729 75.1515 28.0302C75.1515 29.7875 76.576 31.212 78.3333 31.212Z"
+              fill="#CED4DA"
+            />
+          </g>
+          <g opacity="0.5">
+            <path
+              d="M11.2991 42.7696C14.2158 39.1697 18.6724 36.8686 23.6666 36.8686C28.6607 36.8686 33.1174 39.1697 36.0341 42.7696C35.2374 43.8122 34.3119 44.751 33.2813 45.5624C31.0881 42.6446 27.5977 40.7575 23.6666 40.7575C19.7354 40.7575 16.245 42.6446 14.0519 45.5624C13.0213 44.751 12.0958 43.8122 11.2991 42.7696Z"
+              fill="#CED4DA"
+            />
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M23.6666 35.1009C27.5716 35.1009 30.7373 31.9352 30.7373 28.0302C30.7373 24.1251 27.5716 20.9595 23.6666 20.9595C19.7615 20.9595 16.5959 24.1251 16.5959 28.0302C16.5959 31.9352 19.7615 35.1009 23.6666 35.1009ZM23.6666 31.212C25.4238 31.212 26.8484 29.7875 26.8484 28.0302C26.8484 26.2729 25.4238 24.8484 23.6666 24.8484C21.9093 24.8484 20.4848 26.2729 20.4848 28.0302C20.4848 29.7875 21.9093 31.212 23.6666 31.212Z"
+              fill="#CED4DA"
+            />
+          </g>
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M62.9892 30.7877C62.9892 37.4821 57.5624 42.9089 50.868 42.9089C44.1737 42.9089 38.7468 37.4821 38.7468 30.7877C38.7468 24.0934 44.1737 18.6665 50.868 18.6665C57.5624 18.6665 62.9892 24.0934 62.9892 30.7877ZM50.868 45.9392C42.3066 45.9392 35.3333 49.8841 30.3333 56.0553L34.3857 58.1763C38.1453 53.1744 44.1289 49.9392 50.868 49.9392C57.6072 49.9392 63.5736 53.1744 67.3333 58.1763L71.3333 56.0553C66.3332 49.8841 59.4294 45.9392 50.868 45.9392ZM58.8888 30.6665C58.8888 35.0848 55.3071 38.6665 50.8888 38.6665C46.4705 38.6665 42.8888 35.0848 42.8888 30.6665C42.8888 26.2482 46.4705 22.6665 50.8888 22.6665C55.3071 22.6665 58.8888 26.2482 58.8888 30.6665Z"
+            fill="#CED4DA"
+          />
         </svg>
       </slot>
     </template>
diff --git a/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap b/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap
index 7153380..10220fd 100644
--- a/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap
+++ b/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap
@@ -10,58 +10,14 @@ exports[`EmbedTwitterConsent component should render the placeholder by default
   >
     <svg
       fill="none"
-      height="84"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="16"
-        cy="16"
-        fill="#E9ECEF"
-        r="16"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="40"
-        y="7"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="6"
-        width="40"
-        x="40"
-        y="19"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="44"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="60"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="75%"
-        y="76"
-      />
-       
       <path
-        d="M19.6 1.8456C18.8952 2.1616 18.1344 2.3704 17.3392 2.464C18.1536 1.9768 18.7752 1.204 19.072 0.284C18.3112 0.7336 17.4664 1.0656 16.5704 1.24C15.8504 0.476 14.8272 0 13.6952 0C11.52 0 9.75762 1.7624 9.75762 3.936C9.75762 4.2448 9.79202 4.5448 9.85922 4.8328C6.58562 4.6672 3.68402 3.1008 1.74242 0.716C1.40482 1.2976 1.20962 1.9752 1.20962 2.696C1.20962 4.0616 1.90322 5.268 2.96082 5.9736C2.31522 5.956 1.70882 5.7744 1.17682 5.4824C1.17682 5.4984 1.17682 5.5168 1.17682 5.532C1.17682 7.4408 2.53362 9.0336 4.33682 9.3936C4.00642 9.4832 3.65762 9.5336 3.29842 9.5336C3.04322 9.5336 2.79922 9.5064 2.55602 9.4616C3.05762 11.024 4.51202 12.1648 6.23442 12.1976C4.88402 13.2552 3.18882 13.8848 1.34082 13.8848C1.02242 13.8848 0.711224 13.8664 0.400024 13.8288C2.14722 14.9504 4.21682 15.5992 6.44082 15.5992C13.6848 15.5992 17.6472 9.596 17.6472 4.3928C17.6472 4.2184 17.644 4.0496 17.6352 3.8808C18.404 3.3304 19.072 2.6368 19.6 1.8456Z"
-        fill="#4AA1EC"
-        style="transform: translateX(calc(100% - 20px));"
+        d="M73.3333 19.7418C70.8861 20.8391 68.2444 21.5641 65.4833 21.8891C68.3111 20.1974 70.4694 17.5141 71.5 14.3196C68.8583 15.8807 65.925 17.0335 62.8139 17.6391C60.3139 14.9863 56.7611 13.3335 52.8305 13.3335C45.2777 13.3335 39.1583 19.4529 39.1583 27.0002C39.1583 28.0724 39.2777 29.1141 39.5111 30.114C28.1444 29.5391 18.0694 24.1002 11.3277 15.8196C10.1555 17.8391 9.47774 20.1918 9.47774 22.6946C9.47774 27.4363 11.8861 31.6252 15.5583 34.0752C13.3166 34.0141 11.2111 33.3835 9.36385 32.3696C9.36385 32.4252 9.36385 32.489 9.36385 32.5418C9.36385 39.1696 14.075 44.7002 20.3361 45.9502C19.1888 46.2613 17.9777 46.4363 16.7305 46.4363C15.8444 46.4363 14.9972 46.3418 14.1527 46.1863C15.8944 51.6113 20.9444 55.5724 26.925 55.6863C22.2361 59.3585 16.35 61.5446 9.93329 61.5446C8.82774 61.5446 7.74718 61.4807 6.66663 61.3502C12.7333 65.2446 19.9194 67.4974 27.6416 67.4974C52.7944 67.4974 66.5527 46.6529 66.5527 28.5863C66.5527 27.9807 66.5416 27.3946 66.5111 26.8085C69.1805 24.8974 71.5 22.4891 73.3333 19.7418Z"
+        fill="#CED4DA"
       />
     </svg>
   </div>
@@ -69,9 +25,7 @@ exports[`EmbedTwitterConsent component should render the placeholder by default
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus Twitter
-  
+     An dieser Stelle findest du Inhalte aus Twitter 
   </div>
    
   <div
@@ -86,9 +40,7 @@ exports[`EmbedTwitterConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue b/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue
index 9c070f0..9018a47 100644
--- a/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue
+++ b/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue
@@ -1,63 +1,14 @@
 <template>
-  <embed-social-networks-placeholder
-    :privacy-manager-id="privacyManagerId"
-    :vendor-id="vendorId"
-  >
+  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
     <template #header>
-      <svg
-        width="100%"
-        height="84"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle
-          cx="16"
-          cy="16"
-          r="16"
-          fill="#E9ECEF"
-        />
-        <rect
-          x="40"
-          y="7"
-          width="60"
-          height="10"
-          fill="#E9ECEF"
-        />
-        <rect
-          x="40"
-          y="19"
-          width="40"
-          height="6"
-          fill="#E9ECEF"
-        />
-        <rect
-          y="44"
-          width="100%"
-          height="8"
-          fill="#E9ECEF"
-        />
-        <rect
-          y="60"
-          width="100%"
-          height="8"
-          fill="#E9ECEF"
-        />
-        <rect
-          y="76"
-          width="75%"
-          height="8"
-          fill="#E9ECEF"
-        />
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-          style="transform: translateX(calc(100% - 20px));"
-          d="M19.6 1.8456C18.8952 2.1616 18.1344 2.3704 17.3392 2.464C18.1536 1.9768 18.7752 1.204 19.072 0.284C18.3112 0.7336 17.4664 1.0656 16.5704 1.24C15.8504 0.476 14.8272 0 13.6952 0C11.52 0 9.75762 1.7624 9.75762 3.936C9.75762 4.2448 9.79202 4.5448 9.85922 4.8328C6.58562 4.6672 3.68402 3.1008 1.74242 0.716C1.40482 1.2976 1.20962 1.9752 1.20962 2.696C1.20962 4.0616 1.90322 5.268 2.96082 5.9736C2.31522 5.956 1.70882 5.7744 1.17682 5.4824C1.17682 5.4984 1.17682 5.5168 1.17682 5.532C1.17682 7.4408 2.53362 9.0336 4.33682 9.3936C4.00642 9.4832 3.65762 9.5336 3.29842 9.5336C3.04322 9.5336 2.79922 9.5064 2.55602 9.4616C3.05762 11.024 4.51202 12.1648 6.23442 12.1976C4.88402 13.2552 3.18882 13.8848 1.34082 13.8848C1.02242 13.8848 0.711224 13.8664 0.400024 13.8288C2.14722 14.9504 4.21682 15.5992 6.44082 15.5992C13.6848 15.5992 17.6472 9.596 17.6472 4.3928C17.6472 4.2184 17.644 4.0496 17.6352 3.8808C18.404 3.3304 19.072 2.6368 19.6 1.8456Z"
-          fill="#4AA1EC"
+          d="M73.3333 19.7418C70.8861 20.8391 68.2444 21.5641 65.4833 21.8891C68.3111 20.1974 70.4694 17.5141 71.5 14.3196C68.8583 15.8807 65.925 17.0335 62.8139 17.6391C60.3139 14.9863 56.7611 13.3335 52.8305 13.3335C45.2777 13.3335 39.1583 19.4529 39.1583 27.0002C39.1583 28.0724 39.2777 29.1141 39.5111 30.114C28.1444 29.5391 18.0694 24.1002 11.3277 15.8196C10.1555 17.8391 9.47774 20.1918 9.47774 22.6946C9.47774 27.4363 11.8861 31.6252 15.5583 34.0752C13.3166 34.0141 11.2111 33.3835 9.36385 32.3696C9.36385 32.4252 9.36385 32.489 9.36385 32.5418C9.36385 39.1696 14.075 44.7002 20.3361 45.9502C19.1888 46.2613 17.9777 46.4363 16.7305 46.4363C15.8444 46.4363 14.9972 46.3418 14.1527 46.1863C15.8944 51.6113 20.9444 55.5724 26.925 55.6863C22.2361 59.3585 16.35 61.5446 9.93329 61.5446C8.82774 61.5446 7.74718 61.4807 6.66663 61.3502C12.7333 65.2446 19.9194 67.4974 27.6416 67.4974C52.7944 67.4974 66.5527 46.6529 66.5527 28.5863C66.5527 27.9807 66.5416 27.3946 66.5111 26.8085C69.1805 24.8974 71.5 22.4891 73.3333 19.7418Z"
+          fill="#CED4DA"
         />
       </svg>
     </template>
-    <template #headline>
-      An dieser Stelle findest du Inhalte aus Twitter
-    </template>
+    <template #headline> An dieser Stelle findest du Inhalte aus Twitter </template>
     <template #description>
       Um mit Inhalten aus Twitter und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir
       deine Zustimmung.
diff --git a/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap b/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap
index e937592..f1a165f 100644
--- a/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap
@@ -10,58 +10,14 @@ exports[`EmbedTwitterPlaceholder should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="84"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <circle
-        cx="16"
-        cy="16"
-        fill="#E9ECEF"
-        r="16"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="10"
-        width="60"
-        x="40"
-        y="7"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="6"
-        width="40"
-        x="40"
-        y="19"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="44"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="100%"
-        y="60"
-      />
-       
-      <rect
-        fill="#E9ECEF"
-        height="8"
-        width="75%"
-        y="76"
-      />
-       
       <path
-        d="M19.6 1.8456C18.8952 2.1616 18.1344 2.3704 17.3392 2.464C18.1536 1.9768 18.7752 1.204 19.072 0.284C18.3112 0.7336 17.4664 1.0656 16.5704 1.24C15.8504 0.476 14.8272 0 13.6952 0C11.52 0 9.75762 1.7624 9.75762 3.936C9.75762 4.2448 9.79202 4.5448 9.85922 4.8328C6.58562 4.6672 3.68402 3.1008 1.74242 0.716C1.40482 1.2976 1.20962 1.9752 1.20962 2.696C1.20962 4.0616 1.90322 5.268 2.96082 5.9736C2.31522 5.956 1.70882 5.7744 1.17682 5.4824C1.17682 5.4984 1.17682 5.5168 1.17682 5.532C1.17682 7.4408 2.53362 9.0336 4.33682 9.3936C4.00642 9.4832 3.65762 9.5336 3.29842 9.5336C3.04322 9.5336 2.79922 9.5064 2.55602 9.4616C3.05762 11.024 4.51202 12.1648 6.23442 12.1976C4.88402 13.2552 3.18882 13.8848 1.34082 13.8848C1.02242 13.8848 0.711224 13.8664 0.400024 13.8288C2.14722 14.9504 4.21682 15.5992 6.44082 15.5992C13.6848 15.5992 17.6472 9.596 17.6472 4.3928C17.6472 4.2184 17.644 4.0496 17.6352 3.8808C18.404 3.3304 19.072 2.6368 19.6 1.8456Z"
-        fill="#4AA1EC"
-        style="transform: translateX(calc(100% - 20px));"
+        d="M73.3333 19.7418C70.8861 20.8391 68.2444 21.5641 65.4833 21.8891C68.3111 20.1974 70.4694 17.5141 71.5 14.3196C68.8583 15.8807 65.925 17.0335 62.8139 17.6391C60.3139 14.9863 56.7611 13.3335 52.8305 13.3335C45.2777 13.3335 39.1583 19.4529 39.1583 27.0002C39.1583 28.0724 39.2777 29.1141 39.5111 30.114C28.1444 29.5391 18.0694 24.1002 11.3277 15.8196C10.1555 17.8391 9.47774 20.1918 9.47774 22.6946C9.47774 27.4363 11.8861 31.6252 15.5583 34.0752C13.3166 34.0141 11.2111 33.3835 9.36385 32.3696C9.36385 32.4252 9.36385 32.489 9.36385 32.5418C9.36385 39.1696 14.075 44.7002 20.3361 45.9502C19.1888 46.2613 17.9777 46.4363 16.7305 46.4363C15.8444 46.4363 14.9972 46.3418 14.1527 46.1863C15.8944 51.6113 20.9444 55.5724 26.925 55.6863C22.2361 59.3585 16.35 61.5446 9.93329 61.5446C8.82774 61.5446 7.74718 61.4807 6.66663 61.3502C12.7333 65.2446 19.9194 67.4974 27.6416 67.4974C52.7944 67.4974 66.5527 46.6529 66.5527 28.5863C66.5527 27.9807 66.5416 27.3946 66.5111 26.8085C69.1805 24.8974 71.5 22.4891 73.3333 19.7418Z"
+        fill="#CED4DA"
       />
     </svg>
   </div>
@@ -69,9 +25,7 @@ exports[`EmbedTwitterPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus Twitter
-  
+     An dieser Stelle findest du Inhalte aus Twitter 
   </div>
    
   <div
@@ -86,9 +40,7 @@ exports[`EmbedTwitterPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue b/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue
index d0cb528..90a0ef3 100644
--- a/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue
+++ b/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue
@@ -6,17 +6,10 @@
     :switch-label="'Twitter freigeben'"
   >
     <template #header>
-      <svg width="100%" height="84" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <circle cx="16" cy="16" r="16" fill="#E9ECEF" />
-        <rect x="40" y="7" width="60" height="10" fill="#E9ECEF" />
-        <rect x="40" y="19" width="40" height="6" fill="#E9ECEF" />
-        <rect y="44" width="100%" height="8" fill="#E9ECEF" />
-        <rect y="60" width="100%" height="8" fill="#E9ECEF" />
-        <rect y="76" width="75%" height="8" fill="#E9ECEF" />
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path
-          style="transform: translateX(calc(100% - 20px))"
-          d="M19.6 1.8456C18.8952 2.1616 18.1344 2.3704 17.3392 2.464C18.1536 1.9768 18.7752 1.204 19.072 0.284C18.3112 0.7336 17.4664 1.0656 16.5704 1.24C15.8504 0.476 14.8272 0 13.6952 0C11.52 0 9.75762 1.7624 9.75762 3.936C9.75762 4.2448 9.79202 4.5448 9.85922 4.8328C6.58562 4.6672 3.68402 3.1008 1.74242 0.716C1.40482 1.2976 1.20962 1.9752 1.20962 2.696C1.20962 4.0616 1.90322 5.268 2.96082 5.9736C2.31522 5.956 1.70882 5.7744 1.17682 5.4824C1.17682 5.4984 1.17682 5.5168 1.17682 5.532C1.17682 7.4408 2.53362 9.0336 4.33682 9.3936C4.00642 9.4832 3.65762 9.5336 3.29842 9.5336C3.04322 9.5336 2.79922 9.5064 2.55602 9.4616C3.05762 11.024 4.51202 12.1648 6.23442 12.1976C4.88402 13.2552 3.18882 13.8848 1.34082 13.8848C1.02242 13.8848 0.711224 13.8664 0.400024 13.8288C2.14722 14.9504 4.21682 15.5992 6.44082 15.5992C13.6848 15.5992 17.6472 9.596 17.6472 4.3928C17.6472 4.2184 17.644 4.0496 17.6352 3.8808C18.404 3.3304 19.072 2.6368 19.6 1.8456Z"
-          fill="#4AA1EC"
+          d="M73.3333 19.7418C70.8861 20.8391 68.2444 21.5641 65.4833 21.8891C68.3111 20.1974 70.4694 17.5141 71.5 14.3196C68.8583 15.8807 65.925 17.0335 62.8139 17.6391C60.3139 14.9863 56.7611 13.3335 52.8305 13.3335C45.2777 13.3335 39.1583 19.4529 39.1583 27.0002C39.1583 28.0724 39.2777 29.1141 39.5111 30.114C28.1444 29.5391 18.0694 24.1002 11.3277 15.8196C10.1555 17.8391 9.47774 20.1918 9.47774 22.6946C9.47774 27.4363 11.8861 31.6252 15.5583 34.0752C13.3166 34.0141 11.2111 33.3835 9.36385 32.3696C9.36385 32.4252 9.36385 32.489 9.36385 32.5418C9.36385 39.1696 14.075 44.7002 20.3361 45.9502C19.1888 46.2613 17.9777 46.4363 16.7305 46.4363C15.8444 46.4363 14.9972 46.3418 14.1527 46.1863C15.8944 51.6113 20.9444 55.5724 26.925 55.6863C22.2361 59.3585 16.35 61.5446 9.93329 61.5446C8.82774 61.5446 7.74718 61.4807 6.66663 61.3502C12.7333 65.2446 19.9194 67.4974 27.6416 67.4974C52.7944 67.4974 66.5527 46.6529 66.5527 28.5863C66.5527 27.9807 66.5416 27.3946 66.5111 26.8085C69.1805 24.8974 71.5 22.4891 73.3333 19.7418Z"
+          fill="#CED4DA"
         />
       </svg>
     </template>
diff --git a/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap b/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap
index 613b925..d3199a1 100644
--- a/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap
+++ b/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap
@@ -10,32 +10,45 @@ exports[`EmbedYoutubeConsent component should render the placeholder by default
   >
     <svg
       fill="none"
-      height="172"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        style="transform: translate(calc(50% - 20px), calc(50% - 20px)) scale(0.42);"
+      <path
+        clip-rule="evenodd"
+        d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+        fill="#CED4DA"
+        fill-rule="evenodd"
+      />
+       
+      <mask
+        height="46"
+        id="mask0_382_22532"
+        maskUnits="userSpaceOnUse"
+        style="mask-type: alpha;"
+        width="64"
+        x="8"
+        y="18"
       >
         <path
-          d="M 118.9,13.3 C 117.5,8.1 113.4,4 108.2,2.6 98.7,0 60.7,0 60.7,0 60.7,0 22.7,0 13.2,2.5 8.1,3.9 3.9,8.1 2.5,13.3 0,22.8 0,42.5 0,42.5 0,42.5 0,62.3 2.5,71.7 3.9,76.9 8,81 13.2,82.4 22.8,85 60.7,85 60.7,85 c 0,0 38,0 47.5,-2.5 5.2,-1.4 9.3,-5.5 10.7,-10.7 2.5,-9.5 2.5,-29.2 2.5,-29.2 0,0 0.1,-19.8 -2.5,-29.3 z"
-          fill="#E9ECEF"
-        />
-         
-        <polygon
-          fill="#ffffff"
-          points="80.2,42.5 48.6,24.3 48.6,60.7"
+          clip-rule="evenodd"
+          d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+          fill="white"
+          fill-rule="evenodd"
         />
-      </g>
+      </mask>
+       
+      <g
+        mask="url(#mask0_382_22532)"
+      />
     </svg>
   </div>
    
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus YouTube
-  
+     An dieser Stelle findest du Inhalte aus YouTube 
   </div>
    
   <div
@@ -50,9 +63,7 @@ exports[`EmbedYoutubeConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue b/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue
index 0762293..16c83bb 100644
--- a/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue
+++ b/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue
@@ -1,30 +1,33 @@
 <template>
-  <embed-social-networks-placeholder
-    :privacy-manager-id="privacyManagerId"
-    :vendor-id="vendorId"
-  >
+  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
     <template #header>
-      <svg
-        width="100%"
-        height="172"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <g style="transform: translate(calc(50% - 20px), calc(50% - 20px)) scale(0.42);">
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+          fill="#CED4DA"
+        />
+        <mask
+          id="mask0_382_22532"
+          style="mask-type: alpha"
+          maskUnits="userSpaceOnUse"
+          x="8"
+          y="18"
+          width="64"
+          height="46"
+        >
           <path
-            d="M 118.9,13.3 C 117.5,8.1 113.4,4 108.2,2.6 98.7,0 60.7,0 60.7,0 60.7,0 22.7,0 13.2,2.5 8.1,3.9 3.9,8.1 2.5,13.3 0,22.8 0,42.5 0,42.5 0,42.5 0,62.3 2.5,71.7 3.9,76.9 8,81 13.2,82.4 22.8,85 60.7,85 60.7,85 c 0,0 38,0 47.5,-2.5 5.2,-1.4 9.3,-5.5 10.7,-10.7 2.5,-9.5 2.5,-29.2 2.5,-29.2 0,0 0.1,-19.8 -2.5,-29.3 z"
-            fill="#E9ECEF"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+            fill="white"
           />
-          <polygon
-            points="80.2,42.5 48.6,24.3 48.6,60.7"
-            fill="#ffffff"
-          />
-        </g>
+        </mask>
+        <g mask="url(#mask0_382_22532)"></g>
       </svg>
     </template>
-    <template #headline>
-      An dieser Stelle findest du Inhalte aus YouTube
-    </template>
+    <template #headline> An dieser Stelle findest du Inhalte aus YouTube </template>
     <template #description>
       Um mit Inhalten aus YouTube und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir
       deine Zustimmung.
diff --git a/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap b/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap
index 11b684f..5a8b17d 100644
--- a/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap
@@ -10,32 +10,45 @@ exports[`EmbedYoutubePlaceholder should render without any errors 1`] = `
   >
     <svg
       fill="none"
-      height="172"
-      width="100%"
+      height="80"
+      viewBox="0 0 80 80"
+      width="80"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        style="transform: translate(calc(50% - 20px), calc(50% - 20px)) scale(0.42);"
+      <path
+        clip-rule="evenodd"
+        d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+        fill="#CED4DA"
+        fill-rule="evenodd"
+      />
+       
+      <mask
+        height="46"
+        id="mask0_382_22532"
+        maskUnits="userSpaceOnUse"
+        style="mask-type: alpha;"
+        width="64"
+        x="8"
+        y="18"
       >
         <path
-          d="M 118.9,13.3 C 117.5,8.1 113.4,4 108.2,2.6 98.7,0 60.7,0 60.7,0 60.7,0 22.7,0 13.2,2.5 8.1,3.9 3.9,8.1 2.5,13.3 0,22.8 0,42.5 0,42.5 0,42.5 0,62.3 2.5,71.7 3.9,76.9 8,81 13.2,82.4 22.8,85 60.7,85 60.7,85 c 0,0 38,0 47.5,-2.5 5.2,-1.4 9.3,-5.5 10.7,-10.7 2.5,-9.5 2.5,-29.2 2.5,-29.2 0,0 0.1,-19.8 -2.5,-29.3 z"
-          fill="#E9ECEF"
-        />
-         
-        <polygon
-          fill="#ffffff"
-          points="80.2,42.5 48.6,24.3 48.6,60.7"
+          clip-rule="evenodd"
+          d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+          fill="white"
+          fill-rule="evenodd"
         />
-      </g>
+      </mask>
+       
+      <g
+        mask="url(#mask0_382_22532)"
+      />
     </svg>
   </div>
    
   <div
     class="embed-placeholder__headline"
   >
-    
-    An dieser Stelle findest du Inhalte aus YouTube
-  
+     An dieser Stelle findest du Inhalte aus YouTube 
   </div>
    
   <div
@@ -50,9 +63,7 @@ exports[`EmbedYoutubePlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-    
-    soziale Netzwerke aktivieren
-  
+     soziale Netzwerke aktivieren 
   </button>
    
   <div
diff --git a/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue b/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue
index 8a9ef10..f3ab6d2 100644
--- a/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue
+++ b/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue
@@ -6,14 +6,30 @@
     :switch-label="'Youtube freigeben'"
   >
     <template #header>
-      <svg width="100%" height="172" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g style="transform: translate(calc(50% - 20px), calc(50% - 20px)) scale(0.42)">
+      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+          fill-rule="evenodd"
+          clip-rule="evenodd"
+          d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+          fill="#CED4DA"
+        />
+        <mask
+          id="mask0_382_22532"
+          style="mask-type: alpha"
+          maskUnits="userSpaceOnUse"
+          x="8"
+          y="18"
+          width="64"
+          height="46"
+        >
           <path
-            d="M 118.9,13.3 C 117.5,8.1 113.4,4 108.2,2.6 98.7,0 60.7,0 60.7,0 60.7,0 22.7,0 13.2,2.5 8.1,3.9 3.9,8.1 2.5,13.3 0,22.8 0,42.5 0,42.5 0,42.5 0,62.3 2.5,71.7 3.9,76.9 8,81 13.2,82.4 22.8,85 60.7,85 60.7,85 c 0,0 38,0 47.5,-2.5 5.2,-1.4 9.3,-5.5 10.7,-10.7 2.5,-9.5 2.5,-29.2 2.5,-29.2 0,0 0.1,-19.8 -2.5,-29.3 z"
-            fill="#E9ECEF"
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M68.8 21.8665C70.9333 23.7332 71.4667 28.2665 71.4667 28.2665C71.4667 28.2665 72 33.5998 72 38.6665V43.4665C72 48.7998 71.4667 53.8665 71.4667 53.8665C71.4667 53.8665 70.6667 58.3998 68.8 60.2665C66.781 62.2855 64.5734 62.606 63.1295 62.8157C62.857 62.8552 62.6117 62.8908 62.4 62.9332C53.3333 63.4665 40 63.4665 40 63.4665C40 63.4665 23.2 63.4665 18.1333 62.9332C17.8776 62.882 17.5531 62.8505 17.1788 62.8141C15.6017 62.6609 13.1396 62.4216 11.2 60.2665C9.06667 58.3998 8.53333 53.8665 8.53333 53.8665C8.53333 53.8665 8 48.5332 8 43.4665V38.6665C8 33.5998 8.53333 28.2665 8.53333 28.2665C8.53333 28.2665 9.33333 23.7332 11.2 21.8665C13.219 19.8475 15.4266 19.527 16.8705 19.3174C17.143 19.2778 17.3883 19.2422 17.6 19.1998C26.6667 18.6665 40 18.6665 40 18.6665C40 18.6665 53.3333 18.6665 62.4 19.1998C63.7333 19.1998 66.4 19.1998 68.8 21.8665ZM33.3333 31.7332V49.5999L50.6667 40.7999L33.3333 31.7332Z"
+            fill="white"
           />
-          <polygon points="80.2,42.5 48.6,24.3 48.6,60.7" fill="#ffffff" />
-        </g>
+        </mask>
+        <g mask="url(#mask0_382_22532)"></g>
       </svg>
     </template>
     <template #headline> An dieser Stelle findest du Inhalte aus YouTube </template>

From 61767d2d5ecfc1f222fd43183065ad3e96849cf9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Wed, 23 Feb 2022 13:27:23 +0100
Subject: [PATCH 3/8] add new property for teaser format

---
 .../components/EmbedConsent/EmbedConsent.vue  | 24 +++++++--
 .../EmbedContentPur/EmbedContentPur.vue       | 11 ++++-
 .../EmbedFacebookConsent.vue                  | 24 +++++++--
 .../EmbedFacebookPlaceholder.vue              | 17 +++++--
 .../EmbedFacebookPlaceholderPur.vue           | 12 ++++-
 .../EmbedInstagramConsent.vue                 | 24 +++++++--
 .../EmbedInstagramPlaceholder.vue             | 17 +++++--
 .../EmbedInstagramPlaceholderPur.vue          | 12 ++++-
 .../EmbedPlaceholder/EmbedPlaceholder.vue     | 42 ++++++++++++----
 .../EmbedPlaceholderPur.vue                   | 49 ++++++++++++++-----
 .../EmbedPodigeeConsent.vue                   | 24 +++++++--
 .../EmbedPodigeePlaceholder.vue               | 17 +++++--
 .../EmbedPodigeePlaceholderPur.vue            | 12 ++++-
 .../EmbedSocialNetworksConsent.vue            | 24 +++++++--
 .../EmbedSocialNetworksPlaceholder.vue        | 22 +++++++--
 .../EmbedSocialNetworksPlaceholderPur.vue     | 12 ++++-
 .../EmbedTwitterConsent.vue                   | 24 +++++++--
 .../EmbedTwitterPlaceholder.vue               | 17 +++++--
 .../EmbedTwitterPlaceholderPur.vue            | 12 ++++-
 .../EmbedYoutubeConsent.vue                   | 24 +++++++--
 .../EmbedYoutubePlaceholder.vue               | 19 +++++--
 .../EmbedYoutubePlaceholderPur.vue            | 14 ++++--
 .../components/InputSwitch/InputSwitch.vue    | 13 ++++-
 23 files changed, 387 insertions(+), 79 deletions(-)

diff --git a/src/vue/components/EmbedConsent/EmbedConsent.vue b/src/vue/components/EmbedConsent/EmbedConsent.vue
index d748ce8..de02c6a 100644
--- a/src/vue/components/EmbedConsent/EmbedConsent.vue
+++ b/src/vue/components/EmbedConsent/EmbedConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-placeholder-pur
         v-if="isPur"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
         :vendor-id="vendorId"
+        :class="teaserFormat"
+      />
+      <embed-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Externen Inhalt sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Externen Inhalt sperren'"
+      >
         <slot name="embed">
           <embed-content :content="content" />
         </slot>
@@ -30,6 +43,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -45,6 +59,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     vendorId: {
       type: String,
       required: true,
diff --git a/src/vue/components/EmbedContentPur/EmbedContentPur.vue b/src/vue/components/EmbedContentPur/EmbedContentPur.vue
index 2ff0e1a..2591c72 100644
--- a/src/vue/components/EmbedContentPur/EmbedContentPur.vue
+++ b/src/vue/components/EmbedContentPur/EmbedContentPur.vue
@@ -1,9 +1,16 @@
 <template>
   <div>
     <slot />
-    <div class="embed-content__actions" v-if="showControls">
+    <div
+      class="embed-content__actions"
+      v-if="showControls"
+    >
       <consent-actions v-slot="{ rejectVendorPUR }">
-        <input-switch :label="switchLabel" @change="rejectConsent($event, rejectVendorPUR)" :checked="true" />
+        <input-switch
+          :label="switchLabel"
+          @change="rejectConsent($event, rejectVendorPUR)"
+          :checked="true"
+        />
       </consent-actions>
     </div>
   </div>
diff --git a/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue b/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue
index 64b35fa..d9eb58a 100644
--- a/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue
+++ b/src/vue/components/EmbedFacebookConsent/EmbedFacebookConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-facebook-placeholder-pur
         v-if="isPur"
         :vendor-id="vendorId"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
+        :class="teaserFormat"
+      />
+      <embed-facebook-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-facebook-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Facebook sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Facebook sperren'"
+      >
         <embed-content :content="content" />
       </embed-content-pur>
     </template>
@@ -29,6 +42,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string | null;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -44,6 +58,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     vendorId: {
       type: String,
       default: VENDOR_ID_FACEBOOK,
diff --git a/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue b/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue
index e77f12c..ab8d7c4 100644
--- a/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue
+++ b/src/vue/components/EmbedFacebookPlaceholder/EmbedFacebookPlaceholder.vue
@@ -1,14 +1,25 @@
 <template>
-  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
+  <embed-social-networks-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :vendor-id="vendorId"
+  >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M73.3334 40.2035C73.3334 21.6815 58.4095 6.6665 40 6.6665C21.5905 6.6665 6.66669 21.6815 6.66669 40.2035C6.66669 56.9426 18.8561 70.8172 34.7917 73.3332V49.8979H26.3281V40.2035H34.7917V32.8149C34.7917 24.4097 39.7683 19.7669 47.3822 19.7669C51.0293 19.7669 54.8438 20.4219 54.8438 20.4219V28.6752H50.6406C46.5 28.6752 45.2084 31.2606 45.2084 33.9127V40.2035H54.4531L52.9753 49.8979H45.2084V73.3332C61.1439 70.8172 73.3334 56.9426 73.3334 40.2035Z"
           fill="#CED4DA"
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Facebook </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Facebook
+    </template>
     <template #description>
       Um mit Inhalten aus Facebook und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir
       deine Zustimmung.
diff --git a/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue b/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue
index 44bfa2a..c075f03 100644
--- a/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue
+++ b/src/vue/components/EmbedFacebookPlaceholderPur/EmbedFacebookPlaceholderPur.vue
@@ -6,14 +6,22 @@
     :switch-label="'Facebook freigeben'"
   >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M73.3334 40.2035C73.3334 21.6815 58.4095 6.6665 40 6.6665C21.5905 6.6665 6.66669 21.6815 6.66669 40.2035C6.66669 56.9426 18.8561 70.8172 34.7917 73.3332V49.8979H26.3281V40.2035H34.7917V32.8149C34.7917 24.4097 39.7683 19.7669 47.3822 19.7669C51.0293 19.7669 54.8438 20.4219 54.8438 20.4219V28.6752H50.6406C46.5 28.6752 45.2084 31.2606 45.2084 33.9127V40.2035H54.4531L52.9753 49.8979H45.2084V73.3332C61.1439 70.8172 73.3334 56.9426 73.3334 40.2035Z"
           fill="#CED4DA"
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Facebook </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Facebook
+    </template>
   </embed-social-networks-placeholder-pur>
 </template>
 
diff --git a/src/vue/components/EmbedInstagramConsent/EmbedInstagramConsent.vue b/src/vue/components/EmbedInstagramConsent/EmbedInstagramConsent.vue
index 2052d75..f1d3726 100644
--- a/src/vue/components/EmbedInstagramConsent/EmbedInstagramConsent.vue
+++ b/src/vue/components/EmbedInstagramConsent/EmbedInstagramConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-instagram-placeholder-pur
         v-if="isPur"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
         :vendor-id="vendorId"
+        :class="teaserFormat"
+      />
+      <embed-instagram-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-instagram-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Instagram sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Instagram sperren'"
+      >
         <embed-instagram :content="content" />
       </embed-content-pur>
     </template>
@@ -29,6 +42,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -62,6 +76,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     isPur: {
       type: Boolean,
       default: false,
diff --git a/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue b/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue
index 07f0619..96c3770 100644
--- a/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue
+++ b/src/vue/components/EmbedInstagramPlaceholder/EmbedInstagramPlaceholder.vue
@@ -1,7 +1,16 @@
 <template>
-  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
+  <embed-social-networks-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :vendor-id="vendorId"
+  >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M40.0002 12.6724C48.9013 12.6724 49.9545 12.7068 53.4702 12.8669C56.7199 13.0151 58.4851 13.5576 59.6601 14.0141C61.2161 14.6188 62.3263 15.3413 63.4933 16.507C64.6604 17.6741 65.3828 18.7842 65.9862 20.3403C66.4427 21.5152 66.9852 23.2804 67.1334 26.5301C67.2935 30.0445 67.3279 31.0991 67.3279 40.0001C67.3279 48.9011 67.2935 49.9544 67.1334 53.4701C66.9852 56.7198 66.4427 58.4849 65.9862 59.6599C65.3815 61.216 64.659 62.3261 63.4933 63.4932C62.3263 64.6602 61.2161 65.3827 59.6601 65.9861C58.4851 66.4426 56.7199 66.9851 53.4702 67.1333C49.9558 67.2934 48.9013 67.3278 40.0002 67.3278C31.0992 67.3278 30.0446 67.2934 26.5302 67.1333C23.2805 66.9851 21.5154 66.4426 20.3404 65.9861C18.7843 65.3814 17.6742 64.6589 16.5072 63.4932C15.3401 62.3261 14.6177 61.216 14.0143 59.6599C13.5578 58.4849 13.0153 56.7198 12.8671 53.4701C12.707 49.9557 12.6726 48.9011 12.6726 40.0001C12.6726 31.0991 12.707 30.0458 12.8671 26.5301C13.0153 23.2804 13.5578 21.5152 14.0143 20.3403C14.619 18.7842 15.3414 17.6741 16.5072 16.507C17.6742 15.34 18.7843 14.6175 20.3404 14.0141C21.5154 13.5576 23.2805 13.0151 26.5302 12.8669C30.0459 12.7068 31.0992 12.6724 40.0002 12.6724ZM40.0002 6.6665C30.947 6.6665 29.8117 6.70488 26.2564 6.86763C22.7089 7.02906 20.2848 7.59273 18.1651 8.41707C15.9726 9.2692 14.1135 10.4085 12.2611 12.2622C10.4086 14.1147 9.26803 15.9738 8.4159 18.165C7.59156 20.2847 7.02788 22.7088 6.86646 26.2562C6.70503 29.8116 6.66666 30.9469 6.66666 40.0001C6.66666 49.0533 6.70503 50.1886 6.86778 53.744C7.02921 57.2914 7.59288 59.7155 8.41722 61.8352C9.26935 64.0278 10.4086 65.8868 12.2624 67.7393C14.1162 69.5931 15.9739 70.7323 18.1664 71.5844C20.2862 72.4088 22.7102 72.9725 26.2577 73.1339C29.8131 73.2966 30.9484 73.335 40.0016 73.335C49.0548 73.335 50.19 73.2966 53.7454 73.1339C57.2929 72.9725 59.717 72.4088 61.8367 71.5844C64.0292 70.7323 65.8883 69.5931 67.7407 67.7393C69.5945 65.8855 70.7338 64.0278 71.5859 61.8352C72.4102 59.7155 72.9739 57.2914 73.1353 53.744C73.2981 50.1886 73.3365 49.0533 73.3365 40.0001C73.3365 30.9469 73.2981 29.8116 73.1353 26.2562C72.9739 22.7088 72.4102 20.2847 71.5859 18.165C70.7338 15.9724 69.5945 14.1134 67.7407 12.2609C65.8869 10.4071 64.0292 9.26788 61.8367 8.41575C59.717 7.59141 57.2929 7.02773 53.7454 6.8663C50.1887 6.70488 49.0534 6.6665 40.0002 6.6665Z"
           fill="#CED4DA"
@@ -16,7 +25,9 @@
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Instagram </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Instagram
+    </template>
     <template #description>
       Um mit Inhalten aus Instagram und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen
       wir deine Zustimmung.
diff --git a/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue b/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue
index 4ce75e8..36a1df3 100644
--- a/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue
+++ b/src/vue/components/EmbedInstagramPlaceholderPur/EmbedInstagramPlaceholderPur.vue
@@ -6,7 +6,13 @@
     :switch-label="'Instagram freigeben'"
   >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M40.0002 12.6724C48.9013 12.6724 49.9545 12.7068 53.4702 12.8669C56.7199 13.0151 58.4851 13.5576 59.6601 14.0141C61.2161 14.6188 62.3263 15.3413 63.4933 16.507C64.6604 17.6741 65.3828 18.7842 65.9862 20.3403C66.4427 21.5152 66.9852 23.2804 67.1334 26.5301C67.2935 30.0445 67.3279 31.0991 67.3279 40.0001C67.3279 48.9011 67.2935 49.9544 67.1334 53.4701C66.9852 56.7198 66.4427 58.4849 65.9862 59.6599C65.3815 61.216 64.659 62.3261 63.4933 63.4932C62.3263 64.6602 61.2161 65.3827 59.6601 65.9861C58.4851 66.4426 56.7199 66.9851 53.4702 67.1333C49.9558 67.2934 48.9013 67.3278 40.0002 67.3278C31.0992 67.3278 30.0446 67.2934 26.5302 67.1333C23.2805 66.9851 21.5154 66.4426 20.3404 65.9861C18.7843 65.3814 17.6742 64.6589 16.5072 63.4932C15.3401 62.3261 14.6177 61.216 14.0143 59.6599C13.5578 58.4849 13.0153 56.7198 12.8671 53.4701C12.707 49.9557 12.6726 48.9011 12.6726 40.0001C12.6726 31.0991 12.707 30.0458 12.8671 26.5301C13.0153 23.2804 13.5578 21.5152 14.0143 20.3403C14.619 18.7842 15.3414 17.6741 16.5072 16.507C17.6742 15.34 18.7843 14.6175 20.3404 14.0141C21.5154 13.5576 23.2805 13.0151 26.5302 12.8669C30.0459 12.7068 31.0992 12.6724 40.0002 12.6724ZM40.0002 6.6665C30.947 6.6665 29.8117 6.70488 26.2564 6.86763C22.7089 7.02906 20.2848 7.59273 18.1651 8.41707C15.9726 9.2692 14.1135 10.4085 12.2611 12.2622C10.4086 14.1147 9.26803 15.9738 8.4159 18.165C7.59156 20.2847 7.02788 22.7088 6.86646 26.2562C6.70503 29.8116 6.66666 30.9469 6.66666 40.0001C6.66666 49.0533 6.70503 50.1886 6.86778 53.744C7.02921 57.2914 7.59288 59.7155 8.41722 61.8352C9.26935 64.0278 10.4086 65.8868 12.2624 67.7393C14.1162 69.5931 15.9739 70.7323 18.1664 71.5844C20.2862 72.4088 22.7102 72.9725 26.2577 73.1339C29.8131 73.2966 30.9484 73.335 40.0016 73.335C49.0548 73.335 50.19 73.2966 53.7454 73.1339C57.2929 72.9725 59.717 72.4088 61.8367 71.5844C64.0292 70.7323 65.8883 69.5931 67.7407 67.7393C69.5945 65.8855 70.7338 64.0278 71.5859 61.8352C72.4102 59.7155 72.9739 57.2914 73.1353 53.744C73.2981 50.1886 73.3365 49.0533 73.3365 40.0001C73.3365 30.9469 73.2981 29.8116 73.1353 26.2562C72.9739 22.7088 72.4102 20.2847 71.5859 18.165C70.7338 15.9724 69.5945 14.1134 67.7407 12.2609C65.8869 10.4071 64.0292 9.26788 61.8367 8.41575C59.717 7.59141 57.2929 7.02773 53.7454 6.8663C50.1887 6.70488 49.0534 6.6665 40.0002 6.6665Z"
           fill="#CED4DA"
@@ -21,7 +27,9 @@
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Instagram </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Instagram
+    </template>
   </embed-social-networks-placeholder-pur>
 </template>
 
diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
index 6a1f700..eef96d2 100644
--- a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
+++ b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="embed-placeholder__container" :data-vendor-id="vendorId">
+  <div
+    class="embed-placeholder__container"
+    :data-vendor-id="vendorId"
+  >
     <div class="embed-placeholder__header">
       <slot name="header">
-        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="80"
+          height="80"
+          viewBox="0 0 80 80"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             opacity="0.4"
             d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
@@ -21,7 +30,9 @@
       </slot>
     </div>
     <div class="embed-placeholder__headline">
-      <slot name="headline"> An dieser Stelle findest du Inhalte von Drittanbietern </slot>
+      <slot name="headline">
+        An dieser Stelle findest du Inhalte von Drittanbietern
+      </slot>
     </div>
     <div class="embed-placeholder__description">
       <slot name="description">
@@ -29,9 +40,17 @@
       </slot>
     </div>
     <consent-actions v-slot="{ consentVendor, consentPurpose }">
-      <slot name="button" v-bind="{ consentVendor, consentPurpose }">
-        <button class="embed-placeholder__button" @click.prevent="giveConsent(consentVendor, consentPurpose)">
-          <slot name="buttonLabel"> externen Inhalt aktivieren </slot>
+      <slot
+        name="button"
+        v-bind="{ consentVendor, consentPurpose }"
+      >
+        <button
+          class="embed-placeholder__button"
+          @click.prevent="giveConsent(consentVendor, consentPurpose)"
+        >
+          <slot name="buttonLabel">
+            externen Inhalt aktivieren
+          </slot>
         </button>
       </slot>
     </consent-actions>
@@ -47,8 +66,7 @@
             rel="noopener noreferrer"
             target="_blank"
             @click.prevent="loadPrivacyManagerModal(privacyManagerId)"
-            >hier</a
-          >.
+          >hier</a>.
         </slot>
       </div>
     </privacy-manager>
@@ -110,11 +128,9 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   background: #e9ecef;
   border-radius: 8px;
   padding: 12px;
-  max-width: 500px;
   margin: 0 auto;
   display: flex;
   flex-direction: column;
-  aspect-ratio: 1;
 }
 
 .embed-placeholder__header {
@@ -184,4 +200,10 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   text-decoration: underline;
   color: #212529;
 }
+
+@media (min-width: 0) and (max-width: 600px) {
+  .embed-placeholder__header {
+    display: none;
+  }
+}
 </style>
diff --git a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
index b62e070..5c1d90b 100644
--- a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
+++ b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="embed-placeholder__container" :data-vendor-id="vendorId">
+  <div
+    class="embed-placeholder__container"
+    :data-vendor-id="vendorId"
+  >
     <div class="embed-placeholder__header--pur">
       <slot name="header">
-        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="80"
+          height="80"
+          viewBox="0 0 80 80"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             opacity="0.4"
             d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
@@ -21,7 +30,9 @@
       </slot>
     </div>
     <div class="embed-placeholder__headline">
-      <slot name="headline"> An dieser Stelle findest du Inhalte von Drittanbietern </slot>
+      <slot name="headline">
+        An dieser Stelle findest du Inhalte von Drittanbietern
+      </slot>
     </div>
     <div class="embed-placeholder__description--pur">
       <slot name="description">
@@ -32,8 +43,7 @@
         diesen (jederzeit widerruflich) zu. Dies umfasst auch deine
         <abbr
           title="Die betreffenden Drittländer, insb. die USA, weisen im Zweifel nicht das Datenschutzniveau auf, das Sie unter der DSGVO genießen. Das kann Nachteile wie eine erschwerte Durchsetzung von Betroffenenrechten, eine fehlende Kontrolle der Weiterverarbeitung und Übermittlung der Daten oder Zugriffe auf die Daten durch staatliche Stellen, insb. Behörden der USA, zu Kontroll- und Überwachungszwecken bedeuten, ohne dass Ihnen Rechtsbehelfe dagegen zustehen. Dies liegt nicht in der Hand von Axel Springer, sondern bedarf einer Regelung auf Gesetzgebungsebene."
-          >Einwilligung in die Übermittlung bestimmter personenbezogener Daten in Drittländer, u.a. die USA</abbr
-        >, nach Art. 49 (1) (a) DSGVO. Mehr Informationen dazu findest du
+        >Einwilligung in die Übermittlung bestimmter personenbezogener Daten in Drittländer, u.a. die USA</abbr>, nach Art. 49 (1) (a) DSGVO. Mehr Informationen dazu findest du
         <privacy-manager v-slot="{ loadPrivacyManagerModal }">
           <span>
             <a
@@ -42,8 +52,7 @@
               rel="noopener noreferrer"
               title="Zu den Privatsphäre Einstellungen"
               @click.prevent="loadPrivacyManagerModal(privacyManagerId, 'vendors')"
-              >hier</a
-            >
+            >hier</a>
             . Du kannst deine Einwilligung jederzeit über den Schalter und über
             <a
               class="embed-placeholder__text-link"
@@ -51,8 +60,7 @@
               rel="noopener noreferrer"
               title="Tracking widerrufen"
               @click.prevent="loadPrivacyManagerModal(privacyManagerIdDenyTracking)"
-              >Widerruf Tracking</a
-            >
+            >Widerruf Tracking</a>
           </span>
         </privacy-manager>
         am Seitenende widerrufen.
@@ -60,8 +68,14 @@
     </div>
     <div class="embed-placeholder__actions">
       <consent-actions v-slot="{ consentVendorPUR }">
-        <slot name="controls" v-bind="{ consentVendorPUR }">
-          <input-switch :label="switchLabel" @change="giveConsent($event, consentVendorPUR)" />
+        <slot
+          name="controls"
+          v-bind="{ consentVendorPUR }"
+        >
+          <input-switch
+            :label="switchLabel"
+            @change="giveConsent($event, consentVendorPUR)"
+          />
         </slot>
       </consent-actions>
     </div>
@@ -160,5 +174,18 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   justify-content: center;
   border-top: 1px solid #ced4da;
   padding-top: 12px;
+  margin-top: auto;
+}
+
+@media (min-width: 0) and (max-width: 1023.99px) {
+  .a-teaser > .embed-placeholder__header--pur {
+    display: none;
+  }
+}
+
+@media (min-width: 0) and (max-width: 600px) {
+  .embed-placeholder__header--pur {
+    display: none;
+  }
 }
 </style>
diff --git a/src/vue/components/EmbedPodigeeConsent/EmbedPodigeeConsent.vue b/src/vue/components/EmbedPodigeeConsent/EmbedPodigeeConsent.vue
index 6acf6fc..ad72c2c 100644
--- a/src/vue/components/EmbedPodigeeConsent/EmbedPodigeeConsent.vue
+++ b/src/vue/components/EmbedPodigeeConsent/EmbedPodigeeConsent.vue
@@ -1,17 +1,30 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-podigee-placeholder-pur
         v-if="isPur"
         :vendor-id="vendorId"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
+        :class="teaserFormat"
+      />
+      <embed-podigee-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-podigee-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
       <slot name="embed">
-        <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Podigee sperren'">
+        <embed-content-pur
+          :show-controls="isPur"
+          :vendor-id="vendorId"
+          :switch-label="'Podigee sperren'"
+        >
           <embed-podigee :content="content" />
         </embed-content-pur>
       </slot>
@@ -31,6 +44,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -52,6 +66,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     vendorId: {
       type: String,
       default: VENDOR_ID_PODIGEE,
diff --git a/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue b/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue
index f0f4874..b3e2692 100644
--- a/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue
+++ b/src/vue/components/EmbedPodigeePlaceholder/EmbedPodigeePlaceholder.vue
@@ -1,7 +1,16 @@
 <template>
-  <embed-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
+  <embed-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :vendor-id="vendorId"
+  >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M30.814 16.9352C28.1511 15.2406 24.6665 17.1535 24.6665 20.3099V59.6898C24.6665 62.8462 28.1511 64.759 30.814 63.0645L61.7554 43.3745C64.2254 41.8027 64.2254 38.197 61.7554 36.6252L30.814 16.9352Z"
           stroke="#CED4DA"
@@ -9,7 +18,9 @@
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Podigee </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Podigee
+    </template>
     <template #description>
       Um mit Inhalten aus Podigee und anderen externen Inhalten zu interagieren oder diese darzustellen, brauchen wir
       deine Zustimmung.
diff --git a/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue b/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue
index 3fb2b3a..5ef1311 100644
--- a/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue
+++ b/src/vue/components/EmbedPodigeePlaceholderPur/EmbedPodigeePlaceholderPur.vue
@@ -6,7 +6,13 @@
     :switch-label="'Podigee freigeben'"
   >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M30.814 16.9352C28.1511 15.2406 24.6665 17.1535 24.6665 20.3099V59.6898C24.6665 62.8462 28.1511 64.759 30.814 63.0645L61.7554 43.3745C64.2254 41.8027 64.2254 38.197 61.7554 36.6252L30.814 16.9352Z"
           stroke="#CED4DA"
@@ -14,7 +20,9 @@
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Podigee </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Podigee
+    </template>
   </embed-placeholder-pur>
 </template>
 
diff --git a/src/vue/components/EmbedSocialNetworksConsent/EmbedSocialNetworksConsent.vue b/src/vue/components/EmbedSocialNetworksConsent/EmbedSocialNetworksConsent.vue
index 3738122..6265666 100644
--- a/src/vue/components/EmbedSocialNetworksConsent/EmbedSocialNetworksConsent.vue
+++ b/src/vue/components/EmbedSocialNetworksConsent/EmbedSocialNetworksConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-social-networks-placeholder-pur
         v-if="isPur"
         :vendor-id="vendorId"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
+        :class="teaserFormat"
+      />
+      <embed-social-networks-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-social-networks-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Soziales Netzwerk sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Soziales Netzwerk sperren'"
+      >
         <embed-content :content="content" />
       </embed-content-pur>
     </template>
@@ -28,6 +41,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string | null;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -53,6 +67,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: null,
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     privacyManagerId: {
       type: Number,
       required: true,
diff --git a/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue b/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue
index c546111..674b823 100644
--- a/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue
+++ b/src/vue/components/EmbedSocialNetworksPlaceholder/EmbedSocialNetworksPlaceholder.vue
@@ -1,8 +1,18 @@
 <template>
-  <embed-placeholder :privacy-manager-id="privacyManagerId" :purpose-id="purposeId" :vendor-id="vendorId">
+  <embed-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :purpose-id="purposeId"
+    :vendor-id="vendorId"
+  >
     <template #header>
       <slot name="header">
-        <svg width="102" height="80" viewBox="0 0 102 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="102"
+          height="80"
+          viewBox="0 0 102 80"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g opacity="0.3">
             <path
               d="M65.9658 42.7696C68.8825 39.1697 73.3392 36.8686 78.3333 36.8686C83.3274 36.8686 87.7841 39.1697 90.7008 42.7696C89.9041 43.8122 88.9786 44.751 87.948 45.5624C85.7549 42.6446 82.2645 40.7575 78.3333 40.7575C74.4021 40.7575 70.9117 42.6446 68.7186 45.5624C67.688 44.751 66.7625 43.8122 65.9658 42.7696Z"
@@ -37,14 +47,18 @@
       </slot>
     </template>
     <template #headline>
-      <slot name="headline"> An dieser Stelle findest du Inhalte aus sozialen Netzwerken </slot>
+      <slot name="headline">
+        An dieser Stelle findest du Inhalte aus sozialen Netzwerken
+      </slot>
     </template>
     <template #description>
       <slot name="description">
         Um mit Inhalten aus sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir deine Zustimmung.
       </slot>
     </template>
-    <template #buttonLabel> soziale Netzwerke aktivieren </template>
+    <template #buttonLabel>
+      soziale Netzwerke aktivieren
+    </template>
   </embed-placeholder>
 </template>
 
diff --git a/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue b/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue
index 2f00e23..d030112 100644
--- a/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue
+++ b/src/vue/components/EmbedSocialNetworksPlaceholderPur/EmbedSocialNetworksPlaceholderPur.vue
@@ -7,7 +7,13 @@
   >
     <template #header>
       <slot name="header">
-        <svg width="102" height="80" viewBox="0 0 102 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="102"
+          height="80"
+          viewBox="0 0 102 80"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <g opacity="0.3">
             <path
               d="M65.9658 42.7696C68.8825 39.1697 73.3392 36.8686 78.3333 36.8686C83.3274 36.8686 87.7841 39.1697 90.7008 42.7696C89.9041 43.8122 88.9786 44.751 87.948 45.5624C85.7549 42.6446 82.2645 40.7575 78.3333 40.7575C74.4021 40.7575 70.9117 42.6446 68.7186 45.5624C67.688 44.751 66.7625 43.8122 65.9658 42.7696Z"
@@ -42,7 +48,9 @@
       </slot>
     </template>
     <template #headline>
-      <slot name="headline"> An dieser Stelle findest du Inhalte aus sozialen Netzwerken </slot>
+      <slot name="headline">
+        An dieser Stelle findest du Inhalte aus sozialen Netzwerken
+      </slot>
     </template>
     <template #controls>
       <slot name="controls" />
diff --git a/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue b/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue
index fafdcd5..3c7f5f1 100644
--- a/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue
+++ b/src/vue/components/EmbedTwitterConsent/EmbedTwitterConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-twitter-placeholder-pur
         v-if="isPur"
         :vendor-id="vendorId"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
+        :class="teaserFormat"
+      />
+      <embed-twitter-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-twitter-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Twitter sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Twitter sperren'"
+      >
         <embed-content :content="content" />
       </embed-content-pur>
     </template>
@@ -29,6 +42,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -44,6 +58,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     vendorId: {
       type: String,
       default: VENDOR_ID_TWITTER,
diff --git a/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue b/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue
index 9018a47..a725366 100644
--- a/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue
+++ b/src/vue/components/EmbedTwitterPlaceholder/EmbedTwitterPlaceholder.vue
@@ -1,14 +1,25 @@
 <template>
-  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
+  <embed-social-networks-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :vendor-id="vendorId"
+  >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M73.3333 19.7418C70.8861 20.8391 68.2444 21.5641 65.4833 21.8891C68.3111 20.1974 70.4694 17.5141 71.5 14.3196C68.8583 15.8807 65.925 17.0335 62.8139 17.6391C60.3139 14.9863 56.7611 13.3335 52.8305 13.3335C45.2777 13.3335 39.1583 19.4529 39.1583 27.0002C39.1583 28.0724 39.2777 29.1141 39.5111 30.114C28.1444 29.5391 18.0694 24.1002 11.3277 15.8196C10.1555 17.8391 9.47774 20.1918 9.47774 22.6946C9.47774 27.4363 11.8861 31.6252 15.5583 34.0752C13.3166 34.0141 11.2111 33.3835 9.36385 32.3696C9.36385 32.4252 9.36385 32.489 9.36385 32.5418C9.36385 39.1696 14.075 44.7002 20.3361 45.9502C19.1888 46.2613 17.9777 46.4363 16.7305 46.4363C15.8444 46.4363 14.9972 46.3418 14.1527 46.1863C15.8944 51.6113 20.9444 55.5724 26.925 55.6863C22.2361 59.3585 16.35 61.5446 9.93329 61.5446C8.82774 61.5446 7.74718 61.4807 6.66663 61.3502C12.7333 65.2446 19.9194 67.4974 27.6416 67.4974C52.7944 67.4974 66.5527 46.6529 66.5527 28.5863C66.5527 27.9807 66.5416 27.3946 66.5111 26.8085C69.1805 24.8974 71.5 22.4891 73.3333 19.7418Z"
           fill="#CED4DA"
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Twitter </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Twitter
+    </template>
     <template #description>
       Um mit Inhalten aus Twitter und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir
       deine Zustimmung.
diff --git a/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue b/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue
index 90a0ef3..09de477 100644
--- a/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue
+++ b/src/vue/components/EmbedTwitterPlaceholderPur/EmbedTwitterPlaceholderPur.vue
@@ -6,14 +6,22 @@
     :switch-label="'Twitter freigeben'"
   >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           d="M73.3333 19.7418C70.8861 20.8391 68.2444 21.5641 65.4833 21.8891C68.3111 20.1974 70.4694 17.5141 71.5 14.3196C68.8583 15.8807 65.925 17.0335 62.8139 17.6391C60.3139 14.9863 56.7611 13.3335 52.8305 13.3335C45.2777 13.3335 39.1583 19.4529 39.1583 27.0002C39.1583 28.0724 39.2777 29.1141 39.5111 30.114C28.1444 29.5391 18.0694 24.1002 11.3277 15.8196C10.1555 17.8391 9.47774 20.1918 9.47774 22.6946C9.47774 27.4363 11.8861 31.6252 15.5583 34.0752C13.3166 34.0141 11.2111 33.3835 9.36385 32.3696C9.36385 32.4252 9.36385 32.489 9.36385 32.5418C9.36385 39.1696 14.075 44.7002 20.3361 45.9502C19.1888 46.2613 17.9777 46.4363 16.7305 46.4363C15.8444 46.4363 14.9972 46.3418 14.1527 46.1863C15.8944 51.6113 20.9444 55.5724 26.925 55.6863C22.2361 59.3585 16.35 61.5446 9.93329 61.5446C8.82774 61.5446 7.74718 61.4807 6.66663 61.3502C12.7333 65.2446 19.9194 67.4974 27.6416 67.4974C52.7944 67.4974 66.5527 46.6529 66.5527 28.5863C66.5527 27.9807 66.5416 27.3946 66.5111 26.8085C69.1805 24.8974 71.5 22.4891 73.3333 19.7418Z"
           fill="#CED4DA"
         />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus Twitter </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus Twitter
+    </template>
   </embed-social-networks-placeholder-pur>
 </template>
 
diff --git a/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue b/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue
index f0ffdc0..0e143f0 100644
--- a/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue
+++ b/src/vue/components/EmbedYoutubeConsent/EmbedYoutubeConsent.vue
@@ -1,16 +1,29 @@
 <template>
-  <consent-wrapper :vendor-id="vendorId" :is-pur="isPur">
+  <consent-wrapper
+    :vendor-id="vendorId"
+    :is-pur="isPur"
+  >
     <template #disabledContent>
       <embed-youtube-placeholder-pur
         v-if="isPur"
         :vendor-id="vendorId"
         :privacy-manager-id="privacyManagerId"
         :privacy-manager-id-deny-tracking="privacyManagerIdDenyTracking"
+        :class="teaserFormat"
+      />
+      <embed-youtube-placeholder
+        v-else
+        :privacy-manager-id="privacyManagerId"
+        :vendor-id="vendorId"
+        :class="teaserFormat"
       />
-      <embed-youtube-placeholder v-else :privacy-manager-id="privacyManagerId" :vendor-id="vendorId" />
     </template>
     <template #enabledContent>
-      <embed-content-pur :show-controls="isPur" :vendor-id="vendorId" :switch-label="'Youtube sperren'">
+      <embed-content-pur
+        :show-controls="isPur"
+        :vendor-id="vendorId"
+        :switch-label="'Youtube sperren'"
+      >
         <embed-content :content="content" />
       </embed-content-pur>
     </template>
@@ -29,6 +42,7 @@ import { EmbedContentPur } from '../EmbedContentPur';
 type Props = {
   vendorId: string;
   content: string;
+  teaserFormat: string;
   privacyManagerId: number;
   privacyManagerIdDenyTracking: number;
   isPur: boolean;
@@ -44,6 +58,10 @@ export default Vue.extend<NonNullish, NonNullish, NonNullish, Props>({
       type: String,
       default: '',
     },
+    teaserFormat: {
+      type: String,
+      default: '',
+    },
     vendorId: {
       type: String,
       default: VENDOR_ID_YOUTUBE,
diff --git a/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue b/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue
index 16c83bb..fc7a706 100644
--- a/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue
+++ b/src/vue/components/EmbedYoutubePlaceholder/EmbedYoutubePlaceholder.vue
@@ -1,7 +1,16 @@
 <template>
-  <embed-social-networks-placeholder :privacy-manager-id="privacyManagerId" :vendor-id="vendorId">
+  <embed-social-networks-placeholder
+    :privacy-manager-id="privacyManagerId"
+    :vendor-id="vendorId"
+  >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"
@@ -24,10 +33,12 @@
             fill="white"
           />
         </mask>
-        <g mask="url(#mask0_382_22532)"></g>
+        <g mask="url(#mask0_382_22532)" />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus YouTube </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus YouTube
+    </template>
     <template #description>
       Um mit Inhalten aus YouTube und anderen sozialen Netzwerken zu interagieren oder diese darzustellen, brauchen wir
       deine Zustimmung.
diff --git a/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue b/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue
index f3ab6d2..6734f5e 100644
--- a/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue
+++ b/src/vue/components/EmbedYoutubePlaceholderPur/EmbedYoutubePlaceholderPur.vue
@@ -6,7 +6,13 @@
     :switch-label="'Youtube freigeben'"
   >
     <template #header>
-      <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 80 80"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
         <path
           fill-rule="evenodd"
           clip-rule="evenodd"
@@ -29,10 +35,12 @@
             fill="white"
           />
         </mask>
-        <g mask="url(#mask0_382_22532)"></g>
+        <g mask="url(#mask0_382_22532)" />
       </svg>
     </template>
-    <template #headline> An dieser Stelle findest du Inhalte aus YouTube </template>
+    <template #headline>
+      An dieser Stelle findest du Inhalte aus YouTube
+    </template>
   </embed-social-networks-placeholder-pur>
 </template>
 
diff --git a/src/vue/components/InputSwitch/InputSwitch.vue b/src/vue/components/InputSwitch/InputSwitch.vue
index 9b33e60..e35e6e7 100644
--- a/src/vue/components/InputSwitch/InputSwitch.vue
+++ b/src/vue/components/InputSwitch/InputSwitch.vue
@@ -1,9 +1,18 @@
 <template>
   <div class="cmp-input-switch__container">
-    <label class="cmp-input-switch__label" :for="id">{{ label }}</label>
+    <label
+      class="cmp-input-switch__label"
+      :for="id"
+    >{{ label }}</label>
     <div class="cmp-input-switch">
       <div class="cmp-input-switch--hidden-accessible">
-        <input type="checkbox" ref="checkbox" :id="id" role="switch" @change="$emit('change', $event)" />
+        <input
+          type="checkbox"
+          ref="checkbox"
+          :id="id"
+          role="switch"
+          @change="$emit('change', $event)"
+        >
       </div>
       <span
         class="cmp-input-switch__slider"

From 6578c43369b0f5d9af427930172ca1ca2b4860f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Wed, 23 Feb 2022 13:27:56 +0100
Subject: [PATCH 4/8] update snapshots

---
 .../EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap  | 8 ++++++--
 .../__snapshots__/EmbedFacebookConsent.test.ts.snap       | 8 ++++++--
 .../__snapshots__/EmbedFacebookPlaceholder.test.ts.snap   | 8 ++++++--
 .../__snapshots__/EmbedInstagramConsent.test.ts.snap      | 8 ++++++--
 .../__snapshots__/EmbedInstagramPlaceholder.test.ts.snap  | 8 ++++++--
 .../__snapshots__/EmbedPlaceholder.test.ts.snap           | 8 ++++++--
 .../__snapshots__/EmbedPodigeeConsent.test.ts.snap        | 8 ++++++--
 .../__snapshots__/EmbedPodigeePlaceholder.test.ts.snap    | 8 ++++++--
 .../__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap | 4 +++-
 .../__snapshots__/EmbedSocialNetworksConsent.test.ts.snap | 8 ++++++--
 .../EmbedSocialNetworksPlaceholder.test.ts.snap           | 8 ++++++--
 .../__snapshots__/EmbedTwitterConsent.test.ts.snap        | 8 ++++++--
 .../__snapshots__/EmbedTwitterPlaceholder.test.ts.snap    | 8 ++++++--
 .../__snapshots__/EmbedYoutubeConsent.test.ts.snap        | 8 ++++++--
 .../__snapshots__/EmbedYoutubePlaceholder.test.ts.snap    | 8 ++++++--
 15 files changed, 87 insertions(+), 29 deletions(-)

diff --git a/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap b/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap
index f087060..6fba5f4 100644
--- a/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap
+++ b/src/vue/components/EmbedConsent/__snapshots__/EmbedConsent.test.ts.snap
@@ -37,7 +37,9 @@ exports[`EmbedConsent component should render the placeholder by default 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte von Drittanbietern 
+    
+      An dieser Stelle findest du Inhalte von Drittanbietern
+    
   </div>
    
   <div
@@ -51,7 +53,9 @@ exports[`EmbedConsent component should render the placeholder by default 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     externen Inhalt aktivieren 
+    
+          externen Inhalt aktivieren
+        
   </button>
    
   <div
diff --git a/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap b/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap
index 5114331..4c16709 100644
--- a/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap
+++ b/src/vue/components/EmbedFacebookConsent/__snapshots__/EmbedFacebookConsent.test.ts.snap
@@ -25,7 +25,9 @@ exports[`EmbedFacebookConsent component should render the placeholder by default
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Facebook 
+    
+    An dieser Stelle findest du Inhalte aus Facebook
+  
   </div>
    
   <div
@@ -40,7 +42,9 @@ exports[`EmbedFacebookConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap b/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap
index ccc8b55..df8722d 100644
--- a/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedFacebookPlaceholder/__snapshots__/EmbedFacebookPlaceholder.test.ts.snap
@@ -25,7 +25,9 @@ exports[`EmbedFacebookPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Facebook 
+    
+    An dieser Stelle findest du Inhalte aus Facebook
+  
   </div>
    
   <div
@@ -40,7 +42,9 @@ exports[`EmbedFacebookPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap b/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap
index ccdf86b..0681cdf 100644
--- a/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap
+++ b/src/vue/components/EmbedInstagramConsent/__snapshots__/EmbedInstagramConsent.test.ts.snap
@@ -35,7 +35,9 @@ exports[`EmbedInstagramConsent component should render the placeholder by defaul
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Instagram 
+    
+    An dieser Stelle findest du Inhalte aus Instagram
+  
   </div>
    
   <div
@@ -50,7 +52,9 @@ exports[`EmbedInstagramConsent component should render the placeholder by defaul
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap b/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap
index ea2e33d..6403c15 100644
--- a/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedInstagramPlaceholder/__snapshots__/EmbedInstagramPlaceholder.test.ts.snap
@@ -35,7 +35,9 @@ exports[`EmbedInstagramPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Instagram 
+    
+    An dieser Stelle findest du Inhalte aus Instagram
+  
   </div>
    
   <div
@@ -50,7 +52,9 @@ exports[`EmbedInstagramPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap b/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap
index b33251e..612a3b8 100644
--- a/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedPlaceholder/__snapshots__/EmbedPlaceholder.test.ts.snap
@@ -37,7 +37,9 @@ exports[`EmbedPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte von Drittanbietern 
+    
+      An dieser Stelle findest du Inhalte von Drittanbietern
+    
   </div>
    
   <div
@@ -51,7 +53,9 @@ exports[`EmbedPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     externen Inhalt aktivieren 
+    
+          externen Inhalt aktivieren
+        
   </button>
    
   <div
diff --git a/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap b/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap
index 9151d80..d3a881c 100644
--- a/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap
+++ b/src/vue/components/EmbedPodigeeConsent/__snapshots__/EmbedPodigeeConsent.test.ts.snap
@@ -26,7 +26,9 @@ exports[`EmbedPodigeeConsent component should render the placeholder by default
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Podigee 
+    
+    An dieser Stelle findest du Inhalte aus Podigee
+  
   </div>
    
   <div
@@ -41,7 +43,9 @@ exports[`EmbedPodigeeConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-     externen Inhalt aktivieren 
+    
+          externen Inhalt aktivieren
+        
   </button>
    
   <div
diff --git a/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap b/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap
index 6202396..1d52460 100644
--- a/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedPodigeePlaceholder/__snapshots__/EmbedPodigeePlaceholder.test.ts.snap
@@ -26,7 +26,9 @@ exports[`EmbedPodigeePlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Podigee 
+    
+    An dieser Stelle findest du Inhalte aus Podigee
+  
   </div>
    
   <div
@@ -41,7 +43,9 @@ exports[`EmbedPodigeePlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     externen Inhalt aktivieren 
+    
+          externen Inhalt aktivieren
+        
   </button>
    
   <div
diff --git a/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap b/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap
index b7a6188..c5343b7 100644
--- a/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap
+++ b/src/vue/components/EmbedPodigeePlaceholderPur/__snapshots__/EmbedPodigeePlaceholderPur.test.ts.snap
@@ -26,7 +26,9 @@ exports[`EmbedPodigeePlaceholderPur should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Podigee 
+    
+    An dieser Stelle findest du Inhalte aus Podigee
+  
   </div>
    
   <div
diff --git a/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap b/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap
index 072c5ba..8e7479a 100644
--- a/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap
+++ b/src/vue/components/EmbedSocialNetworksConsent/__snapshots__/EmbedSocialNetworksConsent.test.ts.snap
@@ -71,7 +71,9 @@ exports[`EmbedSocialNetworksConsent component should render the placeholder by d
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus sozialen Netzwerken 
+    
+      An dieser Stelle findest du Inhalte aus sozialen Netzwerken
+    
   </div>
    
   <div
@@ -85,7 +87,9 @@ exports[`EmbedSocialNetworksConsent component should render the placeholder by d
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap b/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap
index 636f304..0668f3a 100644
--- a/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedSocialNetworksPlaceholder/__snapshots__/EmbedSocialNetworksPlaceholder.test.ts.snap
@@ -59,7 +59,9 @@ exports[`EmbedSocialNetworksPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus sozialen Netzwerken 
+    
+      An dieser Stelle findest du Inhalte aus sozialen Netzwerken
+    
   </div>
    
   <div
@@ -73,7 +75,9 @@ exports[`EmbedSocialNetworksPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap b/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap
index 10220fd..a93c12f 100644
--- a/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap
+++ b/src/vue/components/EmbedTwitterConsent/__snapshots__/EmbedTwitterConsent.test.ts.snap
@@ -25,7 +25,9 @@ exports[`EmbedTwitterConsent component should render the placeholder by default
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Twitter 
+    
+    An dieser Stelle findest du Inhalte aus Twitter
+  
   </div>
    
   <div
@@ -40,7 +42,9 @@ exports[`EmbedTwitterConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap b/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap
index f1a165f..639c07e 100644
--- a/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedTwitterPlaceholder/__snapshots__/EmbedTwitterPlaceholder.test.ts.snap
@@ -25,7 +25,9 @@ exports[`EmbedTwitterPlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus Twitter 
+    
+    An dieser Stelle findest du Inhalte aus Twitter
+  
   </div>
    
   <div
@@ -40,7 +42,9 @@ exports[`EmbedTwitterPlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap b/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap
index d3199a1..5ea5d8f 100644
--- a/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap
+++ b/src/vue/components/EmbedYoutubeConsent/__snapshots__/EmbedYoutubeConsent.test.ts.snap
@@ -48,7 +48,9 @@ exports[`EmbedYoutubeConsent component should render the placeholder by default
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus YouTube 
+    
+    An dieser Stelle findest du Inhalte aus YouTube
+  
   </div>
    
   <div
@@ -63,7 +65,9 @@ exports[`EmbedYoutubeConsent component should render the placeholder by default
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div
diff --git a/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap b/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap
index 5a8b17d..089a8ff 100644
--- a/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap
+++ b/src/vue/components/EmbedYoutubePlaceholder/__snapshots__/EmbedYoutubePlaceholder.test.ts.snap
@@ -48,7 +48,9 @@ exports[`EmbedYoutubePlaceholder should render without any errors 1`] = `
   <div
     class="embed-placeholder__headline"
   >
-     An dieser Stelle findest du Inhalte aus YouTube 
+    
+    An dieser Stelle findest du Inhalte aus YouTube
+  
   </div>
    
   <div
@@ -63,7 +65,9 @@ exports[`EmbedYoutubePlaceholder should render without any errors 1`] = `
   <button
     class="embed-placeholder__button"
   >
-     soziale Netzwerke aktivieren 
+    
+    soziale Netzwerke aktivieren
+  
   </button>
    
   <div

From 39a6156e628ecf7ebe5021da7da21cea2b1d1070 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Thu, 24 Feb 2022 12:03:19 +0100
Subject: [PATCH 5/8] add layouts to playground

---
 playground/apps/common.css                    | 37 ++++++++++++++++++-
 playground/apps/esm-bundle.js                 | 24 +++++++++++-
 .../EmbedPlaceholder/EmbedPlaceholder.vue     | 13 +++++++
 .../EmbedPlaceholderPur.vue                   | 10 ++---
 4 files changed, 75 insertions(+), 9 deletions(-)

diff --git a/playground/apps/common.css b/playground/apps/common.css
index c0a9002..63bc3be 100644
--- a/playground/apps/common.css
+++ b/playground/apps/common.css
@@ -3,12 +3,15 @@
   flex-direction: column;
   align-items: center;
   list-style-type: none;
+  max-width: 992px;
+
+  padding: 0;
+  margin: auto;
 }
 
 .embed__item {
   margin-bottom: 20px;
   width: 100%;
-  max-width: 600px;
 }
 
 .privacy-manager__container {
@@ -26,7 +29,7 @@
   color: #fff;
 }
 
-.pur-section {
+.section {
   font-family: Gotham XNarrow, sans-serif;
   font-style: normal;
   font-weight: bold;
@@ -39,3 +42,33 @@
   padding: 12px;
   color: #000;
 }
+
+.layout-1 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas: 'slot1 slot1 slot2';
+  grid-gap: 16px;
+
+  margin-bottom: 20px;
+}
+
+.layout-1 > :nth-child(1) {
+  grid-area: slot1;
+}
+
+.layout-1 > :nth-child(2) {
+  grid-area: slot2;
+}
+
+.layout-2 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-areas: 'slot1 slot1 slot2';
+  grid-gap: 16px;
+
+  margin-bottom: 20px;
+}
+
+.layout-2 > :nth-child(1) {
+  grid-area: slot1;
+}
diff --git a/playground/apps/esm-bundle.js b/playground/apps/esm-bundle.js
index 48e66d2..b52d8a4 100644
--- a/playground/apps/esm-bundle.js
+++ b/playground/apps/esm-bundle.js
@@ -112,7 +112,7 @@ const PlaygroundApp = Vue.extend({
                 </embed-consent>
             </li>
         </ul>
-        <h2 class="pur-section">PUR</h2>
+        <h2 class="section">PUR</h2>
         <ul class="embed__container social-embeds__container">
             <li class="embed__item">
                 <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true"></embed-facebook-consent>
@@ -143,6 +143,28 @@ const PlaygroundApp = Vue.extend({
                 </embed-consent>
             </li>
         </ul>
+        <h2 class="section">LAYOUT SECTION</h2>
+        <div class="embed__container social-embeds__container layout-1">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" teaserFormat="quad"></embed-facebook-consent>
+            <embed-instagram-consent :content="instagram" :privacyManagerId="privacyManagerId" teaserFormat="bc"></embed-instagram-consent>
+        </div>
+        <div class="embed__container social-embeds__container layout-2">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" teaserFormat="a-teaser"></embed-facebook-consent>
+        </div>
+        <div class="embed__container social-embeds__container">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" teaserFormat="super-a"></embed-facebook-consent>
+        </div>
+        <h2 class="section">LAYOUT SECTION PUR</h2>
+        <div class="embed__container social-embeds__container layout-1">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="quad"></embed-facebook-consent>
+            <embed-instagram-consent :content="instagram" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="bc"></embed-instagram-consent>
+        </div>
+        <div class="embed__container social-embeds__container layout-2">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="a-teaser"></embed-facebook-consent>
+        </div>
+        <div class="embed__container social-embeds__container">
+            <embed-facebook-consent :content="facebook" :privacyManagerId="privacyManagerId" :privacyManagerIdDenyTracking="privacyManagerIdDenyTracking" :isPur="true" teaserFormat="super-a"></embed-facebook-consent>
+        </div>
     </div>
   `,
   methods: {
diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
index eef96d2..c7f07ad 100644
--- a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
+++ b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -131,6 +131,19 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   margin: 0 auto;
   display: flex;
   flex-direction: column;
+  box-sizing: border-box;
+}
+
+.quad.embed-placeholder__container {
+  aspect-ratio: 1;
+}
+
+.a-teaser.embed-placeholder__container {
+  aspect-ratio: 16/9;
+}
+
+.bc.embed-placeholder__container {
+  aspect-ratio: 20/41;
 }
 
 .embed-placeholder__header {
diff --git a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
index 5c1d90b..606545f 100644
--- a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
+++ b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
@@ -159,6 +159,10 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   flex: 1;
 }
 
+.a-teaser > .embed-placeholder__header--pur {
+  display: none;
+}
+
 .embed-placeholder__description--pur {
   font-family: Gotham XNarrow, sans-serif;
   font-style: normal;
@@ -177,12 +181,6 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   margin-top: auto;
 }
 
-@media (min-width: 0) and (max-width: 1023.99px) {
-  .a-teaser > .embed-placeholder__header--pur {
-    display: none;
-  }
-}
-
 @media (min-width: 0) and (max-width: 600px) {
   .embed-placeholder__header--pur {
     display: none;

From 7e90d9e2c8ac6a79c1914a99b7fc0c025ce52674 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Thu, 24 Feb 2022 12:07:26 +0100
Subject: [PATCH 6/8] adjsut css

---
 .../EmbedPlaceholder/EmbedPlaceholder.vue     | 36 +++++--------------
 1 file changed, 9 insertions(+), 27 deletions(-)

diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
index c7f07ad..fcf6f5f 100644
--- a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
+++ b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -1,17 +1,8 @@
 <template>
-  <div
-    class="embed-placeholder__container"
-    :data-vendor-id="vendorId"
-  >
+  <div class="embed-placeholder__container" :data-vendor-id="vendorId">
     <div class="embed-placeholder__header">
       <slot name="header">
-        <svg
-          width="80"
-          height="80"
-          viewBox="0 0 80 80"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             opacity="0.4"
             d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
@@ -30,9 +21,7 @@
       </slot>
     </div>
     <div class="embed-placeholder__headline">
-      <slot name="headline">
-        An dieser Stelle findest du Inhalte von Drittanbietern
-      </slot>
+      <slot name="headline"> An dieser Stelle findest du Inhalte von Drittanbietern </slot>
     </div>
     <div class="embed-placeholder__description">
       <slot name="description">
@@ -40,17 +29,9 @@
       </slot>
     </div>
     <consent-actions v-slot="{ consentVendor, consentPurpose }">
-      <slot
-        name="button"
-        v-bind="{ consentVendor, consentPurpose }"
-      >
-        <button
-          class="embed-placeholder__button"
-          @click.prevent="giveConsent(consentVendor, consentPurpose)"
-        >
-          <slot name="buttonLabel">
-            externen Inhalt aktivieren
-          </slot>
+      <slot name="button" v-bind="{ consentVendor, consentPurpose }">
+        <button class="embed-placeholder__button" @click.prevent="giveConsent(consentVendor, consentPurpose)">
+          <slot name="buttonLabel"> externen Inhalt aktivieren </slot>
         </button>
       </slot>
     </consent-actions>
@@ -66,7 +47,8 @@
             rel="noopener noreferrer"
             target="_blank"
             @click.prevent="loadPrivacyManagerModal(privacyManagerId)"
-          >hier</a>.
+            >hier</a
+          >.
         </slot>
       </div>
     </privacy-manager>
@@ -183,7 +165,7 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
 
 .embed-placeholder__button {
   display: block;
-  padding: 9px 50px;
+  padding: 9px;
   width: 100%;
   background: #00c373;
   border-radius: 8px;

From 633a9fecba8332c459d32362936c0d31c26273b0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Thu, 24 Feb 2022 12:07:45 +0100
Subject: [PATCH 7/8] linting

---
 .../EmbedPlaceholder/EmbedPlaceholder.vue     | 34 ++++++++++++++-----
 1 file changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
index fcf6f5f..9e14098 100644
--- a/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
+++ b/src/vue/components/EmbedPlaceholder/EmbedPlaceholder.vue
@@ -1,8 +1,17 @@
 <template>
-  <div class="embed-placeholder__container" :data-vendor-id="vendorId">
+  <div
+    class="embed-placeholder__container"
+    :data-vendor-id="vendorId"
+  >
     <div class="embed-placeholder__header">
       <slot name="header">
-        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg
+          width="80"
+          height="80"
+          viewBox="0 0 80 80"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
           <path
             opacity="0.4"
             d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
@@ -21,7 +30,9 @@
       </slot>
     </div>
     <div class="embed-placeholder__headline">
-      <slot name="headline"> An dieser Stelle findest du Inhalte von Drittanbietern </slot>
+      <slot name="headline">
+        An dieser Stelle findest du Inhalte von Drittanbietern
+      </slot>
     </div>
     <div class="embed-placeholder__description">
       <slot name="description">
@@ -29,9 +40,17 @@
       </slot>
     </div>
     <consent-actions v-slot="{ consentVendor, consentPurpose }">
-      <slot name="button" v-bind="{ consentVendor, consentPurpose }">
-        <button class="embed-placeholder__button" @click.prevent="giveConsent(consentVendor, consentPurpose)">
-          <slot name="buttonLabel"> externen Inhalt aktivieren </slot>
+      <slot
+        name="button"
+        v-bind="{ consentVendor, consentPurpose }"
+      >
+        <button
+          class="embed-placeholder__button"
+          @click.prevent="giveConsent(consentVendor, consentPurpose)"
+        >
+          <slot name="buttonLabel">
+            externen Inhalt aktivieren
+          </slot>
         </button>
       </slot>
     </consent-actions>
@@ -47,8 +66,7 @@
             rel="noopener noreferrer"
             target="_blank"
             @click.prevent="loadPrivacyManagerModal(privacyManagerId)"
-            >hier</a
-          >.
+          >hier</a>.
         </slot>
       </div>
     </privacy-manager>

From 10afdf282f631f4dca28cce441057a1d02445499 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Niendorf?=
 <38037172+aniendorf@users.noreply.github.com>
Date: Thu, 24 Feb 2022 13:21:19 +0100
Subject: [PATCH 8/8] adjust a-teaser

---
 .../EmbedPlaceholderPur.vue                   | 49 ++++++++-----------
 1 file changed, 21 insertions(+), 28 deletions(-)

diff --git a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
index 606545f..6213d09 100644
--- a/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
+++ b/src/vue/components/EmbedPlaceholderPur/EmbedPlaceholderPur.vue
@@ -1,17 +1,8 @@
 <template>
-  <div
-    class="embed-placeholder__container"
-    :data-vendor-id="vendorId"
-  >
+  <div class="embed-placeholder__container" :data-vendor-id="vendorId">
     <div class="embed-placeholder__header--pur">
       <slot name="header">
-        <svg
-          width="80"
-          height="80"
-          viewBox="0 0 80 80"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
+        <svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
           <path
             opacity="0.4"
             d="M46.1772 43.5439L64.8503 62.217C67.8858 58.824 70.2367 54.8056 71.6858 50.3789L46.1772 43.5439Z"
@@ -30,9 +21,7 @@
       </slot>
     </div>
     <div class="embed-placeholder__headline">
-      <slot name="headline">
-        An dieser Stelle findest du Inhalte von Drittanbietern
-      </slot>
+      <slot name="headline"> An dieser Stelle findest du Inhalte von Drittanbietern </slot>
     </div>
     <div class="embed-placeholder__description--pur">
       <slot name="description">
@@ -43,7 +32,8 @@
         diesen (jederzeit widerruflich) zu. Dies umfasst auch deine
         <abbr
           title="Die betreffenden Drittländer, insb. die USA, weisen im Zweifel nicht das Datenschutzniveau auf, das Sie unter der DSGVO genießen. Das kann Nachteile wie eine erschwerte Durchsetzung von Betroffenenrechten, eine fehlende Kontrolle der Weiterverarbeitung und Übermittlung der Daten oder Zugriffe auf die Daten durch staatliche Stellen, insb. Behörden der USA, zu Kontroll- und Überwachungszwecken bedeuten, ohne dass Ihnen Rechtsbehelfe dagegen zustehen. Dies liegt nicht in der Hand von Axel Springer, sondern bedarf einer Regelung auf Gesetzgebungsebene."
-        >Einwilligung in die Übermittlung bestimmter personenbezogener Daten in Drittländer, u.a. die USA</abbr>, nach Art. 49 (1) (a) DSGVO. Mehr Informationen dazu findest du
+          >Einwilligung in die Übermittlung bestimmter personenbezogener Daten in Drittländer, u.a. die USA</abbr
+        >, nach Art. 49 (1) (a) DSGVO. Mehr Informationen dazu findest du
         <privacy-manager v-slot="{ loadPrivacyManagerModal }">
           <span>
             <a
@@ -52,7 +42,8 @@
               rel="noopener noreferrer"
               title="Zu den Privatsphäre Einstellungen"
               @click.prevent="loadPrivacyManagerModal(privacyManagerId, 'vendors')"
-            >hier</a>
+              >hier</a
+            >
             . Du kannst deine Einwilligung jederzeit über den Schalter und über
             <a
               class="embed-placeholder__text-link"
@@ -60,7 +51,8 @@
               rel="noopener noreferrer"
               title="Tracking widerrufen"
               @click.prevent="loadPrivacyManagerModal(privacyManagerIdDenyTracking)"
-            >Widerruf Tracking</a>
+              >Widerruf Tracking</a
+            >
           </span>
         </privacy-manager>
         am Seitenende widerrufen.
@@ -68,14 +60,8 @@
     </div>
     <div class="embed-placeholder__actions">
       <consent-actions v-slot="{ consentVendorPUR }">
-        <slot
-          name="controls"
-          v-bind="{ consentVendorPUR }"
-        >
-          <input-switch
-            :label="switchLabel"
-            @change="giveConsent($event, consentVendorPUR)"
-          />
+        <slot name="controls" v-bind="{ consentVendorPUR }">
+          <input-switch :label="switchLabel" @change="giveConsent($event, consentVendorPUR)" />
         </slot>
       </consent-actions>
     </div>
@@ -159,8 +145,9 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   flex: 1;
 }
 
-.a-teaser > .embed-placeholder__header--pur {
-  display: none;
+.a-teaser > .embed-placeholder__header--pur svg {
+  width: 48px;
+  height: 48px;
 }
 
 .embed-placeholder__description--pur {
@@ -170,7 +157,7 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   font-size: 16px;
   line-height: 130%;
   color: #212529;
-  margin-bottom: 24px;
+  margin-bottom: 16px;
 }
 
 .embed-placeholder__actions {
@@ -181,6 +168,12 @@ export default Vue.extend<NonNullish, Methods, NonNullish, Props>({
   margin-top: auto;
 }
 
+@media (min-width: 0) and (max-width: 1023.99px) {
+  .a-teaser > .embed-placeholder__header--pur {
+    display: none;
+  }
+}
+
 @media (min-width: 0) and (max-width: 600px) {
   .embed-placeholder__header--pur {
     display: none;