.demo-kopf{padding:56px 0 30px}
.demo-kopf h1{font-size:clamp(1.8rem,4.2vw,2.8rem);max-width:24ch}
.demo-kopf p{margin-top:14px;color:var(--muted);max-width:60ch}

.tabs{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 16px}
.tabs button{border:1px solid var(--hair);background:var(--karte);border-radius:999px;
  padding:10px 18px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted)}
.tabs button[aria-selected=true]{background:var(--dunkel);color:#eef3f1;border-color:var(--dunkel)}
.tabs button:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}

.player{background:var(--karte);border-radius:18px;box-shadow:var(--schatten);padding:18px;margin-bottom:80px}
.buehne{position:relative;height:400px;background:#e8ecef;border-radius:12px;overflow:hidden;user-select:none}
.untertitel{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 8px 2px}
.untertitel p{font-size:16.5px;font-weight:500;max-width:66ch}
.weiterbtn{flex:none;border:0;background:var(--mint);color:var(--ink);font:inherit;font-weight:600;
  font-size:14px;padding:10px 20px;border-radius:999px;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .4s}
.weiterbtn.da{opacity:1;pointer-events:auto}
.steuer{display:flex;gap:14px;align-items:center;padding:10px 8px 0}
.steuer button{border:1px solid var(--hair);background:var(--karte);color:var(--muted);font:inherit;
  font-weight:600;font-size:13.5px;padding:8px 18px;border-radius:999px;cursor:pointer}
.steuer button:hover{color:var(--ink)}
.steuer button:focus-visible{outline:2px solid var(--gruen);outline-offset:2px}
.fortschritt{flex:1;height:4px;background:var(--bg2);border-radius:2px;overflow:hidden}
.fortschritt i{display:block;height:100%;width:0;background:var(--gruen2);transition:width .3s linear}

/* Phasen-Schnitt: „Jetzt mit Automation" */
.schnitt{position:absolute;inset:0;background:var(--dunkel);color:#eef3f1;z-index:60;
  display:grid;place-items:center;font-weight:700;font-size:clamp(16px,2.6vw,22px);
  opacity:0;pointer-events:none;transition:opacity .5s}
.schnitt.da{opacity:1}
.schnitt span{max-width:30ch;text-align:center;padding:0 20px}

/* Mauszeiger */
#cursor{position:absolute;width:22px;height:22px;z-index:50;pointer-events:none;
  transition:left .65s cubic-bezier(.5,.1,.3,1),top .65s cubic-bezier(.5,.1,.3,1);left:50%;top:85%}
#cursor svg{filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
#cursor .ripple{position:absolute;left:-8px;top:-8px;width:36px;height:36px;border-radius:50%;
  border:2.5px solid var(--gruen2);opacity:0;transform:scale(.4)}
#cursor.klickt .ripple{animation:rip .45s ease-out}
@keyframes rip{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.15)}}
#cursor.aus{opacity:0;transition:opacity .4s}

/* Mail-Programm */
.mailapp{position:absolute;inset:14px;background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 6px 24px rgba(8,35,28,.18);display:flex;flex-direction:column;font-size:12px}
.mailapp .titelleiste{background:#0b63ce;color:#fff;padding:7px 12px;font-weight:600;font-size:12px;
  display:flex;justify-content:space-between}
