/* verwaltung.gleit.css · NS-16b-REST (Welle 14, 06.11.2026): Leitmuster Liste zu Detail in der Verwaltung (DESIGN-SPEC 3 Nr 21 und 22).
 * Maske, Gleiten, Pfeil, Schleier, Handy-Streifen und weniger Bewegung kommen aus den allgemeinen `.gleit`-Regeln (`/kunde/gleitliste.css`),
 * die Karten (Nr 22) aus deren Abschnitt „Zeilen-Gleit“. Hier stehen nur Raster, erste Spalte und Detail der drei Tabellen (Nr 21).
 * Farben, Schrift und Maße nur über die Marken-Variablen (`marke.css`, `basis.css`); kein Inline-Stil (CSP). */
@import url("/kunde/gleitliste.css");

/* Raster: schmale Liste links, Detail rechts; Bezug der `cqw`-Maße ist das Raster selbst. */
.vw-gleit.gleit {
  --auf: min(100cqw - var(--streifen), 72rem); --vw-vor: 0px;
  container: vwgleit / inline-size;
  position: relative; display: grid; grid-template-columns: var(--schmal) minmax(0, 1fr); grid-template-rows: auto;
  column-gap: var(--space-4, 16px); row-gap: 0; align-items: start; min-width: 0;
}
#stil-gleit.gleit { --vw-vor: 3.5rem; }
/* Was im Zustand „offen“ rechts neben der Liste wartet (das unsichtbare Detail, die Maske) darf die Seite nicht breiter machen
   (gemessen wh-f038 Ü, Zoom 200 % bei 1280: Pakete-Detail 1292–1393 px, Seite 113 px zu breit). Nur waagerecht, das Kleben bleibt. */
:is(.vw-gleit, .gz-raster).gleit { overflow-x: clip; overflow-clip-margin: 4px; }
#systemprompts-abschnitt > .vw-gleit { max-width: none; }   /* wie vorher die Tabelle: Liste und Detail nutzen die volle Breite der Tafel */   /* Schreibstile: die Spalte „#“ (Reihenfolge) steht vor dem Namen */
.vw-gleit.gleit > .gleit-liste > .gleit-inhalt { background: var(--leinen); border-radius: var(--gleit-r); overflow: clip; }   /* NZ-03: Träger mit Radius und Beschnitt, auch offen (die Tafel trägt Rundung) */

/* Detail (die frühere Schublade): eigener Rollbereich neben der Liste, haftet beim Rollen oben (DESIGN-SPEC 2.11). In „offen“ nimmt es
   keinen Platz ein, damit unter einer kurzen Liste keine Lücke steht. */
.vw-gleit.gleit > .vw-gleit-detail {
  grid-column: 2; grid-row: 1; min-width: 0; max-width: none; margin: 0;
  position: sticky; top: var(--space-4, 16px); max-height: calc(100dvh - 2 * var(--space-4, 16px));
  overflow-y: auto; overscroll-behavior-y: contain; scrollbar-gutter: stable; overflow-anchor: none;
}
/* Der Kopf mit Titel und X bleibt oben im Detail stehen, auch wenn darin gerollt wurde (z. B. nach „Speichern“ unten): Schließen ist immer
   erreichbar, ohne erst zurückzurollen (gemessen wd E2d: X lag nach dem Speichern außerhalb des Bilds). */
.vw-gleit.gleit > .vw-gleit-detail > .schublade-kopf { position: sticky; top: 0; z-index: 1; background: inherit; }
/* Vor dem ersten Öffnen nimmt das Detail keinen Platz ein (keine Lücke unter einer kurzen Liste); nach dem ersten Schließen bleibt es unsichtbar
   stehen und hält die Höhe (`data-gehalten`, verwaltung.gleit.js), damit das Fenster beim Schließen nicht springt. */
.vw-gleit.gleit[data-zustand="offen"] > .vw-gleit-detail:not([data-gehalten]) { position: absolute; inset-block-start: 0; inset-inline: auto 0; }
/* `:not([open])`: gleich nach `showModal()` (die Liste gleitet erst einen Schritt später) ist das Detail schon fokussierbar (we-versionsschalter R2). */
.vw-gleit.gleit[data-zustand="offen"] > .vw-gleit-detail:not([open]) { visibility: hidden; }
.vw-gleit.gleit[data-zustand="offen"] > .vw-gleit-detail[open] { visibility: visible; transition: opacity var(--dauer-wechsel) var(--kurve-gleiten); }   /* sofort sichtbar, ohne Verzögerung */
/* Schließen über X, Esc oder „Schließen“ (Dialog-Muster setzt `data-schliesst`): das Detail blendet aus, während die Liste zurückgleitet
   (Timon E2: „verschwindet es schön wie das Konzept der Seite flüssig“). */
