/* ============================================================
   Uebernahme aus homepage-entwurf-lumora.html in die Live-Seite
   Nur die freigegebenen Teile:
   1. Reveal-/Stagger-Motion (wird auf die bestehende
      Leistungs-Sektion und die neuen Sektionen angewendet)
   2. Sektion "Zwei Projekte, die meine Arbeitsweise zeigen"
   3. Sektion "So gehe ich dein Problem Schritt fuer Schritt an"

   Farben ausschliesslich aus dem bestehenden Live-Set
   (--navy, --navy-deep, --surface-panel, --mint, --shadow-hover ...).
   Schrift: --font (Geist), wie auf der uebrigen Seite.
   ============================================================ */

/* -------------------- 1 · Motion aus dem Entwurf -------------------- */
/* Die Einblendungen (.u-reveal / .u-stagger) liegen seit 2026-08-11
   in motion.css, damit sie auf allen Seiten gelten. */

/* Hover-Spring fuer die bestehenden Leistungskarten.
   Die Preiskarten bekommen dieselbe Bewegung (Vorgabe 2026-08-11);
   die hervorgehobene Karte steht bereits 8px hoeher und hebt von dort. */
@media (hover: hover) {
  .service-showcase .service-card,
  .pricing-grid .price-card {
    transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s cubic-bezier(.2, .8, .2, 1);
  }
  .service-showcase .service-card:hover,
  .pricing-grid .price-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-hover);
  }
  /* Die hervorgehobene Karte steht bereits 8px hoeher und hebt von dort */
  .pricing-grid .price-card.featured:hover { transform: translateY(-14px) }
}

/* -------------------- 1b · Footer --------------------
   Der Footer liegt seit 2026-08-11 vollstaendig in footer.css,
   damit er auf jeder Seite identisch ist. Hier steht bewusst
   nichts mehr dazu.                                                       */

/* -------------------- 2 · Sektion "Zwei Projekte" -------------------- */
.projects-section .section-heading { margin-bottom: 44px }

.projects-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
}
@media (min-width: 861px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr) }
}

.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
  border-radius: 24px;
  background: var(--navy);
  color: var(--ink-on-deep);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  text-decoration: none;
  transition: transform .38s cubic-bezier(.2, .8, .2, 1), box-shadow .38s cubic-bezier(.2, .8, .2, 1);
}
.project-card.is-alt { background: var(--surface-panel) }
@media (hover: hover) {
  .project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 26px 58px rgba(11, 37, 69, .28);
  }
}

.project-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--navy-deep);
}
/* <picture> ist von Haus aus inline — ohne display:block bekommt das Bild
   keine Bezugshoehe und height:100% bliebe wirkungslos. */
.project-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.project-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
/* Roether: links buendig ausrichten — beschneidet rechts, Text bleibt lesbar */
.project-media.crop-left img { object-position: left top }
.project-media.crop-top img { object-position: center top }
@media (hover: hover) {
  .project-card:hover .project-media img { transform: scale(1.04) }
}

.project-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 16px;
  padding: 30px;
}
@media (max-width: 560px) {
  .project-body { padding: 24px }
}
.project-body h3 {
  margin: 0;
  color: var(--white);
  font-size: 1.35rem;
  letter-spacing: -.015em;
}
.project-kicker {
  margin: 6px 0 0;
  color: var(--ink-muted-on-deep);
  font-size: .84rem;
}
.project-body > p {
  margin: 0;
  color: var(--ink-lead-on-deep);
  font-size: .94rem;
  line-height: 1.7;
}
.project-signals {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.project-signals li {
  display: flex;
  gap: 11px;
  color: var(--ink-muted-on-deep);
  font-size: .88rem;
  line-height: 1.55;
}
.project-signals li::before {
  content: '';
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: 8px;
  border-radius: 50%;
  /* Mint nur auf dunklem Grund — Regel aus dem Style Guide */
  background: var(--mint);
}
.project-foot {
  display: flex;
  margin-top: auto;
  padding-top: 8px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.project-foot span {
  color: var(--white);
  font-size: .9rem;
  font-weight: 600;
}
.project-badge {
  display: grid;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  color: var(--white);
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), background .3s ease;
}
.project-badge svg { width: 16px; height: 16px }
/* Der Pfeil wird beim Hover NICHT mehr um 45 Grad gedreht. Die Drehung
   hat den Diagonalpfeil optisch in einen Rechtspfeil verwandelt, dadurch
   sahen die beiden Karten unterschiedlich aus (Vorgabe 2026-08-11).
   Stattdessen schiebt sich der Pfeil in seine eigene Richtung. */
@media (hover: hover) {
  .project-card:hover .project-badge {
    background: rgba(255, 255, 255, .16);
    transform: translate(2px, -2px) scale(1.06);
  }
}
.projects-note { margin: 26px 0 0 }

/* -------------------- 3 · Sektion "So gehe ich vor" -------------------- */
.approach-card {
  padding: 56px 52px;
  border-radius: 28px;
  background: var(--navy);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
  color: var(--ink-on-deep);
}
@media (max-width: 860px) {
  .approach-card { padding: 40px 28px }
}
@media (max-width: 560px) {
  .approach-card { padding: 32px 22px; border-radius: 22px }
}

.approach-head { max-width: 42ch; margin-bottom: 48px }
.approach-head h2 {
  margin: 0;
  color: var(--white);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -.02em;
  line-height: 1.12;
}
.approach-head p {
  margin: 16px 0 0;
  color: var(--ink-lead-on-deep);
  font-size: .98rem;
  line-height: 1.7;
}

.approach-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 641px)  { .approach-steps { grid-template-columns: repeat(2, 1fr); gap: 38px 34px } }
@media (min-width: 1041px) { .approach-steps { grid-template-columns: repeat(4, 1fr) } }

.approach-step { padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .2) }
.approach-step .step-num {
  display: block;
  color: var(--mint);
  font-size: .74rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.approach-step h3 {
  margin: 14px 0 10px;
  color: var(--white);
  font-size: 1.2rem;
  letter-spacing: -.015em;
}
.approach-step p {
  margin: 0;
  color: var(--ink-muted-on-deep);
  font-size: .9rem;
  line-height: 1.68;
}

.approach-foot {
  display: flex;
  margin-top: 48px;
  padding-top: 30px;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 26px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.approach-foot p {
  max-width: 46ch;
  margin: 0;
  color: var(--ink-muted-on-deep);
  font-size: .88rem;
  line-height: 1.6;
}