/* Kramm Intro – Nr. 1 */

  #kramm-intro{
    --ki-bg:#121316;          /* Hintergrund Anthrazit */
    --ki-accent:#ed1c24;      /* Kramm-Rot laut Logo */
    --ki-accent-dark:#a3121a; /* dunkleres Rot für Verläufe */
    --ki-text:#ffffff;
    --ki-muted:#a8a9ae;
    position:fixed;inset:0;z-index:99999;
    background:radial-gradient(ellipse at 50% 45%,#2b1517 0%,var(--ki-bg) 65%);
    display:flex;align-items:center;justify-content:center;overflow:hidden;
    font-family:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
    transition:transform .75s cubic-bezier(.7,0,.2,1);
  }
  /* Sicherung: startet das Script nicht, blendet sich das Intro nach 2,5 s selbst aus */
  #kramm-intro{animation:kiFailsafe .5s ease 2.5s forwards}
  #kramm-intro.ki-run{animation:none}
  @keyframes kiFailsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
  #kramm-intro.ki-out{transform:translateY(-100%);pointer-events:none}
  #kramm-intro *{box-sizing:border-box}

  /* --- rote Akzentlinien oben/unten + Wischblende --- */
  .ki-edge{position:absolute;left:0;height:4px;width:100%;background:var(--ki-accent);
    transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
  .ki-edge.t{top:0;transform-origin:left}
  .ki-edge.b{bottom:0;transform-origin:right}
  .s1 .ki-edge{transform:scaleX(1)}
  .ki-glow{position:absolute;left:50%;top:50%;width:70vmin;height:70vmin;border-radius:50%;
    transform:translate(-50%,-50%) scale(.6);opacity:0;pointer-events:none;
    background:radial-gradient(circle,rgba(237,28,36,.28) 0%,rgba(237,28,36,0) 65%);
    transition:opacity 1.2s ease, transform 1.6s cubic-bezier(.2,.8,.2,1)}
  .s4 .ki-glow{opacity:1;transform:translate(-50%,-50%) scale(1)}
  .ki-wipe{position:absolute;inset:0;z-index:5;
    background:linear-gradient(160deg,var(--ki-accent) 0%,var(--ki-accent-dark) 100%);
    transform:translateY(100%);transition:transform .55s cubic-bezier(.7,0,.2,1)}
  .ki-wiping .ki-wipe{transform:none}
  .ki-stage{position:relative;width:min(92vw,760px);height:min(80vh,440px)}

  /* --- Drucker / Ausgabeschacht --- */
  .ki-printer{position:absolute;left:50%;top:62%;width:240px;height:56px;
    transform:translateX(-50%);border:2px solid rgba(255,255,255,.18);border-top:none;
    border-radius:0 0 12px 12px;opacity:0;transition:opacity .6s ease}
  .ki-slot{position:absolute;left:50%;top:62%;width:200px;height:3px;margin-top:-1px;
    background:var(--ki-accent);border-radius:2px;box-shadow:0 0 18px var(--ki-accent);
    transform:translateX(-50%) scaleX(0);transition:transform .7s cubic-bezier(.2,.8,.2,1), opacity .5s}
  .s1 .ki-printer{opacity:1}
  .s1 .ki-slot{transform:translateX(-50%) scaleX(1)}
  .s3 .ki-printer,.s3 .ki-slot{opacity:0}

  /* --- Blatt Papier fährt heraus --- */
  .ki-paperwrap,.ki-grid{position:absolute;left:50%;top:calc(62% - 172px);
    width:132px;height:172px;transform:translateX(-50%)}
  .ki-paperwrap{overflow:hidden;transition:opacity .35s ease}
  .ki-paper{width:100%;height:100%;background:#fff;border-radius:3px 3px 0 0;
    padding:20px 16px;transform:translateY(102%);
    transition:transform 1.3s cubic-bezier(.2,.8,.2,1)}
  .ki-line{height:6px;border-radius:3px;background:#d3dce7;margin-bottom:11px;
    transform-origin:left;transform:scaleX(0);transition:transform .45s ease}
  .ki-line.h{background:var(--ki-accent);height:9px;margin-bottom:16px}
  .s2 .ki-paper{transform:translateY(0)}
  .s2 .ki-line{transform:scaleX(1)}
  .s3 .ki-paperwrap{opacity:0}

  /* --- Papier zerfällt in Pixel (digital) --- */
  .ki-grid{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:1fr;gap:4px;pointer-events:none}
  .ki-cell{background:var(--ki-accent);border-radius:2px;opacity:0;transform:scale(.2);
    transition:transform .55s cubic-bezier(.3,.7,.2,1), opacity .55s ease;transition-delay:var(--d)}
  .s3 .ki-cell{opacity:1;transform:scale(1)}
  .s4 .ki-cell{opacity:0;transform:translate(var(--dx),var(--dy)) scale(0) rotate(45deg);
    transition-duration:.9s}

  /* --- Logo / Text --- */
  .ki-logo{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center}
  .ki-mark{display:block;width:min(80vw,420px);height:auto;margin:0 auto;overflow:visible}
  .ki-cnt{fill:var(--ki-bg)}
  .ki-mark g{transform-box:fill-box}
  .ki-cliprect{transform-box:fill-box;transform-origin:42.1% 50%;transform:scaleX(0);
    transition:transform .9s cubic-bezier(.2,.8,.2,1) .3s}
  .ki-m-box{transform-origin:50% 50%;transform:scale(0) rotate(-14deg);
    transition:transform .7s cubic-bezier(.3,1.6,.4,1)}
  .ki-m-rule{transform-origin:50% 50%;transform:scaleX(0);
    transition:transform .7s cubic-bezier(.2,.8,.2,1) .75s}
  .ki-m-sub,.ki-m-city{opacity:0;transform:translateY(4px);
    transition:opacity .6s ease, transform .6s ease}
  .ki-m-sub{transition-delay:1s}.ki-m-city{transition-delay:1.2s}
  .s4 .ki-cliprect,.s4 .ki-m-box,.s4 .ki-m-rule,.s4 .ki-m-sub,.s4 .ki-m-city{transform:none;opacity:1}
  .ki-sub{margin-top:26px;font-size:clamp(11px,2vw,15px);letter-spacing:.28em;
    text-transform:uppercase;color:var(--ki-muted)}
  .ki-sub span{display:inline-block;opacity:0;transform:translateY(8px);
    transition:opacity .5s ease, transform .5s ease;transition-delay:calc(var(--i) * 220ms)}
  .ki-sub .dot{color:var(--ki-accent);margin:0 .5em}
  .s5 .ki-sub span{opacity:1;transform:none}
  .ki-claim{margin-top:30px;opacity:0;transform:translateY(12px);
    transition:opacity .8s ease, transform .8s ease}
  .ki-claim b{display:block;font-weight:300;font-size:clamp(19px,3.6vw,30px);color:var(--ki-text)}
  .ki-claim small{display:block;margin-top:8px;font-size:clamp(11px,1.8vw,14px);color:var(--ki-muted);letter-spacing:.05em}
  .s6 .ki-claim{opacity:1;transform:none}

  /* --- Überspringen --- */
  .ki-skip{position:absolute;right:20px;bottom:20px;background:none;
    border:1px solid rgba(255,255,255,.25);color:var(--ki-muted);font:inherit;font-size:13px;
    padding:8px 14px;border-radius:20px;cursor:pointer;transition:all .2s}
  .ki-skip:hover,.ki-skip:focus-visible{color:#fff;border-color:var(--ki-accent);background:var(--ki-accent);outline:none}
  .ki-brand .ki-dot{color:var(--ki-accent)}