/* ============================================================================
   SH_AUTO_V1 — „KI-Automatisierung" Sektion (#automation). Das eigentliche
   Herzstück: nicht nur Hosting, sondern der vollautomatische Ablauf im Betrieb.
   Geführte Pipeline: 8 Stationen, wandernder Puls, aktive Station leuchtet,
   erledigte bekommen einen Haken, Caption erklärt den aktiven Schritt.
   Reine transform/opacity-Animation (GPU) + JS-Sequencer (pausiert offscreen).
   ========================================================================== */

.auto-sec{position:relative}
.auto-sec .sec-head{max-width:760px}
.auto-lead{color:var(--soft);font-size:17.5px;margin-top:16px;max-width:680px}
.auto-lead .sh{color:var(--ion)}

/* ---- Beide Beispiele stehen SEPARAT & dauerhaft sichtbar (keine Tabs) ---- */
.auto-ex-head{display:flex;align-items:baseline;gap:12px;margin-top:30px;margin-bottom:2px}
.auto-ex-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-t);white-space:nowrap}
.auto-ex-title{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--white);letter-spacing:-.01em}
/* Das zweite Beispiel (Kopf direkt nach einem Flow) klar abgetrennt */
.auto-flow + .auto-ex-head{margin-top:50px;padding-top:38px;border-top:1px solid var(--line)}
.auto-flow{margin-top:18px;display:block}

/* ---- Rail (Stationen-Reihe) ---- */
.auto-rail{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:6px;
  padding:8px 0 4px}
/* durchgehende Grundlinie hinter den Stationen */
.auto-rail::before{content:"";position:absolute;left:0;right:0;top:var(--auto-line-top,52px);height:2px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--line-strong) 8%,var(--line-strong) 92%,transparent);z-index:0}
/* mitwandernder Fortschritts-Fill */
.auto-fill{position:absolute;left:0;top:var(--auto-line-top,52px);height:2px;border-radius:2px;width:0;z-index:1;
  background:linear-gradient(90deg,var(--blue),var(--ion),var(--olive-t));
  box-shadow:0 0 12px rgba(169,219,245,.55);transition:width .7s var(--ease)}
/* wandernder Puls */
.auto-pulse{position:absolute;top:var(--auto-line-top,52px);left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;z-index:3;
  background:var(--ion);box-shadow:0 0 16px 3px rgba(169,219,245,.9);transition:transform .7s var(--ease);pointer-events:none}
.auto-pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ion);opacity:.5;
  animation:autoPing 1.6s var(--ease) infinite}
@keyframes autoPing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.2);opacity:0}}

/* ---- Station ---- */
.auto-node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px;
  background:none;border:0;cursor:pointer;padding:0 2px;font:inherit;color:inherit;text-align:center}
.auto-num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);transition:color .3s}
.auto-ic{position:relative;width:56px;height:56px;border-radius:15px;display:grid;place-items:center;
  background:var(--panel);border:1px solid var(--line);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background .35s}
.auto-ic svg{width:26px;height:26px;stroke:var(--soft);transition:stroke .35s}
.auto-ic .auto-check{position:absolute;right:-6px;top:-6px;width:19px;height:19px;border-radius:50%;
  background:var(--olive-t);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s}
.auto-ic .auto-check svg{width:11px;height:11px;stroke:#12171C;stroke-width:3}
.auto-t{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--text);line-height:1.2;letter-spacing:-.01em}
/* Beschreibung im DOM (SEO/Barrierefrei), im Rail visuell versteckt → in Caption gezeigt */
.auto-d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Zustände */
.auto-node.done .auto-num{color:var(--olive-t)}
.auto-node.done .auto-ic{border-color:rgba(168,184,106,.4)}
.auto-node.done .auto-ic svg{stroke:var(--olive-t)}
.auto-node.done .auto-check{opacity:1;transform:scale(1)}
.auto-node.active .auto-num{color:var(--ion)}
.auto-node.active .auto-ic{transform:translateY(-4px) scale(1.08);border-color:var(--ion);background:var(--raised);
  box-shadow:0 0 0 1px rgba(169,219,245,.4),0 14px 34px -14px rgba(169,219,245,.6)}
