/*
 * component.css — shared widget styles.
 * Tokens live in theme.css (ADR 0004). No raw hex values in this file.
 */

/* ------------------------------------------------------------------------------------------------------------------ */

/*@media (min-width: 1600px) {*/

/*    #view-content-wrapper {*/
/*        !*max-width: 1440px;*!*/
/*        text-align: left;*/
/*    }*/

/*    #view-component-wrapper {*/
/*        !*max-width: 1440px;*!*/
/*        text-align: left;*/
/*    }*/

/*    table.static-component-table {*/
/*        !*max-width: 1440px;*!*/
/*        text-align: left;*/
/*    }*/

/*}*/

/*
 * TableComponent
 */
table.static-component-table {
}

/*
 * striped rows
 */
table.static-component-table > tbody > tr:nth-child(odd) {
    background-color: rgba(0,0,0,0);
}
/*
 * No even-row fill: the hairline table (theme.css) carries its structure in
 * rules, not blocks. The faint odd-row wash from theme.css stays — it is the
 * 2% white that was on screen when this treatment was chosen.
 */
table.static-component-table > tbody > tr:nth-child(even) {
    background-color: transparent;
}
table.static-component-table > tbody > th {}

/*
 * Action button
 */
.table-action-button:not(:first-child) {
    margin-left: 10px;
}

.horizontal-separator-sm {
    width: 2rem;
    display: inline-block;
}

.horizontal-separator-md {
    width: 5rem;
    display: inline-block;
}

