.elementor-702 .elementor-element.elementor-element-721551e1{--display:flex;--overlay-opacity:0.5;}.elementor-702 .elementor-element.elementor-element-721551e1::before, .elementor-702 .elementor-element.elementor-element-721551e1 > .elementor-background-video-container::before, .elementor-702 .elementor-element.elementor-element-721551e1 > .e-con-inner > .elementor-background-video-container::before, .elementor-702 .elementor-element.elementor-element-721551e1 > .elementor-background-slideshow::before, .elementor-702 .elementor-element.elementor-element-721551e1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-702 .elementor-element.elementor-element-721551e1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000FC;--background-overlay:'';}#elementor-popup-modal-702{background-color:#00000099;justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-702 .dialog-message{width:920px;height:auto;}#elementor-popup-modal-702 .dialog-close-button{display:flex;top:25px;font-size:20px;}#elementor-popup-modal-702 .dialog-widget-content{box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}body:not(.rtl) #elementor-popup-modal-702 .dialog-close-button{right:5%;}body.rtl #elementor-popup-modal-702 .dialog-close-button{left:5%;}#elementor-popup-modal-702 .dialog-close-button i{color:#C8A038;}#elementor-popup-modal-702 .dialog-close-button svg{fill:#C8A038;}@media(min-width:768px){.elementor-702 .elementor-element.elementor-element-721551e1{--content-width:920px;}}/* Start custom CSS */:root{
  --gold: #cfa640;
  --accent: #2b3d6b;
  --bg: #0c0c0c;
  --bg2:#141414;
  --text:#e9e4d0;
}

/* Modal-Rahmen */
.svc-modal{ background:var(--bg); border:1px solid var(--gold); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.55); overflow:hidden; }
.svc-modal__header{
  padding:18px 22px;
  border-bottom:1px solid rgba(207,166,64,.35);
  background:radial-gradient(ellipse at 50% 0%, rgba(207,166,64,.12), transparent 70%), linear-gradient(180deg, rgba(207,166,64,.04), rgba(207,166,64,.02));
}
.svc-modal__header h3{ margin:0; color:var(--gold); letter-spacing:.02em; font-style:italic; }
.svc-list{ list-style:none; margin:0; padding:6px; }
.svc-item{ display:grid; grid-template-columns:1fr auto auto; gap:16px; align-items:center; padding:14px 16px; margin:6px 0; background:var(--bg2); border:1px solid rgba(207,166,64,.25); border-radius:12px; color:var(--text); transition:background .2s ease, border-color .2s ease, transform .12s ease; }
.svc-item:hover{ background:linear-gradient(180deg, rgba(207,166,64,.08), rgba(207,166,64,.02)); border-color:var(--gold); transform:translateY(-1px); }
.svc-name{ font-weight:600; letter-spacing:.02em; }
.svc-price{ color:var(--gold); font-weight:700; letter-spacing:.02em; }
.svc-select{ appearance:none; border:1px solid var(--gold); color:var(--bg); background:var(--gold); padding:8px 14px; font-weight:700; border-radius:999px; cursor:pointer; transition:filter .18s ease, transform .1s ease, background-color .2s ease; }
.svc-select:hover{ filter:brightness(1.06); }
.svc-select:active{ transform:translateY(1px); }

/*Auswählen Button */
/* Sicherstellen, dass Elementor-Hover nicht greift */
.elementor-popup-modal .svc-modal .svc-select {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}

/* Hover/Fokus/Aktiv explizit auf --accent setzen */
.elementor-popup-modal .svc-modal .svc-select:hover,
.elementor-popup-modal .svc-modal .svc-select:focus,
.elementor-popup-modal .svc-modal .svc-select:active {
  background: var(--accent) !important;   /* deine dunkelblaue Akzentfarbe */
  color: #fff !important;                  /* bessere Lesbarkeit auf dunkel */
  border-color: var(--gold) !important;    /* Rahmen bleibt gold */
  filter: none !important;                 /* eigenes Brightness-Filter aus */
  transform: translateY(0);                /* optional: kein „Einsacken“ */
}

/* Falls Elementor irgendwo sehr generisch Buttons einfärbt */
.elementor .svc-select:hover,
.elementor .svc-select:focus {
  background: var(--accent) !important;
  color: #fff !important;
}

/* Popup-Wrapper sicherheitshalber relativ setzen */
.elementor-popup-modal .dialog-widget-content{ position:relative; }

