/* achtLabel Druck-Animation (Hero)
   MES/ERP -> achtLabel -> Drucker. Alles gekapselt unter .al-anim.
   Farben sind an die Landingpage-Variablen (styles.css) gekoppelt,
   damit Dark- und Light-Theme automatisch mitziehen. */

.al-anim {
  --al-card: var(--surface);
  --al-card-alt: var(--bg-2);
  --al-ink: var(--text);
  --al-muted: var(--muted);
  --al-rule: var(--line);
  --al-flow: var(--accent);         /* Datenfluss / Akzent */
  --al-on-flow: var(--ink);         /* Text auf dem Datenpaket */
  --al-ok-solid: #34c27a;
  --al-signal: #f5b400;             /* Drucker aktiv */
  --al-paper: #ffffff;              /* Etiketten bleiben "echtes" Papier */
  --al-thermal: #15181b;
  --al-code-k: #c4a6ff;
  --al-code-s: #7fd8b4;
  --al-code-n: #f0b067;
  --al-shadow: rgba(0, 0, 0, .55);
  --al-font: var(--font);
  --al-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --al-label-font: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: light) {
  .al-anim {
    --al-ok-solid: #129761;
    --al-code-k: #7a4bd1;
    --al-code-s: #0f7a5a;
    --al-code-n: #b25b00;
    --al-shadow: rgba(24, 36, 47, .35);
  }
}

/* ---- Rahmen ---- */
.al-anim { position: relative; width: 100%; font-family: var(--al-font); color: var(--al-ink); line-height: normal; -webkit-font-smoothing: antialiased; overflow: visible; }
.al-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.al-stage * { box-sizing: border-box; }

/* ---- Verbindungen ---- */
.al-wires { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.al-wire { fill: none; stroke: var(--al-rule); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; }
.al-wire-flow { fill: none; stroke: var(--al-flow); stroke-width: 2.5; stroke-linecap: round; opacity: 0; }
.al-port { fill: var(--al-card); stroke: var(--al-rule); stroke-width: 2; transition: stroke .3s; }
.al-port.hit { stroke: var(--al-flow); }

/* ---- Karten ---- */
.al-node { position: absolute; background: var(--al-card); border: 1px solid var(--al-rule); display: flex; flex-direction: column; transition: box-shadow .5s ease; }
.al-node.recv { box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-flow) 28%, transparent); }
.al-head { display: flex; align-items: center; gap: 10px; }
.al-title { font-weight: 600; font-size: 14px; line-height: 18px; }
.al-sub { font-size: 12px; line-height: 16px; color: var(--al-muted); }

/* MES: externes System, bewusst zurückhaltend */
.al-mes { border-radius: 8px; background: var(--al-card-alt); padding: 14px 16px; }
.al-mes .al-icon { width: 30px; height: 30px; border-radius: 6px; background: var(--al-rule); color: var(--al-ink); display: grid; place-items: center; flex: none; }
.al-code { margin: 14px 0 0; font-family: var(--al-mono); font-size: 11.5px; line-height: 17px; color: var(--al-ink); flex: 1; }
.al-code .ln { white-space: pre; opacity: .12; transition: opacity .18s; }
.al-code .ln.on { opacity: 1; }
.al-code .m { color: var(--al-flow); font-weight: 500; }
.al-code .k { color: var(--al-code-k); }
.al-code .s { color: var(--al-code-s); }
.al-code .n { color: var(--al-code-n); }

/* Statuszeile */
.al-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; line-height: 16px; color: var(--al-muted); }
.al-status i { width: 8px; height: 8px; border-radius: 50%; background: var(--al-rule); flex: none; }
.al-status[data-s="busy"] i { background: var(--al-flow); animation: al-pulse 1s ease-in-out infinite; }
.al-status[data-s="busy"] { color: var(--al-ink); }
.al-status[data-s="ok"] i { background: var(--al-ok-solid); }
.al-status[data-s="ok"] { color: var(--al-ink); }
@keyframes al-pulse { 50% { opacity: .35; } }

/* achtLabel: das Produkt, klar hervorgehoben */
.al-app { border-radius: 14px; padding: 14px; border-color: color-mix(in srgb, var(--al-flow) 45%, var(--al-rule)); box-shadow: 0 14px 34px -18px var(--al-shadow); }
.al-app .al-wordmark { font-weight: 700; font-size: 16px; letter-spacing: -.01em; }
.al-app .al-online { margin-left: auto; }
.al-job { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 10px; font-size: 12px; color: var(--al-muted); }
.al-preview { height: 148px; border-radius: 8px; background:
  repeating-linear-gradient(0deg, transparent 0 11px, color-mix(in srgb, var(--al-rule) 45%, transparent) 11px 12px),
  repeating-linear-gradient(90deg, transparent 0 11px, color-mix(in srgb, var(--al-rule) 45%, transparent) 11px 12px),
  var(--al-card-alt);
  display: grid; place-items: center; position: relative; overflow: hidden; }
.al-preview .al-lbl { position: relative; transform: scale(1.3333); box-shadow: 0 1px 0 var(--al-rule), 0 4px 12px -6px var(--al-shadow); }
.al-progress { margin-top: 12px; }
.al-progress .t { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--al-muted); }
.al-progress .t b { color: var(--al-ink); font-weight: 500; }
.al-bar { height: 4px; border-radius: 2px; background: var(--al-card-alt); margin-top: 6px; overflow: hidden; border: 1px solid var(--al-rule); }
.al-bar span { display: block; height: 100%; width: 0; background: var(--al-flow); transition: width .35s ease; }
.al-bar.done span { background: var(--al-ok-solid); }
.al-foot { margin-top: auto; font-size: 11px; color: var(--al-muted); display: flex; justify-content: space-between; }

