/* ==========================================================================
   GROWIT — Leistungs-Detailseiten (gemeinsame Bausteine)
   Ergänzt site.css + leistungen.css. Boldness bleibt beim interaktiven
   Element; die umgebenden Abschnitte sind bewusst ruhig und diszipliniert.
   ========================================================================== */

/* ---- Breadcrumb ---- */
.crumbs {
  display: flex; align-items: center; gap: 10px;
  font-size: .82rem; font-weight: 600; letter-spacing: .01em;
  color: var(--light); margin-bottom: 20px;
}
.crumbs a { color: var(--muted); text-decoration: none; transition: color .2s var(--ease); }
.crumbs a:hover { color: var(--royal); }
.crumbs span { opacity: .5; }
.crumbs b { color: var(--navy); font-weight: 700; }
/* Hell auf dunkel gilt fuer den dunklen Abschnitt, nicht fuer die ganze
   Seite. Die Klasse am body faerbt nur noch den Kopf, sonst wuerde eine
   Ueberschrift im hellen Abschnitt weiss, sobald der Kopf ueber einem
   dunklen Band steht. */
[data-theme="dark"] .crumbs a { color: rgba(255,255,255,.72); }
[data-theme="dark"] .crumbs b { color: #fff; }
[data-theme="dark"] .crumbs span { color: rgba(255,255,255,.4); }

/* ---- Detail-Hero ---- */
.ldx-hero { padding-top: clamp(130px, 17vh, 200px); }
.ldx-hero__inner { max-width: 860px; }
.ldx-hero h1 {
  margin-top: 10px;
  font-size: clamp(2.2rem, 4.8vw, 3.9rem);
  font-weight: 700; letter-spacing: -.035em; line-height: 1.06; color: var(--navy);
  overflow-wrap: break-word; hyphens: auto;
}
.ldx-hero .lead { margin-top: 20px; max-width: 62ch; }
.ldx-hero__cta {
  margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px;
}

/* Interaktiver/visueller Block direkt unter dem Hero-Text */
.ldx-stage { margin-top: clamp(40px, 6vw, 72px); }
.ldx-stage .model3d { height: clamp(340px, 44vw, 520px); }
.ldx-stage .phone-stage,
.ldx-stage .browser,
.ldx-stage .seo-tool { margin-inline: auto; }
.ldx-stage--wide { width: min(1180px, 94vw); margin-inline: auto; }

/* ---- Abschnitts-Kopf (wiederverwendbar) ---- */
.ldx-head { max-width: 60ch; margin-bottom: clamp(28px, 4vw, 46px); }
.ldx-head h2 {
  font-size: clamp(1.9rem, 3.6vw, 3rem); font-weight: 800;
  letter-spacing: -.035em; color: var(--navy); margin-top: 8px;
}
.ldx-head p { margin-top: 14px; color: var(--muted); font-size: 1.05rem; }
[data-theme="dark"] .ldx-head h2 { color: #fff; }
[data-theme="dark"] .ldx-head p { color: rgba(255,255,255,.78); }

/* ---- Zahlen / „Warum das zählt“ ---- */
.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 22px);
}
.stat-card {
  position: relative; overflow: hidden;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: clamp(24px, 2.6vw, 34px);
  box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.stat-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: var(--grad-royal); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.stat-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--line-strong); }
.stat-card:hover::before { transform: scaleX(1); }
.stat-card b {
  display: block; font-size: clamp(2.5rem, 4.6vw, 3.5rem); font-weight: 800;
  letter-spacing: -.045em; line-height: 1;
  background: linear-gradient(135deg, var(--navy) 8%, var(--royal) 78%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Nur die Bildunterschrift direkt hinter der Zahl — nicht jedes span in der
   Karte. Vorher traf diese Zeile auch das <span> in der Zahl selbst: die
   hochgezählte Zahl wurde dadurch auf Bildunterschrift-Größe geschrumpft
   und stand grau statt im Verlauf. */
.stat-card > b + span { display: block; margin-top: 14px; color: var(--muted); font-size: .96rem; line-height: 1.55; }

/* Wort-Variante: dieselbe Karte, aber die Kopfzeile ist ein Begriff, keine
   Zahl. Der Zahlen-Grad (bis 3,5 rem) bricht ein Wort wie „Vor dem Termin“
   über drei Zeilen — dann startet der Fließtext in jeder Karte woanders und
   die Reihe wird unruhig. Als Überschrift gesetzt steht alles auf einer
   Linie. Ein feiner Strich übernimmt die Rolle, die sonst die Zahl hatte:
   Kopf und Erklärung sichtbar zu trennen. */
.stat-grid--wort .stat-card { padding-top: clamp(22px, 2.2vw, 28px); }
.stat-grid--wort .stat-card b {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem); font-weight: 700;
  letter-spacing: -.015em; line-height: 1.25;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.stat-grid--wort .stat-card > b + span { margin-top: 13px; }

/* ---- Prozess / „So arbeiten wir“ ---- */
.proc { display: grid; gap: 0; position: relative; max-width: 880px; }
.proc-step {
  position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 8px 22px;
  padding: 0 0 clamp(30px, 3.4vw, 44px) 0;
}
.proc-step:last-child { padding-bottom: 0; }
/* Verbindungslinie */
.proc-step::before {
  content: ""; position: absolute; left: 27px; top: 50px; bottom: -6px; width: 2px;
  background: linear-gradient(var(--royal), rgba(82,113,255,.15));
}
.proc-step:last-child::before { display: none; }
.proc-step__num {
  grid-row: 1 / span 2; width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  color: #fff; background: var(--grad-royal);
  box-shadow: 0 10px 22px -10px rgba(82,113,255,.7); position: relative; z-index: 1;
}
.proc-step h3 { font-size: 1.12rem; font-weight: 700; color: var(--navy); align-self: center; }
.proc-step p { grid-column: 2; color: var(--muted); margin-top: 2px; line-height: 1.6; }

/* ---- Deliverables / „Was enthalten ist“ ---- */
.deliver-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px);
}
.deliver-item {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(20px, 2.2vw, 28px); display: flex; gap: 16px; align-items: flex-start;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.deliver-item:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--line-strong); }
.deliver-item__ico {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; color: var(--royal);
  background: rgba(82,113,255,.10);
}
.deliver-item__ico svg { width: 22px; height: 22px; }
.deliver-item h3 { font-size: 1.04rem; font-weight: 700; color: var(--navy); }
.deliver-item p { color: var(--muted); margin-top: 6px; font-size: .95rem; line-height: 1.55; }

