/* ============================================================
   seite-automatisierung.css — Unterseite „Automatisierung"
   Nutzt main.css-Tokens und -Klassen (.hero, .naht, .faq, .motor-link,
   .finale, .maschine ...). Signature dieser Seite: das Pipeline-
   Flussdiagramm (zwei SVG-Layouts, eigene Gradient-ids pf-strom-h/-v,
   eigene Keyframes pf-*) und die tickende Uhr im dunklen Akt „Die Lücke"
   (die Copy handelt von Zeit: zwei Tage vs. Minuten).
   ============================================================ */

/* ---------- Eigene Keyframes (bewusst getrennt von main.css) ---------- */

/* Gradient-Striche fließen die Pfade entlang (Periode 8+14=22 → -44 nahtlos) */
@keyframes pf-fluss {
  to { stroke-dashoffset: -44; }
}

/* Sanfter Knoten-Puls (Muster m-puls, eigener Name + eigene Werte) */
@keyframes pf-puls {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.55); opacity: 0.08; }
}

/* Halo-Welle für die Legenden-Punkte */
@keyframes pf-halo {
  0% { box-shadow: 0 0 0 0 rgba(70, 184, 177, 0.45); }
  75% { box-shadow: 0 0 0 11px rgba(70, 184, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(70, 184, 177, 0); }
}

/* Schimmer-Lauf für die Hero-Unterstreichung (eigene Kopie, damit die
   Seite von parallelen main.css-Änderungen unabhängig bleibt) */
@keyframes pf-schimmer {
  from { background-position: 0% 50%; }
  to { background-position: 200% 50%; }
}

/* Die Uhr tickt: 60 harte Schritte pro Umlauf */
@keyframes pf-tick {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ---------- Unterseiten-Held: hero-grid + schwebendes Render ---------- */

.unterheld {
  padding-bottom: clamp(40px, 6vh, 72px);
}

/* Deckel wie seite-zusammenarbeit: neben der Bildkarte ist die Spalte
   schmaler, und der wrap wächst ab ~1300px nicht mehr mit, 5vw schon. */
.unterheld h1 {
  font-size: clamp(2.5rem, 5vw, 3.8rem);
}

.unterheld .hero-lead { max-width: 34rem; }

.unterheld .hero-beweis { min-height: 300px; }

.unterheld .beweis-foto { width: min(100%, 470px); }

.unterheld .wrap {
  position: relative;
  z-index: var(--z-inhalt);
}

.unterheld h1 {
  max-width: 18ch;
}

/* „Keine." bekommt eine schimmernde Unterstreichung — kein Gradient-Text */
.unterheld h1 em {
  position: relative;
}

.unterheld h1 em::after {
  content: '';
  position: absolute;
  left: 0.02em;
  right: 0.08em;
  bottom: -0.04em;
  height: 0.075em;
  border-radius: 999px;
  background: var(--shimmer);
  background-size: 200% 100%;
  animation: pf-schimmer 7s linear infinite;
}

.unterheld .hero-lead {
  max-width: 44rem;
}

.unterheld .hero-ctas {
  margin-bottom: 0;
}

/* ---------- Pipeline: getönte Bühne, Kopf + Bild, Signature-Diagramm ---------- */

.pipeline {
  background: var(--bg-tint);
  padding-block: clamp(60px, 8.5vh, 108px);
}

/* Kopf: nur noch die Überschrift — das Render lebt seit dem Editor-Umbau
   im Hero, das Panel darunter IST das Bild der Sektion. */
.pipeline-kopf {
  margin-bottom: clamp(28px, 4vh, 48px);
}

.pipeline-kopf h2 {
  font-size: var(--fs-h2);
}

/* ---------- Signature: das Pipeline-Flussdiagramm ---------- */

/* Editor-Panel: dunkler Leitstand auf der getönten Bühne — der Blick in
   den laufenden Workflow-Editor (n8n-Anmutung: tiefes Petrol + Punktraster).
   Bewusst ein dunkles OBJEKT mit Rand und Radius, kein Voll-Bleed: der
   einzige dunkle Akt der Seite bleibt die Lücke.
   .maschine (main.css) liefert margin-block + svg-Grundmaße. */
.pipe-diagramm {
  position: relative;
  background:
    radial-gradient(rgba(103, 205, 198, 0.13) 1px, transparent 1.4px) 0 0 / 24px 24px,
    radial-gradient(120% 140% at 18% 0%, #10474b 0%, #0a3236 45%, #071f22 100%);
  border: 1px solid rgba(103, 205, 198, 0.22);
  border-radius: 28px;
  box-shadow: 0 30px 70px rgba(6, 23, 25, 0.35), 0 0 0 1px rgba(6, 23, 25, 0.2);
  padding: clamp(14px, 2.6vw, 36px);
  padding-top: clamp(44px, 5vw, 58px);
  overflow: clip;
}

/* Editor-Kopfleiste: drei Fenster-Punkte links, pulsierende Betriebs-LED
   rechts — rein dekorativ, bewusst ohne Text (Copy ist eingefroren). */
.editor-leiste {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(103, 205, 198, 0.14);
}

.editor-punkte { display: flex; gap: 7px; }

.editor-punkte i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(234, 246, 245, 0.22);
}

.editor-led {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint-hell);
  animation: pf-led 2.2s ease-in-out infinite;
}

@keyframes pf-led {
  0%, 100% { box-shadow: 0 0 0 0 rgba(103, 205, 198, 0.55); }
  60% { box-shadow: 0 0 0 8px rgba(103, 205, 198, 0); }
}

.pipe-svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Hochformat erst auf schmalen Viewports. Doppelt qualifiziert, damit die
   Regel .maschine svg { display:block } aus main.css nicht gewinnt. */
.pipe-diagramm .pipe-hoch {
  display: none;
  max-width: 430px;
  margin-inline: auto;
}

/* Ströme: geschwungene Pfade mit fließenden Gradient-Strichen.
   Die Gradient-Füllung (url(#pf-strom-h/-v)) sitzt als Attribut im SVG. */
.pf-strom path {
  fill: none;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 8 14;
  animation: pf-fluss 1.6s linear infinite;
  filter: drop-shadow(0 0 6px rgba(103, 205, 198, 0.45));
}

/* Eingänge: dunkle Glas-Chips mit Mint-Hairline und heller Schrift
   (Kontrast auf dem dunklen Canvas ~12:1) */
.pf-io rect {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(103, 205, 198, 0.45);
  stroke-width: 1.5;
}

.pf-io text {
  font-family: var(--f-body);
  font-size: 22px;
  font-weight: 600;
  fill: #eaf6f5;
  text-anchor: middle;
}

/* Stationen: helle Editor-Nodes auf dem dunklen Canvas (n8n-Muster),
   der Schatten wird zum Mint-Glow */
.pf-station rect {
  fill: #ffffff;
  stroke: rgba(103, 205, 198, 0.5);
  stroke-width: 1.5;
  filter: drop-shadow(0 10px 26px rgba(6, 23, 25, 0.5)) drop-shadow(0 0 18px rgba(103, 205, 198, 0.22));
}

.pf-nr {
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--petrol);
  text-anchor: middle;
}