.horizontal-separator-lg {
    width: 10rem;
    display: inline-block;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/*
 * FormComponent
 */
form.static-component-form {}

/* corrent left margin in standard boostrap styling */
.form-check-input {
    /*margin-left: 0;*/
}

/* ------------------------------------------------------------------------------------------------------------------ */

/*
 * FormPictures
 */
div.static-component-pictures {}

div.static-component-pictures div.picture-tile {
    display: inline-block;
}

div.static-component-pictures div.picture-tile img {
    max-height: 480px;
}

div.static-component-pictures div.picture-tile .picture-tile-footer {
    padding-top: 10px;
    text-align: center;
}


/* Drag-over feedback and the post-upload preview surfaces (dropzone.min.css
   paints these white too). */
form.dropzone.dz-drag-hover {
    background: var(--bg-2);
    border-color: var(--accent-1);
}

.dropzone .dz-preview.dz-image-preview {
    background: var(--bg-2);
}

.dropzone .dz-preview.dz-file-preview .dz-image,
.dropzone .dz-preview .dz-image {
    background: var(--bg-3);
}

form.dropzone {
    /* dropzone.min.css ships `.dropzone { background: white }` — a white slab on
       a dark page. Transparent with the dashed outline reads as a drop target
       without the block; it fills on drag-over for feedback. */
    background: transparent;
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/*
 * FormDocuments
 */

div.static-component-documents div.document-tile {
    /*border: 1px solid rgba(0, 0, 0, 0.15);*/
    /*border-radius: 0.25rem;*/
    /*border-top: 1px solid rgba(0, 0, 0, 0.15);*/
    margin: 1rem;
    padding: 1rem;
    height: auto;
}

div.static-component-documents div.document-tile div.document-object-container {
    /*min-height: 240px;*/
}

div.static-component-documents div.document-tile div.document-object-container img.document-object {
    max-width: 240px;
    width: auto;
    height: auto;
}

div.static-component-documents div.document-tile div.document-object-container object.document-object {
    max-width: 128px;
    width: auto;
    height: auto;
}

form.dropzone {
    /* dropzone.min.css ships `.dropzone { background: white }` — a white slab on
       a dark page. Transparent with the dashed outline reads as a drop target
       without the block; it fills on drag-over for feedback. */
    background: transparent;
    border: 2px dashed var(--border-strong);
    border-radius: 8px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.datepicker {
    font-size: 13px;
}

/* ------------------------------------------------------------------------------------------------------------------ */

/*
 * PdfComponent
 */

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

/* ------------------------------------------------------------------------------------------------------------------ */

.chat-card {
    background: var(--bg-1);
    transition: .5s;
    border: 1px solid var(--border);
    margin-bottom: 30px;
    border-radius: .55rem;
    position: relative;
    width: 100%;
    box-shadow: var(--shadow-card);
}

.chat-app .chat {
    /*margin-left: 280px;*/
    border-left: 1px solid var(--border);
}

.chat .chat-header {
    padding: 15px 20px;
    border-bottom: 1px solid var(--border);
}

.chat .chat-header img {
    float: left;
    border-radius: 40px;
    width: 40px;
}

.chat .chat-header svg {
    float: left;
}

.chat .chat-header .chat-about {
    float: left;
    padding-left: 10px;
}

.chat .chat-history {
    padding: 20px;
    border-bottom: 1px solid var(--border);
}

.chat .chat-history ul {
    padding: 0;
}

.chat .chat-history ul li {
    list-style: none;
    margin-bottom: 30px;
}

.chat .chat-history ul li:last-child {
    margin-bottom: 0px;
}

.chat .chat-history .message-data {
    margin-bottom: 15px;
}

.chat .chat-history .message-data img {
    border-radius: 50px;
    width: 50px;
}

.chat .chat-history .message-data-time {
    color: var(--text-2);
    padding-left: 6px;
    padding-right: 6px;
}

.chat .chat-history .message {
    color: var(--text-1);
    padding: 18px 20px;
    line-height: 1.5;
    font-size: 13px;
    border-radius: 7px;
    display: inline-block;
    position: relative;
}

.chat .chat-history .message:after {
    bottom: 100%;
    left: 7%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: var(--bg-2);
    border-width: 10px;
    margin-left: -25px;
}

.chat .chat-history .my-message {
    background: var(--bg-3);
}

.chat .chat-history .my-message:after {
    bottom: 100%;
    left: 30px;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-bottom-color: var(--bg-3);
    border-width: 10px;
    margin-left: -10px;
}

.chat .chat-history .other-message {
    background: var(--bg-2);
    text-align: left;
}

.chat .chat-history .other-message:after {
    border-bottom-color: var(--bg-2);
    left: 93%;
}

.chat .chat-message {
    padding: 20px;
}

.online,
.offline,
.me {
    margin-right: 2px;
    font-size: 8px;
    vertical-align: middle;
}

.online {
    color: var(--status-success);
}

.offline {
    color: var(--status-danger);
}

.me {
    color: var(--status-info);
}

.float-right {
    float: right;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

.chat-app .chat-history {
    min-height: 350px;
    height: calc(100vh - 610px);
    overflow-x: auto;
}

@media only screen and (max-width: 767px) {
    .chat-app .chat {
        margin: 0;
    }
    .chat-app .chat .chat-header {
        border-radius: 0.55rem 0.55rem 0 0
    }
    .chat-app .chat-history {
        /*min-height: 300px;*/
        /*height: 300px;*/
        overflow-x: auto;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .chat-app .chat-history {
        /*min-height: 600px;*/
        /*height: 600px;*/
        overflow-x: auto;
    }
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * UserProfileComponent panels (Direction A — "Quiet Surfaces")
 *
 * Was an inline <style> in user_profile.phtml with a hardcoded
 * `border-left: 1px solid #dee2e6` — a light hairline on a dark page. The
 * panels are real cards now; the divider is gone.
 * -------------------------------------------------------------------------- */

div.wrapper-profile-widget {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.75rem;
    height: 100%;
}

div.wrapper-profile-widget .profile-widget-title {
    font-size: 10.5px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-2);
    font-weight: 600;
    margin-bottom: 1.25rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--border);
}

/* ------------------------------------------------------------------------------------------------------------------ */

/* ==========================================================================
 * FormComponent — Blöcke mit Kopfleiste (ADR 0018)
 *
 * Drei typografische Ebenen, überall dieselben:
 *   KENNZAHL/MARKE   Versal, gesperrt, klein  — nur Etiketten
 *   Blockname        Archivo, gemischt        — Namen
 *   feld             Inter 12 px, --text-2    — über oder neben dem Element
 *
 * Die Dichte hängt an den vier Maßtokens unten und an sonst nichts.
 * ========================================================================== */

.form-layout {
    --fc-pad-x: 1.6rem;
    --fc-pad-y: 1.35rem;
    --fc-row-gap: 1.05rem;
    --fc-block-gap: 1.3rem;
}

/* ------------------------------------------------------------------ Kopf --
 * Titel, Einordnung, Zustands-Chips und höchstens zwei Kennzahlen. Kein
 * Eingabefeld. Auf einem Anlegen-Formular bleiben Chips und Kennzahlen weg —
 * den Datensatz gibt es noch nicht.
 * -------------------------------------------------------------------------- */

.record-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 2rem;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem 1.35rem;
    margin-bottom: 1.5rem;
}

/*
 * AM TELEFON UNTEREINANDER.
 *
 * Nebeneinander bleibt die Identität übrig, was das Wort "Zwitkovits" auf drei
 * Zeilen umbricht, während die Kennzahlen rechts trotzdem nicht mehr passen und
 * die Seite waagrecht scrollt. Zwei Kennzahlen mit "KONTOSTAND" und
 * "BERECHTIGUNGEN" darüber brauchen zusammen rund 300 px — mehr als ein
 * iPhone-14-Fenster nach Innenabständen übrig lässt.
 *
 * Deshalb unter 576 px: Identität oben, Kennzahlen darunter nebeneinander und
 * linksbündig. Der senkrechte Strich zwischen ihnen wird zum waagrechten über
 * ihnen, sonst hinge er in der Luft.
 */
@media (max-width: 575.98px) {
    .record-head {
        display: block;
        padding: 1rem 1.1rem;
    }

    .record-head .record-metrics {
        margin-top: 1rem;
        padding-top: .9rem;
        border-top: 1px solid var(--border);
        gap: .9rem 2rem;
    }

    .record-head .record-metric {
        text-align: left;
        padding-left: 0;
        border-left: 0;
    }
}

.record-head h1 {
    font-size: 1.5rem;
    margin: 0 0 .15rem;
}

/* Die Tätigkeit über dem Namen: "Gerät bearbeiten" ist die Nebenangabe,
   "LTE Beckon" die Identität. Nur vorhanden, wenn die Seite einen
   Datensatznamen gesetzt hat. */
.record-head .record-head-eyebrow {
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-2);
    margin: 0 0 .2rem;
}

.record-head .record-head-sub {
    font-size: 12.5px;
    color: var(--text-2);
    margin: 0;
}

.record-head-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-top: .7rem;
}

.record-chip {
    font-size: 12px;
    padding: .2rem .55rem;
    border-radius: 6px;
    background: var(--chip-neutral-bg);
    color: var(--text-1);
    border: 1px solid var(--border);
}

.record-chip.record-chip-ok {
    background: var(--chip-success-bg);
    color: var(--chip-success-fg);
    border-color: var(--chip-success-br);
}

.record-chip.record-chip-bad {
    background: var(--chip-danger-bg);
    color: var(--chip-danger-fg);
    border-color: var(--chip-danger-br);
}

.record-chip.record-chip-warn {
    background: var(--chip-warning-bg);
    color: var(--chip-warning-fg);
    border-color: var(--chip-warning-br);
}

/*
 * Aktionsknöpfe unter dem Datensatzkopf. `.float-right` aus dem
 * Reiterleisten-Markup wird hier neutralisiert — ein Float in einem Flexfluss
 * richtet nichts aus, es fällt nur aus dem Fluss.
 */
.record-actions {
    display: flex;
    justify-content: flex-end;
    margin: -.9rem 0 1.5rem;
}

.record-actions > .float-right {
    float: none !important;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.record-actions .btn {
    margin-bottom: 0 !important;
}

.record-metrics {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    flex: 0 0 auto;
    /* Ohne Umbruch wird die zweite Kennzahl auf schmalen Fenstern zerdrückt,
       statt unter die erste zu rutschen — am Telefon gemessen. */
    flex-wrap: wrap;
}

.record-metric {
    text-align: right;
    padding-left: 1.4rem;
    border-left: 1px solid var(--border);
}

.record-metric:first-child {
    padding-left: 0;
    border-left: 0;
}

.record-metric .record-metric-key {
    display: block;
    font-size: 11px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-2);
    margin-bottom: .12rem;
    white-space: nowrap;
}

.record-metric .record-metric-value {
    display: block;
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: 1.65rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    color: var(--text-0);
    white-space: nowrap;
}

.record-metric .record-metric-unit {
    font-size: .95rem;
    font-weight: 700;
    color: var(--text-2);
    margin-left: .15rem;
}

.record-metric .record-metric-value.record-metric-negative {
    color: var(--status-danger);
}

.record-metric .record-metric-note {
    display: block;
    font-size: 11.5px;
    color: var(--text-2);
    margin-top: .15rem;
    white-space: nowrap;
}

/* Eine verlinkte Kennzahl sieht aus wie eine Kennzahl, bis man hinfährt. */
a.record-metric,
a.record-metric:hover,
a.record-metric:focus {
    text-decoration: none;
}

a.record-metric:hover .record-metric-value {
    color: var(--accent-0);
}

a.record-metric:hover .record-metric-value.record-metric-negative {
    color: var(--status-danger);
    filter: brightness(1.15);
}

a.record-metric:hover .record-metric-note {
    color: var(--text-1);
}

/* ----------------------------------------------------------------- Block --
 * Die Akzentkante sagt "hier kann man etwas tun". Ein reiner Anzeigeblock
 * verliert sie und trägt stattdessen eine Marke.
 * -------------------------------------------------------------------------- */

/*
 * DIE SPALTENZAHL IST EINE FESTE ZAHL, KEINE BREITE.
 *
 * `columns: <breite>` wäre die naheliegende Schreibweise und ergäbe auf breiten
 * Schirmen drei und vier Spalten (gemessen: 1500 px Inhalt -> 3, 1900 px -> 4)
 * — die Anordnung hinge dann an der Fenstergröße statt an der Einstellung des
 * Betreibers, und ein Block würde schmaler als seine längsten Auswahlwerte.
 *
 * Die Einstellung ist die OBERGRENZE; die Umbrüche unten nehmen zurück, was
 * das Fenster nicht trägt. Die Schranken liegen am Fenster, weil
 * Container-Abfragen weit jenseits des Browser-Bodens von ADR 0004 liegen.
 */
.form-blocks {
    columns: 1;
    column-gap: var(--fc-block-gap);
}

@media (min-width: 1201px) {
    .form-blocks-2,
    .form-blocks-3 {
        columns: 2;
    }
}

@media (min-width: 1600px) {
    .form-blocks-3 {
        columns: 3;
    }
}

.form-block {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent-1);
    border-radius: var(--radius);
    margin-bottom: var(--fc-block-gap);
    /* Ein Block darf nicht über die Spaltengrenze zerrissen werden. */
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
}

