div.plans-container {
  width: 100%; }

ul.plans {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: nowrap;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  white-space: nowrap;
  position: relative; }
  @media screen and (max-width: 767px) {
    ul.plans {
      white-space: normal;
      display: block; } }
  ul.plans.more-5 li {
    -webkit-flex: 1 0 205px;
    -ms-flex: 1 0 205px;
    flex: 1 0 205px;
    width: 205px; }
  ul.plans.with-featured li div.frame,
  ul.plans.with-subscription li div.frame {
    margin-bottom: 0; }
  ul.plans > li {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-flex: 1 0 0;
    -ms-flex: 1 0 0;
    flex: 1 0 0;
    white-space: normal;
    position: relative;
    max-width: 33.33333%; }
    @media screen and (max-width: 767px) {
      ul.plans > li {
        width: 100% !important;
        max-width: none;
        display: block; } }
    ul.plans > li > div.frame {
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
      flex: 1 0 auto;
      padding-bottom: 0;
      border: 1px var(--alt-box-bg-color) solid;
      border-top-width: 2px;
      border-bottom-width: 2px;
      position: relative;
      margin-bottom: 80px; }
      @media screen and (max-width: 767px) {
        ul.plans > li > div.frame {
          border-width: 2px;
          display: block;
          margin-bottom: 0 !important;
          padding-bottom: 20px; } }
      ul.plans > li > div.frame:not(.disabled) {
        cursor: pointer; }
      ul.plans > li > div.frame > span.name {
        color: #2b2b2b;
        font-size: 1.571em;
        padding: 10px 0 0 0;
        height: 70px;
        display: block;
        text-align: center; }
      ul.plans > li > div.frame > span.price {
        color: #2b2b2b;
        font-size: 2.429em;
        font-weight: normal;
        padding: 0 0 32px;
        display: block;
        text-align: center; }
      ul.plans > li > div.frame > span.type {
        color: #2b2b2b;
        font-size: 1.286em;
        padding: 0 0 10px;
        font-weight: 400;
        display: block;
        text-align: center; }
      ul.plans > li > div.frame > span.description {
        position: absolute;
        bottom: -9px;
        left: 50%;
        z-index: 1;
        display: block;
        text-align: center; }
        @media screen and (min-width: 768px) {
          ul.plans > li > div.frame > span.description {
            margin-left: -9px; } }
      ul.plans > li > div.frame > span.count {
        color: #2b2b2b;
        font-size: 1.143em;
        padding: 0 0 10px;
        display: block;
        text-align: center; }
      ul.plans > li > div.frame > div.selector {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        text-align: center;
        padding: 1.875rem 0 0; }
        ul.plans > li > div.frame > div.selector > div {
          margin-top: 10px; }
    ul.plans > li:first-child > div.frame {
      border-left-width: 2px; }
    ul.plans > li:last-child > div.frame {
      border-right-width: 2px; }


/* ============================================================
   PLANS-CHART POPUP
   ============================================================ */

div.plans-chart.point1 {
  width: 100% !important;
  max-width: 980px !important;
  min-height: unset !important;
  padding: 8px 0 0 !important;
  background: transparent !important; }

div.plans-chart ul.plans {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 0 16px !important;
  flex-wrap: unset !important;
  white-space: normal !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  align-items: stretch !important; }

div.plans-chart ul.plans > li {
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important;
  width: auto !important;
  white-space: normal !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important; }

/* BELIEBTESTER Badge — oberhalb Karte 2 */
div.plans-chart ul.plans > li:nth-child(2)::before {
  content: 'BELIEBTESTER' !important;
  display: block !important;
  text-align: center !important;
  background: #4a6fa5 !important;
  color: #fff !important;
  font-size: 0.72em !important;
  font-weight: 700 !important;
  font-family: "Roboto", sans-serif !important;
  letter-spacing: 0.13em !important;
  padding: 7px 0 !important;
  border-radius: 8px 8px 0 0 !important;
  width: 100% !important; }

