/* ============================================================
   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);
}

/* ---------- Held-Motiv: der Leitstand (Welle 73) ----------

   Ersetzt das 3D-Render `render-workflow-netz.webp`. Jonas am 28.07.2026:
   „herobild gefaellt mir nicht, kein so stock ki bild". Ein echtes Foto kam
   nicht in Frage, weil der Bildbestand zu Automatisierung nichts hergibt (die
   Drehtag-Fotos zeigen Kamera und Interviews), und ein neu erzeugtes Bild waere
   wieder ein KI-Bild gewesen. Also gebaut statt fotografiert, in derselben
   Sprache wie das Panel weiter unten: tiefes Petrol, Punktraster, Fensterleiste.

   Arbeitsteilung der beiden Panels: Das Flussdiagramm unten zeigt die
   ARCHITEKTUR (welche Station wohin haengt), dieses Panel die WIRKUNG in der
   Zeit (Eingang, Antwort, Termin). Deshalb doppelt es die Bauen-Sektion nicht.

   Die Zeilen sind ein Sinnbild und als solches beschriftet. Keine echten
   Vorgaenge, keine Namen: erfundene Datensaetze mit Personen haetten wie ein
   Beleg ausgesehen, und Belege brauchen bei Zeus eine Quelle. */

.leitstand {
  position: relative;
  width: min(100%, 470px);
  margin: 0;
  display: grid;
  gap: 0;
  padding: clamp(44px, 5vw, 56px) clamp(16px, 2.2vw, 22px) clamp(16px, 2.2vw, 22px);
  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: 24px;
  box-shadow: 0 30px 70px rgba(6, 23, 25, 0.35), 0 0 0 1px rgba(6, 23, 25, 0.2);
  overflow: clip;
}

.ls-leiste {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(103, 205, 198, 0.14);
}

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

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

.ls-titel {
  color: rgba(234, 246, 245, 0.62);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ls-live {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--mint-hell);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

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

.ls-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

/* Nur ein from-Keyframe plus backwards: liefert FOUC-Schutz, laesst KEIN
   transform stehen (die dokumentierte Hover-Falle) und steht im static-Modus
   sauber am Ziel. Muster aus Welle 38. */
.ls-zeile {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(103, 205, 198, 0.16);
  background: rgba(6, 23, 25, 0.34);
  animation: ls-auftritt 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

.ls-zeile:nth-child(2) { animation-delay: 0.12s; }
.ls-zeile:nth-child(3) { animation-delay: 0.24s; }

@keyframes ls-auftritt {
  from { opacity: 0; transform: translateY(10px); }
}

.ls-zeit {
  font-family: var(--f-display);
  font-variant-numeric: tabular-nums;
  font-size: 0.92rem;
  color: rgba(234, 246, 245, 0.55);
}

.ls-was {
  color: #eaf6f5;
  font-size: 0.95rem;
  line-height: 1.3;
}

.ls-chip {
  grid-column: 2;
  justify-self: start;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
}

.ls-chip-fertig {
  background: rgba(103, 205, 198, 0.16);
  color: var(--mint-hell);
}

.ls-chip-laeuft {
  background: rgba(234, 246, 245, 0.1);
  color: rgba(234, 246, 245, 0.72);
}

/* Der Punkt der ganzen Seite in einer Zahl: was NICHT auf dem Tisch liegt. */
.ls-fuss {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(103, 205, 198, 0.14);
}

/* Bewusst die Brotschrift statt der Hausschrift Clash Display: Eine
   ALLEINSTEHENDE Null liest sich dort wie ein O. Im Finale funktionieren
   „35" und „300", weil weitere Ziffern danebenstehen und den Zahlenkontext
   liefern; hier steht die Ziffer allein. tabular-nums haelt sie schmal. */
.ls-fuss-wert {
  font-family: var(--f-body);
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--mint-hell);
}

.ls-fuss-text {
  color: rgba(234, 246, 245, 0.62);
  font-size: 0.88rem;
  line-height: 1.35;
}

.ls-bildzeile {
  margin-top: 14px;
  color: rgba(234, 246, 245, 0.4);
  font-size: 0.76rem;
  letter-spacing: 0.03em;
}

/* main.css macht `.hero-beweis` mobil ZWEISPALTIG (dort stehen sonst zwei
   Beweis-Karten nebeneinander). Ohne diese Zeile landet der Leitstand in einer
   160-px-Zelle und die Zeilen brechen mitten im Wort. Dieselbe Falle wie in
   Welle 48b auf webdesign.html, deshalb hier gleich mit Anker dokumentiert. */
@media (max-width: 900px) {
  .unterheld .hero-beweis { grid-template-columns: minmax(0, 1fr); }
  .leitstand { width: 100%; }
}

@media (max-width: 560px) {
  .ls-zeile { padding: 11px 12px; }
  .ls-was { font-size: 0.9rem; }
}

/* ---------- 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; }
}