/* ============================================================
     PRÄZISIONS-MANUFAKTUR — zwei Scroll-Sektionen
     Sektion 01 · Die Website-Manufaktur (Montagebank + Presse)
     Sektion 02 · Das Automatikwerk   (Zahnrad-Train + Hemmung)
     ============================================================ */
  #ai-uhrwerk{
    --cream:#EEEDE6;
    --cream-2:#F4F3EC;
    --ink:#101218;
    --ink-2:#161B26;
    --blue:#244DF7;
    --blue-l:#4975FF;
    --slate:#6A7789;
    --hair:rgba(16,18,24,.14);
    --hair-soft:rgba(16,18,24,.08);
    --sans:"Liberation Sans","Helvetica Neue",Arial,sans-serif;
    --mono:"Liberation Mono","DejaVu Sans Mono",ui-monospace,Menlo,Consolas,monospace;
    --ease-mech:cubic-bezier(.22,1,.28,1);
  }
  #ai-uhrwerk *{margin:0;padding:0;box-sizing:border-box}
  
  #ai-uhrwerk{
    background:var(--cream);
    color:var(--ink);
    font-family:var(--sans);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  #ai-uhrwerk ::selection{background:var(--blue);color:var(--cream)}

  /* ---------- globaler Fortschritts-Faden ---------- */
  #ai-uhrwerk .gprog{
  position:absolute;
  top:0;
  left:0;
  height:2px;
  width:0%;
  background:var(--blue);
  z-index:60;
  box-shadow:0 0 12px rgba(36,77,247,.5);
}

  /* ---------- Engine-Bühne ---------- */
  
  #ai-uhrwerk.strip{
  position:relative;
  width:100%;
  /* 07.11.2026: 100vh -> 84vh. Der Inhalt (Zahnraeder + Beschriftungen) endet auf
     allen Breiten bei genau 71vh — gemessen. Der frueher hier sitzende fette
     Kennzahlen-Block lag bei 74,5-87,5vh und ist entfernt, dieser Bereich ist also
     frei. 84vh laesst 13vh Luft unter dem Inhalt und die naechste Section lugt
     unten herein. */
  height:84vh;
  overflow:clip;
}
  #ai-uhrwerk .strip-stage{
    position:relative;left:0;width:100%;height:100vh;
    overflow:hidden;will-change:transform;
    background:var(--cream);
  }
  #ai-uhrwerk .strip-stage.dark{background:var(--ink);color:var(--cream)}

  /* ---------- Blueprint-Fläche ---------- */
  #ai-uhrwerk .bp-grid{
    position:absolute;inset:-10% -20%;
    background-image:
      linear-gradient(var(--hair-soft) 1px, transparent 1px),
      linear-gradient(90deg, var(--hair-soft) 1px, transparent 1px),
      linear-gradient(rgba(16,18,24,.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(16,18,24,.05) 1px, transparent 1px);
    background-size:190px 190px,190px 190px,38px 38px,38px 38px;
  }
  #ai-uhrwerk .dark .bp-grid{
    background-image:
      linear-gradient(rgba(73,117,255,.10) 1px, transparent 1px),
      linear-gradient(90deg, rgba(73,117,255,.10) 1px, transparent 1px),
      linear-gradient(rgba(73,117,255,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(73,117,255,.045) 1px, transparent 1px);
  }
  /* Eck-Ticks wie ein Entwurfsblatt */
  #ai-uhrwerk .corner{position:absolute;width:26px;height:26px;pointer-events:none}
  #ai-uhrwerk .corner::before, #ai-uhrwerk .corner::after{content:"";position:absolute;background:var(--hair)}
  #ai-uhrwerk .corner::before{width:100%;height:1px}
  #ai-uhrwerk .corner::after{width:1px;height:100%}
  #ai-uhrwerk .dark .corner::before, #ai-uhrwerk .dark .corner::after{background:rgba(238,237,230,.22)}
  #ai-uhrwerk .corner.tl{top:18px;left:18px}
  #ai-uhrwerk .corner.tr{top:18px;right:18px}#ai-uhrwerk .corner.tr::before{right:0}#ai-uhrwerk .corner.tr::after{right:0}
  #ai-uhrwerk .corner.bl{bottom:18px;left:18px}#ai-uhrwerk .corner.bl::before{bottom:0}
  #ai-uhrwerk .corner.br{bottom:18px;right:18px}#ai-uhrwerk .corner.br::before{bottom:0;right:0}#ai-uhrwerk .corner.br::after{right:0}

  /* .ghostword (grosses Wort "AUTOMATION") und .xhair (3 Pluszeichen) am
     07.11.2026 entfernt — auf Wunsch, die Deko-Layer sind aus dem HTML raus. */

  /* ---------- Kopfleiste der Bühne ---------- */
  #ai-uhrwerk .stage-head{
    position:absolute;top:0;left:0;right:0;height:62px;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 52px;/* 07.11.2026: border-bottom (graue Linie) entfernt */
    font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--slate);
  }
  #ai-uhrwerk .dark .stage-head{border-bottom-color:rgba(238,237,230,.14);color:#8B96A6}
  #ai-uhrwerk .stage-head .hl{color:var(--ink)}
  #ai-uhrwerk .dark .stage-head .hl{color:var(--cream)}
  #ai-uhrwerk .stage-head .sep{opacity:.45;margin:0 .6em}
  #ai-uhrwerk .counter{display:flex;align-items:baseline;gap:.55em;color:var(--blue)}
  #ai-uhrwerk .dark .counter{color:var(--blue-l)}
  #ai-uhrwerk .counter .unit{font-size:10.5px;letter-spacing:.22em;color:var(--slate)}
  #ai-uhrwerk .dark .counter .unit{color:#8B96A6}
  #ai-uhrwerk .counter b{font-weight:700}
  #ai-uhrwerk .counter--lead{margin:26px 0 22px;display:flex;align-items:baseline;gap:.65em;
    padding-top:18px;border-top:1px solid rgba(238,237,230,.12)}

  /* Odometer-Zifferblätter */
  #ai-uhrwerk .od{display:inline-flex;gap:1px;font-family:var(--mono);font-weight:700;
      font-variant-numeric:tabular-nums;font-size:22px;line-height:1}
  #ai-uhrwerk .od .d{width:.66em;height:1em;overflow:hidden;position:relative}
  #ai-uhrwerk .od .reel{position:absolute;top:0;left:0;width:100%;
            transition:transform .5s var(--ease-mech)}
  #ai-uhrwerk .od .reel i{display:block;height:1em;line-height:1em;text-align:center;font-style:normal}

  /* ---------- Copy-Block ---------- */
  #ai-uhrwerk .stage-copy{position:absolute;left:52px;top:100px;z-index:15;max-width:600px}
  #ai-uhrwerk .kicker{
    display:flex;align-items:center;gap:12px;
    font-family:var(--mono);font-size:11px;letter-spacing:.26em;
    text-transform:uppercase;color:var(--blue);margin-bottom:26px;
  }
  #ai-uhrwerk .dark .kicker{color:var(--blue-l)}
  #ai-uhrwerk .kicker::before{content:"";width:34px;height:1px;background:currentColor;opacity:.7}
  #ai-uhrwerk h2{
    font-size:clamp(44px,5.1vw,74px);font-weight:700;line-height:.98;
    letter-spacing:-.035em;
  }
  #ai-uhrwerk h2 .ln{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
  #ai-uhrwerk h2 .ln > span{display:block;transform:translateY(112%);
               transition:transform .95s var(--ease-mech)}
  #ai-uhrwerk .reveal .ln > span{transform:translateY(0)}
  #ai-uhrwerk h2 em{font-style:italic;color:var(--blue)}
  #ai-uhrwerk .dark h2 em{color:var(--blue-l)}
  #ai-uhrwerk .lead{
    margin-top:20px;max-width:430px;font-size:15.5px;line-height:1.6;color:var(--slate);
    opacity:0;transform:translateY(22px);
    transition:opacity .8s ease .25s,transform .8s var(--ease-mech) .25s;
  }
  #ai-uhrwerk .dark .lead{color:#9BA6B4}
  #ai-uhrwerk .reveal .lead{opacity:1;transform:none}
  #ai-uhrwerk .specs{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;
         opacity:0;transform:translateY(18px);
         transition:opacity .8s ease .42s,transform .8s var(--ease-mech) .42s}
  #ai-uhrwerk .reveal .specs{opacity:1;transform:none}
  #ai-uhrwerk .spec{
    font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--slate);border:1px solid var(--hair);border-radius:999px;
    padding:7px 13px;display:flex;align-items:center;gap:7px;
  }
  #ai-uhrwerk .dark .spec{color:#8B96A6;border-color:rgba(238,237,230,.16)}
  #ai-uhrwerk .spec i{width:5px;height:5px;border-radius:50%;background:var(--blue);font-style:normal}
  #ai-uhrwerk .dark .spec i{background:var(--blue-l)}

  /* ---------- Sektion 1 · Montagebank ---------- */
  #ai-uhrwerk .rail-vp{
    position:absolute;left:0;right:0;top:60vh;height:246px;z-index:10;
    overflow:hidden;
  }
  #ai-uhrwerk .rail{
    display:flex;align-items:stretch;gap:42px;
    width:max-content;height:100%;
    padding:0 46vw 0 52px;will-change:transform;
  }
  #ai-uhrwerk .plate{
    position:relative;width:326px;height:246px;flex:0 0 auto;
    background:var(--cream-2);border:1px solid var(--hair);
    padding:20px 22px 16px;display:flex;flex-direction:column;
    transition:transform .45s var(--ease-mech),box-shadow .45s ease,border-color .3s ease;
  }
  #ai-uhrwerk .plate::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--blue);
    transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-mech);
  }
  #ai-uhrwerk .plate.is-stamped{transform:translateY(7px) scale(.985);
    box-shadow:0 18px 34px -22px rgba(16,18,24,.35);border-color:rgba(36,77,247,.5)}
  #ai-uhrwerk .plate.is-stamped::before{transform:scaleX(1)}
  #ai-uhrwerk .plate__top{display:flex;justify-content:space-between;align-items:center;
              font-family:var(--mono);font-size:9px;letter-spacing:.22em;color:var(--slate)}
  #ai-uhrwerk .plate__chip{border:1px solid var(--hair);border-radius:999px;padding:3px 9px;
               transition:color .3s ease,border-color .3s ease}
  #ai-uhrwerk .is-stamped .plate__chip{color:var(--blue);border-color:rgba(36,77,247,.55)}
  #ai-uhrwerk .plate h3{margin-top:16px;font-size:27px;font-weight:700;letter-spacing:-.025em;line-height:1.05}
  #ai-uhrwerk .plate p{margin-top:11px;font-size:13.5px;line-height:1.55;color:var(--slate);flex:1}
  #ai-uhrwerk .plate__spec{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;
               text-transform:uppercase;color:var(--slate);opacity:.85;
               border-top:1px solid var(--hair-soft);padding-top:10px;display:flex;justify-content:space-between}
  #ai-uhrwerk .plate__stamp{
    position:absolute;right:14px;bottom:44px;width:104px;height:104px;
    opacity:0;transform:scale(1.45) rotate(-16deg);transform-origin:center;
    transition:opacity .32s ease,transform .38s cubic-bezier(.2,1.25,.3,1);
    pointer-events:none;
  }
  #ai-uhrwerk .is-stamped .plate__stamp{opacity:.92;transform:scale(1) rotate(-9deg)}

  #ai-uhrwerk .signoff{
    width:392px;background:var(--ink);color:var(--cream);border-color:var(--ink);
    justify-content:center;padding:26px 30px;
  }
  #ai-uhrwerk .signoff::before{background:var(--blue-l)}
  #ai-uhrwerk .signoff .plate__top{color:#8B96A6}
  #ai-uhrwerk .signoff h3{font-size:34px}
  #ai-uhrwerk .signoff p{color:#9BA6B4;max-width:290px}
  #ai-uhrwerk .signoff .plate__spec{color:#8B96A6;border-top-color:rgba(238,237,230,.18)}
  #ai-uhrwerk .signoff .plate__stamp{width:126px;height:126px;right:22px;bottom:26px}

  /* Schiene + Rollen unter der Bank */
  #ai-uhrwerk .rail-bed{position:absolute;left:0;right:0;top:calc(60vh + 246px);height:26px;z-index:9;
            border-top:1px solid var(--hair);will-change:transform}
  #ai-uhrwerk .rail-bed .rollers{
    position:absolute;inset:0;
    background-image:radial-gradient(circle at 13px 13px, var(--hair) 2px, transparent 2.6px);
    background-size:52px 26px;opacity:.9;
  }

  /* ---------- Präzisions-Presse ---------- */
  #ai-uhrwerk .press{
    position:absolute;left:56%;top:25vh;width:212px;height:30vh;z-index:14;
    transform:translateX(-50%);pointer-events:none;
  }
  #ai-uhrwerk .press__tower{
    position:absolute;left:50%;top:0;bottom:44px;width:88px;transform:translateX(-50%);
    background:var(--ink);
  }
  #ai-uhrwerk .press__tower::before{
    content:"";position:absolute;inset:9px 9px auto;height:3px;background:rgba(238,237,230,.3);
  }
  #ai-uhrwerk .press__plate-label{
    position:absolute;left:50%;top:42px;transform:translateX(-50%) rotate(0deg);
    font-family:var(--mono);font-size:8px;letter-spacing:.18em;color:rgba(238,237,230,.75);
    text-transform:uppercase;white-space:nowrap;text-align:center;line-height:1.8;
  }
  #ai-uhrwerk .press__gear{position:absolute;left:50%;top:-26px;width:64px;height:64px;
               transform:translateX(-50%);will-change:transform}
  #ai-uhrwerk .press__rods{position:absolute;left:16px;right:16px;top:96px;bottom:52px;
               display:flex;justify-content:space-between}
  #ai-uhrwerk .press__rods i{width:5px;background:linear-gradient(90deg,#2A3040,#4A5468,#2A3040)}
  #ai-uhrwerk .press__head{
    position:absolute;left:50%;bottom:30px;width:172px;height:30px;
    transform:translateX(-50%);
    background:var(--ink);border-top:2px solid var(--blue);
  }
  #ai-uhrwerk .press__head::after{
    content:"";position:absolute;left:12px;right:12px;bottom:-9px;height:9px;
    background:var(--ink);clip-path:polygon(0 0,100% 0,92% 100%,8% 100%);
  }
  #ai-uhrwerk .press__needle{position:absolute;left:50%;bottom:12px;width:2px;height:16px;
                 transform:translateX(-50%);background:var(--blue)}
  #ai-uhrwerk .press.is-slam .press__head{animation:kw-pressSlam .46s var(--ease-mech)}
  #ai-uhrwerk .press.is-slam .press__needle{animation:kw-needleSnap .46s var(--ease-mech)}
  #ai-uhrwerk .press__impact{
    position:absolute;left:50%;bottom:20px;width:200px;height:200px;
    transform:translate(-50%,50%) scale(.4);opacity:0;
    border:2px solid var(--blue);border-radius:50%;
  }
  #ai-uhrwerk .press.is-slam .press__impact{animation:kw-impactRing .55s ease-out}
  #ai-uhrwerk .press__base{
    position:absolute;left:50%;bottom:0;width:212px;height:26px;transform:translateX(-50%);
    border:1px solid var(--hair);background:var(--cream-2);
    display:flex;align-items:center;justify-content:center;
    font-family:var(--mono);font-size:8px;letter-spacing:.22em;color:var(--slate);
    text-transform:uppercase;
  }
  #ai-uhrwerk .press__readout{
    position:absolute;left:50%;top:calc(30vh + 16px);transform:translateX(-50%);
    font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;color:var(--slate);
    text-transform:uppercase;white-space:nowrap;
  }
  @keyframes kw-pressSlam{
    0%{transform:translateX(-50%) translateY(0)}
    34%{transform:translateX(-50%) translateY(74px)}
    52%{transform:translateX(-50%) translateY(62px)}
    78%{transform:translateX(-50%) translateY(-4px)}
    100%{transform:translateX(-50%) translateY(0)}
  }
  @keyframes kw-needleSnap{
    0%{height:16px;opacity:1}
    34%{height:26px}
    100%{height:16px}
  }
  @keyframes kw-impactRing{
    0%{opacity:.75;transform:translate(-50%,50%) scale(.35)}
    100%{opacity:0;transform:translate(-50%,50%) scale(1.25)}
  }

  /* Vordergrund-Lineal (Parallax-Ebene vorn) */
  #ai-uhrwerk .fg-ruler{
    position:absolute;left:-20vw;right:-20vw;top:calc(60vh + 258px);height:28px;z-index:12;
    border-top:1px solid var(--hair);
    background-image:repeating-linear-gradient(90deg,
      var(--hair) 0 1px, transparent 1px 26px);
    background-size:100% 11px;background-repeat:no-repeat;
    will-change:transform;
  }
  #ai-uhrwerk .fg-ruler .rlabel{
    position:absolute;top:15px;font-family:var(--mono);font-size:8px;letter-spacing:.22em;
    color:var(--slate);text-transform:uppercase;
  }

  /* ---------- Fußleiste (Protokoll) ---------- */
  #ai-uhrwerk .stage-foot{
    position:absolute;left:0;right:0;bottom:0;height:54px;z-index:20;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 52px;/* 07.11.2026: border-top (graue Linie) entfernt */
    font-family:var(--mono);font-size:9px;letter-spacing:.22em;
    text-transform:uppercase;color:var(--slate);
  }
  #ai-uhrwerk .dark .stage-foot{border-top-color:rgba(238,237,230,.14);color:#8B96A6}
  #ai-uhrwerk .steps{display:flex;gap:26px;align-items:center}
  #ai-uhrwerk .steps .st{display:flex;align-items:center;gap:8px;opacity:.55;transition:opacity .4s ease,color .4s ease}
  #ai-uhrwerk .steps .st .di{width:6px;height:6px;border:1px solid currentColor;transform:rotate(45deg);transition:background .4s ease}
  #ai-uhrwerk .steps .st.on{opacity:1;color:var(--blue)}
  #ai-uhrwerk .dark .steps .st.on{color:var(--blue-l)}
  #ai-uhrwerk .steps .st.on .di{background:currentColor}
  #ai-uhrwerk .stage-foot .mid{opacity:.85}
  #ai-uhrwerk .stage-foot .pct{font-size:12px;letter-spacing:.14em;color:var(--ink)}
  #ai-uhrwerk .dark .stage-foot .pct{color:var(--cream)}

  /* ---------- Sektion 2 · Automatikwerk ---------- */
  #ai-uhrwerk .gearbox{
    position:absolute;right:2%;top:8vh;width:61%;height:63vh;z-index:10;
    will-change:transform;
  }
  #ai-uhrwerk .gearbox svg{width:100%;height:100%;overflow:visible}
  #ai-uhrwerk .gear .teeth{fill:#1A2130;stroke:rgba(73,117,255,.55);stroke-width:1.1}
  #ai-uhrwerk .gear .body{fill:#151B29;stroke:rgba(73,117,255,.35);stroke-width:1}
  #ai-uhrwerk .gear .spoke{stroke:#101218;stroke-linecap:round}
  #ai-uhrwerk .gear .hub{fill:#222B3D;stroke:rgba(73,117,255,.5);stroke-width:1}
  #ai-uhrwerk .gear .jewel{fill:var(--blue-l)}
  #ai-uhrwerk .gear .rim{fill:none;stroke:rgba(73,117,255,.22);stroke-width:1}
  #ai-uhrwerk .glabel line{stroke:rgba(73,117,255,.55);stroke-width:1}
  #ai-uhrwerk .glabel circle{fill:var(--blue-l)}
  #ai-uhrwerk .glabel text{font-family:var(--mono);letter-spacing:.14em;fill:#EAF0F8;
    paint-order:stroke;stroke:rgba(8,12,22,.85);stroke-width:3px;stroke-linejoin:round}
  #ai-uhrwerk .glabel .gl-name{font-size:15px;font-weight:700}
  #ai-uhrwerk .glabel .gl-val{font-size:13px;fill:#C8D2E0;stroke-width:2.8px}
  #ai-uhrwerk .glabel{opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s var(--ease-mech)}
  #ai-uhrwerk .glabel.on{opacity:1;transform:translateY(0)}
  #ai-uhrwerk .pawl{stroke:#8B96A6;stroke-width:3;fill:none;stroke-linecap:round;
        transition:transform .18s var(--ease-mech);transform-origin:0 0;transform-box:fill-box}

  /* ---------- Zahlen im Lead-Text (07.11.2026) ----------
     Amon: "mach die Zahlen gleiche Font und Groesse, nur in bold und weiss."
     Also KEINE Monospace-Optik mehr: die Zahlen erben Schriftfamilie und Groesse
     des Fliesstexts und heben sich nur durch bold + weiss ab. Die Odomether-Mechanik
     bleibt — die Ziffernbaender (.od .d) haben feste Breite in em, unabhaengig
     von der Schriftfamilie. */
  #ai-uhrwerk .fig,
  #ai-uhrwerk .fig .od,
  #ai-uhrwerk .fig .od .reel,
  #ai-uhrwerk .fig .od .reel i,
  #ai-uhrwerk .fig__unit,
  #ai-uhrwerk .fig__approx{
    font-family:inherit;font-size:inherit;font-weight:700;color:#fff;
    font-style:normal;letter-spacing:inherit;text-transform:none;
  }
  #ai-uhrwerk .fig{display:inline;white-space:nowrap}
  #ai-uhrwerk .fig .od{display:inline-flex;font-size:1em;
    /* 07.11.2026: -0.215em gemessen. Die Ziffernbaender haben keinen eigenen
       Text-Baseline (die .d-Boxen sind overflow:hidden), deshalb setzt
       vertical-align:baseline die BOX-Unterkante auf die Text-Grundlinie und die
       Ziffern sassen 3,3px zu hoch. Wert per Pixelmessung der Tinte bestimmt. */
    vertical-align:-0.215em}

  /* A: Live-Status */
  #ai-uhrwerk .pv--A{flex-direction:column;align-items:flex-start;justify-content:center;gap:.7vh}
  #ai-uhrwerk .pv__live{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11px;
    letter-spacing:.22em;text-transform:uppercase;color:var(--cream)}
  #ai-uhrwerk .pv__dot{width:9px;height:9px;border-radius:50%;background:#22c55e;
    box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:kw-pvpulse 1.8s infinite}
  @keyframes kw-pvpulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
  #ai-uhrwerk .pv__step{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#8B96A6}
  #ai-uhrwerk .pv__step b{color:var(--blue-l);font-weight:700}
  #ai-uhrwerk .pv__meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;color:#6F7C90}
  #ai-uhrwerk .pv__meta b{color:var(--cream)}
  /* B: Telemetrie */
  #ai-uhrwerk .pv--B{justify-content:space-around}
  #ai-uhrwerk .pv__stat{display:flex;flex-direction:column;align-items:center;gap:.6vh}
  #ai-uhrwerk .pv__stat b{font-family:var(--mono);font-size:24px;font-weight:700;color:var(--cream);line-height:1}
  #ai-uhrwerk .pv__stat span{font-family:var(--mono);font-size:8.5px;letter-spacing:.18em;
    text-transform:uppercase;color:#7E8BA0}
  /* C: laengliche Std/Woche-Kennzahl in einer Zeile */

  #ai-uhrwerk .sealpress{
    position:absolute;right:51px;top:54vh;width:112px;height:19vh;z-index:15;
    pointer-events:none;
  }
  #ai-uhrwerk .sealpress .sp-tower{position:absolute;left:50%;top:0;bottom:34px;width:46px;
                       transform:translateX(-50%);background:#222B3D;
                       border:1px solid rgba(73,117,255,.35)}
  #ai-uhrwerk .sealpress .sp-head{position:absolute;left:50%;bottom:6px;width:92px;height:18px;
                      transform:translateX(-50%);background:var(--blue-l);opacity:.92}
  #ai-uhrwerk .sealpress.is-slam .sp-head{animation:kw-sealSlam .42s var(--ease-mech)}
  @keyframes kw-sealSlam{
    0%{transform:translateX(-50%) translateY(0)}
    36%{transform:translateX(-50%) translateY(52px)}
    58%{transform:translateX(-50%) translateY(42px)}
    100%{transform:translateX(-50%) translateY(0)}
  }
  #ai-uhrwerk .sealpress .sp-read{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%);white-space:nowrap;
    font-family:var(--mono);font-size:8px;letter-spacing:.22em;color:#8B96A6;text-transform:uppercase;
  }

  #ai-uhrwerk .cta{
    /* 07.11.2026: stand absolut bei top:563px (cal 118+445) und damit weit unter
       dem Text. Jetzt im Fluss der Kopie -> sitzt direkt unter dem Fliesstext. */
    position:static;margin-top:28px;
    display:inline-flex;align-items:center;gap:10px;
    background:var(--blue);color:#fff;text-decoration:none;
    font-size:13.5px;font-weight:700;letter-spacing:.01em;
    padding:14px 22px;border-radius:6px;
    opacity:0;transform:translateY(18px);
    transition:opacity .6s ease,transform .6s var(--ease-mech),background .25s ease;
    box-shadow:0 16px 32px -18px rgba(36,77,247,.8);
  }
  #ai-uhrwerk .cta.on{opacity:1;transform:none}
  #ai-uhrwerk .cta:hover{background:var(--blue-l)}

  /* ---------- Responsive-Kompromiss ---------- */
  @media (max-width:1100px){
    #ai-uhrwerk .stage-copy{max-width:46vw}
    #ai-uhrwerk h2{font-size:clamp(38px,5vw,58px)}
    #ai-uhrwerk .plate{width:280px;height:230px}
    #ai-uhrwerk .press{left:60%}
  }

  /* ---------- Mittlere Breiten: Lead-Schrift kleiner (07.11.2026) ----------
     Der Lead-Absatz lief bei 46vw unten in die Zahnrad-Beschriftungen
     (gemessen 562 px² schon VOR der Textverlaengerung, 1325 px² danach).
     Eine BREITERE Spalte half nicht — dann reichte der Text seitlich in die
     Labels. Kleinerer Text braucht weniger Zeilen und bleibt oben. */
  @media (max-width:1280px){
    #ai-uhrwerk .lead{font-size:13.2px;line-height:1.55}
  }
  /* Unter 1024px reicht der Text seitlich in die Zahnrad-Beschriftungen
     ("Anfrage-Eingang" liegt links vom Zahnrad). Deshalb hier die Textspalte
     schmaler UND den Zahnrad-Block weiter nach rechts — gemessen bis 0 px². */
  @media (max-width:1024px){
    #ai-uhrwerk .stage-copy{max-width:38vw}
    #ai-uhrwerk .lead{max-width:38vw}
    #ai-uhrwerk .gearbox{right:1.5%;width:56%}
  }

  /* ---------- Telefon (07.11.2026) ----------
     Die Section hatte nur den 1100px-Breakpoint oben — und der quetscht die Kopie
     auf 46vw (179 px bei 390 px Breite), waehrend Ueberschrift und Fliesstext
     gross bleiben und die Zahnraeder (right:1.5%; width:61%) absolut darueber
     liegen. Gemessen bei 390x844: Ueberlappung Kopie x Zahnraeder 36'860 px²,
     CTA x Kennzahlen 5'334 px².
     Loesung: alles in eine senkrechte Reihenfolge bringen statt absoluter
     Positionen — Kopf, Kopie, CTA, Zahnraeder, Kennzahlen, Fusszeile.
     Zwischen den Bloecken wird nichts mehr ueberlagert. */
  @media (max-width:720px){
    /* Section darf wachsen — sie ist entpinnt, eine höhere Section ist also
       unkritisch und verhindert Gedränge auf kurzen Displays. */
    #ai-uhrwerk.strip{height:auto}

    /* Aus absoluten Positionen wird ein senkrechter Fluss. Die DOM-Reihenfolge
       ist bereits richtig: head -> copy -> gearbox -> protolab -> foot, es
       braucht also kein "order". */
    #ai-uhrwerk .strip-stage{
      height:auto;min-height:100vh;
      display:flex;flex-direction:column;
      /* 118px oben: der FIXE Site-Header ist auf Telefonen 105px hoch
         (Desktop 76px). Vorher lag "Deine Abläufe." dahinter. */
      padding:118px 20px 18px;
      /* 26px statt 18px: der CTA steht vor dem Einblenden auf translateY(18px)
         und käme den Zahnrädern sonst während der Einblendung zu nah. */
      gap:26px;
    }
    /* Dekorative Ebenen bleiben aus dem Fluss — sonst würden sie als
       Flex-Elemente zusätzliche Höhe belegen. */
    #ai-uhrwerk .layer.parallax:not(.gearbox){position:absolute}

    #ai-uhrwerk .stage-head,
    #ai-uhrwerk .stage-foot{position:static;height:auto;padding:0;flex-wrap:wrap;gap:6px}
    #ai-uhrwerk .stage-copy{position:static;left:auto;right:auto;top:auto;max-width:none}
    #ai-uhrwerk h2{font-size:clamp(26px,7.4vw,34px);line-height:1.02}
    #ai-uhrwerk .lead{font-size:12.5px;line-height:1.5;margin-top:12px}

    /* CTA zurück in den Fluss -> sitzt automatisch unter dem Text */
    #ai-uhrwerk .cta{position:static;margin-top:16px;align-self:flex-start;
      padding:12px 18px;font-size:12.5px}

    /* Zahnräder: eigene Zeile zwischen Text und Kennzahlen, nimmt Resthöhe.
       16px Innenabstand links/rechts — sonst schneidet das Label
       „Übergabe ins CRM" an der Section-Kante ab (gemessen x = -13px). */
    #ai-uhrwerk .gearbox{position:static;left:auto;right:auto;top:auto;bottom:auto;
      width:100%;height:auto;min-height:180px;flex:1 1 auto;padding:0 16px}

    /* Kennzahlen-Panel: eine Zeile mit white-space:nowrap — gemessen 472px Inhalt
       bei 350px Box, also 122px abgeschnitten („≈ 10 STD / W…"). Auf Telefonen
       deshalb untereinander statt nebeneinander. */

  }
  @media (prefers-reduced-motion: reduce){
    #ai-uhrwerk .od .reel, #ai-uhrwerk h2 .ln > span, #ai-uhrwerk .lead, #ai-uhrwerk .specs, #ai-uhrwerk .plate, #ai-uhrwerk .plate__stamp, #ai-uhrwerk .glabel, #ai-uhrwerk .proto, #ai-uhrwerk .cta{
      transition-duration:.01s !important;
    }
  }