/* KARTE */
div.plans-chart ul.plans > li > div.frame {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  border: 2px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  background-color: #fff !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
  transition: box-shadow .3s, border-color .3s !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important; }

div.plans-chart ul.plans > li > div.frame:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,.15) !important; }

/* Professional: keine oberen Rundungen */
div.plans-chart ul.plans > li:nth-child(2) > div.frame {
  border-radius: 0 0 16px 16px !important;
  border-color: #1a4a7a !important; }

/* Enterprise: dunkler Rahmen */
div.plans-chart ul.plans > li:nth-child(3) > div.frame {
  border-color: #0d2a45 !important; }

/* PLAN-HEADER — Basic: helles Gradient */
div.plans-chart ul.plans > li > div.frame > div.plan-header {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  padding: 20px 18px 14px !important;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9) !important;
  border-bottom: 1px solid #e2e8f0 !important; }

/* Professional Header — mittelblau */
div.plans-chart ul.plans > li:nth-child(2) > div.frame > div.plan-header {
  background: #1a4a7a !important;
  background-color: #1a4a7a !important;
  border-bottom-color: rgba(255,255,255,0.15) !important; }

/* Enterprise Header — dunkelblau, Inline-Style überschreiben */
div.plans-chart ul.plans > li:nth-child(3) > div.frame > div.plan-header {
  background: #0d2a45 !important;
  background-color: #0d2a45 !important;
  border-bottom-color: rgba(255,255,255,0.15) !important; }

/* NAME */
div.plans-chart ul.plans > li > div.frame > div.plan-header > span.name {
  display: block !important;
  font-size: 1.05em !important;
  font-weight: 700 !important;
  font-family: "Roboto", sans-serif !important;
  color: #0f172a !important;
  padding: 0 !important;
  height: auto !important;
  text-align: left !important;
  white-space: normal !important;
  margin-bottom: 2px !important; }

div.plans-chart ul.plans > li:nth-child(2) > div.frame > div.plan-header > span.name,
div.plans-chart ul.plans > li:nth-child(3) > div.frame > div.plan-header > span.name {
  color: #ffffff !important; }

/* TYPE */
div.plans-chart ul.plans > li > div.frame > div.plan-header > span.type {
  display: block !important;
  font-size: 0.8em !important;
  font-weight: 400 !important;
  font-family: "Roboto", sans-serif !important;
  color: #64748b !important;
  padding: 0 !important;
  text-align: left !important;
  white-space: normal !important;
  margin-bottom: 8px !important; }

div.plans-chart ul.plans > li:nth-child(2) > div.frame > div.plan-header > span.type,
div.plans-chart ul.plans > li:nth-child(3) > div.frame > div.plan-header > span.type {
  color: rgba(255, 255, 255, 0.75) !important; }

/* PREIS */
div.plans-chart ul.plans > li > div.frame > div.plan-header > span.price {
  display: block !important;
  font-size: 1.95em !important;
  font-weight: 800 !important;
  font-family: "Roboto", sans-serif !important;
  color: #0f172a !important;
  padding: 0 !important;
  text-align: left !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  height: auto !important; }

div.plans-chart ul.plans > li:nth-child(2) > div.frame > div.plan-header > span.price,
div.plans-chart ul.plans > li:nth-child(3) > div.frame > div.plan-header > span.price {
  color: #ffffff !important; }

div.plans-chart ul.plans > li > div.frame > div.plan-header > span.price small {
  font-size: .85rem !important;
  font-weight: 400 !important;
  color: #64748b !important;
  vertical-align: middle !important; }

div.plans-chart ul.plans > li:nth-child(2) > div.frame > div.plan-header > span.price small,
div.plans-chart ul.plans > li:nth-child(3) > div.frame > div.plan-header > span.price small {
  color: rgba(255, 255, 255, 0.7) !important; }

/* count ausblenden */
div.plans-chart ul.plans > li > div.frame > div.plan-header > span.count {
  display: none !important; }

/* FEATURES BEREICH */
div.plans-chart ul.plans > li > div.frame > div.plan-features {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  padding: 14px 18px 16px !important;
  background: #fff !important;
  background-color: #fff !important; }

div.plans-chart ul.plans > li > div.frame.colored > div.plan-features {
  background: transparent !important; }

/* DESCRIPTION — flex:1 damit Button immer unten bleibt */
div.plans-chart ul.plans > li > div.frame > div.plan-features > span.description {
  flex: 1 !important;
  position: static !important;
  display: block !important;
  bottom: auto !important;
  left: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important; }

/* Features als UL/LI mit runden Check-Icons */
div.plans-chart ul.plans > li > div.frame > div.plan-features > span.description ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important; }

div.plans-chart ul.plans > li > div.frame > div.plan-features > span.description li {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 0 !important;
  font-size: 0.813em !important;
  font-family: "Roboto", sans-serif !important;
  color: #374151 !important;
  border-bottom: 1px solid #f1f5f9 !important;
  line-height: 1.4 !important; }

div.plans-chart ul.plans > li > div.frame > div.plan-features > span.description li:last-child {
  border-bottom: none !important; }

/* Rundes Check-Icon vor jeder Feature-Zeile */
div.plans-chart ul.plans > li > div.frame > div.plan-features > span.description li::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  border-radius: 50% !important;
  background: #1e3a5f url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/11px no-repeat !important;
  display: inline-block !important;
  flex-shrink: 0 !important; }

/* SELECTOR WRAP */
div.plans-chart ul.plans > li > div.frame > div.plan-features > div.plan-selector-wrap {
  padding-top: 14px !important;
  border-top: 1px solid rgba(241,245,249,0.4) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: auto !important;
  width: 100% !important; }

/* PLAN WÄHLEN BUTTON — div.plan-btn-label (neues Template) */
div.plans-chart ul.plans > li > div.frame > div.plan-features > div.plan-selector-wrap > div.plan-btn-label,
div.plans-chart ul.plans > li > div.frame > div.plan-features > div.plan-selector-wrap > label.plan-btn-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #fff !important;
  background-color: #fff !important;
  color: #0d2a45 !important;
  border: 2px solid #0d2a45 !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font-size: 0.875em !important;
  font-weight: 700 !important;
  font-family: "Roboto", sans-serif !important;
  letter-spacing: 0.02em !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  transition: background .15s ease, color .15s ease !important;
  margin: 0 !important;
  min-height: unset !important;
  height: auto !important;
  line-height: normal !important; }

div.plans-chart ul.plans > li > div.frame > div.plan-features > div.plan-selector-wrap > div.plan-btn-label:hover,
div.plans-chart ul.plans > li > div.frame > div.plan-features > div.plan-selector-wrap > label.plan-btn-label:hover {
  background: #0d2a45 !important;
  background-color: #0d2a45 !important;
  color: #fff !important; }

/* Inputs verstecken */
div.plans-chart ul.plans div.plan-selector-wrap input[type=radio],
div.plans-chart ul.plans div.plan-selector-wrap input[type=checkbox] {
  display: none !important;
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important; }

/* Flynax span-Styles neutralisieren */

div.plans-chart ul.plans > li:not(.plan-selected) div.plan-selector-wrap > div.plan-btn-label,
div.plans-chart ul.plans > li:not(.plan-selected) div.plan-selector-wrap > label.plan-btn-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: #fff !important;
  color: #0d2a45 !important;
  border: 2px solid #0d2a45 !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font-size: 0.875em !important;
  font-weight: 700 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

div.plans-chart ul.plans div.plan-selector-wrap > div.plan-btn-label:hover,
div.plans-chart ul.plans div.plan-selector-wrap > label.plan-btn-label:hover {
  background: #0d2a45 !important;
  color: #fff !important; }

/* AUSGEWÄHLTER PLAN via plan-selected Klasse */
div.plans-chart ul.plans > li.plan-selected > div.frame {
  border-color: #0d2a45 !important;
  box-shadow: 0 0 0 4px rgba(13,42,69,0.2), 0 20px 50px rgba(13,42,69,0.15) !important; }

div.plans-chart ul.plans > li.plan-selected > div.frame > div.plan-features > div.plan-selector-wrap > div.plan-btn-label,
div.plans-chart ul.plans > li.plan-selected > div.frame > div.plan-features > div.plan-selector-wrap > label.plan-btn-label {
  background: #0d2a45 !important;
  color: #fff !important; }

/* Fallback: :has() für Browser die es unterstützen */
div.plans-chart ul.plans > li:has(input[type=radio]:checked) > div.frame {
  border-color: #0d2a45 !important;
  box-shadow: 0 0 0 4px rgba(13,42,69,0.2) !important; }

div.plans-chart ul.plans > li:has(input[type=radio]:checked) > div.frame > div.plan-features > div.plan-selector-wrap > div.plan-btn-label,
div.plans-chart ul.plans > li:has(input[type=radio]:checked) > div.frame > div.plan-features > div.plan-selector-wrap > label.plan-btn-label {
  background: #0d2a45 !important;
  color: #fff !important; }

/* MOBILE */
@media screen and (max-width: 767px) {
  div.plans-chart ul.plans {
    grid-template-columns: 1fr !important;
    gap: 12px 0 !important; }
  div.plans-chart.point1 {
    max-width: 100% !important; }
  div.plans-chart ul.plans > li > div.frame > div.plan-header {
    padding: 14px 16px !important; }
  div.plans-chart ul.plans > li > div.frame > div.plan-features {
    padding: 12px 16px 16px !important; } }

/* Popup-Fenster breiter machen */
div.popup div.plans-chart.point1,
div.plans-chart.point1 {
  min-width: 0 !important;
  width: 90vw !important;
  max-width: 860px !important; }

@media (max-width: 700px) {
  div.popup div.plans-chart.point1,
  div.plans-chart.point1 {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}
div.plans-chart ul.plans > li.plan-selected > div.frame.colored > div.plan-features > div.plan-selector-wrap > div.plan-btn-label,
div.plans-chart ul.plans > li.plan-selected > div.frame.colored > div.plan-features > div.plan-selector-wrap > label.plan-btn-label {
    background: #0d2a45 !important;
    color: #fff !important;
}

div.plans-chart ul.plans > li.plan-selected > div.frame.colored > div.plan-features > div.plan-selector-wrap > div.plan-btn-label,
div.plans-chart ul.plans > li.plan-selected > div.frame.colored > div.plan-features > div.plan-selector-wrap > label.plan-btn-label {
  background: #0d2a45 !important;
  color: #fff !important;
  border-color: #0d2a45 !important;
}

div.plans-chart ul.plans > li.plan-selected div.plan-selector-wrap > div.plan-btn-label,
div.plans-chart ul.plans > li.plan-selected div.plan-selector-wrap > label.plan-btn-label {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #0d2a45 !important;
  color: #fff !important;
  border: 2px solid #0d2a45 !important;
  border-radius: 8px !important;
  padding: 11px 16px !important;
  font-size: 0.875em !important;
  font-weight: 700 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  cursor: pointer !important;
}

/* ===== MOBILE POPUP FIX ===== */
@media (max-width: 768px) {

    div.popup div.plans-chart.point1,
    div.plans-chart.point1 {
        height: auto !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    div.plans-chart ul.plans {
        overflow: visible !important;
        max-height: none !important;
    }

    div.plans-chart ul.plans > li {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: block !important;
    }

    div.plans-chart ul.plans > li > div.frame {
        height: auto !important;
    }

    div.plans-chart ul.plans > li > div.frame > div.plan-features {
        height: auto !important;
    }

    body.popup-open,
    body.modal-open {
        overflow: auto !important;
    }
}
/* ===== END MOBILE FIX ===== */