/* Herstellerunterlagen — Reiter „Merkmale“ = Ansicht der ARTIKEL.YAML (Plan HDR fertig 0.6, AP-6)
 *
 * Klassen mm-* aus js/merkmale.js. Farben nur über die Variablen aus app.css/maske.css
 * (Hell/Dunkel dort); Leitfarbe --akzent wie im übrigen Portal, Warnfarbe nur für Hinweise.
 */

.mm { display: flex; flex-direction: column; gap: 12px; container-type: inline-size; }
.mm-lade { margin: 4px 0; }

.mm-datei, .mm-vorschlag-block {
    border: 1px solid var(--rand); border-radius: 8px; background: var(--grund); padding: 10px 12px;
}
.mm-vorschlag-block { background: var(--flaeche); border-style: dashed; }
.mm-leer p { margin: 6px 0 0; }

.mm-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mm-titel { font-weight: 600; display: inline-flex; align-items: center; gap: 6px; margin-right: auto; }
.mm-version {
    padding: 1px 8px; border-radius: 999px; border: 1px solid var(--akzent); color: var(--akzent-text);
    font-size: .78rem; font-weight: 600; white-space: nowrap;
}
.mm-roh-knopf { margin-left: auto; }

.mm-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 0; }
.mm-label { color: var(--akzent-text); font-weight: 600; font-size: .8rem; min-width: 7.5em; }
.mm-status { margin-top: 8px; }

.mm-ab {
    margin: 12px 0 4px; font: 600 .8rem 'Open Sans', sans-serif; color: var(--akzent-text);
    text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--rand); padding-bottom: 2px;
}

.mm-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.mm-eintrag {
    display: grid; grid-template-columns: minmax(3.2em, auto) 1fr auto; grid-template-areas: "s w a" "s m a";
    column-gap: 10px; row-gap: 2px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rand);
}
.mm-eintrag:last-child { border-bottom: 0; }
.mm-schluessel { grid-area: s; font-family: 'Fira Code', monospace; font-weight: 600; font-size: .86rem; align-self: start; padding-top: 2px; }
.mm-wert { grid-area: w; min-width: 0; overflow-wrap: anywhere; }
.mm-meta { grid-area: m; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.mm-aktion { grid-area: a; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.mm-geloescht .mm-schluessel { text-decoration: line-through; color: var(--text-leise); }
.mm-kammern { margin: 6px 0 0; overflow-wrap: anywhere; }

.mm-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; }
.mm-vorschlag .hd-marke { font-size: .74rem; }

.mm-hinweis {
    margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid var(--hd-warn); background: var(--hd-warn-bg);
    color: var(--text); border-radius: 0 6px 6px 0;
}
.mm-hinweis p { margin: 0 0 4px; }

.mm-roh-dialog { width: min(860px, 94vw); }
.mm-roh {
    max-height: 62vh; overflow: auto; margin: 8px 0 0; padding: 10px 12px; border: 1px solid var(--rand);
    border-radius: 8px; background: var(--flaeche); color: var(--text);
    font: .8rem/1.45 'Fira Code', monospace; white-space: pre; tab-size: 2;
}
.mm-form { min-width: min(420px, 86vw); }

/* Schmale Spalte (Fakten-Reiter) und Telefon: Knöpfe unter den Wert */
@container (max-width: 520px) {
    .mm-eintrag { grid-template-columns: minmax(3em, auto) 1fr; grid-template-areas: "s w" "s m" "a a"; }
    .mm-aktion { justify-content: flex-start; padding-top: 4px; }
    .mm-roh-knopf { margin-left: 0; }
    .mm-label { min-width: 0; }
}
.hd-kompakt .mm-eintrag { grid-template-columns: minmax(3em, auto) 1fr; grid-template-areas: "s w" "s m" "a a"; }
.hd-kompakt .mm-aktion { justify-content: flex-start; }