.pf-titel {
  font-family: var(--f-body);
  font-size: 27px;
  font-weight: 600;
  fill: var(--ink);
  text-anchor: middle;
}

/* Ausgänge: leuchtende Mint-Chips — die Ergebnisse glühen auf dem dunklen
   Canvas (dunkle Schrift auf Mint-Hell ≈ 9:1) */
.pf-ziel rect {
  fill: var(--mint-hell);
  filter: drop-shadow(0 0 16px rgba(103, 205, 198, 0.35));
}

.pf-ziel text {
  font-family: var(--f-body);
  font-size: 22px;
  font-weight: 700;
  fill: #071f22;
  text-anchor: middle;
}

/* Datenpakete: leuchtende Punkte auf den Strömen. Bewegt werden sie per
   SMIL im SVG (automatisierung.js pausiert bei static/reduced/offscreen);
   hier nur die Optik. */
.pf-paket {
  fill: #d9fbf7;
  filter: drop-shadow(0 0 8px rgba(103, 205, 198, 0.9));
}

.pf-paket-halo {
  fill: var(--mint-hell);
  opacity: 0.35;
}

/* Ausführungs-Blitz: die drei Stationen leuchten nacheinander kurz auf,
   als liefe gerade ein Durchlauf durch (Reihenfolge 01 → 02 → 03).
   Der 5.4s-Zyklus ist bewusst kein Vielfaches der Paket-Zeiten, damit das
   Zusammenspiel lebendig statt mechanisch wirkt. */
