.elementor-kit-5{--e-global-color-primary:#004EFF;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#30323D;--e-global-color-accent:#F06543;--e-global-color-82a9772:#D6D1D9;--e-global-color-cc8a9a0:#000000;--e-global-color-94676d1:#CBFFB9;--e-global-color-09961f5:#04594B;--e-global-color-519dea8:#00332B;--e-global-color-760b2dc:#A9E494;--e-global-color-9deec81:#F8FFF8;--e-global-color-69689e0:#F9FFF7;--e-global-color-30a7c00:#E6F6E0;color:var( --e-global-color-cc8a9a0 );font-family:"N27", Sans-serif;font-size:1rem;font-weight:300;letter-spacing:0.05rem;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-kit-5 a{color:var( --e-global-color-primary );}.elementor-kit-5 h1{font-family:"N27", Sans-serif;font-size:8rem;font-weight:800;}.elementor-kit-5 h2{font-family:"N27", Sans-serif;font-size:6rem;}.elementor-kit-5 h3{font-family:"N27", Sans-serif;font-size:4rem;}.elementor-kit-5 h4{font-family:"N27", Sans-serif;font-size:3rem;}.elementor-kit-5 h5{font-family:"N27", Sans-serif;font-size:2rem;}.elementor-kit-5 h6{font-family:"N27", Sans-serif;font-size:1rem;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}:root { --6-REM:6rem; --White:#FFF; --Blue:#2700ff; --Blue-Dark:#1d00bf; --true-black:#000000; }
/* Start custom CSS *//* ╔══════════════════════════════════════════════════════════════╗
   ║  FLEXBOX DESIGN SYSTEM – 4er Basis                         ║
   ║  Kreativbox / remazing nova                                ║
   ║                                                            ║
   ║  Inhaltsverzeichnis:                                       ║
   ║  1. Custom Properties / Design Tokens                      ║
   ║  2. Base Reset                                             ║
   ║  3. Layout Container                                       ║
   ║  4. Flex Grid System (4-Column)                            ║
   ║  5. Tech-Grid Border System                                ║
   ║  6. Expandable Cards Modifier                              ║
   ║  7. Padding Utilities                                      ║
   ║  8. Margin Utilities                                       ║
   ║  9. Gap Utilities                                          ║
   ║  10. Typography                                            ║
   ║  11. Alignment Utilities                                   ║
   ║  12. Responsive (Tablet / Mobile)                          ║
   ║  13. Accessibility                                         ║
   ╚══════════════════════════════════════════════════════════════╝ */


/* ══════════════════════════════════════════════════════════════
   1. CUSTOM PROPERTIES / DESIGN TOKENS
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Fluid Typography ── */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.15vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.2vw,  1rem);
  --text-base: clamp(1rem,     0.9rem  + 0.3vw,  1.125rem);
  --text-lg:   clamp(1.25rem,  1rem    + 0.8vw,  1.75rem);
  --text-xl:   clamp(1.5rem,   1rem    + 1.5vw,  2.5rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1.5rem  + 3vw,    5rem);

  /* ── Fluid Spacing ── */
  --space-xs:  clamp(0.25rem,  0.5vw,  0.5rem);
  --space-sm:  clamp(0.5rem,   1vw,    1rem);
  --space-md:  clamp(1rem,     2vw,    2rem);
  --space-lg:  clamp(1.5rem,   3vw,    3rem);
  --space-xl:  clamp(2rem,     4vw,    4rem);
  --space-2xl: clamp(3rem,     6vw,    6rem);
  --space-3xl: clamp(4rem,     8vw,    8rem);

  /* ── Section Spacing (harte Breakpoints) ── */
  --section-py: 2rem;
  --section-px: 1rem;

  /* ── Layout ── */
  --container-max: 1400px;
  --container-padding: clamp(1rem, 3vw, 2rem);

  /* ── Tech-Grid Borders ── */
  --border-tech: 1px solid rgba(214, 209, 217, 0.23);

  /* ── Transitions ── */
  --ease-default: 0.3s ease;
  --ease-expand:  0.5s ease;

  /* ── Farben (Platzhalter – an Brand anpassen) ── */
  --color-bg:      #0a0a0a;
  --color-surface:  #111111;
  --color-text:     #ffffff;
  --color-text-dim: rgba(255, 255, 255, 0.6);
  --color-accent:   #4f46e5;
}

@media (min-width: 768px) {
  :root {
    --section-py: 4rem;
    --section-px: 2rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --section-py: 6rem;
    --section-px: 3rem;
  }
}


