/* Funktionen-Seite — nur die Bausteine, die es auf der Startseite nicht gibt.
   Alles andere (Header, Hero, Proof-Band, Kapitel, Presse, FAQ, Footer,
   Buttons, Typografie) kommt aus landing-redesign.css. Diese Datei bringt
   bewusst KEINE eigenen Farb- oder Abstandstokens mit: die Startseite ist die
   einzige Token-Quelle. Wer hier eine Farbe braucht, nimmt --fm-*.
   Hintergrund: cluster.css hatte 2026-07 eigene Token-Namen und driftete
   dadurch unbemerkt in eine zweite Marke ab. */

/* ---------- „Die unsichtbare Liste" ----------
   Die Zeilen-Vorlage der Startseite hat drei Spalten: Uhrzeit, Aufgabe,
   Person (`5.75rem minmax(0,1fr) auto`). Hier gibt es keine Uhrzeit — ohne
   Anpassung landet der Text in der schmalen Zeitspalte und bricht vierzeilig
   um, während die Kategorie den ganzen Rest als Balken einnimmt. Zwei Spalten:
   der Text bekommt den Platz, die Kategorie nur ihre eigene Breite. */
.problem .agenda-row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 4.25rem;
}

.problem .agenda-task {
  max-width: 46ch;
}

/* ---------- Hero-Ergänzung: App-Store-Badge ---------- */

.store-badge {
  display: inline-block;
  margin-top: 1.5rem;
}

.store-badge img {
  display: block;
  width: 9rem;
  height: auto;
}

/* Die Startseite setzt ihre Abschnittsüberschriften auf max-width: 10ch —
   dort sind es kurze Zeilen wie „Ein Ort statt acht kleiner Lösungen".
   Die Überschriften hier sind länger und brechen bei 10ch in fünf Zeilen,
   während rechts daneben Platz frei bleibt. */
.areas .feature-head h2,
.capabilities .feature-head h2,
.steps .feature-head h2 {
  max-width: 16ch;
}

/* ---------- Acht Bereiche ---------- */

.areas {
  padding-block: clamp(4.875rem, 10vw, 8.625rem);
  border-bottom: 0.0625rem solid var(--fm-line);
  background: var(--fm-paper);
}

.area-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2.5rem 2rem;
}

.area {
  display: flex;
  flex-direction: column;
}

/* Der Screenshot ist der Beweis, nicht die Dekoration: volle Spaltenbreite,
   oben beschnitten wie die Geräte auf der Startseite. */
.area-shot {
  overflow: hidden;
  height: 15.5rem;
  margin-bottom: 1.25rem;
  border: 0.0625rem solid var(--fm-line-strong);
  border-radius: 0.875rem;
  background: var(--fm-sage-soft);
}

.area-shot img {
  display: block;
  width: 100%;
}

.area > .caps {
  color: var(--fm-sage-deep);
}

.area h3 {
  margin-top: 0.4375rem;
  font-size: 1.25rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.area p {
  margin-top: 0.625rem;
  color: var(--fm-ink-soft);
  font-size: 0.9375rem;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-top: auto;
  padding-top: 1rem;
  list-style: none;
}

.tags li {
  padding: 0.3125rem 0.5625rem;
  border-radius: 0.375rem;
  background: var(--fm-sage-soft);
  color: #273322;
  font-size: 0.75rem;
  font-weight: 650;
}

/* ---------- Funktionsüberblick ---------- */

.capabilities {
  padding-block: clamp(4.875rem, 10vw, 8.625rem);
  border-bottom: 0.0625rem solid var(--fm-line);
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
  border-top: 0.0625rem solid var(--fm-ink);
  padding-top: 2rem;
}

.cap-col h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.cap-col ul {
  padding-left: 0;
  list-style: none;
}

.cap-col li {
  padding-block: 0.5625rem;
  border-bottom: 0.0625rem solid var(--fm-line);
  color: var(--fm-ink-soft);
  font-size: 0.9375rem;
}

.tag-premium,
.tag-e2e {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  vertical-align: 0.0625rem;
}

.tag-premium {
  background: var(--fm-burgundy-soft);
  color: var(--fm-burgundy);
}

.tag-e2e {
  background: var(--fm-sage-soft);
  color: #273322;
}

.cap-note {
  max-width: 62ch;
  margin-top: 2rem;
  color: var(--fm-ink-soft);
  font-size: 0.9375rem;
}

/* ---------- Drei Schritte ---------- */

.steps {
  padding-block: clamp(4.875rem, 10vw, 8.625rem);
  border-bottom: 0.0625rem solid var(--fm-line);
  background: var(--fm-paper);
}

.step-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  padding-left: 0;
  counter-reset: step;
  list-style: none;
}

.step-list li {
  counter-increment: step;
  padding-top: 1.375rem;
  border-top: 0.125rem solid var(--fm-ink);
}

.step-list li::before {
  content: counter(step);
  display: block;
  margin-bottom: 0.625rem;
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: 2.25rem;
  font-weight: 750;
  line-height: 1;
  color: var(--fm-sage-deep);
  font-variant-numeric: tabular-nums;
}

.step-list h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.step-list p {
  margin-top: 0.5rem;
  color: var(--fm-ink-soft);
  font-size: 0.9375rem;
}

/* ---------- Preise: drei Stufen ---------- */

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.tier {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.875rem;
  border: 0.0625rem solid var(--fm-line-strong);
  border-radius: 1rem;
  background: var(--fm-paper);
}

.tier-lead-offer {
  border-color: var(--fm-burgundy);
  border-width: 0.125rem;
}

.tier > .caps {
  color: var(--fm-ink-soft);
}

.tier-price {
  margin-top: 0.75rem;
  font-family: "Gabarito", system-ui, sans-serif;
  font-size: clamp(2.25rem, 3.4vw, 3rem);
  font-weight: 750;
  line-height: 1;
  letter-spacing: -0.04em;
}

.tier-meta {
  margin-top: 0.5rem;
  color: var(--fm-ink-soft);
  font-size: 0.8125rem;
}

.tier-lead {
  margin-top: 1.25rem;
  font-weight: 650;
}

.tier .plain-list {
  margin-top: 1rem;
  margin-bottom: 1.75rem;
}

.tier .button {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
}

.tier-foot {
  margin-top: 1rem;
  color: var(--fm-ink-soft);
  font-size: 0.75rem;
}

.button-quiet {
  border: 0.0625rem solid var(--fm-ink);
  background: transparent;
  color: var(--fm-ink);
}

.button-quiet:hover,
.button-quiet:focus-visible {
  background: var(--fm-ink);
  color: var(--fm-paper);
}

/* ---------- Breakpoints ---------- */

@media (max-width: 62rem) {
  .area-grid,
  .cap-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .step-list,
  .tier-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 38.75rem) {
  .area-grid,
  .cap-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .area-shot {
    height: 17rem;
  }

  .tier {
    padding: 1.375rem;
  }

  /* Auch auf Mobil zwei Spalten. Die geteilte Regel stapelt die Kategorie
     unter den Text (`grid-column: 2` in einer 4rem-Spalte) — das passt zur
     Startseite mit Uhrzeit, hier nicht. */
  .problem .agenda-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.75rem;
  }

  .problem .agenda-who {
    grid-column: auto;
    justify-self: end;
  }
}