@keyframes pf-exec {
  0%, 14%, 100% { fill: #ffffff; stroke: rgba(103, 205, 198, 0.5); }
  5%, 9% { fill: #d5f3f0; stroke: var(--mint-hell); }
}

.pf-station rect { animation: pf-exec 5.4s ease-in-out infinite; }
.pf-station rect:nth-of-type(2) { animation-delay: 1.6s; }
.pf-station rect:nth-of-type(3) { animation-delay: 3.2s; }

/* Andockpunkte + sanft pulsierende Knoten-Kreise (mint statt petrol:
   Petrol säuft auf dem dunklen Canvas ab) */
.pf-punkt { fill: var(--mint-hell); }

.pf-punkt-klein { fill: var(--mint); }

.pf-puls {
  fill: rgba(70, 184, 177, 0.38);
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-puls 2.8s ease-in-out infinite;
}

.pf-puls:nth-of-type(2) { animation-delay: -0.9s; }
.pf-puls:nth-of-type(3) { animation-delay: -1.8s; }

/* Hochformat: größere Schrift auf kompakter viewBox (lesbar ab 320px) */
.pipe-hoch .pf-io text,
.pipe-hoch .pf-ziel text { font-size: 18px; }

.pipe-hoch .pf-nr { font-size: 13px; letter-spacing: 0.14em; }

.pipe-hoch .pf-titel { font-size: 20px; }

/* ---------- Legende: die drei Stationen, wortgleich zur Copy ---------- */

.stationen {
  list-style: none;
  margin: clamp(36px, 5vh, 56px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3.4vw, 48px);
}

.station {
  border-top: 1px solid var(--linie);
  padding-top: clamp(16px, 2vh, 22px);
}

.station-nr {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.1em;
  color: var(--petrol);
  margin-bottom: 14px;
}

/* Der Legenden-Punkt pulst im Takt der Diagramm-Knoten */
.station-nr::before {
  content: '';
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  animation: pf-halo 2.8s ease-out infinite;
}

.station:nth-child(2) .station-nr::before { animation-delay: -0.9s; }
.station:nth-child(3) .station-nr::before { animation-delay: -1.8s; }

.station h3 {
  font-size: var(--fs-h3);
  margin-bottom: 10px;
}

.station p {
  color: var(--ink-soft);
  max-width: 42ch;
}

/* ---------- Die Lücke: der eine dunkle Voll-Bleed-Akt, mit tickender Uhr ---------- */

.luecke {
  position: relative;
  background: var(--bg-deep);
  color: var(--dunkel-ink);
  padding-block: clamp(60px, 8.5vh, 108px);
  overflow: clip;
}

.luecke-aurora {
  position: absolute;
  inset: -10% -20%;
  z-index: var(--z-orb);
  background:
    radial-gradient(760px 420px at 12% 8%, rgba(20, 120, 124, 0.34), transparent 65%),
    radial-gradient(700px 440px at 90% 88%, rgba(103, 205, 198, 0.14), transparent 60%);
  filter: blur(10px);
  animation: orb-drift 28s ease-in-out infinite alternate;
}

.luecke-grid {
  position: relative;
  z-index: var(--z-inhalt);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}

.luecke h2 {
  font-size: var(--fs-h2);
  color: #ffffff;
  max-width: 20ch;
  margin-bottom: clamp(24px, 3vh, 36px);
}

.luecke h2 em {
  color: var(--mint-hell);
}

.luecke-text {
  color: var(--dunkel-soft);
  max-width: 64ch;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.7;
}

/* Die Uhr: Hairline-Zifferblatt, Minutenzeiger steht, Sekundenzeiger tickt
   in 60 Schritten. Ticks als stroke-dasharray-Kreise (keine 60 Einzellinien). */
.luecke-uhr {
  position: relative;
  width: clamp(240px, 25vw, 340px);
}

.luecke-uhr::before {
  content: '';
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(70, 184, 177, 0.16), transparent 65%);
}

.luecke-uhr svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}