/* ══════════════════════════════════════════════════════════════
   2. BASE RESET
   ══════════════════════════════════════════════════════════════ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}


/* ══════════════════════════════════════════════════════════════
   3. LAYOUT CONTAINER
   ══════════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

/* Full-Width Wrapper mit begrenztem Content */
.section {
  width: 100%;
  padding-block: var(--section-py);
  padding-inline: var(--section-px);
}

.section > .container {
  padding-inline: 0;
}


/* ══════════════════════════════════════════════════════════════
   4. FLEX GRID SYSTEM (4-Column Basis)
   
   Alle Layouts basieren auf Anteilen von 4:
   1/3 = 25%/75%, 2/2 = 50%/50%, etc.
   ══════════════════════════════════════════════════════════════ */

/* ── Base Row ── */
.row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.row--nowrap {
  flex-wrap: nowrap;
}

/* ── Column Basis ── */
.col {
  min-width: 0;    /* Verhindert Flex-Overflow */
  flex-shrink: 1;
}


/* ── Layout: 1/1/1/1 → vier gleiche Spalten (Default) ── */
.row--1-1-1-1 > .col { flex: 1 1 0; }

/* ── Layout: 2/2 → zwei gleiche Spalten ── */
.row--2-2 > .col { flex: 1 1 0; }

/* ── Layout: 1/3 → schmal | breit ── */
.row--1-3 > .col:first-child { flex: 1 1 0; }
.row--1-3 > .col:last-child  { flex: 3 1 0; }

/* ── Layout: 3/1 → breit | schmal ── */
.row--3-1 > .col:first-child { flex: 3 1 0; }
.row--3-1 > .col:last-child  { flex: 1 1 0; }

/* ── Layout: 1/1/2 → klein | klein | doppelt ── */
.row--1-1-2 > .col             { flex: 1 1 0; }
.row--1-1-2 > .col:last-child  { flex: 2 1 0; }

/* ── Layout: 2/1/1 → doppelt | klein | klein ── */
.row--2-1-1 > .col             { flex: 1 1 0; }
.row--2-1-1 > .col:first-child { flex: 2 1 0; }

/* ── Layout: 1/2/1 → klein | doppelt | klein ── */
.row--1-2-1 > .col                 { flex: 1 1 0; }
.row--1-2-1 > .col:nth-child(2)    { flex: 2 1 0; }

/* ── Layout: 1/1/1 → drei gleiche ── */
.row--1-1-1 > .col { flex: 1 1 0; }

/* ── Layout: 1/1 → alias für 2/2 ── */
.row--1-1 > .col { flex: 1 1 0; }

/* ── Layout: Full → eine Spalte ── */
.row--full > .col { flex: 1 1 100%; }

/* ── Layout: Auto → Spalten nach Inhalt ── */
.row--auto > .col { flex: 0 1 auto; }


/* ══════════════════════════════════════════════════════════════
   5. TECH-GRID BORDER SYSTEM
   
   Technischer Zeichnungs-Look:
   Eltern = border top + left
   Kinder = border bottom + right
   → Kein doppelter Border, sauberes Raster
   ══════════════════════════════════════════════════════════════ */

.tech-grid {
  border-style: solid;
  border-width: 1px 0 0 1px;
  border-color: rgba(214, 209, 217, 0.23);
}

.tech-cell {
  border-style: solid;
  border-width: 0 1px 1px 0;
  border-color: rgba(214, 209, 217, 0.23);
}

/* Tech-Grid ohne Gap (Borders schließen direkt an) */
.tech-grid.row {
  gap: 0;
}

/* Variante: Tech-Grid mit innerem Gap */
.tech-grid--spaced.row {
  gap: 0;
}

.tech-grid--spaced > .tech-cell {
  padding: var(--space-md);
}


/* ══════════════════════════════════════════════════════════════
   6. EXPANDABLE CARDS MODIFIER
   
   Verwandelt eine Row in ein expandable Card-Layout.
   Flex-based Animation, Grayscale-Effekt, Slide-Up Desc.
   ══════════════════════════════════════════════════════════════ */

.row--expandable {
  flex-wrap: nowrap;
  overflow: hidden;
  border-radius: 1rem;
  height: 400px;
}

/* ── Card Base ── */
.row--expandable > .col {
  flex: 1 1 0;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: flex var(--ease-expand);
  will-change: flex;
}

/* ── Expand on Hover ── */
.row--expandable > .col:hover {
  flex: 3 1 0;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
}

