/* Startseite — Figma „🏠 Home V3" (Node 2612:4292). Klassen-Präfix home-. */

/* Hero Section: Fotos + Grunge, unten per SVG-Maske („Element") wellig beschnitten */
.home-hero {
  position: relative;
  min-height: clamp(640px, 67vw, 964px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--f-n100);
  isolation: isolate;
  padding: 160px var(--f-gutter) clamp(120px, 14vw, 190px);
  box-sizing: border-box;
}
/* Hintergrund = Figma-Frame „Background" (Fotos, Grunge) als ein Render. Der Export ist 34px
   höher als die Section; dort liegt die transparente Wellenkante, die im JPG/WebP schwarz wird –
   deshalb oben ausrichten und unten abschneiden. */
.home-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
.home-hero__bg img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* Aufbau wie Figma „Background“ (2612:4310): unten das Foto (Graustufen, Kontrast +39),
   darüber die Grunge-Textur (Krümel, gespiegelt, 1548 × 1222 bei x −16 / y −224) mit 60 % Deckkraft.
   Die Textur ist eine feste Maske des Designs; getauscht wird nur das Foto. */
.home-hero__bg .home-hero__foto { filter: grayscale(1) contrast(1.39); object-position: center; }
.home-hero__bg .home-hero__textur { opacity: 0.6; }
/* Ab Desktop: Hero füllt genau die sichtbare Fensterhöhe (der Header liegt darüber, zählt also mit).
   vw-echt: echte Fenstermaße, nicht mit der Skalierungsstufe multipliziert (docs/skalierung.md).
   Obergrenze 75 % der Fensterbreite (4:3): verhindert auf hochkant/sehr hohen Fenstern eine
   überlange Fläche mit verlorenem Inhalt; bei allen üblichen Formaten (16:9, 16:10, MacBooks)
   greift sie nicht. Untergrenze ist der Inhalt selbst (min-height), abgeschnitten wird nichts.
   Inhalt mittig mit gleicher Luft oben und unten: bei Figma-Höhe 964 steht er wie in Figma bei
   y ≈ 226. Das Padding ist nur die Mindestluft (Header 106 + 22); so passt der Hero auch bei
   1920 × 1080 (Zoom 1,3333 → nur 810 CSS-px hoch) ohne Überstand in die Fensterhöhe. */
@media (min-width: 1101px) {
  .home-hero {
    min-height: 100vh; /* vw-echt */
    min-height: min(100svh, 75vw); /* vw-echt */
    padding-block: 128px;
  }
  /* Das Hintergrund-Render ist 998 statt 964 hoch; unten liegt eine schwarze Kante. Die Bildfläche
     um dieses Verhältnis höher machen und am Hero abschneiden, damit die Kante bei jedem
     Seitenverhältnis außerhalb liegt – bei 1440 × 964 exakt wie bisher. */
  .home-hero { overflow: clip; }
  .home-hero__bg { bottom: calc(-100% * 34 / 964); }
}
.home-hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 48px;
  text-align: center;
  max-width: 990px;
}
/* Helle Abschnitte liegen in Figma auf Neutral 200 (#F7F7F7) */
.home-believe,
.home-ministries,
.home-blog,
.home-divider { background: var(--f-n200); }

/* Believe Section */
.home-believe { padding-block: var(--f-section-y); }
.home-believe__title { margin-bottom: clamp(40px, 2.8vw, 40px); }
.home-believe__grid {
  display: grid;
  grid-template-columns: 669fr 559fr;
  gap: 40px;
  align-items: center;
}
.home-believe__col { display: flex; flex-direction: column; gap: 32px; }
.home-believe__col--right { gap: 58px; }
.home-believe__col .f-media--wide { aspect-ratio: 669 / 528; }
.home-believe__col .f-media--tall { aspect-ratio: 559 / 850.5; }
.home-believe__intro { display: flex; flex-direction: column; gap: 48px; align-items: flex-start; max-width: 541px; }
.home-believe__intro .f-p { line-height: normal; }

/* Pastors Section */
.home-pastors { position: relative; padding: var(--f-section-y) 0; overflow: hidden; }
/* Aufbau wie Über uns (.about-pastors): Text, darunter ein Bild mittig über die Containerbreite
   (1268 × 663, Radius der Karten), darunter der Button. Abstände Absatz → Bild 47,7 und Bild → Button
   32 wie dort; Hintergrund, Schriftfarben und Innenabstände bleiben die der Startseite. */
