/**
 * panelpopup.css - die Nebenlisten als eigene Fenster.
 *
 * Sie öffnen über „Weiteres" in der Werkzeugleiste. Der Abschnitt selbst
 * wird aus dem rechten Panel HIERHER VERSCHOBEN (panelPopup.js) und behält
 * damit sein Aussehen aus `rightpanel.css` - hier steht nur der Rahmen
 * drumherum und das, was im Fenster anders sein muss.
 */

.pp-schleier {
    position: fixed;
    inset: 0;
    z-index: 2200;          /* über allem außer den echten Dialogen (2000+) */
    background: var(--pd-schleier);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 70px 16px 24px;
    animation: pp-auf .14s ease;
}
@keyframes pp-auf { from { opacity: 0; } to { opacity: 1; } }

.pp-fenster {
    background: var(--pd-flaeche);
    border: 1px solid var(--pd-rahmen);
    border-radius: var(--pd-radius-g);
    box-shadow: var(--pd-schatten-x);
    width: min(560px, 100%);
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: pp-rein .18s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes pp-rein {
    from { transform: translateY(-14px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

.pp-kopf {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 16px 11px;
    background: var(--pd-vertief);
    border-bottom: 1px solid var(--pd-rahmen);
}
.pp-titel {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--pd-text);
}
.pp-zu {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--pd-text-s);
    font-size: 17px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background .14s, color .14s;
    flex-shrink: 0;
}
.pp-zu:hover { background: var(--pd-gefahr-b); color: var(--pd-gefahr); }

.pp-hinweis {
    padding: 9px 16px;
    font-size: 13px;
    color: var(--pd-text-s);
    background: var(--pd-flaeche-2);
    border-bottom: 1px solid var(--pd-rahmen);
}

.pp-rumpf {
    overflow-y: auto;
    padding: 6px 10px 12px;
}

/* ⚠️ Im Fenster braucht der Abschnitt seinen eigenen Kopf nicht mehr - der
   Fenstertitel sagt dasselbe, und zum Zuklappen gibt es den Schließknopf. */
.pp-innen > .rp-section-header { display: none; }
.pp-innen { border: none; margin: 0; }
.pp-innen .rp-section-body { display: block; padding: 0; }

/* ---------- der Eintrag in „Weiteres" ---------- */
.weiteres-eintrag {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 9px 14px;
}
.weiteres-eintrag .we-hinweis {
    font-size: 12px;
    color: var(--pd-text-s);
    font-weight: 400;
    line-height: 1.3;
}

/* ---------- Das Lager ----------
   Hier warten die Abschnitte, solange ihr Fenster zu ist.

   ⚠️ NICHT `display: none`: mehrere Module messen beim Aufbau (Schieberegler,
   Listen mit eigener Bildlaufleiste), und in einem ausgeblendeten Baum ist
   jede Größe null. Aus dem Sichtfeld geschoben behalten sie echte Maße.

   ⚠️ `visibility: hidden` sorgt dafür, dass nichts davon per Tabulator
   erreichbar ist - sonst liefe der Fokus durch acht unsichtbare Panels. */
#pp-lager {
    position: absolute;
    left: -10000px;
    top: 0;
    width: 300px;
    visibility: hidden;
    pointer-events: none;
}
/* Im Fenster gilt das natürlich nicht mehr - der Abschnitt ist dann dort. */
.pp-rumpf .rp-section { visibility: visible; pointer-events: auto; }