/* ── Card Image ── */
.row--expandable .card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: 
    transform var(--ease-expand), 
    filter var(--ease-expand);
  will-change: transform, filter;
  /* Shimmer Loader */
  background: linear-gradient(90deg, #333 25%, #444 50%, #333 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.row--expandable > .col:hover .card-img {
  filter: grayscale(0%);
  transform: scale(1.15);
}

/* ── Gradient Overlay ── */
.row--expandable > .col::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent 50%);
  opacity: 0;
  transition: opacity var(--ease-default);
  z-index: 1;
  pointer-events: none;
}

.row--expandable > .col:hover::after {
  opacity: 1;
}

/* ── Card Title Badge ── */
.row--expandable .card-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 0.6rem 1.2rem;
  border-radius: 0.5rem;
  font-size: var(--text-base);
  white-space: nowrap;
  transition: 
    background var(--ease-default), 
    color var(--ease-default),
    transform var(--ease-default);
  z-index: 2;
}

.row--expandable > .col:hover .card-title {
  background: rgba(255, 255, 255, 0.85);
  color: #000;
  transform: translate(-50%, -50%) scale(1.1);
}

/* ── Card Description (Slide-Up) ── */
.row--expandable .card-desc {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: var(--space-sm) var(--space-md);
  color: #fff;
  font-size: var(--text-sm);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
  transform: translateY(100%);
  transition: transform var(--ease-default);
  z-index: 3;
}

.row--expandable > .col:hover .card-desc {
  transform: translateY(0);
}

/* ── Keyboard Accessibility ── */
.row--expandable .col a {
  display: block;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.row--expandable .col a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.row--expandable .col a:focus-visible img {
  filter: grayscale(0%);
}


/* ══════════════════════════════════════════════════════════════
   7. PADDING UTILITIES
   ══════════════════════════════════════════════════════════════ */

/* ── Alle Seiten ── */
.p-0    { padding: 0; }
.p-xs   { padding: var(--space-xs); }
.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-lg   { padding: var(--space-lg); }
.p-xl   { padding: var(--space-xl); }
.p-2xl  { padding: var(--space-2xl); }
.p-3p   { padding: 3%; }
.p-5p   { padding: 5%; }

/* ── Horizontal (inline) ── */
.px-0   { padding-inline: 0; }
.px-xs  { padding-inline: var(--space-xs); }
.px-sm  { padding-inline: var(--space-sm); }
.px-md  { padding-inline: var(--space-md); }
.px-lg  { padding-inline: var(--space-lg); }
.px-xl  { padding-inline: var(--space-xl); }
.px-2xl { padding-inline: var(--space-2xl); }
.px-3p  { padding-inline: 3%; }
.px-5p  { padding-inline: 5%; }

/* ── Vertikal (block) ── */
.py-0   { padding-block: 0; }
.py-xs  { padding-block: var(--space-xs); }
.py-sm  { padding-block: var(--space-sm); }
.py-md  { padding-block: var(--space-md); }
.py-lg  { padding-block: var(--space-lg); }
.py-xl  { padding-block: var(--space-xl); }
.py-2xl { padding-block: var(--space-2xl); }
.py-3p  { padding-block: 3%; }
.py-5p  { padding-block: 5%; }

/* ── Einzelne Seiten ── */
.pt-0   { padding-top: 0; }
.pt-sm  { padding-top: var(--space-sm); }
.pt-md  { padding-top: var(--space-md); }
.pt-lg  { padding-top: var(--space-lg); }
.pt-xl  { padding-top: var(--space-xl); }

.pb-0   { padding-bottom: 0; }
.pb-sm  { padding-bottom: var(--space-sm); }
.pb-md  { padding-bottom: var(--space-md); }
.pb-lg  { padding-bottom: var(--space-lg); }
.pb-xl  { padding-bottom: var(--space-xl); }

.pl-0   { padding-left: 0; }
.pl-sm  { padding-left: var(--space-sm); }
.pl-md  { padding-left: var(--space-md); }
.pl-lg  { padding-left: var(--space-lg); }

.pr-0   { padding-right: 0; }
.pr-sm  { padding-right: var(--space-sm); }
.pr-md  { padding-right: var(--space-md); }
.pr-lg  { padding-right: var(--space-lg); }


/* ══════════════════════════════════════════════════════════════
   8. MARGIN UTILITIES
   ══════════════════════════════════════════════════════════════ */

/* ── Alle Seiten ── */
.m-0    { margin: 0; }
.m-auto { margin: auto; }

/* ── Horizontal (inline) ── */
.mx-auto { margin-inline: auto; }
.mx-0    { margin-inline: 0; }
.mx-sm   { margin-inline: var(--space-sm); }
.mx-md   { margin-inline: var(--space-md); }

/* ── Vertikal (block) ── */
.my-0    { margin-block: 0; }
.my-sm   { margin-block: var(--space-sm); }
.my-md   { margin-block: var(--space-md); }
.my-lg   { margin-block: var(--space-lg); }
.my-xl   { margin-block: var(--space-xl); }
.my-2xl  { margin-block: var(--space-2xl); }

/* ── Einzelne Seiten ── */
.mt-0    { margin-top: 0; }
.mt-sm   { margin-top: var(--space-sm); }
.mt-md   { margin-top: var(--space-md); }
.mt-lg   { margin-top: var(--space-lg); }
.mt-xl   { margin-top: var(--space-xl); }
.mt-auto { margin-top: auto; }

.mb-0    { margin-bottom: 0; }
.mb-sm   { margin-bottom: var(--space-sm); }
.mb-md   { margin-bottom: var(--space-md); }
.mb-lg   { margin-bottom: var(--space-lg); }
.mb-xl   { margin-bottom: var(--space-xl); }
.mb-auto { margin-bottom: auto; }


/* ══════════════════════════════════════════════════════════════
   9. GAP UTILITIES
   ══════════════════════════════════════════════════════════════ */

.gap-0    { gap: 0; }
.gap-xs   { gap: var(--space-xs); }
.gap-sm   { gap: var(--space-sm); }
.gap-md   { gap: var(--space-md); }
.gap-lg   { gap: var(--space-lg); }
.gap-xl   { gap: var(--space-xl); }
.gap-2xl  { gap: var(--space-2xl); }

/* Row/Column Gap separat */
.gap-x-0  { column-gap: 0; }
.gap-x-sm { column-gap: var(--space-sm); }
.gap-x-md { column-gap: var(--space-md); }
.gap-x-lg { column-gap: var(--space-lg); }

.gap-y-0  { row-gap: 0; }
.gap-y-sm { row-gap: var(--space-sm); }
.gap-y-md { row-gap: var(--space-md); }
.gap-y-lg { row-gap: var(--space-lg); }


/* ══════════════════════════════════════════════════════════════
   10. TYPOGRAPHY
   ══════════════════════════════════════════════════════════════ */

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-light    { font-weight: 300; }
.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.uppercase   { text-transform: uppercase; }
.lowercase   { text-transform: lowercase; }
.capitalize  { text-transform: capitalize; }

.tracking-tight  { letter-spacing: -0.025em; }
.tracking-normal { letter-spacing: 0; }
.tracking-wide   { letter-spacing: 0.05em; }

.leading-tight  { line-height: 1.2; }
.leading-normal { line-height: 1.5; }
.leading-loose  { line-height: 1.8; }


/* ══════════════════════════════════════════════════════════════
   11. ALIGNMENT UTILITIES
   ══════════════════════════════════════════════════════════════ */

/* ── Flex Direction ── */
.flex-row    { flex-direction: row; }
.flex-col    { flex-direction: column; }

/* ── Justify Content (Hauptachse) ── */
.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }
.justify-evenly  { justify-content: space-evenly; }