.home-pastors__stage {
  padding-block: 46px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.home-pastors__content {
  max-width: 945px; /* wie .about-pastors__top: Titel zwei-, Absatz zweizeilig */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
  margin-bottom: 15.7px; /* wie .about-pastors__top: 32 + 15,7 bis zum Bild */
}
.home-pastors__content .f-title { margin-bottom: -11px; }
.home-pastors__content .f-p { color: var(--f-n-e8); }
.home-pastors__img {
  width: 100%;
  aspect-ratio: 1268 / 663;
}

/* Ministries Section */
.home-ministries { padding-block: clamp(96px, 19.4vw, 280px); }
.home-ministries__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  margin-bottom: 69px;
}
.home-ministries__arrows { display: flex; gap: 26px; }
.home-ministries__grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 28px) / 2);
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  margin-bottom: 48px;
}
.home-ministries__grid::-webkit-scrollbar { display: none; }
.home-ministries__grid > * { scroll-snap-align: start; }

/* Blog Section */
.home-blog { padding: 200px 0 260px; }
.home-blog__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  margin: 40px 0 clamp(48px, 5vw, 40px);
}
.home-blog__more { display: flex; justify-content: center; }

@media (max-width: 860px) {
  .home-believe__grid,
  .home-blog__grid { grid-template-columns: 1fr; }
  .home-ministries__top { flex-direction: column; align-items: flex-start; }
  .home-ministries__grid { grid-auto-columns: 88%; }
  .home-blog { padding: 96px 0; }
}

/* Mitarbeiten — Figma „CTA V3" (11959:19613), nur ab Desktop; darunter CTA V1 ohne Bild */
.home-mitarbeiten { display: none; }
@media (min-width: 1101px) {
  .home-mitarbeiten-mobil { display: none; }
  /* Ragt wie die Blöcke bei Formularen und Chronik in den dunklen Abschnitt darüber (gemeinsamer Wert
     --f-seitenkopf-ueberlappung); der dunkle Abschnitt bekommt unten entsprechend mehr Platz.
     Darunter und links Neutral 200 wie die übrigen Abschnitte. */
  .home-pastors,
  .home-mitarbeiten { --home-ueberlappung: clamp(64px, 14.93vw, 215px); /* wie --f-seitenkopf-ueberlappung */ }
  .home-pastors { padding-bottom: calc(var(--f-section-y) + var(--home-ueberlappung)); }
  .home-mitarbeiten {
    display: block;
    position: relative;
    z-index: 1;
    height: 769px;
    margin-top: calc(-1 * var(--home-ueberlappung));
    isolation: isolate;
    color: var(--f-n100);
    background: linear-gradient(to bottom, transparent var(--home-ueberlappung), var(--f-n200) 0);
  }
  /* Background: beginnt bündig mit dem Inhaltsraster (Figma x 86), läuft rechts bis zum Rand, links 32er-Radius */
  .home-mitarbeiten__bg {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((100% - var(--f-container)) / 2);
    right: 0;
    z-index: -1;
    overflow: hidden;
    border-radius: 32px 0 0 32px;
    background: #0a0a0a;
  }
  /* Grunge fest mit Figma-Maßen links verankert (nicht gestreckt); rechts vom Figma-Rahmen gespiegelt fortgesetzt */
  .home-mitarbeiten__bg > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 1634px;
    height: 769px;
    max-width: none;
  }
  /* Foto-Box: x −262, 802 × 768,86; sichtbar 0 bis 540. Bild 1332,85 × 888,68 bei −449,92 / −118,84
     (Figma-Zuschnitt), Graustufen, Belichtung −0,14 ≈ brightness(0.8) */
  .home-mitarbeiten__foto {
    position: absolute;
    left: 0;
    top: 0.31px;
    width: 540px;
    height: 768.86px;
    overflow: hidden;
  }
  .home-mitarbeiten__foto img {
    position: absolute;
    left: -449.92px;
    top: -119.15px;
    width: 1332.85px;
    height: 888.68px;
    max-width: none;
    filter: grayscale(1) brightness(0.8);
  }
  .home-mitarbeiten__inhalt {
    position: absolute;
    left: calc((100% - var(--f-container)) / 2 + 647px);
    top: 216.9px;
    width: 617px;
    display: flex;
    flex-direction: column;
    gap: 40px;
  }
  /* Umbruch fest wie in Figma („Werde Teil des“ / „Teams“) */
  .home-mitarbeiten__inhalt h2 { white-space: nowrap; }
  .home-mitarbeiten__inhalt .f-btn-row { justify-content: flex-start; }
}

/* Woran wir glauben, hohes Bild: Original 6960 × 4640. Sichtbar ist der Bereich ab y 250 (darüber ein fremder
   Schriftzug), horizontal gespiegelt; Ausschnitt wie zuvor (61 %). Werte relativ zum Rahmen 559 × 850,5. */
.f-media > img.home-believe__pfarrerin {
  position: absolute;
  top: -5.695%;
  left: -86.14%;
  width: auto;
  height: 105.695%;
  max-width: none;
  object-fit: fill;
  transform: scaleX(-1);
}