/* Popup-Rahmen an dein Theme angleichen (richtiger Kommentar!) */
.elementor-popup-modal .dialog-widget-content{
  background:var(--bg);
  border:1px solid var(--gold);
  border-radius:14px;
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  position:relative;
}

/* Close-Button */
.elementor-popup-modal .dialog-close-button{
  width:38px; height:38px;
  border:2px solid var(--gold);
  border-radius:50%;
  background: transparent;
  color:var(--gold);
  display:inline-flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, box-shadow .25s ease;
  z-index:30;
  box-shadow:none !important; outline:none !important;
}
.elementor-popup-modal .dialog-close-button i,
.elementor-popup-modal .dialog-close-button svg{
  font-size:18px; line-height:1;
  color:var(--gold); fill:var(--gold); stroke:var(--gold);
}

/* HOVER: Hintergrund = --accent, X wird schwarz */
.elementor-popup-modal .dialog-close-button:hover{
  background:var(--accent) !important;
  transform:rotate(90deg) scale(1.05);
  box-shadow:0 6px 18px rgba(207,166,64,.25);
}
.elementor-popup-modal .dialog-close-button:hover i,
.elementor-popup-modal .dialog-close-button:hover svg{
   stroke:#111 !important;
}

/* Fokus */
.elementor-popup-modal .dialog-close-button:focus-visible{
  outline:2px solid var(--gold); outline-offset:2px; box-shadow:none !important;
}

/* Mobile */
@media (max-width: 767px){
  .elementor-popup-modal .dialog-close-button{ width:34px; height:34px; border-width:2px; }
}

/* 1) Popup-Innenaufbau: Header fix, Liste scrollt */
.svc-modal{
  /* begrenze die Gesamthöhe auf die Fensterhöhe – mit etwas Abstand */
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* Header bleibt oben, kein Shrink */
.svc-modal__header{
  flex: 0 0 auto;
}

/* Die Liste bekommt das Scrollen */
.svc-list{
  flex: 1 1 auto;                 /* darf wachsen und schrumpfen */
  overflow: auto;                 /* eigener Scroll-Container */
  -webkit-overflow-scrolling: touch;  /* smoother Scroll auf iOS */
  padding: 6px 6px
           calc(24px + env(safe-area-inset-bottom, 0px)); /* extra Luft unten */
}

/* Letzter Eintrag bekommt etwas extra Abstand,
   falls Browser das padding-bottom visuell „verschluckt“ */
.svc-item:last-child{
  margin-bottom: 16px;
}

/* 2) Sicherheitsnetz auf Elementor-Ebene:
   Stelle sicher, dass die Content-Area selbst nie größer als der Viewport wird
   und bei Bedarf intern scrollt. */
.elementor-popup-modal .dialog-message{
  max-height: calc(100vh - 48px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* 3) (Optional) Den gesamten Popup-Content etwas von den Rändern abrücken,
      falls dein Template sehr nah am Rahmen sitzt */
.elementor-popup-modal .dialog-widget-content{
  box-sizing: border-box;
  padding: 0; /* du hast bereits eigene Abstände im Modal */
}

/* ==== Elementor-Wrapper neutralisieren (kein 2. Rahmen/Shadow/Innenabstand) ==== */
.elementor-popup-modal .dialog-widget-content{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* WICHTIG: den äußeren Scroll-Container abschalten,
   damit NUR deine Liste im Modal scrollt */
.elementor-popup-modal .dialog-message{
  max-height: none !important;
  overflow: visible !important;
  -webkit-overflow-scrolling: auto !important;
  padding-bottom: 0 !important;
}

/* ==== Dein Modal bleibt der einzige Rahmen + interner Scrollbereich ==== */
.svc-modal{
  background: var(--bg);
  border: 1px solid var(--gold);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-height: calc(100vh - 48px); /* nur EIN Höhenlimit */
}

.svc-modal__header{ flex: 0 0 auto; }

/* Liste: nur noch ein sehr kleines, sicheres Bottom-Padding */
.svc-list{
  flex: 1 1 auto;
  overflow: auto;
  -webkit-overflow-scrolling: touch;

  /* oben/rechts/links = 6px; unten = max(6px, safe-area) */
  padding: 6px 6px max(6px, env(safe-area-inset-bottom, 0px));
}

/* Letztes Element bündig – keine extra Margin mehr unten */
.svc-item:last-child{
  margin-bottom: 0;
}/* End custom CSS */