.form-block.form-block-readonly {
    border-left-color: var(--border-strong);
}

.form-block.form-block-dirty {
    border-left-color: var(--accent-0);
}

.form-block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem var(--fc-pad-x);
    border-bottom: 1px solid var(--border);
}

.form-block-head h3 {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: .87rem;
    letter-spacing: 0;
    margin: 0;
    color: var(--text-0);
}

.form-block-head .form-block-marks {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.form-block-tag {
    font-size: 11px;
    letter-spacing: .02em;
    padding: .1rem .4rem;
    border-radius: 5px;
    background: var(--chip-neutral-bg);
    color: var(--text-2);
    border: 1px solid var(--border);
    white-space: nowrap;
}

.form-block-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent-0);
    display: none;
}

.form-block.form-block-dirty .form-block-dot {
    display: block;
}

.form-block-body {
    padding: var(--fc-pad-y) var(--fc-pad-x);
}

/* ------------------------------------------------------------------ Zeile --
 * Feste Beschriftungsspalte: `col-sm-4` sind 33 % und wandern mit der
 * Blockbreite, sodass die Felder auf jeder Seite woanders beginnen.
 * -------------------------------------------------------------------------- */

/*
 * ⚠️ NUR `.form-line`, NICHT `.form-group.row`.
 *
 * Mehrere Zeilentypen bauen innen nochmals eine `.form-group.row` — die
 * Telefonzeile (Vorwahl + Nummer), der Zeitraum, die Positionszeile. Ein
 * Raster auf `.form-group.row` erwischt diese inneren Zeilen mit, und weil
 * deren Spalten `col-sm-12 col-md-12 col-lg-5` heissen, landete die Vorwahl
 * auf voller Breite über der Nummer statt daneben. Im Browser gesehen, nicht
 * vorhergesagt.
 */
