/* App-Mock: Skalierung und Zustände. Das Aussehen selbst kommt aus app-mock.css (gefiltertes CSS der App). */

/* Virtueller Bildschirm: rendert in App-Größe und wird auf den Rahmen verkleinert.
   --am-s setzen die Stufen am Ende von app-mock.css (Container-Queries auf die Rahmenbreite). */
/* overflow: clip statt hidden: kein Scrollcontainer, den Fokus, Suche oder scrollIntoView verschieben könnten */
.am { position: absolute; inset: 0; overflow: hidden; overflow: clip; container: am-rahmen / size; background: #fff; }
.am-display {
  position: absolute; left: 0; top: 0; overflow: hidden; overflow: clip;
  width: calc(100cqw / var(--am-s, 1)); height: calc(100cqh / var(--am-s, 1));
  transform: scale(var(--am-s, 1)); transform-origin: 0 0;
  container: am-display / size;
  font-family: Roboto, sans-serif; line-height: 1.5; color: rgba(0, 0, 0, .87);
  -webkit-text-size-adjust: 100%; text-align: left;
}
.am-display *, .am-display *::before, .am-display *::after { box-sizing: inherit; }
.am-display { box-sizing: border-box; }

/* Schalter und Klickflächen */
/* Ausgeblendet statt nur unsichtbar: Das Label schaltet trotzdem um, der Schalter bekommt aber keinen Fokus.
   Sonst scrollt der Browser zu ihm (z. B. Dialog-Schalter unter der Tabelle) und der obere Teil ist abgeschnitten. */
.am-schalter { display: none !important; }
.am-klickbar { position: relative; }
.am-klick { position: absolute; inset: 0; z-index: 3; margin: 0; cursor: pointer; }
/* Regeln der App für Kinder (z. B. eingeklapptes Menü: .v-list-item > :not(:first-child) auf 1 px) dürfen die Klickfläche nicht verkleinern */
.am-display .am-klickbar > .am-klick.am-klick { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; clip: auto !important; overflow: visible !important; }

/* Ansichten: scrollen senkrecht wie die Seite der App (Kopfzeile und Dialoge sind fixiert, bleiben also stehen) */
.am-ansicht { display: none; position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; }
/* Eine Auswahlliste, die die Seite umschaltet, ist offen ein zweiter Zustand der Ansicht (.am-schalter-ansicht-offen) */
.am-ansicht:has(> .am-schalter-ansicht:checked, > .am-schalter-ansicht-offen:checked) { display: block; }
.am-app { height: 100%; }

/* Menü-Ebene: Seitenmenü und Burger-Menü einmal für alle Ansichten, über ihnen. Durchsichtig und nur die Menüs anklickbar;
   den Hintergrund des offenen Burger-Menüs (schließt es) hat jede Ansicht selbst. */
.am-menue-ebene { position: absolute; inset: 0; pointer-events: none; }
.am-display .am-menue-ebene > .am-app { background: transparent !important; }
.am-display .am-menue-ebene nav { pointer-events: auto; }
.am-display .am-menue-ebene .aprocon-header-menu { pointer-events: none !important; }
/* Jeder Menüpunkt steht als aktiver und als nicht aktiver darin: sichtbar ist der, der zur gezeigten Ansicht passt */
.am-display .am-menue-ebene .menuListItem.v-list-item--active { display: none !important; }
:is(.am-display:has(> .am-ansicht > [data-am-menue="1"]:checked) .am-menue-ebene [data-am-menue="1"], .am-display:has(> .am-ansicht > [data-am-menue="2"]:checked) .am-menue-ebene [data-am-menue="2"],
  .am-display:has(> .am-ansicht > [data-am-menue="3"]:checked) .am-menue-ebene [data-am-menue="3"], .am-display:has(> .am-ansicht > [data-am-menue="4"]:checked) .am-menue-ebene [data-am-menue="4"],
  .am-display:has(> .am-ansicht > [data-am-menue="5"]:checked) .am-menue-ebene [data-am-menue="5"], .am-display:has(> .am-ansicht > [data-am-menue="6"]:checked) .am-menue-ebene [data-am-menue="6"],
  .am-display:has(> .am-ansicht > [data-am-menue="7"]:checked) .am-menue-ebene [data-am-menue="7"], .am-display:has(> .am-ansicht > [data-am-menue="8"]:checked) .am-menue-ebene [data-am-menue="8"],
  .am-display:has(> .am-ansicht > [data-am-menue="9"]:checked) .am-menue-ebene [data-am-menue="9"], .am-display:has(> .am-ansicht > [data-am-menue="10"]:checked) .am-menue-ebene [data-am-menue="10"],
  .am-display:has(> .am-ansicht > [data-am-menue="11"]:checked) .am-menue-ebene [data-am-menue="11"], .am-display:has(> .am-ansicht > [data-am-menue="12"]:checked) .am-menue-ebene [data-am-menue="12"])
  { display: flex !important; }
:is(.am-display:has(> .am-ansicht > [data-am-menue="1"]:checked) .am-menue-ebene [data-am-menue="1"], .am-display:has(> .am-ansicht > [data-am-menue="2"]:checked) .am-menue-ebene [data-am-menue="2"],
  .am-display:has(> .am-ansicht > [data-am-menue="3"]:checked) .am-menue-ebene [data-am-menue="3"], .am-display:has(> .am-ansicht > [data-am-menue="4"]:checked) .am-menue-ebene [data-am-menue="4"],
  .am-display:has(> .am-ansicht > [data-am-menue="5"]:checked) .am-menue-ebene [data-am-menue="5"], .am-display:has(> .am-ansicht > [data-am-menue="6"]:checked) .am-menue-ebene [data-am-menue="6"],
  .am-display:has(> .am-ansicht > [data-am-menue="7"]:checked) .am-menue-ebene [data-am-menue="7"], .am-display:has(> .am-ansicht > [data-am-menue="8"]:checked) .am-menue-ebene [data-am-menue="8"],
  .am-display:has(> .am-ansicht > [data-am-menue="9"]:checked) .am-menue-ebene [data-am-menue="9"], .am-display:has(> .am-ansicht > [data-am-menue="10"]:checked) .am-menue-ebene [data-am-menue="10"],
  .am-display:has(> .am-ansicht > [data-am-menue="11"]:checked) .am-menue-ebene [data-am-menue="11"], .am-display:has(> .am-ansicht > [data-am-menue="12"]:checked) .am-menue-ebene [data-am-menue="12"]):not(.v-list-item--active)
  { display: none !important; }

/* Eingeklappte Leisten (Knopf «). Menü: die App setzt Klasse und Breite, die Regeln der Klasse übernimmt css.mjs;
   Breite und Einzug stehen im Markup als style. Untermenü: die App entfernt die Textspalte, die Symbolspalte füllt die Zeile. */
.am-display:has(> .am-schalter-leiste-menue:checked) nav.v-navigation-drawer { width: 56px !important; }
.am-display:has(> .am-schalter-leiste-menue:checked) main.v-main { padding-left: 56px !important; }
.am-display:has(> .am-schalter-leiste-menue:checked) [data-am-leiste="menue"] .v-icon { transform: scaleX(-1); }
@container am-display (min-width: 960px) {
  .am-display:has(> .am-schalter-leiste-unter:checked) .aproconTab .col-10 { display: none; }
  .am-display:has(> .am-schalter-leiste-unter:checked) .aproconTab .col-2 { flex: 1 1 0; max-width: 100%; }
  .am-display:has(> .am-schalter-leiste-unter:checked) .aproconTab > .row { width: auto !important; }
  .am-display:has(> .am-schalter-leiste-unter:checked) [data-am-leiste="unter"] .v-icon { transform: scaleX(-1); }
}

/* Handyansicht: im Hochformat hat der virtuelle Bildschirm 390 px Basisbreite (Stufen in app-mock.css). Unter 960 px
   zeigt die App Kopfzeile und Burger-Menü statt Seitenmenü; Formulare und Dialoge schaltet ihr eigenes CSS um. */
@container am-display (min-width: 960px) {
  .am-display .am-mobil-kopf { display: none; }
}
@container am-display (max-width: 959px) {
  /* der Seitentitel steht in der Kopfzeile; .header bleibt als Abstand unter ihr (Regel der App) */
  .am-display nav.v-navigation-drawer, .am-display .v-main__wrap > .header .headerTitle { display: none; }
  .am-display main.v-main { padding: 0 !important; }
  /* Untermenü ist in der Handyansicht anfangs eingeklappt: der Schalter klappt es hier auf */
  .am-display:not(:has(> .am-schalter-leiste-unter:checked)) .aproconTab .col-10 { display: none; }
  .am-display:not(:has(> .am-schalter-leiste-unter:checked)) .aproconTab .col-2 { flex: 1 1 0; max-width: 100%; }
  .am-display:not(:has(> .am-schalter-leiste-unter:checked)) .aproconTab > .row { width: auto !important; }
  .am-display:not(:has(> .am-schalter-leiste-unter:checked)) [data-am-leiste="unter"] .v-icon { transform: scaleX(-1); }
  /* ohne JavaScript: alle Spalten mit Stufe aus (so zeigt die App schmale Tabellen) */
  .am:not(.am-js) .am-display [data-am-w] { display: none !important; }
}
/* Hintergrund des Burger-Menüs schließt es; die Klickfläche bleibt unter dem Menü */
.am-display .aprocon-header-menu-background > .am-klick { z-index: auto; }

/* Spalten mit Stufe (OMITTABLE), die nicht in die Breite passen */
.am-display [data-am-aus] { display: none !important; }

/* Dialoge */
.am-schalter-dialog:not(:checked) + .aprocon-form--dialog-wrapper { display: none; }

/* Reiter: Inhalt und Markierung (die App misst die Unterstreichung per JavaScript) */
/* Nicht gewählte Reiter ausblenden; der gewählte behält die Darstellung der App */
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="1"]:checked)) > .am-reiter-inhalt[data-am-reiter="1"],
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="2"]:checked)) > .am-reiter-inhalt[data-am-reiter="2"],
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="3"]:checked)) > .am-reiter-inhalt[data-am-reiter="3"],
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="4"]:checked)) > .am-reiter-inhalt[data-am-reiter="4"],
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="5"]:checked)) > .am-reiter-inhalt[data-am-reiter="5"],
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="6"]:checked)) > .am-reiter-inhalt[data-am-reiter="6"],
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="7"]:checked)) > .am-reiter-inhalt[data-am-reiter="7"],
.aprocon-form--tabbedform:not(:has(> [data-am-reiter="8"]:checked)) > .am-reiter-inhalt[data-am-reiter="8"] { display: none !important; }
.am-display .aprocon-form--vuetify .aprocon-form--tabbar:after { display: none; }
.aprocon-form--tabbedform:has(> [data-am-reiter="1"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="1"],
.aprocon-form--tabbedform:has(> [data-am-reiter="2"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="2"],
.aprocon-form--tabbedform:has(> [data-am-reiter="3"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="3"],
.aprocon-form--tabbedform:has(> [data-am-reiter="4"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="4"],
.aprocon-form--tabbedform:has(> [data-am-reiter="5"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="5"],
.aprocon-form--tabbedform:has(> [data-am-reiter="6"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="6"],
.aprocon-form--tabbedform:has(> [data-am-reiter="7"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="7"],
.aprocon-form--tabbedform:has(> [data-am-reiter="8"]:checked) > .aprocon-form--tabbar > .aprocon-form--tab[data-am-reiter="8"] { box-shadow: inset 0 -2px 0 #3f78b3; }

/* Untertabellen */
.am-display tr.am-unter { display: none; }
.am-display tr:has(> td > .am-schalter-klapp:checked) + tr.am-unter { display: table-row; }
/* Höchstens eine Zeile offen: Radiogruppe je Tabelle. An der offenen Zeile schließt der Knopf (Label auf den Schalter „zu") */
.am-display .am-klick-zu { display: none; }
.am-display tr:has(> td > .am-schalter-klapp:checked) .am-klick-zu { display: block; }

/* Auswahllisten in Formularen (die App positioniert sie per JavaScript) */
.am-schalter-liste:not(:checked) ~ .am-liste { display: none; }
.am-display .am-liste-box { position: absolute; top: 100%; left: 0; right: 0; z-index: 61; }
.am-display .am-liste-box .aprocon-form--dropdown-item { display: flex; }

/* Ausschnitte: Hülle um Tabellenzeilen außerhalb einer Tabelle (siehe aufzeichnung.mjs), selbst ohne Box */
.am-display table.am-los, .am-display table.am-los > tbody { display: contents; }

/* Auswahl-Dialoge der Felder (Kalender, Uhrzeit): die App zeigt sie modal über der Oberfläche.
   Innerhalb von .am-display (transform) bezieht sich position: fixed auf den virtuellen Bildschirm. */
.am-display .am-auswahl-hintergrund { position: fixed; inset: 0; z-index: 201; margin: 0; background: rgba(33, 33, 33, .46); cursor: pointer; }
.am-display .am-auswahl > .v-dialog__content { z-index: 202 !important; }
.am-display [data-am-schliessen] { position: relative; }

/* Umschaltknopf im Vorspann über der Werkzeugleiste (Scanner der Bestandsmeldung): zwei aufgenommene Fassungen, der
   Schalter der Ansicht wählt. Angeschaltet liegt eine Fläche über dem virtuellen Bildschirm; ein Klick daneben schaltet
   zurück wie in der App (dort nimmt er dem versteckten Eingabefeld den Fokus) */
.am-vorspann-aus, .am-vorspann-an { display: contents; }
.am-ansicht:has(> .am-schalter-vorspann:checked) .am-vorspann-aus, .am-ansicht:not(:has(> .am-schalter-vorspann:checked)) .am-vorspann-an { display: none; }
.am-vorspann-zu { display: none; }
.am-display .am-schalter-vorspann:checked ~ .am-vorspann-zu { display: block; position: fixed; inset: 0; z-index: 7; margin: 0; }

/* Aufgeklappte Auswahl eines Ausschnitts */
.am-menue-hintergrund { display: none; }
.am-schalter-menue:not(:checked) ~ .v-menu__content { display: none !important; }
.am-schalter-menue:checked ~ .am-menue-hintergrund { display: block; position: absolute; inset: 0; z-index: 7; }
.am-schalter-menue:checked ~ .v-menu__content { z-index: 8 !important; }
.am-ansicht:has(> .am-schalter-ansicht-offen:not(:checked)) > .am-app > .v-menu__content { display: none !important; }
.am-ansicht:has(> .am-schalter-ansicht-offen:checked) > .am-app > .am-menue-hintergrund { display: block; position: absolute; inset: 0; z-index: 7; }
.am-ansicht:has(> .am-schalter-ansicht-offen:checked) > .am-app > .v-menu__content { z-index: 8 !important; }

/* Zeilen: die ganze Zeile öffnet ihren Datensatz; Aufklappen, Auswahl und Menü liegen darüber */
.am-display tr.am-zeile { position: relative; cursor: pointer; }
.am-display .am-zeilen-klick { position: absolute; inset: 0; z-index: 1; margin: 0; cursor: pointer; }
.am-display tr.am-zeile :is(.am-klickbar, .select-button, .aprocon-table--menu-button) { position: relative; z-index: 2; }
/* Feste Spalten der App (sticky) über die Zeilen-Klickfläche heben, sonst verdeckt sie Aufklappen und Stift */
.am-display tr.am-zeile > td:is(.select, .aprocon-table--subtable-trigger, .actions) { z-index: 2; }
/* Ohne JavaScript: nur die aufgezeichnete Zeile öffnet den Dialog (mit ihrem Datensatz) */
.am:not(.am-js) tr.am-zeile:not(.am-zeile--standard) :is(.am-zeilen-klick:not(.am-zeilen-klick-pdf), .am-klick[for$="-dialog"]) { display: none; }
/* Anlegen braucht JavaScript (der Dialog wird mit den Vorgabewerten gefüllt) */
.am:not(.am-js) .am-klick-neu { display: none; }

/* [...]-Menü einer Zeile: ein Exemplar je verschiedenem Menü statt eines je Zeile. Welche Zeile gemeint ist, wo das
   Menü steht und worauf seine Einträge zeigen, setzt am.js beim Öffnen – ohne JavaScript bleibt der Knopf deshalb
   wirkungslos, wie schon beim Anlegen. Jedes Menü steht in einem eigenen Halter: ein Geschwister-Selektor träfe
   sonst auch die Menüs dahinter. Die Ebene liegt wie die Menü-Ebene über den Ansichten, in derselben Umgebung wie in
   der App (.aprocon-form--vuetify) – sonst greifen deren Polsterung, Farben und Variablen nicht. Sie ist durchsichtig;
   anklickbar ist nur die Hülle des offenen Menüs, und ein Klick daneben schließt es. */
.am-zeilenmenue-ebene { position: absolute; inset: 0; pointer-events: none; }
.am-display .am-zeilenmenue-ebene > .am-app { background: transparent !important; }
.am-display .am-zeilenmenue-ebene > .am-app > * { pointer-events: auto; }
.am-display .am-zeilenmenue-halter:not(:has(> .am-schalter-zeilenmenue:checked)) > :not(.am-schalter) { display: none !important; }
/* unter den Menükasten, sonst läge die Schließfläche über den Einträgen */
.am-display .am-zeilenmenue-zu { z-index: 0; }

/* Ebene der Lookup-Dialoge: wie die Zeilenmenü-Ebene, nur mit Dialogen darin. Ein solcher Dialog tritt an die Stelle
   des Dialogs, aus dem sein Stift kommt – wie ein verschachtelter Dialog in der App: Zurück-Pfeil in der Kopfzeile
   (die App bindet ihn an die Verschachtelung im Markup, die hier fehlt), und der Dialog darunter verschwindet,
   solange er offen ist. Sonst stünden zwei Fenster übereinander, die die App nie zusammen zeigt. */
.am-lookup-ebene { position: absolute; inset: 0; pointer-events: none; }
.am-display .am-lookup-ebene > .am-app { background: transparent !important; }
.am-display .am-lookup-ebene > .am-app > * { pointer-events: auto; }
.am-display .am-lookup-ebene .aprocon-form--dialog-button-back { display: block; }
.am-display:has(.am-lookup-ebene .am-schalter-dialog:checked) .am-ansicht .aprocon-form--dialog-wrapper > .aprocon-form--dialog { visibility: hidden; }
/* die App hebt die Beschriftungen der Einträge auf z-index 10; darüber muss die Klickfläche liegen */
.am-display .am-zeilenmenue .am-klick[data-am-art] { z-index: 11; }
.am:not(.am-js) .am-klick-zeilenmenue { display: none; }
/* Handyansicht: dort blendet die App die Aktionsspalte aus, es gibt also keinen [...]-Knopf. Stattdessen öffnet der
   Klick in die Zeile das Menü – und von dort geht es über „Bearbeiten" in den Dialog, wie in der App. */
.am-display .am-zeilen-klick-menue { display: none; }
@container am-display (max-width: 600px) {
  .am-display .am-zeilen-klick-menue { display: block; }
  .am-display .am-zeilen-klick:not(.am-zeilen-klick-menue) { display: none; }
}

/* Vuetify versteckt das native Kästchen einer Checkbox über input[role=checkbox]; role entfernt ausschnitt() aus den
   Aufnahmen, damit der Mock keine Rollen vortäuscht. Hier dasselbe ohne role. */
.am-display .v-input--selection-controls__input > input { position: absolute; opacity: 0; width: 100%; height: 100%; }

/* Die App setzt --view-height per JavaScript auf die Fensterhöhe; im Mock ist es die Höhe des virtuellen Bildschirms */
.am-display { --view-height: 100%; }
/* Handyansicht: die App gibt dem Dialog height: max(100vh, 50rem) und rechnet damit mit einem hohen Telefon-Fenster.
   Der Geräterahmen des Einblicks ist flacher – ohne Begrenzung liefe der Dialog unten hinaus, der Inhalt bekäme keine
   Höhe zum Scrollen und die Knopfleiste (Abbrechen, Speichern) wäre nicht zu sehen. Doppelte Klasse: gleiche
   Spezifität wie die Regel der App, aber sie soll gewinnen. */
@container am-display (max-width: 959px) {
  .am-display .aprocon-form--dialog-wrapper > .aprocon-form--dialog.aprocon-form--dialog { height: 100%; max-height: 100%; }
  /* Auswahlliste eines Ausschnitts: Die App rechnet ihre Lage beim Öffnen aus und schreibt sie in den Stil; die
     Aufnahme bringt deshalb die Werte der Desktop-Breite mit. Im schmalen Rahmen läge die Liste weit rechts
     außerhalb des Bildschirms – hier auf die Breite der Ansicht gelegt. */
  .am-display :not(.am-popup) > .am-schalter-menue:checked ~ .v-menu__content, .am-display .am-ansicht:has(> .am-schalter-ansicht-offen:checked) > .am-app > .v-menu__content {
    left: 8px !important; right: 8px !important; width: auto !important; min-width: 0 !important; max-width: none !important;
  }
  /* Menü eines Knopfes (Popup): Lage setzt am.js am Knopf; hier nur nicht breiter als der Bildschirm */
  .am-display .am-popup > .am-schalter-menue:checked ~ .v-menu__content { min-width: 0 !important; max-width: calc(100% - 16px) !important; }
}

/* Nur-lesen-Fassung eines Dialogs („Öffnen" im Zeilenmenü): Die App zeigt denselben Satz mit einem einzigen Knopf
   „Schließen" statt Speichern und Abbrechen. Den Zustand setzt am.js beim Öffnen (data-am-ansehen am Wrapper);
   ohne JavaScript gibt es ihn nicht, wie das Zeilenmenü selbst. Ausgeblendet wird immer nur der Knopf, der nicht
   zum Zustand gehört – so bleibt das display der App stehen. */
.am-display .aprocon-form--dialog-wrapper:not([data-am-ansehen]) .am-knopf-ansehen { display: none; }
.am-display .aprocon-form--dialog-wrapper[data-am-ansehen] .am-knopf-bearbeiten { display: none; }

/* Auswahl: Kästchen je Zeile (Schalter .am-schalter-auswahl). Die App zeigt die Leiste über der Tabelle, sobald eine
   Zeile angekreuzt ist, indem sie ihr eine Höhe gibt (--aprocon-table--action-bar-height; der Wert der Aufnahme steht
   als --am-auswahl-hoehe an der Tabelle). Nur die Zeilen der eigenen Tabelle zählen, nicht die einer Untertabelle.
   Die Hinterlegung der angekreuzten Zeile überträgt css.mjs aus der Regel der App (aprocon-table--selected-row).
   Den Zähler schreibt am.js – ohne JavaScript bleiben die Kästchen deshalb wirkungslos, wie das Anlegen. */
.am-display .aprocon-table:has(> .aprocon-table--scrollcontainer > table > tbody > tr > td.select > .am-schalter-auswahl:checked) { --aprocon-table--action-bar-height: var(--am-auswahl-hoehe, 48px); }
.am-display td.select > .am-schalter-auswahl:checked + .select-button [data-am-auswahl="aus"],
.am-display td.select > .am-schalter-auswahl:not(:checked) + .select-button [data-am-auswahl="an"] { display: none; }
.am:not(.am-js) .am-klick-auswahl { display: none; }

/* Dialog eines Custom-Knopfs über der Tabelle: modal wie die Auswahl-Dialoge der Felder */
.am-display .am-aktion:not(:has(> .am-schalter-aktion:checked)) > :not(.am-schalter) { display: none !important; }
.am-display .am-aktion-hintergrund { position: fixed; inset: 0; z-index: 201; margin: 0; background: rgba(33, 33, 33, .46); cursor: pointer; }
.am-display .am-aktion > .v-dialog__content { z-index: 202 !important; }
/* Popups der Knöpfe (Werkzeugleiste, Dialogfuß): auch über einem offenen Dialog. Ein Menü ohne Abdunkeln, wie in der App */
.am-display .am-popup > .am-schalter-menue:checked ~ .am-menue-hintergrund { position: fixed; z-index: 210; }
.am-display .am-popup > .am-schalter-menue:checked ~ .v-menu__content { z-index: 211 !important; }
.am-display .am-aktion.am-popup > .am-aktion-hintergrund { z-index: 210; }
.am-display .am-aktion.am-popup > .v-dialog__content { z-index: 211 !important; }

/* Berichte: Die App öffnet einen Bericht als PDF in einem eigenen Fenster (PDF-Viewer des Browsers). Der Mock zeigt ein
   Fenster über der App mit den Seiten untereinander zum Scrollen wie im Viewer, jede so breit, wie ein Viewer sie bei 100 %
   zeigt (style am Bild), höchstens so breit wie das Fenster. Die ganze Kachel öffnet den Bericht, ihr Auswahlfeld liegt
   darüber und öffnet den Kalender, dessen Tage wieder den Bericht. */
.am-display .am-kachel { cursor: pointer; }
.am-display .am-kachel .v-input.am-klickbar > .am-klick { z-index: 4; }
.am-bericht { display: none; }
.am-schalter-bericht:checked + .am-bericht { display: block; position: fixed; inset: 0; z-index: 220; }
.am-bericht__hintergrund { position: absolute; inset: 0; margin: 0; background: rgba(33, 33, 33, .46); cursor: pointer; }
.am-bericht__fenster { position: absolute; inset: 24px 48px; display: flex; flex-direction: column; overflow: hidden; border-radius: 6px; background: #525659; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.am-bericht__leiste { flex: none; display: flex; align-items: center; gap: 24px; height: 48px; padding: 0 8px 0 20px; background: #323639; color: #f1f1f1; font: 400 14px/1 Roboto, Arial, sans-serif; }
.am-bericht__titel { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.am-bericht__seite { flex: none; font-variant-numeric: tabular-nums; }
.am-bericht__zu { flex: none; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border-radius: 50%; cursor: pointer; }
.am-bericht__zu:hover { background: rgba(255, 255, 255, .12); }
.am-bericht__zu svg { width: 22px; height: 22px; fill: currentColor; }
.am-bericht__seiten { position: relative; flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 16px; }
.am-bericht__seiten img { display: block; flex: none; max-width: 100%; height: auto; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .5); }
@container am-display (max-width: 959px) {
  .am-bericht__fenster { inset: 0; border-radius: 0; }
  .am-bericht__seiten { gap: 8px; padding: 8px; }
}