.elementor-kit-19{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-19 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-block-end:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@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;}}/* Start custom CSS *//* =========================================================
   PRICING CARD: Corner ribbon (Columns & Containers)
   (unchanged from your working code)
   ========================================================= */
.pricing-card,
.pricing-card > .elementor-widget-wrap,
.pricing-card > .e-con-inner{
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

/* Tunables (desktop) */
.pricing-card{
  --rb-angle: -33deg;
  --rb-top: 70px;
  --rb-left: -30px;
  --rb-thick: 26px;
  --rb-len: clamp(180px, 44%, 260px);
  --rb-fs: 13px;
  --rb-color: #ef3a35;
}

/* Top-left ribbon — supports both Elementor engines */
.conn-1 .pricing-card > :is(.elementor-widget-wrap, .e-con-inner)::after,
.conn-2 .pricing-card > :is(.elementor-widget-wrap, .e-con-inner)::after,
.conn-3 .pricing-card > :is(.elementor-widget-wrap, .e-con-inner)::after{
  content: var(--rb-label, "");
  position: absolute; top: var(--rb-top); left: var(--rb-left);
  height: var(--rb-thick); width: var(--rb-len);
  display:flex; align-items:center; justify-content:center;
  background: var(--rb-color);
  color:#fff; font-weight:800; font-size:var(--rb-fs); letter-spacing:.3px;
  transform-origin:0 0; transform: rotate(var(--rb-angle));
  box-shadow: 0 -4px 0 #fff inset, 0 4px 0 #fff inset;
  border-radius: 4px; z-index: 4; pointer-events: none;
}

/* Labels */
.conn-1 .pricing-card{ --rb-label: "1 Geräte"; }
.conn-2 .pricing-card{ --rb-label: "2 Geräte"; }
.conn-3 .pricing-card{ --rb-label: "3 Geräte"; }

/* Responsive ribbon tweaks */
@media (max-width:1024px){
  .pricing-card{ --rb-top:70px; --rb-left:-48px; --rb-thick:20px; --rb-len:clamp(230px,50%,240px); --rb-fs:12px; }
}
@media (max-width:768px){
  .pricing-card{ --rb-top:76px; --rb-left:-70px; --rb-thick:20px; --rb-len:clamp(235px,58%,230px); --rb-fs:11.5px; }
}
@media (max-width:480px){
  .pricing-card{ --rb-top:70px; --rb-left:-48px; --rb-thick:30px; --rb-len:clamp(150px,64%,210px); --rb-fs:11px; --rb-angle:-32deg; }
}


/* =========================================================
   PILL TABS (both engines: e-n-tabs + legacy)
   ========================================================= */
.conn-switch{
  /* theme variables */
  --pill-bg: rgba(255,255,255,.10);
  --pill-text: #fff;
  --pill-border: rgba(255,255,255,.22);
  --pill-hover-bg: #ed5651;
  --pill-active-bg: #ef3a35;
  --pill-active-text: #fff;
  --pill-shadow: 0 6px 18px rgba(239,58,53,.28);
  --pill-radius: 9999px;

  /* base size (you can tweak these three to grow/shrink) */
  --pill-fsize: clamp(13px, 3.3vw, 18px);
  --pill-pad-y: clamp(.40rem, 1.3vw, .55rem);
  --pill-pad-x: clamp(.70rem, 2.2vw, 1.20rem);
  --pill-minw: 162px;

  --pill-gap: .65rem;
}

/* Pill buttons — NEW engine */
.conn-switch .e-n-tab-title{
  appearance:none;
  min-width:var(--pill-minw) !important;
  padding:var(--pill-pad-y) var(--pill-pad-x) !important;
  border-radius:var(--pill-radius);
  font-weight:700; font-size:var(--pill-fsize) !important; line-height:1.2;
  display:inline-flex !important; align-items:center; justify-content:center;
  background:var(--pill-bg) !important; color:var(--pill-text) !important;
  border:1px solid var(--pill-border) !important;
  white-space:nowrap; box-sizing:border-box;
  flex:0 0 auto !important; margin:0 !important; align-self:center !important;
  cursor:pointer; transition:all .2s ease;
}
.conn-switch .e-n-tab-title:hover,
.conn-switch .e-n-tab-title:focus{
  background:var(--pill-hover-bg) !important; border-color:rgba(255,255,255,.35) !important;
}
.conn-switch .e-n-tab-title[aria-selected="true"],
.conn-switch .e-n-tab-title.e-active{
  background:var(--pill-active-bg) !important; color:var(--pill-active-text) !important;
  border-color:var(--pill-active-bg) !important; box-shadow:var(--pill-shadow);
}

/* Pill buttons — LEGACY engine */
.conn-switch.elementor-widget-tabs .elementor-tab-title,
.conn-switch.elementor-widget-tabs .elementor-tab-desktop-title{
  min-width:var(--pill-minw) !important;
  padding:var(--pill-pad-y) var(--pill-pad-x) !important;
  border-radius:var(--pill-radius);
  font-weight:700; font-size:var(--pill-fsize) !important; line-height:1.2;
  display:inline-flex !important; align-items:center; justify-content:center;
  background:var(--pill-bg) !important; color:var(--pill-text) !important;
  border:1px solid var(--pill-border) !important;
  white-space:nowrap; box-sizing:border-box;
  flex:0 0 auto !important; margin:0 !important; align-self:center !important;
  cursor:pointer; transition:all .2s ease;
}
.conn-switch.elementor-widget-tabs .elementor-tab-title:hover,
.conn-switch.elementor-widget-tabs .elementor-tab-title:focus{
  background:var(--pill-hover-bg) !important; border-color:rgba(255,255,255,.35) !important;
}
.conn-switch.elementor-widget-tabs .elementor-tab-title.elementor-active{
  background:var(--pill-active-bg) !important; color:var(--pill-active-text) !important;
  border-color:var(--pill-active-bg) !important; box-shadow:var(--pill-shadow);
}

/* Remove duplicate mobile accordion headers (both engines) */
.conn-switch :is(.elementor-tabs-content-wrapper, .e-n-tabs-content)
:is(.elementor-tab-title, .elementor-accordion, .e-n-accordion, .e-n-accordion__header){
  display:none !important; height:0 !important; margin:0 !important; padding:0 !important; overflow:hidden !important; border:0 !important;
}

/* =========================================================
   🚫 Anti-wrap: make ALL possible nav wrappers a single row
   ========================================================= */
/* Elementor new engine wrappers that sometimes wrap */
.conn-switch .e-n-tabs__nav,
.conn-switch .e-n-tabs-heading,
.conn-switch .e-n-tabs,
.conn-switch .e-n-tabs > .e-con-inner,
/* Legacy wrapper */
.conn-switch.elementor-widget-tabs .elementor-tabs-wrapper,
/* Safety for unknown theme wrappers (GP/others) */
.conn-switch [class*="tabs__nav"],
.conn-switch [class*="tabs-heading"]{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap: var(--pill-gap) !important;          /* native gap when supported */
  column-gap: var(--pill-gap) !important;   /* fallbacks */
  row-gap: 0 !important;
  width:auto !important; max-width:100% !important;
  overflow-x:auto !important;               /* if they can't fit: scroll, not wrap */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  margin:0 !important; padding:.5rem 0 1rem !important;
}
.conn-switch .e-n-tabs__nav::-webkit-scrollbar,
.conn-switch .e-n-tabs-heading::-webkit-scrollbar,
.conn-switch.elementor-widget-tabs .elementor-tabs-wrapper::-webkit-scrollbar{ display:none; }

/* Ensure direct children never expand to a new line */
.conn-switch .e-n-tabs__nav > *,
.conn-switch .e-n-tabs-heading > *,
.conn-switch.elementor-widget-tabs .elementor-tabs-wrapper > *,
.conn-switch [class*="tabs__nav"] > *{
  flex:0 0 auto !important;
  margin:0 !important;
}

/* Extra spacing fallback where gap isn't applied */
.conn-switch :is(.e-n-tab-title, .elementor-tab-title, .elementor-tab-desktop-title){ margin-right:var(--pill-gap) !important; }
.conn-switch :is(.e-n-tab-title, .elementor-tab-title, .elementor-tab-desktop-title):last-child{ margin-right:0 !important; }

/* =========================================================
   Responsive sizing so 3 pills *usually* fit without scroll
   (Scroll still available as a safety net.)
   ========================================================= */
@media (max-width: 900px){
  .conn-switch{
    --pill-minw: 150px;
    --pill-fsize: clamp(13px, 3.1vw, 17px);
    --pill-pad-x: clamp(.62rem, 2.0vw, 1.00rem);
    --pill-pad-y: clamp(.38rem, 1.1vw, .52rem);
    --pill-gap: .55rem;
  }
}
@media (max-width: 720px){
  .conn-switch{
    --pill-minw: 142px;
    --pill-fsize: clamp(12.5px, 3.0vw, 16px);
    --pill-pad-x: clamp(.54rem, 1.8vw, .90rem);
    --pill-gap: .5rem;
  }
}

/* Phone 3-up option (only if you prefer exact fit instead of scroll)
   If you want scroll at very small widths, comment this block out. */
@media (max-width: 430px){
  .conn-switch{
    --pill-gap: .45rem;
    --pill-fsize: clamp(12px, 3.4vw, 14px);
    --pill-pad-x: clamp(.50rem, 1.6vw, .75rem);
    --pill-pad-y: clamp(.34rem, 1.0vw, .46rem);
    --pill-minw: 0px; /* allow shrink to exact calc width */
  }
  .conn-switch :is(.e-n-tabs__nav, .e-n-tabs-heading, .elementor-tabs-wrapper){
    overflow-x:visible !important; /* no scroll here – exact 3-up fit */
  }
  .conn-switch :is(.e-n-tab-title, .elementor-tab-title, .elementor-tab-desktop-title){
    width: calc((100% - 2 * var(--pill-gap)) / 3) !important;
    min-width: 0 !important;
  }
}/* End custom CSS */