/* ---- FAQ (nutzt .faq-item aus site.css); Rahmen etwas begrenzen ---- */
.ldx-faq .faq { max-width: 820px; }

/* ---- Verwandte Leistungen ---- */
.ldx-related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ldx-related a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 22px; text-decoration: none; color: var(--navy); font-weight: 600;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.ldx-related a:hover { transform: translateY(-3px); box-shadow: var(--sh); border-color: var(--line-strong); }
.ldx-related a svg { width: 18px; height: 18px; color: var(--royal); flex: 0 0 auto; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .ldx-related { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .stat-grid { grid-template-columns: 1fr; }
  .deliver-grid { grid-template-columns: 1fr; }
  .proc-step { grid-template-columns: 54px 1fr; gap: 6px 16px; }
  .proc-step::before { left: 26px; }
}

/* ==========================================================================
   v2 · Anhebung der Leistungs-Detailseiten (Task 43)
   Gilt nur fuer body.lpage — die Automatisierungsseite (ki-auto-page)
   nutzt dieselben Bausteine und bleibt unveraendert.
   ========================================================================== */

/* Die grosse Zahl steht in ruhigem Navy statt im Verlauf. */
.lpage .stat-card b {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: var(--navy);
}
/* Auch die Karten-Oberkante beim Beruehren: eine Farbe reicht. */
.lpage .stat-card::before { background: var(--royal); }

/* Die Hero-Zeile traegt dasselbe Gewicht wie die Abschnitts-Titel. */
.lpage .ldx-hero h1 { font-weight: 800; }

/* Das Icon-Feld kippt beim Beruehren auf Royal. */
.lpage .deliver-item__ico {
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.lpage .deliver-item:hover .deliver-item__ico {
  background: var(--royal);
  color: #fff;
}

/* Der Pfeil der verwandten Leistungen laeuft beim Beruehren an. */
.lpage .ldx-related a svg { transition: transform .3s var(--ease); }
.lpage .ldx-related a:hover svg { transform: translateX(4px); }

/* Kartenreihen treten nacheinander auf statt als Block. Die Elternteile
   tragen bereits .reveal; hier staffeln sich nur die Kinder. */
@media (prefers-reduced-motion: no-preference) {
  .lpage .stat-grid.reveal .stat-card,
  .lpage .deliver-grid.reveal .deliver-item,
  .lpage .ldx-related.reveal a,
  .lpage .proc.reveal .proc-step {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease), transform .6s var(--ease);
  }
  .lpage .stat-grid.reveal.in .stat-card,
  .lpage .deliver-grid.reveal.in .deliver-item,
  .lpage .ldx-related.reveal.in a,
  .lpage .proc.reveal.in .proc-step {
    opacity: 1;
    transform: none;
  }
  .lpage .stat-grid.reveal.in .stat-card:nth-child(2),
  .lpage .ldx-related.reveal.in a:nth-child(2),
  .lpage .proc.reveal.in .proc-step:nth-child(2) { transition-delay: .09s; }
  .lpage .stat-grid.reveal.in .stat-card:nth-child(3),
  .lpage .ldx-related.reveal.in a:nth-child(3),
  .lpage .proc.reveal.in .proc-step:nth-child(3) { transition-delay: .18s; }
  .lpage .stat-grid.reveal.in .stat-card:nth-child(4),
  .lpage .proc.reveal.in .proc-step:nth-child(4) { transition-delay: .27s; }

  /* Die zwoelf Leistungs-Karten laufen in einer engeren Staffel ein. */
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(2) { transition-delay: .05s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(3) { transition-delay: .1s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(4) { transition-delay: .15s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(5) { transition-delay: .2s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(6) { transition-delay: .25s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(7) { transition-delay: .3s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(8) { transition-delay: .35s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(9) { transition-delay: .4s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(10) { transition-delay: .45s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(11) { transition-delay: .5s; }
  .lpage .deliver-grid.reveal.in .deliver-item:nth-child(12) { transition-delay: .55s; }

  /* Die Verbindungslinie im Prozess waechst von oben nach unten mit. */
  .lpage .proc.reveal .proc-step::before {
    transform: scaleY(0);
    transform-origin: top;
    transition: transform .7s var(--ease);
  }
  .lpage .proc.reveal.in .proc-step::before { transform: scaleY(1); }
  .lpage .proc.reveal.in .proc-step:nth-child(2)::before { transition-delay: .27s; }
  .lpage .proc.reveal.in .proc-step:nth-child(3)::before { transition-delay: .36s; }
}