/* IT-Elemente: Grundriss, Freigabe, Stack-Bauer, Zeitstrahl, Tag im Betrieb. Gemeinsame Klassen dupliziert. */
.akt-sp-chips { display: flex; flex-wrap: wrap; gap: 6px; } .akt-sp-chips label { position: relative; } .akt-sp-chips input { position: absolute; opacity: 0; inset: 0; }
.akt-sp-chips span { display: inline-block; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-soft); font-size: var(--step--1); font-weight: 600; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.akt-sp-chips input:checked + span { background: var(--orange); color: var(--orange-ink); border-color: var(--orange); } .akt-sp-chips input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.akt-sp-check { display: flex; gap: 8px; align-items: center; font-size: var(--step--1); color: var(--text-soft); cursor: pointer; } .akt-sp-check input { width: 18px; height: 18px; accent-color: var(--orange); flex: none; }
.akt-sp-panel-eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: .08em; color: var(--orange-text); font-weight: 600; margin: 0; }
.akt-sp-note { font-size: 12px; color: var(--muted); } .akt-sp-list { margin-top: 12px; font-size: var(--step--1); color: var(--text-soft); } .akt-sp-list summary { cursor: pointer; }
.akt-np-more { color: var(--orange-text); font-weight: 600; text-decoration: none; display: inline-block; margin-bottom: 10px; }
/* Grundriss */
.akt-gr-head { display: grid; gap: 12px; margin-bottom: 14px; } .akt-gr-intro { margin: 0; color: var(--text-soft); }
.akt-gr-ctrls { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; } .akt-gr-flows { display: flex; flex-wrap: wrap; gap: 6px; } .akt-gr-ctrls .btn { padding: 8px 14px; font-size: var(--step--1); }
.akt-gr-stage { display: grid; grid-template-columns: minmax(0, 2fr) minmax(250px, .9fr); gap: 22px; align-items: start; } @media (max-width: 1000px) { .akt-gr-stage { grid-template-columns: minmax(0, 1fr); } }
.akt-gr-scroll { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .akt-gr-svg { width: 100%; min-width: 640px; height: auto; display: block; }
.gr-room-box { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; transition: fill .3s; } .gr-room-label { fill: var(--text); font-size: 13px; font-weight: 700; } .gr-room-cov { fill: var(--text-soft); font-size: 11px; font-weight: 600; }
.gr-zone-buero .gr-room-box { fill: rgba(255,102,0,.06); } .gr-zone-gast .gr-room-box { fill: rgba(60,179,113,.08); stroke-dasharray: 6 5; } .gr-zone-server .gr-room-box { fill: rgba(47,111,181,.12); } .gr-zone-geraete .gr-room-box { fill: rgba(208,138,0,.1); } .gr-zone-ot .gr-room-box { fill: rgba(194,65,59,.08); } .gr-zone-rein .gr-room-box { fill: rgba(255,255,255,.06); stroke: #8fb8d9; } .gr-zone-lager .gr-room-box { fill: rgba(150,150,150,.08); } .gr-zone-labor .gr-room-box { fill: rgba(109,74,138,.1); } .gr-zone-extern .gr-room-box { fill: transparent; stroke-dasharray: 3 5; }
.gr-leg { display: inline-block; width: 18px; height: 12px; border-radius: 3px; border: 1px solid var(--line); } .gr-leg.gr-zone-buero { background: rgba(255,102,0,.3); } .gr-leg.gr-zone-gast { background: rgba(60,179,113,.4); } .gr-leg.gr-zone-server { background: rgba(47,111,181,.5); } .gr-leg.gr-zone-geraete { background: rgba(208,138,0,.4); } .gr-leg.gr-zone-ot { background: rgba(194,65,59,.4); } .gr-leg.gr-zone-rein { background: rgba(143,184,217,.5); } .gr-leg.gr-zone-lager { background: rgba(150,150,150,.4); } .gr-leg.gr-zone-labor { background: rgba(109,74,138,.4); } .gr-leg.gr-zone-extern { background: transparent; border-style: dashed; }
.gr-leg.gr-cov-good { background: rgba(60,179,113,.6); } .gr-leg.gr-cov-ok { background: rgba(208,138,0,.6); } .gr-leg.gr-cov-weak { background: rgba(194,65,59,.6); }
.akt-gr[data-ap="1"] .gr-room { cursor: crosshair; outline: none; } .akt-gr[data-ap="1"] .gr-room:focus-visible .gr-room-box { stroke: var(--orange); stroke-width: 3; }
.gr-room.is-cov-good .gr-room-box { fill: rgba(60,179,113,.28) !important; } .gr-room.is-cov-ok .gr-room-box { fill: rgba(208,138,0,.28) !important; } .gr-room.is-cov-weak .gr-room-box { fill: rgba(194,65,59,.28) !important; }
.gr-rack { fill: var(--muted); fill-opacity: .35; stroke: var(--text-soft); stroke-width: 1; } .gr-rack-label { fill: var(--muted); font-size: 11px; text-anchor: middle; }
.gr-dev { cursor: pointer; outline: none; } .gr-dev-dot { fill: var(--surface); stroke: var(--line); stroke-width: 2; transition: stroke .2s, fill .2s; } .gr-dev-icon { color: var(--text); } .gr-dev-label { fill: var(--text-soft); font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.gr-dev:hover .gr-dev-dot, .gr-dev:focus-visible .gr-dev-dot { stroke: var(--orange); } .gr-dev.is-active .gr-dev-dot { stroke: var(--orange); stroke-width: 3; } .gr-dev.is-active-flow .gr-dev-dot { fill: rgba(60,179,113,.25); stroke: #3cb371; stroke-width: 3; } .gr-dev.is-blocked .gr-dev-dot { fill: rgba(194,65,59,.25); stroke: var(--danger); stroke-width: 3; }
.gr-dev.gr-zone-extern .gr-dev-dot { stroke-dasharray: 3 3; }
.gr-pkt { fill: #3cb371; filter: drop-shadow(0 0 6px rgba(60,179,113,.8)); } .gr-pkt-bad { fill: var(--danger); filter: drop-shadow(0 0 6px rgba(255,138,107,.8)); } .gr-pkt.is-blocked { animation: gr-blocked .7s ease-out forwards; } .gr-pkt.is-arrived { animation: gr-arrive .5s ease-out forwards; } @keyframes gr-blocked { 50% { r: 14; } 100% { r: 2; opacity: 0; } } @keyframes gr-arrive { to { r: 18; opacity: 0; } }
.gr-ap { cursor: pointer; outline: none; } .gr-ap-range { fill: rgba(60,179,113,.1); stroke: #3cb371; stroke-dasharray: 4 4; } .gr-ap-dot { fill: #3cb371; stroke: #fff; stroke-width: 2; } .gr-ap-num { fill: #fff; font-size: 12px; font-weight: 700; text-anchor: middle; } .gr-ap:hover .gr-ap-dot, .gr-ap:focus-visible .gr-ap-dot { fill: var(--danger); }
.gr-cable { fill: none; stroke: #3cb371; stroke-width: 2; stroke-opacity: .5; stroke-dasharray: 2 6; stroke-linecap: round; }
.akt-gr-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; position: sticky; top: 96px; } @media (max-width: 1000px) { .akt-gr-panel { position: static; } }
.akt-gr-panel h3 { margin: 4px 0 8px; font-size: var(--step-1); } .akt-gr-panel p { color: var(--text-soft); margin: 0 0 10px; }
.akt-gr-steps { margin: 0 0 12px; padding: 0 0 0 20px; font-size: var(--step--1); color: var(--muted); display: grid; gap: 4px; } .akt-gr-steps li.is-active { color: var(--text); font-weight: 600; } .akt-gr-steps li.is-done { color: #3cb371; }
.akt-gr-cov { width: 100%; border-collapse: collapse; font-size: var(--step--1); margin: 0 0 12px; } .akt-gr-cov caption { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .akt-gr-cov th { text-align: left; font-weight: 500; padding: 3px 0; color: var(--text-soft); } .akt-gr-cov td { text-align: right; font-weight: 700; } .akt-gr-cov td.is-good { color: #3cb371; } .akt-gr-cov td.is-ok { color: #d08a00; } .akt-gr-cov td.is-weak { color: var(--danger); }
.akt-gr-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; margin: 0 0 12px; font-size: 12px; color: var(--text-soft); } .akt-gr-legend div { display: flex; gap: 8px; align-items: center; } .akt-gr-legend dt, .akt-gr-legend dd { margin: 0; }
/* Freigabe */
.akt-fg-stage { display: grid; grid-template-columns: minmax(200px, .8fr) minmax(240px, 1fr) minmax(240px, 1fr); gap: 18px; align-items: start; } @media (max-width: 1000px) { .akt-fg-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .akt-fg-files { grid-column: 1 / -1; } } @media (max-width: 640px) { .akt-fg-stage { grid-template-columns: minmax(0, 1fr); } }
.akt-fg-files, .akt-fg-dialog, .akt-fg-result { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.akt-fg-head, .akt-fg-dialog-head { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 10px; } .akt-fg-dialog-head b { text-transform: none; letter-spacing: 0; color: var(--text); font-size: var(--step-0); display: block; margin-top: 2px; }
.akt-fg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .akt-fg-list button { width: 100%; display: grid; grid-template-columns: 22px 1fr; gap: 0 10px; text-align: left; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; border-radius: 10px; padding: 8px 10px; cursor: pointer; } .akt-fg-list button[aria-selected="true"] { border-color: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
.akt-fg-list i { grid-row: 1 / 3; width: 18px; height: 20px; border-radius: 3px; background: var(--line); align-self: center; } .akt-fg-list i.is-folder { background: var(--orange); border-radius: 3px 6px 3px 3px; } .akt-fg-list b { font-size: var(--step--1); } .akt-fg-list small { color: var(--muted); font-size: 11px; }
.akt-fg-dialog { display: grid; gap: 12px; } .akt-fg-dialog fieldset { border: 0; padding: 0; margin: 0; } .akt-fg-dialog legend { font-size: var(--step--1); color: var(--muted); margin-bottom: 6px; padding: 0; } .akt-fg-checks { display: grid; gap: 6px; }
.akt-fg-policy { font-size: 12px; color: var(--orange-text); margin: 0; min-height: 1em; }
.akt-fg-view { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 8px 0 10px; } .akt-fg-view-head { display: flex; gap: 8px; align-items: center; margin: 0 0 6px; font-size: var(--step--1); color: var(--text-soft); } .akt-fg-view-head i { width: 22px; height: 22px; border-radius: 50%; background: var(--orange); } .akt-fg-view-file { margin: 0 0 8px; font-weight: 700; }
.akt-fg-caps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--step--1); } .akt-fg-caps li::before { content: "✓ "; font-weight: 700; color: #3cb371; } .akt-fg-caps li.is-no { color: var(--muted); } .akt-fg-caps li.is-no::before { content: "✕ "; color: var(--danger); }
.akt-fg-explain { color: var(--text-soft); margin: 0; font-size: var(--step--1); }
.akt-fg-map { margin-top: 14px; } .akt-fg-map summary { cursor: pointer; font-weight: 600; } .akt-fg-map-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 1fr); gap: 16px; align-items: center; margin-top: 10px; } @media (max-width: 760px) { .akt-fg-map-inner { grid-template-columns: minmax(0, 1fr); } } .akt-fg-map-inner svg { width: 100%; height: auto; } .akt-fg-map-inner p { margin: 0; color: var(--text-soft); font-size: var(--step--1); }
.fg-node rect { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; } .fg-node-acc rect { stroke: var(--orange); } .fg-node-label { fill: var(--text); font-size: 14px; font-weight: 700; text-anchor: middle; } .fg-node-sub { fill: var(--text-soft); font-size: 10px; text-anchor: middle; } .fg-edge { fill: none; stroke: #3cb371; stroke-width: 2.5; stroke-dasharray: 2 7; stroke-linecap: round; }
/* Stack-Bauer */
.akt-sb-head { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .akt-sb-head .btn { padding: 8px 14px; font-size: var(--step--1); }
.akt-sb-story { border: 1px solid color-mix(in srgb, var(--text) 22%, transparent); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; } .akt-sb-story p { margin: 0; color: var(--text-soft); font-size: var(--step--1); }
.akt-sb-stage { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, .9fr); gap: 22px; align-items: start; } @media (max-width: 960px) { .akt-sb-stage { grid-template-columns: minmax(0, 1fr); } }
.akt-sb-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.akt-sb-layer { display: grid; grid-template-columns: 170px auto 1fr; gap: 12px; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; cursor: pointer; transition: border-color .2s; } .akt-sb-layer.is-current { border-color: var(--orange); } @media (max-width: 640px) { .akt-sb-layer { grid-template-columns: 1fr auto; } .akt-sb-product { grid-column: 1 / -1; } }
.akt-sb-name { font-weight: 700; font-size: var(--step--1); } .akt-sb-product { font-size: var(--step--1); color: var(--text-soft); font-weight: 500; }
.akt-sb-switch { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 3px 8px; cursor: pointer; } .akt-sb-switch i { width: 34px; height: 18px; border-radius: 9px; background: var(--line); position: relative; } .akt-sb-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); transition: left .2s; } .akt-sb-switch[aria-checked="true"] i { background: #3cb371; } .akt-sb-switch[aria-checked="true"] i::after { left: 18px; } .akt-sb-switch[aria-checked="true"] .akt-sb-switch-b, .akt-sb-switch[aria-checked="false"] .akt-sb-switch-a { color: var(--text); }
.akt-sb-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .akt-sb-panel h3 { margin: 4px 0 10px; font-size: var(--step-1); }
.akt-sb-facts { margin: 0 0 12px; display: grid; gap: 8px; } .akt-sb-facts div { display: grid; gap: 2px; } .akt-sb-facts dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .akt-sb-facts dd { margin: 0; font-weight: 600; font-size: var(--step--1); } .akt-sb-text { color: var(--text-soft); margin: 0 0 10px; }
/* Zeitstrahl */
.akt-zs-stage { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .9fr); gap: 22px; align-items: start; } @media (max-width: 960px) { .akt-zs-stage { grid-template-columns: minmax(0, 1fr); } }
.akt-zs-phases { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; } @media (max-width: 760px) { .akt-zs-phases { grid-template-columns: repeat(4, 1fr); } }
.akt-zs-phases button { width: 100%; display: grid; gap: 6px; justify-items: center; text-align: center; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; border-radius: 10px; padding: 10px 6px; cursor: pointer; transition: border-color .3s, background .3s, opacity .3s; } .akt-zs-phases i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--line); font-style: normal; font-weight: 700; font-size: 12px; } .akt-zs-phases b { font-size: 11px; line-height: 1.2; }
.akt-zs-phases li.is-reached button { border-color: var(--danger); } .akt-zs-phases li.is-reached i { background: var(--danger); color: #fff; } .akt-zs-phases li.is-stopped button { background: rgba(60,179,113,.15); border-color: #3cb371; } .akt-zs-phases li.is-stopped i { background: #3cb371; } .akt-zs-phases li.is-safe button { opacity: .4; } .akt-zs-phases button[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--orange); }
.akt-zs-phase-text { color: var(--text-soft); margin: 0 0 12px; } .akt-zs-break { background: rgba(60,179,113,.12); border: 1px solid #3cb371; border-radius: 10px; padding: 10px 14px; } .akt-zs-break b { display: block; margin-bottom: 4px; } .akt-zs-break span { color: var(--text-soft); font-size: var(--step--1); }
.akt-zs-measures { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; display: grid; gap: 8px; } .akt-zs-measures h3 { margin: 0 0 4px; font-size: var(--step-1); } .akt-zs-summary { color: var(--text-soft); margin: 6px 0; }
.akt-zs-timeline { display: grid; gap: 12px; } .akt-zs-slider { display: grid; gap: 6px; font-weight: 600; } .akt-zs-slider input { width: 100%; accent-color: var(--orange); }
.akt-zs-track { position: relative; height: 54px; margin: 0 0 6px; } .akt-zs-track::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--line); } .akt-zs-track i { position: absolute; left: 0; top: 8px; height: 6px; border-radius: 3px; background: var(--orange); width: 0; } .akt-zs-track b { position: absolute; top: 20px; transform: translateX(-50%); font-size: 10px; color: var(--muted); white-space: nowrap; font-weight: 500; } .akt-zs-track b::before { content: ""; position: absolute; top: -12px; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--line); transform: translateX(-50%); } .akt-zs-track b.is-past { color: var(--text); } .akt-zs-track b.is-past::before { background: var(--orange); } .akt-zs-track b:nth-child(odd) { top: 34px; } .akt-zs-track b:nth-child(odd)::before { top: -26px; } /* Punkte immer auf der Linie, nur die Beschriftung wechselt die Höhe */
.akt-zs-track b:first-of-type { transform: none; } .akt-zs-track b:first-of-type::before { left: 4px; } .akt-zs-track b:last-of-type { transform: translateX(-100%); } .akt-zs-track b:last-of-type::before { left: calc(100% - 4px); }
@media (max-width: 760px) { .akt-zs-track { height: 26px; } .akt-zs-track b, .akt-zs-track b:nth-child(odd) { font-size: 0; top: 20px; } .akt-zs-track b:nth-child(odd)::before { top: -12px; } .akt-zs-track b:first-of-type, .akt-zs-track b:last-of-type { transform: translateX(-50%); } .akt-zs-track b:first-of-type::before, .akt-zs-track b:last-of-type::before { left: 50%; } } /* mobil nur Punkte, der Text steht in den Karten */
.akt-zs-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 640px) { .akt-zs-lanes { grid-template-columns: 1fr; } } .akt-zs-lane { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; background: var(--surface-2); } .akt-zs-lane-ok { border-color: #3cb371; } .akt-zs-lane-bad.is-hit { border-color: var(--danger); background: rgba(194,65,59,.08); } .akt-zs-lane-head { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .akt-zs-lane b { display: block; margin-bottom: 4px; } .akt-zs-lane p { margin: 0; color: var(--text-soft); font-size: var(--step--1); }
.akt-zs-controls { margin: 0; } .akt-zs-controls .btn { padding: 8px 14px; font-size: var(--step--1); }
/* Tag im Betrieb */
.akt-tb-pakete { margin-bottom: 14px; }
.akt-tb-stage { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr); gap: 22px; align-items: center; } @media (max-width: 800px) { .akt-tb-stage { grid-template-columns: minmax(0, 1fr); } }
.akt-tb-svg { width: 100%; max-width: 440px; height: auto; margin: 0 auto; display: block; }
.tb-ring { fill: none; stroke: var(--line); stroke-width: 10; } .tb-business { fill: none; stroke: var(--orange); stroke-width: 10; stroke-opacity: .5; } .tb-center { fill: var(--text); font-size: 15px; font-weight: 700; text-anchor: middle; } .tb-center-sub { fill: var(--muted); font-size: 12px; text-anchor: middle; } .tb-hour { fill: var(--muted); font-size: 12px; text-anchor: middle; }
.tb-ev { cursor: pointer; outline: none; } .tb-ev-dot { fill: var(--surface-2); stroke: #3cb371; stroke-width: 2.5; transition: stroke .2s; } .tb-ev.is-weak .tb-ev-dot { stroke: var(--danger); } .tb-ev-ring { fill: none; stroke: var(--orange); stroke-width: 2; opacity: 0; transition: opacity .2s; } .tb-ev.is-active .tb-ev-ring, .tb-ev:focus-visible .tb-ev-ring { opacity: 1; } .tb-ev-icon { color: var(--text); display: grid; place-items: center; width: 22px; height: 22px; } .tb-ev-icon svg { width: 20px; height: 20px; }
.akt-tb-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; } .akt-tb-panel h3 { margin: 4px 0 8px; font-size: var(--step-1); } .akt-tb-panel p { color: var(--text-soft); margin: 0 0 10px; }
.akt-tb-verdict { font-weight: 600; } .akt-tb-verdict b.is-ok { color: #3cb371; } .akt-tb-verdict b.is-weak { color: var(--danger); }
.akt-tb-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 8px; } .akt-tb-table th, .akt-tb-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
@media (prefers-reduced-motion: reduce) { .gr-pkt.is-blocked, .gr-pkt.is-arrived { animation: none; } .akt-sb-switch i::after, .gr-room-box { transition: none; } }