/* =========================================================
   rp-start-aufbau.css: Startseite, Hero und Projekte (Schritt 58)
   Stand 24.09.2026.
   ========================================================= */

/* ---------- Hero: hellerer Filter, dunkel nur, wo Text liegt ---------- */
.bottom-section.large-image-right .bg-overlay._40 {
  background: linear-gradient(90deg, #194963 0%, rgba(25, 73, 99, .62) 14%, rgba(25, 73, 99, .22) 46%, rgba(25, 73, 99, 0) 78%);
}
/* Desktop: Blau endet bündig mit dem weissen Balken, nicht bis ganz unten (Nicolas, 25.09.2026) */
@media (min-width: 992px) {
  .bottom-section.large-image-right .bg-overlay._40 {
    top: 0;
    bottom: calc(8% - 1px);
    height: auto;
  }
}
@media (max-width: 767px) {
  .bottom-section.large-image-right .bg-overlay._40 {
    background: linear-gradient(180deg, rgba(12, 36, 52, .5) 0%, rgba(12, 36, 52, .3) 38%, rgba(12, 36, 52, .38) 70%, rgba(12, 36, 52, .62) 100%);
  }
}
/* Hochformat-Poster bis 991 px: rp-video.css (gilt für alle Seiten mit dem Video) */
.bottom-section.large-image-right h1,
.bottom-section.large-image-right .color-neutral-200 { text-shadow: 0 1px 18px rgba(8, 26, 38, .35); }

/* Titelgrösse: Tablet war mit 80 px zu wuchtig, Handy darf etwas grösser */
@media (min-width: 768px) and (max-width: 991px) {
  .bottom-section .display-1.color-neutral-100 { font-size: 64px; }
}
@media (max-width: 479px) {
  .bottom-section .display-1.color-neutral-100 { font-size: clamp(33px, 9vw, 38px); }
}

/* ---------- Titel baut sich Buchstabe für Buchstabe auf ---------- */
html.hat-js .rp-tippen:not(.rp-bereit) { visibility: hidden; animation: rp-notfall 0s 2.2s forwards; }
@keyframes rp-notfall { to { visibility: visible; } }

.rp-tippen .rp-w { display: inline-block; white-space: nowrap; }
.rp-tippen.rp-bereit:not(.rp-ruhig) .rp-b {
  display: inline-block;
  opacity: 0;
  animation: rp-buchstabe .62s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--i) * 42ms + 180ms);
}
@keyframes rp-buchstabe {
  from { opacity: 0; transform: translateY(.38em); filter: blur(8px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; filter: none; }
}
.rp-tippen.rp-bereit:not(.rp-ruhig) .display-1-heading-line-right {
  scale: 0 1;
  transform-origin: left center;
  animation: rp-linie .7s cubic-bezier(.2, .7, .2, 1) forwards;
  animation-delay: calc(var(--n, 28) * 42ms + 380ms);
}
@keyframes rp-linie { to { scale: 1 1; } }

/* ---------- Vertrauenszeile unter den Knöpfen ---------- */
.rp-hero-vertrauen {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem 1.5rem;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
  text-shadow: 0 1px 12px rgba(8, 26, 38, .45);
  animation: rp-auf .8s cubic-bezier(.2, .7, .2, 1) 1.5s both;
}
.rp-hero-vertrauen li { display: flex; align-items: center; gap: .5rem; margin: 0; }
.rp-hero-vertrauen svg {
  flex: none;
  box-sizing: content-box;
  width: 14px;
  height: 14px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .2);
}
@keyframes rp-auf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (max-width: 479px) {
  .rp-hero-vertrauen { flex-direction: column; gap: .5rem; margin-top: 22px; font-size: 14.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html.hat-js .rp-tippen:not(.rp-bereit) { visibility: visible; animation: none; }
  .rp-tippen .rp-b, .rp-tippen .display-1-heading-line-right, .rp-hero-vertrauen { animation: none !important; opacity: 1; scale: none; }
}

/* ---------- Ein Blick auf unsere letzten Projekte ---------- */
.rp-projekte {
  position: relative;
  z-index: 1;
  padding: clamp(64px, 8vw, 112px) 0;
  background: #f5f6f8;
}
.rpp-kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px 48px;
  margin-bottom: clamp(28px, 4vw, 48px);
}
.rpp-kopf-text { flex: 1 1 520px; max-width: 680px; }
.rpp-kopf-text p { margin: 16px 0 0; }
.rpp-kopf .rpp-knoepfe { flex: none; margin: 0; }

.rpp .rpp-karte { position: relative; display: flex; flex-direction: column; align-items: stretch; margin: 0; }   /* Text bündig links, nicht mittig */
.rpp .rpp-bild {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: .875rem;
  background: #e3e8ec;
}
.rpp .rpp-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.rpp .rpp-text { padding: 1rem .15rem 0; }
.rpp .rpp-titel {
  margin: 0;
  font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
  font-weight: 600;
  line-height: 1.3;
  color: #152a38;
}
.rpp .rpp-titel a { color: inherit; text-decoration: none; }
.rpp .rpp-titel a::after { content: ""; position: absolute; inset: 0; border-radius: .875rem; }
.rpp .rpp-titel a:focus-visible { outline: none; }
.rpp .rpp-titel a:focus-visible::after { outline: 2px solid #194963; outline-offset: 3px; }
@media (hover: hover) {
  .rpp .rpp-karte.hat-link:hover .rpp-bild img { transform: scale(1.04); }
  .rpp .rpp-karte.hat-link:hover .rpp-titel a { text-decoration: underline; text-underline-offset: 3px; }
}
.rpp .rpp-fakten { margin: .55rem 0 0; }
.rpp .rpp-fakten dt {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #52697a;
}
.rpp .rpp-fakten dd { margin: .15rem 0 0; font-size: 1rem; line-height: 1.4; color: #152a38; }

/* ---------- Gleiche Spalte für alle drei Schieber (wie #aktuelle-immobilien .rpz) ---------- */
.rp-projekte > .container-default,
.rp-projekte + .section-21 > .container-7 {
  box-sizing: border-box;
  width: min(1200px, 100% - 2 * clamp(1rem, 3.2vw, 1.5rem));   /* Rand wie alle Abschnitte (Schritt 85, 30.09.2026) */
  max-width: none;
  margin: 0 auto;
  padding: 0;
}
/* Rezensionen direkt nach den grauen Projekten: weiss, mit Luft */
.rp-projekte + .section-21 {
  margin: 0;
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 72px);
  background-color: transparent;
}

/* ---------- Porträt neben «Cybertour als Online-Marketing Tochterunternehmen» ----------
   Webflow setzt .fit-cover zwischen 992 und 1439 px auf 26% 50%: dann sieht man nur
   Bäume und einen Ärmel. Das Gesicht liegt bei rund 57% der Bildbreite. */
@media screen and (min-width: 992px) {
  .section-16 img.fit-cover { object-position: 60% 40%; }
}