/* Update W8 (08.11.2026): Seite «Unser Kandidatenpool» bzw. «Unser Pool im Gesundheitswesen» (w3/d/pool.mjs, skripte/w8-pool.js), Variante 1
   der Vorschau (scratchpad/pool-vorschau): grosse Zahl, Fachkräfte und Hilfskräfte, helle Karte mit leuchtenden Grossregionen, alle Berufe
   nach Fachbereich, verschwommene Musterkarten, drei Schritte, Fenster «Kostenloses … konto anlegen». Ruhig, Farben der Marke (MediPersonal
   ohne Rot), iPersonal mit genau einem roten Hauptknopf. Raster: Radien 10, 14, 999; Schrift über die festen Stufen (der Bau legt jede Grösse
   auf die nächste Stufe). Keine style-Attribute: die Karte nutzt nur SVG-Attribute und diese Klassen. */

/* ---------- 1) Kopf mit Zahlenkarte ---------- */
.pool-kopf__raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:40px;align-items:start}
.pool-etikett{display:inline-flex;align-items:center;gap:8px;margin:0;padding:4px 14px;border:1px solid var(--linie2);border-radius:999px;background:#fff;font-size:var(--klein);line-height:var(--klein-z);color:var(--tinte);--zeile:var(--klein-z)}
.pool-etikett__punkt,.pool-zahl__punkt{flex:none;width:8px;height:8px;border-radius:50%;background:var(--med-gruen)}
.pool-wer{max-width:560px;margin:16px 0 0;font-size:var(--fliess);line-height:var(--fliess-z);color:var(--text);--zeile:var(--fliess-z)}
.pool-kopf__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:20px 0 0}
.pool-zusage{display:flex;align-items:flex-start;gap:8px;margin:16px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.pool-zusage .sym{flex:none;margin-top:2px;color:var(--med-gruen)}
.pool-aufbau{margin:20px 0 0;padding:16px 18px;border-radius:14px;background:var(--akzent-zart);font-size:var(--fliess);line-height:var(--fliess-z);color:var(--tinte);--zeile:var(--fliess-z)}
.marke-ipersonal .pool-aufbau{background:var(--grau)}
.pool-zahl{padding:24px;border:1px solid var(--linie);border-radius:14px;background:#fff;box-shadow:var(--schatten)}
.pool-zahl__stand{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.pool-zahl__gross{display:block;width:100%;margin:0;padding:0;border:0;background:none;text-align:left;color:var(--tinte);cursor:pointer;font:inherit}
.pool-zahl__gross strong{display:block;font-size:var(--h1);line-height:var(--h1-z);font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em;--zeile:var(--h1-z)}
.pool-zahl__gross span{display:block;margin-top:2px;font-size:var(--fliess);line-height:var(--fliess-z);font-weight:500;--zeile:var(--fliess-z)}
.pool-zahl__gross:focus-visible,.pool-teil:focus-visible,.pool-karte:focus-visible,.pool-region:focus-visible,.pool-beruf:focus-visible{outline:3px solid var(--akzent);outline-offset:2px;border-radius:10px}
.marke-ipersonal :is(.pool-zahl__gross,.pool-teil,.pool-karte,.pool-region,.pool-beruf):focus-visible{outline-color:var(--tinte)}
.pool-zahl__ohne{margin:0;font-size:var(--fliess);line-height:var(--fliess-z);color:var(--text);--zeile:var(--fliess-z)}
.pool-zahl__teile{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0 0}
.pool-teil{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:12px 14px;border:1px solid var(--linie);border-radius:10px;background:var(--grau2);text-align:left;color:var(--tinte);cursor:pointer;font:inherit}
.pool-teil:hover,.pool-zahl__gross:hover strong{color:var(--akzent-text)}
.marke-ipersonal .pool-teil:hover,.marke-ipersonal .pool-zahl__gross:hover strong{color:var(--tinte)}
.pool-teil__zahl{font-size:var(--h2);line-height:var(--h2-z);font-weight:700;font-variant-numeric:tabular-nums;--zeile:var(--h2-z)}
.pool-teil__titel{font-size:var(--fliess);line-height:var(--fliess-z);font-weight:500;--zeile:var(--fliess-z)}
.pool-teil small{font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.pool-zahl__balken{display:block;width:100%;height:6px;margin:14px 0 0}
.pool-zahl__balken[hidden],.pool-zahl [hidden]{display:none}
.pool-zahl__balken-grund{fill:var(--linie)}
.pool-zahl__balken-teil{fill:var(--med-gruen)}
@media (max-width:960px){
  .pool-kopf__raster{grid-template-columns:minmax(0,1fr);gap:24px}
  .pool-kopf__raster>.pool-zahl{order:-1}
}
@media (max-width:700px){
  /* lange Knöpfe («Kostenloses Unternehmenskonto anlegen») dürfen am Handy umbrechen, nie breiter als die Spalte */
  :is(.pool-kopf,.pool-abschnitt,.pool-dialog) .knopf{width:100%;max-width:100%;min-width:0;height:auto;min-height:48px;justify-content:center;white-space:normal;text-align:center}
  .pool-zahl{padding:18px 16px}
}

/* ---------- 2) Regionen: Karte und Rangliste ---------- */
.pool-region-raster{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:40px;align-items:center}
.pool-karte{display:block;width:100%;margin:0;padding:12px;border:1px solid var(--linie);border-radius:14px;background:#fff;cursor:pointer;line-height:0;box-shadow:var(--schatten)}
.pool-karte__svg{display:block;width:100%;height:auto}
.pool-karte__land{fill:#F4F5F7}
.marke-medipersonal .pool-karte__land{fill:#F1F6F9}
.pool-karte__see{fill:#DCE6EF}
.pool-karte__rand{fill:none;stroke:rgba(24,24,27,.22);stroke-width:1.6;stroke-linejoin:round}
.pool-karte__glut0{stop-color:var(--med-gruen);stop-opacity:.55}
.pool-karte__glut1{stop-color:var(--med-gruen);stop-opacity:0}
.pool-karte__ortpunkt{fill:var(--text3)}
.pool-karte__ort{fill:var(--text3);font-size:var(--fliess);font-weight:400;line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.pool-karte__pille rect{fill:#fff;stroke:var(--linie2);stroke-width:1.5}
.pool-karte__pille text{fill:var(--tinte);font-size:var(--h3);font-weight:700;line-height:var(--h3-z);--zeile:var(--h3-z)}
.pool-karte__zahl{font-weight:700}
.pool-karte__pille--leise rect{fill:var(--grau2)}
.pool-karte__pille--leise text{fill:var(--text2)}
.pool-regionen{margin:0;padding:0;list-style:none}
.pool-regionen li{border-bottom:1px solid var(--linie)}
.pool-region{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;margin:0;padding:10px 0;border:0;background:none;text-align:left;color:var(--tinte);cursor:pointer;font:inherit;font-size:var(--fliess);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.pool-region:hover .pool-region__name{text-decoration:underline}
.pool-region__name{display:inline-flex;align-items:center;gap:10px}
.pool-region__name i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--med-gruen)}
.pool-n{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pool-n--wenige,.pool-n--anfrage{font-weight:500;font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.pool-regionen__ohne{margin:10px 0 0;font-size:var(--klein);line-height:var(--klein-z);color:var(--text3);--zeile:var(--klein-z)}
@media (max-width:960px){ .pool-region-raster{grid-template-columns:minmax(0,1fr);gap:20px} }
/* am Handy wäre die Schrift in der Karte zu klein: die Karte zeigt nur das Leuchten, Zahlen und Namen stehen in der Liste darunter */
@media (max-width:700px){ .pool-karte__pille,.pool-karte__ort,.pool-karte__ortpunkt{display:none} .pool-karte{padding:8px} }

/* ---------- 3) Alle Berufe nach Fachbereich ---------- */
.pool-fb-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}
.pool-fb{min-width:0;padding:16px 18px;border:1px solid var(--linie);border-radius:14px;background:#fff}
.pool-fb__titel{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px;font-size:var(--h3);line-height:var(--h3-z);font-weight:700;color:var(--tinte);--zeile:var(--h3-z)}
.pool-fb__liste{margin:0;padding:0;list-style:none}
.pool-fb__liste li+li{border-top:1px solid var(--linie)}
.pool-beruf{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:0;padding:8px 0;border:0;background:none;text-align:left;color:var(--text);cursor:pointer;font:inherit;font-size:var(--fliess);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.pool-beruf__name{min-width:0;overflow-wrap:anywhere}
.pool-beruf:hover .pool-beruf__name{text-decoration:underline;color:var(--tinte)}
.pool-suchmandat{display:flex;align-items:flex-start;gap:10px;margin:24px 0 0;padding:16px 18px;border-radius:14px;background:var(--akzent-zart);font-size:var(--fliess);line-height:var(--fliess-z);color:var(--tinte);--zeile:var(--fliess-z)}
.marke-ipersonal .pool-suchmandat{background:var(--grau)}
.pool-suchmandat .sym{flex:none;margin-top:3px;color:var(--akzent)}
.marke-ipersonal .pool-suchmandat .sym{color:var(--tinte)}
@media (max-width:1180px){ .pool-fb-raster{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:700px){ .pool-fb-raster{grid-template-columns:minmax(0,1fr);gap:12px} .pool-fb{padding:14px 16px} }

/* ---------- 4) Verschwommene Musterkarten (ohne Daten) mit Hinweis zum Konto ---------- */
.pool-muster{position:relative;min-height:340px;padding:24px;border:1px solid var(--linie);border-radius:14px;background:var(--grau2);overflow:hidden}
.pool-muster__reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;filter:blur(5px);opacity:.75}
.pool-muster__karte{display:flex;flex-direction:column;gap:10px;height:136px;padding:16px;border:1px solid var(--linie);border-radius:14px;background:#fff}
.pool-muster__zeile{display:block;height:10px;border-radius:999px;background:var(--linie2)}
.pool-muster__zeile--titel{width:60%;height:14px;background:var(--text3)}
.pool-muster__zeile--kurz{width:45%}
.pool-muster__marke{display:block;width:72px;height:18px;border-radius:999px;background:#DDF1E5}
.pool-muster__knopf{display:block;width:40%;height:22px;margin-top:auto;border-radius:999px;background:var(--linie)}
.pool-muster__ueber{position:absolute;inset:0;display:grid;place-items:center;padding:24px}
.pool-muster__box{width:100%;max-width:600px;min-width:0;padding:24px 28px;border:1px solid var(--linie);border-radius:14px;background:#fff;box-shadow:var(--schatten)}
.pool-muster__titel{margin:0 0 8px;font-size:var(--h3);line-height:var(--h3-z);font-weight:700;--zeile:var(--h3-z)}
.pool-muster__box p{margin:0}
@media (max-width:700px){
  .pool-muster{min-height:0;padding:16px}
  .pool-muster__reihe{grid-template-columns:minmax(0,1fr);position:absolute;inset:16px;z-index:0}
  .pool-muster__reihe .pool-muster__karte:nth-child(n+4){display:none}
  .pool-muster__ueber{position:relative;z-index:1;padding:40px 0}
  .pool-muster__box{padding:18px 16px}
}

/* ---------- 5) Drei Schritte ---------- */
.pool-schritte{grid-template-columns:repeat(3,minmax(0,1fr));margin:0}
@media (max-width:900px){ .pool-schritte{grid-template-columns:minmax(0,1fr)} }

/* ---------- 6) Fenster «Kostenloses … konto anlegen» ---------- */
.pool-dialog{width:calc(100% - 32px);max-width:520px;padding:28px 28px 24px;border:0;border-radius:14px;background:#fff;color:var(--text);box-shadow:0 16px 48px rgba(24,24,27,.24)}
.pool-dialog::backdrop{background:rgba(24,24,27,.45)}
.pool-dialog__zu{position:absolute;top:10px;right:10px;display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:var(--text2);cursor:pointer}
.pool-dialog__zu:hover{background:var(--grau)}
.pool-dialog__titel{margin:0 40px 10px 0;font-size:var(--h3);line-height:var(--h3-z);font-weight:700;color:var(--tinte);--zeile:var(--h3-z)}
.pool-dialog__wahl{margin:0 0 8px;font-size:var(--klein);line-height:var(--klein-z);color:var(--text2);--zeile:var(--klein-z)}
.pool-dialog__wahl strong{color:var(--tinte)}
.pool-dialog__text{margin:0;font-size:var(--fliess);line-height:var(--fliess-z);--zeile:var(--fliess-z)}
.pool-dialog__knoepfe{display:flex;flex-direction:column;gap:10px;margin:20px 0 0}
.pool-dialog__knoepfe .knopf{width:100%;justify-content:center}