.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-225 .elementor-element.elementor-element-037da84{margin:50px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-225 .elementor-element.elementor-element-4683eb7{margin:25px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;text-align:center;}.elementor-225 .elementor-element.elementor-element-e57bad6{--spacer-size:50px;}#elementor-popup-modal-225 .dialog-widget-content{animation-duration:1.2s;border-style:solid;border-width:3px 0px 3px 3px;border-color:#5B4FD9;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-225{background-color:rgba(0,0,0,.8);justify-content:flex-end;align-items:flex-start;pointer-events:all;}#elementor-popup-modal-225 .dialog-message{width:1000px;height:100vh;align-items:flex-start;padding:30px 30px 30px 30px;}#elementor-popup-modal-225 .dialog-close-button{display:flex;}@media(max-width:1024px){#elementor-popup-modal-225 .dialog-widget-content{border-width:0px 0px 0px 0px;}}@media(max-width:767px){.elementor-225 .elementor-element.elementor-element-e57bad6{--spacer-size:75px;}#elementor-popup-modal-225 .dialog-widget-content{border-width:0px 0px 0px 0px;}#elementor-popup-modal-225 .dialog-message{padding:10px 10px 10px 10px;}}/* Start custom CSS for html, class: .elementor-element-0824059 *//* Layout */
.elementor-225 .elementor-element.elementor-element-0824059 .feature {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.elementor-225 .elementor-element.elementor-element-0824059 .grid {
  display: grid;
  grid-template-columns: 1.0fr 1fr;
  gap: 48px;
  align-items: center;
}

.elementor-225 .elementor-element.elementor-element-0824059 .left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.elementor-225 .elementor-element.elementor-element-0824059 .left p {
    font-family: var( --e-global-typography-text-font-family ), Sans-serif;

    color: #2a2d34;
    font-weight: normal;
    font-size: 1rem;
}

/* Tabs: verstecken, bleiben aber zugänglich */
.elementor-225 .elementor-element.elementor-element-0824059 .tab {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Button-Style */
.elementor-225 .elementor-element.elementor-element-0824059 .pill {
  display: inline-flex;
  align-items: center;
  padding: 14px 16px;
  border-radius: 999px;
  border: 1px solid #e6e8ee;
  background: #f6f7fb;
  cursor: pointer;
  user-select: none;
  transition: background .2s ease, border-color .2s ease, transform .05s ease;
}

.elementor-225 .elementor-element.elementor-element-0824059 .module-icon {margin: 0 10px 0 0;}
.elementor-225 .elementor-element.elementor-element-0824059 .module-arrow {margin: 0 0 0 15px}

.elementor-225 .elementor-element.elementor-element-0824059 .pill:hover {
  background: #eef1ff;
background: linear-gradient(90deg,rgba(238, 241, 255, 1) 55%, rgba(91, 79, 217, 1) 100%);
  border-color: #d8dcff;
}

.elementor-225 .elementor-element.elementor-element-0824059 .pill:active {
  transform: translateY(1px);
}

/* Rechts: "Phone" Container */
.elementor-225 .elementor-element.elementor-element-0824059 .right {
  display: flex;
  justify-content: center;
}

.elementor-225 .elementor-element.elementor-element-0824059 .phone {
  width: 220px;
  aspect-ratio: 9 / 19.5;   /* ungefähr Smartphone */
  border-radius: 40px;
  background: url('/wp-content/uploads/2026/01/crelock-funktionen.png') no-repeat #0b0c10;
  background-size:280px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}

/* Alle Screens übereinander legen */
.elementor-225 .elementor-element.elementor-element-0824059 .screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0;
  transform: scale(1.02);
  transition: opacity .25s ease, transform .35s ease;
}

/* Default: erstes Bild sichtbar */
.elementor-225 .elementor-element.elementor-element-0824059 #f1:checked ~ .grid .phone .s1 { opacity: 1; transform: scale(1); }
.elementor-225 .elementor-element.elementor-element-0824059 #f2:checked ~ .grid .phone .s2 { opacity: 1; transform: scale(1); }
.elementor-225 .elementor-element.elementor-element-0824059 #f3:checked ~ .grid .phone .s3 { opacity: 1; transform: scale(1); }
.elementor-225 .elementor-element.elementor-element-0824059 #f4:checked ~ .grid .phone .s4 { opacity: 1; transform: scale(1); }
.elementor-225 .elementor-element.elementor-element-0824059 #f5:checked ~ .grid .phone .s5 { opacity: 1; transform: scale(1); }

/* Aktiven Button hervorheben */
.elementor-225 .elementor-element.elementor-element-0824059 #f1:checked ~ .grid .left div[for="f1"],
.elementor-225 .elementor-element.elementor-element-0824059 #f2:checked ~ .grid .left div[for="f2"],
.elementor-225 .elementor-element.elementor-element-0824059 #f3:checked ~ .grid .left div[for="f3"],
.elementor-225 .elementor-element.elementor-element-0824059 #f4:checked ~ .grid .left div[for="f4"],
.elementor-225 .elementor-element.elementor-element-0824059 #f5:checked ~ .grid .left div[for="f5"] {
    background: #eef1ff;
  background: linear-gradient(90deg,rgba(238, 241, 255, 1) 55%, rgba(91, 79, 217, 1) 100%);
  border-color: #cfd6ff;
}

@media screen and (max-width: 767px) {
    .elementor-225 .elementor-element.elementor-element-0824059 .grid {
  display: block;
}

.left {margin: 0 0 50px;}
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-4683eb7 */.elementor-225 .elementor-element.elementor-element-4683eb7 {
    background: #111;
    color: #fff;
    padding: 8px 20px;
    border-radius: 25px;
    margin: 0 auto;
    border: 1px solid #111;
    display: block;
    width:auto;
}

.elementor-225 .elementor-element.elementor-element-4683eb7 a {
    color: #fff;
    
}

.elementor-225 .elementor-element.elementor-element-4683eb7:hover {
    background: #fff;
    color: #fff;
    width: auto;
    padding:8px 20px;
    border-radius: 25px;
    margin:0 auto;
    border:1px solid #5B4FD9;
}

.elementor-225 .elementor-element.elementor-element-4683eb7 a:hover {
    color: #5B4FD9;
    
}/* End custom CSS */