/* ============================================================
   eluent. — Produktseite /eluent.php
   Eigene Bühne innerhalb der ChemServices-Site: innerhalb dieser
   Sektionen gelten die Eluent-Marken-Tokens (Kolben/Reagenz/Amber,
   Archivo + IBM Plex), nicht Navy/Teal. Quelle der Tokens:
   webapptrading design/brand/eluent/README.md.
   Formen bewusst KANTIG (keine Radien) — das runde Formenvokabular
   gehört zur restlichen Site, die Eluent-Marke arbeitet mit Rändern.
   Amber-Disziplin: Amber nur für Handlung (Button) und den Markenpunkt.
   ============================================================ */
.el{
  --el-kolben:#0E2B36;      /* dunkle Bühne */
  --el-reagenz:#1D5A6C;     /* Primärfarbe */
  --el-amber:#C98F2A;       /* Aktion, Markenpunkt */
  --el-teal:#4FA5B5;        /* Auszeichnung auf dunklem Grund */
  --el-gruen:#4FAE7E;       /* Erfolg, sparsam */
  --el-papier:#F6F5F1;      /* helle Arbeitsfläche */
  --el-linie:#E3E0D8;
  --el-kohle:#14191F;       /* Text */
  --el-graphit:#55606B;     /* Nebentext */
  --el-hell:#DDE8EC;        /* Fliesstext auf dunklem Grund */
  --el-nebel:#7FA8B5;       /* Mono-Beschriftung auf dunklem Grund */
  font-family:'IBM Plex Sans','Inter',system-ui,sans-serif;
}
.el .mono{font-family:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace}

/* ---------- Dunkle Bühne (Hero) ---------- */
.el-stage{position:relative;overflow:hidden;background:var(--el-kolben);color:var(--el-papier);padding:72px 0 150px}
.el-stage .wrap{position:relative;z-index:2}
.el-kicker{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.16em;color:var(--el-nebel)}
.el-wm{display:flex;align-items:center;gap:20px;margin-top:26px}
.el-wm svg{flex-shrink:0;width:clamp(44px,6vw,64px);height:auto}
.el-wm h1{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(54px,8.5vw,88px);line-height:1;letter-spacing:-.025em;color:var(--el-papier)}
.el-wm h1 .dot{color:var(--el-amber)}
.el-tagline{margin-top:18px;font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:clamp(22px,3.4vw,32px);color:var(--el-amber)}
.el-pos{margin-top:22px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(19px,2.6vw,25px);letter-spacing:-.01em;color:var(--el-papier);max-width:24em}
.el-intro{margin-top:14px;font-size:16.5px;line-height:1.7;color:var(--el-hell);max-width:620px}
/* Die grosse Chromatogramm-Kurve am Bühnenboden — Markenzeichen, kein Dekor. */
.el-stage-curve{position:absolute;left:0;right:0;bottom:34px;width:100%;height:110px;display:block;z-index:1}
/* Absenderzeile: die Firma erscheint genau EINMAL auf der Eluent-Bühne —
   als Mono-Zeile unten, nie als zweite Logomarke oder Eyebrow (Markenregel). */
.el-sender{position:absolute;left:0;right:0;bottom:0;z-index:2;background:rgba(14,43,54,.6)}
.el-sender .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(246,245,241,.18);padding-top:9px;padding-bottom:9px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;color:var(--el-nebel);text-transform:uppercase}

/* ---------- Helle Arbeitsfläche ---------- */
.el-light{background:var(--el-papier);color:var(--el-kohle);padding:72px 0;border-bottom:1px solid var(--el-linie)}
.el-light h2{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(26px,3.4vw,38px);line-height:1.15;letter-spacing:-.015em;color:var(--el-kohle);max-width:22em}
.el-light .el-sub{margin-top:14px;font-size:16px;line-height:1.7;color:var(--el-graphit);max-width:640px}
.el-en{color:var(--el-reagenz)}

/* Stationsband: neun Stationen, ein Fluss. Auf schmalen Schirmen scrollt das
   Band in seinem eigenen Container, statt die Beschriftung zu quetschen. */
.el-flowband{margin-top:38px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.el-flowband svg{display:block;min-width:760px;width:100%;height:auto}
.el-flowcaption{margin-top:10px;font-size:13.5px;color:var(--el-graphit)}

/* Vier Dimensionen als kantige Karten */
.el-dims{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:38px}
.el-dim{background:#fff;border:1px solid var(--el-linie);border-top:3px solid var(--el-reagenz);padding:20px 20px 22px}
.el-dim .tag{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;letter-spacing:.14em;color:var(--el-reagenz)}
.el-dim b{display:block;margin-top:10px;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:16.5px;color:var(--el-kohle)}
.el-dim p{margin-top:6px;font-size:14px;line-height:1.6;color:var(--el-graphit)}
.el-dim.flow{border-top-color:var(--el-amber)}
.el-dim.flow .tag{color:var(--el-amber)}
.el-dim.snap{border-top-color:var(--el-gruen)}
.el-dim.snap .tag{color:var(--el-gruen)}
.el-dim.methods{border-top-color:var(--el-kohle)}
.el-dim.methods .tag{color:var(--el-kohle)}

/* ---------- Dunkles Band: Herkunft ---------- */
.el-built{background:var(--el-kolben);color:var(--el-papier);padding:72px 0}
.el-built .gross{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(28px,4.4vw,44px);line-height:1.15;letter-spacing:-.02em}
.el-built .gross .a{color:var(--el-amber)}
.el-built p{margin-top:18px;font-size:16px;line-height:1.7;color:var(--el-hell);max-width:680px}

/* ---------- Ausblick + Kontakt ---------- */
.el-next{background:#fff;color:var(--el-kohle);padding:72px 0;border-bottom:1px solid var(--el-linie)}
.el-next .el-reveal{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;color:var(--el-graphit);text-transform:uppercase;margin-bottom:18px}
.el-next h2{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(24px,3vw,34px);line-height:1.2;letter-spacing:-.015em}
.el-next p{margin-top:14px;font-size:16px;line-height:1.7;color:var(--el-graphit);max-width:640px}
.el-cta{margin-top:30px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
/* Amber = Handlung. Bewusst kantig, im Kontrast zu den runden Site-Buttons. */
.el-btn{display:inline-block;background:var(--el-amber);color:#fff;font-family:'Archivo',system-ui,sans-serif;font-weight:600;font-size:15px;padding:13px 26px;text-decoration:none;border:none}
.el-btn:hover{background:#B37D21}
.el-btn:focus-visible{outline:2px solid var(--el-reagenz);outline-offset:2px}
.el-backlink{font-size:14.5px;font-weight:600;color:var(--el-reagenz);text-decoration:none}
.el-backlink:hover{text-decoration:underline}

@media(max-width:980px){.el-dims{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){
  .el-dims{grid-template-columns:1fr}
  .el-stage{padding:56px 0 140px}
}