/* Projektwahl (seit 22.10.2026): gemeinsamer Knopf „Projekte“ und Liste aller Projektseiten, siehe js/projektwahl.js.
   Bewusst neutral (Schwarz/Weiß, Systemschrift), damit er auf jeder der 25 Welten lesbar ist und keine eigene trägt. */

/* ---------- Knopf ---------- */
.pw-knopf{position:fixed;right:16px;bottom:16px;z-index:200;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;
  border:1px solid rgba(255,255,255,.55);border-radius:999px;background:#111;color:#fff;font:600 15px/1 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:0;box-shadow:0 6px 22px rgba(0,0,0,.35);cursor:pointer;transform:translateY(calc(100% + 28px));transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.pw-knopf svg{width:18px;height:18px;fill:currentColor}
/* Mit Fokus immer im Bild – auch nach dem Schließen der Liste per Maus, wenn der Fokus ohne :focus-visible zurückkehrt */
.pw-knopf.pw-da,.pw-knopf:focus{transform:none}
.pw-knopf:hover{background:#2a2a2a}
/* Fokusring zweifarbig, unabhängig von der Welt: dunkler Ring auf hellen Seiten, gelber Rand auf dunklen */
.pw-knopf:focus-visible{outline:3px solid #111;outline-offset:2px;box-shadow:0 0 0 8px #ffbf1f,0 6px 22px rgba(0,0,0,.35)}

/* ---------- Liste ---------- */
.pw-dialog{width:min(560px,calc(100vw - 24px));max-height:min(86vh,860px);padding:0;border:0;border-radius:14px;background:#fff;color:#151515;
  font:400 16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;box-shadow:0 24px 80px rgba(0,0,0,.45);overflow:hidden;display:none}
.pw-dialog[open]{display:flex;flex-direction:column}
/* Abschirmung gegen die Grundregeln der jeweiligen Projektseite (h2, h3, ul, li, a, button; *{margin:0} nimmt dem
   modalen Dialog sonst die Mitte; das hidden-Attribut der Suche gilt auch gegen display:flex der Zeilen) */
.pw-dialog{margin:auto}
.pw-dialog [hidden]{display:none}
.pw-dialog *{box-sizing:border-box}
.pw-dialog h2,.pw-dialog h3,.pw-dialog p,.pw-dialog ul,.pw-dialog li,.pw-dialog a,.pw-dialog button,.pw-dialog input{
  font-family:inherit;color:inherit;max-width:none;min-width:0;text-align:left;text-transform:none;text-wrap:wrap;text-shadow:none;letter-spacing:normal;
  background-image:none;box-shadow:none;transform:none;opacity:1;visibility:visible;clip-path:none}
.pw-dialog::backdrop{background:rgba(10,10,12,.55)}
.pw-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px 20px}
.pw-kopf h2{margin:0;font-size:20px;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.pw-zu{width:44px;height:44px;border:0;border-radius:50%;background:#f0f0f0;color:#151515;font-family:inherit;font-size:28px;line-height:1;cursor:pointer}
.pw-zu:hover{background:#e2e2e2}
.pw-suche{padding:0 20px 10px}
.pw-suche input{width:100%;min-height:44px;padding:8px 12px;border:1px solid #8a8a8a;border-radius:8px;font:inherit;color:inherit;background:#fff}
/* Statuszeile der Suche (role=status): bleibt im Baum, damit die Ansage ankommt; leer ohne Höhe */
.pw-dialog .pw-status{margin:0 20px;color:#555;font-size:14px;line-height:1.3}
.pw-dialog .pw-status:not(:empty){margin-bottom:8px}
.pw-listen{overflow:auto;padding:0 12px 8px;overscroll-behavior:contain}
.pw-zone h3{margin:14px 8px 4px;font-size:13px;font-weight:600;line-height:1.3;letter-spacing:.04em;text-transform:uppercase;color:#555}
.pw-zone ul{list-style:none;margin:0;padding:0}
.pw-zone li{display:flex;align-items:center;gap:8px;border-radius:8px}
.pw-zone li.pw-hier{background:#f3f0e4}
.pw-seite{flex:1;display:flex;align-items:baseline;gap:10px;min-height:44px;padding:10px 8px;color:inherit;text-decoration:none;border-radius:8px}
.pw-seite:hover .pw-name{text-decoration:underline;text-underline-offset:3px}
.pw-code{flex:none;width:3.4em;font:500 14px/1 ui-monospace,"Cascadia Mono",Consolas,monospace;color:#555}
.pw-name{font-weight:600}
.pw-hier .pw-name::after{content:" · diese Seite";font-weight:400;color:#555}
.pw-demo{flex:none;display:inline-flex;align-items:center;min-height:36px;margin-right:6px;padding:0 12px;border:1px solid #151515;border-radius:999px;
  color:#151515;font-size:14px;font-weight:600;text-decoration:none}
.pw-demo:hover{background:#151515;color:#fff}
.pw-dialog a:focus-visible,.pw-dialog button:focus-visible,.pw-dialog input:focus-visible{outline:3px solid #1f5fd1;outline-offset:2px}
.pw-fuss{display:flex;flex-wrap:wrap;gap:6px 18px;padding:12px 20px 16px;border-top:1px solid #e3e3e3}
.pw-fuss a{color:#151515;font-weight:600;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.pw-knopf{transition:none}}

/* ---------- Druck ---------- */
@media print{.pw-knopf,.pw-dialog{display:none!important}}