/* ── Align Items (Kreuzachse) ── */
.items-start    { align-items: flex-start; }
.items-center   { align-items: center; }
.items-end      { align-items: flex-end; }
.items-stretch  { align-items: stretch; }
.items-baseline { align-items: baseline; }

/* ── Align Self (einzelnes Item) ── */
.self-start   { align-self: flex-start; }
.self-center  { align-self: center; }
.self-end     { align-self: flex-end; }
.self-stretch { align-self: stretch; }

/* ── Centering Shortcut ── */
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Full Height ── */
.h-full    { height: 100%; }
.h-screen  { height: 100vh; }
.h-auto    { height: auto; }
.min-h-0   { min-height: 0; }

/* ── Width ── */
.w-full    { width: 100%; }
.w-auto    { width: auto; }


/* ══════════════════════════════════════════════════════════════
   12. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

/* ── Tablet: max 2 Spalten ── */
@media (max-width: 1024px) {

  .row--1-1-1-1 > .col { flex: 1 1 calc(50% - var(--space-md)); }
  .row--1-1-2 > .col   { flex: 1 1 calc(50% - var(--space-md)); }
  .row--2-1-1 > .col   { flex: 1 1 calc(50% - var(--space-md)); }
  .row--1-2-1 > .col   { flex: 1 1 calc(50% - var(--space-md)); }
  .row--1-1-1 > .col   { flex: 1 1 calc(50% - var(--space-md)); }

  /* Expandable Cards: niedrigere Höhe */
  .row--expandable {
    height: 300px;
  }
}

