/* ===== 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)}}
}

/* ===== Vergleich: Bühne „Vier Werkzeuge werden eins“ =====
   Links vier Werkzeuge mit je eigener Anmeldung, die jeweils nur einen Teil von ERP01 zeigen. Nacheinander wird jedes
   durchgestrichen, ein Paket läuft über die Sammelleitung, und sein Teil erscheint in PRAEMON am selben Server.
   16 s je Durchlauf, Werkzeug i bei 8 + 15·i % (8, 23, 38, 53 %), danach leuchtet die Verknüpfung.
   Ruhige Fassung: Werkzeuge gedimmt und durchgestrichen, im Portal alle vier Teile verknüpft. */
.pa-vgw{display:grid;grid-template-columns:minmax(0,1fr) 150px minmax(0,1.04fr);align-items:center}
.pa-tools,.pa-mg{display:grid;grid-template-rows:18px repeat(4,64px);row-gap:10px}
.pa-tools{position:relative;min-width:0}
.pa-tools-k{align-self:end;line-height:1}
.pa-tw{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr) 84px auto;gap:12px;align-items:center;padding:0 12px;background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);border-radius:12px;min-width:0}
.pa-tw > :not(.pa-tw-ln){opacity:.55}
.pa-tw-i{width:36px;height:36px;border-radius:10px;background:rgba(143,163,179,.12);color:#a9b8c5;display:grid;place-items:center}
.pa-tw-i svg{width:18px;height:18px}
.pa-tw-t{min-width:0}
.pa-tw-t b{display:block;color:var(--pm-weiss);font-size:13px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-tw-t 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-tw s,.pa-mg-t s{text-decoration:none;background:linear-gradient(rgba(255,107,90,.9),rgba(255,107,90,.9)) no-repeat 0 58% / 100% 2px}
.pa-tw-v{height:34px;display:flex;align-items:center;justify-content:center;gap:5px}
.pa-tw-v1 svg{width:40px;height:22px;fill:none;stroke:#a9b8c5;stroke-width:1.6;stroke-linejoin:round}
.pa-tw-v1 b{font-size:11px;color:var(--pm-weiss);white-space:nowrap}
.pa-tw-v1 i{width:8px;height:8px;border-radius:50%;background:#dd4b39;box-shadow:0 0 0 3px rgba(221,75,57,.25)}
.pa-tw-v2{flex-direction:column;align-items:stretch;gap:3px}
.pa-tw-v2 i{height:5px;border-radius:3px;background:#3a5168}
.pa-tw-v2 i:nth-child(2){width:80%}.pa-tw-v2 i:nth-child(3){width:92%}.pa-tw-v2 i:nth-child(4){width:64%}
.pa-tw-v3{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.pa-tw-v3 i{font-style:normal;font-size:8px;line-height:1.5;color:#a9b8c5;border:1px solid #2b4459;padding:0 3px;white-space:nowrap;overflow:hidden}
.pa-tw-v3 i:first-child{grid-column:1 / -1;color:var(--pm-weiss)}
.pa-tw-v4{flex-direction:column;align-items:stretch;gap:4px;border:1px solid #2b4459;border-radius:4px;padding:5px 7px;width:46px;margin:0 auto}
.pa-tw-v4 i{height:3px;border-radius:2px;background:#3a5168}
.pa-tw-v4 i:nth-child(2){width:70%}
.pa-tw-lg{display:inline-flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:#a9b8c5;border:1px solid #2b4459;border-radius:999px;padding:2px 8px;white-space:nowrap}
.pa-tw-lg svg{width:11px;height:11px}
.pa-tw-ln{position:absolute;left:100%;top:50%;width:75px;height:2px;margin-top:-1px;background:linear-gradient(90deg,#2b4459,rgba(253,206,4,.55))}
.pa-tw-ln > i{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--pm-gold);box-shadow:0 0 10px rgba(253,206,4,.9);opacity:0}

/* Sammelleitung mit „4 → 1“ */
.pa-mg{position:relative;justify-items:center}
.pa-mg::before{content:"";grid-row:2 / 6;grid-column:1;width:2px;margin:32px 0;background:rgba(253,206,4,.55);border-radius:2px}
.pa-mg-b{grid-row:2 / 6;grid-column:1;align-self:center;position:relative;z-index:1;width:62px;height:62px;border-radius:50%;background:#0b1620;border:2px solid var(--pm-gold);display:grid;place-items:center;box-shadow:0 0 0 6px rgba(253,206,4,.1),0 0 30px rgba(253,206,4,.25)}
.pm-root .pa-mg-b .pa-mg-logo{width:30px;height:34px}
.pa-mg-t{grid-row:2 / 6;grid-column:1;align-self:center;position:relative;z-index:1;margin-top:104px;background:var(--pm-nacht);border:1px solid rgba(253,206,4,.5);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:800;color:var(--pm-gold);white-space:nowrap}
.pa-mg-t s{color:var(--pm-grau-hell)}
.pa-mg-out{grid-row:2 / 6;grid-column:1;align-self:center;justify-self:end;position:relative;width:44px;height:2px;background:linear-gradient(90deg,rgba(253,206,4,.55),var(--pm-gold))}
.pa-mg-out > i{position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--pm-gold);box-shadow:0 0 8px rgba(253,206,4,.9);opacity:0}

/* PRAEMON: derselbe Server mit allen vier Teilen */
.pa-vgp{position:relative;background:#0b1620;border:1px solid rgba(253,206,4,.5);border-radius:14px;overflow:hidden;box-shadow:0 0 0 5px rgba(253,206,4,.06),0 24px 54px rgba(0,0,0,.42);min-width:0}
.pa-hp-bar{display:flex;align-items:center;gap:6px;padding:9px 12px;border-bottom:1px solid var(--pm-nacht-line);background:#101e2a}
.pa-hp-bar i{width:8px;height:8px;border-radius:50%;background:#2b4459}
.pa-hp-bar span{margin-left:8px;font-size:11px;color:var(--pm-grau-hell);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-vgp-head{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:10px;align-items:center;padding:12px 14px 8px}
.pa-vgp-srv{width:36px;height:36px;border-radius:10px;background:var(--pm-gold);color:var(--pm-nacht);display:grid;place-items:center;box-shadow:0 0 0 4px rgba(253,206,4,.16)}
.pa-vgp-srv svg{width:18px;height:18px}
.pa-vgp-head > div{min-width:0}
.pa-vgp-head b{display:block;color:var(--pm-weiss);font-size:15px;line-height:1.3}
.pa-vgp-head small{display:block;font-size:11.5px;color:var(--pm-grau-hell);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-vgp-one{font-size:10.5px;padding:1px 9px}
.pa-vgp-one svg{width:11px;height:11px}
.pa-fc{position:relative;list-style:none;margin:0;padding:4px 14px 12px 44px;display:grid;gap:7px}
.pa-fc::before{content:"";position:absolute;left:31px;top:-6px;bottom:34px;width:2px;background:rgba(253,206,4,.6);transform-origin:top}
.pa-fc li{position:relative;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:10px;align-items:center;background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);border-radius:9px;padding:6px 10px;min-width:0}
.pa-fc li::before{content:"";position:absolute;left:-13px;top:50%;width:12px;height:2px;margin-top:-1px;background:rgba(253,206,4,.6)}
.pa-fc li > div{min-width:0}
.pa-fc-i{width:28px;height:28px;border-radius:7px;background:rgba(253,206,4,.12);color:var(--pm-gold);display:grid;place-items:center;font-style:normal}
.pa-fc-i svg{width:15px;height:15px}
.pa-fc-k{display:block;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--pm-gold);line-height:1.3}
.pa-fc b{display:block;color:var(--pm-weiss);font-size:12.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-fc small{display:block;font-size:11px;line-height:1.35;color:var(--pm-grau-hell);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pa-fc .pa-chip{font-size:10.5px;padding:0 8px}
.pa-hp-foot{display:flex;gap:8px;align-items:center;padding:9px 14px 11px;border-top:1px solid var(--pm-nacht-line);font-size:11.5px;color:var(--pm-grau-hell)}
.pa-hp-foot svg{width:14px;height:14px;color:var(--pm-punkt);flex:none}
.pa-hp-foot span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@container pa (max-width:1120px){
  .pa-tw{grid-template-columns:36px minmax(0,1fr) auto}
  .pa-tw-v{display:none}
}
@container pa (max-width:860px){
  .pa-vgw{grid-template-columns:minmax(0,1fr)}
  .pa-tools{grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .pa-tools-k{grid-column:1 / -1;margin-bottom:2px}
  .pa-tw{height:auto;padding:10px 12px}
  .pa-tw-ln{display:none}
  .pa-mg{grid-template-rows:none;height:96px;align-items:center}
  .pa-mg::before{grid-row:1;margin:0;height:100%}
  .pa-mg-b,.pa-mg-t,.pa-mg-out{grid-row:1}
  .pa-mg-b{width:52px;height:52px}
  .pm-root .pa-mg-b .pa-mg-logo{width:24px;height:28px}
  .pa-mg-t{margin:0 0 0 150px}
  .pa-mg-out{display:none}
}
@container pa (max-width:760px){
  .pa-tools{grid-template-columns:minmax(0,1fr);gap:6px}
}
@container pa (max-width:560px){
  .pa-tw{grid-template-columns:30px minmax(0,1fr) auto;gap:10px;padding:8px 10px}
  .pa-tw-i{width:30px;height:30px}
  .pa-tw-i svg{width:15px;height:15px}
  .pa-tw-t b{font-size:12.5px}
  .pa-tw-lg{font-size:10px;padding:1px 7px}
  .pa-tw-lg svg{display:none}
  .pa-mg{height:84px}
  .pa-mg-t{margin-left:136px}
  .pa-vgp-head{grid-template-columns:32px minmax(0,1fr);padding:10px 10px 6px}
  .pa-vgp-srv{width:32px;height:32px}
  .pa-vgp-one{grid-column:1 / -1;justify-self:start}
  .pa-fc{padding:4px 10px 10px 30px;gap:6px}
  .pa-fc::before{left:19px;bottom:30px}
  .pa-fc li{grid-template-columns:24px minmax(0,1fr);gap:8px;padding:5px 8px}
  .pa-fc li::before{left:-11px;width:10px}
  .pa-fc-i{width:24px;height:24px}
  .pa-fc-i svg{width:13px;height:13px}
  .pa-fc .pa-chip{display:none}
  .pa-hp-foot{padding:8px 10px 9px;font-size:10.5px}
}

/* ===== Vergleich: Gegenüberstellung in vier Gruppen, Vergleichskarten wie auf der Startseite ===== */
.pa-grp{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;padding:40px 0;border-top:1px solid var(--pm-rand)}
.pa-grp:first-of-type{border-top:0;padding-top:4px}
.pa-grp-a{position:sticky;top:104px;align-self:start}
.pa-grp-n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--pm-nacht);color:var(--pm-gold);font-weight:800;font-size:14px;margin-bottom:14px;box-shadow:0 8px 20px rgba(15,27,38,.2)}
.pa-grp-a h3{font-family:var(--pm-display-s);font-size:21px;line-height:1.25;margin:0 0 8px;color:var(--pm-tinte)}
.pa-grp-a p{margin:0;font-size:14.5px;color:var(--pm-schiefer);line-height:1.55}
.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}
.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-dok{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:rgba(47,208,127,.16);color:var(--pm-punkt);margin-top:1px;font-style:normal}
.pa-dok svg{width:12px;height:12px;stroke-width:3}
.pa-vs-legend{display:flex;align-items:center;gap:12px;margin:-20px 0 22px;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:1180px){
  .pa-grp{grid-template-columns:minmax(0,1fr);gap:20px;padding:32px 0}
  .pa-grp-a{position:static;display:grid;grid-template-columns:42px minmax(0,1fr);gap:2px 14px;align-items:center}
  .pa-grp-n{margin:0;grid-row:span 2}
  .pa-grp-a h3{margin:0}
}
@container pm (max-width:900px){.pa-vs{grid-template-columns:minmax(0,1fr)}}
@container pm (max-width:560px){.pa-vs-alt{display:block}.pa-vs-k{display:inline-block;margin:0 8px 4px 0}.pa-vs-alt s{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone}.pa-vs-card{padding:18px 16px 18px}}

/* ===== Vergleich: Vier Unterschiede, als Liste mit kleinen Szenen ===== */
.pa-dif-wrap{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}
.pa-dif-head{padding-top:6px}
.pa-dif-head .pm-lead{margin-bottom:0}
.pa-dif{list-style:none;margin:0;padding:0;border-top:1px solid var(--pm-nacht-line)}
.pa-dif li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:26px;padding:22px 0;border-bottom:1px solid var(--pm-nacht-line);align-items:center}
.pa-dif-s{width:180px;height:120px;border-radius:14px;background:var(--pm-nacht-2);border:1px solid var(--pm-nacht-line);overflow:hidden}
.pa-dif-s svg{display:block;width:100%;height:100%;overflow:visible}
.pa-dif .pm-label{display:block;color:var(--pm-gold);margin-bottom:3px}
.pa-dif li b{display:block;color:var(--pm-weiss);font-size:18px;line-height:1.3;margin-bottom:5px}
.pa-dif p{margin:0;font-size:14.5px;color:var(--pm-auf-nacht);line-height:1.6}
.pa-dif .d-l{fill:#8fa3b3;font-size:9px;font-weight:700;font-family:var(--pm-font);text-anchor:middle;letter-spacing:.04em}
.pa-dif .d-l-s{font-size:8.5px;font-weight:600}
.d1-ln path{fill:none;stroke:rgba(253,206,4,.65);stroke-width:1.6;stroke-dasharray:1}
.d1-sat circle{fill:#15283a;stroke:#3a5168;stroke-width:1.4;transform-box:fill-box;transform-origin:center}
.d1-ic{fill:none;stroke:#c9d4dd;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.d1-c{fill:var(--pm-gold)}
.d1-t{fill:var(--pm-nacht);font-size:10px;font-weight:800;font-family:var(--pm-font);text-anchor:middle}
.d2-box{fill:#0b1620;stroke:#3a5168;stroke-width:1.4}
.d2-r{fill:#3a5168}
.d2-v rect{fill:rgba(221,75,57,.28);stroke:#dd4b39;stroke-width:1}
.d2-v text{fill:#ff8a7d;font-size:8px;font-weight:800;font-family:var(--pm-font);text-anchor:middle}
.d2-v{transform-box:fill-box;transform-origin:center}
.d2-ar{fill:none;stroke:var(--pm-gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.d2-bb{fill:rgba(253,206,4,.1);stroke:var(--pm-gold);stroke-width:1.2}
.d2-a{fill:#c9d4dd;transform-box:fill-box;transform-origin:left center}
.d3-box{fill:#0b1620;stroke:#3a5168;stroke-width:1.4}
.d3-ui{fill:none;stroke:#3a5168;stroke-width:2;stroke-linecap:round}
.d3-ln{fill:none;stroke:#2b4459;stroke-width:1.4;stroke-dasharray:3 3}
.d3-wall{fill:none;stroke:#dd4b39;stroke-width:3;stroke-linecap:round;stroke-dasharray:5 4}
.d3-ok rect{fill:rgba(47,208,127,.2);stroke:#2fd07f;stroke-width:1.2}
.d3-ok path{fill:none;stroke:#2fd07f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.d3-no rect{fill:rgba(221,75,57,.2);stroke:#dd4b39;stroke-width:1.2}
.d3-no path{fill:none;stroke:#ff6b5a;stroke-width:1.8;stroke-linecap:round}
.d3-okm{transform:translateX(58px)}
.d3-nom{transform:translateX(12px)}
.d3-key{fill:none;stroke:var(--pm-gold);stroke-width:1.8;stroke-linecap:round}
.d4-box{fill:#0b1620;stroke:#3a5168;stroke-width:1.4}
.d4-b2{stroke:rgba(253,206,4,.7)}
.d4-ar{fill:none;stroke:var(--pm-gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.d4-chk circle{fill:var(--pm-ok)}
.d4-chk path{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.d4-chk{transform-box:fill-box;transform-origin:center}
.d4-f rect{fill:var(--pm-gold)}
.d4-f path{fill:none;stroke:var(--pm-nacht);stroke-width:2.2;stroke-linecap:round}
.d4-f{transform:translateX(94px);transform-box:fill-box;transform-origin:center}
@container pm (max-width:1000px){.pa-dif-wrap{grid-template-columns:minmax(0,1fr);gap:36px}.pa-dif-head{position:static}}
@container pm (max-width:560px){.pa-dif li{grid-template-columns:minmax(0,1fr);gap:14px}.pa-dif-s{width:100%;max-width:252px;height:auto;aspect-ratio:3 / 2}}

/* ===== Vergleich: Grenzen ===== */
.pa-gr-wrap{align-items:start}
.pa-gr{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.pa-gr li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;align-items:start;background:var(--pm-weiss);border:1px solid var(--pm-rand);border-radius:16px;padding:18px 20px}
.pa-gr-i{width:64px;height:64px;border-radius:14px;background:var(--pm-nacht);display:grid;place-items:center;box-shadow:0 8px 20px rgba(15,27,38,.18)}
.pa-gr-i svg{width:56px;height:56px;overflow:visible}
.pa-gr b{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-family:var(--pm-display-s);font-size:17px;line-height:1.35;color:var(--pm-tinte);margin-bottom:4px}
.pa-gr .pa-gr-c{background:var(--pm-flaeche);color:var(--pm-schiefer);border:1px solid var(--pm-rand);font-size:11px;font-family:var(--pm-font)}
.pa-gr p{margin:0;font-size:14.5px;color:var(--pm-schiefer);line-height:1.55}
.pa-gr .g-s{fill:none;stroke:#c9d4dd;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.g1-cur{fill:#fff;stroke:var(--pm-nacht);stroke-width:.8}
.g1-bell circle{fill:var(--pm-gold)}
.g1-bell path{fill:none;stroke:var(--pm-nacht);stroke-width:1.5;stroke-linecap:round}
.g1-bell{transform-box:fill-box;transform-origin:50% 20%}
.g2-scan{stroke:var(--pm-gold);stroke-width:1.6;opacity:.8}
.g2-eye{fill:none;stroke:var(--pm-gold);stroke-width:1.6}
.g3-u{fill:#dd4b39}
.g3-x{fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
@container pm (max-width:560px){.pa-gr li{grid-template-columns:52px minmax(0,1fr);gap:14px;padding:16px}.pa-gr-i{width:52px;height:52px}.pa-gr-i svg{width:46px;height:46px}}

@media (min-width:0){
  /* Bühne, 16 s */
  .pa-vg .pa-tw1 > :not(.pa-tw-ln){animation:vgT1 16s infinite}.pa-vg .pa-tw2 > :not(.pa-tw-ln){animation:vgT2 16s infinite}
  .pa-vg .pa-tw3 > :not(.pa-tw-ln){animation:vgT3 16s infinite}.pa-vg .pa-tw4 > :not(.pa-tw-ln){animation:vgT4 16s infinite}
  @keyframes vgT1{0%,10%{opacity:1}15%,95%{opacity:.55}99%,100%{opacity:1}}
  @keyframes vgT2{0%,25%{opacity:1}30%,95%{opacity:.55}99%,100%{opacity:1}}
  @keyframes vgT3{0%,40%{opacity:1}45%,95%{opacity:.55}99%,100%{opacity:1}}
  @keyframes vgT4{0%,55%{opacity:1}60%,95%{opacity:.55}99%,100%{opacity:1}}
  .pa-vg .pa-tw1{animation:vgB1 16s infinite}.pa-vg .pa-tw2{animation:vgB2 16s infinite}.pa-vg .pa-tw3{animation:vgB3 16s infinite}.pa-vg .pa-tw4{animation:vgB4 16s infinite}
  @keyframes vgB1{0%,7%{border-color:var(--pm-nacht-line);box-shadow:none}9%,12%{border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}16%,100%{border-color:var(--pm-nacht-line);box-shadow:none}}
  @keyframes vgB2{0%,22%{border-color:var(--pm-nacht-line);box-shadow:none}24%,27%{border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}31%,100%{border-color:var(--pm-nacht-line);box-shadow:none}}
  @keyframes vgB3{0%,37%{border-color:var(--pm-nacht-line);box-shadow:none}39%,42%{border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}46%,100%{border-color:var(--pm-nacht-line);box-shadow:none}}
  @keyframes vgB4{0%,52%{border-color:var(--pm-nacht-line);box-shadow:none}54%,57%{border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}61%,100%{border-color:var(--pm-nacht-line);box-shadow:none}}
  .pa-vg .pa-tw1 s{animation:vgS1 16s infinite}.pa-vg .pa-tw2 s{animation:vgS2 16s infinite}.pa-vg .pa-tw3 s{animation:vgS3 16s infinite}.pa-vg .pa-tw4 s{animation:vgS4 16s infinite}
  @keyframes vgS1{0%,10%{background-size:0 2px}14%,95%{background-size:100% 2px}99%,100%{background-size:0 2px}}
  @keyframes vgS2{0%,25%{background-size:0 2px}29%,95%{background-size:100% 2px}99%,100%{background-size:0 2px}}
  @keyframes vgS3{0%,40%{background-size:0 2px}44%,95%{background-size:100% 2px}99%,100%{background-size:0 2px}}
  @keyframes vgS4{0%,55%{background-size:0 2px}59%,95%{background-size:100% 2px}99%,100%{background-size:0 2px}}
  .pa-vg .pa-tw1 .pa-tw-ln > i{animation:vgP1 16s linear infinite}.pa-vg .pa-tw2 .pa-tw-ln > i{animation:vgP2 16s linear infinite}
  .pa-vg .pa-tw3 .pa-tw-ln > i{animation:vgP3 16s linear infinite}.pa-vg .pa-tw4 .pa-tw-ln > i{animation:vgP4 16s linear infinite}
  @keyframes vgP1{0%,9%{opacity:0;left:0}10%{opacity:1;left:0}13%{opacity:1;left:calc(100% - 10px)}14%,100%{opacity:0;left:calc(100% - 10px)}}
  @keyframes vgP2{0%,24%{opacity:0;left:0}25%{opacity:1;left:0}28%{opacity:1;left:calc(100% - 10px)}29%,100%{opacity:0;left:calc(100% - 10px)}}
  @keyframes vgP3{0%,39%{opacity:0;left:0}40%{opacity:1;left:0}43%{opacity:1;left:calc(100% - 10px)}44%,100%{opacity:0;left:calc(100% - 10px)}}
  @keyframes vgP4{0%,54%{opacity:0;left:0}55%{opacity:1;left:0}58%{opacity:1;left:calc(100% - 10px)}59%,100%{opacity:0;left:calc(100% - 10px)}}
  .pa-vg .pa-mg-b{animation:vgMg 16s infinite}
  @keyframes vgMg{0%,12%,17%,27%,32%,42%,47%,57%,62%,100%{transform:none;box-shadow:0 0 0 6px rgba(253,206,4,.1),0 0 30px rgba(253,206,4,.25)}14%,29%,44%,59%{transform:scale(1.12);box-shadow:0 0 0 10px rgba(253,206,4,.22),0 0 40px rgba(253,206,4,.5)}}
  .pa-vg .pa-mg-out > i{animation:vgOut 1.4s linear infinite}
  .pa-vg .pa-mg-out > i:nth-child(2){animation-delay:.7s}
  @keyframes vgOut{0%{opacity:0;left:0}20%{opacity:1}80%{opacity:1}100%{opacity:0;left:calc(100% - 8px)}}
  .pa-vg .pa-mg-t s{animation:vgS4 16s infinite}
  .pa-vg .pa-fc1{animation:vgF1 16s infinite}.pa-vg .pa-fc2{animation:vgF2 16s infinite}.pa-vg .pa-fc3{animation:vgF3 16s infinite}.pa-vg .pa-fc4{animation:vgF4 16s infinite}
  @keyframes vgF1{0%,13%{opacity:0;transform:translateX(-14px)}15%{opacity:1;transform:none;border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}22%,95%{opacity:1;transform:none;border-color:var(--pm-nacht-line);box-shadow:none}99%,100%{opacity:0}}
  @keyframes vgF2{0%,28%{opacity:0;transform:translateX(-14px)}30%{opacity:1;transform:none;border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}37%,95%{opacity:1;transform:none;border-color:var(--pm-nacht-line);box-shadow:none}99%,100%{opacity:0}}
  @keyframes vgF3{0%,43%{opacity:0;transform:translateX(-14px)}45%{opacity:1;transform:none;border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}52%,95%{opacity:1;transform:none;border-color:var(--pm-nacht-line);box-shadow:none}99%,100%{opacity:0}}
  @keyframes vgF4{0%,58%{opacity:0;transform:translateX(-14px)}60%{opacity:1;transform:none;border-color:rgba(253,206,4,.85);box-shadow:0 0 0 3px rgba(253,206,4,.14)}67%,95%{opacity:1;transform:none;border-color:var(--pm-nacht-line);box-shadow:none}99%,100%{opacity:0}}
  .pa-vg .pa-fc::before{animation:vgSpine 16s infinite}
  @keyframes vgSpine{0%,13%{transform:scaleY(0)}15%{transform:scaleY(.25)}30%{transform:scaleY(.5)}45%{transform:scaleY(.75)}60%,95%{transform:scaleY(1)}99%,100%{transform:scaleY(0)}}
  .pa-vg .pa-vgp-one{animation:vgOne 16s infinite}
  @keyframes vgOne{0%,63%{box-shadow:none;transform:none}67%{box-shadow:0 0 0 5px rgba(253,206,4,.3);transform:scale(1.08)}72%,100%{box-shadow:none;transform:none}}
  .pa-vg .pa-hp-foot{animation:vgFoot 16s infinite}
  @keyframes vgFoot{0%,63%{color:var(--pm-grau-hell)}67%,95%{color:var(--pm-weiss)}99%,100%{color:var(--pm-grau-hell)}}
  .pa-vg .pa-vgp{animation:vgPortal 16s infinite}
  @keyframes vgPortal{0%,62%{box-shadow:0 0 0 5px rgba(253,206,4,.06),0 24px 54px rgba(0,0,0,.42)}67%{box-shadow:0 0 0 9px rgba(253,206,4,.2),0 24px 54px rgba(0,0,0,.42)}74%,100%{box-shadow:0 0 0 5px rgba(253,206,4,.06),0 24px 54px rgba(0,0,0,.42)}}
  .pa-vg .pa-vq1{animation:vgQ1 16s infinite}.pa-vg .pa-vq2{animation:vgQ2 16s infinite}.pa-vg .pa-vq3{animation:vgQ3 16s infinite}
  @keyframes vgQ1{0%,8%{border-top-color:var(--pm-gold)}10%,100%{border-top-color:var(--pm-nacht-line)}}
  @keyframes vgQ2{0%,9%{border-top-color:var(--pm-nacht-line)}11%,61%{border-top-color:var(--pm-gold)}63%,100%{border-top-color:var(--pm-nacht-line)}}
  @keyframes vgQ3{0%,62%{border-top-color:var(--pm-nacht-line)}64%,96%{border-top-color:var(--pm-gold)}98%,100%{border-top-color:var(--pm-nacht-line)}}

  /* Vergleichskarten: das Übliche wird nacheinander durchgestrichen, dann leuchtet PRAEMON auf */
  .pa-vs .pa-vs-alt s{animation:vsStrike 10s infinite backwards}
  .pa-vs .pa-vs-neu .pa-dok{animation:vsOk 10s infinite backwards}
  .pa-vs .pa-vs-neu{animation:vsGlow 10s infinite backwards}
  .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}
  @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}}
  .pa-grp-n{animation:grpN 10s infinite}
  @keyframes grpN{0%,10%{box-shadow:0 8px 20px rgba(15,27,38,.2)}16%{box-shadow:0 0 0 5px rgba(253,206,4,.35),0 8px 20px rgba(15,27,38,.2)}26%,100%{box-shadow:0 8px 20px rgba(15,27,38,.2)}}

  /* Vier Unterschiede */
  .pa-d1 .d1-ln path{animation:d1Ln 8s infinite}
  .pa-d1 .d1-sat circle{animation:d1Sat 8s infinite}
  .pa-d1 .d1-ln path:nth-child(2),.pa-d1 .d1-sat .d1-s2{animation-delay:.35s}.pa-d1 .d1-ln path:nth-child(3),.pa-d1 .d1-sat .d1-s3{animation-delay:.7s}
  .pa-d1 .d1-ln path:nth-child(4),.pa-d1 .d1-sat .d1-s4{animation-delay:1.05s}.pa-d1 .d1-ln path:nth-child(5),.pa-d1 .d1-sat .d1-s5{animation-delay:1.4s}
  .pa-d1 .d1-ln path:nth-child(6),.pa-d1 .d1-sat .d1-s6{animation-delay:1.75s}
  @keyframes d1Ln{0%,4%{stroke-dashoffset:1}14%,88%{stroke-dashoffset:0}96%,100%{stroke-dashoffset:1}}
  @keyframes d1Sat{0%,12%{stroke:#3a5168;transform:none}16%{stroke:var(--pm-gold);transform:scale(1.25)}22%,88%{stroke:rgba(253,206,4,.7);transform:none}96%,100%{stroke:#3a5168}}
  .pa-d1 .d1-c{animation:d1C 8s infinite;transform-box:fill-box;transform-origin:center}
  @keyframes d1C{0%,2%{transform:scale(.8)}6%{transform:scale(1.08)}10%,100%{transform:none}}
  .pa-d2 .d2-r{animation:d2R 8s infinite}
  .pa-d2 .d2-r2{animation-delay:.4s}.pa-d2 .d2-r3{animation-delay:.8s}
  @keyframes d2R{0%,4%{fill:#3a5168}8%,12%{fill:var(--pm-gold)}18%,100%{fill:#3a5168}}
  .pa-d2 .d2-v{animation:d2V 8s infinite}
  @keyframes d2V{0%,22%{opacity:0;transform:scale(1.6)}27%{opacity:1;transform:scale(.94)}30%,92%{opacity:1;transform:none}98%,100%{opacity:0}}
  .pa-d2 .d2-ar{animation:d2Ar 8s infinite}
  @keyframes d2Ar{0%,30%{opacity:.2;transform:none}36%{opacity:1;transform:translateX(3px)}42%,92%{opacity:1;transform:none}98%,100%{opacity:.2}}
  .pa-d2 .d2-a{animation:d2A 8s infinite}
  .pa-d2 .d2-a2{animation-delay:.3s}.pa-d2 .d2-a3{animation-delay:.6s}
  @keyframes d2A{0%,40%{transform:scaleX(0)}52%,92%{transform:scaleX(1)}98%,100%{transform:scaleX(0)}}
  .pa-d3 .d3-okm{animation:d3Ok 6s infinite}
  @keyframes d3Ok{0%,8%{transform:none;opacity:0}14%{opacity:1}44%,88%{transform:translateX(58px);opacity:1}96%,100%{transform:translateX(58px);opacity:0}}
  .pa-d3 .d3-nom{animation:d3No 6s infinite}
  @keyframes d3No{0%,46%{transform:none;opacity:0}52%{opacity:1}62%{transform:translateX(14px)}66%{transform:translateX(6px)}70%,88%{transform:translateX(12px);opacity:1}96%,100%{transform:translateX(12px);opacity:0}}
  .pa-d3 .d3-wall{animation:d3Wall 6s infinite}
  @keyframes d3Wall{0%,60%{stroke:#dd4b39;stroke-width:3}63%{stroke:#ff8a7d;stroke-width:5}70%,100%{stroke:#dd4b39;stroke-width:3}}
  .pa-d3 .d3-key{animation:d3Key 3s ease-in-out infinite}
  @keyframes d3Key{0%,100%{opacity:1}50%{opacity:.45}}
  .pa-d4 .d4-f{animation:d4F 7s infinite}
  @keyframes d4F{0%,6%{transform:scale(.6);opacity:0}12%,44%{transform:none;opacity:1}60%,90%{transform:translateX(94px);opacity:1}97%,100%{transform:translateX(94px);opacity:0}}
  .pa-d4 .d4-chk{animation:d4C 7s infinite}
  @keyframes d4C{0%,22%{opacity:0;transform:scale(.4)}28%{opacity:1;transform:scale(1.25)}32%,90%{opacity:1;transform:none}97%,100%{opacity:0}}
  .pa-d4 .d4-b2{animation:d4B 7s infinite}
  @keyframes d4B{0%,58%{stroke:#3a5168}62%{stroke:var(--pm-gold);stroke-width:2.4}70%,90%{stroke:rgba(253,206,4,.7);stroke-width:1.4}97%,100%{stroke:#3a5168}}

  /* Grenzen */
  .pa-g1 .g1-cur{animation:g1Cur 5s ease-in-out infinite}
  @keyframes g1Cur{0%,100%{transform:none}30%{transform:translate(8px,-3px)}60%{transform:translate(-4px,4px)}}
  .pa-g1 .g1-bell{animation:g1Bell 2.5s ease-in-out infinite}
  @keyframes g1Bell{0%,60%,100%{transform:none}68%{transform:rotate(14deg)}76%{transform:rotate(-12deg)}84%{transform:rotate(8deg)}92%{transform:rotate(-4deg)}}
  .pa-g2 .g2-scan{animation:g2Scan 3s ease-in-out infinite}
  @keyframes g2Scan{0%,100%{transform:translateY(0);opacity:0}15%{opacity:.85}50%{transform:translateY(22px);opacity:.85}65%{opacity:0}}
  .pa-g3 .g3-u{animation:g3U 2.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes g3U{0%,100%{transform:none}50%{transform:scale(1.12)}}
}