/* ===== PRAEMON 2b – gemeinsame Bausteine für Animationen und Belege (Plattform, Leitstand, Monitoring) =====
   Nur HTML, SVG und CSS, keine Bibliotheken und kein Skript.
   Grundzustand jeder Animation = ruhige Fassung (das erklärende Endbild). Bewegung kommt nur bei
   prefers-reduced-motion:no-preference dazu; bei „Bewegung reduzieren“ stoppt der Rahmen ohnehin alle Animationen. */

/* --- Bühne oben auf der Seite (ersetzt das große Bildschirmfoto) --- */
.pa-fig{margin:0;position:relative;z-index:1}
.pa-stage{container-type:inline-size;container-name:pa;background:var(--pm-nacht);border:1px solid var(--pm-nacht-line);border-radius:16px;box-shadow:0 30px 80px rgba(15,27,38,.28);color:var(--pm-auf-nacht);overflow:hidden;position:relative;font-variant-numeric:tabular-nums}
.pa-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:32px 32px;pointer-events:none}
.pa-stage-bar{position:relative;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--pm-nacht-line);background:var(--pm-nacht-2)}
.pa-stage-bar b{color:var(--pm-weiss);font-size:14px;font-weight:700;letter-spacing:-.005em}
.pa-stage-bar > span{font-size:12.5px;color:var(--pm-grau-hell)}
.pa-tag{margin-left:auto;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--pm-grau-hell);border:1px solid var(--pm-nacht-line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.pa-stage-body{position:relative;padding:28px}
.pa-k{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--pm-gold)}

/* Schritte unter einer Animation (Hervorhebung je Seite im Takt der Animation) */
.pa-seq{position:relative;list-style:none;margin:0;padding:0 28px 26px;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:14px}
.pa-seq li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:start;padding-top:14px;border-top:2px solid var(--pm-nacht-line);font-size:13.5px;line-height:1.45;color:var(--pm-auf-nacht)}
.pa-seq li > span{width:24px;height:24px;border-radius:50%;background:rgba(253,206,4,.14);color:var(--pm-gold);font-size:11.5px;font-weight:700;display:grid;place-items:center}
.pa-seq b{display:block;color:var(--pm-weiss);font-size:14px;margin-bottom:2px}
.pa-seq p{margin:0}

/* Farben auf dunklem Grund */
.pa-ok{color:var(--pm-punkt)}.pa-warn{color:var(--pm-warn)}.pa-krit{color:#ff6b5a}.pa-gold{color:var(--pm-gold)}
.pa-chip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:1px 9px;font-size:11px;font-weight:700;line-height:1.6;white-space:nowrap}
.pa-chip-ok{background:rgba(47,208,127,.14);color:var(--pm-punkt)}
.pa-chip-warn{background:rgba(243,156,18,.16);color:#ffb84d}
.pa-chip-krit{background:rgba(221,75,57,.2);color:#ff8a7d}
.pa-chip-grau{background:rgba(143,163,179,.16);color:var(--pm-grau-hell)}
.pa-chip-gold{background:var(--pm-gold);color:var(--pm-nacht)}
.pa-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--pm-punkt);flex:none}

/* --- Bereich als Karte mit Symbol-Animation statt Mini-Bildschirmfoto („Eins statt vier“) --- */
.pa-sym{position:relative;height:150px;background:var(--pm-nacht);border-bottom:1px solid var(--pm-rand);overflow:hidden}
.pa-sym::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:24px 24px}
.pa-sym > svg{position:absolute;left:50%;top:50%;width:300px;height:130px;transform:translate(-50%,-50%);overflow:visible}
.pa-sym .pm-new{position:absolute;top:12px;left:12px;z-index:2}
.pa-sym-s{height:120px}
.pa-sym-s > svg{height:104px;width:240px}
.pa-area .pm-area-body h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-cardsym{display:flex;flex-direction:column;padding:0;overflow:hidden}
.pa-cardsym .pa-body{padding:22px 24px 24px}
.pa-cardsym .pm-h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-cardsym p{margin:0;font-size:14.5px;color:var(--pm-schiefer)}
/* gemeinsame Strichstärken der Symbol-Animationen */
.pa-sym .s-l{fill:none;stroke:#3a5168;stroke-width:2}
.pa-sym .s-w{fill:none;stroke:#c9d4dd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pa-sym .s-g{fill:none;stroke:var(--pm-gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pa-sym .f-n2{fill:#15283a}.pa-sym .f-n3{fill:#1c3348}.pa-sym .f-g{fill:var(--pm-gold)}.pa-sym .f-ok{fill:#2fd07f}.pa-sym .f-krit{fill:#dd4b39}.pa-sym .f-warn{fill:#f39c12}.pa-sym .f-b{fill:rgba(253,206,4,.16)}

/* --- Kleine Szene in einem Abschnitt (statt Bildschirmfoto) --- */
.pa-mini{container-type:inline-size;container-name:pam;background:var(--pm-nacht);border:1px solid var(--pm-nacht-line);border-radius:16px;box-shadow:var(--pm-shadow-l);color:var(--pm-auf-nacht);padding:22px 24px 24px;position:relative;overflow:hidden;font-variant-numeric:tabular-nums}
.pa-mini::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:28px 28px;pointer-events:none}
.pa-mini > *{position:relative}
.pa-mini-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.pa-mini-head b{color:var(--pm-weiss);font-size:15px}
.pa-mini-head > span:not(.pa-tag){font-size:12px;color:var(--pm-grau-hell)}
.pa-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border:1px solid var(--pm-nacht-line);border-radius:10px;background:var(--pm-nacht-2);font-size:13.5px;line-height:1.45}
.pa-row + .pa-row{margin-top:8px}
.pa-row b{color:var(--pm-weiss);font-weight:700}
.pa-row small{display:block;color:var(--pm-grau-hell);font-size:12px}
.pa-bars{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.pa-bars li{display:grid;grid-template-columns:44px minmax(0,1fr) 34px;gap:8px;align-items:center;font-size:11.5px;color:var(--pm-auf-nacht)}
.pa-bars i{display:block;height:7px;border-radius:4px;background:#0f1b26;position:relative;overflow:hidden}
.pa-bars i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:4px;background:var(--pm-gold)}
.pa-bars b{text-align:right;color:var(--pm-weiss);font-weight:600}
.pa-capm{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:14px}

/* --- Beleg: echtes Bildschirmfoto, groß, mit nummerierten Punkten; Klick vergrößert --- */
.pa-mkbox{position:relative}
.pa-mkbox .pm-mk{pointer-events:none}
.pa-zoomhint{display:inline-flex;align-items:center;gap:6px}
.pa-beleg .pm-anat-list{position:static}
.pa-beleg-wide{display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.pa-beleg-wide .pm-anat-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 28px}
@container pm (max-width:1080px){.pa-beleg-wide .pm-anat-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pm (max-width:700px){.pa-beleg-wide .pm-anat-list{grid-template-columns:minmax(0,1fr)}}
.pa-modlist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:2px}
.pa-modlist li{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:12px 0;border-bottom:1px solid var(--pm-rand)}
.pa-modlist li:last-child{border-bottom:0}
.pa-modlist li > span{width:28px;height:28px;border-radius:50%;background:var(--pm-gold);color:var(--pm-nacht);font-size:12.5px;font-weight:600;display:grid;place-items:center}
.pa-modlist b{display:block;font-size:15.5px;color:var(--pm-tinte);margin-bottom:2px}
.pa-modlist p{margin:0;font-size:14.5px;color:var(--pm-schiefer);line-height:1.55}

/* --- Liste auf dunklem Grund (statt Kacheln, deren Texte sonst ungleich umbrechen) --- */
.pa-nliste{list-style:none;margin:0;padding:0;border-top:1px solid var(--pm-nacht-line)}
.pa-nliste li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:18px 0;border-bottom:1px solid var(--pm-nacht-line)}
.pa-nliste-i{width:40px;height:40px;border-radius:10px;background:rgba(253,206,4,.12);box-shadow:inset 0 0 0 1px rgba(253,206,4,.35);color:var(--pm-gold);display:grid;place-items:center}
.pa-nliste-i svg{width:20px;height:20px}
.pa-nliste .pm-label{color:var(--pm-gold);margin-bottom:2px}
.pa-nliste b{display:block;color:var(--pm-weiss);font-size:17px;margin-bottom:3px}
.pa-nliste p{margin:0;font-size:14.5px;color:var(--pm-auf-nacht)}