.vw-gleit.gleit > .vw-gleit-detail { transition: opacity var(--dauer-wechsel) var(--kurve-gleiten); }
.vw-gleit.gleit[data-zustand="offen"] > .vw-gleit-detail { transition: opacity var(--dauer-wechsel) var(--kurve-gleiten), visibility 0s linear var(--dauer-wechsel); }
.vw-gleit.gleit > .vw-gleit-detail[data-schliesst] { opacity: 0; }

/* Erste Spalte so breit wie die schmale Liste: Zeile 1 Name, Zeile 2 Art · Stand bzw. Beschreibung (DESIGN-SPEC 2.3), je eine Zeile. */
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .datentabelle thead th.spalte-name { width: calc(var(--schmal) - var(--vw-vor)); }
/* Alle übrigen Spalten haben feste Breiten; ohne eine freie Spalte verteilte die Tabelle den Rest auch auf die erste (gemessen 1440: breiter als
   die schmale Liste). Die Handlungsspalte nimmt den Rest, ihre Knöpfe stehen weiter rechtsbündig. */
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .datentabelle thead th.aktionen { width: auto; }
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z :is(.name-text, .name, .zweitzeile, .vw-z2) { min-width: 0; max-width: min(100%, calc(var(--schmal) - var(--vw-vor) - 1rem)); }
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z .name { display: block; overflow-wrap: anywhere; }
/* Zeile 1 bricht um statt abzuschneiden (Timon, image-3.png „Die Namen sind alle nicht scaled deshalb kann ich keinen lesen“; Probe Bericht 403);
   Zeile 2 steht in einer Zeile mit Ellipse (DESIGN-SPEC 2.3). */
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z :is(.zweitzeile, .vw-z2) {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: none; line-clamp: none;
}
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z :is(.zweitzeile, .vw-z2) { margin: 2px 0 0; color: var(--taube); font-size: var(--t-14, .875rem); font-weight: 400; }
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z { cursor: pointer; }
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z :is(.name-text, .name) { color: var(--kohle); font-size: var(--t-16, 1rem); font-weight: 500; }
:is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z:hover :is(.name-text, .name) { color: var(--glasur-tief); }

/* Gewählte Zeile: Hauch-Fläche und Kante in der Handlungsfarbe, nur solange ein Eintrag offen ist. */
.vw-gleit.gleit:not([data-zustand="offen"]) tr:is([aria-selected="true"], [data-bearbeitet="true"]) > * { background: var(--glasur-hauch); }
.vw-gleit.gleit:not([data-zustand="offen"]) tr:is([aria-selected="true"], [data-bearbeitet="true"]) > .vw-z { box-shadow: inset 3px 0 0 var(--glasur); }
.vw-gleit.gleit:not([data-zustand="offen"]) tr:is([aria-selected="true"], [data-bearbeitet="true"]) .vw-z :is(.name-text, .name) { color: var(--glasur-tief); font-weight: 600; }

/* Schmal: sichtbar bleibt nur die erste Spalte (kein Tab ins Unsichtbare), nach der Gleitzeit. */
.vw-gleit.gleit[data-zustand="schmal"] .datentabelle :is(thead, tbody td:not(.vw-z):not(.rang)),
.vw-gleit.gleit[data-zustand="schmal"] .reihenfolge-knoepfe { visibility: hidden; transition: visibility 0s linear var(--dauer-wechsel); }

/* Tabellen in Blockform (≤ 52 rem, verwaltung.css „Umbruch 3“): die erste Zelle trägt keine Spaltenbeschriftung davor, damit Name und zweite
   Zeile in der schmalen Liste stehen (in allen Zuständen gleich, die Zeile ändert ihre Höhe nicht). */
@media (max-width: 52rem) {
  .vw-gleit .datentabelle tbody td.vw-z { display: block; }
  .vw-gleit .datentabelle tbody td.vw-z::before { content: none; }
}