.form-layout .form-line {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 1rem;
    align-items: center;
    margin: 0 0 var(--fc-row-gap);
}

.form-layout .form-line:last-child {
    margin-bottom: 0;
}

/*
 * Die Spalten des Bestands innerhalb einer Zeile neutralisieren: das Markup
 * trägt weiterhin `col-sm-4`/`col-sm-8`, damit die Zeilentypen unverändert
 * bleiben, aber die Breite kommt jetzt vom Raster darüber.
 */
.form-layout .form-line > .col-sm-4,
.form-layout .form-line > .col-sm-8,
.form-layout .form-line > .col-sm-12 {
    flex: none;
    max-width: none;
    width: auto;
    padding: 0;
}

.form-layout .form-line > .col-sm-12 {
    grid-column: 1 / -1;
}

/* Ein Hinweis hat keine Beschriftung und nimmt die ganze Zeile. */
.form-layout .form-line-wide {
    display: block;
}

.form-layout .col-form-label {
    padding: 0;
    font-size: 13.5px;
    line-height: 1.35;
    margin: 0;
}

/*
 * Einspaltig auf einem breiten Schirm wird ein Eingabefeld sonst einen Meter
 * lang, und ein Vorname sieht aus wie ein Aufsatz. Begrenzt werden nur Eingabe-
 * und Auswahlfelder — Textfelder und die Karte brauchen die Breite, die sie
 * bekommen können.
 */
