/* ==========================================================================
   pages.css — nur Neues fuer die Tiefenseiten (leistungen/ablauf/projekte/team/kontakt).
   Alles Wiederverwendbare (.section, .reveal, .why-grid, .steps, .showcase-grid,
   .service-block, .team-card, .faq-item, .contact-grid, .footer-*) lebt in sections.css.
   Reused Tokens: --ink, --muted, --lila, --blau, --line, --surface, --radius, --shadow, --font.
   ========================================================================== */

/* ---------- Subpage-Hero: Pill ist sofort sichtbar (body.past-hero ohne Hero-Strecke) --
   auf index.html erledigt das die 300vh-Scrub-Distanz, hier braucht es stattdessen Freiraum. ---------- */
.subpage-hero {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(140px, 20vw, 220px) clamp(20px, 6vw, 60px) clamp(48px, 7vw, 72px);
}
.subpage-hero-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(32px, 5vw, 56px);
  align-items: center;
}
.subpage-hero-text .headline { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.08; }
.subpage-hero-img {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface);
  border: 1px solid var(--line);
}
.subpage-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.subpage-hero--noimg .subpage-hero-grid { grid-template-columns: 1fr; max-width: 760px; }

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 20px;
  font-size: .85rem; color: var(--muted);
}
.breadcrumb a { color: var(--muted); text-decoration: none; }
@media (hover: hover) {
  .breadcrumb a:hover { color: var(--blau); }
}
.breadcrumb .breadcrumb-sep { color: var(--line); }
.breadcrumb .breadcrumb-current { color: var(--ink); font-weight: 600; }

/* ---------- CTA-Band: Abschlussblock auf jeder Tiefenseite, fuehrt nach kontakt.html ---------- */
.cta-band {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 76px) clamp(24px, 6vw, 64px);
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--lila), var(--blau));
  color: #fff;
  text-align: center;
}
.cta-band h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); font-weight: 700; margin-bottom: 14px; }
.cta-band p { font-size: 1rem; line-height: 1.6; opacity: .92; max-width: 52ch; margin: 0 auto 28px; }
.cta-band-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; }
.cta-band .faq-btn--primary { background: #fff; color: var(--ink); }
.cta-band .faq-btn--ghost { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .4); color: #fff; }
@media (hover: hover) {
  .cta-band .faq-btn--ghost:hover { border-color: #fff; color: #fff; }
}

/* ==========================================================================
   leistungen.html — 4 ausfuehrliche Leistungsbloecke
   ========================================================================== */
.service-detail {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: clamp(32px, 5vw, 48px);
  align-items: start;
  margin-bottom: clamp(56px, 8vw, 92px);
}
.service-detail:last-of-type { margin-bottom: 0; }
.service-detail-img {
  position: sticky; top: 120px;
  border-radius: var(--radius); overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--surface); border: 1px solid var(--line);
}
.service-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.service-detail-num { display: block; margin-bottom: 10px; font-size: .85rem; font-weight: 700; letter-spacing: .5px; color: var(--blau); }
.service-detail h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 14px; font-weight: 600; }
.service-detail-lead { font-size: 1rem; line-height: 1.6; color: var(--muted); margin-bottom: 26px; max-width: 58ch; }
.service-detail-facts { display: flex; flex-direction: column; gap: 16px; }
.service-detail-fact { padding: 16px 18px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.service-detail-fact-label { display: block; margin-bottom: 6px; font-size: .76rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--blau); }
.service-detail-fact p { font-size: .92rem; line-height: 1.55; color: var(--ink); }

/* ---------- leistungen.html: Akzentbild zwischen Kernleistungen und Zusatzleistungen ---------- */
.leistungen-accent {
  max-width: 280px;
  margin: 0 auto clamp(-8px, -1vw, 0px);
  padding: 0 clamp(20px, 6vw, 60px);
}
.leistungen-accent img { width: 100%; height: auto; display: block; }

/* ==========================================================================
   ablauf.html — 4 Schritte in Langform
   ========================================================================== */
.step-detail-list { display: flex; flex-direction: column; }
.step-detail {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: clamp(20px, 4vw, 32px);
  padding: clamp(28px, 4vw, 40px) 0;
  border-bottom: 1px solid var(--line);
}
.step-detail-list .step-detail:first-child { border-top: 1px solid var(--line); }
.step-detail-num {
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--blau); color: var(--blau);
  font-weight: 700; font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
}
.step-detail h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: 10px; font-weight: 600; }
.step-detail-lead { font-size: .98rem; color: var(--muted); line-height: 1.6; margin-bottom: 20px; max-width: 62ch; }
.step-detail-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.step-detail-meta-item { padding: 14px 16px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); }
.step-detail-meta-label { display: block; margin-bottom: 6px; font-size: .74rem; font-weight: 600; letter-spacing: .4px; text-transform: uppercase; color: var(--blau); }
.step-detail-meta-item p { font-size: .9rem; line-height: 1.5; color: var(--ink); }

/* ==========================================================================
   kontakt.html — "Was im Erstgespraech passiert": 3 statt 4 Punkte auf .steps
   ========================================================================== */
.steps--3 { grid-template-columns: repeat(3, 1fr); }

@media (prefers-reduced-motion: reduce) {
  .section-more svg { transition-duration: 0s; }
}

/* Scroll-getriebene CSS-Animationen (Progressive Enhancement, siehe sections.css fuer die
   Herleitung und den Trade-off mit den Press-States) -- @keyframes sv-parallax/sv-card-in
   sind dort definiert, sections.css ist auf jeder Seite geladen, die auch pages.css laedt. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .subpage-hero-img img {
      animation: sv-parallax linear both;
      animation-timeline: view();
    }
    .step-detail {
      animation: sv-card-in linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 40%;
    }
  }
}

/* ==========================================================================
   Mobile — gleicher Breakpoint wie sections.css
   ========================================================================== */
@media (max-width: 768px), (orientation: portrait) and (max-width: 1024px) {
  .subpage-hero { padding-top: clamp(110px, 26vw, 160px); }
  .subpage-hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .subpage-hero-img { order: -1; }

  .service-detail { grid-template-columns: 1fr; gap: 20px; }
  .service-detail-img { position: static; }
  .service-detail-facts { gap: 12px; }

  .step-detail { grid-template-columns: 52px minmax(0, 1fr); gap: 16px; }
  .step-detail-num { width: 44px; height: 44px; font-size: 1rem; }
  .step-detail-meta { grid-template-columns: 1fr; }

  .steps--3 { grid-template-columns: 1fr; gap: 16px; }

  .cta-band { padding: clamp(36px, 8vw, 52px) 24px; }
  .cta-band-actions { flex-direction: column; }
  .cta-band .faq-btn { width: 100%; }
}