/* ── Mobile: alles stacked ── */
@media (max-width: 767px) {

  .row > .col {
    flex: 1 1 100% !important;
  }

  /* Expandable Cards: vertikaler Stack */
  .row--expandable {
    flex-direction: column;
    height: auto;
  }

  .row--expandable > .col {
    flex: none !important;
    height: 250px;
  }

  .row--expandable > .col:hover {
    flex: none !important;
  }

  /* Auf Mobile: alles sichtbar */
  .row--expandable .card-img {
    filter: grayscale(0%);
  }

  .row--expandable > .col::after {
    opacity: 1;
  }

  .row--expandable .card-desc {
    transform: translateY(0);
  }
}

/* ── Responsive Padding Overrides ── */
@media (max-width: 767px) {
  .sm\:p-sm  { padding: var(--space-sm); }
  .sm\:p-md  { padding: var(--space-md); }
  .sm\:px-sm { padding-inline: var(--space-sm); }
  .sm\:py-sm { padding-block: var(--space-sm); }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .md\:p-md  { padding: var(--space-md); }
  .md\:p-lg  { padding: var(--space-lg); }
  .md\:px-md { padding-inline: var(--space-md); }
  .md\:py-md { padding-block: var(--space-md); }
}

/* ── Responsive Alignment Overrides ── */
@media (max-width: 767px) {
  .sm\:flex-col     { flex-direction: column; }
  .sm\:text-center  { text-align: center; }
  .sm\:items-center { align-items: center; }
}

/* ── Touch Device Support ── */
@media (max-width: 767px) and (hover: none) {
  .row--expandable > .col:active {
    flex: 2 !important;
  }

  .row--expandable > .col:active .card-img {
    transform: scale(1.1);
  }
}


/* ══════════════════════════════════════════════════════════════
   13. ACCESSIBILITY
   ══════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .row--expandable > .col,
  .row--expandable .card-img,
  .row--expandable .card-title,
  .row--expandable .card-desc,
  .row--expandable > .col::after {
    transition: none;
  }

  .row--expandable .card-img {
    animation: none;
  }
}

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}




.liquid-glass {
  position: relative;
  padding: 1.5rem;
  border-radius: 100vmax;
  isolation: isolate;
  background-color: rgb(255 255 255 / 25%);
  color: rgb(255 255 255 / 90%);
  text-shadow: 0 2px 4px rgb(0 0 0 / 10%);
  font-size: 1.25rem;
  box-shadow: 0 6px 6px rgb(0 0 0 / 20%), 0 0 20px rgb(0 0 0 / 10%);
  text-align: center;
  user-select: none;
  cursor: grab;
  
  &::before,
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
  }
  
  // Glass distortion effect
  &::before {
    backdrop-filter: blur(3px);
    filter: url(#glass-distortion);
    z-index: -1;
  }
  
  // Outline shine
  &::after {
    box-shadow: inset 2px 2px 1px 0 rgb(255 255 255 / 50%), inset -1px -1px 1px 1px rgb(255 255 255 / 50%);
  }
  
  &.dragging {
    cursor: grabbing;
  }
}



.blur {backdrop-filter: blur(8px);
    
    background: rgba( 255, 255, 255, 0.17);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
}


.glass-card {
 
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
background-image: url(data:image/png;base64,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);


  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.1),
    inset 0 0 56px 28px rgba(255, 255, 255, 2.8);
  position: relative;
  overflow: hidden;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.05),
    transparent
  );
  
.glass-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.1),
    transparent,
    rgba(255, 255, 255, 0.4)
  );
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'N27';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Bold.woff2') format('woff2'),
		url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Bold.woff') format('woff');
}
@font-face {
	font-family: 'N27';
	font-style: normal;
	font-weight: 500;
	font-display: auto;
	src: url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Medium.woff2') format('woff2'),
		url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Medium.woff') format('woff');
}
@font-face {
	font-family: 'N27';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Thin.woff2') format('woff2'),
		url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Thin.woff') format('woff');
}
@font-face {
	font-family: 'N27';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://siemens-design.de/wp-content/uploads/2023/07/N27-ExtraLight.woff2') format('woff2'),
		url('https://siemens-design.de/wp-content/uploads/2023/07/N27-ExtraLight.woff') format('woff');
}
@font-face {
	font-family: 'N27';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Light.woff2') format('woff2'),
		url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Light.woff') format('woff');
}
@font-face {
	font-family: 'N27';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Regular.woff2') format('woff2'),
		url('https://siemens-design.de/wp-content/uploads/2023/07/N27-Regular.woff') format('woff');
}
/* End Custom Fonts CSS */