.form-layout .form-blocks-1 .form-line input.form-control,
.form-layout .form-blocks-1 .form-line select.form-control {
    max-width: 640px;
}

/*
 * Sobald MEHRERE Spalten nebeneinander stehen, ist für eine eigene
 * Beschriftungsspalte kein Platz — sie klappt über das Feld.
 *
 * ⚠️ Die Regel hängt an der Spaltenklasse und nicht bloss am Fenster: wer
 * „1 Spalte“ eingestellt hat, arbeitet auch auf einem breiten Schirm
 * einspaltig und behält die linke Beschriftungsspalte. An der Fensterbreite
 * allein festgemacht klappte sie dort grundlos um.
 */
@media (min-width: 1201px) {
    .form-layout .form-blocks-2 .form-line,
    .form-layout .form-blocks-3 .form-line {
        display: block;
    }

    .form-layout .form-blocks-2 .col-form-label,
    .form-layout .form-blocks-3 .col-form-label {
        display: block;
        margin-bottom: .2rem;
        font-size: 12px;
        color: var(--text-2);
    }
}

/* ---------------------------------------------------------------- Fakten --
 * Nicht änderbar heisst kein Feld — auch mitten in einem bedienbaren Block.
 * -------------------------------------------------------------------------- */

.form-facts {
    margin: 0 0 var(--fc-row-gap);
}

.form-facts:last-child {
    margin-bottom: 0;
}

