@charset "UTF-8";
/* Modularization workbench - layout and styles taken from iVMS_Modularisierung_Klickdummy.html */
.app-content.mwb-page { max-width: none; padding: 12px 16px; }
.app-content.mwb-page .welcome-section { margin-bottom: 8px; }
.app-content.mwb-page .welcome-section h1 { font-size: 20px; }
.mwb table.dsm td.semi { width: auto; min-width: 64px; padding: 0 2px; }
.mwb {
    --mwb-brand: #0b5a78; --mwb-brand2: #2f8fc0; --mwb-line: #d6dbe0; --mwb-text: #1d2a33; --mwb-muted: #6b7884; --mwb-ok: #2e9b57;
    font-size: 13px; color: var(--mwb-text); background: #eef1f4; border: 1px solid var(--mwb-line); border-radius: 6px; overflow: hidden;
}
.mwb button, .mwb select, .mwb input { font: inherit; }
.mwb-tabs { display: flex; gap: 4px; padding: 6px 10px 0; background: #e3e7eb; border-bottom: 1px solid var(--mwb-line); }
.mwb-tab { border: none; background: #cfd5db; color: #334; padding: 7px 18px; border-radius: 4px 4px 0 0; cursor: pointer; display: flex; align-items: center; gap: 7px; }
.mwb-tab .num { display: inline-flex; width: 18px; height: 18px; border-radius: 50%; background: #fff; color: var(--mwb-brand); font-size: 11px; align-items: center; justify-content: center; font-weight: 700; }
.mwb-tab.active { background: var(--mwb-brand2); color: #fff; }
.mwb-tab .badge { font-size: 10px; background: #f2b134; color: #3a2a00; border-radius: 3px; padding: 1px 5px; }
.mwb-main { display: flex; min-height: 70vh; height: calc(100vh - 260px); }
.mwb-left { width: 270px; flex: none; background: #fff; border-right: 1px solid var(--mwb-line); overflow: auto; padding: 14px; }
.mwb-center { flex: 1; overflow: auto; padding: 14px 18px; min-width: 0; }
.mwb-right { width: 290px; flex: none; background: #f8f9fa; border-left: 1px solid var(--mwb-line); overflow: auto; padding: 12px 14px; }
.mwb h2 { font-size: 16px; margin: 0 0 4px; color: var(--mwb-brand); }
.mwb h3 { font-size: 13px; margin: 16px 0 8px; text-transform: uppercase; letter-spacing: .04em; color: var(--mwb-muted); }
.mwb h3:first-child { margin-top: 0; }
.mwb .sub { color: var(--mwb-muted); margin-bottom: 12px; }
.mwb .box { border: 2px solid #222; padding: 10px; background: #fff; }
.mwb .box h4 { margin: 0 0 8px; font-size: 15px; }
.mwb .wrow { display: flex; align-items: center; margin-bottom: 3px; }
.mwb .wrow .lab { flex: 1; color: #fff; padding: 4px 8px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mwb .wrow input { width: 56px; border: 1px solid var(--mwb-line); padding: 4px; text-align: right; }
.mwb .field { margin-bottom: 12px; }
.mwb .field label { display: block; font-weight: 600; margin-bottom: 4px; }
.mwb .field select, .mwb .field input[type=text], .mwb .field input[type=number] { width: 100%; padding: 6px; border: 1px solid var(--mwb-line); border-radius: 4px; background: #fff; }
.mwb .hint { color: var(--mwb-muted); font-size: 12px; line-height: 1.45; }
.mwb-btn { border: 1px solid var(--mwb-brand, #0b5a78); background: var(--mwb-brand, #0b5a78); color: #fff; border-radius: 4px; padding: 7px 14px; cursor: pointer; font-weight: 600; }
.mwb-btn:hover { filter: brightness(1.1); }
.mwb-btn.sec { background: #fff; color: var(--mwb-brand); }
.mwb-btn.wide { width: 100%; }
.mwb-btn:disabled { opacity: .5; cursor: not-allowed; }
.mwb .iconbtn { border: 1px solid var(--mwb-line); background: #fff; border-radius: 4px; padding: 3px 8px; color: var(--mwb-muted); cursor: pointer; }
.mwb .toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.mwb .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mwb .chip { background: #fff; border: 1px solid var(--mwb-line); border-radius: 6px; padding: 7px 11px; min-width: 110px; }
.mwb .chip .v { font-size: 18px; font-weight: 700; color: var(--mwb-brand); }
.mwb .chip .k { font-size: 11px; color: var(--mwb-muted); }
.mwb .card { background: #fff; border: 1px solid var(--mwb-line); border-radius: 6px; padding: 12px; margin-bottom: 12px; }
.mwb .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; }
.mwb .legend span i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 4px; vertical-align: -2px; }
.mwb .dsmwrap { overflow: auto; background: #fff; border: 1px solid var(--mwb-line); border-radius: 6px; padding: 8px; display: inline-block; max-width: 100%; }
.mwb table.dsm { border-collapse: collapse; font-size: 11px; }
.mwb table.dsm th.colh { height: 150px; width: 44px; min-width: 44px; vertical-align: bottom; padding: 0 0 4px; font-weight: 500; border-left: 1px solid #e3e6e9; }
.mwb table.dsm th.colh div { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; margin: 0 auto; max-height: 145px; overflow: hidden; text-overflow: ellipsis; }
.mwb table.dsm th.rowh { text-align: left; white-space: nowrap; padding: 0 10px 0 6px; font-weight: 500; cursor: pointer; border-top: 1px solid #eef0f2; }
.mwb table.dsm th.rowh:hover { color: var(--mwb-brand2); }
.mwb table.dsm th.rowh .dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }
.mwb table.dsm td { border: 1px solid #d9dde1; width: 44px; min-width: 44px; max-width: 44px; height: 28px; text-align: center; cursor: pointer; padding: 0; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mwb table.dsm td:hover { outline: 2px solid var(--mwb-brand2); outline-offset: -2px; }
.mwb table.dsm td.diag { background: #eceff1; color: #555; cursor: default; }
.mwb table.dsm td.sel { outline: 2px solid #000; outline-offset: -2px; }
.mwb table.dsm td.semi { width: 64px; min-width: 64px; max-width: none; }
.mwb table.dsm.semi th.colh { width: 64px; min-width: 64px; }
.mwb .semig { display: grid; font-size: 9px; font-weight: 500; line-height: 12px; }
.mwb .semig b { font-weight: 700; }
.mwb .modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.mwb .mod { border: 1px solid var(--mwb-line); border-left: 5px solid; border-radius: 6px; background: #fff; padding: 9px 10px; }
.mwb .mod input.mname { border: none; font-weight: 700; font-size: 13px; width: 100%; padding: 2px 0; border-bottom: 1px dashed transparent; background: transparent; }
.mwb .mod input.mname:hover, .mwb .mod input.mname:focus { border-bottom-color: var(--mwb-line); outline: none; }
.mwb .mod .meta { font-size: 11px; color: var(--mwb-muted); margin: 2px 0 6px; }
.mwb .mod ul { margin: 0; padding: 0; list-style: none; }
.mwb .mod li { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 2px 0; border-top: 1px solid #f1f3f5; }
.mwb .mod li select { font-size: 11px; padding: 1px; border: 1px solid var(--mwb-line); border-radius: 3px; max-width: 92px; }
.mwb table.cmp { border-collapse: collapse; width: 100%; background: #fff; font-size: 12px; }
.mwb table.cmp th, .mwb table.cmp td { border-bottom: 1px solid #e6e9ec; padding: 7px 8px; text-align: left; vertical-align: middle; }
.mwb table.cmp th { background: #f4f6f8; font-weight: 600; font-size: 11px; color: #455; position: sticky; top: 0; }
.mwb table.cmp tr.best td { background: #f0f8f3; }
.mwb .bar { height: 6px; background: #e7ebee; border-radius: 3px; margin-top: 3px; width: 80px; }
.mwb .bar i { display: block; height: 100%; border-radius: 3px; }
.mwb .tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 9px; background: #e8f1f8; color: var(--mwb-brand); margin-left: 4px; white-space: nowrap; }
.mwb .tag.p { background: #fff1d6; color: #7a5200; }
.mwb .tag.g { background: #dff3e6; color: #1d6b3a; }
.mwb .mchip { display: inline-flex; min-width: 24px; height: 20px; border-radius: 3px; color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; padding: 0 4px; }
.mwb .slider { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.mwb .slider label { flex: 1; font-size: 12px; }
.mwb .slider input { width: 110px; }
.mwb .slider output { width: 34px; text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; }
.mwb .detail h4 { margin: 0 0 6px; font-size: 14px; }
.mwb .detail .row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid #eceff1; }
.mwb .fl { display: flex; align-items: center; gap: 6px; padding: 3px 0; font-size: 12px; }
.mwb .fl i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; flex: none; }
.mwb .formula { background: #fff; border: 1px solid var(--mwb-line); border-radius: 4px; padding: 8px; font-family: Consolas, monospace; font-size: 11.5px; margin: 8px 0; white-space: pre-wrap; }
.mwb .note { background: #fff7e0; border: 1px solid #f0d58a; border-radius: 5px; padding: 9px 10px; font-size: 12px; line-height: 1.45; margin: 10px 0; }
.mwb .note.blue { background: #e9f3fa; border-color: #b9d7ec; }
.mwb .note.red { background: #fdecec; border-color: #f1b7b5; }
.mwb .steps { list-style: none; margin: 0; padding: 0; }
.mwb .steps li { display: flex; gap: 9px; align-items: flex-start; padding: 7px 0; border-bottom: 1px solid #eef0f2; }
.mwb .steps li .st { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--mwb-line); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--mwb-muted); }
.mwb .steps li.done .st { background: var(--mwb-ok); border-color: var(--mwb-ok); color: #fff; }
.mwb .steps li.run .st { border-color: var(--mwb-brand2); border-top-color: transparent; animation: mwb-spin .8s linear infinite; }
@keyframes mwb-spin { to { transform: rotate(360deg); } }
.mwb .tree { font-size: 12.5px; line-height: 1.8; }
.mwb .tree .n1 { padding-left: 18px; }
.mwb .tree .n2 { padding-left: 40px; color: #334; }
.mwb .tree .ic { display: inline-block; width: 12px; height: 12px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.mwb .dmm td { width: 34px; min-width: 34px; }
.mwb .dmm th.colh { width: 34px; min-width: 34px; height: 170px; }
.mwb .nextbar { display: flex; justify-content: flex-end; margin-top: 14px; }
.mwb .flex { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.mwb .seg { display: inline-flex; border: 1px solid var(--mwb-line); border-radius: 4px; overflow: hidden; }
.mwb .seg button { border: none; background: #fff; padding: 5px 11px; cursor: pointer; }
.mwb .seg button.on { background: var(--mwb-brand2); color: #fff; }
.mwb .svgwrap { background: #fff; border: 1px solid var(--mwb-line); border-radius: 6px; overflow: auto; padding: 6px; }
.mwb .qscale { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; }
.mwb .checkl label { display: flex; align-items: center; gap: 6px; padding: 2px 0; font-size: 12px; }
.mwb .apply-opt { display: flex; gap: 7px; align-items: flex-start; padding: 6px; border-radius: 4px; margin-bottom: 3px; cursor: pointer; }
.mwb .apply-opt.on { background: #e3f0f8; }
.mwb-toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%) translateY(80px); background: #1f2d36; color: #fff; padding: 10px 18px; border-radius: 6px; transition: transform .25s; z-index: 1000; pointer-events: none; }
.mwb-toast.show { transform: translateX(-50%) translateY(0); }