/* orcapilot.de/erp-partner: the page for ERP-Anbieter, linked from the bar of every page. Bar, hero, sections, the dive, the use case cards, the closing card
   and the footer come from /styles.css (body.home: the ice world above, the deep below);
   this file holds what only this page has. Motion only discloses: a Vorgang running through
   the layer, a line filling along the steps. */

/* ---- 2 · the market's answer: a dark panel on the ice, the one contrast of the surface ---- */
.trend {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: 1.2rem 4rem;
  align-items: center;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding: clamp(28px, 4.4vw, 52px) clamp(24px, 4.4vw, 56px);
  overflow: hidden;
  border-radius: 20px;
  background: #0B2738;
  color: #ffffff;
  box-shadow: 0 18px 40px rgba(6, 42, 63, 0.18);
}
.trend::before { /* the hero's tiles, fading in from the right */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(165, 216, 230, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(165, 216, 230, 0.07) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000);
  mask-image: linear-gradient(90deg, transparent 30%, #000);
}
.trend::after { /* water light from below right */
  content: '';
  position: absolute;
  right: -10%;
  bottom: -60%;
  z-index: -1;
  width: 70%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(165, 216, 230, 0.2), rgba(165, 216, 230, 0));
}
.trend-titel { margin: 0; font-size: clamp(1.5rem, 0.9rem + 1.6vw, 2.05rem); font-weight: 600; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.trend-ton {
  background: linear-gradient(90deg, #A5D8E6, #6FB9D3);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--accent);
}
.trend-text { margin: 0; max-width: 30rem; font-size: 1.02rem; line-height: 1.65; color: rgba(255, 255, 255, 0.72); }
/* Two lines, broken after "ERP-Anbieter": the first line is a block of its own, and beside the
   text the headline gets the room the second line needs; narrower it stands above the text */
.trend-zeile { display: block; }
@media (min-width: 1040px) { .trend { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); } }

/* ---- 3 · the agent layer: our dark bar over the customer's systems ---- */
.schicht-bar {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 24px;
  padding: 16px 20px;
  border-radius: 16px;
  background: #0B2738;
  box-shadow: 0 10px 28px rgba(6, 42, 63, 0.18);
  color: #ffffff;
}
.schicht-marke { display: flex; align-items: center; gap: 14px; }
/* On the dark bar the badge turns light, so the orca stands out instead of sinking in */
.section.light .schicht .agent { width: 46px; height: 46px; background: var(--agent); border-color: var(--agent); color: #0B2738; box-shadow: 0 0 0 5px rgba(165, 216, 230, 0.12); }
.schicht .agent svg { width: 28px; height: 28px; }
.schicht-name { display: flex; flex-direction: column; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1.25; }
.schicht-name span { font-size: 0.8rem; font-weight: 400; letter-spacing: 0; color: var(--text-muted); }
.schicht-schritte { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.schicht-chip { position: relative; padding: 6px 14px; border-radius: 999px; font-size: 0.82rem; font-weight: 500; white-space: nowrap; }
.schicht-chip--agent { background: rgba(165, 216, 230, 0.16); color: var(--agent); }
.schicht-chip--mensch { background: rgba(252, 97, 45, 0.14); color: #FFB59C; }
.schicht-chip::after { /* lights up while it is this step's turn */
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1.5px currentColor, 0 0 22px currentColor;
  opacity: 0;
}
.schicht-pfeil { width: 22px; height: 12px; fill: none; stroke: rgba(255, 255, 255, 0.45); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* The systems below, each tied to the bar by a hairline that rises from its middle */
.schicht-systeme { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.schicht-systeme li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 20px 12px 18px;
  border: 1px solid var(--ink-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  text-align: center;
}
.schicht-systeme li::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 1px;
  height: 33px;
  background: rgba(11, 39, 56, 0.28);
}
.schicht-systeme li::after { /* the ring while this system takes part */
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 2px #1D7FA8, 0 10px 26px rgba(29, 127, 168, 0.18);
  opacity: 0;
  pointer-events: none;
}
.schicht-systeme svg { width: 26px; height: 26px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.schicht-system { display: flex; flex-direction: column; gap: 2px; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.schicht-system small { font-size: 0.8rem; font-weight: 400; letter-spacing: 0; color: var(--ink-muted); }
/* The ERP, the leading system: the only tile drawn in full ink */
.schicht-systeme .schicht-erp { background: #ffffff; border-color: rgba(6, 42, 63, 0.55); }
.schicht-erp::before { background: rgba(11, 39, 56, 0.6); }
/* The Vorgang's travellers, hidden in the still image: a dot on the hairline, the note in the ERP */
.schicht-puls {
  position: absolute;
  bottom: calc(100% - 4px);
  left: calc(50% - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #1D7FA8;
  box-shadow: 0 0 0 4px rgba(29, 127, 168, 0.2);
  opacity: 0;
}
.schicht-beleg {
  position: absolute;
  top: 9px;
  right: 9px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px 3px 7px;
  border-radius: 999px;
  background: #E2F1F6;
  color: #16688A;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
}
.schicht-systeme .schicht-beleg svg { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; }
@media (max-width: 760px) {
  .schicht-bar { flex-direction: column; align-items: flex-start; }
  .schicht-systeme { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
  .schicht-systeme li::before, .schicht-puls { display: none; } /* two rows: the lines would run through the tiles */
  .schicht-beleg { top: auto; bottom: calc(100% - 10px); right: 50%; transform: translateX(50%); }
}
@media (max-width: 420px) {
  .schicht-system { font-size: 0.86rem; hyphens: auto; overflow-wrap: anywhere; }
  .schicht-schritte { flex-direction: column; align-items: flex-start; }
  .schicht-pfeil { transform: rotate(90deg); margin-left: 14px; }
}

/* ---- 4 · the text on the left, three guiding sentences on the right ---- */
.zusammen { display: grid; gap: 2.4rem 4.5rem; align-items: start; }
.zusammen-text .v2-text { margin-top: 1.4rem; }
@media (min-width: 960px) { .zusammen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.leitsaetze { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--border); }
.leitsaetze li { padding: 1.3rem 0; border-bottom: 1px solid var(--border); }
.leitsaetze h3 { margin: 0; font-size: 1.12rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.leitsaetze p { margin: 0.4rem 0 0; font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); }
/* The third one is the invitation: it says the rest is a conversation, and opens it */
.leitsatz-einladung h3 { color: var(--accent); }
.leitsatz-einladung .btn-cta { margin-top: 1.1rem; }

/* ---- 5 · four advantages in four even tiles, text only ---- */
.vorteile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: clamp(1.8rem, 4vw, 2.6rem); }
.vorteile li {
  padding: 26px 28px 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 2px rgba(0, 0, 0, 0.22);
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.vorteile li:hover { border-color: rgba(165, 216, 230, 0.26); background-color: rgba(255, 255, 255, 0.04); }
.vorteile h3 { margin: 0; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.vorteile p { margin: 0.55rem 0 0; max-width: 32rem; font-size: 0.98rem; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
@media (max-width: 760px) { .vorteile { grid-template-columns: minmax(0, 1fr); gap: 10px; } .vorteile li { padding: 22px 22px 24px; } }

/* ---- 6 · four steps along one line that fills up to the partnership ---- */
.schritte {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem 2.4rem;
  margin: clamp(2rem, 4.5vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
.schritte::before, .schritte::after { /* the line, and its filling in the agent colour */
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(165, 216, 230, 0.16);
}
.schritte::after { height: 2px; top: 4.5px; background: linear-gradient(90deg, rgba(165, 216, 230, 0.5), var(--accent)); transform-origin: left; }
.schritte li { position: relative; padding-top: 2.1rem; }
.schritte li::before { /* where each step sits on the line */
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px #082637;
}
.schritt-ziel::before { box-shadow: 0 0 0 4px #082637, 0 0 0 7px rgba(165, 216, 230, 0.3); }
.schritt-nr { display: block; margin-bottom: 0.7rem; font-size: 1.6rem; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: rgba(165, 216, 230, 0.4); font-variant-numeric: tabular-nums; }
.schritt-ziel .schritt-nr { color: var(--accent); }
.schritte h3 { margin: 0; font-size: 1.06rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.schritte p { margin: 0.5rem 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--text-muted); text-wrap: pretty; }
@media (max-width: 860px) { /* the line runs down beside the steps */
  .schritte { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
  .schritte::before, .schritte::after { top: 6px; bottom: 6px; left: 5px; right: auto; width: 1px; height: auto; }
  .schritte::after { width: 2px; left: 4.5px; background: linear-gradient(180deg, rgba(165, 216, 230, 0.5), var(--accent)); transform-origin: top; }
  .schritte li { padding: 0 0 0 2.2rem; }
  .schritte li::before { top: 0.3rem; }
}

/* ---- 7 · closing: the deep's last step down to the footer; the card as on the use case pages ---- */
.section.e4 { background: linear-gradient(180deg, #03131C, #01090E); } /* after the questions (d4) */
.closing-text { margin: 1.2rem 0 0; max-width: 34rem; font-size: 1.02rem; line-height: 1.65; color: var(--text-muted); }
@media (min-width: 900px) {
  body.erp .closing { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 1000px) {
  body.erp .closing { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: 2.6rem 3.5rem; }
}

/* ---- motion: only position, size and transparency move; nothing under reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  /* The parts follow their section in, once (app.js adds .reveal and .in) */
  .reveal .schicht-systeme li { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .reveal.in .schicht-systeme li { opacity: 1; transform: none; }
  .reveal.in .schicht-systeme li:nth-child(2) { transition-delay: 0.08s; }
  .reveal.in .schicht-systeme li:nth-child(3) { transition-delay: 0.16s; }
  .reveal.in .schicht-systeme li:nth-child(4) { transition-delay: 0.24s; }
  /* §4: the guiding sentences follow one another in */
  .reveal .leitsaetze li { opacity: 0; transform: translateY(10px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
  .reveal.in .leitsaetze li { opacity: 1; transform: none; }
  .reveal.in .leitsaetze li:nth-child(2) { transition-delay: 0.1s; }
  .reveal.in .leitsaetze li:nth-child(3) { transition-delay: 0.2s; }
  /* §5: the tiles follow one another in */
  .reveal .vorteile li { opacity: 0; transform: translateY(12px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out), border-color 0.2s ease, background-color 0.2s ease; }
  .reveal.in .vorteile li { opacity: 1; transform: none; }
  .reveal.in .vorteile li:nth-child(2) { transition-delay: 0.08s, 0.08s, 0s, 0s; }
  .reveal.in .vorteile li:nth-child(3) { transition-delay: 0.16s, 0.16s, 0s, 0s; }
  .reveal.in .vorteile li:nth-child(4) { transition-delay: 0.24s, 0.24s, 0s, 0s; }
  .reveal .trend { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease-out) 0.3s, transform 0.8s var(--ease-out) 0.3s; }
  .reveal.in .trend { opacity: 1; transform: none; }

  /* §3, one Vorgang in 9 s while in view (erp-partner.js sets .laeuft): the e-mail comes in,
     its dot rises to the layer, the agent prepares, the employee releases, a dot comes down
     and the record lands in the ERP */
  .schicht.laeuft .schicht-mail::after { animation: vorgang-mail 9s ease-in-out infinite; }
  .schicht.laeuft .schicht-mail .schicht-puls { animation: vorgang-hoch 9s ease-in-out infinite; }
  .schicht.laeuft .schicht-chip--agent::after { animation: vorgang-agent 9s ease-in-out infinite; }
  .schicht.laeuft .schicht-chip--mensch::after { animation: vorgang-mensch 9s ease-in-out infinite; }
  .schicht.laeuft .schicht-erp .schicht-puls { animation: vorgang-runter 9s ease-in-out infinite; }
  .schicht.laeuft .schicht-erp::after, .schicht.laeuft .schicht-beleg { animation: vorgang-erp 9s ease-in-out infinite; }
  @keyframes vorgang-mail { 0%, 24%, 100% { opacity: 0; } 4%, 18% { opacity: 1; } }
  @keyframes vorgang-hoch {
    0%, 6% { opacity: 0; transform: translateY(0); }
    8% { opacity: 1; transform: translateY(0); }
    19% { opacity: 1; transform: translateY(-29px); }
    21%, 100% { opacity: 0; transform: translateY(-29px); }
  }
  @keyframes vorgang-agent { 0%, 19%, 47%, 100% { opacity: 0; } 23%, 43% { opacity: 1; } }
  @keyframes vorgang-mensch { 0%, 45%, 68%, 100% { opacity: 0; } 49%, 64% { opacity: 1; } }
  @keyframes vorgang-runter {
    0%, 64% { opacity: 0; transform: translateY(-29px); }
    66% { opacity: 1; transform: translateY(-29px); }
    77% { opacity: 1; transform: translateY(0); }
    79%, 100% { opacity: 0; transform: translateY(0); }
  }
  @keyframes vorgang-erp { 0%, 76%, 100% { opacity: 0; } 80%, 94% { opacity: 1; } }

  /* §6: the line fills from the first step to the partnership, each step lights up as it is reached */
  .reveal .schritte::after { transform: scaleX(0); transition: transform 1.6s var(--ease-out) 0.25s; }
  .reveal.in .schritte::after { transform: none; }
  .reveal .schritte li::before { background: #0E3347; transition: background-color 0.4s ease; }
  .reveal.in .schritte li::before { background: var(--accent); }
  .reveal.in .schritte li:nth-child(1)::before { transition-delay: 0.25s; }
  .reveal.in .schritte li:nth-child(2)::before { transition-delay: 0.55s; }
  .reveal.in .schritte li:nth-child(3)::before { transition-delay: 0.85s; }
  .reveal.in .schritte li:nth-child(4)::before { transition-delay: 1.2s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 860px) {
  .reveal .schritte::after { transform: scaleY(0); }
}