/* #1555 Baustein 7: Akte als Seitenfenster rechts über der Liste (Entwurf B).
   Nur Tokens, keine Literale (der Schleier nutzt dieselbe Tinte wie shadow-float).
   Die Hülle (Schleier + Fenster) steht am Ende von main in base.html:

     .cm-seitenfenster (#seitenfenster-huelle)
       > button.cm-seitenfenster-schleier (Klick schließt, tabindex="-1")
       > #loeschen-ort, #direkt-angebot-ort (Dialog-Ziele der Akte)
       > section.cm-seitenfenster-fenster (#seitenfenster, role="dialog")

   Unter 1280 px fließt die Akte normal mit (eigene Seite), der Schleier ist
   aus. Ab 1280 px wird das Fenster fest (560 px rechts, voll hoch) und der
   Schleier deckt alles ab (der Entwurf zeichnet die Akte bei 1280 im
   Fenster); sichtbar wird beides erst mit .hat-seitenfenster an .cm-app
   (setzt liste_akte.js beim Öffnen). Ohne Skript bleibt auf der
   Akte-Seite das Fenster stehen (progressive Verbesserung), auf der Liste ist
   es leer und damit unsichtbar. */

.cm-seitenfenster-schleier{display:none}
.cm-seitenfenster-fenster{display:block;min-width:0}

@media (min-width:1280px){
  /* Merkmal für das Skript (eine Quelle, wie --ld-aktiv im Bestand). */
  .ag-ld[data-seitenfenster]{--sf-aktiv:1}
  /* Hülle: ab 1280 px gehört die Titelzeile der Liste, die Akte bringt ihren
     Kopf im Fenster mit (die 1412-px-Umschaltung des Bestands gilt nur für
     Verkauf und Kontakte). */
  .cm-app:has(main .ag-ld[data-seitenfenster]) .nur-liste-akte{display:block !important}
  .cm-app:has(main .ag-ld[data-seitenfenster]) .nur-liste-akte.ag-ld-seitenaktionen,
  .cm-app:has(main .ag-ld[data-seitenfenster]) .nur-liste-akte.ag-ld-act-liste{display:flex !important}
  .cm-app:has(main .ag-ld[data-seitenfenster]) .nur-schmal-akte{display:none !important}
  .cm-seitenfenster-schleier{
    display:none;
    position:fixed;
    inset:0;
    z-index:40; /* unter Dialogen (.cm-scrim 50), über dem Inhalt */
    border:0;
    padding:0;
    cursor:pointer;
    background:rgba(21,24,29,.17); /* ~17 % — wie im Entwurf über Sidebar und Kopf */
  }
  .cm-app.hat-seitenfenster .cm-seitenfenster-schleier{display:block}

  .cm-seitenfenster-fenster{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    z-index:45; /* über dem Inhalt, unter Dialogen aus der Akte */
    width:560px;
    max-width:calc(100vw - 32px);
    display:flex;
    flex-direction:column;
    background:var(--surface);
    box-shadow:-24px 0 48px rgba(21,24,29,.18);
    overflow:hidden;
  }
  /* Leere Hülle (Liste ohne offene Akte) bleibt unsichtbar — das Fragment
     bringt immer ein Element mit (.ag-ld-akte). */
  .cm-seitenfenster-fenster:not(:has(> *)){display:none}
  /* Das Akte-Fragment füllt das Fenster und scrollt innen. */
  .cm-seitenfenster-fenster > .ag-ld-akte{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
  }
  .cm-seitenfenster-fenster .cm-akte{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .cm-seitenfenster-fenster .cm-akte .cm-akte-panels{flex:1 1 auto;min-height:0;overflow:auto}

  /* Direktlink: die Liste steht hinter dem Schleier (wie im Entwurf). */
  .cm-app.hat-seitenfenster .ag-ld-direkt .ag-ld-l{display:block}

  /* #1555: ein Orange je Bildschirm — mit offener Akte wird „Fahrzeug anlegen“
     im Kopf zum Rahmenknopf. */
  .cm-app.hat-seitenfenster .act .b.main{
    background:var(--surface);
    color:var(--ink);
    border:1px solid var(--line-strong);
  }
  .cm-app.hat-seitenfenster .act .b.main:hover{background:var(--surface-sunken);color:var(--ink)}
}

/* Zustand „lädt“: das Fenster öffnet sofort mit grauem Gerüst (setzt
   liste_akte.js vor dem Abruf), die Balken füllen sich nicht. */
.cm-seitenfenster-laeuft{padding:16px 24px;display:flex;flex-direction:column;gap:12px}
.cm-seitenfenster-laeuft span{
  display:block;
  height:14px;
  border-radius:7px;
  background:var(--surface-sunken);
}
.cm-seitenfenster-laeuft span:nth-child(1){width:70%}
.cm-seitenfenster-laeuft span:nth-child(2){width:45%;height:22px}
.cm-seitenfenster-laeuft span:nth-child(3){width:100%;height:56px}
.cm-seitenfenster-laeuft span:nth-child(4){width:100%;height:28px}
.cm-seitenfenster-laeuft span:nth-child(5){width:60%;height:28px}

/* Zustand „Fehler“: gelber Kasten mit nächstem Schritt („Neu laden“). */
.cm-seitenfenster-fehler{padding:16px 24px}