.uhr-rand {
  fill: none;
  stroke: rgba(103, 205, 198, 0.3);
  stroke-width: 1;
}

/* 60 Minuten-Ticks: Umfang 2π·80 ≈ 502.65 → Periode 8.3775 */
.uhr-ticks {
  fill: none;
  stroke: rgba(233, 244, 243, 0.22);
  stroke-width: 6;
  stroke-dasharray: 1.4 6.978;
}

/* 12 Stunden-Ticks: Umfang 2π·79 ≈ 496.37 → Periode 41.364 */
.uhr-ticks-grob {
  fill: none;
  stroke: rgba(233, 244, 243, 0.42);
  stroke-width: 11;
  stroke-dasharray: 2.2 39.164;
}

.uhr-minute {
  stroke: rgba(233, 244, 243, 0.6);
  stroke-width: 4;
  stroke-linecap: round;
}

.uhr-zeiger {
  stroke: var(--mint-hell);
  stroke-width: 3;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: pf-tick 60s steps(60, end) infinite;
}

.uhr-puls {
  fill: rgba(103, 205, 198, 0.35);
  transform-box: fill-box;
  transform-origin: center;
  animation: pf-puls 2.8s ease-in-out infinite;
}

.uhr-punkt {
  fill: var(--mint-hell);
}

/* ---------- Brücke: getönte Bühne, Links zu den Motoren ---------- */

.bruecke {
  background: var(--bg-tint);
  padding-block: clamp(56px, 8vh, 96px);
}

.bruecke-zeile {
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: clamp(18px, 2.4vh, 28px);
}

.bruecke-links {
  display: grid;
  max-width: 720px;
}

.bruecke-links .motor-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  padding-block: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--linie);
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--ink);
  transition: color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.bruecke-links .motor-link:last-child {
  border-bottom: 1px solid var(--linie);
}

.bruecke-links .motor-link:hover {
  color: var(--petrol);
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .pipeline-kopf h2 {
    max-width: none;
  }
}

/* Diagramm kippt ins Hochformat, bevor die Breit-Typo unlesbar wird */
@media (max-width: 900px) {
  .pipe-diagramm .pipe-breit { display: none; }
  .pipe-diagramm .pipe-hoch { display: block; }

  .luecke-grid {
    grid-template-columns: 1fr;
  }

  .luecke-uhr {
    width: clamp(200px, 46vw, 260px);
    margin-top: 8px;
  }
}

@media (max-width: 720px) {
  .hero.unterheld { padding-top: 108px; }
  .unterheld .hero-ctas .btn-gross { width: 100%; justify-content: center; }

  .pipe-diagramm { padding: 12px 10px; }

  .stationen {
    grid-template-columns: 1fr;
    gap: clamp(24px, 5vw, 36px);
  }

  .luecke h2 { max-width: none; }
}