feat(): add overflow hidden for cards and background to controls

Author: michaelmkraus

template/components/InteractiveDemo/InteractiveDemo.css

@@ -15,11 +15,15 @@
   width: 100%;
   max-width: fit-content;
   margin: 0 auto;
+  background-color: var(--db-adaptive-bg-basic-level-1-default);
 }
 
 .interactive-demo__card {
   display: none;
 }
+.interactive-demo__card .db-card {
+  overflow: hidden;
+}
 
 .interactive-demo__card[data-active="true"] {
   display: block;
@@ -70,7 +74,7 @@
 
 /* Green (S-Bahn) */
 .interactive-demo [data-image-toggle-button][data-color="green"] {
-  --demo-bg-active: var(--db-semantic-success-default, #2e7d32);
+  --demo-bg-active: var(--db-semantic-success-default);
   --demo-bg-inactive: color-mix(in srgb, var(--db-semantic-success-default, #2e7d32) 22%, white 78%);
 }
 .db-shell[data-mode="light"] .interactive-demo [data-image-toggle-button][data-color="green"] {
@@ -82,7 +86,7 @@
 
 /* Blue (Station & Service) */
 .interactive-demo [data-image-toggle-button][data-color="blue"] {
-  --demo-bg-active: var(--db-semantic-informational-default, #1565c0);
+  --demo-bg-active: var(--db-semantic-informational-default);
   --demo-bg-inactive: color-mix(in srgb, var(--db-semantic-informational-default, #1565c0) 22%, white 78%);
 }
 .db-shell[data-mode="light"] .interactive-demo [data-image-toggle-button][data-color="blue"] {