.form-fact {
    display: grid;
    grid-template-columns: 190px 1fr auto;
    gap: 1rem;
    align-items: baseline;
    padding: .38rem 0;
    border-bottom: 1px solid var(--table-cell-border);
    font-size: 13.5px;
}

.form-fact:first-child {
    padding-top: 0;
}

.form-fact:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.form-fact dt {
    margin: 0;
    font-weight: 400;
    color: var(--text-1);
}

.form-fact dd {
    margin: 0;
    color: var(--text-0);
    font-variant-numeric: tabular-nums;
}

.form-fact dd.form-fact-empty {
    color: var(--text-2);
}

.form-fact dd.form-fact-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    word-break: break-all;
}

.form-fact .btn-copy-to-clipboard {
    padding: .05rem .4rem;
    font-size: 11.5px;
    white-space: nowrap;
}

/*
 * Zweispaltig klappt auch die Faktenzeile um. Die Bereiche MÜSSEN benannt
 * werden: ohne das setzt die automatische Platzierung den Kopierknopf in eine
 * eigene Zeile über die Beschriftung.
 */
@media (min-width: 1201px) {
    .form-blocks-2 .form-fact,
    .form-blocks-3 .form-fact {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label copy" "value copy";
        gap: 0 1rem;
    }

    .form-blocks-2 .form-fact dt,
    .form-blocks-3 .form-fact dt {
        grid-area: label;
        font-size: 12px;
        color: var(--text-2);
    }

    .form-blocks-2 .form-fact dd,
    .form-blocks-3 .form-fact dd {
        grid-area: value;
    }

    .form-blocks-2 .form-fact .form-fact-copy,
    .form-blocks-3 .form-fact .form-fact-copy {
        grid-area: copy;
        align-self: center;
    }
}

/* -------------------------------------------------------------- Speichern --
 * Klebend, weil ein zentraler Knopf über zehn Blöcke sonst unauffindbar ist,
 * und mit Zähler, weil man vergisst, was man angefasst hat.
 * -------------------------------------------------------------------------- */

.form-save {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: 1.4rem -3rem 0;
    padding: .7rem 3rem;
    background: var(--nav-backdrop);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--border);
}

.form-save .form-save-state {
    font-size: 12.5px;
    color: var(--text-2);
    margin-left: .3rem;
}

/* ------------------------------------------------------------- Telefon --
 * DIESELBE UMKLAPPUNG, nur am FENSTER festgemacht statt an der Spaltenzahl.
 *
 * Die beiden Blöcke darüber lösen genau dieses Problem — eine Etikettenspalte
 * von 190 px passt nicht neben ein Feld, wenn die Zeile schmal ist — hängen
 * aber an `.form-blocks-2`/`-3`, also am Fall "mehrere Spalten auf einem
 * breiten Schirm". Der umgekehrte Fall, EINE Spalte auf einem schmalen Schirm,
 * war nie abgedeckt: `.form-line` blieb bei jeder Breite `190px 1fr`.
 *
 * Gemessen bei 500 px Fenster, vor dieser Regel:
 *   grid-template-columns: 190px 26px
 * Das Eingabefeld war 26 px breit und begann bei x = 523, also ausserhalb des
 * Fensters; 57 Elemente ragten über den rechten Rand hinaus. Nichts davon
 * meldete sich — es sah nur aus wie eine Seite, die niemand für ein Telefon
 * gedacht hat.
 *
 * 575.98 px, wie `.record-head` weiter oben und `.view-actionbar` in
 * header.css: die Bruchstelle für die Formularschicht ist damit schon gewählt.
 * Die HÜLLE klappt früher um (767.98 px, siehe header.css) — dort gibt es 240 px
 * Leiste und 96 px Rand zu holen, und die sind auch auf einem Tablett im
 * Hochformat besser im Inhalt.
 * -------------------------------------------------------------------------- */