/* --- Karten im Raster wie die Bereiche (3 / 2 / 1 Spalten), ohne Link --- */
.pa-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pa-card{display:flex;flex-direction:column;border:1px solid var(--pm-rand);border-radius:18px;overflow:hidden;background:var(--pm-weiss);min-width:0}
.pa-card .pa-body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.pa-card h3{font-family:var(--pm-display-s);font-size:19px;margin:0;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-card p{margin:0;font-size:14.5px;color:var(--pm-schiefer)}
.pa-card .pm-ico{margin-bottom:6px}
@container pm (max-width:1080px){.pa-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pm (max-width:560px){.pa-cards{grid-template-columns:minmax(0,1fr)}}

@container pa (max-width:860px){
  .pa-stage-body{padding:20px}
  .pa-seq{grid-template-columns:repeat(2,minmax(0,1fr));padding:0 20px 20px}
}
@container pa (max-width:520px){
  .pa-stage-bar{padding:10px 14px}
  .pa-stage-bar > span:not(.pa-tag){display:none}
  .pa-stage-body{padding:14px}
  .pa-seq{grid-template-columns:minmax(0,1fr);gap:8px;padding:0 14px 16px}
  .pa-seq li{padding-top:10px;font-size:13px}
}
@container pm (max-width:560px){
  .pa-sym{height:132px}
  .pa-mini{padding:18px 16px 18px}
}

/* ===== Bereiche mit Symbol-Animation (Plattform, Startseite) ===== */
.pa-s-scan{stroke:var(--pm-gold);stroke-width:2;opacity:.6}
.pa-s-ring{fill:none;stroke:var(--pm-gold);stroke-width:7;stroke-dasharray:78 100;stroke-linecap:round}
.pa-s-rot{fill:#dd4b39}
.pa-s-srv rect{fill:#dd4b39}
.pa-s-red{fill:#dd4b39}
.pa-s-arc{stroke-dasharray:1}
.pa-s-wave{fill:none;stroke:#2fd07f;stroke-width:1.8;stroke-linejoin:round}
.pa-s-dev3{fill:#f39c12}
.pa-s-pk{fill:var(--pm-gold);opacity:0}
.pa-s-u{fill:#3a5168}.pa-s-u3{fill:var(--pm-gold)}
.pa-s-dl{fill:#c9d4dd}
.pa-s-typ{opacity:0}
.pa-s-line,.pa-s-chk{stroke-dasharray:1}
.pa-s-file,.pa-s-pk,.pa-s-q,.pa-s-a,[class*="pa-s-al"],[class*="pa-s-dl"],[class*="pa-s-u"]{transform-box:fill-box;transform-origin:left center}

@media (min-width:0){
  /* Bereiche: kleine Schleifen */
  .pa-s-mon .pa-s-line{animation:sLine 7s infinite}
  .pa-s-mon .pa-s-pt{animation:sPt 7s infinite;transform-box:fill-box;transform-origin:center}
  @keyframes sLine{0%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
  @keyframes sPt{0%,52%{opacity:0;transform:scale(.4)}58%{opacity:1;transform:scale(1.4)}64%,72%{transform:scale(1)}78%{transform:scale(1.3)}84%,100%{opacity:1;transform:scale(1)}}
  .pa-s-sec .pa-s-scan{animation:sScan 3.2s ease-in-out infinite}
  .pa-s-sec .pa-s-chk{animation:sChk 6.4s infinite}
  .pa-s-sec .pa-s-ring{animation:sRing 6.4s infinite}
  .pa-s-sec .pa-s-d2{animation:sBlink 1.6s infinite}
  @keyframes sScan{0%,100%{transform:translateY(0);opacity:0}10%{opacity:.7}50%{transform:translateY(64px);opacity:.7}60%{opacity:0}}
  @keyframes sChk{0%,40%{stroke-dashoffset:1}55%,100%{stroke-dashoffset:0}}
  @keyframes sRing{0%{stroke-dasharray:0 100}50%,100%{stroke-dasharray:78 100}}
  @keyframes sBlink{0%,100%{opacity:1}50%{opacity:.25}}
  .pa-s-lage .pa-s-rot{animation:sBlink 1.4s infinite}
  .pa-s-lage .pa-s-c1{animation:sChip 6s infinite}
  .pa-s-lage .pa-s-c2{animation:sChip 6s .35s infinite}
  .pa-s-lage .pa-s-c3{animation:sChip 6s .7s infinite}
  @keyframes sChip{0%,20%{fill:#1c3348}28%,85%{fill:#dd4b39}95%,100%{fill:#1c3348}}
  .pa-s-wall .pa-s-red{animation:sRed 6s infinite}
  .pa-s-wall .pa-s-arc{animation:sLine 6s infinite}
  .pa-s-wall .pa-s-wave{animation:sWave 1.2s linear infinite}
  @keyframes sRed{0%,40%{fill:#1c3348}46%,90%{fill:#dd4b39}96%,100%{fill:#1c3348}}
  @keyframes sWave{0%{transform:translateX(0)}50%{transform:translateX(-2px)}100%{transform:translateX(0)}}
  .pa-s-dev .pa-s-dev3{animation:sDev 6s infinite}
  @keyframes sDev{0%,35%{fill:#2fd07f}42%,90%{fill:#f39c12}96%,100%{fill:#2fd07f}}
  .pa-s-net .pa-s-pk1{animation:sPk1 2.4s linear infinite}
  .pa-s-net .pa-s-pk2{animation:sPk2 2.4s .6s linear infinite}
  .pa-s-net .pa-s-pk3{animation:sPk3 2.4s 1.2s linear infinite}
  .pa-s-net .pa-s-pk4{animation:sPk4 2.4s 1.8s linear infinite}
  @keyframes sPk1{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(76px,33px)}}
  @keyframes sPk2{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(76px,-33px)}}
  @keyframes sPk3{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(-76px,33px)}}
  @keyframes sPk4{0%{opacity:0;transform:translate(0,0)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(-76px,-33px)}}
  .pa-s-web .pa-s-file{animation:sFile 7s infinite}
  @keyframes sFile{0%,6%{opacity:0;transform:translateX(-24px)}14%,50%{opacity:1;transform:none}66%,86%{opacity:1;transform:translate(176px,-20px) scale(.45)}94%,100%{opacity:0;transform:translate(176px,-20px) scale(.45)}}
  .pa-s-inv .pa-s-u1{animation:sU 7s infinite}
  .pa-s-inv .pa-s-u2{animation:sU 7s .4s infinite}
  .pa-s-inv .pa-s-u3{animation:sU 7s .8s infinite}
  .pa-s-inv .pa-s-u4{animation:sU 7s 1.2s infinite}
  .pa-s-inv .pa-s-dl1{animation:sDl 7s 2.2s infinite}
  .pa-s-inv .pa-s-dl2{animation:sDl 7s 2.5s infinite}
  .pa-s-inv .pa-s-dl3{animation:sDl 7s 2.8s infinite}
  .pa-s-inv .pa-s-dl4{animation:sDl 7s 3.1s infinite}
  @keyframes sU{0%{opacity:0;transform:translateX(-10px)}8%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
  @keyframes sDl{0%{opacity:0;transform:scaleX(0)}8%,62%{opacity:1;transform:scaleX(1)}74%,100%{opacity:0;transform:scaleX(1)}}
  .pa-s-ai .pa-s-q{animation:sQ 7s infinite}
  .pa-s-ai .pa-s-typ{animation:sTyp 7s infinite}
  .pa-s-ai .pa-s-a{animation:sA 7s infinite}
  .pa-s-ai .pa-s-al1{animation:sAl 7s infinite}
  .pa-s-ai .pa-s-al2{animation:sAl 7s .3s infinite}
  .pa-s-ai .pa-s-al3{animation:sAl 7s .6s infinite}
  @keyframes sQ{0%,4%{opacity:0;transform:translateY(6px)}10%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
  @keyframes sTyp{0%,14%{opacity:0}18%,22%{opacity:1}26%{opacity:.3}30%,34%{opacity:1}38%{opacity:.3}42%{opacity:1}44%,100%{opacity:0}}
  @keyframes sA{0%,44%{opacity:0;transform:translateY(6px)}50%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
  @keyframes sAl{0%,50%{transform:scaleX(0)}62%,100%{transform:scaleX(1)}}
}

/* ===== Startseite: Einstieg mit „PRAEMON live“ =====
   Umgebung (Systeme, Leitungen, Datenpakete) → Kern (Schild, Ringe, Radar) → Portal (Lagemeldungen), darunter die fünf Schritte.
   18 s je Durchlauf: 0–18 % Erfassen, 18–37 % Vergleichen, 37–56 % Urteilen, 56–75 % Erklären, 75–94 % Handeln.
   Ruhige Fassung (Grundzustand): alle Meldungen sichtbar, ERP01 erledigt (grüner Haken), alle Schritte gefüllt. */
.pa-hero .pm-wrap{padding-top:60px;padding-bottom:128px}
.pa-hero-top{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:22px 56px;align-items:end}
.pa-hero .pa-h1{font-size:clamp(40px,5.3vw,76px);margin:0}
.pa-h1 > span,.pa-h1 > em{display:block;width:fit-content}
.pa-hero-r{padding-bottom:4px}
.pa-hero-r .pm-lead{font-size:17px;margin:0 0 24px}
@container pm (max-width:1000px){.pa-hero-top{grid-template-columns:minmax(0,1fr)}}
.pa-hero::after{content:"";position:absolute;left:50%;top:58%;width:1100px;height:700px;transform:translate(-50%,-30%);background:radial-gradient(closest-side,rgba(253,206,4,.10),rgba(253,206,4,0));pointer-events:none}
.pa-live-fig{margin-top:44px}
.pa-live-cap{align-items:center}
.pa-live-cap .pm-note{margin:0;flex:1 1 320px}
.pa-live{container-type:inline-size;container-name:pal;position:relative;background:linear-gradient(180deg,#0d1822,#0b141d);border:1px solid var(--pm-nacht-line);border-radius:18px;box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;color:var(--pm-auf-nacht);font-variant-numeric:tabular-nums}
.pa-live::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px);background-size:22px 22px;pointer-events:none}
.pa-live-bar{position:relative;display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;padding:12px 20px;border-bottom:1px solid var(--pm-nacht-line);background:rgba(21,40,58,.7)}
.pa-live-bar b{color:var(--pm-weiss);font-size:14px}
.pa-live-bar > span:not(.pa-tag):not(.pa-live-dot){font-size:12.5px;color:var(--pm-grau-hell)}
.pa-live-dot{width:9px;height:9px;border-radius:50%;background:var(--pm-punkt);box-shadow:0 0 0 4px rgba(47,208,127,.18)}
.pa-live-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1.12fr);align-items:center;gap:0 24px;padding:22px 26px 18px}

/* Umgebung */
.pa-env{position:relative;min-width:0}
.pa-env .pa-k{position:absolute;left:0;top:0}
.pa-env-svg{display:block;width:100%;height:auto;overflow:visible}
.pa-env-m{display:none;width:100%;max-width:400px;height:auto;margin:0 auto;overflow:visible}
.pa-ln{fill:none;stroke:#22384b;stroke-width:1.4}
.pa-pk{fill:none;stroke:var(--pm-gold);stroke-width:5;stroke-linecap:round;opacity:0}
.pa-n-box{fill:#15283a;stroke:#3a5168;stroke-width:1.5}
.pa-n-ic{fill:none;stroke:#c9d4dd;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pa-n-l{fill:#8fa3b3;font-size:11px;font-family:var(--pm-font);font-weight:600;letter-spacing:.02em}
.pa-n-st{fill:var(--pm-punkt)}
.pa-n-puls{fill:none;stroke:#f39c12;stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center}
.pa-n-adv{opacity:0}
.pa-n-adv circle{fill:#dd4b39}
.pa-n-adv path{stroke:#fff;stroke-width:1.8;stroke-linecap:round;fill:none}
.pa-n-ok circle{fill:var(--pm-punkt)}
.pa-n-ok path{stroke:#0f1b26;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}

/* Kern */
.pa-core{position:relative;display:flex;flex-direction:column;align-items:center;gap:18px;align-self:stretch;justify-content:center}
.pa-core::before{content:"";position:absolute;left:-24px;right:50%;top:calc(50% - 22px);height:1.5px;background:linear-gradient(90deg,#22384b,rgba(253,206,4,.5));z-index:0}
.pa-orb{position:relative;width:200px;height:200px;display:grid;place-items:center;z-index:1}
.pa-orb img{position:relative;width:86px;height:86px;filter:drop-shadow(0 0 18px rgba(253,206,4,.45));z-index:2}
.pa-ring{position:absolute;border-radius:50%}
.pa-ring1{inset:0;border:1px dashed rgba(253,206,4,.4)}
.pa-ring2{inset:20px;border:1px solid rgba(255,255,255,.09)}
.pa-ring2::before,.pa-ring2::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:var(--pm-gold);top:-4px;left:calc(50% - 3.5px);box-shadow:0 0 10px rgba(253,206,4,.9)}
.pa-ring2::after{top:auto;bottom:-4px;background:var(--pm-punkt);box-shadow:0 0 10px rgba(47,208,127,.9)}
.pa-ring3{inset:42px;border:2px dotted rgba(253,206,4,.28)}
.pa-sweep{position:absolute;inset:6px;border-radius:50%;background:conic-gradient(from 0deg,rgba(253,206,4,.34),rgba(253,206,4,0) 75deg,rgba(253,206,4,0));-webkit-mask:radial-gradient(closest-side,transparent 34%,#000 36%);mask:radial-gradient(closest-side,transparent 34%,#000 36%)}
.pa-orb-glow{position:absolute;inset:40px;border-radius:50%;background:radial-gradient(closest-side,rgba(253,206,4,.22),rgba(253,206,4,0))}
.pa-phase{position:relative;height:28px;min-width:170px;display:grid;place-items:center;z-index:1}
.pa-phase span{grid-area:1 / 1;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--pm-gold);white-space:nowrap;background:rgba(253,206,4,.1);border:1px solid rgba(253,206,4,.35);border-radius:999px;padding:4px 12px}
.pa-ph{opacity:0}
.pa-beam{position:absolute;left:calc(50% + 100px);right:-24px;top:calc(50% - 22px);height:1.5px;background:linear-gradient(90deg,rgba(253,206,4,.5),#22384b);z-index:0}
.pa-beam i{position:absolute;top:-2.5px;left:0;width:6px;height:6px;border-radius:50%;background:var(--pm-gold);box-shadow:0 0 8px rgba(253,206,4,.9);opacity:0}

/* Portal */
.pa-portal{position:relative;background:#0b1620;border:1px solid var(--pm-nacht-line);border-radius:12px;overflow:hidden;min-width:0;box-shadow:0 18px 44px rgba(0,0,0,.35)}
.pa-portal-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--pm-nacht-line);background:#101e2a}
.pa-portal-bar i{width:8px;height:8px;border-radius:50%;background:#2b4459}
.pa-portal-bar span{margin-left:8px;font-size:11px;color:var(--pm-grau-hell);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-feed{list-style:none;margin:0;padding:12px;display:grid;gap:8px}
.pa-f{display:grid;grid-template-columns:32px minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:9px 11px;background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);border-radius:10px;min-width:0}
.pa-f > div{min-width:0}
.pa-f b{display:block;color:var(--pm-weiss);font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-f small{display:block;font-size:11.5px;line-height:1.4;color:var(--pm-grau-hell);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-f time{font-size:10.5px;color:var(--pm-grau-hell)}
.pa-f-i{width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.pa-f-i svg{width:16px;height:16px}
.pa-f-ok{background:rgba(47,208,127,.14);color:var(--pm-punkt)}
.pa-f-warn{background:rgba(243,156,18,.16);color:#ffb84d}
.pa-f-krit{background:rgba(221,75,57,.2);color:#ff8a7d}
.pa-f-ai{background:rgba(253,206,4,.14);color:var(--pm-gold)}
.pa-f-spark{width:96px;height:30px}
.pa-f-band{fill:rgba(253,206,4,.2)}
.pa-f-line{fill:none;stroke:var(--pm-weiss);stroke-width:1.8;stroke-linejoin:round}
.pa-f-pt{fill:#ff6b5a}
.pa-f2{border-color:rgba(243,156,18,.45)}
.pa-f3{border-color:rgba(221,75,57,.45)}

/* Fünf Schritte unter der Bühne */
.pa-steps5{position:relative;list-style:none;margin:0;padding:6px 26px 22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.pa-s5 i{display:block;height:3px;border-radius:2px;background:#22384b;position:relative;overflow:hidden}
.pa-s5 i::after{content:"";position:absolute;inset:0;background:var(--pm-gold);transform-origin:left;transform:scaleX(1)}
.pa-s5 span{display:flex;gap:8px;align-items:baseline;margin-top:9px;font-size:13px;font-weight:700;color:var(--pm-weiss);white-space:nowrap}
.pa-s5 b{font-size:11px;color:var(--pm-gold);font-weight:700}

@container pal (max-width:1120px){
  .pa-live-grid{grid-template-columns:minmax(0,1fr) 180px minmax(0,1.15fr);gap:0 18px}
  .pa-orb{width:160px;height:160px}
  .pa-orb img{width:68px;height:68px}
  .pa-ring3{inset:34px}
  .pa-beam{left:calc(50% + 80px)}
}
@container pal (max-width:880px){
  .pa-live-grid{grid-template-columns:170px minmax(0,1fr)}
  .pa-env{display:none}
  .pa-core::before{display:none}
}
@container pal (max-width:560px){
  .pa-env{display:block;margin-bottom:-14px}
  .pa-env .pa-k,.pa-env-svg{display:none}
  .pa-env-m{display:block}
  .pa-live-bar{padding:10px 14px}
  .pa-live-bar > span:not(.pa-tag):not(.pa-live-dot){display:none}
  .pa-live-grid{grid-template-columns:minmax(0,1fr);gap:14px;padding:16px 14px 12px}
  .pa-core{gap:10px}
  .pa-orb{width:96px;height:96px}
  .pa-orb img{width:42px;height:42px}
  .pa-ring2{inset:12px}.pa-ring3{inset:22px}
  .pa-beam{display:none}
  .pa-phase{min-width:0}
  .pa-feed{padding:10px;gap:6px}
  .pa-f{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:8px 9px}
  .pa-f-i{width:28px;height:28px}
  .pa-f time,.pa-f-spark{display:none}
  .pa-f b,.pa-f small{white-space:normal}
  .pa-steps5{padding:4px 14px 16px;gap:5px}
  .pa-s5 span{font-size:9px;letter-spacing:-.01em}
  .pa-s5 b{display:none}
}

/* ===== Startseite: Bereiche in vier Spalten ===== */
.pm-areas.pa-cards4{grid-template-columns:repeat(4,minmax(0,1fr))}
.pa-cards4 .pa-sym{height:130px}
.pa-cards4 .pa-sym > svg{width:260px;height:112px}
.pa-cards4 .pm-q{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@container pm (max-width:1180px){.pm-areas.pa-cards4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pm (max-width:560px){.pm-areas.pa-cards4{grid-template-columns:minmax(0,1fr)}}
.pa-d-p{fill:#15283a;stroke:#c9d4dd;stroke-width:2;stroke-linejoin:round}
.pa-d-p2{opacity:.7}.pa-d-p3{opacity:.45}
.pa-d-l{fill:#c9d4dd}
.pa-d-top,.pa-d-pdf,.pa-d-l{transform-box:fill-box;transform-origin:left center}

/* ===== Startseite: PRAEMONai erklärt (statt Bildschirmfoto) ===== */
@container pm (max-width:1000px){.pa-ki-split{grid-template-columns:minmax(0,1fr);gap:36px}}
.pa-ki-q{justify-self:end;margin:0 0 10px auto;width:fit-content;max-width:85%;background:rgba(253,206,4,.12);border:1px solid rgba(253,206,4,.4);color:var(--pm-weiss);border-radius:12px 12px 2px 12px;padding:9px 12px;font-size:13px}
.pa-ki-typ{display:flex;gap:5px;padding:4px 2px 10px;opacity:0}
.pa-ki-typ i{width:6px;height:6px;border-radius:50%;background:var(--pm-gold)}
.pa-ki-a{display:grid;gap:10px;background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);border-radius:12px 12px 12px 2px;padding:12px 14px}
.pa-ki-r .pa-k{font-size:10px;margin-bottom:3px}
.pa-ki-r p{margin:0;font-size:13px;line-height:1.5;color:var(--pm-auf-nacht)}
.pa-ki-r .pa-chip{margin-right:6px}
.pa-ki-f{display:flex;gap:8px;align-items:center;margin-top:12px;font-size:11.5px;color:var(--pm-grau-hell)}
.pa-ki-f svg{width:14px;height:14px;color:var(--pm-gold);flex:none}

/* ===== Startseite: Für wen als Karten (3 / 2 / 1) ===== */
.pa-fuer .pm-card{display:flex;flex-direction:column;gap:6px}
.pa-fuer .pm-h3{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Startseite: Kennzahlen als dunkle Kacheln mit kleiner Szene, ragen in den Einstieg hinein ===== */
.pa-kpis-sec{position:relative;z-index:2;margin-top:-84px}
.pa-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.pa-kpi{position:relative;display:flex;flex-direction:column;gap:8px;background:linear-gradient(180deg,#16293b,#0f1b26 70%);border:1px solid #263a4c;border-radius:16px;padding:18px 20px 20px;color:var(--pm-auf-nacht);box-shadow:0 26px 60px rgba(15,27,38,.32);overflow:hidden;min-width:0}
.pa-kpi::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,var(--pm-gold),rgba(253,206,4,.15) 70%,rgba(253,206,4,0))}
.pa-kpi-v{display:block;width:100%;height:auto;margin:0 0 8px;overflow:visible}
.pa-kpi-n{display:flex;align-items:baseline;gap:9px;font-family:var(--pm-display);font-size:42px;font-weight:800;line-height:1;color:var(--pm-gold);letter-spacing:-.02em;white-space:nowrap}
.pa-kpi-n small{font-family:var(--pm-font);font-size:14px;font-weight:700;color:var(--pm-weiss);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-kpi p{margin:2px 0 0;font-size:13.5px;line-height:1.5;color:var(--pm-auf-nacht)}
.pa-kpi .kv-l{fill:var(--pm-grau-hell);font-size:9px;font-family:var(--pm-font)}
.pa-kpi .kv-c{fill:#c9d4dd;font-size:8.5px;font-family:var(--pm-font);font-weight:600;text-anchor:middle}
.pa-kpi .kv-cg{fill:#8fa3b3}
.kv-band{fill:rgba(253,206,4,.16)}
.kv-line{fill:none;stroke:#c9d4dd;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.kv-pt{fill:#ff6b5a;stroke:#0f1b26;stroke-width:2}
.kv-ring{fill:none;stroke:#ff6b5a;stroke-width:1.5;opacity:.5;transform-box:fill-box;transform-origin:center}
.kv-src rect{fill:#15283a;stroke:#3a5168;stroke-width:1}
.kv-src text,.kv-res text{fill:#c9d4dd;font-size:8.5px;font-family:var(--pm-font);font-weight:600;text-anchor:middle}
.kv-ln,.kv-out{fill:none;stroke:#2b4459;stroke-width:1.5}
.kv-out{stroke-dasharray:3 4}
.kv-pk{fill:none;stroke:var(--pm-gold);stroke-width:4.5;stroke-linecap:round;stroke-dasharray:.1 99.9;opacity:0}
.kv-box{fill:rgba(253,206,4,.08);stroke:rgba(253,206,4,.6);stroke-width:1.2}
.kv-bt{fill:var(--pm-weiss);font-size:9.5px;font-family:var(--pm-font);font-weight:700;text-anchor:middle}
.kv-res rect{fill:rgba(221,75,57,.22)}
.kv-res text{fill:#ff8a7d;font-weight:700}
.kv-res{transform-box:fill-box;transform-origin:center}
.kv-s rect{fill:#15283a;stroke:#3a5168;stroke-width:1}
.kv-s text{fill:#c9d4dd;font-size:9px;font-family:var(--pm-font);font-weight:600}
.kv-s circle{fill:var(--pm-punkt)}
.kv-scan{fill:var(--pm-gold);opacity:0}
.kv-de{fill:rgba(47,208,127,.05);stroke:rgba(47,208,127,.5);stroke-width:1.2;stroke-dasharray:4 4}
.kv-rz circle{fill:#15283a;stroke:var(--pm-punkt);stroke-width:1.5}
.kv-rz path{fill:none;stroke:#c9d4dd;stroke-width:1.5;stroke-linecap:round}
.kv-cloud{fill:#15283a;stroke:#3a5168;stroke-width:1.5}
.kv-x{fill:none;stroke:#ff6b5a;stroke-width:2.6;stroke-linecap:round}
@container pm (max-width:1100px){.pa-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@container pm (max-width:560px){.pa-kpis{grid-template-columns:minmax(0,1fr)}.pa-kpis-sec{margin-top:-56px}}

/* ===== Startseite: Leitstand als Wandbildschirm ===== */
.pa-tv{position:relative;background:#05090d;border:1px solid #2b4459;border-radius:16px;padding:10px 10px 18px;box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 6px rgba(255,255,255,.02),0 0 80px rgba(253,206,4,.08)}
.pa-tv::after{content:"";position:absolute;left:50%;bottom:6px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--pm-punkt);box-shadow:0 0 8px rgba(47,208,127,.8)}
.pm-root .pa-tv img{display:block;width:100%;height:auto;border-radius:6px}
.pa-tv-fig .pm-cap{margin-top:16px}

/* ===== Startseite: Neu im Portal (News-Feed, Hardware-Katalog, Collective Intelligence) ===== */
.pa-neu.pa-cards .pa-card h3{white-space:normal}
.pa-cards.pa-neu{grid-template-columns:repeat(6,minmax(0,1fr))}
.pa-cards.pa-neu > .pa-card{grid-column:span 2}
.pa-cards.pa-neu > .pa-card-wide{grid-column:span 3}
@container pm (max-width:1180px){.pa-cards.pa-neu{grid-template-columns:repeat(2,minmax(0,1fr))}.pa-cards.pa-neu > .pa-card,.pa-cards.pa-neu > .pa-card-wide{grid-column:auto}.pa-cards.pa-neu > .pa-card-ci{order:5;grid-column:1 / -1}}
@container pm (max-width:560px){.pa-cards.pa-neu{grid-template-columns:minmax(0,1fr)}}
.pa-nscene{position:relative;height:244px;background:var(--pm-nacht);border-bottom:1px solid var(--pm-rand);overflow:hidden;padding:44px 16px 14px;color:var(--pm-auf-nacht)}
.pa-nscene::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);background-size:24px 24px;pointer-events:none}
.pa-nscene > *{position:relative}
.pa-nscene > .pa-nscene-tag{position:absolute;top:12px;left:12px;z-index:2}
.pa-nf-bar{position:absolute;top:10px;right:14px;display:flex;align-items:center;gap:8px;font-size:11px;color:var(--pm-grau-hell)}
.pa-nf-bar span{display:inline-flex;align-items:center;gap:5px;color:var(--pm-gold);font-weight:700}
.pa-nf-bar svg{width:12px;height:12px}
.pa-nf-list{list-style:none;margin:0;padding:0;display:grid;gap:5px}
.pa-nf-list li{display:grid;grid-template-columns:74px minmax(0,1fr);gap:8px;align-items:center;background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);border-radius:9px;padding:4px 9px}
.pa-nf-list .pa-chip{justify-content:center;font-size:10px;padding:0 6px}
.pa-nf-list b{display:block;color:var(--pm-weiss);font-size:11.5px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-nf-list small{display:block;font-size:10px;line-height:1.3;color:var(--pm-grau-hell);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-nf-list .pa-nf-aus{opacity:.38;border-style:dashed}
.pa-nf-list .pa-nf-aus b{text-decoration:line-through}
.pa-hk-head{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--pm-grau-hell);margin-bottom:6px}
.pa-hk-head span:last-child{color:var(--pm-gold)}
.pa-hk-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.pa-hk-list li{display:flex;justify-content:space-between;align-items:center;gap:8px;background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);border-radius:9px;padding:6px 9px;min-width:0}
.pa-hk-list li > div{min-width:0;display:flex;align-items:baseline;gap:7px;white-space:nowrap;overflow:hidden}
.pa-hk-list b{color:var(--pm-weiss);font-size:12px;line-height:1.4}
.pa-hk-list small{font-size:10.5px;color:var(--pm-grau-hell);overflow:hidden;text-overflow:ellipsis}
.pa-hk-list .pa-chip{font-size:10px;padding:0 8px}
.pa-hk-next{display:grid;grid-template-columns:18px minmax(0,1fr);gap:8px;align-items:center;margin-top:8px;border:1px solid rgba(253,206,4,.5);background:rgba(253,206,4,.08);border-radius:9px;padding:6px 10px}
.pa-hk-next svg{width:16px;height:16px;color:var(--pm-gold)}
.pa-hk-next b{display:block;color:var(--pm-weiss);font-size:12px;line-height:1.3}
.pa-hk-next small{display:block;font-size:10.5px;color:var(--pm-grau-hell)}
.pa-hk-scan{position:absolute;left:12px;right:12px;top:66px;height:2px;background:linear-gradient(90deg,rgba(253,206,4,0),var(--pm-gold),rgba(253,206,4,0));opacity:0}
.pa-ci{padding:10px 8px 6px;display:grid;place-items:center}
.pa-ci-svg{width:100%;max-width:380px;height:100%;overflow:visible}
.ci-ln{stroke:#2b4459;stroke-width:1.4;stroke-dasharray:3 4}
.ci-pk{fill:none;stroke:var(--pm-gold);stroke-width:5;stroke-linecap:round;stroke-dasharray:.1 99.9;opacity:0}
.ci-in{stroke:#ff6b5a}
.ci-core-bg{fill:#0b1620;stroke:rgba(253,206,4,.7);stroke-width:1.5}
.ci-cell{fill:#1c3348}
.ci-cell.ci-hot{fill:var(--pm-gold)}
.ci-box{fill:#15283a;stroke:#3a5168;stroke-width:1.2}
.ci-ui{fill:none;stroke:#3a5168;stroke-width:1.5;stroke-linecap:round}
.ci-ring{fill:none;stroke:var(--pm-gold);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center}
.ci-src .ci-ring{stroke:#ff6b5a}
.ci-src .ci-box{stroke:#ff6b5a;fill:rgba(221,75,57,.15)}
.ci-t{fill:#c9d4dd;font-size:10px;font-family:var(--pm-font);font-weight:600;text-anchor:middle}
.ci-t1{fill:#ff8a7d}.ci-t2{fill:var(--pm-gold)}

/* Ticketsystem */
.pa-tk{display:grid;align-items:center;padding:44px 22px 16px}
.pa-tk-card{background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);border-radius:12px;padding:12px 14px;max-width:520px;width:100%;margin:0 auto}
.pa-tk-head{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.pa-tk-head b{color:var(--pm-weiss);font-size:13px}
.pa-tk-st{display:inline-flex;gap:4px}
.pa-tk-st i{font-style:normal;font-size:10px;font-weight:700;border-radius:999px;padding:1px 8px;background:rgba(143,163,179,.12);color:#5b7083}
.pa-tk-st .pa-tk-s3{background:rgba(47,208,127,.16);color:var(--pm-punkt)}
.pa-tk-log{list-style:none;margin:0;padding:0 0 0 12px;border-left:2px solid #2b4459;display:grid;gap:8px}
.pa-tk-log li{position:relative;display:flex;gap:10px;font-size:12px;color:var(--pm-auf-nacht)}
.pa-tk-log li::before{content:"";position:absolute;left:-17px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--pm-gold)}
.pa-tk-log time{color:var(--pm-grau-hell);font-variant-numeric:tabular-nums}
.pa-tk-log .pa-tk-l3::before{background:var(--pm-punkt)}
/* MDM */
.pa-mdm{display:grid;align-content:center;gap:16px;padding:44px 22px 16px}
.pa-mdm-row{display:flex;justify-content:center;gap:16px}
.pa-mdm-ph{position:relative;width:104px;height:118px;border:2px solid #3a5168;border-radius:16px;background:#0b1620;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:0 6px 10px;gap:3px}
.pa-mdm-ph i{position:absolute;top:7px;left:50%;width:22px;height:3px;margin-left:-11px;border-radius:2px;background:#2b4459}
.pa-mdm-ph b{color:var(--pm-weiss);font-size:10px;text-align:center;line-height:1.25}
.pa-mdm-ph span{font-size:9.5px;font-weight:700;color:var(--pm-punkt);background:rgba(47,208,127,.14);border-radius:999px;padding:0 7px}
.pa-mdm-ph::before{content:"";position:absolute;top:26px;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:9px;border:2px solid rgba(253,206,4,.6);background:rgba(253,206,4,.08)}
.pa-mdm-portal{display:flex;justify-content:center;align-items:center;gap:8px;font-size:11.5px;color:var(--pm-grau-hell)}
.pa-mdm-portal svg{width:15px;height:15px;color:var(--pm-gold)}
.pa-card-mdm{border-color:rgba(253,206,4,.55)}
.pa-mdm-btn{align-self:flex-start;margin-top:8px}

/* ===== Startseite: Vergleich als Karten – das Übliche wird durchgestrichen, PRAEMON darunter ===== */
.pa-vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pa-vs-card{position:relative;display:flex;flex-direction:column;gap:12px;background:var(--pm-weiss);border:1px solid var(--pm-rand);border-radius:18px;padding:20px 22px 22px;min-width:0;overflow:hidden}
.pa-vs-card::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:radial-gradient(closest-side,rgba(253,206,4,.16),rgba(253,206,4,0));pointer-events:none}
.pa-vs-top{display:flex;align-items:center;gap:12px}
.pa-vs-ico{width:38px;height:38px;border-radius:11px;background:var(--pm-nacht);color:var(--pm-gold);display:grid;place-items:center;flex:none;box-shadow:0 6px 16px rgba(15,27,38,.18)}
.pa-vs-ico svg{width:19px;height:19px}
.pa-vs-top h3{margin:0;font-family:var(--pm-display-s);font-size:18px;line-height:1.25;color:var(--pm-tinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-vs-alt{margin:0;display:flex;align-items:baseline;gap:10px;font-size:14.5px;line-height:1.5;color:var(--pm-grau);min-width:0}
.pa-vs-k{flex:none;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:#b04a3c;background:rgba(221,75,57,.08);border-radius:999px;padding:1px 8px}
.pa-vs-alt s{text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:linear-gradient(rgba(221,75,57,.75),rgba(221,75,57,.75)) no-repeat 0 58% / 100% 2px;padding:0 2px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.pa-vs-neu{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;background:var(--pm-nacht);color:var(--pm-auf-nacht);border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.55;margin-top:auto}
.pa-vs-neu b{color:var(--pm-weiss)}
.pa-vs-neu .pa-dok{position:static;margin-top:1px}
.pa-vs-legend{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:13px;color:var(--pm-grau)}
.pa-vs-legend s{text-decoration:none;background:linear-gradient(rgba(221,75,57,.75),rgba(221,75,57,.75)) no-repeat 0 58% / 100% 2px}
.pa-vs-legend b{color:var(--pm-tinte)}
@container pm (max-width:900px){.pa-vs{grid-template-columns:minmax(0,1fr)}}
@container pm (max-width:560px){.pa-vs-alt{flex-direction:column;gap:4px}.pa-vs-alt s{white-space:normal}}

/* ===== Startseite: Vergleich mit Symbolen ===== */
.pa-diff .pm-diff-row > div:nth-child(2),.pa-diff .pm-diff-row > div:nth-child(3){position:relative;padding-left:54px}
.pa-dx,.pa-dok{position:absolute;left:20px;top:18px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center}
.pa-dx{background:rgba(221,75,57,.1);color:#c0392b}
.pa-dok{background:rgba(47,208,127,.16);color:var(--pm-punkt)}
.pa-dx svg,.pa-dok svg{width:12px;height:12px;stroke-width:3}

@media (min-width:0){
  /* Einstieg: Überschrift und Text einmalig hereinblenden */
  .pa-in{animation:heroIn .9s cubic-bezier(.2,.7,.2,1) both}
  .pa-in1{animation-delay:.08s}.pa-in2{animation-delay:.34s}.pa-in3{animation-delay:.55s}.pa-in4{animation-delay:.7s}
  .pa-h1 .pa-in{animation-name:heroBlur;animation-duration:1.1s}
  .pa-h1 em{background:linear-gradient(100deg,var(--pm-gold) 0 42%,#fff4b8 50%,var(--pm-gold) 58% 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
  .pa-h1 em.pa-in2{animation:heroBlur 1.1s cubic-bezier(.2,.7,.2,1) .34s both,heroShine 1.5s ease-in-out 1.45s both}
  .pa-live-fig{animation:heroIn 1.1s cubic-bezier(.2,.7,.2,1) .35s both}
  .pa-hero::after{animation:heroAur 14s ease-in-out infinite alternate}
  @keyframes heroIn{0%{opacity:0;transform:translateY(16px)}100%{opacity:1;transform:none}}
  @keyframes heroBlur{0%{opacity:0;transform:translateY(22px);filter:blur(12px)}100%{opacity:1;transform:none;filter:blur(0)}}
  @keyframes heroShine{0%{background-position:100% 0}100%{background-position:0 0}}
  @keyframes heroAur{0%{transform:translate(-62%,-34%)}100%{transform:translate(-38%,-24%)}}

  /* Bühne baut sich auf: Systeme erscheinen, Leitungen zeichnen sich zum Kern, der Kern startet, dann fließen Daten */
  .pa-live .pa-n-in{transform-box:fill-box;transform-origin:center;animation:liNode .7s cubic-bezier(.3,1.5,.5,1) both}
  .pa-live .pa-ln{stroke-dasharray:100;animation:liDraw 1.2s cubic-bezier(.4,0,.2,1) both}
  .pa-live .pa-pks{animation:liFade .8s 1.8s both}
  .pa-live .pa-orb{animation:liOrbIn 1.1s cubic-bezier(.3,1.4,.5,1) 1.15s both}
  .pa-live .pa-phase,.pa-live .pa-core::before,.pa-live .pa-beam{animation:liFade .6s 1.6s both}
  @keyframes liNode{0%{opacity:0;transform:scale(.3)}100%{opacity:1;transform:none}}
  @keyframes liDraw{0%{stroke-dashoffset:100}100%{stroke-dashoffset:0}}
  @keyframes liFade{0%{opacity:0}100%{opacity:1}}
  @keyframes liOrbIn{0%{opacity:0;transform:scale(.35)}60%{opacity:1;transform:scale(1.08)}100%{opacity:1;transform:none}}

  /* Datenpakete von den Systemen zum Kern */
  .pa-live .pa-pk{stroke-dasharray:.1 99.9;animation:liPk 2.6s linear infinite}
  .pa-live .pa-pk-erp01{animation:liPk 2.6s linear infinite,liErpPk 18s infinite}
  .pa-live .pa-pk-erp01b{stroke:#f39c12;stroke-width:4;stroke-dasharray:.1 12.4;animation:liMove 1.1s linear infinite,liErpVis 18s infinite}
  @keyframes liPk{0%{stroke-dashoffset:100;opacity:0}10%,88%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  @keyframes liMove{0%{stroke-dashoffset:25}100%{stroke-dashoffset:0}}
  @keyframes liErpVis{0%,19%{opacity:0}22%,76%{opacity:1}80%,100%{opacity:0}}
  @keyframes liErpPk{0%,19%{stroke:var(--pm-gold)}22%,76%{stroke:#f39c12}80%,100%{stroke:var(--pm-gold)}}
  /* ERP01 fällt auf, dann Herstellerwarnung auf drei Servern, am Ende erledigt */
  .pa-live .pa-n-erp01 .pa-n-box{animation:liErpBox 18s infinite}
  .pa-live .pa-n-erp01 .pa-n-st{animation:liErpSt 18s infinite}
  .pa-live .pa-n-erp01 .pa-n-puls{animation:liPuls 1.4s ease-out infinite,liErpVis 18s infinite}
  .pa-live .pa-n-adv{animation:liAdv 18s infinite}
  .pa-live .pa-n-ok{animation:liOk 18s infinite}
  @keyframes liErpBox{0%,19%{fill:#15283a;stroke:#3a5168}22%,76%{fill:rgba(243,156,18,.18);stroke:#f39c12}80%,100%{fill:#15283a;stroke:#3a5168}}
  @keyframes liErpSt{0%,19%{fill:#2fd07f}22%,76%{fill:#f39c12}80%,100%{fill:#2fd07f}}
  @keyframes liPuls{0%{transform:scale(.75);stroke-opacity:.9}100%{transform:scale(1.5);stroke-opacity:0}}
  @keyframes liAdv{0%,38%{opacity:0;transform:scale(.4)}41%,76%{opacity:1;transform:none}80%,100%{opacity:0}}
  @keyframes liOk{0%,79%{opacity:0}82%,93%{opacity:1}97%,100%{opacity:0}}
  .pa-n-adv,.pa-n-ok{transform-box:fill-box;transform-origin:center}

  /* Kern: Ringe, Radar, Leuchten, Phase */
  .pa-live .pa-ring1{animation:liRot 40s linear infinite}
  .pa-live .pa-ring2{animation:liRot 16s linear infinite reverse}
  .pa-live .pa-ring3{animation:liRot 10s linear infinite}
  .pa-live .pa-sweep{animation:liRot 3.2s linear infinite}
  .pa-live .pa-orb-glow{animation:liGlow 3s ease-in-out infinite}
  @keyframes liRot{to{transform:rotate(360deg)}}
  @keyframes liGlow{0%,100%{opacity:.6;transform:scale(.92)}50%{opacity:1;transform:scale(1.08)}}
  .pa-live .pa-ph0{opacity:0}
  .pa-live .pa-ph1{animation:liPh1 18s infinite}.pa-live .pa-ph2{animation:liPh2 18s infinite}.pa-live .pa-ph3{animation:liPh3 18s infinite}
  .pa-live .pa-ph4{animation:liPh4 18s infinite}.pa-live .pa-ph5{animation:liPh5 18s infinite}
  @keyframes liPh1{0%,16%{opacity:1;transform:none}18%,100%{opacity:0;transform:translateY(-6px)}}
  @keyframes liPh2{0%,17%{opacity:0;transform:translateY(6px)}19%,35%{opacity:1;transform:none}37%,100%{opacity:0;transform:translateY(-6px)}}
  @keyframes liPh3{0%,36%{opacity:0;transform:translateY(6px)}38%,54%{opacity:1;transform:none}56%,100%{opacity:0;transform:translateY(-6px)}}
  @keyframes liPh4{0%,55%{opacity:0;transform:translateY(6px)}57%,73%{opacity:1;transform:none}75%,100%{opacity:0;transform:translateY(-6px)}}
  @keyframes liPh5{0%,74%{opacity:0;transform:translateY(6px)}76%,93%{opacity:1;transform:none}96%,100%{opacity:0}}
  .pa-live .pa-beam i{animation:liBeam 1.8s linear infinite}
  .pa-live .pa-beam i:nth-child(2){animation-delay:.6s}.pa-live .pa-beam i:nth-child(3){animation-delay:1.2s}
  @keyframes liBeam{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 6px);opacity:0}}

  /* Portal: Meldungen nacheinander, die neueste leuchtet */
  .pa-live .pa-f{animation:liF 18s infinite}
  .pa-live .pa-f1{animation-name:liF1}.pa-live .pa-f2{animation-name:liF2}.pa-live .pa-f3{animation-name:liF3}.pa-live .pa-f4{animation-name:liF4}.pa-live .pa-f5{animation-name:liF5}
  @keyframes liF1{0%,1%{opacity:0;transform:translateY(-8px)}4%,16%{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(47,208,127,.6),0 0 24px rgba(47,208,127,.18)}20%,94%{opacity:1;box-shadow:none}98%,100%{opacity:0}}
  @keyframes liF2{0%,19%{opacity:0;transform:translateY(-8px)}22%,35%{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(243,156,18,.7),0 0 24px rgba(243,156,18,.2)}39%,94%{opacity:1;box-shadow:none}98%,100%{opacity:0}}
  @keyframes liF3{0%,38%{opacity:0;transform:translateY(-8px)}41%,54%{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(221,75,57,.7),0 0 24px rgba(221,75,57,.22)}58%,94%{opacity:1;box-shadow:none}98%,100%{opacity:0}}
  @keyframes liF4{0%,57%{opacity:0;transform:translateY(-8px)}60%,73%{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(253,206,4,.6),0 0 24px rgba(253,206,4,.18)}77%,94%{opacity:1;box-shadow:none}98%,100%{opacity:0}}
  @keyframes liF5{0%,76%{opacity:0;transform:translateY(-8px)}79%,94%{opacity:1;transform:none;box-shadow:0 0 0 1px rgba(47,208,127,.6),0 0 24px rgba(47,208,127,.18)}98%,100%{opacity:0}}
  .pa-live .pa-type{animation:liType 18s steps(40,end) infinite}
  @keyframes liType{0%,59%{clip-path:inset(0 100% 0 0)}72%,100%{clip-path:inset(0 0 0 0)}}
  /* Fünf Schritte füllen sich im Takt */
  .pa-live .pa-s5 i::after{animation:liS 18s infinite}
  .pa-live .pa-s5a i::after{animation-name:liSa}.pa-live .pa-s5b i::after{animation-name:liSb}.pa-live .pa-s5c i::after{animation-name:liSc}
  .pa-live .pa-s5d i::after{animation-name:liSd}.pa-live .pa-s5e i::after{animation-name:liSe}
  @keyframes liSa{0%{transform:scaleX(0)}18%,95%{transform:scaleX(1)}100%{transform:scaleX(0)}}
  @keyframes liSb{0%,18%{transform:scaleX(0)}37%,95%{transform:scaleX(1)}100%{transform:scaleX(0)}}
  @keyframes liSc{0%,37%{transform:scaleX(0)}56%,95%{transform:scaleX(1)}100%{transform:scaleX(0)}}
  @keyframes liSd{0%,56%{transform:scaleX(0)}75%,95%{transform:scaleX(1)}100%{transform:scaleX(0)}}
  @keyframes liSe{0%,75%{transform:scaleX(0)}94%,95%{transform:scaleX(1)}100%{transform:scaleX(0)}}
  .pa-live .pa-s5 span{animation:liLbl 18s infinite}
  .pa-live .pa-s5a span{animation-name:liLa}.pa-live .pa-s5b span{animation-name:liLb}.pa-live .pa-s5c span{animation-name:liLc}.pa-live .pa-s5d span{animation-name:liLd}.pa-live .pa-s5e span{animation-name:liLe}
  @keyframes liLa{0%,18%{color:var(--pm-gold)}20%,100%{color:var(--pm-weiss)}}
  @keyframes liLb{0%,18%{color:var(--pm-grau-hell)}19%,37%{color:var(--pm-gold)}39%,100%{color:var(--pm-weiss)}}
  @keyframes liLc{0%,37%{color:var(--pm-grau-hell)}38%,56%{color:var(--pm-gold)}58%,100%{color:var(--pm-weiss)}}
  @keyframes liLd{0%,56%{color:var(--pm-grau-hell)}57%,75%{color:var(--pm-gold)}77%,100%{color:var(--pm-weiss)}}
  @keyframes liLe{0%,75%{color:var(--pm-grau-hell)}76%,94%{color:var(--pm-gold)}96%,100%{color:var(--pm-weiss)}}

  /* Dokumentation: Seiten fächern auf, PDF entsteht */
  .pa-s-doc .pa-d-p3{animation:dP3 7s infinite}
  .pa-s-doc .pa-d-p2{animation:dP2 7s infinite}
  .pa-s-doc .pa-d-l{animation:sDl 7s infinite}
  .pa-s-doc .pa-d-l:nth-of-type(2){animation-delay:.3s}.pa-s-doc .pa-d-l:nth-of-type(3){animation-delay:.6s}.pa-s-doc .pa-d-l:nth-of-type(4){animation-delay:.9s}
  .pa-s-doc .pa-d-pdf{animation:dPdf 7s infinite}
  @keyframes dP3{0%,10%{transform:translate(-20px,-12px)}30%,90%{transform:none}100%{transform:translate(-20px,-12px)}}
  @keyframes dP2{0%,10%{transform:translate(-10px,-6px)}30%,90%{transform:none}100%{transform:translate(-10px,-6px)}}
  @keyframes dPdf{0%,45%{opacity:0;transform:scale(.5)}52%{opacity:1;transform:scale(1.12)}58%,90%{opacity:1;transform:none}100%{opacity:0}}

  /* PRAEMONai: Frage, Tippen, Antwort in drei Teilen */
  .pa-ki .pa-ki-q{animation:kiQ 12s infinite}
  .pa-ki .pa-ki-typ{animation:kiTyp 12s infinite}
  .pa-ki .pa-ki-typ i{animation:sBlink .9s infinite}
  .pa-ki .pa-ki-typ i:nth-child(2){animation-delay:.2s}.pa-ki .pa-ki-typ i:nth-child(3){animation-delay:.4s}
  .pa-ki .pa-ki-a{animation:kiA 12s infinite}
  .pa-ki .pa-ki-r1{animation:kiR 12s infinite}.pa-ki .pa-ki-r2{animation:kiR2 12s infinite}.pa-ki .pa-ki-r3{animation:kiR3 12s infinite}
  @keyframes kiQ{0%{opacity:0;transform:translateY(8px)}5%,94%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes kiTyp{0%,8%{opacity:0;height:0;padding:0}10%,24%{opacity:1;height:auto;padding:4px 2px 10px}26%,100%{opacity:0;height:0;padding:0}}
  @keyframes kiA{0%,25%{opacity:0;transform:translateY(8px)}29%,94%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes kiR{0%,27%{opacity:0}31%,100%{opacity:1}}
  @keyframes kiR2{0%,36%{opacity:0}40%,100%{opacity:1}}
  @keyframes kiR3{0%,45%{opacity:0}49%,100%{opacity:1}}
  @keyframes sBlink{0%,100%{opacity:1}50%{opacity:.25}}

  /* Kennzahlen: Verlauf gegen die Baseline */
  .pa-kpi1 .kv-line{stroke-dasharray:100;animation:kvDraw 7s infinite}
  .pa-kpi1 .kv-pt{animation:kvPt 7s infinite}
  .pa-kpi1 .kv-ring{animation:kvRing 1.6s ease-out infinite}
  @keyframes kvDraw{0%{stroke-dashoffset:100}45%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
  @keyframes kvPt{0%,42%{opacity:0;transform:scale(0)}48%{opacity:1;transform:scale(1.5)}54%,92%{opacity:1;transform:none}100%{opacity:0}}
  .pa-kpi1 .kv-pt{transform-box:fill-box;transform-origin:center}
  @keyframes kvRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(3);opacity:0}}
  /* Kennzahlen: sechs Quellen gegen den Patchstand */
  .pa-kpi2 .kv-pk{animation:kvPk 2.4s linear infinite}
  .pa-kpi2 .kv-pk2{animation-delay:.8s}.pa-kpi2 .kv-pk3{animation-delay:1.6s}
  .pa-kpi2 .kv-res{animation:kvRes 2.4s infinite}
  @keyframes kvPk{0%{stroke-dashoffset:100;opacity:0}10%,85%{opacity:1}100%{stroke-dashoffset:0;opacity:0}}
  @keyframes kvRes{0%,70%{transform:none}80%{transform:scale(1.12)}90%,100%{transform:none}}
  .pa-kpi2 .kv-src rect{animation:kvSrc 4.8s infinite}
  @keyframes kvSrc{0%,100%{stroke:#3a5168}50%{stroke:rgba(253,206,4,.6)}}
  /* Kennzahlen: Dienste werden erkannt */
  .pa-kpi3 .kv-scan{animation:kvScan 6s linear infinite}
  .pa-kpi3 .kv-s circle{animation:kvDot 6s infinite}
  .pa-kpi3 .kv-s1 circle,.pa-kpi3 .kv-s4 circle{animation-delay:.4s}
  .pa-kpi3 .kv-s2 circle,.pa-kpi3 .kv-s5 circle{animation-delay:1.3s}
  .pa-kpi3 .kv-s3 circle,.pa-kpi3 .kv-s6 circle{animation-delay:2.2s}
  @keyframes kvScan{0%{transform:translateX(0);opacity:0}5%{opacity:.9}45%{transform:translateX(236px);opacity:.9}50%,100%{transform:translateX(236px);opacity:0}}
  @keyframes kvDot{0%{fill:#2b4459}4%,88%{fill:var(--pm-punkt)}100%{fill:#2b4459}}
  .pa-kpi3 .kv-s rect{animation:kvChip 6s infinite}
  .pa-kpi3 .kv-s1 rect,.pa-kpi3 .kv-s4 rect{animation-delay:.4s}
  .pa-kpi3 .kv-s2 rect,.pa-kpi3 .kv-s5 rect{animation-delay:1.3s}
  .pa-kpi3 .kv-s3 rect,.pa-kpi3 .kv-s6 rect{animation-delay:2.2s}
  @keyframes kvChip{0%{stroke:#3a5168}3%{stroke:var(--pm-gold)}15%,100%{stroke:#3a5168}}
  /* Kennzahlen: Daten bleiben in Deutschland */
  .pa-kpi4 .kv-pk4{animation:kvPk 2s linear infinite}
  .pa-kpi4 .kv-pk5{animation:kvPk 2s linear 1s infinite}
  .pa-kpi4 .kv-pk6{stroke:#ff6b5a;animation:kvBlock 3s linear infinite}
  .pa-kpi4 .kv-x{animation:kvX 3s infinite}
  @keyframes kvBlock{0%{stroke-dashoffset:100;opacity:0}10%{opacity:1}38%{stroke-dashoffset:60;opacity:1}46%,100%{stroke-dashoffset:60;opacity:0}}
  @keyframes kvX{0%,36%{opacity:.7}42%{opacity:1;stroke-width:3.6}55%,100%{opacity:.7;stroke-width:2.6}}

  /* Neu im Portal: News-Feed – Meldungen kommen an, Fremdes wird ausgeblendet */
  .pa-nf .pa-nf-list .pa-nf1{animation:nf1 9s infinite}
  .pa-nf .pa-nf-list .pa-nf2{animation:nfAus 9s infinite}
  .pa-nf .pa-nf-list .pa-nf3{animation:nf3 9s infinite}
  .pa-nf .pa-nf-list .pa-nf4{animation:nf4 9s infinite}
  @keyframes nf1{0%,4%{opacity:0;transform:translateY(-10px)}9%,92%{opacity:1;transform:none;border-color:var(--pm-nacht-line)}12%{border-color:rgba(253,206,4,.7)}100%{opacity:0}}
  @keyframes nfAus{0%,18%{opacity:0;transform:translateY(-10px)}23%,30%{opacity:1;transform:none}38%,92%{opacity:.38;transform:none}100%{opacity:0}}
  @keyframes nf3{0%,40%{opacity:0;transform:translateY(-10px)}45%,92%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes nf4{0%,58%{opacity:0;transform:translateY(-10px)}63%,92%{opacity:1;transform:none}100%{opacity:0}}
  .pa-nf .pa-nf2 b{animation:nfStrike 9s infinite}
  @keyframes nfStrike{0%,32%{text-decoration-color:transparent}36%,100%{text-decoration-color:currentColor}}
  /* Neu im Portal: Hardware-Katalog – Abgleich Zeile für Zeile, dann der Nachfolger */
  .pa-hk .pa-hk-scan{animation:hkScan 8s infinite}
  .pa-hk .pa-hk-list .pa-chip{animation:hkChip 8s infinite}
  .pa-hk .pa-hk1 .pa-chip{animation-name:hk1}.pa-hk .pa-hk2 .pa-chip{animation-name:hk2}.pa-hk .pa-hk3 .pa-chip{animation-name:hk3}
  .pa-hk .pa-hk-next{animation:hkNext 8s infinite}
  @keyframes hkScan{0%{transform:translateY(0);opacity:0}4%{opacity:1}44%{transform:translateY(102px);opacity:1}48%,100%{transform:translateY(102px);opacity:0}}
  @keyframes hk1{0%,12%{opacity:0;transform:scale(.7)}16%,92%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes hk2{0%,26%{opacity:0;transform:scale(.7)}30%,92%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes hk3{0%,40%{opacity:0;transform:scale(.7)}44%,92%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes hkNext{0%,52%{opacity:0;transform:translateY(8px)}58%,92%{opacity:1;transform:none}100%{opacity:0}}
  .pa-hk .pa-hk2{animation:hkRow 8s infinite}
  @keyframes hkRow{0%,28%{border-color:var(--pm-nacht-line)}32%,60%{border-color:rgba(221,75,57,.6)}66%,100%{border-color:var(--pm-nacht-line)}}
  /* Neu im Portal: Collective Intelligence – erkannt, anonym geteilt, überall bekannt */
  .pa-ci .ci-src .ci-ring{animation:ciSrc 8s infinite}
  .pa-ci .ci-in{animation:ciIn 8s linear infinite}
  .pa-ci .ci-out{animation:ciOut 8s linear infinite}
  .pa-ci .ci-core-bg{animation:ciCore 8s infinite}
  .pa-ci .ci-cell{animation:ciCell 8s infinite}
  .pa-ci .ci-cell.ci-hot{animation-name:ciHot}
  .pa-ci .ci-dst .ci-ring{animation:ciDst 8s infinite}
  .pa-ci .ci-t1{animation:ciT1 8s infinite}.pa-ci .ci-t2{animation:ciT2 8s infinite}.pa-ci .ci-t3{animation:ciT3 8s infinite}
  @keyframes ciSrc{0%,4%{opacity:0;transform:scale(.6)}10%{opacity:1;transform:scale(1.25)}16%,90%{opacity:.8;transform:none}100%{opacity:0}}
  @keyframes ciIn{0%,16%{stroke-dashoffset:100;opacity:0}18%{opacity:1}34%{stroke-dashoffset:0;opacity:1;stroke:#ff6b5a}36%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes ciCore{0%,34%{stroke:rgba(253,206,4,.4)}38%{stroke:var(--pm-gold);stroke-width:3}46%,100%{stroke:rgba(253,206,4,.7);stroke-width:1.5}}
  @keyframes ciCell{0%,34%{fill:#1c3348}37%{fill:#2b4459}42%,100%{fill:#1c3348}}
  @keyframes ciHot{0%,34%{fill:#1c3348}38%{fill:#fff4b8}42%,92%{fill:var(--pm-gold)}100%{fill:#1c3348}}
  /* Ticketsystem: Status wandert, Verlauf füllt sich */
  .pa-tk .pa-tk-s1{animation:tkS1 9s infinite}.pa-tk .pa-tk-s2{animation:tkS2 9s infinite}.pa-tk .pa-tk-s3{animation:tkS3 9s infinite}
  .pa-tk .pa-tk-l1{animation:tkL1 9s infinite}.pa-tk .pa-tk-l2{animation:tkL2 9s infinite}.pa-tk .pa-tk-l3{animation:tkL3 9s infinite}
  @keyframes tkS1{0%,30%{background:rgba(253,206,4,.2);color:var(--pm-gold)}34%,100%{background:rgba(143,163,179,.12);color:#5b7083}}
  @keyframes tkS2{0%,30%{background:rgba(143,163,179,.12);color:#5b7083}34%,62%{background:rgba(243,156,18,.18);color:#ffb84d}66%,100%{background:rgba(143,163,179,.12);color:#5b7083}}
  @keyframes tkS3{0%,62%{background:rgba(143,163,179,.12);color:#5b7083}66%,94%{background:rgba(47,208,127,.16);color:var(--pm-punkt)}100%{background:rgba(143,163,179,.12);color:#5b7083}}
  @keyframes tkL1{0%,4%{opacity:0;transform:translateX(-8px)}9%,94%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes tkL2{0%,34%{opacity:0;transform:translateX(-8px)}39%,94%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes tkL3{0%,64%{opacity:0;transform:translateX(-8px)}69%,94%{opacity:1;transform:none}100%{opacity:0}}
  /* MDM: Geräte melden sich nacheinander an */
  .pa-mdm .pa-mdm-ph span{animation:mdmS 7s infinite}
  .pa-mdm .pa-mdm2 span{animation-delay:.8s}.pa-mdm .pa-mdm3 span{animation-delay:1.6s}
  .pa-mdm .pa-mdm-ph{animation:mdmP 7s infinite}
  .pa-mdm .pa-mdm2{animation-delay:.8s}.pa-mdm .pa-mdm3{animation-delay:1.6s}
  @keyframes mdmS{0%,10%{opacity:0;transform:scale(.6)}16%,88%{opacity:1;transform:none}100%{opacity:0}}
  @keyframes mdmP{0%,10%{border-color:#3a5168;transform:none}14%{border-color:var(--pm-gold);transform:translateY(-4px)}22%,100%{border-color:#3a5168;transform:none}}
  @keyframes ciOut{0%,40%{stroke-dashoffset:100;opacity:0}42%{opacity:1}58%{stroke-dashoffset:0;opacity:1}60%,100%{stroke-dashoffset:0;opacity:0}}
  @keyframes ciDst{0%,58%{opacity:0;transform:scale(.6)}64%{opacity:1;transform:scale(1.2)}70%,90%{opacity:.6;transform:none}100%{opacity:0}}
  @keyframes ciT1{0%,8%{opacity:0}12%,90%{opacity:1}100%{opacity:0}}
  @keyframes ciT2{0%,30%{opacity:0}36%,90%{opacity:1}100%{opacity:0}}
  @keyframes ciT3{0%,60%{opacity:0}66%,90%{opacity:1}100%{opacity:0}}
  /* Vergleich: Das Übliche wird nacheinander durchgestrichen, dann leuchtet PRAEMON auf */
  .pa-vs .pa-vs-alt s{animation:vsStrike 10s infinite}
  .pa-vs .pa-vs-neu .pa-dok{animation:vsOk 10s infinite}
  .pa-vs .pa-vs-neu{animation:vsGlow 10s infinite}
  .pa-vs > .pa-vs > .pa-vs-card:nth-child(2) *{animation-delay:.5s}.pa-vs > .pa-vs-card:nth-child(3) *{animation-delay:1s}.pa-vs > .pa-vs-card:nth-child(4) *{animation-delay:1.5s}
  .pa-vs > .pa-vs > .pa-vs-card:nth-child(5) *{animation-delay:2s}.pa-vs > .pa-vs-card:nth-child(6) *{animation-delay:2.5s}.pa-vs > .pa-vs-card:nth-child(7) *{animation-delay:3s}.pa-vs > .pa-vs-card:nth-child(8) *{animation-delay:3.5s}
  @keyframes vsStrike{0%,6%{background-size:0 2px;color:var(--pm-schiefer)}16%,92%{background-size:100% 2px;color:var(--pm-grau)}100%{background-size:0 2px}}
  @keyframes vsOk{0%,14%{transform:scale(.4);opacity:.3}20%{transform:scale(1.25);opacity:1}26%,100%{transform:none;opacity:1}}
  @keyframes vsGlow{0%,15%{box-shadow:none}20%{box-shadow:0 0 0 3px rgba(253,206,4,.35),0 10px 28px rgba(15,27,38,.25)}34%,100%{box-shadow:none}}
  /* Aus der Praxis: Warnung blinkt, Pfeil zeigt auf „Heute“ */
  .pm-cases .pm-case > div:last-child::before{animation:caseArrow 2.6s ease-in-out infinite}
  .pm-cases .pm-case > div:first-child .pm-label::before{animation:caseWarn 2.6s ease-in-out infinite}
  .pm-cases .pm-case:nth-child(2) > div::before,.pm-cases .pm-case:nth-child(2) .pm-label::before{animation-delay:.4s}
  .pm-cases .pm-case:nth-child(3) > div::before,.pm-cases .pm-case:nth-child(3) .pm-label::before{animation-delay:.8s}
  @keyframes caseArrow{0%,100%{transform:translateY(0);box-shadow:0 0 0 4px var(--pm-weiss)}50%{transform:translateY(4px);box-shadow:0 0 0 4px var(--pm-weiss),0 0 0 10px rgba(253,206,4,.28)}}
  @keyframes caseWarn{0%,100%{opacity:1}50%{opacity:.3}}
}