.mailapp .rumpf{flex:1;display:flex;min-height:0}
.ordnerspalte{width:170px;background:#f3f6f9;border-right:1px solid #e1e6ea;padding:8px 0;flex:none}
.ordner{padding:6px 12px;color:#33414c;display:flex;justify-content:space-between;border-radius:0 14px 14px 0;
  margin-right:8px;transition:background .3s}
.ordner.aktiv{background:#dbe9fb;font-weight:700;color:#0b63ce}
.ordner .zahl{color:#8a97a1;font-size:11px}
.ordner.blitz{background:#dcf3e6;color:#1f7a43;font-weight:700}
.mailliste{flex:1;min-width:0;overflow:hidden;position:relative}
.buehne .mailzeile{border-bottom:1px solid #eef1f4;transition:transform .55s ease,opacity .55s ease,height .45s ease .35s,padding .45s ease .35s;
  position:relative;background:#fff;padding:9px 12px;overflow:hidden}
.buehne .mailzeile .absender{font-weight:700;color:#1d2b36}
.buehne .mailzeile .betreff{color:#44525d;margin-top:1px}
.buehne .mailzeile .schnipsel{color:#8a97a1;font-size:11px;margin-top:1px}
.buehne .mailzeile.markiert{background:#fff8e6;outline:2px solid #f0c419;outline-offset:-2px}
.buehne .mailzeile.gelesen .absender{font-weight:400;color:#66727c}
.buehne .mailzeile.raus{transform:translateX(105%);opacity:0;height:0!important;padding-top:0;padding-bottom:0;border-bottom-width:0}
.buehne .mailzeile.neu{animation:rein .5s ease}
@keyframes rein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.05em;border-radius:4px;
  padding:1.5px 7px;margin-top:4px;opacity:0;transition:opacity .4s}
.chip.da{opacity:1}
.chip.gruen{background:#dcf3e6;color:#1f7a43}
.chip.rot{background:#fbe3df;color:#c0392b}
.chip.grau{background:#eef1f4;color:#66727c}
.chip.gelb{background:#faefd8;color:#a8730f}
.lesebereich{width:37%;border-left:1px solid #e1e6ea;padding:12px;display:none;flex:none;background:#fff}
.lesebereich.offen{display:block}
.lesebereich h4{font-size:13px;margin-bottom:6px}
.lesebereich p{font-size:11.5px;color:#44525d;line-height:1.5}
.entwurf{position:absolute;right:10px;bottom:10px;width:48%;background:#fff;border:1px solid #cdd6dd;
  border-radius:8px;box-shadow:0 8px 24px rgba(8,35,28,.22);padding:10px 12px;font-size:11.5px;
  transform:translateY(130%);transition:transform .6s ease;z-index:20}
.entwurf.da{transform:none}
.entwurf .kopfzeile{font-weight:700;color:#0b63ce;margin-bottom:5px;font-size:11px}
.entwurf p{color:#44525d;line-height:1.5}

/* ERP-Fenster */
.erpapp{position:absolute;right:14px;top:14px;bottom:14px;width:46%;background:#fff;border-radius:8px;
  overflow:hidden;box-shadow:0 6px 24px rgba(8,35,28,.18);font-size:12px;display:flex;flex-direction:column}
.erpapp .titelleiste{background:#3d4852;color:#fff;padding:7px 12px;font-weight:600;font-size:12px}
.erpapp .formular{padding:12px;display:grid;gap:9px}
.feld label{display:block;font-size:10.5px;color:#8a97a1;margin-bottom:2px;font-weight:600}
.feld .wert{border:1px solid #cdd6dd;border-radius:5px;padding:6px 9px;min-height:29px;font-size:12px;color:#1d2b36;background:#fbfcfd}
.feld .wert.aktivfeld{outline:2px solid #0b63ce;outline-offset:-1px}

/* Dokumente */
.papier{position:absolute;background:#fff;border-radius:8px;box-shadow:0 6px 20px rgba(8,35,28,.16);
  padding:11px 13px;font-size:11px;width:216px}
.papier .kopf{font-weight:800;font-size:11.5px;margin-bottom:6px;color:#1d2b36}
.papier .zl{display:flex;justify-content:space-between;gap:8px;padding:3.5px 0;border-top:1px solid #eef1f4;color:#44525d}
.papier .zl .status{font-weight:800;opacity:0;transition:opacity .35s;white-space:nowrap}
.papier .zl .status.da{opacity:1}
.papier .zl .status.g{color:#1f7a43}
.papier .zl .status.r{color:#c0392b}
.grossstempel{position:absolute;font-weight:800;font-size:16px;border:3px solid;border-radius:8px;
  padding:8px 16px;transform:rotate(-6deg) scale(.5);opacity:0;transition:all .4s;z-index:30}
.grossstempel.da{opacity:1;transform:rotate(-6deg) scale(1)}
.grossstempel.g{color:#1f7a43;border-color:#1f7a43;background:rgba(220,243,230,.95)}
.grossstempel.r{color:#c0392b;border-color:#c0392b;background:rgba(251,227,223,.95)}
.banner{position:absolute;left:14px;right:14px;top:14px;background:#c0392b;color:#fff;font-weight:700;
  font-size:12.5px;padding:9px 14px;border-radius:8px;transform:translateY(-160%);transition:transform .5s;z-index:40}
.banner.da{transform:none}
.banner.gelb{background:#a8730f}
.uhrleiste{position:absolute;left:26px;right:26px;bottom:22px;height:3px;background:#cdd6dd;border-radius:2px}
.uhrleiste .m{position:absolute;top:-22px;transform:translateX(-50%);font-size:10.5px;color:#66727c;font-weight:700}
.uhrleiste .lauf{position:absolute;top:-5px;width:13px;height:13px;border-radius:50%;background:var(--gruen2);transition:left 1.4s ease}
.postit{position:absolute;background:#fff3a6;box-shadow:0 4px 12px rgba(0,0,0,.15);padding:9px 11px;
  font-size:11px;transform:rotate(-3deg);font-weight:600;color:#6b5d1a}

@media(max-width:760px){.buehne{height:440px}.lesebereich{display:none!important}.ordnerspalte{width:126px}}

/* "Wird gelesen"-Moment */
.buehne .mailzeile.liest::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,transparent 20%,rgba(11,99,206,.14) 50%,transparent 80%);
  background-size:250% 100%;animation:scan 1.1s linear}
@keyframes scan{from{background-position:120% 0}to{background-position:-120% 0}}
.chip.grau.da{animation:chippuls 1.1s ease}
@keyframes chippuls{0%,100%{opacity:1}50%{opacity:.45}}