/* dezent: nutzt dein Basis- & webhosting.css; nur Ergänzungen */
.pricing-hero .container { max-width: 1000px; }
.features-grid { grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); }

/* gleiche Häkchen-Optik wie vereinbart (dezent/elegant) */
.feature-check { color: #0ea5e9; font-weight: 700; }
.feature-cross { color: var(--gray-500); }

/* Tooltip immer obenauf – falls erste Tabellenzeile überlappt */
.info-icon {
  position: relative;
  z-index: 3;            /* <- hebt Tooltip vor Thead/erste Reihe */
}
.pricing-table table { position: relative; z-index: 1; }
.pricing-table thead { position: relative; z-index: 2; }

/* Button unten in Tabellenzellen nicht sprengen lassen */
.cta-buttons .cta-button {
  display: inline-block;
  white-space: nowrap;
  max-width: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* Kleinere Zellen auf S-Viewports */
@media (max-width: 720px){
  .plan-header, .feature-header { font-size: .95rem; }
  .pricing-table table td, .pricing-table table th { padding: .6rem .5rem; }
}