/* ═══════════════════════════════════════════════════════════════════════
   Kampagnen-Figuren des Basislagers (reines CSS, keine Bilder)
   Neurologie = Horror-Gotik (ländlich, 19. Jh.): Vampirpfleger, Lykanthropen-Pfleger, Dorfhexe, Monsterjäger
   Demenz     = Sci-Fi: Astronautin, Pflegeroboter, außerirdischer Pfleger
   Genutzt über das Avatar-Objekt: { …, variant: "vampir" | "werwolf" | "hexe" | "jaeger" | "astro" | "roboter" | "alien" }
   Farben werden hier per !important gesetzt, damit sie nicht in der Garderobe auftauchen.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Vampirpfleger: bleiche Haut, hoher Kragen, rote Augen, Fangzähne ── */
.px-vampir { --skin: #e6dfee !important; --scrub: #4a0f22 !important; --pants: #1b1220 !important; --trim: #16070e; }
.px-vampir .px-eye-left, .px-vampir .px-eye-right { background: #e11d48; }
.px-vampir .px-collar {
  background: #16070e; height: 10px; left: 11px; top: 37px; width: 32px; z-index: 1;
  clip-path: polygon(0 100%, 6% 0, 32% 62%, 68% 62%, 94% 0, 100% 100%);
}
.px-vampir .px-mouth { background: #7f1d1d; left: 23px; top: 34px; width: 9px; }
.px-vampir .px-mouth::before, .px-vampir .px-mouth::after {
  background: #ffffff; content: ""; height: 3px; position: absolute; top: 1px; width: 2px;
}
.px-vampir .px-mouth::before { left: 1px; }
.px-vampir .px-mouth::after  { right: 1px; }
.px-vampir .px-badge { background: #e11d48; border-radius: 50%; left: 25px; top: 46px; }
.px-vampir .px-arm-left, .px-vampir .px-arm-right { background: #4a0f22; }
.px-vampir .px-hair { box-shadow: -5px 6px 0 var(--hair), 5px 6px 0 var(--hair), -3px 12px 0 var(--hair), 3px 12px 0 var(--hair), 0 -3px 0 var(--hair); }

/* ── Lykanthropen-Pfleger: Fell, Spitzohren, Schnauze, gelbe Augen, Lederhose ── */
.px-werwolf { --skin: #8a6540 !important; --scrub: #7a5232 !important; --pants: #5b3a1e !important; --trim: #c9a877; }
.px-werwolf .px-hair { box-shadow: -5px 6px 0 var(--hair), 5px 6px 0 var(--hair); }
.px-werwolf .px-hair::before, .px-werwolf .px-hair::after {
  background: var(--hair); clip-path: polygon(50% 0, 100% 100%, 0 100%); display: block; height: 11px; top: -7px; width: 9px;
}
.px-werwolf .px-hair::before { left: -4px; transform: rotate(-12deg); }
.px-werwolf .px-hair::after  { right: -4px; transform: rotate(12deg); }
.px-werwolf .px-eye-left, .px-werwolf .px-eye-right { background: #facc15; box-shadow: 0 0 0 1px #3b2410; }
.px-werwolf .px-mouth {   /* Schnauze */
  background: #b48d63; border-radius: 3px 3px 5px 5px; height: 8px; left: 22px; top: 30px; width: 10px;
}
.px-werwolf .px-mouth::before { background: #1c1208; border-radius: 2px; content: ""; height: 3px; left: 3px; position: absolute; top: 0; width: 4px; }
.px-werwolf .px-mouth::after  { background: #ffffff; clip-path: polygon(0 0, 100% 0, 75% 100%, 50% 0, 25% 100%); content: ""; height: 3px; left: 1px; position: absolute; top: 6px; width: 8px; }
.px-werwolf .px-collar { background: #c9a877; height: 6px; left: 23px; top: 43px; width: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.px-werwolf .px-badge { background: #d6b77a; }
.px-werwolf .px-arm-left, .px-werwolf .px-arm-right { background: #8a6540; }

/* ── Dorfhexe / Kräuterfrau: spitzer Hut, graue Strähnen, violetter Umhang ── */
.px-hexe { --scrub: #46306b !important; --pants: #2a1b45 !important; --trim: #a78bfa; }
.px-hexe .px-hair { background: #2a1b45; box-shadow: none; height: 5px; left: 8px; top: 13px; width: 38px; z-index: 5; }
.px-hexe .px-hair::before {   /* Hutspitze */
  background: #2a1b45; clip-path: polygon(50% 0, 100% 100%, 0 100%); display: block; height: 20px; left: 11px; top: -19px; width: 16px;
  transform: skewX(-6deg);
}
.px-hexe .px-hair::after {    /* Hutband */
  background: #c4a24a; display: block; height: 3px; left: 10px; top: -2px; width: 18px;
}
.px-hexe .px-beard {          /* Haar zu beiden Seiten */
  background: var(--hair); display: block; height: 20px; left: 11px; top: 18px; width: 32px; z-index: 1;
  box-shadow: 0 8px 0 var(--hair);
}
.px-hexe .px-mouth { background: #7f1d1d; }
.px-hexe .px-badge { background: #22c55e; border-radius: 50%; }
.px-hexe .px-collar { background: #a78bfa; }

/* ── Monsterjäger: Schlapphut, Vollbart-Stoppeln, langer dunkler Mantel, Silberkreuz ── */
.px-jaeger { --scrub: #3a3128 !important; --pants: #1f1a14 !important; --trim: #8a7a5a; }
.px-jaeger .px-hair { background: #2b2018; box-shadow: none; height: 5px; left: 5px; top: 13px; width: 44px; z-index: 5; }
.px-jaeger .px-hair::before {   /* Hutkrone */
  background: #2b2018; border-radius: 3px 3px 0 0; display: block; height: 11px; left: 8px; top: -10px; width: 26px;
}
.px-jaeger .px-hair::after {    /* Hutband */
  background: #8a5a2a; display: block; height: 3px; left: 8px; top: -3px; width: 26px;
}
.px-jaeger .px-badge { background: #e2e8f0; height: 7px; left: 26px; top: 50px; width: 2px; box-shadow: -2px 2px 0 #e2e8f0, 2px 2px 0 #e2e8f0; }
.px-jaeger .px-arm-left, .px-jaeger .px-arm-right { background: #3a3128; box-shadow: 0 15px 0 0 var(--skin); }
.px-jaeger .px-collar { background: #8a7a5a; }

/* ── Astronautin: Helmkuppel, Raumanzug, Antenne, Flaggenpatch ── */
.px-astro { --scrub: #eef2f7 !important; --pants: #b7c3d1 !important; --trim: #9fb0c3; }
.px-astro .px-hair {   /* Glaskuppel über dem ganzen Kopf */
  background: rgba(140, 205, 255, 0.22); border: 3px solid #e6edf5; border-radius: 16px 16px 10px 10px;
  box-shadow: inset -4px -3px 0 rgba(255, 255, 255, 0.18); box-sizing: border-box;
  height: 38px; left: 8px; top: 3px; width: 38px; z-index: 5;
}
.px-astro .px-hair::before { background: #e6edf5; content: ""; display: block; height: 7px; left: 15px; top: -9px; width: 2px; }
.px-astro .px-hair::after  { background: #ef4444; border-radius: 50%; content: ""; display: block; height: 5px; left: 13px; top: -13px; width: 6px; }
.px-astro .px-collar { background: #9fb0c3; height: 4px; left: 12px; top: 41px; width: 30px; }
.px-astro .px-badge { background: #2563eb; box-shadow: 2px 0 0 #ef4444; height: 4px; left: 28px; width: 4px; }
.px-astro .px-arm-left, .px-astro .px-arm-right { background: #eef2f7; box-shadow: 0 15px 0 0 #9fb0c3; }

/* ── Pflegeroboter: Metallkopf, Antenne, Leuchtaugen, Lüftungsgitter ── */
.px-roboter { --skin: #9aa7b5 !important; --scrub: #6f7d8c !important; --pants: #3a4552 !important; --trim: #22d3ee; }
.px-roboter .px-hair { background: #6f7d8c; box-shadow: none; height: 8px; left: 26px; top: 6px; width: 3px; }
.px-roboter .px-hair::after { background: #22d3ee; border-radius: 50%; box-shadow: 0 0 6px #22d3ee; content: ""; display: block; height: 7px; left: -2px; top: -5px; width: 7px; }
.px-roboter .px-face {
  border: 2px solid #56616e; border-radius: 3px; box-shadow: none; box-sizing: border-box; height: 27px; left: 12px; top: 14px; width: 30px;
}
.px-roboter .px-eye-left, .px-roboter .px-eye-right { background: #22d3ee; box-shadow: 0 0 5px #22d3ee; height: 4px; top: 22px; width: 6px; }
.px-roboter .px-eye-left { left: 17px; }
.px-roboter .px-eye-right { right: 17px; }
.px-roboter .px-mouth { background: repeating-linear-gradient(90deg, #334155 0 2px, transparent 2px 4px); height: 4px; left: 21px; top: 32px; width: 12px; }
.px-roboter .px-body { box-shadow: -8px 3px 0 #6f7d8c, 8px 3px 0 #6f7d8c, 0 22px 0 var(--pants); }
.px-roboter .px-badge { background: #22d3ee; border-radius: 50%; box-shadow: 0 0 5px #22d3ee; height: 5px; left: 25px; top: 50px; width: 5px; }
.px-roboter .px-collar { background: #56616e; }
.px-roboter .px-arm-left, .px-roboter .px-arm-right { background: #9aa7b5; border-bottom: 5px solid #56616e; box-sizing: border-box; }

/* ── Außerirdischer Pfleger: türkise Haut, Fühler, große schwarze Augen, violetter Anzug ── */
.px-alien { --skin: #8fe3cf !important; --scrub: #4b3fa8 !important; --pants: #2b2470 !important; --trim: #c4b5fd; }
.px-alien .px-hair { background: none; box-shadow: none; height: 0; width: 0; }
.px-alien .px-hair::before, .px-alien .px-hair::after {
  background: #8fe3cf; box-shadow: 0 -2px 0 1px #f472b6; display: block; height: 13px; top: 0; width: 3px;
}
.px-alien .px-hair::before { left: 3px; transform: rotate(-9deg); }
.px-alien .px-hair::after  { left: 16px; transform: rotate(9deg); }
.px-alien .px-face { box-shadow: 5px 5px 0 var(--skin), -5px 5px 0 var(--skin), 0 13px 0 var(--skin), 0 -4px 0 -2px var(--skin); }
.px-alien .px-eye-left, .px-alien .px-eye-right {
  background: #0b1020; border-radius: 50%; box-shadow: inset 1px 1px 0 #7dd3fc; height: 6px; top: 23px; width: 7px;
}
.px-alien .px-eye-left { left: 17px; }
.px-alien .px-eye-right { right: 17px; }
.px-alien .px-mouth { background: #0b1020; border-radius: 0 0 2px 2px; height: 2px; left: 26px; top: 35px; width: 3px; }
.px-alien .px-badge { background: #f472b6; border-radius: 50%; }
.px-alien .px-collar { background: #c4b5fd; }
.px-alien .px-arm-left, .px-alien .px-arm-right { background: #4b3fa8; box-shadow: 0 15px 0 0 #8fe3cf; }

/* ── Dörfler (Neurologie): Strohhut, Weste, Hemdsärmel ── */
.px-bauer { --scrub: #6b5a3a !important; --pants: #4a3a26 !important; --trim: #f3ead7; }
.px-bauer .px-hair { background: #d9b45a; box-shadow: none; height: 4px; left: 5px; top: 13px; width: 44px; z-index: 5; }
.px-bauer .px-hair::before { background: #e6c66d; border-radius: 4px 4px 0 0; display: block; height: 10px; left: 9px; top: -9px; width: 26px; }
.px-bauer .px-hair::after  { background: #a4382a; display: block; height: 3px; left: 9px; top: -2px; width: 26px; }
.px-bauer .px-collar { background: #f3ead7; }
.px-bauer .px-arm-left, .px-bauer .px-arm-right { background: #f3ead7; box-shadow: 0 15px 0 0 var(--skin); }
.px-bauer .px-badge { background: #c9a877; }

/* ── Modifikatoren: Kittel (Personal) und Patientenhemd (Patienten) für Roboter, Aliens, Astronaut:innen ── */
.px-mod-kittel { --scrub: #f6f8fb !important; --trim: #cbd5e1 !important; }
.px-mod-kittel .px-badge { background: #ef4444; border-radius: 1px; }
.px-mod-kittel .px-body { box-shadow: -8px 3px 0 #f6f8fb, 8px 3px 0 #f6f8fb, 0 22px 0 var(--pants); }
.px-mod-kittel .px-collar { background: #94a3b8; height: 8px; clip-path: polygon(0 0, 100% 0, 50% 100%); }
.px-mod-gown { --scrub: #a9d4f0 !important; --pants: #8fb6d4 !important; }
.px-mod-gown .px-body { box-shadow: -8px 3px 0 #a9d4f0, 8px 3px 0 #a9d4f0, 0 22px 0 #8fb6d4; }
.px-astro.px-mod-gown .px-arm-left, .px-astro.px-mod-gown .px-arm-right { background: #a9d4f0; }