Anfrage-Detail: zentriertes Fenster statt seitlicher Leiste

Rueckmeldung 22.08.2026 mit Bildschirmfoto: "ich will das nicht so ich
will es viel viel viel besser und uebersichtlicher und schoener zentriert
in der mitte."

Berechtigt, und aus mehreren Gruenden. Eine seitlich eingeschobene Leiste
ist fuer so viel Inhalt das falsche Format:
  * Der Blick springt beim Oeffnen nach rechts.
  * Die Liste dahinter bleibt halb sichtbar und lenkt ab.
  * Alles muss sich in eine schmale Spalte quetschen -- auf dem
    Bildschirmfoto stand "keine Angabe" dadurch achtmal untereinander,
    und die Abwesenheit von Information nahm mehr Platz ein als die
    Information selbst.

Jetzt: mittig, 940px breit, zweispaltig ab Tablet. Der Blick bleibt, wo
er ist, und zusammengehoerende Angaben stehen nebeneinander.

Weitere Entscheidungen:
* Mauerwerk-Umbruch (columns) statt Raster. Die Abschnitte sind
  unterschiedlich hoch; ein Raster haette grosse Luecken gerissen.
* Jeder Abschnitt bekommt eine eigene Flaeche statt nur einer Trennlinie.
* Die Kopfzeile klebt beim Scrollen oben fest. Bei einer langen Anfrage
  weiss man sonst nach dem Scrollen nicht mehr, wessen Daten man liest.
* "keine Angabe" wird kleiner und blasser dargestellt. Es ist die
  ABWESENHEIT einer Information und darf nicht aussehen wie eine.
* Die Oeffnen-Animation skaliert dezent aus der Mitte statt von rechts
  hereinzufahren, und ist bei prefers-reduced-motion ganz aus.

9/9 Tests weiterhin gruen.

Co-Authored-By: Claude Opus 5 <[email protected]>

webdesign/verwaltung.html

@@ -142,14 +142,73 @@
   .vw-detail { position: fixed; inset: 0; z-index: 100; display: none; }
   .vw-detail.vw-auf { display: block; }
   .vw-detail-schatten { position: absolute; inset: 0; background: rgba(2,4,8,.78); backdrop-filter: blur(3px); }
+  /* ---------- Detailansicht: zentriertes Fenster ----------
+     Vorher eine seitlich eingeschobene Leiste. Fuer so viel Inhalt ist
+     das das falsche Format: Der Blick springt beim Oeffnen nach rechts,
+     die Liste dahinter bleibt halb sichtbar und lenkt ab, und alles muss
+     sich in eine schmale Spalte quetschen -- "keine Angabe" stand
+     dadurch achtmal untereinander.
+
+     Jetzt mittig, breiter und zweispaltig. Der Blick bleibt, wo er ist,
+     und zusammengehoerende Angaben stehen nebeneinander statt
+     hintereinander. */
   .vw-detail-blatt {
-    position: absolute; top: 0; right: 0; bottom: 0;
-    width: min(680px, 100%);
-    background: #080d16; border-left: 1px solid var(--wd-rand-stark);
-    overflow-y: auto; padding: 1.4rem clamp(1rem,3vw,1.8rem) 3rem;
-    animation: vw-rein .28s cubic-bezier(.22,1,.36,1) both;
+    position: absolute;
+    top: 50%; left: 50%; transform: translate(-50%, -50%);
+    width: min(940px, calc(100vw - 2rem));
+    max-height: min(88vh, 900px);
+    background: linear-gradient(180deg, #0b1523, #070c15);
+    border: 1px solid var(--wd-rand-stark);
+    border-radius: 20px;
+    box-shadow: 0 50px 120px -40px rgba(0,0,0,.95), 0 0 0 1px rgba(127,208,232,.06) inset;
+    overflow-y: auto;
+    padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2rem);
+    animation: vw-rein .26s cubic-bezier(.22,1,.36,1) both;
   }
-  @keyframes vw-rein { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
+  @keyframes vw-rein {
+    from { transform: translate(-50%, -46%) scale(.97); opacity: 0; }
+    to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .vw-detail-blatt { animation: none; }
+  }
+
+  /* Kopfzeile klebt oben fest — bei langen Anfragen weiss man sonst nach
+     dem Scrollen nicht mehr, wessen Daten man gerade liest. */
+  .vw-detail-kopf {
+    position: sticky; top: calc(clamp(1.2rem, 3vw, 1.9rem) * -1);
+    margin: calc(clamp(1.2rem, 3vw, 1.9rem) * -1) calc(clamp(1rem, 3vw, 2rem) * -1) 1.2rem;
+    padding: 1.1rem clamp(1rem, 3vw, 2rem);
+    background: rgba(11, 21, 35, .96);
+    backdrop-filter: blur(10px);
+    border-bottom: 1px solid var(--wd-rand);
+    border-radius: 20px 20px 0 0;
+    z-index: 2;
+  }
+
+  /* Zwei Spalten ab Tablet: die Abschnitte sind unterschiedlich hoch,
+     deshalb Mauerwerk statt Raster — sonst entstehen grosse Luecken. */
+  @media (min-width: 780px) {
+    .vw-detail-spalten { columns: 2; column-gap: 1.4rem; }
+    .vw-detail-spalten > .vw-abschnitt {
+      break-inside: avoid; -webkit-column-break-inside: avoid;
+      display: inline-block; width: 100%;
+    }
+  }
+
+  /* Jeder Abschnitt wird eine eigene Flaeche statt nur einer Linie. */
+  .vw-detail-spalten > .vw-abschnitt {
+    padding: .95rem 1.1rem 1rem;
+    border-radius: 14px;
+    background: rgba(16, 26, 41, .5);
+    border: 1px solid var(--wd-rand);
+    margin-bottom: 1.1rem;
+  }
+  .vw-detail-spalten > .vw-abschnitt > h3 { border-bottom: none; padding-bottom: 0; margin-bottom: .7rem; }
+
+  /* "keine Angabe" tritt zurueck: Es ist die Abwesenheit einer Information
+     und darf nicht so aussehen wie eine. */
+  .vw-paar dd.vw-leer { font-size: .88rem; opacity: .55; }
   @media (prefers-reduced-motion: reduce) { .vw-detail-blatt { animation: none; } }
   .vw-detail-kopf { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.2rem; }
   .vw-zu {
@@ -757,6 +816,7 @@
           '<span class="vw-status vw-status--' + s(a.status) + '">' + s(STATUS_TEXT[a.status] || a.status) + "</span></div>" +
           '<button class="vw-zu" type="button" aria-label="Schließen">✕</button>' +
         "</div>" +
+        '<div class="vw-detail-spalten">' +
 
         '<div class="vw-abschnitt"><h3>Kontakt</h3>' +
           paar("E-Mail", a.email) +
@@ -842,6 +902,7 @@
           '<p class="wd-klein wd-leise">Archivieren löscht nichts — die Anfrage bleibt vollständig erhalten und lässt sich jederzeit zurückholen.</p>' +
           '<button type="button" class="wd-btn wd-btn--still wd-btn--klein" id="vw-archivieren">' +
           (a.archiviert ? "Aus dem Archiv zurückholen" : "Archivieren") + "</button>" +
+        "</div>" +
         "</div>";
 
       blatt.querySelector(".vw-zu").addEventListener("click", schliesseDetail);