.auto-node.active .auto-ic svg{stroke:var(--ion)}
.auto-node.active .auto-t{color:var(--white)}
.auto-node:hover .auto-ic{border-color:var(--ion)}

/* ---- Caption (aktiver Schritt ausführlich) ---- */
.auto-cap{margin-top:30px;min-height:96px;border:1px solid var(--line);border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--panel2));padding:22px 26px;position:relative;overflow:hidden}
.auto-cap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--ion),var(--olive-t))}
.auto-cap-head{display:flex;align-items:baseline;gap:14px}
.auto-cap-num{font-family:var(--mono);font-size:13px;color:var(--ion);letter-spacing:.1em}
.auto-cap-t{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--white);letter-spacing:-.01em}
.auto-cap-d{color:var(--soft);font-size:16px;margin-top:8px;max-width:760px}
.auto-cap-in{animation:autoCap .5s var(--ease)}
@keyframes autoCap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- Abschluss-Zeile ---- */
.auto-foot{margin-top:26px;display:flex;align-items:flex-start;gap:13px;color:var(--text);font-size:16.5px;max-width:820px}
.auto-foot .auto-foot-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  background:rgba(169,219,245,.12);color:var(--ion);margin-top:1px}
.auto-foot b{color:var(--white)}

/* ---- Mobil: vertikale Timeline ---- */
@media (max-width:820px){
  .auto-rail{grid-template-columns:1fr;gap:0;padding:0}
  .auto-rail::before{left:27px;right:auto;top:8px;bottom:8px;width:2px;height:auto}
  .auto-fill{left:27px;top:8px;width:2px !important;height:0;
    background:linear-gradient(180deg,var(--blue),var(--ion),var(--olive-t));transition:height .6s var(--ease)}
  .auto-pulse{display:none}
  .auto-node{flex-direction:row;align-items:center;gap:16px;text-align:left;padding:11px 0}
  .auto-num{order:3;margin-left:auto}
  .auto-ic{width:54px;height:54px;flex:0 0 auto}
  .auto-t{font-size:15px}
  .auto-d{position:static;width:auto;height:auto;clip:auto;white-space:normal;
    display:block;color:var(--soft);font-size:13.5px;margin-top:3px}
  .auto-node .auto-tt{display:flex;flex-direction:column}
  .auto-cap{display:none}
  .auto-node.active .auto-ic{transform:scale(1.06)}
}

@media (prefers-reduced-motion:reduce){
  .auto-pulse,.auto-pulse::after{animation:none;display:none}
  .auto-fill{display:none}
  .auto-node .auto-ic{transform:none !important}
  .auto-cap-in{animation:none}
}

/* ---- Konzept: vier Ebenen statt drei (Automatisierung als Kasten 3) --------
   #concept-Präfix, damit die mobilen Overrides die id-Regel nicht aushebeln. */
#concept .pillars{grid-template-columns:repeat(4,1fr)}
@media (max-width:1080px){#concept .pillars{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){#concept .pillars{grid-template-columns:1fr}}

/* ---- Nutzen-Kacheln unter der Pipeline: der Gewinn in Klartext ------------- */
.auto-benefits{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.auto-ben{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 18px 20px;
  position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s}
.auto-ben:hover{transform:translateY(-4px);border-color:rgba(169,219,245,.35)}
.auto-ben .abi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  background:rgba(169,219,245,.1);color:var(--ion);margin-bottom:13px}
.auto-ben .abi svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.auto-ben h4{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--white);letter-spacing:-.01em}
.auto-ben p{color:var(--soft);font-size:13.5px;margin-top:7px;line-height:1.55}
@media (max-width:900px){.auto-benefits{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.auto-benefits{grid-template-columns:1fr}}