/* ============================================================
   Ablauf-Grafiken: eBay ⇄ EcomTasker ⇄ Amazon – Pfeile, Chips, kurze Sätze
   ============================================================ */
.fl { position: relative; font-family: var(--font); color: var(--ink-900); }
.fl__top { display: flex; justify-content: center; margin-bottom: 14px; }
.fl__row { display: grid; grid-template-columns: 1fr 104px 1.45fr 104px 1fr; align-items: center; gap: 0; }
.fl__node { position: relative; background: #fff; border: 2px solid var(--ink-100); border-radius: 18px; box-shadow: var(--shadow-md); overflow: hidden; transition: border-color .35s, box-shadow .35s, transform .35s var(--ease); min-width: 0; }
.fl__node.is-active { border-color: var(--blue-500); box-shadow: 0 0 0 5px rgba(47,111,255,.15), var(--shadow-lg); transform: translateY(-3px); }
.fl__hd { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--paper-2); border-bottom: 1px solid var(--ink-100); font-weight: 800; font-size: 13px; color: var(--ink-700); }
.fl__hd span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl__body { padding: 12px; min-height: 120px; }
.fl__body--img { padding: 0; background: #f8fafc; }
.fl__body--img img { width: 100%; height: auto; display: block; }
.fl__st { min-height: 34px; padding: 8px 14px; font-size: 12px; font-weight: 800; color: var(--ink-500); border-top: 1px solid var(--ink-100); background: #fff; transition: color .3s, background .3s; }
.fl__st:not(:empty) { color: #166534; background: #f0fdf4; }
.fl__st--et:not(:empty) { color: var(--blue-600); background: var(--blue-50); }
.fl__node--tg { max-width: 560px; width: 100%; }
.fl__node--tg .fl__body { min-height: 0; padding: 8px 12px; }
.fl__node--tg .fl__st:empty { display: none; }
.fl__node--tgbig .fl__body { min-height: 200px; }
.fl__node--tgbig .fl__st:empty, .fl__node--both .fl__st:empty { display: none; }

/* Logos */
.fl-ebay { font-family: Arial, sans-serif; font-weight: 900; font-size: 20px; letter-spacing: -.5px; line-height: 1; }
.fl-ebay b:nth-child(1){color:#e53238} .fl-ebay b:nth-child(2){color:#0064d2} .fl-ebay b:nth-child(3){color:#f5af02} .fl-ebay b:nth-child(4){color:#86b817}
.fl-amz { font-family: Arial, sans-serif; font-weight: 900; font-size: 17px; color: #131921; position: relative; padding-bottom: 4px; line-height: 1; }
.fl-amz i { position: absolute; left: 2px; right: 6px; bottom: 0; height: 5px; border-bottom: 2.5px solid #ff9900; border-radius: 0 0 40px 40px / 0 0 10px 10px; }
.fl-etlogo { height: 20px; width: auto; }
.fl-tglogo { width: 24px; height: 24px; border-radius: 50%; background: var(--tg); color: #fff; font-size: 10px; font-weight: 900; display: inline-grid; place-items: center; }

/* Cockpit-Zähler */
.fl__counters { display: grid; gap: 6px; }
.fl__cnt { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--ink-100); background: #fff; font-size: 13px; font-weight: 600; color: var(--ink-700); transition: all .35s; }
.fl__cnt b { font-size: 14px; font-weight: 900; background: var(--ink-100); color: var(--ink-900); border-radius: 999px; padding: 2px 10px; min-width: 32px; text-align: center; white-space: nowrap; }
.fl__cnt.is-hot { border-color: #fcd34d; background: #fffbeb; } .fl__cnt.is-hot b { background: #f59e0b; color: #fff; animation: fl-pop .6s var(--ease); }
.fl__cnt.is-done { border-color: #86efac; background: #f0fdf4; color: #166534; } .fl__cnt.is-done b { background: var(--green-600); color: #fff; }
@keyframes fl-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }

/* Karten (Bestellung, Frage, Amazon-Artikel) */
.fl__card { border: 1px solid var(--ink-100); border-radius: 12px; padding: 10px 12px; background: #fff; transition: all .35s; margin-top: 8px; }
.fl__card:first-child { margin-top: 0; }
.fl__card__t { font-weight: 800; font-size: 14px; } .fl__card__s { font-size: 12px; color: var(--ink-500); margin-top: 2px; } .fl__card__p { font-weight: 900; font-size: 16px; margin-top: 6px; }
.fl__card.is-hot { border-color: #fcd34d; background: #fffbeb; box-shadow: 0 0 0 4px rgba(245,158,11,.18); }
.fl__card.is-done { border-color: #86efac; background: #f0fdf4; }
.fl__card--amz .fl__card__p { color: #b12704; }
.fl-prime { color: #00a8e1; font-weight: 800; }
.fl__buy { margin-top: 8px; display: inline-block; background: #ffd814; border: 1px solid #fcd200; color: #0f1111; font-weight: 800; font-size: 13px; padding: 7px 14px; border-radius: 20px; transition: all .35s; }
.fl__buy.is-bought { background: #dcfce7; border-color: #86efac; color: #166534; }
.fl__idle { font-size: 12px; color: var(--ink-500); padding: 20px 6px; text-align: center; }
.fl__qr { width: 64px; height: 64px; margin: 8px 0; border-radius: 6px; background: repeating-conic-gradient(#0f172a 0 25%, #fff 0 50%) 0 0 / 12px 12px; opacity: .15; transition: opacity .4s; border: 1px solid var(--ink-100); }
.fl__qr.is-on { opacity: 1; }
.fl__typing { display: none; gap: 4px; margin-top: 8px; } .fl__typing.is-on { display: inline-flex; }
.fl__typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-500); animation: et-typing 1.2s infinite; } .fl__typing i:nth-child(2){animation-delay:.2s} .fl__typing i:nth-child(3){animation-delay:.4s}

/* Chat im Telegram-Knoten */
.fl__chat { display: flex; flex-direction: column; gap: 6px; }
.fl__msg { max-width: 92%; font-size: 12.5px; line-height: 1.35; padding: 7px 10px; border-radius: 12px; background: #eef2f7; color: var(--ink-900); align-self: flex-start; border-bottom-left-radius: 4px; opacity: .18; transform: translateY(4px); transition: opacity .35s, transform .35s; }
.fl__msg.me { align-self: flex-end; background: var(--tg); color: #fff; border-bottom-left-radius: 12px; border-bottom-right-radius: 4px; font-weight: 700; }
.fl__msg.is-on { opacity: 1; transform: none; }
.fl__node--tg .fl__msg { opacity: .18; } .fl__node--tg .fl__msg.is-on { opacity: 1; }

/* Pfeile */
.fl__gap { position: relative; height: 90px; display: flex; align-items: center; justify-content: center; }
.fl__gap svg { width: 100%; height: 40px; overflow: visible; }
.fl__line { stroke: var(--ink-300); stroke-width: 7; fill: none; stroke-linecap: round; }
.fl__dash { stroke: var(--blue-500); stroke-width: 7; fill: none; stroke-linecap: round; stroke-dasharray: 14 14; opacity: 0; transition: opacity .3s; }
.fl__gap.is-on .fl__dash { opacity: 1; }
.fl__gap.dir-r .fl__dash { animation: fl-run-r 1s linear infinite; } .fl__gap.dir-l .fl__dash { animation: fl-run-l 1s linear infinite; }
@keyframes fl-run-r { to { stroke-dashoffset: -28; } } @keyframes fl-run-l { to { stroke-dashoffset: 28; } }
.fl__head { position: absolute; top: 50%; transform: translateY(-50%); font-size: 30px; color: var(--ink-300); line-height: 1; transition: color .3s; }
.fl__head--r { right: -10px; } .fl__head--l { left: -10px; }
.fl__gap.is-on.dir-r .fl__head--r, .fl__gap.is-on.dir-l .fl__head--l { color: var(--blue-500); }
.fl__lbl { position: absolute; top: 2px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 800; color: var(--blue-600); white-space: nowrap; background: #fff; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--blue-100); opacity: 0; transition: opacity .3s; }
.fl__gap.is-on .fl__lbl:not(:empty) { opacity: 1; }

/* Wandernder Chip */
.fl__chip { position: absolute; left: 0; top: 0; z-index: 6; transform: translate(-50%, -50%); background: var(--ink-900); color: #fff; font-weight: 800; font-size: 13px; padding: 9px 14px; border-radius: 999px; box-shadow: 0 14px 30px -10px rgba(0,0,0,.6); white-space: nowrap; opacity: 0; pointer-events: none; transition: left 1.05s cubic-bezier(.4,0,.2,1), top 1.05s cubic-bezier(.4,0,.2,1), opacity .25s; }
.fl__chip.is-on { opacity: 1; }
.fl__chip::before { content: "●"; color: var(--blue-400); margin-right: 8px; font-size: 10px; vertical-align: middle; }

/* Erklärsatz */
.fl__cap { margin-top: 18px; min-height: 52px; text-align: center; }
.fl__cap span { display: inline-block; font-size: clamp(16px, 1.7vw, 20px); font-weight: 800; color: var(--ink-900); background: #fff; border: 1px solid var(--ink-100); border-radius: 14px; padding: 12px 18px; box-shadow: var(--shadow-sm); opacity: 0; transform: translateY(8px); }
.fl__cap span.is-in { animation: et-rise .45s var(--ease) forwards; }
.fl__cap span:empty { display: none; }
.et-section--navy .fl__cap span, .et-hero .fl__cap span { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.14); color: #fff; }

/* dunkle Sektionen */
.et-hero .fl__node, .et-section--navy .fl__node { box-shadow: 0 30px 60px -24px rgba(0,0,0,.6); }
.et-hero .fl__line, .et-section--navy .fl__line { stroke: rgba(255,255,255,.28); }
.et-hero .fl__head, .et-section--navy .fl__head { color: rgba(255,255,255,.35); }

/* Mobil: untereinander, Pfeile senkrecht */
@media (max-width: 860px) {
  .fl__row { grid-template-columns: 1fr; }
  .fl__gap { height: 54px; }
  .fl__gap svg { width: 40px; height: 54px; transform: rotate(90deg); }
  .fl__head--r { right: auto; left: 50%; top: auto; bottom: -6px; transform: translateX(-50%) rotate(90deg); }
  .fl__head--l { left: 50%; top: -6px; transform: translateX(-50%) rotate(90deg); }
  .fl__lbl { top: 50%; left: auto; right: 6px; transform: translateY(-50%); }
  .fl__node--tg { max-width: none; }
  .fl__chip { font-size: 12px; }
}