/* ==============================================================================================
   09_038 (Entscheidung 14): Gemeinsames Stylesheet der drei Struktur-Masken des Design-Modus.

   Traeger sind scripts/crfdesign/field.php, block.php und crf.php -- Fragmente im Fenster aus
   09_031 (js/bi/crf/qv-window.js). Eingebunden in scripts/html_includes.inc.php neben
   qv-window.css und audit-log.css mit demselben Cache-Stempel; damit liegt die Datei auf der
   eCRF-Seite UND im iframe-Wrapper scripts/notation/temporaryFrancisCox.php, den das Casebook fuer
   Notiz, Query und (seit 09_039 Rueckmeldung 52) die eCRF-Struktur-Maske oeffnet.

   ZWEI HAUSREGELN, die hier haerter gelten als in audit-log.css:

   1. JEDE Regel steht unter `.design-mask`. Die Seiten dieses Includes stylen nackte Elemente --
      css/bi/field.css und (bis 10_004) css/bi/form.css greifen `select`, `input`, `fieldset`, `legend` und
      `button` ohne Klasse. Eine Regel ohne Praefix waere hier kein Stil, sondern ein Eingriff in
      den eCRF. Die Lesemasken (audit-log.css) kommen mit einer Ausnahme davon (`.alog-btn`) aus,
      weil sie nur einen Knopf tragen; diese Masken tragen Formulare.
   2. (entfallen mit 09_075) Frueher: „IE-9-Modus: keine verschachtelten @media, kein `gap`“. Die
      Regel beruhte auf einer Fehldeutung des Meta-Tags X-UA-Compatible (wirkt nur im echten
      Internet Explorer). Der Bestand bleibt wie er ist -- Abstaende aus `margin`, ein flaches @media
      am Ende --, neue Regeln duerfen `gap` verwenden.

   Herkunft der Werte: Karten und Listen aus css/bi/crf/audit-log.css (09_034/09_035/09_036);
   seit 09_075 die Tokens der Huelle (css/bi/dlg/dlg.css) -- Akzent der Konfiguration #0E5F6B
   statt des frueheren Fensterblaus. Nur die JavaScript-Referenz (`.jsref-host`, Stufe P5b) traegt
   noch Altwerte.
   Der Dialog der Maske (crfDesign.dialog()/confirm()) ist seit 09_075 der blockierende Dialog der
   Huelle (js/bi/dlg/dlg-block.js, css/bi/dlg/dlg.css); das eigene `.design__overlay` ist entfallen.

   09_075 (P5a, Plan §5.2/§5.4): die Masken tragen den Fragment-Vertrag (`data-dlg-*`) -- den KOPF
   zeichnet die Huelle (css/bi/dlg/dlg.css, css/bi/crf/qv-window.css), die Masken haben keinen
   eigenen mehr. Reiterleiste und Fussleiste bleiben IN der Maskenwurzel (die Delegaten haengen
   daran) und kleben oben bzw. unten im Rumpf (`data-dlg-flush`); die Innenpolster tragen die
   Panels. Farben aus den Tokens von dlg.css (Text #2C3A47/#5F6A76, Rahmen #7C8894, Akzent
   #0E5F6B, Fokus #14707F) -- die zu hellen Altwerte sind entfallen.

   GROESSE UND HOEHE je Reiter (09_075 E28, wie vor 09_075): crfDesignTabs() gibt jedem Reiter
   seinen Groessencode (`''` volles Fenster 95vw/1400 px, 90vh -- `c` Inhaltshoehe -- `nc` schmal,
   Inhaltshoehe), showTab() schreibt ihn an die Maskenwurzel (`data-dlg-width`/`data-dlg-height`),
   die Huelle setzt `.qvw-narrow`/`.qvw-content`. Der Fensterkoerper `#qvwBody` rollt. Nur Rechte,
   Onload und Before Submit tragen am Panel `data-dlg-height="fill"`: das Fenster behaelt 90vh, der
   Koerper rollt NICHT, die Maske ist eine Flex-Spalte und der innere Bereich (Rechte-Liste,
   Code-Zeile) fuellt den Rest und rollt selbst.
   ============================================================================================== */