/* ---- Etikett (Druck & Vorschau) ---- */
.al-lbl { width: 150px; height: 96px; background: var(--al-paper); color: var(--al-thermal); border-radius: 3px; padding: 7px 9px 6px; font-family: var(--al-label-font); display: flex; flex-direction: column; border: 1px solid #e3e6e9; }
.al-lbl .r1 { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.al-lbl [data-f="name"] { font-weight: 700; font-size: 12px; line-height: 14px; white-space: nowrap; }
.al-lbl [data-f="var"] { font-weight: 600; font-size: 7.5px; line-height: 10px; border: 1px solid currentColor; border-radius: 2px; padding: 0 3px; }
.al-lbl .r2 { display: flex; justify-content: space-between; font-size: 8px; line-height: 11px; margin-top: 1px; font-weight: 500; }
.al-lbl .r3 { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4px; }
.al-lbl .ids { font-size: 8.5px; line-height: 11.5px; font-weight: 500; }
.al-lbl .ids b { display: inline-block; width: 20px; font-weight: 700; }
.al-lbl [data-f="kg"] { font-weight: 700; font-size: 15px; line-height: 16px; letter-spacing: -.01em; }
.al-lbl [data-f="bc"] { height: 17px; margin-top: auto; display: block; }
.al-lbl [data-f="bc"] svg { display: block; width: 100%; height: 100%; fill: var(--al-thermal); }
/* Platzhalter in der Vorlage */
.al-lbl .ph { color: transparent; position: relative; border-radius: 2px; background: color-mix(in srgb, var(--al-flow) 14%, transparent); outline: 1px dashed color-mix(in srgb, var(--al-flow) 70%, transparent); outline-offset: -1px; border-color: transparent; }
.al-lbl .ph::after { content: attr(data-ph); position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in srgb, var(--al-flow) 55%, #3a4650); font-family: var(--al-mono); font-size: 6px; font-weight: 400; letter-spacing: 0; }
.al-lbl [data-f="bc"].ph { border-radius: 2px; }
.al-lbl .flash { animation: al-flash .6s ease-out; }
@keyframes al-flash { 0% { background: color-mix(in srgb, var(--al-flow) 40%, transparent); } 100% { background: transparent; } }

/* ---- Gedruckte Etiketten ---- */
.al-labels { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.al-labels .al-lbl { position: absolute; left: 0; top: 0; will-change: transform; box-shadow: 0 1px 0 rgba(24, 36, 47, .08), 0 6px 14px -8px var(--al-shadow); }

/* ---- Drucker ---- */
.al-printer { position: absolute; z-index: 2; }
.al-printer .lid { height: 30px; border-radius: 16px 16px 4px 4px; background: linear-gradient(#cfd6dc, #bfc7ce); position: relative; border: 1px solid #aab3bb; border-bottom: none; }
.al-printer .lid::after { content: ""; position: absolute; left: 50%; top: 9px; width: 56px; height: 5px; margin-left: -28px; border-radius: 3px; background: #a9b2ba; }
.al-printer .front { height: 90px; background: linear-gradient(#e7ebee, #d9dfe4); border: 1px solid #aab3bb; border-top: 1px solid #b6bec5; border-bottom: none; display: flex; align-items: center; padding: 0 18px; gap: 14px; }
.al-printer .screen { width: 92px; height: 34px; border-radius: 4px; background: #1c2a33; box-shadow: inset 0 0 0 2px #0f181e; display: flex; align-items: center; padding: 0 9px; font-family: var(--al-mono); font-size: 11px; color: #9ef0c4; white-space: nowrap; overflow: hidden; }
.al-printer .keys { display: flex; gap: 6px; }
.al-printer .keys i { width: 14px; height: 14px; border-radius: 50%; background: #c3cad0; box-shadow: inset 0 -2px 0 #a8b0b7; }
.al-printer .led { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--al-ok-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-ok-solid) 20%, transparent); }
.al-printer .led.run { background: var(--al-signal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--al-signal) 30%, transparent), 0 0 10px var(--al-signal); animation: al-pulse .45s steps(2) infinite; }
.al-printer .mouth { height: 10px; background: #d2d8dd; border: 1px solid #aab3bb; border-top: none; border-radius: 0 0 6px 6px; position: relative; }
.al-printer .mouth::before { content: ""; position: absolute; left: 36px; right: 36px; top: 1px; height: 5px; border-radius: 2px; background: #2a3238; }
.al-printer .foot { position: absolute; bottom: -6px; width: 28px; height: 6px; border-radius: 0 0 3px 3px; background: #9aa3ab; }
.al-printer .foot.l { left: 16px; } .al-printer .foot.r { right: 16px; }

/* ---- Datenpaket ---- */
.al-packet { position: absolute; left: 0; top: 0; z-index: 5; height: 24px; padding: 0 10px 0 8px; border-radius: 12px; background: var(--al-flow); color: var(--al-on-flow); font-size: 11.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; white-space: nowrap; opacity: 0; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--al-flow) 70%, transparent); will-change: transform; }
.al-packet svg { flex: none; }

@media (prefers-reduced-motion: reduce) {
  .al-status[data-s="busy"] i, .al-printer .led.run { animation: none; }
}