@media (max-width: 575.98px) {

    .form-layout .form-line {
        display: block;
    }

    /*
     * Nicht an `.form-blocks-*` gehängt: hier gilt es für JEDE Spaltenzahl.
     * Wer "1 Spalte" eingestellt hat, behält am Schreibtisch seine
     * Etikettenspalte — auf dem Telefon gibt es keine Breite, in der sie
     * etwas nützt.
     */
    .form-layout .col-form-label {
        display: block;
        margin-bottom: .2rem;
        font-size: 12px;
        color: var(--text-2);
    }

    /*
     * Die 640-px-Deckelung für einspaltige Felder ist am Schreibtisch richtig
     * (ein Namensfeld über die ganze Fensterbreite liest sich schlecht) und
     * hier gegenstandslos — das Fenster ist ohnehin kleiner. Sie wird
     * ausdrücklich gelöst, damit kein `max-width` unter der echten Breite
     * liegt, sollte sie je kleiner werden.
     */
    .form-layout .form-blocks-1 .form-line input.form-control,
    .form-layout .form-blocks-1 .form-line select.form-control {
        max-width: none;
    }

    /*
     * ⚠️ DIE BEREICHE MÜSSEN BENANNT WERDEN — dieselbe Falle wie im
     * 1201-px-Block: ohne `grid-template-areas` setzt die automatische
     * Platzierung den Kopierknopf in eine eigene Zeile ÜBER die Beschriftung.
     */
    .form-fact {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label copy" "value copy";
        gap: 0 1rem;
    }

    .form-fact dt {
        grid-area: label;
        font-size: 12px;
        color: var(--text-2);
    }

    .form-fact dd {
        grid-area: value;
    }

    .form-fact .form-fact-copy {
        grid-area: copy;
        align-self: center;
    }

}

/* --------------------------------------------------- Speicherleiste, schmal --
 * Die Blutung der Speicherleiste haengt am SEITENRAND DES INHALTS, nicht an der
 * Stapelung der Formularzeilen — und das ist der Unterschied, an dem es beim
 * ersten Anlauf gescheitert ist.
 *
 * `.form-save` zieht sich mit `margin: 1.4rem -3rem 0` nach aussen, damit sie
 * mit den 3 rem Rand des Inhalts abschliesst. Der Rand schrumpft ab 767.98 px
 * auf 1 rem (header.css); die Blutung stand aber in der 575.98-px-Abfrage. In
 * der Zone dazwischen blieb sie also bei -3 rem und ragte 22 px über den
 * rechten Rand hinaus — gemessen bei 600 px, sichtbar als waagrechter Überlauf
 * genau EINES Elements.
 *
 * Zwei Bruchstellen fuer zwei verschiedene Dinge sind richtig; sie an die
 * falsche zu haengen ist der Fehler, den das Aufteilen einlaedt.
 * -------------------------------------------------------------------------- */