.design-mask {
    box-sizing: border-box;
    /* 09_075: kein Polster -- Reiter- und Fussleiste liegen randlos an (`data-dlg-flush`), die
       Innenpolster tragen die Panels. */
    padding: 0;
    /* Browser-Rueckmeldung 39: die Maske fuellt den Fensterkoerper (.qvw-body) mindestens ganz,
       die Fusszeile haengt per `margin-top: auto` unten -- sonst „springt" sie nach oben, sobald
       ausgeblendete Zeilen den Inhalt kuerzer machen als das Fenster. Bei laengerem Inhalt rollt
       der Koerper und die Fusszeile klebt wie bisher (`position: sticky`). */
    display: flex;
    flex-direction: column;
    min-height: 100%;
    background: #fff;
    color: #2C3A47;
    font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
    font-size: 12.5px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

.design-mask *,
.design-mask *:before,
.design-mask *:after {
    box-sizing: border-box;
}

.design-mask .design__hidden {
    display: none;
}

/* 09_075: der Kopf (Gattung, Titel, Kennung, Brotkrume, Plaketten) gehoert der Huelle -- die Masken
   zeichnen keinen eigenen mehr. */

/* Der Rueckweg „← Zurueck zu …" (Plan Entscheidung 7). */
.design-mask .design__back {
    display: inline-block;
    color: #1B4676;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
}

.design-mask .design__back:link,
.design-mask .design__back:visited {
    color: #1B4676;
}

.design-mask .design__back:hover {
    text-decoration: underline;
}

/* ----------------------------------------------------------------------------------------------
   Warnband -- „gilt in n Bloecken" (Feld-Maske) und „ohne Reiter" (eCRF-Maske).
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__warn {
    margin: 0 0 12px;
    padding: 9px 11px;
    border: 0;
    border-radius: 6px;
    background: #FBEBCD;
    color: #7A4A00;
    font-size: 11.5px;
    line-height: 1.45;
}

/* 09_075: Folgenwarnung im Reiter („hat Daten", „liegt in n Bloecken") -- `.dlg-warn` aus dlg.css. */
.design-mask .design__warnbar {
    margin: 0 0 14px;
}

.design-mask .design__warn--hidden {
    display: none;
}

.design-mask .design__warn-text {
    display: block;
}

.design-mask .design__warn-actions {
    margin-top: 7px;
}

.design-mask .design__warn-actions select {
    margin-right: 6px;
}

/* ----------------------------------------------------------------------------------------------
   Reiterleiste (09_075): Optik der Huelle (`.dlg__tabs`/`.dlg__tab` in dlg.css, Akzent am aktiven
   Reiter), klebend oben im Rumpf (qv-window.css, `data-dlg-flush`). Die Leiste traegt links die
   `tablist`, rechts (`.design__tabs-aside`) die Zusammenfassung der Stelle und den Rueckweg -- beide
   ausserhalb der `tablist`, aber innerhalb der Maskenwurzel (Delegation).
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__tabs {
    display: flex;
    align-items: flex-end;
    flex: none;
    gap: 16px;
    margin: 0;
    padding: 6px 18px 0;
    border-bottom: 1px solid #DCE2E8;
    background: #FFFFFF;
}

/* Die innere `tablist` ist KEINE eigene Leiste: die Regel `.qvw-body--flush [role="tablist"]` aus
   qv-window.css (klebend, gepolstert, Linie) gilt der aeusseren `.dlg__tabs`. */
.design-mask .design__tabs .design__tablist,
.qvw-body--flush .design-mask .design__tabs .design__tablist {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.design-mask .design__tabs .design__tab {
    padding-top: 4px;
}

.design-mask .design__tabs-aside {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: none;
    margin-left: auto;
    padding-bottom: 6px;
}

/* Browser-Rueckmeldung 63: ein Reiter ohne freie Zeile ist deaktiviert -- grau, kein Zeiger,
   kein Hover (syncTabAvailability() in crf-design.js). */
/* Browser-Rueckmeldung 65/67: das Filterfeld ueber Darstellungs- und Datentyp-Liste -- als Box
   erkennbar (dunklerer Rahmen, grauer Grund), nicht als loser Platzhaltertext. */
/* Spezifitaet 0,3,0: die allgemeine `.design-mask .design__input`-Regel steht weiter unten und
   gewaenne sonst bei gleicher Gewichtung. */
/* Browser-Rueckmeldung 70/71: durchsuchbare Auswahlliste als EIN Element (wie qvCombo im
   Workflow-Editor). Das <select> bleibt als Wertträger versteckt; davor steht ein Textfeld, die
   gefilterte Liste legt sich absolut darunter über die folgenden Zeilen. */
.design-mask .design__combo {
    position: relative;
    display: block;
    width: 100%;
    max-width: 420px;
}

.design-mask .design__combo-source {
    display: none;
}

/* Rueckmeldung 82: ein Kombinationsfeld, dessen Auswahlliste diese Art nicht braucht (Block und
   Feld ausser bei „Field value"), verschwindet mit ihr. Die Klasse allein reicht NICHT:
   `.design-mask .design__hidden` steht weiter oben in dieser Datei und ist gleich stark wie
   `.design-mask .design__combo { display: block }` -- bei Gleichstand gewinnt die spaetere Regel,
   also die des Kombinationsfeldes. Darum hier, mit einer Klasse mehr. */
.design-mask .design__combo.design__hidden {
    display: none;
}

/* Browser-Rueckmeldung zu 09_053 (Punkte 1 und 2): der Knopf des Listeneditors steht NEBEN dem
   Kombinationsfeld der Listenzeile, nicht darunter, und traegt ein Bleistift-Symbol statt eines
   Textes.
   `.design__combo` ist `display: block; width: 100%` und nimmt darum die ganze Steuerbreite --
   alles dahinter beginnt eine neue Zeile. Geloest wird das AN DER ZEILE (`design__row--list`,
   gesetzt ueber das vierte Argument von `crfDesignRow()` in scripts/crfdesign/field.php), NICHT an
   `.design__combo` selbst: dieselbe Klasse tragen die Kombinationsfelder der Block-, eCRF-,
   Visiten- und Workflow-Masken, und die sollen unveraendert bleiben. */
.design-mask .design__row--list .design__control,
.design-mask .design__row--lab .design__control {
    display: flex;
    align-items: center;
}

.design-mask .design__row--list .design__combo,
.design-mask .design__row--lab .design__combo {
    flex: 1 1 auto;
}

.design-mask .design__row--list .design__btn--icon,
.design-mask .design__row--lab .design__btn--icon {
    flex: 0 0 auto;
}

/* 09_060 / E6: die Laborzeile teilt sich diese vier Regeln mit der Listenzeile -- eine Quelle
   statt zweier Rechnungen. */
/* Kasten + Knopf zusammen so breit wie die uebrigen Steuerelemente der linken Spalte (315px,
   Rueckmeldung 27, weiter unten in dieser Datei): 315 - 28 (Knopf) - 6 (Abstand) = 281.
   0,4,0 -- gewinnt gegen die 315px-Regel (0,3,0). */
.design-mask--field .design__col:first-child .design__row--list .design__combo,
.design-mask--field .design__col:first-child .design__row--lab .design__combo {
    max-width: 281px;
}

/* Quadratisch und schmal statt textbreit. 0,3,0 -- gewinnt gegen `.design-mask .design__btn`
   (0,2,0) unabhaengig von der Reihenfolge in dieser Datei. */
.design-mask .design__btn.design__btn--icon {
    width: 28px;
    padding: 4px 0;
}

.design-mask .design__input.design__combo-input {
    max-width: 100%;
    padding-right: 24px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%23495057' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    cursor: pointer;
}

.design-mask .design__input.design__combo-input[disabled] {
    cursor: not-allowed;
}

/* Lage und Hoehe setzt comboPlace() fest am Viewport (Rueckmeldung 73); z-index ueber dem
   Fenster (9000), unter den Dialogen (10000). */
.design-mask .design__combo-list {
    display: none;
    position: fixed;
    z-index: 9100;
    max-height: 260px;
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #ced4da;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.design-mask .design__combo--open .design__combo-list {
    display: block;
}

.design-mask .design__combo-group-label {
    padding: 3px 6px;
    background: #f1f3f5;
    color: #6c757d;
    font-size: 11px;
    font-weight: bold;
}

.design-mask .design__combo-item {
    padding: 3px 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    cursor: pointer;
}

.design-mask .design__combo-item:hover,
.design-mask .design__combo-item--active {
    background: #e7f1ff;
    color: #0056b3;
}

.design-mask .design__combo-item--disabled,
.design-mask .design__combo-item--disabled:hover {
    background: transparent;
    color: #8896a5;
    cursor: not-allowed;
}

.design-mask .design__combo-hidden {
    display: none;
}

.dlg .design-mask .design__tab--disabled,
.dlg .design-mask .design__tab--disabled:hover,
.design-mask .design__tab--disabled,
.design-mask .design__tab--disabled:hover {
    background: transparent;
    color: #7C8894;
    font-weight: 400;
    cursor: not-allowed;
}

/* Die Innenpolster tragen die Panels (09_075, Rumpf ohne Polster). */
.design-mask .design__panel {
    display: none;
    padding: 16px 18px 20px;
}

.design-mask .design__panel--active {
    display: block;
}

/* ----------------------------------------------------------------------------------------------
   Formular: Beschriftung links, Eingabe rechts. Zwei Spalten ab 900px, darunter eine (ganz unten).
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__section {
    margin: 0 0 18px;
}

/* Browser-Rueckmeldung 36: eine Zwischenueberschrift mitten in einer Spalte („Darstellung",
   „Laborwert") bekommt Luft nach oben; die erste in der Spalte nicht. */
.design-mask .design__col > .design__section-title:not(:first-child) {
    margin-top: 22px;
}

.design-mask .design__section-title {
    margin: 0 0 9px;
    padding-bottom: 5px;
    border-bottom: 1px solid #E8EBEE;
    color: #4A5966;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* Browser-Rueckmeldung 55: ein Hinweis in der Titelzeile, rechtsbuendig, in normaler Schrift --
   statt einer eigenen Zeile unter der Eingabe. */
.design-mask .design__section-hint {
    float: right;
    color: #5F6A76;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* Browser-Rueckmeldung 55 (eCRF-Maske, Reiter 1): linke Spalte fest, rechte nimmt den Rest --
   die Werkzeugleiste von Quill (mit Tabellen-Gruppe) braucht eine Zeile, nicht zwei. */
/* Browser-Rueckmeldung 62: linke Spalte 520 statt 440px, Beschriftung 170 statt 190px -- die
   Eingaben werden von 228 auf ~330px breiter, der Editor rechts bleibt einzeilig. */
.design-mask--crf .design__cols > .design__col:first-child,
.design-mask--block .design__cols > .design__col:first-child,
.design-mask--visit .design__cols > .design__col:first-child {
    flex: 0 0 520px;
}

.design-mask--crf .design__cols > .design__col:first-child .design__label,
.design-mask--block .design__cols > .design__col:first-child .design__label,
.design-mask--visit .design__cols > .design__col:first-child .design__label {
    width: 170px;
}

.design-mask--crf .design__cols > .design__col:last-child,
.design-mask--block .design__cols > .design__col:last-child,
.design-mask--visit .design__cols > .design__col:last-child {
    flex: 1 1 500px;
}

.design-mask .design__cols {
    display: flex;
    flex-wrap: wrap;
}

.design-mask .design__col {
    flex: 1 1 380px;
    min-width: 0;
    padding-right: 22px;
}

.design-mask .design__col:last-child {
    padding-right: 0;
}

.design-mask .design__row {
    display: flex;
    align-items: flex-start;
    margin: 0 0 9px;
}

.design-mask .design__label {
    flex: none;
    width: 190px;
    /* 09_075 E28: Masse wie vor 09_075 (buendig mit dem Polster der Eingabe darunter). */
    padding: 4px 10px 0 0;
    color: #2C3A47;
    font-size: 12px;
    word-break: break-word;
}

/* Browser-Rueckmeldung 33: eine gesperrte Zeile wird AUSGEBLENDET statt grau -- der Typ eines
   Feldes bzw. die Art eines Blocks entscheidet, welche Eingaben es gibt, und alles darunter rueckt
   nach. lock() in crf-design.js setzt die Klasse; die Nutzlast (collect()) liess gesperrte
   Eingaben schon vorher aus. Die eingefrorene Blockart sperrt einzelne Radios, keine Zeile, und
   bleibt darum sichtbar. */
.design-mask .design__row--locked {
    display: none;
}

/* Browser-Rueckmeldung 42: gestapelte Zeile -- Beschriftung darueber, Eingabe in voller Breite
   (der Infotext-Editor der Feld-Maske). */
.design-mask .design__row--stacked {
    display: block;
}

.design-mask .design__row--stacked .design__label {
    display: block;
    width: auto;
    padding: 6px 0 4px;
}

/* Browser-Rueckmeldung 54 (eCRF-Maske): der Infotext-Editor ohne Zeilenbeschriftung ueber die
   ganze Spalte, so hoch wie die linke Spalte der Grundeinstellungen. */
.design-mask .design__row--nolabel .design__label {
    display: none;
}

/* 09_075 (E28, Rueckmeldung aus der Browser-Abnahme): der Infotext-Editor hat wieder die Groesse von
   vor 09_075 -- im Feld mindestens 230 px, in eCRF/Block/Visite streckt er sich bis zur Unterkante
   der LINKEN Spalte (Browser-Rueckmeldungen 54/59/62). Die Regeln sind spezifischer als die
   Autogrow-Vorgabe `.dlg-ed .ql-*` aus dlg.css und setzen sich darum durch. */
.design-mask--field .design__row--stacked .design__quill .ql-editor {
    min-height: 230px;
}

.design-mask--crf .design__cols > .design__col:last-child,
.design-mask--block .design__cols > .design__col:last-child,
.design-mask--visit .design__cols > .design__col:last-child {
    display: flex;
    flex-direction: column;
}

.design-mask--crf .design__col:last-child .design__row--stacked,
.design-mask--block .design__col:last-child .design__row--stacked,
.design-mask--visit .design__col:last-child .design__row--stacked {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
    align-items: stretch;
}

.design-mask--crf .design__col:last-child .design__row--stacked .design__control,
.design-mask--block .design__col:last-child .design__row--stacked .design__control,
.design-mask--visit .design__col:last-child .design__row--stacked .design__control {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

/* Seit 09_075 liegt eine Huelle um Leiste und Editor (`.design__quill-box`, von `dlgRichText.attach()`
   zu `.dlg-ed` gemacht, crf-design.js initInfotext()); der Editor selbst ist `.design__quill` =
   `.ql-container`. Die Kette Steuerzelle -> Huelle -> Container -> `.ql-editor` streckt sich. */
.design-mask--crf .design__col:last-child .design__quill-box,
.design-mask--block .design__col:last-child .design__quill-box,
.design-mask--visit .design__col:last-child .design__quill-box {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 220px;
}

.design-mask--crf .design__col:last-child .design__quill,
.design-mask--block .design__col:last-child .design__quill,
.design-mask--visit .design__col:last-child .design__quill {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
}

.design-mask--crf .design__col:last-child .design__quill .ql-editor,
.design-mask--block .design__col:last-child .design__quill .ql-editor,
.design-mask--visit .design__col:last-child .design__quill .ql-editor {
    height: 100%;
    min-height: 160px;
}

.design-mask .design__quill-hint {
    margin-top: 6px;
}

/* Die Maske fuellt den Rumpf mindestens ganz, damit die Fussleiste an der Unterkante haengt, auch
   wenn der Inhalt des aktiven Reiters kuerzer ist als das feste Fenster (90vh) -- Regel der Huelle
   fuer alle Fragmente mit Reitern (`.qvw-body--flush > [data-dlg-kind]`, qv-window.css). */

.design-mask .design__control {
    flex: 1 1 auto;
    min-width: 0;
}

/* Die nackten Elemente der Seite werden hier zurueckgeholt -- field.css/form.css greifen sie
   ohne Klasse. */
.design-mask .design__input,
.design-mask .design__select,
.design-mask .design__area {
    box-sizing: border-box;
    width: 100%;
    max-width: 420px;
    margin: 0;
    /* 09_075 E28: Groesse wie vor 09_075 (Polster und Schrift bestimmen die Hoehe); Farben aus den
       Tokens der Huelle. */
    padding: 4px 7px;
    border: 1px solid #7C8894;
    border-radius: 5px;
    background: #fff;
    color: #2C3A47;
    font-family: inherit;
    font-size: 12px;
    line-height: 1.4;
    vertical-align: middle;
}

.design-mask .design__input::placeholder,
.design-mask .design__area::placeholder {
    color: #5F6A76;
    opacity: 1;
}

.design-mask .design__area {
    min-height: 54px;
    resize: vertical;
}

.design-mask .design__area--code {
    max-width: 100%;
    min-height: 150px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

.design-mask .design__input--short {
    max-width: 110px;
}

.design-mask .design__input:focus,
.design-mask .design__select:focus,
.design-mask .design__area:focus {
    border-color: #14707F;
    outline: none;
    box-shadow: 0 0 0 3px rgba(20, 112, 127, .18);
}

/* Browser-Rueckmeldung 27: die Eingaben der linken Spalte der Feld-Maske ein Viertel schmaler
   (420 -> 315 px); die rechte Spalte (Texte, Infotext-Editor) behaelt die volle Breite.
   Rueckmeldung 29: die linke Spalte selbst nur so breit wie Beschriftung (190) + Eingabe (315) +
   Luft, damit die rechte Spalte nachrueckt statt hinter Leerraum zu stehen; die Hinweise unter den
   Eingaben brechen auf Eingabebreite um. */
.design-mask--field .design__cols > .design__col:first-child {
    flex: 0 1 540px;
}

.design-mask--field .design__col:first-child .design__input,
.design-mask--field .design__col:first-child .design__select,
.design-mask--field .design__col:first-child .design__combo,
.design-mask--field .design__col:first-child .design__area,
.design-mask--field .design__col:first-child .design__hint {
    max-width: 315px;
}

/* Rueckmeldung 31: die rechte Spalte (Beschriftung, Suffix) so breit wie der Infotext-Editor. */
.design-mask--field .design__col:last-child .design__input,
.design-mask--field .design__col:last-child .design__area {
    max-width: none;
}

.design-mask .design__input[disabled],
.design-mask .design__select[disabled],
.design-mask .design__area[disabled] {
    background: #F7F9FA;
    color: #7C8894;
    cursor: not-allowed;
}

.design-mask .design__check {
    margin: 5px 0 0;
    padding: 0;
    vertical-align: middle;
}

/* Schalter statt Auswahlliste bei hoechstens drei Werten (Browser-Rueckmeldung 9 zu 09_038; seit
   09_075 `.dlg-seg` statt Radios, crfDesignSelect() in scripts/crfdesign/_mask.inc.php). Die Optik
   kommt aus dlg.css (24 px hoch, `width: max-content`) -- NIE auf die Spaltenbreite gedehnt,
   auch nicht in `.design__control` (flex: 1 1 auto). Gesperrte Option: #7C8894 auf #F7F9FA mit
   Grund als `title`; ist der ganze Schalter gesperrt, ist seine Zeile ohnehin ausgeblendet. */
.design-mask .design__radios {
    margin-top: 2px;
}

.design-mask .design__radios--locked {
    opacity: .7;
}

.design-mask .design__field--error {
    border-color: #dc3545;
    background: #fff5f5;
}

.design-mask .design__error {
    margin-top: 3px;
    color: #dc3545;
    font-size: 11px;
}

.design-mask .design__hint {
    margin-top: 4px;
    color: #5F6A76;
    font-size: 11.5px;
    line-height: 1.45;
}

.design-mask .design__hint--block {
    margin: 0 0 12px;
    padding: 9px 11px;
    border: 0;
    border-radius: 6px;
    background: #F1F4F7;
    color: #4A5966;
    font-size: 11.5px;
    line-height: 1.45;
}

/* ----------------------------------------------------------------------------------------------
   Spaltenlisten der Block-Maske (Felder) und die Blockliste der eCRF-Maske.
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__columns {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 22px; /* Browser-Rueckmeldung 23: Luft zwischen Spaltenraster und „Feld aufnehmen". */
}

.design-mask .design__column-box {
    flex: 1 1 320px;
    min-width: 0;
    padding-right: 14px;
}

.design-mask .design__column-box:last-child {
    padding-right: 0;
}

.design-mask .design__column-title {
    display: flex; /* Browser-Rueckmeldung 21: Titel links, „Platzhalter oben einfuegen" rechts. */
    align-items: center;
    justify-content: space-between;
    margin: 0 0 11px; /* 6 + 5 px Luft zur Liste (Browser-Rueckmeldung 21). */
    color: #627d98;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* 09_040: `.design__crfs` ist die eCRF-Liste der Visiten-Maske -- dieselbe Liste wie die Bloecke. */
.design-mask .design__column,
.design-mask .design__blocks,
.design-mask .design__crfs {
    margin: 0;
    padding: 6px;
    min-height: 52px;
    list-style: none;
    border: 1px dashed #dbe3ec;
    border-radius: 8px;
    background: #fbfcfe;
}

.design-mask .design__item {
    position: relative;
    margin: 0 0 6px;
    padding: 8px 10px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .05);
    list-style: none;
}

.design-mask .design__item:last-child {
    margin-bottom: 0;
}

/* Platzhalter des Rasters (Browser-Rueckmeldung 19): haelt eine Zelle frei, ziehbar wie ein Feld. */
.design-mask .design__item--gap {
    border-style: dashed;
    background: #fbfcfe;
    color: #5F6A76;
}

.design-mask .design__item--gap .design__item-name {
    color: #5F6A76;
    font-style: italic;
    font-weight: 400;
}

.design-mask .design__gap-add {
    margin: 0;
    padding: 3px 10px;
    font-size: 11px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.design-mask .design__item--placeholder {
    margin: 0 0 6px;
    height: 34px;
    border: 1px dashed #a9cbf7;
    border-radius: 8px;
    background: #f3f8ff;
}

.design-mask .design__item-main {
    display: flex;
    align-items: center;
}

.design-mask .design__grip {
    flex: none;
    margin-right: 8px;
    color: #7C8894;
    font-size: 13px;
    cursor: move;
}

.design-mask .design__item-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.design-mask .design__item-name {
    font-weight: 600;
}

/* Browser-Rueckmeldung 48: Sortier-Eintraege sind immer gleich hoch -- Name und Beschreibung je
   EINE Zeile, Ueberlaenge wird mit Ellipse gekappt (voller Text im title). Gilt nur in den
   ziehbaren Eintraegen (.design__item-text), nicht in den Verwendungslisten. */
.design-mask .design__item-text .design__item-name,
.design-mask .design__item-text .design__item-meta {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* inline-block statt block, damit die Badges der eCRF-Maske neben dem Namen bleiben. */
.design-mask .design__item-text .design__item-name {
    display: inline-block;
    max-width: 100%;
    vertical-align: top;
}

.design-mask .design__item-meta {
    display: block;
    color: #5F6A76;
    font-size: 11px;
}

.design-mask .design__item-actions {
    flex: none;
    margin-left: 8px;
    white-space: nowrap;
}

.design-mask .design__item-extra {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed #e4e9f0;
    color: #52606d;
    font-size: 11px;
}

.design-mask .design__item-extra select {
    margin-left: 6px;
}

/* Ein Block ohne Reiter, solange es Reiter gibt (Plan Entscheidung 5). */
.design-mask .design__block--notab {
    border-color: #f4d9a2;
    background: #fffdf7;
    box-shadow: inset 3px 0 0 #e0a300;
}

/* ----------------------------------------------------------------------------------------------
   Auswahl-Tabelle („Feld aufnehmen") und Verwendungs-Karten.
   ---------------------------------------------------------------------------------------------- */
/* Browser-Rueckmeldung 14: FUENF Zeilen sichtbar, dann rollt die Liste selbst -- nicht das Fenster.
   Eine Zeile ist 41px (Knopf 12px x 1,35 + 2 x 5px Polster + 2px Rand, Zelle 2 x 6px, 1px Linie),
   der Kopf 28px: 5 x 41 + 28 = 233. */
.design-mask .design__pick-wrap {
    max-height: 236px;
    overflow: auto;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
}

/* Feste Spaltenbreiten (Browser-Rueckmeldung 14): ohne `table-layout: fixed` nahm die Beschriftung
   alles, was uebrig war, und schob Darstellung, Datentyp und Pflicht an den rechten Rand. Jetzt
   bekommt die Beschriftung den Rest und wird mit Ellipse abgeschnitten (`title` traegt den
   vollen Text); die uebrigen Spalten bleiben einzeilig. */
.design-mask .design__pick {
    width: 100%;
    margin: 0;
    border: none;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 12px;
}

.design-mask .design__pick .design__pick-name { width: 20%; }
/* 09_056: aus den zwei Spalten „Darstellung" und „Datentyp / Liste" ist eine geworden
   (`design__pick-type`, Beschriftung `labels.fieldTypeOrList`). Sie erbt die Summe der beiden
   Breiten; `design__pick-datatype` hat seit 09_056 keinen Traeger mehr. Rueckmeldung 16 gilt
   unveraendert weiter: bei `selection` steht dort der Listenname, kursiv. */
.design-mask .design__pick .design__pick-type { width: 33%; }
.design-mask .design__pick .design__pick-required { width: 11%; }
.design-mask .design__pick .design__pick-target { width: 14%; }
.design-mask .design__pick .design__pick-action { width: 78px; }

.design-mask .design__pick td.design__pick-name,
.design-mask .design__pick td.design__pick-label,
.design-mask .design__pick td.design__pick-type,
.design-mask .design__pick td.design__pick-required {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: normal;
}

.design-mask .design__pick th {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 7px 10px;
    border: none;
    border-bottom: 1px solid #e4e9f0;
    background: #f5f8fc;
    color: #627d98;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.design-mask .design__pick td {
    padding: 6px 10px;
    border: none;
    border-bottom: 1px solid #f0f3f7;
    vertical-align: middle;
    word-break: break-word;
}

.design-mask .design__pick tr:last-child td {
    border-bottom: none;
}

/* Browser-Rueckmeldung 12: Suche links, „Neues Feld" rechts, in einer Zeile ueber der Liste. */
.design-mask .design__pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.design-mask .design__pick-search {
    width: 420px;
    max-width: 70%;
    margin: 0;
}

.design-mask .design__usage-row {
    display: flex;
    align-items: flex-start;
    margin: 0 0 8px;
    padding: 9px 12px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .05);
}

.design-mask .design__usage-main {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

.design-mask .design__usage-actions {
    flex: none;
    margin-left: 10px;
    white-space: nowrap;
}

.design-mask .design__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: #eef1f5;
    color: #627d98;
    font-size: 11px;
    white-space: nowrap;
}

.design-mask .design__badge--data {
    background: #dbeafe;
    color: #1e40af;
}

.design-mask .design__badge--sdv {
    background: #fef3c7;
    color: #92400e;
}

.design-mask .design__empty {
    margin: 10px 0;
    padding: 24px 14px;
    border: 1px dashed #e4e9f0;
    border-radius: 8px;
    background: #FBFCFD;
    color: #5F6A76;
    font-size: 12px;
    text-align: center;
}

.design-mask .design__add-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
}

.design-mask .design__add-row select,
.design-mask .design__add-row .design__combo {
    margin-right: 6px;
}

.design-mask .design__add-row .design__btn {
    margin-right: 6px;
}

/* ----------------------------------------------------------------------------------------------
   Rechte-Matrix von eCRF- und Block-Maske (09_075, Plan §5.4; crfDesignPermMatrix() in
   _mask.inc.php, permMatrix* in crf-design.js). Oben je Spalte ein Schalter, darunter der
   Folgesatz, dann die Chips der gesetzten Rechte, dann EIN Kasten: links die Gruppen mit
   `gesetzt/gesamt`, rechts Suche, Spaltenkopf und die Liste -- sie ist der EINE Scrollbereich
   (Panel im Hoehenmodus `fill`). Checkboxen echt, Optik ueber `appearance: none`.
   ---------------------------------------------------------------------------------------------- */
.design-mask .perm {
    display: flex;
    flex-direction: column;
    min-height: 0;
    color: #2C3A47;
}

.design-mask .perm__modes {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px 22px;
    flex: none;
    padding: 12px 14px;
    border: 1px solid #D6DEE5;
    border-radius: 8px;
    background: #FBFCFD;
}

.design-mask .perm__mode-title {
    margin: 0 0 6px;
    color: #4A5966;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.design-mask .perm__summary {
    flex: 1 1 240px;
    min-width: 200px;
    align-self: center;
    color: #4A5966;
    font-size: 12px;
    line-height: 1.5;
}

.design-mask .perm__rule {
    flex: none;
    margin: 8px 0 0;
}

.design-mask .perm__chipsrow {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    flex: none;
    margin: 10px 0;
}

.design-mask .perm__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 auto;
    min-width: 0;
    max-height: 64px;
    overflow: auto;
}

.design-mask .perm__chips-none {
    padding: 4px 0;
    color: #5F6A76;
    font-size: 12px;
}

.design-mask .perm__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 4px 0 10px;
    border-radius: 13px;
    background: #DDECEE;
    color: #0E5F6B;
    font-size: 12px;
}

.design-mask .perm__chip-cols {
    font-weight: 700;
    font-size: 11px;
}

.design-mask .perm__chip-name {
    color: #1F2933;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 11.5px;
}

.dlg .design-mask .perm__chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #0E5F6B;
    cursor: pointer;
}

.dlg .design-mask .perm__chip-x:hover {
    background: #FFFFFF;
    color: #B03A2E;
}

.design-mask .perm__chip-x svg {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.design-mask .perm__body {
    display: flex;
    flex: 1 1 auto;
    min-height: 260px;
    border: 1px solid #D6DEE5;
    border-radius: 8px;
    overflow: hidden;
}

.design-mask .perm__groups {
    display: flex;
    flex-direction: column;
    flex: 0 0 200px;
    gap: 2px;
    padding: 8px;
    overflow: auto;
    border-right: 1px solid #E8EBEE;
    background: #FBFCFD;
}

.dlg .design-mask .perm__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #2C3A47;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
}

.dlg .design-mask .perm__group:hover {
    background: #EEF3F7;
}

.dlg .design-mask .perm__group[aria-pressed="true"] {
    background: #DDECEE;
    color: #0E5F6B;
    font-weight: 700;
}

.design-mask .perm__group-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-mask .perm__group-count {
    flex: none;
    color: #4A5966;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
}

.design-mask .perm__group--unknown .perm__group-name {
    color: #7A4A00;
}

.design-mask .perm__main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.design-mask .perm__searchrow {
    flex: none;
    padding: 10px 12px;
    border-bottom: 1px solid #E8EBEE;
}

.design-mask .perm__searchrow .perm__search {
    max-width: none;
}

.design-mask .perm__head,
.design-mask .perm__row {
    display: grid;
    align-items: center;
    padding: 0 12px;
}

.design-mask .perm--crf .perm__head,
.design-mask .perm--crf .perm__row {
    grid-template-columns: minmax(0, 1fr) 92px 92px 102px;
}

.design-mask .perm--block .perm__head,
.design-mask .perm--block .perm__row {
    grid-template-columns: minmax(0, 1fr) 128px 118px;
}

.design-mask .perm__head {
    flex: none;
    height: 32px;
    border-bottom: 1px solid #E8EBEE;
    color: #4A5966;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.design-mask .perm__head-col {
    text-align: center;
}

/* Der EINE Scrollbereich des Reiters. */
.design-mask .perm__list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

.design-mask .perm__module {
    padding: 8px 12px 4px;
    color: #4A5966;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.design-mask .perm__module--unknown {
    color: #7A4A00;
}

.design-mask .perm__row {
    min-height: 36px;
    border-bottom: 1px solid #F0F2F4;
}

.design-mask .perm__row:hover {
    background: #F8FAFB;
}

.design-mask .perm__name {
    min-width: 0;
    overflow: hidden;
    color: #1F2933;
    font-family: Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.design-mask .perm__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    margin: 0;
    cursor: pointer;
}

.design-mask .perm__cell--off {
    cursor: not-allowed;
    opacity: .35;
}

.dlg .design-mask .perm__box {
    -webkit-appearance: none;
    appearance: none;
    display: inline-block;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    border: 1.5px solid #7C8894;
    border-radius: 4px;
    background: #FFFFFF;
    cursor: inherit;
    vertical-align: middle;
}

.dlg .design-mask .perm__box:checked {
    border-color: #0E5F6B;
    background: #0E5F6B url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px 14px no-repeat;
}

.dlg .design-mask .perm__box:focus {
    outline: 2px solid #14707F;
    outline-offset: 2px;
}

.design-mask .perm__empty {
    margin: 16px 12px;
    padding: 18px;
}

.design-mask .perm__empty[hidden] {
    display: none;
}

/* ----------------------------------------------------------------------------------------------
   Der Infotext-Editor (Quill, nachgeladen wie in der Notiz-Maske).
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__quill {
    min-height: 130px;
    max-width: 100%;
    background: #fff;
    font-size: 13px;
}

/* ----------------------------------------------------------------------------------------------
   Tabellen im Infotext-Editor (Quill 2).

   Quill bringt fuer `.ql-editor table/td` einen schwarzen 1-px-Rahmen mit (quill.snow.css). Hier
   wird daraus derselbe helle Rahmen wie in den Karten der Masken; ein Mindestmass an Breite und
   Polster haelt die leere Zelle anklickbar. Leiste und Tabellen-Kontextleiste kommen seit 09_075
   aus dem gemeinsamen Satz der Huelle (`window.dlgRichText`, Stil `.dlg-ed` in dlg.css).
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__quill .ql-editor table {
    margin: 4px 0;
    border-collapse: collapse;
}

.design-mask .design__quill .ql-editor td {
    min-width: 40px;
    padding: 4px 8px;
    border: 1px solid #C9D1D8;
}

/* ----------------------------------------------------------------------------------------------
   Knoepfe -- Masse von `.alog-btn` (audit-log.css), nur mit eigenem Praefix.
   ---------------------------------------------------------------------------------------------- */
/* Browser-Rueckmeldung 30: „Vorlage einsetzen" unter dem SQL-Feld buendig mit dessen linker Kante
   und mit Luft nach oben -- `.design__btn` traegt sonst 6px links fuer die Fusszeile. */
.design-mask .design__btn.design__template { /* 0,3,0: gewinnt gegen .design__btn darunter */
    margin: 8px 0 0;
}

.design-mask .design__btn {
    display: inline-block;
    margin: 0 0 0 6px;
    padding: 5px 13px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #FFFFFF;
    color: #2C3A47;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.design-mask .design__btn:first-child {
    margin-left: 0;
}

.design-mask .design__btn:hover {
    border-color: #4C5A67;
    background: #EEF3F7;
    color: #1F2933;
}

.design-mask .design__btn:focus {
    outline: 2px solid #14707F;
    outline-offset: 1px;
}

.design-mask .design__btn[disabled] {
    border-color: #7C8894;
    background: #F7F9FA;
    color: #7C8894;
    cursor: not-allowed;
}

.design-mask .design__btn--primary {
    border-color: #0E5F6B;
    background: #0E5F6B;
    color: #fff;
}

.design-mask .design__btn--primary:hover {
    border-color: #0B4F59;
    background: #0B4F59;
    color: #fff;
}

.design-mask .design__btn--danger {
    border-color: #B03A2E;
    background: #fff;
    color: #B03A2E;
}

.design-mask .design__btn--danger:hover {
    border-color: #8E2C22;
    background: #FBE6E3;
    color: #8E2C22;
}

/* Kleine Knoepfe in Listen (Stift, Pfeile, Kreuz). */
.design-mask .design__icon-btn {
    margin: 0 0 0 3px;
    padding: 2px 7px;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #4A5966;
    font: inherit;
    font-size: 12px;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
}

.design-mask .design__icon-btn:hover {
    border-color: #B9C4CE;
    background: #EEF3F7;
    color: #1F2933;
}

.design-mask .design__icon-btn:focus {
    outline: 2px solid #14707F;
    outline-offset: 1px;
}

.design-mask .design__icon-btn--danger:hover {
    border-color: #f5c2c7;
    background: #fdf1f2;
    color: #b02a37;
}

/* ----------------------------------------------------------------------------------------------
   Statuszeile -- Vorbild `.qv-status` der Workflow-Maske, aber ohne den modalen Fehlerdialog:
   diese Masken speichern kleine Einheiten, ein Dialog je Ablehnung waere Laerm.
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__status {
    min-height: 17px;
    font-size: 12px;
    word-break: break-word;
}

.design-mask .design__status--ok {
    color: #0E5F6B;
}

.design-mask .design__status--error {
    color: #B03A2E;
    font-weight: 600;
}

.design-mask .design__status--info {
    color: #4A5966;
}

/* Der Knopf „Trotzdem neu laden": er steht NEBEN der stehengebliebenen Meldung eines
   gescheiterten Cache-Neubaus (09_038, M3). Abstand aus margin, nicht aus gap. */
.design-mask .design__status-action {
    margin-left: 8px;
    vertical-align: middle;
}

/* ----------------------------------------------------------------------------------------------
   Fussleiste (09_075, crfDesignFooter() in _mask.inc.php): `.dlg__ft` aus dlg.css, klebt unten
   im rollenden Rumpf (qv-window.css, `data-dlg-flush`) und haengt per `margin-top: auto` an der
   Unterkante (Browser-Rueckmeldung 39). Reihenfolge: [Entfernen] · Status · Abstand · Schliessen ·
   [⋯] · Speichern · Speichern & Schliessen (einziger Primaerknopf).
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__footer {
    position: sticky;
    bottom: 0;
    z-index: 3;
    flex: none;
    margin: auto 0 0;
}

.design-mask .design__footer-status {
    flex: 1 1 auto;
    min-width: 0;
}

.design-mask .design__footer .dlg__spacer {
    flex: 0 0 0;
    margin-left: 0;
}

.design-mask .design__footer .dlg-btn svg {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Das ⋯-Menue (nur bei mehr als fuenf Knoepfen): klappt nach OBEN auf -- unter der Fussleiste ist
   kein Platz mehr. */
.design-mask .design__more {
    position: relative;
    display: inline-flex;
}

.dlg .design-mask .design__more-btn {
    padding: 0 9px;
}

.design-mask .design__footer .design__more-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 3.2;
}

.design-mask .design__more-menu {
    position: absolute;
    right: 0;
    bottom: 36px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-width: 200px;
    padding: 4px;
    border: 1px solid #D6DEE5;
    border-radius: 8px;
    background: #FFFFFF;
    box-shadow: 0 10px 28px rgba(23, 43, 63, .18);
}

.design-mask .design__more-menu[hidden] {
    display: none;
}

.dlg .design-mask .design__more-item {
    display: block;
    width: 100%;
    margin: 0;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #2C3A47;
    font: inherit;
    font-size: 12.5px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.dlg .design-mask .design__more-item:hover,
.dlg .design-mask .design__more-item:focus {
    background: #EEF3F7;
}

.dlg .design-mask .design__more-item[disabled] {
    color: #7C8894;
    cursor: not-allowed;
}

/* ----------------------------------------------------------------------------------------------
   Hoehenmodus `fill` (09_075, Plan §5.2, E28): das Fenster hat die feste Hoehe 90vh, der
   Rumpf rollt nicht (`.dlg.is-fill .dlg__bd`), die Maske ist die Flex-Spalte darin. Das aktive
   Panel fuellt den Rest, und der innere Bereich rollt: in den Rechten die Liste, in Onload und
   Before Submit die Code-Zeile (fitCodeRow() misst sie und gibt CodeMirror/Referenz ihre Hoehe).
   ---------------------------------------------------------------------------------------------- */
.qvw-window.is-fill .design-mask {
    min-height: 0;
}

.qvw-window.is-fill .design-mask > .design__panel--active[data-dlg-height="fill"] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 14px;
}

.qvw-window.is-fill .design-mask > .design__panel--active[data-dlg-height="fill"] > .perm {
    flex: 1 1 auto;
}

.qvw-window.is-fill .design-mask > .design__panel--active[data-dlg-height="fill"] > .design__section {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
}

/* Grundmass 0: die Hoehe der Zeile kommt vom Rumpf, nicht vom Editor darin (sonst zirkulaer). */
.qvw-window.is-fill .design-mask .design__panel--active[data-dlg-height="fill"] .design__code-row {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

/* Ohne `fill` (Rueckfall) behaelt die Rechte-Liste eine eigene Hoehe. */
.design-mask .perm__list {
    max-height: 460px;
}

.qvw-window.is-fill .design-mask .perm__list {
    max-height: none;
}

/* ==============================================================================================
   09_039: die eCRF-Maske mit sechs Reitern.

   Vier Bausteine, alle unter `.design-mask` und alle ohne `gap` und ohne verschachtelte
   @media (Hausregel 1 und 2 oben):
     1. das BAND ueber jedem Panel -- wem gehoert, was hier steht (Entscheidung 2),
     2. der ZEILEN-EDITOR der Freischaltungsregel (Entscheidung 7),
     3. der Rahmen um CodeMirror in den zwei JavaScript-Reitern (Entscheidung 8),
     4. die JavaScript-REFERENZ rechts daneben (Rueckmeldung 50).
   ============================================================================================== */

/* 1. (09_075) Die Baender „Studienweit" / „Nur diese Visite" sind Plaketten im Kopf der Huelle
   (`.dlg__badge--study|--visit`, dlg.css); die Maske schaltet sie je Reiter ueber `data-band`. */

/* ----------------------------------------------------------------------------------------------
   2. Zeilen-Editor der Freischaltungsregel. EINE Zeile je Bedingung, alles darin nebeneinander
   und umbrechend (`flex-wrap`), damit die Zeile auch im schmalen Fenster lesbar bleibt.
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__enableif {
    margin: 10px 0 0;
}

.design-mask .design__rule {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 4px;
    padding: 6px 8px;
    border: 1px solid #D6DEE5;
    border-radius: 8px;
    background: #FBFCFD;
}

.design-mask .design__rule > * {
    /* Der Abstand kommt von den Kindern selbst (historisch ohne `gap`; die IE-9-Regel dafuer ist
       mit 09_075 entfallen). */
    margin: 2px 6px 2px 0;
}

/* Rueckmeldung 82: das Kombinationsfeld steht an der Stelle seiner Auswahlliste und traegt darum
   deren Breite. Ohne die Schranke zaehlte die Flex-Zeile mit `max-width: 420px` (der Breite der
   Formularfelder) -- und jede Bedingung braeche auf zwei Zeilen um. */
.design-mask .design__rule .design__select,
.design-mask .design__rule .design__combo,
.design-mask .design__rule .design__input {
    max-width: 190px;
}

/* Rueckmeldung 84: die Operator-Auswahl zeigt ein Zeichen (=, \2260, <, >, \2264, \2265) und
   braucht keine 190px. Die Klasse setzt eiCombos() am Kombinationsfeld -- das <select> darunter
   ist unsichtbar, ein Geschwisterwaehler hilft hier also nicht.

   comboPlace() gibt der Klappliste die Breite des Textfeldes; sie ist damit ebenso schmal, und
   weil darin nur noch Zeichen stehen, reicht das. Beide mittig, sonst klebt ein einzelnes Zeichen
   am linken Rand eines Kastens, der fuer Woerter gebaut ist. Das Wort bleibt erreichbar: es steht
   als Hovertext an Option, Listeneintrag und Textfeld. */
.design-mask .design__rule .design__combo--sign {
    max-width: 68px;
}

.design-mask .design__rule .design__combo--sign .design__combo-input {
    padding-right: 20px;
    text-align: center;
}

.design-mask .design__rule .design__combo--sign .design__combo-item {
    text-align: center;
}

/* Rueckmeldung 86: der leere Eintrag („kein Operator") hat keinen Text und faellt sonst auf die
   Hoehe seines Polsters zusammen -- eine 6px hohe Zeile, die man kaum trifft. Das geschuetzte
   Leerzeichen gibt ihm eine Zeile, ohne etwas anzuzeigen. */
.design-mask .design__combo-item:empty:before {
    content: "\00a0";
}

/* Eine Zeile, die ein geloeschtes Element nennt: rot umrandet, das Element selbst rot. */
.design-mask .design__rule--missing {
    border-color: #E8B4AD;
    background: #FBE6E3;
}

.design-mask .design__rule-gone {
    color: #B03A2E;
}

/* Eine Zeile, die der Server abgelehnt hat (`rowErrors`). */
.design-mask .design__rule--error {
    border-color: #B03A2E;
    box-shadow: inset 3px 0 0 #B03A2E;
}

.design-mask .design__rule-msg {
    display: block;
    flex: 1 1 100%;
    margin: 2px 0 0;
    color: #B03A2E;
    font-size: 11px;
}

.design-mask .design__rule-msg:empty {
    display: none;
}

/* Der Klammerzaehler: ein Knopf, der die Klammern zeigt, und das Kreuz daneben. */
.design-mask .design__rule-bracket {
    white-space: nowrap;
}

.design-mask .design__rule-bracket-btn {
    min-width: 24px;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
}

.design-mask .design__rule-bracket-btn--off {
    color: #7C8894;
    font-weight: 400;
}

.design-mask .design__rule-bracket-reset {
    margin-left: 2px;
    color: #5F6A76;
}

.design-mask .design__rule-actions {
    margin-left: auto;
    white-space: nowrap;
}

/* Die Verknuepfung zwischen zwei Zeilen -- ein Umschalter, kein Auswahlfeld. */
.design-mask .design__rule-connector {
    margin: 0 0 4px;
    padding-left: 14px;
}

/* 09_075 (P5a, nur Optik -- die Mechanik bleibt bis 09_075c): der Verbinder in der Form des
   Schalters `.dlg-seg` (24 px, Rahmen #7C8894, Akzent #0E5F6B auf #DDECEE). */
.design-mask .design__btn.design__rule-connector-btn {
    min-width: 72px;
    height: 24px;
    padding: 0 12px;
    border-color: #7C8894;
    border-radius: 6px;
    background: #DDECEE;
    color: #0E5F6B;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 22px;
}

.design-mask .design__btn.design__rule-connector-btn:hover {
    border-color: #0E5F6B;
    background: #CFE4E7;
    color: #0B4F59;
}

.design-mask .design__rule-add {
    margin-top: 8px;
}

/* Die Vorschau: Klartext je Zeile und die kompilierte Regel. Browser-Rueckmeldung 53: sie steht
   UEBER den Bedingungen (Markup in crf.php), darum Luft nach unten statt nach oben. */
.design-mask .design__rule-preview {
    margin: 0 0 12px;
    padding: 10px 12px;
    border: 1px solid #D6DEE5;
    border-radius: 8px;
    background: #FBFCFD;
}

.design-mask .design__rule-preview:empty {
    display: none;
}

.design-mask .design__rule-preview-title {
    margin: 4px 0 4px;
    color: #4A5966;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.design-mask .design__rule-preview-hint {
    color: #5F6A76;
    font-size: 11px;
}

.design-mask .design__rule-narrated {
    margin: 0 0 6px;
    padding-left: 22px;
    color: #2C3A47;
}

.design-mask .design__rule-compiled,
.design-mask .design__rule-raw {
    display: block;
    padding: 6px 8px;
    overflow: auto;
    border: 1px solid #D6DEE5;
    border-radius: 6px;
    background: #F7F9FA;
    color: #1F2933;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    word-break: break-all;
}

/* Das Band des Lesemodus traegt den rohen Regeltext und den Knopf „Regel ersetzen". */
.design-mask .design__warn--readonly .design__rule-raw {
    margin: 6px 0;
}

/* ----------------------------------------------------------------------------------------------
   3. CodeMirror in den zwei JavaScript-Reitern. Die Bibliothek bringt ihr eigenes Stylesheet im
   Buendel mit (js/2021/codeEditor.js); hier steht nur, wie der Editor in dieser Maske sitzt.
   `.design__code` ist die Textarea darunter -- sichtbar nur, wenn CodeMirror fehlt.

   09_075 (P5b, Auftrag 09_075b §9.9): Rahmen #7C8894, Rinne #FBFCFD mit Linie #E4E9ED,
   Zeilennummern #5F6A76 (vorher #999, ~2.8:1), Syntaxfarben nach der Tabelle des Auftrags.
   ---------------------------------------------------------------------------------------------- */
/* Die Zeile aus Editor (Rest) und Referenz (ein Drittel, mindestens 286 px). `min-width: 0` am Editor: ohne das
   waechst ein Flex-Kind nicht unter seine Inhaltsbreite zurueck, und eine lange Zeile im Editor
   schoebe die Referenz aus dem Fenster. */
.jsref-host .design__code-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

/* Browser-Rueckmeldung 61: die zwei Code-Panels reichen bis fast an die Fusszeile -- 12px statt
   der 20px Panel-Polster; die Hoehe der Code-Zeile misst fitCodeRow() in crf-design.js (09_075:
   nur im Hoehenmodus `fill`, gegen den festen Rumpf). */
.design-mask--crf .design__panel[data-panel="onload"],
.design-mask--crf .design__panel[data-panel="beforesave"] {
    padding-bottom: 12px;
}

.design-mask--crf .design__panel[data-panel="onload"] .design__section,
.design-mask--crf .design__panel[data-panel="beforesave"] .design__section {
    margin-bottom: 0;
}

/* Der Hinweisstreifen `.dlg-info` (dlg.css) ueber der Code-Zeile; im Hoehenmodus `fill` darf er
   nicht mitschrumpfen, sonst frisst die Code-Zeile ihn auf. */
.design-mask .design__code-info {
    flex: 0 0 auto;
}

.jsref-host .design__code-main {
    flex: 1 1 auto;
    min-width: 0;
}

.design-mask .design__code {
    width: 100%;
    min-height: 540px;
    padding: 9px 11px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #fff;
    color: #2C3A47;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.65;
}

.design-mask .CodeMirror {
    height: 540px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.65;
}

/*
 * Syntaxfarben (Auftrag 09_075b §9.9, alle auf Weiss gerechnet). `body` davor: das Buendel bettet
 * sein Stylesheet (Thema `cm-s-default`) NACH den <link>s ein und gewaenne bei gleicher
 * Spezifitaet. Unter `.jsref-host`, damit die Regeln auch im Script-Fenster der Workflow-Maske
 * (`.te-code.jsref-host`) gelten -- und nirgends sonst (Expertenansicht JSON, XML-Editor).
 *
 *   Schluesselwort #6B3A86 (8.16:1) · Funktionsname #1B4676 (9.61:1) · Zeichenkette #9E2F22
 *   (7.28:1) · Zahl #7A4A00 (7.48:1) · Uebriges #2C3A47 (11.65:1) · Kommentar und Zeilennummern
 *   #5F6A76 (5.51:1).
 *
 * `cm-fn` setzt die Ueberlagerung aus crf-design.js (jsRefDecorate(): Bezeichner vor `(`);
 * `cm-def` ist der Name einer Deklaration (`function calc(`). In Zeichenketten und Kommentaren
 * haengt CodeMirror `cm-fn` an die Klasse des Grundmodus an -- dort gilt die Farbe des Grundmodus.
 */
body .jsref-host .cm-s-default {
    color: #2C3A47;
}

body .jsref-host .cm-s-default .cm-keyword,
body .jsref-host .cm-s-default .cm-atom {
    color: #6B3A86;
}

body .jsref-host .cm-s-default .cm-variable,
body .jsref-host .cm-s-default .cm-variable-2,
body .jsref-host .cm-s-default .cm-variable-3,
body .jsref-host .cm-s-default .cm-type,
body .jsref-host .cm-s-default .cm-property,
body .jsref-host .cm-s-default .cm-operator,
body .jsref-host .cm-s-default .cm-punctuation,
body .jsref-host .cm-s-default .cm-bracket {
    color: #2C3A47;
}

body .jsref-host .cm-s-default .cm-def,
body .jsref-host .cm-s-default .cm-fn {
    color: #1B4676;
}

body .jsref-host .cm-s-default .cm-string,
body .jsref-host .cm-s-default .cm-string-2,
body .jsref-host .cm-s-default .cm-string.cm-fn,
body .jsref-host .cm-s-default .cm-string-2.cm-fn {
    color: #9E2F22;
}

body .jsref-host .cm-s-default .cm-number {
    color: #7A4A00;
}

body .jsref-host .cm-s-default .cm-comment,
body .jsref-host .cm-s-default .cm-comment.cm-fn {
    color: #5F6A76;
}

body .jsref-host .CodeMirror-gutters {
    border-right: 1px solid #E4E9ED;
    background: #FBFCFD;
}

body .jsref-host .CodeMirror-linenumber {
    color: #5F6A76;
}

/* ----------------------------------------------------------------------------------------------
   4. Die JavaScript-Referenz rechts vom Editor (09_039 Rueckmeldung 50).

   09_075 (P5b, Auftrag 09_075b §9.9): die Spalte ist ein Drittel der Zeile breit (wie vor 09_075;
   Rueckmeldung Browser-Abnahme 2026-09-25: 286 px waren zu schmal), mindestens 286 px, und so hoch wie der
   Editor (fitCodeRow() bzw. im Script-Fenster der Flex-Fluss). Oben Suchfeld und Liste, die fuer
   sich rollt; unten angeheftet die Erklaerungsflaeche `.ref__detail` (Signatur, Satz, Rueckgabe;
   Parameter und Verwendung aufklappbar). Die fruehere Mechanik „Liste faehrt bei Hover ueber die
   Hilfe aus" (Rueckmeldung 81, 09_042 `--rest`) ist entfallen: die Erklaerung liegt nie mehr
   unter der Liste.

   09_049: Wurzel `.jsref-host` -- die eCRF-Maske (`.design-mask--crf.jsref-host`) und das
   Script-Fenster der Workflow-Maske (`.te-code.jsref-host`) teilen diese Regeln; Hoehen setzt
   dort das Fenster.
   ---------------------------------------------------------------------------------------------- */
.jsref-host .design__jsref {
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 33%;
    width: 33%;
    min-width: 286px;
    height: 540px;
    overflow: hidden;
    border: 1px solid #D6DEE5;
    border-radius: 6px;
    background: #fff;
}

.jsref-host .design__jsref-list {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Browser-Abnahme 2026-09-25: das Mausverhalten von vor 09_075 (09_042, Rueckmeldungen 51/81)
       zurueck -- die Liste liegt als Schicht UEBER der Erklaerung. Ohne Auswahl fuellt sie die
       Spalte; ist ein Eintrag gewaehlt (`.design__jsref--chosen`), ruht sie auf 25 % der Spalte,
       faehrt unter der Maus bzw. bei Fokus im Suchfeld bis zur Unterkante aus und nach einem Klick
       auf einen Eintrag sofort wieder ein (`--rest`, bis die Maus die Liste verlaesst). */
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    border-bottom: 1px solid transparent;
    background: #fff;
    transition: height 0.12s ease-out;
}

.jsref-host .design__jsref--chosen .design__jsref-list {
    height: 25%;
    border-bottom-color: #E4E9ED;
}

/* Zwei getrennte Regeln, kein `:hover, :focus-within` in einer Liste: kennt ein Browser
   `:focus-within` nicht, verwirft er die ganze Regel (09_042). */
.jsref-host .design__jsref--chosen .design__jsref-list:hover {
    height: 100%;
    border-bottom-color: transparent;
}

.jsref-host .design__jsref--chosen .design__jsref-list:focus-within {
    height: 100%;
    border-bottom-color: transparent;
}

/* Nach dem Klick auf einen Eintrag ruht die Liste, obwohl die Maus noch darueber steht -- sonst
   bliebe die gerade gefuellte Erklaerung verdeckt. Nach den :hover-Regeln (gleiche Spezifitaet+). */
.jsref-host .design__jsref--chosen .design__jsref-list--rest:hover {
    height: 25%;
    border-bottom-color: #E4E9ED;
}

.jsref-host .design__jsref--chosen .design__jsref-list--rest:focus-within {
    height: 25%;
    border-bottom-color: #E4E9ED;
}

@media (prefers-reduced-motion: reduce) {
    .jsref-host .design__jsref-list {
        transition: none;
    }
}

.jsref-host .design__jsref-search {
    flex: none;
    box-sizing: border-box;
    width: calc(100% - 20px);
    max-width: none;
    margin: 10px 10px 6px;
}

.jsref-host .design__jsref-search::placeholder {
    color: #5F6A76;
}

.jsref-host .design__jsref-items {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 0 6px;
    overflow: auto;
    list-style: none;
}

.jsref-host .design__jsref-items li {
    margin: 0;
    padding: 3px 12px;
    color: #2C3A47;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 09_047 D17: die Ueberschrift vor dem ersten Treffer jeder Gruppe -- kein Symbol, nicht
   anklickbar. `li` in der Auswahl, weil `.jsref-host .design__jsref-items li` sonst mit der
   hoeheren Spezifitaet gewaenne. */
.jsref-host .design__jsref-items li.design__jsref-group {
    padding: 0;
    color: #5F6A76;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    cursor: default;
}

/* 09_079: die Ueberschrift ist ein Knopf, der ihr Kapitel auf- und zuklappt. 0,2,0 schlaegt
   `.bi button` (crf.css, 0,1,1: Rand, Schrift 14px/32px, `-webkit-appearance: button`) -- darum
   setzt die Regel Rand, Schrift, Zeilenhoehe und Erscheinung selbst. */
.jsref-host .design__jsref-group-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 10px 12px 3px;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #5F6A76;
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.jsref-host .design__jsref-items li.design__jsref-group:first-child .design__jsref-group-toggle { padding-top: 4px; }

.jsref-host .design__jsref-group-toggle:hover {
    background: #EEF3F7;
    color: #2C3A47;
}

/* Eigene Regel, nicht in einer Liste mit :hover (vgl. oben). `box-shadow: none` gegen
   `.dlg button:focus-visible` (dlg.css). */
.jsref-host .design__jsref-group-toggle:focus-visible {
    outline: 2px solid #0E5F6B;
    outline-offset: -2px;
    box-shadow: none;
}

/* Pfeil: CSS-Dreieck nach rechts (zu), um 90 Grad gedreht nach unten (offen). */
.jsref-host .design__jsref-group-toggle::before {
    content: "";
    flex: none;
    width: 0;
    height: 0;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 5px solid currentColor;
    transition: transform 0.12s ease-out;
}

.jsref-host .design__jsref-group-toggle[aria-expanded="true"]::before {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .jsref-host .design__jsref-group-toggle::before {
        transition: none;
    }
}

.jsref-host .design__jsref-group-label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.jsref-host .design__jsref-group-count {
    flex: none;
    font-weight: 600;
    letter-spacing: 0;
}

/* Eintraege eines zugeklappten Kapitels (0,3,1 schlaegt `.jsref-host .design__jsref-items li`). */
.jsref-host .design__jsref-items li.design__jsref-item--hidden {
    display: none;
}

.jsref-host .design__jsref-item {
    cursor: pointer;
}

.jsref-host .design__jsref-item:hover {
    background: #EEF3F7;
}

.jsref-host .design__jsref-items li.design__jsref-item--active {
    background: #DDECEE;
    color: #0E5F6B;
    font-weight: 700;
}

.jsref-host .design__jsref-none {
    color: #5F6A76;
    font-family: inherit;
}

/* Die angeheftete Erklaerung (Auftrag 09_075b §9.9 `.ref__detail`). Hoechstens gut die Haelfte der
   Spalte; was laenger ist (aufgeklappte Parameter), rollt in ihr. */
.jsref-host .ref__detail {
    /* Unter der ruhenden Liste (25 %) bis zur Unterkante; rollt fuer sich. */
    position: absolute;
    z-index: 1;
    top: 25%;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    margin-top: auto;
    padding: 10px;
    overflow: auto;
    border-top: 1px solid #E4E9ED;
    background: #FBFCFD;
    color: #4A5966;
    font-size: 11.5px;
    line-height: 1.5;
}

.jsref-host .design__jsref-choose {
    color: #5F6A76;
    font-size: 11.5px;
}

.jsref-host .design__jsref-head {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 5px;
}

.jsref-host .ref__detail code.design__jsref-sig {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #1B4676;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Knopf im Kopf der Erklaerung -- Rahmen/Farbe kommen von der Basisklasse `design__btn`. */
.jsref-host .design__jsref-insert {
    flex: 0 0 auto;
    margin: 0;
    padding: 1px 8px;
    font-size: 11px;
}

.jsref-host .design__jsref-text {
    margin: 0 0 5px;
    color: #4A5966;
    font-size: 11.5px;
    line-height: 1.5;
}

.jsref-host .design__jsref-label {
    color: #2C3A47;
    font-weight: 700;
}

.jsref-host .design__jsref-part {
    margin: 4px 0 0;
}

.jsref-host .design__jsref-part-title {
    color: #2C3A47;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.jsref-host .design__jsref-usage {
    display: block;
    margin: 4px 0 0;
    padding: 5px 7px;
    overflow: auto;
    border: 1px solid #E4E9ED;
    border-radius: 6px;
    background: #fff;
    color: #2C3A47;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.jsref-host .design__jsref-table {
    width: 100%;
    margin-top: 4px;
    border-collapse: collapse;
    font-size: 11px;
}

.jsref-host .design__jsref-table th {
    width: 34%;
    padding: 2px 6px 2px 0;
    color: #2C3A47;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 700;
    text-align: left;
    vertical-align: top;
    word-break: break-all;
}

.jsref-host .design__jsref-table td {
    padding: 2px 0;
    color: #4A5966;
    vertical-align: top;
}

.jsref-host .design__jsref-mdn {
    color: #1B4676;
}

/* 09_048: Auflistung von event_type & Co. in Beschreibung/Parametern/Rueckgabe (jsRefText()) --
   kompakte Liste mit dem Ereignistyp als Chip, Bedeutung als Fliesstext. In der Parametertabelle
   ohne zusaetzlichen Rand links, die Zelle traegt schon keinen Einzug. */
.jsref-host .design__jsref-values {
    margin: 4px 0;
    padding-left: 16px;
    list-style: disc;
    font-size: 11px;
    line-height: 1.4;
}

.jsref-host .design__jsref-table td .design__jsref-values {
    padding-left: 14px;
}

.jsref-host .design__jsref-values li {
    margin: 1px 0;
}

.jsref-host .design__jsref-value {
    display: inline-block;
    min-width: 9em;
    padding: 1px 5px;
    border: 1px solid #E4E9ED;
    border-radius: 4px;
    background: #fff;
    color: #1B4676;
    font-family: Consolas, "Courier New", monospace;
    font-weight: 600;
    font-size: 11px;
}

.jsref-host .design__jsref-value-desc {
    margin-left: 6px;
    color: #4A5966;
}

/* Browser-Rueckmeldung 49 (09_039): die Vorschlagsliste von Ctrl-Space haengt CodeMirror direkt
   an <body>, NICHT in die Maske -- deshalb die einzige Regel dieser Datei ausserhalb von
   `.design-mask`. Die Bibliothek gibt ihr z-index 10; das Service-Fenster (#qvwOverlay) liegt bei
   9000, die Dialoge der Maske bei 10000. Ohne diese Regel oeffnet die Liste UNTER dem Fenster und
   ist unsichtbar (im DevTools-Browser gemessen: 78 Eintraege, getBoundingClientRect() im Fenster,
   nichts zu sehen). Zwischen Fenster und Dialog, damit eine Rueckfrage weiter ueber allem bleibt.
   09_042: `body` davor, weil das Buendel sein Stylesheet nach diesem <link> einbettet -- die Regel
   gewann bisher nur durch die Ladereihenfolge. Dieselbe Regel bediente kurzzeitig auch den
   Expertenmodus der Workflow-Maske (scripts/Editor/quickvalidation.php) doppelt in qv-window.css --
   entfernt, denn html_includes.inc.php bindet crf-design.css auf JEDER Seite gemeinsam mit
   qv-window.css ein, also ist hier die EINE Stelle fuer CodeMirror-Ausnahmen. */
body .CodeMirror-hints {
    z-index: 9100;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12px;
}

/* ----------------------------------------------------------------------------------------------
   09_052: Reiter „Position“ der vier Neu-Masken (scripts/crfdesign/_mask.inc.php,
   crfDesignPlace*()). Die vorhandenen Elemente sehen aus wie die Eintraege der Spaltenlisten
   (`.design__item`), die Einfuegestellen sind gestrichelte Leisten; die gewaehlte Stelle ist blau
   und traegt „NEU“. Praefix ausschliesslich `design__place-` -- an `.design__item` & Co. haengen
   Bindungen und serialize() (crf-design.js).
   ---------------------------------------------------------------------------------------------- */
.design-mask .design__place {
    margin: 0 0 16px;
    padding: 8px;
    border: 1px dashed #dbe3ec;
    border-radius: 8px;
    background: #fbfcfe;
}

.design-mask .design__place-group {
    margin: 0 0 10px;
}

.design-mask .design__place-group:last-child {
    margin-bottom: 0;
}

.design-mask .design__place-group-title,
.design-mask .design__place-column-title,
.design-mask .design__place-line--head .design__place-cell {
    margin: 4px 0 6px;
    color: #627d98;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.design-mask .design__place-entry {
    margin: 0 0 4px;
    padding: 7px 10px;
    border: 1px solid #e4e9f0;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 42, 67, .05);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
}

.design-mask .design__place-name {
    color: #102a43;
    font-weight: 700;
}

.design-mask .design__place-meta {
    margin-left: 6px;
    color: #5F6A76;
}

.design-mask .design__place-badge {
    display: inline-block;
    margin-left: 4px;
    padding: 0 6px;
    border-radius: 9px;
    background: #eef2f7;
    color: #52606d;
    font-size: 10px;
    font-weight: 400;
}

/* Die Einfuegestelle: ein schmaler, gestrichelter Knopf ueber die volle Breite. */
.design-mask .design__place-slot {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0 0 4px;
    padding: 2px 10px;
    border: 1px dashed #7C8894;
    border-radius: 6px;
    background: transparent;
    color: #4A5966;
    font: inherit;
    font-size: 11px;
    line-height: 1.5;
    text-align: left;
    cursor: pointer;
}

.design-mask .design__place-slot:hover {
    border-color: #0E5F6B;
    background: #EEF3F7;
    color: #0E5F6B;
}

.design-mask .design__place-slot:focus {
    outline: 2px solid #14707F;
    outline-offset: 1px;
}

.design-mask .design__place-plus {
    font-weight: 700;
}

.design-mask .design__place-new {
    display: none;
    margin-left: 8px;
    padding: 0 7px;
    border-radius: 9px;
    background: #0E5F6B;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}

.design-mask .design__place-slot--active,
.design-mask .design__place-slot--active:hover {
    padding-top: 6px;
    padding-bottom: 6px;
    border: 2px solid #0E5F6B;
    background: #DDECEE;
    color: #0E5F6B;
    font-weight: 700;
}

.design-mask .design__place-slot--active .design__place-new {
    display: inline-block;
}

/* Eine Luecke des Rasters: so hoch wie ein Eintrag, damit die Zeile gleich hoch bleibt. */
.design-mask .design__place-slot--gap,
.design-mask .design__place-gap {
    padding-top: 7px;
    padding-bottom: 7px;
    font-style: italic;
}

.design-mask .design__place-gap {
    margin: 0 0 4px;
    padding-left: 10px;
    border: 1px dashed #C9D1D8;
    border-radius: 8px;
    color: #5F6A76;
    font-size: 11px;
}

/* Raster (zweispaltiger Block): je Zeile zwei gleich breite Zellen, links die Zeilennummer. */
.design-mask .design__place-line {
    position: relative;
    display: flex;
    padding-left: 22px;
}

.design-mask .design__place-cell {
    flex: 1 1 0;
    min-width: 0;
    padding-right: 8px;
}

.design-mask .design__place-cell:last-child {
    padding-right: 0;
}

.design-mask .design__place-rownum {
    position: absolute;
    top: 8px;
    left: 0;
    width: 18px;
    color: #5F6A76;
    font-size: 10px;
    text-align: right;
}

/* Tabelle (tabellarischer Block): die Spalten nebeneinander, Breite je Spalte aus dem Markup. */
.design-mask .design__place--table {
    display: flex;
    flex-wrap: wrap;
}

.design-mask .design__place-column {
    box-sizing: border-box;
    min-width: 160px;
    padding-right: 8px;
}

.design-mask .design__place-column:last-child {
    padding-right: 0;
}

/* Die Zusammenfassung im Kopf: ein Knopf, der in den Reiter „Position“ fuehrt. */
.design-mask .design__place-summary {
    display: inline-block;
    margin: 0;
    padding: 3px 10px;
    border: 1px solid #7C8894;
    border-radius: 6px;
    background: #FFFFFF;
    color: #0E5F6B;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.design-mask .design__place-summary:hover {
    border-color: #0E5F6B;
    background: #EEF3F7;
}

.design-mask .design__place-summary-label {
    font-weight: 700;
}

.design-mask .design__place-warn {
    margin: 0 0 12px;
}

/* ----------------------------------------------------------------------------------------------
   Schmales Fenster (der Anwender kann es ziehen, das Casebook zeigt es im iframe). Flach, ohne
   Verschachtelung (historisch wegen einer IE-9-Regel, die mit 09_075 entfallen ist).
   ---------------------------------------------------------------------------------------------- */
@media (max-width: 899px) {
    .design-mask .design__row {
        display: block;
    }

    .design-mask .design__label {
        width: auto;
        padding: 0 0 3px;
    }

    .design-mask .design__input,
    .design-mask .design__select,
    .design-mask .design__combo,
    .design-mask .design__area {
        max-width: 100%;
    }

    .design-mask .design__col,
    .design-mask .design__column-box {
        flex: 1 1 100%;
        padding-right: 0;
    }

    .design-mask .design__footer {
        flex-wrap: wrap;
    }

    .design-mask .design__footer-status {
        flex: 1 1 100%;
        order: -1;
    }

    .design-mask .perm__groups {
        flex-basis: 140px;
    }

    /* 09_039: im schmalen Fenster steht jede Bedingung untereinander statt nebeneinander --
       sechs Auswahlfelder in einer Zeile waeren dort unlesbar. */
    .design-mask .design__rule {
        display: block;
    }

    .design-mask .design__rule .design__select,
    .design-mask .design__rule .design__combo,
    .design-mask .design__rule .design__input {
        max-width: 100%;
    }

    .design-mask .design__rule-actions {
        display: block;
        margin-left: 0;
    }

    /* 09_039 Rueckmeldung 50: unter 900px steht die Referenz UNTER dem Editor statt daneben --
       ein Drittel von 300px waere weder Liste noch Hilfe. Die Hoehen bleiben, damit beide Faecher
       ihr eigenes Rollen behalten. */
    .jsref-host .design__code-row {
        display: block;
    }

    .jsref-host .design__jsref {
        width: auto;
        margin: 12px 0 0;
    }
}