/* =========================================================
   Lampiro – Features (TAKEAWAY FINAL)
   Klare Hierarchie · saubere Bullets · Premium-Lesbarkeit
   + gleiche Höhe & ausgerichteter Abschluss
   + Takeaway-Boxen als sichtbarer Key Insight
   ========================================================= */

/* ---------------------------------
   Zielgruppen-Header
---------------------------------- */
.feature-icon h6 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5f6f82;
  margin: 0 0 0.4rem 0;
  text-align: center;
}

/* ---------------------------------
   Icons
---------------------------------- */
.modular-features .feature-icon i {
  opacity: 0.65;
  color: #7a8a99;
}

/* ---------------------------------
   Teaser
---------------------------------- */
.feature-teaser {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1a2633;
  margin: 0 0 0.55rem 0;
  text-align: center;
}

/* ---------------------------------
   Feature-Kachel: gleiche Höhe
---------------------------------- */
.modular-features .column {
  display: flex;
  flex-direction: column;
  transition: transform 180ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .modular-features .column:hover {
    transform: translateY(-2px);
  }
}

/* ---------------------------------
   Feature Content Wrapper
---------------------------------- */
.modular-features .feature-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;

  margin-top: 0.5rem;
  max-width: 26rem;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

/* ---------------------------------
   Benefit-Zeile (leicht stärker)
---------------------------------- */
.feature-benefit {
  font-size: 0.95rem;
  font-weight: 500;
  color: #223244;
  margin: 0 0 0.6rem 0;
}

/* ---------------------------------
   Bulletpoints (ruhiger, damit Takeaway gewinnt)
---------------------------------- */
.feature-bullets {
  list-style: disc;
  padding-left: 0.95rem;
  margin: 0 0 0.75rem 0;   /* etwas weniger Abstand zur Takeaway-Box */
}

.feature-bullets li {
  font-size: 0.9rem;
  color: #2f3f50;
  margin-bottom: 0.35rem;
  line-height: 1.45;
}

.feature-bullets li::marker {
  color: #7a8a99;
  opacity: 0.6;
}

/* ---------------------------------
   TAKEAWAY-Boxen: Ergebnis / Im Alltag / Gefühl
   - immer am unteren Rand ausgerichtet
   - alle drei Boxen gleich groß
   - sichtbar als Key Insight (Rahmen + leichter Schatten)
---------------------------------- */
.feature-result {
  margin-top: auto;                 /* Footer nach unten drücken */
  width: 100%;

  /* Card-Look (Takeaway) */
  background: #ffffff;
  border: 1px solid rgba(17, 24, 39, 0.08);
  border-radius: 0.75rem;

  /* sehr subtiler Shadow für Premium-Takeaway */
  box-shadow: 0 6px 18px rgba(17, 24, 39, 0.06);

  /* Gleich groß */
  min-height: 6.2rem;
  padding: 0.85rem 0.95rem;

  /* Typo */
  color: #2f3f50;
  text-align: left;
  line-height: 1.42;
  font-style: italic;               /* Statement-Teil */
}

/* Label als Anker (nicht kursiv) */
.feature-result strong {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: #223244;
  margin-bottom: 0.25rem;
  letter-spacing: -0.01em;
}

/* ---------------------------------
   Spacing des gesamten Feature-Blocks
---------------------------------- */
.modular-features .columns {
  margin-top: 1.5rem;
}

/* ---------------------------------
   Mobile: natürlicher Flow
---------------------------------- */
@media (max-width: 768px) {

  .modular-features .column {
    display: block;
    transition: none;
  }

  .modular-features .feature-content {
    display: block;
    max-width: 100%;
  }

  .feature-teaser {
    font-size: 1.05rem;
  }

  .feature-icon h6 {
    margin-bottom: 0.35rem;
  }

  /* Mobile: Boxen dürfen variieren */
  .feature-result {
    min-height: 0;
    margin-top: 0.8rem;
    box-shadow: 0 4px 14px rgba(17, 24, 39, 0.06);
  }
}

/* =========================================================
   Formulare: Pflichtfeld-Sterne ausblenden
   (nur visuell – Validierung bleibt erhalten)
   ========================================================= */
form label .required,
form label span.required,
form label abbr,
form label abbr[title="required"] {
  display: none !important;
}

/* Falls der Stern per :after gesetzt wird */
form label::after {
  content: none !important;
}