@media (max-width: 767.98px) {

    .form-save {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

}

/* ------------------------------------- Schmale Spalte durch offene Leiste --
 * NICHT DIE FENSTERBREITE ALLEIN ENTSCHEIDET, ob eine Etikettenspalte passt —
 * sondern die Fensterbreite MINUS der Seitenleiste, wenn sie offen ist.
 *
 * Gemessen bei 768 px auf derselben Seite:
 *   Leiste zu    -> Inhalt 662 px, Feld 401 px   (zweispaltig richtig)
 *   Leiste offen -> Inhalt 422 px, Feld 161 px   (zweispaltig unbrauchbar)
 * Die Differenz ist exakt die 240 px der Leiste. Ein reines `max-width` haette
 * hier entweder den guten Fall mitgestapelt oder den schlechten stehen
 * gelassen; die Klasse `#wrapper.toggled` sagt, welcher der beiden gilt.
 *
 * Rechnung fuer die Grenze: Feld = Fenster - 240 (Leiste) - 96 (Raender)
 * - 190 (Etikett) - 16 (Abstand). Fuer ein Feld von 280 px braucht es also
 * 822 px Fenster. Gewaehlt ist 991.98 px, die `lg`-Grenze von Bootstrap: sie
 * liegt darueber, ist ein benannter Wert, und der Fehler geht in die
 * unschaedliche Richtung — zu frueh gestapelt kostet Hoehe, zu spaet gestapelt
 * kostet ein unbenutzbares Feld.
 *
 * Der Bestandsblock bei `min-width: 1201px` bleibt unberuehrt: er stapelt aus
 * einem anderen Grund (mehrere Spalten nebeneinander) und gilt oberhalb.
 * -------------------------------------------------------------------------- */

@media (max-width: 991.98px) {

    #wrapper.toggled .form-layout .form-line {
        display: block;
    }

    #wrapper.toggled .form-layout .col-form-label {
        display: block;
        margin-bottom: .2rem;
        font-size: 12px;
        color: var(--text-2);
    }

    #wrapper.toggled .form-layout .form-blocks-1 .form-line input.form-control,
    #wrapper.toggled .form-layout .form-blocks-1 .form-line select.form-control {
        max-width: none;
    }

    /* Wieder mit benannten Bereichen - sonst springt der Kopierknopf hoch. */
    #wrapper.toggled .form-fact {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label copy" "value copy";
        gap: 0 1rem;
    }

    #wrapper.toggled .form-fact dt {
        grid-area: label;
        font-size: 12px;
        color: var(--text-2);
    }

    #wrapper.toggled .form-fact dd {
        grid-area: value;
    }

    #wrapper.toggled .form-fact .form-fact-copy {
        grid-area: copy;
        align-self: center;
    }

}

/* ---------------------------------------------------------------------------
 * Zugriffslisten: Erlaubnis | Grund | Ergebnis (ADR 0062, Variante C der
 * Vergleichsseite 2026-10-16). Erzeugt von AccessService::renderAllowedCell(),
 * renderReasonCell(), renderOutcomeCell(); Farben aus theme.css, also auch im
 * dunklen Modus richtig.
 * ------------------------------------------------------------------------- */
.access-allow { display: inline-flex; align-items: center; gap: 7px; color: var(--text-0); font-weight: 600; white-space: nowrap; }
.access-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.access-dot.is-yes { background: var(--status-success); }
.access-dot.is-no { background: var(--status-danger); }
.access-reason { color: var(--text-0); }
.access-sub { display: block; color: var(--text-2); font-size: 12px; margin-top: 1px; }
.access-ctx { color: var(--text-2); }
.access-outcome { display: inline-flex; gap: 7px; align-items: flex-start; color: var(--text-0); }
.access-ico { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; flex: none; margin-top: 2px; }
.access-tone-info { color: var(--status-info); }
.access-tone-warning { color: var(--status-warning); }
.access-tone-neutral { color: var(--text-2); }
.access-tone-success { color: var(--status-success); }
.access-tone-danger { color: var(--status-danger); }
/* header.css faerbt JEDES span in #view-content-wrapper (`color: var(--text-1)`,
 * ID-Spezifitaet) - ohne diese Zeilen standen alle Toene und die gedaempften
 * Zusaetze in der echten Seite in Textfarbe (gemessen 2026-10-16, Bau B). */
#view-content-wrapper .access-allow,
#view-content-wrapper .access-reason,
#view-content-wrapper .access-outcome { color: var(--text-0); }
#view-content-wrapper .access-sub,
#view-content-wrapper .access-ctx { color: var(--text-2); }
#view-content-wrapper .access-tone-info { color: var(--status-info); }
#view-content-wrapper .access-tone-warning { color: var(--status-warning); }
#view-content-wrapper .access-tone-neutral { color: var(--text-2); }
#view-content-wrapper .access-tone-success { color: var(--status-success); }
#view-content-wrapper .access-tone-danger { color: var(--status-danger); }
@media (min-width: 992px) {
    table.table th.access-col-reason, table.table td.access-col-reason { width: 22%; }
    table.table th.access-col-outcome, table.table td.access-col-outcome { width: 21%; }
}