/* @import url('http://example.com/example_style.css'); */

/*****************************************/

/****************************************/
/*Custom CSS for Arrow Button on Hero */
/****************************************/
    
/* Standardzustand des Buttons */
a.dnd_area-dnd_partial-1-module-1__secondary_cta {
    color: #ffffff;               /* Textfarbe */
    text-decoration: none;         /* Unterstreichung entfernen */
    transition: background-color 0.3s, color 0.3s; /* sanfter Übergang beim Hover */
}

/* Hover-Zustand */
a.dnd_area-dnd_partial-1-module-1__secondary_cta:hover {
    color: #ffffff;               /* Textfarbe beim Hover */
}

a.dnd_area-dnd_partial-1-module-1__secondary_cta.button--arrow::after {
    filter: brightness(0) invert(1); /* macht alles weiß */
}

/****************************************/
/*Custom CSS for Badge on Pricing Tables*/
/****************************************/
.kl-pricing__badge {
  color: #ffffff;
  background-color: #ED982A;
}

/****************************************/
/*Custom CSS for Pricing Tables*/
/****************************************/
.kl-pricing {
    display: flex;                    /* Karten nebeneinander */
    justify-content: center;          /* zentrieren */
    gap: 20px;                        /* Abstand zwischen Karten */
    flex-wrap: wrap;                  /* Karten umbrechen, falls Platz fehlt */
}

/* ================================
   Einzelne Pricing Card
   ================================ */
.kl-pricing__card {
    flex: 0 0 300px;                  /* feste Breite pro Karte */
    max-width: 440px;                 /* verhindert zu große Breite */
    min-width: 280px;                 /* verhindert zu kleine Breite */
    box-sizing: border-box;
    margin-bottom: 20px;              /* Abstand nach unten */
    padding: 20px;                    /* Innenabstand */
    display: flex;
    flex-direction: column;           /* Inhalt vertikal */
    align-items: center;
}

/* Featured Card hervorheben */
.kl-pricing__card--featured {
    border: 1px solid #ED982A;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Titel, Preis & Beschreibung */
.kl-pricing__card h4 {
    margin-top: 5px;
    margin-bottom: 5px;
    text-align: center;
}

.kl-pricing__price h2 {
    text-align: center;
    margin: 0;
}

.kl-pricing__description p {
    text-align: center;
}

/* Features Liste */
.kl-pricing__features {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.kl-pricing__features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;                  /* Abstand zwischen Icon und Text */
    margin-bottom: 10px;
}

/* Button */
.kl-pricing__button .button {
    display: inline-block;
    text-align: center;
    padding: 10px 20px;
    border-radius: 6px;
}
/* ================================
   SVG Icons - Mobile Skalierung
   ================================ */

/* Desktop - normale Größe */
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.icon-wrapper svg {
  width: 100%;
  height: auto;
  max-width: 80px;
  max-height: 80px;
}


.pricing-comparison {
  top: 80px !important; /* Passe die 80px an deinen Header an */}

/* Tablet */
@media (max-width: 991px) {
  .icon-wrapper svg {
    max-width: 60px;
    max-height: 60px;
  }
}

/* ================================
   Mobile Fix: Karten bleiben fixed size
   ================================ */
@media (max-width: 767px) {
  .kl-pricing__card {
    flex: 0 0 280px;           /* feste Breite für Tablet */
    max-width: 280px;
  }
  .hs-logo-grid {
    gap: 10px !important;
  }
  
  .hs-logo-grid__logo-wrapper {
    flex: 0 1 calc(25% - 5px) !important;
    max-width: calc(25% - 5px) !important;
    display: flex !important;
    justify-content: center !important;
  }
  
  .hs-logo-grid__logo {
    max-width: 70px !important;
    max-height: 50px !important;
  }
  /* Die Row mit den Icons als Flex-Container */
  .cell_1767799854540-row-1-padding {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  
   /* Jede Spalte (span3) wird kleiner - 4 pro Reihe */
  .cell_1767799854540-row-1-padding > .dnd-column {
    flex: 0 1 calc(25% - 10px) !important;
    max-width: calc(25% - 10px) !important;
  }
  
  .icon-wrapper svg {
    max-width: 45px !important;
    max-height: 45px !important;
  }
  
      .pricing-comparison.details-row {
        display: none !important; /* Oder 'flex'/'grid', je nachdem was vorher aktiv war */
    }

  }



@media (max-width: 480px) {
  .kl-pricing__card {
    flex: 0 0 260px;           /* feste Breite für Mobile */
    max-width: 260px;
  }
.hs-logo-grid {
    gap: 6px !important;
  }
  
  .hs-logo-grid__logo-wrapper {
    flex: 0 1 calc(25% - 4px) !important;
    max-width: calc(25% - 4px) !important;
  }
  
  .hs-logo-grid__logo {
    max-width: 60px !important;
    max-height: 40px !important;
  }
   .cell_1767799854540-row-1-padding {
    gap: 8px !important;
  }
  
  .cell_1767799854540-row-1-padding > .dnd-column {
    flex: 0 1 calc(25% - 8px) !important;
    max-width: calc(25% - 8px) !important;
  }
  
  .icon-wrapper svg {
    max-width: 35px !important;
    max-height: 35px !important;
  }
  
    .pricing-comparison.details-row {
        display: none !important; /* Oder 'flex'/'grid', je nachdem was vorher aktiv war */
    }

}


/****************************************/
/* Navbar Logo Fix and Button Fix        */
/****************************************/


.kl-navbar {
    width: 100% !important;
    max-width: 100vw !important;
    left: 0 !important;
    right: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    overflow: hidden; /* Verhindert, dass interner Inhalt sie aufdrückt */
    flex-wrap: nowrap !important;
}

/* 3. Sicherstellen, dass der Hamburger sichtbar bleibt */
.kl-navbar__mobile {
    margin-left: auto !important; /* Schiebt ihn nach rechts, aber innerhalb des Containers */
    z-index: 9999;
}

.kl-navbar, 
.Navbar_with_Menu { 
    display: flex !important;
    justify-content: space-between !important; /* Logo links, Button rechts */
    align-items: center !important;
    padding-left: 5% !important;  /* Flexibler Abstand links */
    padding-right: 5% !important; /* Flexibler Abstand rechts */
    box-sizing: border-box !important; /* Wichtig: Padding wird in die 100% Breite eingerechnet */
    width: 100% !important;
}


}

/* Verhindert jeglichen Textumbruch für beide Buttons */
.kl-navbar__end a.Navbar_with_Menu__button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* Die magischen Zeilen gegen Umbrüche */
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    min-width: max-content !important;
}

/* Sicherheitshalber auch für das span im Inneren */
.kl-navbar__end a.Navbar_with_Menu__button span {
    white-space: nowrap !important;
    display: inline-block !important;
}

/* Falls die Buttons nebeneinander stehen, gib ihnen etwas Abstand */
.kl-navbar__end {
    display: flex !important;
    flex-wrap: nowrap !important; /* Verhindert, dass die Buttons untereinander rutschen */
    align-items: center !important;
    gap: 15px; /* Abstand zwischen den beiden Buttons */
}

@media (max-width: 1172px) {
  a[href="https://augmedi.app/subscribe"].Navbar_with_Menu__button {
    display: none !important;
  }
}