@media (prefers-reduced-motion: reduce) { .vw-gleit.gleit > .vw-gleit-detail { transition: none !important; } }

/* Handy (< 600 px): Streifen mit Kürzel (Timon 06.11. „Ja“); die Kürzel-Fläche liegt über der Zeile. */
@media (max-width: 599.98px) {
  .vw-gleit.gleit { column-gap: 0; }
  .vw-gleit.gleit .datentabelle tbody tr { position: relative; }
  .vw-gleit.gleit > .vw-gleit-detail { border-radius: 0; border-block: 0; border-inline-end: 0; padding-inline: var(--space-3, 12px); }
  .vw-gleit.gleit[data-zustand="schmal"] .kurz { pointer-events: auto; cursor: pointer; }
  .vw-gleit.gleit .kurz-1 { font-weight: 500; }
  .vw-gleit.gleit .kurz-2 { font-weight: 400; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Schmale Tafel (Raster unter 40 rem, z. B. Einstellungen mit Seitenleiste bei 768 px): neben 264 px Liste blieben dem Detail nur 117 px
   (gemessen 768 Grundanweisungen, Raster 397 px). Dort steht die Liste wie am Handy als Streifen mit Kürzel, das Detail bekommt die Breite.
   Abgefragt wird die Hülle des Rasters (ein Raster kann seine eigene Spaltenbreite nicht abfragen). */
:has(> :is(.vw-gleit, .gz-raster).gleit) { container: vwhuelle / inline-size; }
@container vwhuelle (max-width: 39.99rem) {
  :is(.vw-gleit, .gz-raster).gleit { --schmal: 72px; --streifen: 3rem; column-gap: 0; }
  :is(.vw-gleit, .gz-raster).gleit[data-zustand="schmal"] > .gleit-liste { border-radius: var(--gleit-r) 0 0 var(--gleit-r); }   /* NZ-03: bündig am Detail */
  :is(.vw-gleit, .gz-raster).gleit[data-zustand="schmal"] > .gleit-liste > .gleit-inhalt { clip-path: inset(0 calc(100% - var(--schmal)) 0 0 round var(--gleit-r) 0 0 var(--gleit-r)); }
  :is(.vw-gleit, .gz-raster).gleit > .gleit-schleier { border-radius: 0; }
  :is(.vw-gleit, .gz-raster).gleit .kurz {
    display: grid; position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: var(--schmal); block-size: 100%;
    align-content: center; justify-items: center; gap: 2px; padding: var(--space-2, 8px) 4px; box-sizing: border-box; line-height: 1.25;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dauer-wechsel) var(--kurve-gleiten), visibility 0s linear var(--dauer-wechsel);
  }
  :is(.vw-gleit, .gz-raster).gleit .kurz-1 { font-size: var(--t-14, .875rem); font-weight: 500; color: var(--kohle); }
  :is(.vw-gleit, .gz-raster).gleit .kurz-2 { font-size: var(--t-12, .75rem); color: var(--taube); max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  :is(.vw-gleit, .gz-raster).gleit[data-zustand="schmal"] .kurz { opacity: 1; visibility: visible; pointer-events: auto; cursor: pointer; transition: opacity var(--dauer-wechsel) var(--kurve-gleiten), visibility 0s; }
  .vw-gleit.gleit .datentabelle tbody tr { position: relative; }
  .vw-gleit.gleit[data-zustand="schmal"] .vw-z > :not(.kurz) { visibility: hidden; transition: visibility 0s linear var(--dauer-wechsel); }
  .gz-raster.gleit[data-zustand="schmal"] .gz-knopf > :not(.kurz), .gz-raster.gleit[data-zustand="schmal"] .gz-sammel { visibility: hidden; transition: visibility 0s linear var(--dauer-wechsel); }
  :is(.vw-gleit, .gz-raster).gleit > :is(.vw-gleit-detail, .gz-detail) { border-radius: 0; border-block: 0; border-inline-end: 0; padding-inline: var(--space-3, 12px); }
}
@media (prefers-reduced-motion: reduce) { :is(.vw-gleit, .gz-raster).gleit .kurz { transition: none !important; } }

/* Karten (Nr 22) im Detail: der Titel steht im Kopf des Details, im Eintrag nicht doppelt. */
.gz-detail :is(#einladungsliste .zeile-titel, .kartenliste .karte-name) { display: none; }

/* NZ-03 (N3-05, NACH-10, SONSTIGES-13): Zeilen einer Liste füllen ihre Karte. Die Lesebreite `.tafel li { max-width: 46ch }` (verwaltung.css) galt auch für
   die Zeilen; die Trenner endeten bei 454 px, rechts blieb die Karte leer. Der Abmelden-Knopf steht an der Innenkante der Tafel, nicht an eigener Kante. */
.tafel li.zeile, .tafel li.gz-zeile, .tafel .zeilen > li, .tafel .gz-zeilen > li { max-width: none; }
#inhalt > .fusszeile { padding-inline: var(--space-6); }
@media (max-width: 34rem) { #inhalt > .fusszeile { padding-inline: var(--space-4); } }

/* NZ-04b (Welle 17, Timon N1 07.11.2026 „Mobil ist die Detailansicht eine eigene … Website ohne Liste etc. Mit kleinem zurückpfeil kommt man dann in
   schnelle auf die liste die slided von links auf“): dieselbe Handy-Regel wie auf der Kundenseite (`/kunde/gleitliste.css`, NZ-04a) in der Verwaltung.
   Unter 600 px entfällt der Streifen `schmal` (gleitliste.js: Zustand `seite`); Kürzel steht als runde Marke links in der Zeile; das Detail ist eine
   eigene Vollseite ohne Liste und ohne den Rest der Tafel (`data-gleit-weg`, die Tafel trägt `data-gleit-bereich`), mit Zurückpfeil oben links (44 px),
   ohne Bereichsleiste unten; Zurück lässt die Liste von links einsliden (`data-einflug`, bei reduzierter Bewegung sofort). Ab 600 px gilt alles oben
   unverändert (Leitmuster L1 bis L8; schmale Tafeln bleiben Sache der Container-Abfrage `vwhuelle`). Nur Farben und Maße aus `marke.css`. */
@media (max-width: 599.98px) {
  /* Kürzel als Zeile: erste Zelle zweispaltig, links die runde Marke (Tabellen), bzw. der Knopf der Karten. */
  body:not([data-bereich]) .vw-gleit.gleit .datentabelle tbody .vw-z {
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--space-3, 12px); align-content: center; min-height: 3.5rem;
  }
  body:not([data-bereich]) .vw-gleit.gleit .vw-z > :not(.kurz) { grid-column: 2; }
  /* Die Breite der schmalen Liste (72 px) gilt hier nicht mehr: Name und zweite Zeile nutzen die Zeile. */
  body:not([data-bereich]) :is(#partner-gleit, #systemprompts-gleit, #stil-gleit) .vw-z :is(.name-text, .name, .zweitzeile, .vw-z2) { max-width: 100%; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit .kurz {
    display: grid; position: static; place-items: center; align-content: center; inline-size: 2.5rem; block-size: 2.5rem; margin-block-start: 2px; padding: 0; gap: 0;
    opacity: 1; visibility: visible; pointer-events: none; border-radius: var(--r-pille); background: var(--glasur-hauch); color: var(--glasur-tief);
  }
  body:not([data-bereich]) .vw-gleit.gleit .vw-z > .kurz { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit .kurz-1 { font-size: var(--t-14, .875rem); font-weight: 600; line-height: 1; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit .kurz-2 { display: none; }
  body:not([data-bereich]) .gz-raster.gleit .gz-knopf {
    min-height: 5rem; padding-inline-start: var(--space-4, 16px); column-gap: var(--space-3, 12px);
    grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-areas: "kurz z1" "kurz z2" "kurz marken";
  }
  body:not([data-bereich]) .gz-raster.gleit > .gz-detail { border: 1px solid var(--kante); border-radius: var(--r-2); padding-inline: var(--space-4, 16px); }

  /* Vollseite: eine Spalte, oben der Pfeil, darunter das Detail über die volle Breite (`!important` wie auf der Kundenseite: die Zustandsregel schlägt
     die Kennungsregeln der einzelnen Raster). */
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] { grid-template-columns: minmax(0, 1fr) !important; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] > .gleit-liste { grid-column: 1; grid-row: 1; transform: none; overflow: visible; border-radius: 0; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] > .gleit-liste > .gleit-inhalt { display: none !important; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] > :is(.vw-gleit-detail, .gz-detail) { grid-column: 1 !important; grid-row: 2 !important; margin-block-start: 0 !important; }
  body:not([data-bereich]) .vw-gleit.gleit[data-zustand="seite"] > .vw-gleit-detail { position: static; max-height: none; overflow: visible; visibility: visible; border-radius: var(--r-2); }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] > .gleit-schleier { display: none; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] .gleit-pfeil-halt { position: static; block-size: auto; justify-content: flex-start; padding: 0 0 var(--space-2, 8px); }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] .gleit-pfeil { inline-size: var(--treffer, 44px); block-size: var(--treffer, 44px); margin: 0; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] .gleit-pfeil svg { transform: rotate(180deg); }
  /* Ein Weg zurück: der Pfeil; das „ד im Kopf des Details stünde in der Vollseite doppelt daneben (weniger anstatt mehr). */
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"] :is(.gz-detail-zu, .vw-gleit-detail > .schublade-kopf .popup-x) { display: none !important; }
  body:not([data-bereich]) [data-gleit-weg] { display: none !important; }
  body:not([data-bereich]) [data-gleit-traeger] { padding: 0 !important; margin: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; }
  /* Eine linke Kante: Tafel (16 px) und Rahmen (16 px) legten 32 px links an; die Vollseite sitzt wie Kopf und Kundenseite bei 16 px. */
  body:not([data-bereich]) .tafel:has(:is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"]) { padding-inline: 0; }
  :root:has(body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-zustand="seite"]) #bereichsleiste { display: none; }
  body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-einflug] > .gleit-liste { animation: gleit-einflug 280ms var(--kurve-gleiten) both; }
}
@media (prefers-reduced-motion: reduce) { body:not([data-bereich]) :is(.vw-gleit, .gz-raster).gleit[data-einflug] > .gleit-liste { animation: none; } }

/* ===================================================================================================================================
   NZ-05 „Handy-Kanten und Kopf“ (Welle 17): Verwaltung unter 34 rem (Schale ohne Seitenleiste). Eine Textkante 16 px, Kartentext auf der
   zweiten Kante (Rand 1 px + 16 px); Kopf = höchstens eine Hinweiszeile je Band (Grenzleiste, Systemzustand); ab 34 rem unverändert.
   =================================================================================================================================== */
@media (max-width: 34rem) {
  .grenzleiste { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .rahmen > .systemzustand { margin-inline: var(--space-4); -webkit-line-clamp: 1; line-clamp: 1; }
  .rahmen > .systemzustand::before { display: none; }
  .rahmen > .systemzustand[data-offen="true"] { -webkit-line-clamp: unset; line-clamp: unset; }
  .tafel { padding-inline: 0; }
  .leerzustand, details.ab-erfassen { padding: var(--space-4); }
  fieldset.sw-karte > legend { padding-inline: 0; }
  .rm-v-kontakt > .meldung { padding: 0; border: 0; background: transparent; }
  details > summary { list-style: none; }
  details > summary::-webkit-details-marker { display: none; }
  details > summary::after { content: "\203A"; display: inline-block; margin-inline-start: var(--space-2); color: var(--marke-etikett); transition: transform .15s; }
  details[open] > summary::after { transform: rotate(90deg); }
  details.rohfelder > summary::before { content: none; }
  details.rohfelder > summary { display: flex; justify-content: space-between; }
  /* Mehr-Blatt (N1-11): Vollbreiten-Blatt am unteren Rand statt kleinem Popover; der Rest der Seite liegt unter einem Schleier. */
  .mehr-blatt:popover-open {
    inset: auto 0 0 0; width: auto; min-width: 0; max-width: none; gap: 0;
    padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    border-radius: var(--r-3) var(--r-3) 0 0;
  }
  .mehr-blatt::backdrop { background: var(--schleier); }
  .mehr-blatt .mehr-eintrag { min-height: var(--klickziel); padding-inline: 0; font-size: 1rem; }
  /* Dialoge (N1-12): der Text steht mit Abstand über Label und Feld. */
  dialog.popup p[id$="-text"] { margin: 0 0 var(--space-4); }
  dialog.popup .feld > label { display: block; margin-bottom: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) { details > summary::after { transition: none; } }