/* v773: Einsatzplanung – Ablaufplan, Einsatzplan, Meine Aufgaben. Gestaltung aus dem abgestimmten Entwurf (v14), vollständig unter #view-einsatzplanung; eigene Farbtokens für Tag/Nacht (Nacht über html[data-theme="dark"] wie in der App). Ergänzungen für die App (Ebenen, Hilfsklassen, Import, Kachel im Arbeitsbereich) stehen am Ende. */ #view-einsatzplanung { --bg: #f4f6f9; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #f1f4f8; --border: #e3e8ef; --border-strong: #cfd6e0; --grid: rgba(15, 26, 42, .07); --we: rgba(15, 26, 42, .035); --text: #0f1a2a; --text-2: #44536a; --text-3: #5f6b7f; --accent: #2563eb; --accent-soft: #eaf1ff; --accent-line: #bfd3ff; --on-accent: #ffffff; --ok: #0a7d56; --ok-soft: #e6f6ef; --bad: #b42318; --bad-soft: #fdecec; --warn: #a15c00; --warn-soft: #fff6e5; --shadow: 0 1px 2px rgba(15, 26, 42, .04), 0 2px 8px -2px rgba(15, 26, 42, .06); --shadow-pop: 0 18px 40px -12px rgba(15, 26, 42, .28), 0 4px 12px -4px rgba(15, 26, 42, .12); --sheet: #ffffff; --sheet-text: #111111; --sheet-line: #222222; --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif; --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --r: 8px; --h: 32px; } html[data-theme="dark"] #view-einsatzplanung { --bg: #1a1d21; --surface: #21252b; --surface-2: #252a31; --surface-3: #2a3038; --border: #323942; --border-strong: #424b56; --grid: rgba(255, 255, 255, .06); --we: rgba(255, 255, 255, .025); --text: #eef1f5; --text-2: #bac3cf; --text-3: #9aa4b2; --accent: #6b9bff; --accent-soft: rgba(107, 155, 255, .14); --accent-line: rgba(107, 155, 255, .38); --on-accent: #0b1424; --ok: #3ccf95; --ok-soft: rgba(60, 207, 149, .14); --bad: #ff7b7b; --bad-soft: rgba(255, 123, 123, .14); --warn: #f2b24c; --warn-soft: rgba(242, 178, 76, .13); --shadow: 0 1px 2px rgba(0, 0, 0, .28), 0 4px 14px -6px rgba(0, 0, 0, .4); --shadow-pop: 0 22px 48px -12px rgba(0, 0, 0, .6), 0 4px 14px -4px rgba(0, 0, 0, .4); color-scheme: dark; } /* ---------- Grundlage: allgemeine App-Regeln für Knöpfe und Felder innerhalb der Ansicht zurücksetzen ---------- */ body[data-app-view="einsatzplanung"] .app-layout, body[data-app-view="einsatzplanung"] .app-layout > main { max-width: none; width: 100%; margin: 0; padding: 0; display: block; } #view-einsatzplanung { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.4; min-height: calc(100vh - 60px); } #view-einsatzplanung button { font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; border: 0; border-radius: 0; padding: 0; margin: 0; background: none; box-shadow: none; width: auto; height: auto; min-height: 0; max-width: none; transition: none; cursor: pointer; } #view-einsatzplanung label { display: inline; margin: 0; font-size: inherit; color: inherit; } #view-einsatzplanung input, #view-einsatzplanung select, #view-einsatzplanung textarea { font: inherit; color: inherit; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; width: auto; min-height: 0; max-width: none; transition: none; box-shadow: none; } #view-einsatzplanung h1, #view-einsatzplanung h2, #view-einsatzplanung h3, #view-einsatzplanung p { margin: 0; } #view-einsatzplanung [hidden] { display: none !important; } #view-einsatzplanung svg { max-width: none; } /* ---------- Entwurf ---------- */ #view-einsatzplanung * { box-sizing: border-box; } #view-einsatzplanung button, #view-einsatzplanung input, #view-einsatzplanung select { font: inherit; color: inherit; } #view-einsatzplanung button { cursor: pointer; } #view-einsatzplanung :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #view-einsatzplanung .num { font-variant-numeric: tabular-nums; } #view-einsatzplanung .klein { font-size: 12.5px; color: var(--text-3); } #view-einsatzplanung .seite { padding-block: 16px 28px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; } #view-einsatzplanung #ansicht { min-width: 0; } #view-einsatzplanung .ansicht-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } #view-einsatzplanung .ansicht-kopf h1 { margin: 0; font-family: var(--font-display); font-size: 22px; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; } #view-einsatzplanung .reiter { display: inline-flex; max-width: 100%; overflow-x: auto; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-3); } #view-einsatzplanung .reiter button { height: 30px; padding: 0 14px; border: 0; border-radius: 7px; background: transparent; color: var(--text-2); font-weight: 600; font-size: 13px; white-space: nowrap; } #view-einsatzplanung .reiter button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } #view-einsatzplanung .kopf-rechts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; position: relative; } #view-einsatzplanung .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--h); padding: 0 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 600; white-space: nowrap; } #view-einsatzplanung .knopf:hover { border-color: var(--border-strong); background: var(--surface-2); } #view-einsatzplanung .knopf.primaer { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } #view-einsatzplanung .knopf.primaer:hover { filter: brightness(1.05); } #view-einsatzplanung .knopf.still { border-color: transparent; background: transparent; color: var(--text-2); } #view-einsatzplanung .knopf.still:hover { background: var(--surface-3); } #view-einsatzplanung .knopf.gefahr { color: var(--bad); } #view-einsatzplanung .knopf:disabled { opacity: .45; cursor: default; } #view-einsatzplanung .knopf svg, #view-einsatzplanung .kopf-knopf svg { width: 16px; height: 16px; flex: 0 0 auto; } #view-einsatzplanung .segment { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; background: var(--surface); } #view-einsatzplanung .segment button { height: calc(var(--h) - 2px); padding: 0 11px; border: 0; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap; } #view-einsatzplanung .segment button + button { border-left: 1px solid var(--border); } #view-einsatzplanung .segment button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung .datum-nav { display: inline-flex; align-items: center; gap: 4px; } #view-einsatzplanung .datum-nav .bereich { min-width: 168px; text-align: center; font-weight: 600; font-size: 13px; } #view-einsatzplanung .trenner { width: 1px; height: 20px; background: var(--border); margin: 0 4px; } #view-einsatzplanung .menue { position: absolute; z-index: 45; top: calc(100% + 6px); right: 0; min-width: 220px; padding: 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); box-shadow: var(--shadow-pop); display: grid; } #view-einsatzplanung .menue button { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 10px; border: 0; border-radius: 7px; background: transparent; text-align: left; font-size: 13px; } #view-einsatzplanung .menue button:hover { background: var(--surface-3); } #view-einsatzplanung .menue button span:last-child { margin-left: auto; color: var(--text-3); font-size: 12px; }/* Leiste „Eintragen“: Einsatzarten – markieren, dann anklicken */ #view-einsatzplanung .eintragen { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } #view-einsatzplanung .leiste-titel { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-right: 4px; } #view-einsatzplanung .chip { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px 0 5px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 12.5px; color: var(--text); white-space: nowrap; } #view-einsatzplanung .chip:hover { border-color: var(--border-strong); background: var(--surface-2); } #view-einsatzplanung .chip.anpassen { border-style: dashed; } #view-einsatzplanung .chip .stift { width: 13px; height: 13px; color: var(--text-3); margin-left: 2px; } #view-einsatzplanung .chip.neu { color: var(--accent); border-style: dashed; padding: 0 10px 0 8px; } #view-einsatzplanung .chip.neu svg { width: 14px; height: 14px; } #view-einsatzplanung .code { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .01em; } #view-einsatzplanung .eintragen .rechts { margin-left: auto; display: flex; align-items: center; gap: 8px; } #view-einsatzplanung .eintragen .hinweis { font-size: 12.5px; color: var(--text-3); }/* Arbeitsfläche Einsatzplan */ #view-einsatzplanung .flaeche { display: grid; grid-template-columns: minmax(0, 1fr) 352px; gap: 14px; align-items: start; } #view-einsatzplanung .raster-rahmen { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: auto; max-height: calc(100vh - 232px); min-height: 420px; position: relative; } #view-einsatzplanung table.raster { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; user-select: none; } #view-einsatzplanung .raster th, #view-einsatzplanung .raster td { padding: 0; border-right: 1px solid var(--grid); border-bottom: 1px solid var(--grid); } #view-einsatzplanung .raster thead th { position: sticky; z-index: 3; background: var(--surface); } #view-einsatzplanung .raster thead tr.r1 th { top: 0; height: 28px; } #view-einsatzplanung .raster thead tr.r2 th { top: 28px; height: 30px; border-bottom: 1px solid var(--border); } #view-einsatzplanung .raster thead tr.r3 th { top: 58px; height: 38px; border-bottom: 1px solid var(--border-strong); } #view-einsatzplanung .raster .name-spalte { position: sticky; left: 0; z-index: 2; background: var(--surface); width: 232px; min-width: 232px; max-width: 232px; border-right: 1px solid var(--border-strong); text-align: left; } #view-einsatzplanung .raster thead .name-spalte { z-index: 6; } #view-einsatzplanung .raster thead th.ereignis-zelle.hat { z-index: 4; } #view-einsatzplanung .name-col { width: 232px; } #view-einsatzplanung .kw { font-size: 11.5px; font-weight: 700; color: var(--text-3); text-align: left; padding-left: 8px !important; letter-spacing: .02em; } #view-einsatzplanung .tag-kopf { text-align: center; font-weight: 600; } #view-einsatzplanung .tag-kopf .wt { display: block; font-size: 11px; color: var(--text-3); font-weight: 600; } #view-einsatzplanung .tag-kopf .dt { display: block; font-size: 13px; } #view-einsatzplanung .tag-kopf.heute .dt, #view-einsatzplanung .tag-kopf.heute .wt { color: var(--accent); } #view-einsatzplanung .we { background-image: linear-gradient(var(--we), var(--we)); } #view-einsatzplanung .raster thead th.we { background: color-mix(in srgb, var(--surface) 93%, var(--text-3)); } #view-einsatzplanung .ereignis-zelle { position: relative; } #view-einsatzplanung .ereignis { position: absolute; left: 3px; right: -400px; top: 6px; display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--warn); white-space: nowrap; pointer-events: none; z-index: 1; } #view-einsatzplanung .ereignis::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--warn); border-radius: 1px; flex: 0 0 auto; } #view-einsatzplanung .ereignis-titel { font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; text-transform: uppercase; padding-left: 14px !important; } #view-einsatzplanung .gruppe-zeile td { height: 30px; background: var(--surface-3); border-bottom: 1px solid var(--border); } #view-einsatzplanung .gruppe-zeile .name-spalte { background: var(--surface-3); padding-left: 14px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); } #view-einsatzplanung .person-zeile td { height: 40px; } #view-einsatzplanung .person { display: flex; align-items: center; gap: 10px; width: 100%; padding: 0 10px 0 14px; height: 40px; border: 0; background: transparent; text-align: left; cursor: pointer; } #view-einsatzplanung .person:hover .person-name { color: var(--accent); } #view-einsatzplanung .avatar { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: var(--surface-3); color: var(--text-2); } #view-einsatzplanung .person-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; } #view-einsatzplanung .rolle { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--text-3); padding: 2px 6px; border: 1px solid var(--border); border-radius: 5px; max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .app-symbol { flex: 0 0 auto; width: 14px; height: 14px; color: var(--accent); } #view-einsatzplanung .zelle { position: relative; cursor: cell; } #view-einsatzplanung .zelle.heute-spalte, #view-einsatzplanung th.heute-spalte { box-shadow: inset 2px 0 0 var(--accent-line), inset -2px 0 0 var(--accent-line); } #view-einsatzplanung .zelle.markiert::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: inset 0 0 0 1.5px var(--accent); pointer-events: none; z-index: 1; } #view-einsatzplanung .zelle.ziel::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--ok) 22%, transparent); box-shadow: inset 0 0 0 2px var(--ok); pointer-events: none; z-index: 1; } #view-einsatzplanung .eintrag { position: absolute; top: 5px; bottom: 5px; left: 2px; right: 2px; display: flex; align-items: center; gap: 4px; padding: 0 6px; border-radius: 5px; font-size: 11.5px; font-weight: 700; overflow: hidden; white-space: nowrap; } #view-einsatzplanung .eintrag.weiter-l { left: -1px; border-top-left-radius: 0; border-bottom-left-radius: 0; } #view-einsatzplanung .eintrag.weiter-r { right: -1px; border-top-right-radius: 0; border-bottom-right-radius: 0; } #view-einsatzplanung .eintrag .txt { overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .eintrag.lauf { overflow: visible; } #view-einsatzplanung .eintrag.lauf .txt { position: relative; z-index: 1; flex: 0 0 auto; } #view-einsatzplanung .eintrag.ist-aufgabe { font-weight: 650; } #view-einsatzplanung .mond { flex: 0 0 auto; width: 12px; height: 12px; margin-left: auto; opacity: .85; } #view-einsatzplanung .kap-zeile td { height: 34px; background: var(--surface-2); } #view-einsatzplanung .kap-zeile.erste td { border-top: 1px solid var(--border-strong); } #view-einsatzplanung .kap-zeile .name-spalte { background: var(--surface-2); padding: 0 10px 0 14px; font-size: 12.5px; color: var(--text-2); font-weight: 600; } #view-einsatzplanung .kap { display: flex; align-items: center; justify-content: center; height: 34px; font-size: 12px; font-weight: 700; } #view-einsatzplanung .kap span { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border-radius: 999px; } #view-einsatzplanung .kap .ok { background: var(--ok-soft); color: var(--ok); } #view-einsatzplanung .kap .zu-wenig { background: var(--bad-soft); color: var(--bad); } #view-einsatzplanung .kap .leer { color: var(--text-3); font-weight: 600; } #view-einsatzplanung .kap-legende { font-weight: 500; color: var(--text-3); font-size: 11.5px; } #view-einsatzplanung .gruppe-knopf { display: flex; align-items: center; gap: 8px; width: 100%; height: 30px; padding: 0 10px; border: 0; background: transparent; font: inherit; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); text-align: left; } #view-einsatzplanung .gruppe-knopf:hover { color: var(--text); } #view-einsatzplanung .gruppe-knopf svg { width: 14px; height: 14px; color: var(--text-3); transition: transform .15s; flex: 0 0 auto; } #view-einsatzplanung .gruppe-knopf[aria-expanded="true"] svg { transform: rotate(90deg); } #view-einsatzplanung .gruppe-knopf .anz { font-weight: 600; color: var(--text-3); letter-spacing: 0; } #view-einsatzplanung .gruppe-summe { display: flex; align-items: center; justify-content: center; height: 30px; font-size: 11.5px; font-weight: 700; color: var(--text-3); } #view-einsatzplanung .kw-zelle { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 8px 0 14px; } #view-einsatzplanung .alle-knopf { margin-left: auto; height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 650; white-space: nowrap; } #view-einsatzplanung .alle-knopf:hover { border-color: var(--border-strong); color: var(--text); } #view-einsatzplanung .tag-detail { position: absolute; top: 5px; bottom: 5px; left: 8px; right: 8px; display: flex; align-items: center; gap: 8px; overflow: hidden; white-space: nowrap; font-size: 12.5px; } #view-einsatzplanung .tag-detail .marke { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; font-weight: 700; flex: 0 0 auto; } #view-einsatzplanung .tag-detail .marke .mond { margin-left: 2px; } #view-einsatzplanung .tag-detail .text { color: var(--text-2); flex: 0 0 auto; } #view-einsatzplanung .tag-detail { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } #view-einsatzplanung .tag-detail .el-chip { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-2); font-size: 11.5px; font-weight: 600; flex: 0 0 auto; } #view-einsatzplanung .tag-detail .leer { color: var(--text-3); }/* Aufgaben-Leiste rechts */ #view-einsatzplanung .leiste { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 70px); max-height: calc(100vh - 90px); display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; overflow: hidden; } #view-einsatzplanung .leiste-kopf { padding: 14px 16px 12px; border-bottom: 1px solid var(--border); display: grid; gap: 10px; } #view-einsatzplanung .leiste-kopf h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 650; display: flex; align-items: center; gap: 8px; } #view-einsatzplanung .leiste-kopf h2 .knopf { margin-left: auto; height: 28px; font-size: 12.5px; } #view-einsatzplanung .schritte-hinweis { display: grid; grid-template-columns: 22px 1fr; gap: 6px 8px; align-items: center; font-size: 13px; color: var(--text-2); } #view-einsatzplanung .schritte-hinweis b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; } #view-einsatzplanung .auswahl-karte { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); border: 1px solid var(--accent-line); } #view-einsatzplanung .auswahl-karte strong { font-size: 13.5px; } #view-einsatzplanung .auswahl-karte .unter { grid-column: 1; color: var(--text-2); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .auswahl-karte .symbol-knopf { grid-row: 1 / span 2; grid-column: 2; } #view-einsatzplanung .suche { position: relative; } #view-einsatzplanung .suche svg { position: absolute; left: 10px; top: 50%; width: 15px; height: 15px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } #view-einsatzplanung .suche input { width: 100%; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } #view-einsatzplanung .leiste-liste { overflow: auto; flex: 1; min-height: 120px; } #view-einsatzplanung .liste-titel { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 16px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .liste-titel span:last-child { margin-left: auto; letter-spacing: 0; } #view-einsatzplanung .aufgabe-zeile { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 9px 12px 9px 14px; border-bottom: 1px solid var(--grid); cursor: grab; } #view-einsatzplanung .aufgabe-zeile:hover { background: var(--surface-2); } #view-einsatzplanung .aufgabe-zeile:active { cursor: grabbing; } #view-einsatzplanung .aufgabe-zeile .griff { grid-row: 1 / span 2; width: 14px; height: 14px; color: var(--text-3); opacity: .7; } #view-einsatzplanung .aufgabe-zeile .titel { font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 7px; } #view-einsatzplanung .aufgabe-zeile .meta { grid-column: 2; color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .aufgabe-zeile .aktion { grid-column: 3; grid-row: 1 / span 2; display: flex; align-items: center; gap: 4px; } #view-einsatzplanung .zuweisen { height: 28px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 7px; background: var(--accent); color: var(--on-accent); font-size: 12.5px; font-weight: 650; } #view-einsatzplanung .zuweisen:disabled { background: transparent; color: var(--text-3); border-color: var(--border); cursor: default; } #view-einsatzplanung .aufklappen { width: 28px; height: 28px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; } #view-einsatzplanung .aufklappen:hover { background: var(--surface-3); } #view-einsatzplanung .aufklappen svg { width: 14px; height: 14px; transition: transform .15s; } #view-einsatzplanung .aufklappen[aria-expanded="true"] svg { transform: rotate(90deg); } #view-einsatzplanung .elemente { grid-column: 2 / span 2; display: grid; gap: 2px; padding-top: 6px; } #view-einsatzplanung .element-zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 28px; font-size: 12.5px; cursor: pointer; } #view-einsatzplanung .punkt { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; } #view-einsatzplanung .status { display: inline-flex; align-items: center; gap: 6px; height: 20px; padding: 0 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; } #view-einsatzplanung .st-machbar { background: var(--ok-soft); color: var(--ok); } #view-einsatzplanung .st-termin { background: var(--warn-soft); color: var(--warn); } #view-einsatzplanung .st-blockiert { background: var(--bad-soft); color: var(--bad); } #view-einsatzplanung input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); } #view-einsatzplanung .leiste-fuss { border-top: 1px solid var(--border); padding: 10px 12px; display: flex; gap: 8px; } #view-einsatzplanung .leiste-fuss input { flex: 1; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); } #view-einsatzplanung .eintrag-karte { margin: 12px 14px 4px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } #view-einsatzplanung .eintrag-karte .kopf { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); } #view-einsatzplanung .eintrag-karte .kopf strong { font-size: 13.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .eintrag-karte .inhalt { padding: 10px 12px; display: grid; gap: 10px; font-size: 12.5px; color: var(--text-2); } #view-einsatzplanung .eintrag-karte .knoepfe { display: flex; gap: 8px; flex-wrap: wrap; } #view-einsatzplanung .eintrag-karte input[type="text"] { height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); width: 100%; } #view-einsatzplanung .balken { flex: 1; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } #view-einsatzplanung .balken > i { display: block; height: 100%; border-radius: 999px; background: var(--ok); } #view-einsatzplanung .leer-hinweis { padding: 16px; color: var(--text-3); font-size: 12.5px; }/* Aufgaben-Übersicht */ #view-einsatzplanung .panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); min-width: 0; } #view-einsatzplanung .panel-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 14px 16px 12px; border-bottom: 1px solid var(--border); } #view-einsatzplanung .panel-kopf h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 650; } #view-einsatzplanung .panel-kopf .zahl { color: var(--text-3); font-weight: 600; font-size: 13px; } #view-einsatzplanung .panel-kopf .rechts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } #view-einsatzplanung .tabelle { display: grid; } #view-einsatzplanung .tz { display: grid; grid-template-columns: 4px minmax(0, 2.2fr) minmax(0, .7fr) minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 14px; align-items: center; min-height: 52px; padding: 0 16px 0 0; border-bottom: 1px solid var(--grid); font-size: 13px; text-align: left; background: transparent; border-left: 0; border-right: 0; border-top: 0; width: 100%; } #view-einsatzplanung button.tz:hover { background: var(--surface-2); } #view-einsatzplanung .tz.kopf { min-height: 36px; background: var(--surface-2); font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; } #view-einsatzplanung .tz .farbe { align-self: stretch; } #view-einsatzplanung .tz .name { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .tz .klein-zeile { display: block; color: var(--text-3); font-size: 12px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .fortschritt { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--text-2); } #view-einsatzplanung .besetzung { display: inline-flex; align-items: center; } #view-einsatzplanung .mini-avatar { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; background: var(--surface-3); color: var(--text-2); border: 2px solid var(--surface); margin-left: -6px; } #view-einsatzplanung .mini-avatar:first-child { margin-left: 0; }/* Schublade, Dialoge */ #view-einsatzplanung .schleier { position: fixed; inset: 0; z-index: 50; background: rgba(10, 16, 26, .38); display: flex; justify-content: flex-end; } #view-einsatzplanung .schublade { width: min(680px, 100%); height: 100%; background: var(--surface); box-shadow: var(--shadow-pop); display: flex; flex-direction: column; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); padding-right: env(safe-area-inset-right, 0px); } #view-einsatzplanung .schublade-kopf { display: flex; align-items: center; gap: 12px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); } #view-einsatzplanung .schublade-kopf input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; font-family: var(--font-display); font-size: 18px; font-weight: 650; } #view-einsatzplanung .schublade-kopf input:hover, #view-einsatzplanung .schublade-kopf input:focus { border-color: var(--border); background: var(--surface); } #view-einsatzplanung .schublade-inhalt { overflow: auto; padding: 16px 20px 24px; display: grid; gap: 18px; } #view-einsatzplanung .abschnitt-titel { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; } #view-einsatzplanung .karte { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; } #view-einsatzplanung .schritt { display: grid; grid-template-columns: 22px minmax(90px, .7fr) minmax(0, 1.3fr) auto 30px; gap: 10px; align-items: center; min-height: 36px; padding: 0 6px 0 12px; border-bottom: 1px solid var(--grid); font-size: 13px; } #view-einsatzplanung .schritt:last-child { border-bottom: 0; } #view-einsatzplanung .haken { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--border-strong); color: transparent; } #view-einsatzplanung .haken.ja { background: var(--ok); border-color: var(--ok); color: #fff; } #view-einsatzplanung .haken svg { width: 11px; height: 11px; } #view-einsatzplanung .schritt.erledigt .sch { color: var(--text-3); text-decoration: line-through; text-decoration-thickness: 1px; } #view-einsatzplanung .auto-hinweis { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--accent-soft); color: var(--text-2); font-size: 12.5px; } #view-einsatzplanung .auto-hinweis svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; } #view-einsatzplanung .fuss { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); } #view-einsatzplanung .fuss .rechts { margin-left: auto; display: flex; gap: 8px; } #view-einsatzplanung .dialog-schleier { position: fixed; inset: 0; z-index: 60; background: rgba(10, 16, 26, .38); display: flex; align-items: center; justify-content: center; padding: 16px; } #view-einsatzplanung .dialog { width: min(600px, 100%); max-height: calc(100% - 32px); overflow: auto; background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-pop); } #view-einsatzplanung .dialog-kopf { display: flex; align-items: center; gap: 10px; padding: 16px 20px 12px; border-bottom: 1px solid var(--border); } #view-einsatzplanung .dialog-kopf h2 { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: 650; } #view-einsatzplanung .dialog-inhalt { padding: 16px 20px; display: grid; gap: 14px; } #view-einsatzplanung .feld { display: grid; gap: 6px; min-width: 0; } #view-einsatzplanung .feld label, #view-einsatzplanung .feld .label { font-size: 12.5px; font-weight: 650; color: var(--text-2); } #view-einsatzplanung .feld input[type="text"], #view-einsatzplanung .feld input[type="date"], #view-einsatzplanung .feld input[type="number"], #view-einsatzplanung .feld select { height: 36px; padding: 0 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); width: 100%; min-width: 0; } #view-einsatzplanung .feld-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #view-einsatzplanung .feld-reihe.drei { grid-template-columns: 1fr 1fr 1fr; } #view-einsatzplanung .farben { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-height: 36px; } #view-einsatzplanung .farbe-wahl { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); } #view-einsatzplanung .farbe-wahl[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); } #view-einsatzplanung .dialog-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); } #view-einsatzplanung .dialog-fuss .links { margin-right: auto; } #view-einsatzplanung .listen-tabelle { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } #view-einsatzplanung .lz { display: grid; gap: 10px; align-items: center; min-height: 42px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--grid); } #view-einsatzplanung .lz:last-child { border-bottom: 0; } #view-einsatzplanung .lz.kopf { min-height: 32px; background: var(--surface-2); font-size: 11.5px; font-weight: 700; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; } #view-einsatzplanung .lz input[type="text"], #view-einsatzplanung .lz select { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); width: 100%; min-width: 0; } #view-einsatzplanung .lz input[type="color"] { width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; } #view-einsatzplanung .lz label { display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-2); white-space: nowrap; } #view-einsatzplanung .lz .nutzung { font-size: 12px; color: var(--text-3); white-space: nowrap; } #view-einsatzplanung .symbol-knopf { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text-3); } #view-einsatzplanung .symbol-knopf:hover { background: var(--surface-3); color: var(--text); } #view-einsatzplanung .symbol-knopf.loeschen:hover { color: var(--bad); } #view-einsatzplanung .symbol-knopf:disabled { opacity: .35; cursor: default; background: transparent; } #view-einsatzplanung .symbol-knopf svg { width: 15px; height: 15px; } #view-einsatzplanung .chip-editor { position: absolute; z-index: 46; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); } #view-einsatzplanung .chip-editor .inhalt { padding: 12px 14px; display: grid; gap: 10px; } #view-einsatzplanung .chip-editor .fuss2 { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--border); } #view-einsatzplanung .chip-editor .fuss2 .primaer { margin-left: auto; }/* Meine Aufgaben */ #view-einsatzplanung .meine { display: grid; grid-template-columns: 260px minmax(0, 440px); gap: 20px; align-items: start; } #view-einsatzplanung .personen-wahl { display: grid; } #view-einsatzplanung .personen-wahl button { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border: 0; border-bottom: 1px solid var(--grid); background: transparent; text-align: left; width: 100%; } #view-einsatzplanung .personen-wahl button:hover { background: var(--surface-2); } #view-einsatzplanung .personen-wahl button[aria-current="true"] { background: var(--accent-soft); } #view-einsatzplanung .personen-wahl .klein { margin-left: auto; } #view-einsatzplanung .telefon { border: 1px solid var(--border-strong); border-radius: 26px; background: var(--bg); padding: 14px; box-shadow: var(--shadow-pop); } #view-einsatzplanung .telefon-inhalt { display: grid; gap: 12px; } #view-einsatzplanung .gruss { font-family: var(--font-display); font-size: 20px; font-weight: 650; margin: 4px 4px 0; } #view-einsatzplanung .gruss-unter { margin: 0 4px; color: var(--text-3); font-size: 13px; } #view-einsatzplanung .heute-karte { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } #view-einsatzplanung .heute-kopf { padding: 12px 14px; border-bottom: 1px solid var(--border); display: grid; gap: 4px; } #view-einsatzplanung .heute-kopf .ober { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-3); letter-spacing: .05em; text-transform: uppercase; } #view-einsatzplanung .heute-kopf .titel { font-size: 16px; font-weight: 650; } #view-einsatzplanung .heute-kopf .meta { color: var(--text-2); font-size: 13px; } #view-einsatzplanung .aufgabe { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--grid); } #view-einsatzplanung .aufgabe:last-child { border-bottom: 0; } #view-einsatzplanung .aufgabe .was { font-weight: 650; font-size: 13.5px; } #view-einsatzplanung .aufgabe .wo { color: var(--text-3); font-size: 12.5px; grid-column: 1; } #view-einsatzplanung .aufgabe .knopf { grid-row: 1 / span 2; grid-column: 2; height: 34px; } #view-einsatzplanung .aufgabe .fertig { grid-row: 1 / span 2; grid-column: 2; display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; font-size: 12.5px; } #view-einsatzplanung .woche-liste { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; } #view-einsatzplanung .woche-tag { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: center; min-height: 40px; padding: 0 14px; border-bottom: 1px solid var(--grid); font-size: 13px; } #view-einsatzplanung .woche-tag:last-child { border-bottom: 0; } #view-einsatzplanung .woche-tag .tg { color: var(--text-3); font-weight: 650; font-size: 12.5px; } #view-einsatzplanung .woche-tag.heute .tg { color: var(--accent); } #view-einsatzplanung .woche-tag .ein { display: flex; align-items: center; gap: 8px; min-width: 0; } #view-einsatzplanung .woche-tag .ein span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .blatt-rahmen { overflow: auto; padding: 4px; } #view-einsatzplanung .blatt { width: 794px; max-width: none; margin: 0 auto; background: var(--sheet); color: var(--sheet-text); padding: 40px 44px; font-family: Arial, sans-serif; font-size: 12px; box-shadow: var(--shadow); color-scheme: light; } #view-einsatzplanung .blatt h3 { margin: 0 0 4px; font-size: 18px; } #view-einsatzplanung .blatt .kopfdaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 18px; margin: 12px 0 16px; padding: 10px 0; border-top: 1.5px solid var(--sheet-line); border-bottom: 1px solid var(--sheet-line); } #view-einsatzplanung .blatt .kopfdaten b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } #view-einsatzplanung .blatt table { width: 100%; border-collapse: collapse; } #view-einsatzplanung .blatt th, #view-einsatzplanung .blatt td { border: 1px solid var(--sheet-line); padding: 6px; text-align: left; vertical-align: top; } #view-einsatzplanung .blatt th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; background: #f0f0f0; color: var(--sheet-text); } #view-einsatzplanung .blatt .kaestchen { width: 12px; height: 12px; border: 1.2px solid var(--sheet-line); display: inline-block; } #view-einsatzplanung .blatt .unterschrift { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; margin-top: 36px; } #view-einsatzplanung .blatt .unterschrift div { border-top: 1px solid var(--sheet-line); padding-top: 4px; font-size: 10.5px; } #view-einsatzplanung .druck-hinweis { text-align: center; color: var(--text-3); font-size: 12.5px; margin: 10px 0 0; } #view-einsatzplanung .ep-toast { position: fixed; left: 50%; bottom: max(20px, env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 10px 14px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 13px; box-shadow: var(--shadow-pop); } #view-einsatzplanung .ep-toast button { border: 0; background: transparent; color: var(--accent-line); font-weight: 700; white-space: nowrap; } @media (max-width: 1180px) { #view-einsatzplanung .flaeche { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .leiste { position: static; max-height: none; } #view-einsatzplanung .leiste-liste { max-height: 520px; } } @media (max-width: 980px) { #view-einsatzplanung .meine { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .tz { grid-template-columns: 4px minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); } #view-einsatzplanung .tz .nur-breit { display: none; } } @media (max-width: 640px) { #view-einsatzplanung .raster .name-spalte { width: 150px; min-width: 150px; max-width: 150px; } #view-einsatzplanung .name-col { width: 150px; } #view-einsatzplanung .rolle { display: none; } #view-einsatzplanung .feld-reihe, #view-einsatzplanung .feld-reihe.drei { grid-template-columns: 1fr; } #view-einsatzplanung .eintragen .hinweis { display: none; } } @media (prefers-reduced-motion: no-preference) { #view-einsatzplanung .schublade { animation: ep-rein .18s ease-out; } @keyframes ep-rein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } } }/* v3: Zeitraum, Meilensteine, Ablaufplan */ #view-einsatzplanung .zeitraum-knopf { min-width: 200px; font-variant-numeric: tabular-nums; } #view-einsatzplanung .zeitraum-knopf svg { color: var(--text-3); } #view-einsatzplanung .pop { position: absolute; z-index: 46; width: 300px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-pop); } #view-einsatzplanung .pop .inhalt { padding: 12px 14px; display: grid; gap: 10px; } #view-einsatzplanung .pop .titel { font-weight: 650; font-size: 13.5px; } #view-einsatzplanung .pop .fuss2 { display: flex; gap: 8px; padding: 10px 14px 12px; border-top: 1px solid var(--border); } #view-einsatzplanung .pop .fuss2 .primaer { margin-left: auto; } #view-einsatzplanung .ms { position: absolute; top: 5px; display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 4px 0 0; border: 0; background: transparent; font-size: 11.5px; font-weight: 650; color: var(--warn); white-space: nowrap; cursor: pointer; z-index: 2; } #view-einsatzplanung .ms::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--warn); border-radius: 1px; flex: 0 0 auto; } #view-einsatzplanung .ms:hover { color: var(--text); } #view-einsatzplanung .ereignis-zelle { cursor: copy; } #view-einsatzplanung .ap-rahmen { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: auto; max-height: calc(100vh - 186px); min-height: 420px; } #view-einsatzplanung .ap { position: relative; width: max-content; min-width: 100%; --nb: 268px; user-select: none; } #view-einsatzplanung .ap-hg { position: absolute; top: 96px; bottom: 0; left: var(--nb); pointer-events: none; z-index: 0; } #view-einsatzplanung .ap-we { position: absolute; top: 0; bottom: 0; background: var(--we); } #view-einsatzplanung .ap-heute { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent-line); } #view-einsatzplanung .ap-mslinie { position: absolute; top: 0; bottom: 0; border-left: 1.5px dashed color-mix(in srgb, var(--warn) 55%, transparent); } #view-einsatzplanung .ap-head { position: sticky; top: 0; z-index: 5; background: var(--surface); } #view-einsatzplanung .ap-z { display: flex; position: relative; } #view-einsatzplanung .ap-n { position: sticky; left: 0; z-index: 3; flex: 0 0 var(--nb); width: var(--nb); background: var(--surface); border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--grid); display: flex; align-items: center; gap: 6px; min-width: 0; } #view-einsatzplanung .ap-t { position: relative; flex: 0 0 auto; border-bottom: 1px solid var(--grid); background-image: repeating-linear-gradient(90deg, transparent 0 calc(var(--tw) - 1px), var(--grid) calc(var(--tw) - 1px) var(--tw)); } #view-einsatzplanung .ap-head .ap-t { display: flex; background-image: none; } #view-einsatzplanung .ap-head .ap-n { z-index: 6; } #view-einsatzplanung .ap-kw { flex: 0 0 auto; height: 30px; display: flex; align-items: center; padding-left: 8px; font-size: 11.5px; font-weight: 700; color: var(--text-3); border-right: 1px solid var(--grid); white-space: nowrap; overflow: hidden; } #view-einsatzplanung .ap-tag { flex: 0 0 var(--tw); width: var(--tw); height: 38px; border-right: 1px solid var(--grid); display: flex; flex-direction: column; align-items: center; justify-content: center; } #view-einsatzplanung .ap-tag .wt { font-size: 11px; color: var(--text-3); font-weight: 600; } #view-einsatzplanung .ap-tag .dt { font-size: 13px; font-weight: 600; } #view-einsatzplanung .ap-tag.we { background: color-mix(in srgb, var(--surface) 93%, var(--text-3)); } #view-einsatzplanung .ap-tag.heute .wt, #view-einsatzplanung .ap-tag.heute .dt { color: var(--accent); } #view-einsatzplanung .ap-head .zeile3 .ap-n, #view-einsatzplanung .ap-head .zeile3 .ap-t { border-bottom: 1px solid var(--border-strong); } #view-einsatzplanung .ap-head .zeile2 .ap-n, #view-einsatzplanung .ap-head .zeile2 .ap-t { border-bottom: 1px solid var(--border); } #view-einsatzplanung .ms-spur { cursor: copy; } #view-einsatzplanung .ap-gr .ap-n { background: var(--surface-3); padding-left: 4px; padding-right: 6px; } #view-einsatzplanung .ap-gr .ap-t { background: var(--surface-3); background-image: none; } #view-einsatzplanung .ap-gr .gruppe-knopf { flex: 1; min-width: 0; } #view-einsatzplanung .ap-gr .gruppe-knopf span.nm { overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .ap-gr .symbol-knopf { width: 26px; height: 26px; flex: 0 0 auto; } #view-einsatzplanung .ap-zl .ap-n { padding: 0 8px 0 14px; } #view-einsatzplanung .zeile-knopf { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; border: 0; padding: 0; background: transparent; text-align: left; } #view-einsatzplanung .zeile-knopf .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 13px; } #view-einsatzplanung .zeile-knopf .mt { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-3); } #view-einsatzplanung .zeile-knopf:hover .nm { color: var(--accent); } #view-einsatzplanung .ap-zl .ap-t { cursor: crosshair; } #view-einsatzplanung .vb { position: absolute; height: 28px; display: flex; align-items: center; gap: 6px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 650; white-space: nowrap; overflow: hidden; cursor: grab; z-index: 1; } #view-einsatzplanung .vb .nm { overflow: hidden; text-overflow: ellipsis; min-width: 0; } #view-einsatzplanung .vb .mond { margin-left: 0; } #view-einsatzplanung .vb .bz { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; } #view-einsatzplanung .vb .bz.ok { background: var(--ok-soft); color: var(--ok); } #view-einsatzplanung .vb .bz.fehlt { background: var(--bad-soft); color: var(--bad); } #view-einsatzplanung .vb.gewaehlt { outline: 2px solid var(--accent); outline-offset: 1px; z-index: 2; } #view-einsatzplanung .vb .gl, #view-einsatzplanung .vb .gr { position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize; } #view-einsatzplanung .vb .gl { left: 0; } #view-einsatzplanung .vb .gr { right: 0; } #view-einsatzplanung .vb.zieht { cursor: grabbing; box-shadow: var(--shadow-pop); z-index: 3; } #view-einsatzplanung .geist { position: absolute; height: 28px; border-radius: 6px; border: 1.5px dashed var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); z-index: 1; pointer-events: none; } #view-einsatzplanung .mini { position: absolute; top: 11px; height: 10px; border-radius: 3px; } #view-einsatzplanung .ap-kap .ap-n { background: var(--surface-2); padding: 0 10px 0 14px; font-size: 12.5px; color: var(--text-2); font-weight: 600; } #view-einsatzplanung .ap-kap .ap-t { background: var(--surface-2); background-image: none; display: flex; } #view-einsatzplanung .ap-kap .kz { flex: 0 0 var(--tw); width: var(--tw); height: 34px; border-right: 1px solid var(--grid); } #view-einsatzplanung .ap-kap.erste .ap-n, #view-einsatzplanung .ap-kap.erste .ap-t { border-top: 1px solid var(--border-strong); } #view-einsatzplanung .ap-titelzeile .ap-n { background: var(--surface-2); padding-left: 14px; height: 30px; } #view-einsatzplanung .ap-titelzeile .ap-t { background: var(--surface-2); background-image: none; height: 30px; } #view-einsatzplanung .liste-zeile { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; width: 100%; padding: 9px 12px 9px 14px; border: 0; border-bottom: 1px solid var(--grid); background: transparent; text-align: left; } #view-einsatzplanung button.liste-zeile:hover { background: var(--surface-2); } #view-einsatzplanung .liste-zeile .titel { grid-column: 2; font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .liste-zeile .meta { grid-column: 2 / -1; color: var(--text-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .liste-zeile > .punkt, #view-einsatzplanung .liste-zeile > .raute { grid-row: 1 / span 2; } #view-einsatzplanung .liste-zeile .aktion { grid-column: 3; grid-row: 1; display: flex; gap: 6px; align-items: center; color: var(--text-3); } #view-einsatzplanung .liste-zeile .aktion svg { width: 14px; height: 14px; } #view-einsatzplanung .liste-zeile.fokus { background: var(--accent-soft); } #view-einsatzplanung .raute { width: 9px; height: 9px; transform: rotate(45deg); background: var(--warn); border-radius: 1px; } #view-einsatzplanung .fehlt-text { color: var(--bad); font-weight: 650; } #view-einsatzplanung .ok-text { color: var(--ok); font-weight: 650; } #view-einsatzplanung .vorschlag { height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12.5px; font-weight: 650; } #view-einsatzplanung .vorschlag:hover { border-color: var(--border-strong); background: var(--surface-2); } #view-einsatzplanung .insp { padding: 14px 16px 18px; display: grid; gap: 14px; overflow: auto; } #view-einsatzplanung .insp-name { width: 100%; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); font-family: var(--font-display); font-size: 16px; font-weight: 650; } #view-einsatzplanung .tagleiste { display: flex; flex-wrap: wrap; gap: 4px; } #view-einsatzplanung .tagchip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 40px; border-radius: 7px; font-size: 11px; font-weight: 650; } #view-einsatzplanung .tagchip b { font-size: 12px; } #view-einsatzplanung .tagchip.ok { background: var(--ok-soft); color: var(--ok); } #view-einsatzplanung .tagchip.fehlt { background: var(--bad-soft); color: var(--bad); } #view-einsatzplanung .knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; } #view-einsatzplanung .schritt-wahl { display: grid; border: 1px solid var(--border); border-radius: 10px; max-height: 260px; overflow-y: auto; } #view-einsatzplanung .schritt-wahl label { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; min-height: 32px; padding: 0 10px; border-bottom: 1px solid var(--grid); font-size: 12.5px; cursor: pointer; } #view-einsatzplanung .schritt-wahl label:last-child { border-bottom: 0; } #view-einsatzplanung .schritt-wahl label.fremd { color: var(--text-3); cursor: default; } #view-einsatzplanung .schritt-wahl .erl { color: var(--ok); font-weight: 700; font-size: 11.5px; } @media (max-width: 640px) { #view-einsatzplanung .ap { --nb: 170px; } #view-einsatzplanung .zeile-knopf .mt { display: none; } }/* v4: Arbeitspakete am Vorgang */ #view-einsatzplanung .pakete { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } #view-einsatzplanung .paket-zeile { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 2px 8px; align-items: center; padding: 8px 6px 8px 10px; border-bottom: 1px solid var(--grid); } #view-einsatzplanung .paket-zeile:last-child { border-bottom: 0; } #view-einsatzplanung .paket-zeile > .punkt, #view-einsatzplanung .paket-zeile > .haken { grid-row: 1 / span 2; justify-self: center; } #view-einsatzplanung .pz-titel { grid-column: 2; font-weight: 650; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .pz-meta { grid-column: 2; font-size: 12px; color: var(--text-3); } #view-einsatzplanung .pz-aktion { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 2px; align-items: center; } #view-einsatzplanung .pz-elemente { grid-column: 2 / -1; display: grid; gap: 2px; padding-top: 6px; } #view-einsatzplanung .pz-el { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 12.5px; } #view-einsatzplanung .pz-el .haken { width: 16px; height: 16px; flex: 0 0 auto; } #view-einsatzplanung .pz-el .klein { margin-left: auto; } #view-einsatzplanung .chipwahl { display: flex; flex-wrap: wrap; gap: 6px; } #view-einsatzplanung .chipwahl button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; } #view-einsatzplanung .chipwahl button:hover { border-color: var(--border-strong); } #view-einsatzplanung .chipwahl button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung .chipwahl .anz { font-weight: 700; color: var(--text-3); } #view-einsatzplanung .chipwahl button[aria-pressed="true"] .anz { color: var(--accent); } #view-einsatzplanung .el-wahl { display: grid; border: 1px solid var(--border); border-radius: 10px; max-height: 300px; overflow-y: auto; } #view-einsatzplanung .el-wahl label { display: grid; grid-template-columns: 18px minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 10px; align-items: center; min-height: 36px; padding: 0 12px; border-bottom: 1px solid var(--grid); font-size: 13px; cursor: pointer; } #view-einsatzplanung .el-wahl label:last-child { border-bottom: 0; } #view-einsatzplanung .el-wahl label.aus { color: var(--text-3); cursor: default; } #view-einsatzplanung .tagchip.mehr { background: var(--accent-soft); color: var(--accent); }/* v5: Meine Aufgaben über die volle Breite */ #view-einsatzplanung .meine2 { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; } #view-einsatzplanung .mh { display: grid; gap: 14px; min-width: 0; } #view-einsatzplanung .mh-gruss { display: grid; gap: 2px; } #view-einsatzplanung .mh-gruss h2 { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 650; } #view-einsatzplanung .mh-gruss span { color: var(--text-3); font-size: 13px; } #view-einsatzplanung .mh-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; } #view-einsatzplanung .mh-karte { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } #view-einsatzplanung .mh-kopf { display: grid; gap: 6px; padding: 16px 18px; border-bottom: 1px solid var(--border); } #view-einsatzplanung .mh-ober { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .mh-kopf h3 { margin: 0; font-family: var(--font-display); font-size: 18px; font-weight: 650; text-wrap: balance; } #view-einsatzplanung .mh-meta { color: var(--text-2); font-size: 13px; } #view-einsatzplanung .mh-fortschritt { display: flex; align-items: center; gap: 12px; margin-top: 4px; font-size: 13px; } #view-einsatzplanung .mh-fortschritt .balken { flex: 0 1 360px; height: 8px; } #view-einsatzplanung .mh-paket { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 18px; background: var(--surface-2); border-bottom: 1px solid var(--border); font-size: 12.5px; font-weight: 700; color: var(--text-2); } #view-einsatzplanung .mh-paket .anz { margin-left: auto; color: var(--text-3); font-weight: 650; } #view-einsatzplanung .mh-zeile { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .9fr) 244px 30px; gap: 12px; align-items: center; min-height: 50px; padding: 0 18px; border-bottom: 1px solid var(--grid); font-size: 13.5px; } #view-einsatzplanung .mh-zeile:last-child { border-bottom: 0; } #view-einsatzplanung .mh-zeile .el { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .mh-zeile .arbeit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .mh-zeile .km { color: var(--text-3); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .mh-zeile .aktion { display: flex; align-items: center; justify-content: flex-end; gap: 8px; } #view-einsatzplanung .mh-zeile .aktion .knopf { height: 34px; } #view-einsatzplanung .mh-zeile .fertig { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); font-weight: 700; font-size: 12.5px; } #view-einsatzplanung .mh-zeile.erledigt .el, #view-einsatzplanung .mh-zeile.erledigt .arbeit { color: var(--text-3); } #view-einsatzplanung .mh-zeile .el.breit { grid-column: 1 / span 3; white-space: normal; } #view-einsatzplanung .zurueck-knopf { height: 30px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; } #view-einsatzplanung .zurueck-knopf:hover { border-color: var(--border-strong); color: var(--text); } #view-einsatzplanung .mh-seite { min-width: 0; } #view-einsatzplanung .mh-seite .woche-tag .ein span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 1180px) { #view-einsatzplanung .mh-raster { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 760px) { #view-einsatzplanung .meine2 { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .mh-zeile { grid-template-columns: minmax(0, 1fr) auto 30px; gap: 2px 10px; padding: 8px 10px 8px 14px; } #view-einsatzplanung .mh-zeile > .oeffnen-knopf, #view-einsatzplanung .mh-zeile > span:last-child { grid-column: 3; grid-row: 1 / span 2; } #view-einsatzplanung .mh-zeile .el, #view-einsatzplanung .mh-zeile .el.breit { grid-column: 1; grid-row: 1 / span 2; } #view-einsatzplanung .mh-zeile .el:not(.breit) { grid-row: auto; } #view-einsatzplanung .mh-zeile .arbeit { grid-column: 1; font-size: 12.5px; color: var(--text-2); } #view-einsatzplanung .mh-zeile .km { display: none; } #view-einsatzplanung .mh-zeile .aktion { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 4px; } }/* v5b: Element öffnen */ #view-einsatzplanung .mh-zeile.klickbar { cursor: pointer; } #view-einsatzplanung .mh-zeile.klickbar:hover { background: var(--surface-2); } #view-einsatzplanung .mh-zeile.klickbar:hover .el { color: var(--accent); } #view-einsatzplanung .oeffnen-knopf { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; color: var(--text-3); } #view-einsatzplanung .oeffnen-knopf:hover { background: var(--surface-3); color: var(--accent); } #view-einsatzplanung .oeffnen-knopf svg { width: 16px; height: 16px; } #view-einsatzplanung button.pz-el { width: 100%; border: 0; background: transparent; padding: 0 4px; border-radius: 6px; text-align: left; color: inherit; font: inherit; font-size: 12.5px; cursor: pointer; } #view-einsatzplanung button.pz-el:hover { background: var(--surface-2); color: var(--accent); } #view-einsatzplanung .el-feld { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; min-height: 52px; padding: 8px 14px; border-bottom: 1px solid var(--grid); } #view-einsatzplanung .el-feld:last-child { border-bottom: 0; } #view-einsatzplanung .el-feld.ziel { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); } #view-einsatzplanung .el-feld-name { display: grid; gap: 2px; font-weight: 650; font-size: 13.5px; min-width: 0; } #view-einsatzplanung .foto-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } #view-einsatzplanung .foto { display: grid; place-items: center; gap: 4px; aspect-ratio: 4 / 3; max-width: 100%; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-3); color: var(--text-3); font-size: 11.5px; text-align: center; } #view-einsatzplanung .foto svg { width: 28px; height: 28px; } #view-einsatzplanung .foto.neu { border-style: dashed; background: var(--surface); color: var(--accent); font-weight: 650; cursor: pointer; } #view-einsatzplanung .foto.neu:hover { background: var(--accent-soft); } #view-einsatzplanung .bemerkung { display: grid; gap: 2px; padding: 10px 12px; margin-bottom: 6px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 13px; } #view-einsatzplanung .feld textarea { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); font: inherit; resize: vertical; }/* v6: Raster füllt die Breite */ #view-einsatzplanung .raster-rahmen, #view-einsatzplanung .ap-rahmen { scrollbar-gutter: stable; } #view-einsatzplanung .raster .name-spalte { width: var(--nb, 232px); min-width: var(--nb, 232px); max-width: var(--nb, 232px); } #view-einsatzplanung .raster .name-col { width: var(--nb, 232px); } #view-einsatzplanung .raster td.zelle { overflow: hidden; }/* v6: Vorlagen für Bereiche */ #view-einsatzplanung .vl-label-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } #view-einsatzplanung .link-knopf { border: 0; background: none; padding: 0; color: var(--accent-line); font: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; } #view-einsatzplanung .link-knopf:hover { text-decoration: underline; } #view-einsatzplanung .vl-vorschau { border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); padding: 4px 0; max-height: 200px; overflow: auto; } #view-einsatzplanung .vl-vorschau.leer { padding: 10px 12px; font-size: 12.5px; color: var(--text-3); } #view-einsatzplanung .vl-vz { display: flex; align-items: center; gap: 8px; min-height: 26px; padding: 3px 10px; font-size: 12.5px; } #view-einsatzplanung .vz-punkt { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; } #view-einsatzplanung .vz-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--text); } #view-einsatzplanung .vz-meta { font-size: 11.5px; color: var(--text-3); white-space: nowrap; } #view-einsatzplanung .vl-als-knopf { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px 9px 12px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface-2); color: var(--text); text-align: left; font: inherit; cursor: pointer; } #view-einsatzplanung .vl-als-knopf:hover { border-color: var(--accent); } #view-einsatzplanung .vl-als-knopf > span { flex: 1; display: grid; gap: 1px; min-width: 0; font-size: 13px; } #view-einsatzplanung .vl-als-knopf svg { flex: 0 0 auto; width: 16px; height: 16px; color: var(--text-3); } #view-einsatzplanung .vl-layout { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 20px; align-items: start; } #view-einsatzplanung .vl-spalte { display: grid; gap: 10px; align-content: start; } #view-einsatzplanung .vl-spalte > .knopf { justify-self: start; } #view-einsatzplanung .vl-liste { display: grid; gap: 6px; } #view-einsatzplanung .vl-eintrag { display: grid; gap: 3px; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); text-align: left; font: inherit; cursor: pointer; } #view-einsatzplanung .vl-eintrag:hover { border-color: var(--border-strong); } #view-einsatzplanung .vl-eintrag[aria-current="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); } #view-einsatzplanung .vl-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; } #view-einsatzplanung .vl-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 700; } #view-einsatzplanung .vl-std { flex: 0 0 auto; padding: 1px 7px; border: 1px solid currentColor; border-radius: 999px; color: var(--accent-line); font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } #view-einsatzplanung .vl-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-3); } #view-einsatzplanung .vl-editor { display: grid; gap: 12px; min-width: 0; } #view-einsatzplanung .vl-ed-kopf { display: flex; align-items: flex-end; gap: 16px; } #view-einsatzplanung .vl-std-schalter { display: flex; align-items: center; gap: 8px; height: 36px; font-size: 12.5px; white-space: nowrap; color: var(--text-2); } #view-einsatzplanung .vl-zeile { grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, .9fr) 60px 98px; } #view-einsatzplanung .lz input[type="number"] { height: 30px; padding: 0 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); width: 100%; min-width: 0; } #view-einsatzplanung .vz-akt { display: flex; gap: 4px; justify-content: flex-end; } #view-einsatzplanung .vl-fuss-links { display: flex; gap: 8px; } @media (max-width: 760px) { #view-einsatzplanung .vl-layout { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .vl-ed-kopf { flex-direction: column; align-items: stretch; gap: 6px; } #view-einsatzplanung .vl-zeile { grid-template-columns: minmax(0, 1fr) 48px auto; grid-template-areas: "n n n" "q q q" "g b a"; gap: 6px 8px; padding-top: 8px; padding-bottom: 8px; } #view-einsatzplanung .vl-zeile .vz-akt { gap: 2px; } #view-einsatzplanung .vl-zeile .vz-akt .symbol-knopf { width: 28px; } #view-einsatzplanung .vl-zeile .vz-n { grid-area: n; } #view-einsatzplanung .vl-zeile .vz-q { grid-area: q; } #view-einsatzplanung .vl-zeile .vz-g { grid-area: g; } #view-einsatzplanung .vl-zeile .vz-b { grid-area: b; } #view-einsatzplanung .vl-zeile .vz-akt { grid-area: a; } #view-einsatzplanung .lz.kopf.vl-zeile { display: none; } #view-einsatzplanung .vl-fuss-links .knopf { padding: 0 10px; } }/* v7: Meilensteinfarbe – gewählte Farbe exakt, ohne Wahl das Standard-Orange */ #view-einsatzplanung .ms { color: var(--ms, var(--warn)); } #view-einsatzplanung .ms::before, #view-einsatzplanung .raute { background: var(--ms, var(--warn)); } #view-einsatzplanung .ap-mslinie { border-left-color: color-mix(in srgb, var(--ms, var(--warn)) 55%, transparent); } #view-einsatzplanung .ms-farben { gap: 7px; min-height: 30px; } #view-einsatzplanung .ms-farben .farbe-wahl { width: 24px; height: 24px; padding: 0; cursor: pointer; } #view-einsatzplanung .farbe-wahl.ms-standard { background: var(--warn); } #view-einsatzplanung .farbe-eigen { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--border); background: conic-gradient(#e5484d, #f2b24c, #12a150, #0ea5b7, #3b82f6, #8b5cf6, #e0428f, #e5484d); cursor: pointer; overflow: hidden; } #view-einsatzplanung .farbe-eigen.an { background: var(--eigen); box-shadow: 0 0 0 2px var(--accent); } #view-einsatzplanung .farbe-eigen input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; padding: 0; } #view-einsatzplanung .ms.ms-vorschau { position: static; height: auto; padding: 0; cursor: default; justify-self: start; pointer-events: none; }/* v8: Tagesansicht mit Arbeitspaketen */ #view-einsatzplanung .tag-detail.mit-paketen { position: relative; inset: auto; flex-wrap: wrap; row-gap: 7px; padding: 7px 8px; -webkit-mask-image: none; mask-image: none; } #view-einsatzplanung .tag-detail.mit-paketen .pk-leiste { flex: 1 1 100%; padding-left: 0; } #view-einsatzplanung .tag-detail button.marke { border: 0; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; } #view-einsatzplanung .tag-detail button.marke:hover { box-shadow: 0 0 0 1.5px currentColor inset; } #view-einsatzplanung .marke-pfeil { display: inline-flex; opacity: .65; } #view-einsatzplanung .marke-pfeil svg { width: 13px; height: 13px; } #view-einsatzplanung .mini-fortschritt { flex: 0 0 48px; height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } #view-einsatzplanung .mini-fortschritt i { display: block; height: 100%; border-radius: inherit; background: var(--ok); } #view-einsatzplanung .pk-leiste { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px; overflow: hidden; padding-left: 4px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); } #view-einsatzplanung .pk-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px 0 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font: inherit; font-size: 11.5px; font-weight: 650; white-space: nowrap; } #view-einsatzplanung button.pk-chip { cursor: pointer; } #view-einsatzplanung button.pk-chip:hover { border-color: var(--accent); background: var(--accent-soft); } #view-einsatzplanung .pk-chip.fertig { color: var(--text-3); background: transparent; } #view-einsatzplanung .pk-zahl { color: var(--text-3); font-weight: 700; } #view-einsatzplanung .pk-chip:not(.fertig) .pk-zahl { color: var(--warn); } #view-einsatzplanung .pk-punkt { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1px var(--border-strong); } #view-einsatzplanung .pk-punkt.gross { width: 12px; height: 12px; } #view-einsatzplanung .pk-frei { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--text-3); display: inline-flex; align-items: center; justify-content: center; color: transparent; } #view-einsatzplanung .pk-frei svg { width: 9px; height: 9px; } #view-einsatzplanung .pk-frei.ja { background: var(--ok); border-color: var(--ok); color: #fff; } #view-einsatzplanung .vb-pakete { flex: 0 1000 auto; display: flex; align-items: center; gap: 5px; min-width: 0; margin-left: 8px; overflow: hidden; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent); } #view-einsatzplanung .vb-pakete .pk-chip { height: 20px; padding: 0 8px 0 6px; font-size: 11px; background: color-mix(in srgb, var(--surface) 72%, transparent); border-color: transparent; } #view-einsatzplanung .eintrag-karte .ta-oeffnen { width: 100%; } #view-einsatzplanung .ta-zurueck { justify-self: start; margin-bottom: 2px; } #view-einsatzplanung .schublade.ta .schublade-inhalt { flex: 1 1 auto; min-height: 0; align-content: start; } #view-einsatzplanung .ta-h2 { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 20px; font-weight: 650; line-height: 1.25; } #view-einsatzplanung .ta-h2 svg { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; } #view-einsatzplanung .ta-h2 .pk-punkt { align-self: flex-start; margin-top: 7px; } #view-einsatzplanung .ta-stand { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-2); } #view-einsatzplanung .ta-stand b { color: var(--text); } #view-einsatzplanung .ta-balken { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } #view-einsatzplanung .ta-balken i { display: block; height: 100%; border-radius: inherit; background: var(--ok); } #view-einsatzplanung .ta-balken.klein { flex: 0 0 64px; height: 6px; } #view-einsatzplanung .ta-trupp { display: flex; flex-wrap: wrap; gap: 8px; } #view-einsatzplanung .ta-person { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 4px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; } #view-einsatzplanung .ta-person svg { width: 14px; height: 14px; color: var(--text-3); } #view-einsatzplanung .ta-abschnitt-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 30px; margin-bottom: 10px; } #view-einsatzplanung .ta-pakete { display: grid; gap: 10px; } #view-einsatzplanung .ta-paket { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; } #view-einsatzplanung .ta-paket.fokus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); } #view-einsatzplanung .ta-paket-kopf { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; background: var(--surface-2); } #view-einsatzplanung .ta-titel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13.5px; font-weight: 700; } #view-einsatzplanung .ta-meta { flex: 0 0 auto; font-size: 12px; color: var(--text-3); white-space: nowrap; } #view-einsatzplanung .ta-liste { display: grid; } #view-einsatzplanung .ta-todo { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 16px; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 7px 14px; border: 0; border-top: 1px solid var(--grid); background: var(--surface); color: var(--text); font: inherit; text-align: left; } #view-einsatzplanung .ta-todo.frei { grid-template-columns: 20px minmax(0, 1fr); } #view-einsatzplanung .ta-todo.frei.als-kopf { border-top: 0; min-height: 52px; } #view-einsatzplanung .ta-todo.element { cursor: pointer; } #view-einsatzplanung .ta-todo.element:hover { background: var(--surface-2); } #view-einsatzplanung .ta-todo.element:hover .ta-pfeil { color: var(--accent); } #view-einsatzplanung .ta-todo .haken { width: 20px; height: 20px; } #view-einsatzplanung button.haken { padding: 0; cursor: pointer; } #view-einsatzplanung button.haken:not(.ja) { background: transparent; } #view-einsatzplanung button.haken:not(.ja):hover { border-color: var(--ok); color: var(--ok); } #view-einsatzplanung .ta-zwei { display: grid; gap: 2px; min-width: 0; } #view-einsatzplanung .ta-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; } #view-einsatzplanung .ta-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--text-3); } #view-einsatzplanung .ta-todo.erledigt .ta-text { color: var(--text-3); } #view-einsatzplanung .ta-badges { display: flex; gap: 6px; } #view-einsatzplanung .ta-badge { padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 700; white-space: nowrap; } #view-einsatzplanung .ta-badge.bem { background: var(--warn-soft); color: var(--warn); } #view-einsatzplanung .ta-pfeil { display: inline-flex; color: var(--text-3); } #view-einsatzplanung .ta-pfeil svg { width: 15px; height: 15px; } #view-einsatzplanung .ta-fertig { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 40px; padding: 0 14px; border-top: 1px solid var(--grid); font-size: 12.5px; font-weight: 650; color: var(--ok); } #view-einsatzplanung .ta-fertig svg { width: 14px; height: 14px; } #view-einsatzplanung .ta-fuss { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--border); background: var(--surface); } @media (max-width: 640px) { #view-einsatzplanung .ta-todo { grid-template-columns: 20px minmax(0, 1fr) 16px; row-gap: 6px; } #view-einsatzplanung .ta-badges:empty { display: none; } #view-einsatzplanung .ta-paket-kopf { flex-wrap: wrap; row-gap: 2px; padding: 9px 14px; } #view-einsatzplanung .ta-paket-kopf .ta-meta { flex-basis: 100%; padding-left: 19px; } #view-einsatzplanung .ta-todo .ta-badges { grid-column: 2; grid-row: 2; } #view-einsatzplanung .ta-todo .ta-pfeil { grid-column: 3; grid-row: 1; } #view-einsatzplanung .ta-balken.klein { display: none; } #view-einsatzplanung .ta-fuss .knopf { flex: 1 1 0; padding: 0 8px; } }/* v9: Screenshots als Foto */ #view-einsatzplanung .foto-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } #view-einsatzplanung .foto-kopf kbd { display: inline-block; min-width: 20px; padding: 0 5px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); font: inherit; font-size: 11px; font-weight: 700; text-align: center; color: var(--text-2); } #view-einsatzplanung .foto-raster { border-radius: 10px; transition: box-shadow .12s, background .12s; } #view-einsatzplanung .foto-raster.ziel { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px var(--accent-soft); } #view-einsatzplanung .foto.bild { position: relative; display: block; padding: 0; overflow: hidden; background: #000; cursor: zoom-in; } #view-einsatzplanung .foto.bild img { display: block; width: 100%; height: 100%; object-fit: cover; } #view-einsatzplanung .foto-unter { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; font-size: 11px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .foto.bild:hover { box-shadow: 0 0 0 2px var(--accent); } #view-einsatzplanung .foto.neu-da { animation: ep-foto-neu 1.6s ease-out; } @keyframes ep-foto-neu { 0%, 40% { box-shadow: 0 0 0 3px var(--ok); } 100% { box-shadow: 0 0 0 0 transparent; } } #view-einsatzplanung .foto.einfuegen { position: relative; grid-template-rows: auto auto auto; align-content: center; } #view-einsatzplanung .foto.einfuegen input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } #view-einsatzplanung .foto-tipp { font-size: 10.5px; font-weight: 600; color: var(--text-3); } #view-einsatzplanung .foto-gross { display: block; max-width: 100%; max-height: calc(100vh - 220px); margin: 0 auto; border-radius: 8px; } #view-einsatzplanung .nur-touch { display: none; } @media (hover: none) and (pointer: coarse) { #view-einsatzplanung .nur-maus { display: none; } #view-einsatzplanung .nur-touch { display: inline; } }/* v10: Nacht, Schicht-Bilder, Fotos je Gruppe */ #view-einsatzplanung .nacht-badge { display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; height: 18px; padding: 0 8px 0 4px; border-radius: 999px; background: #1e1b4b; color: #e0e7ff; box-shadow: 0 0 0 1px #6366f1; font-size: 10.5px; font-weight: 800; letter-spacing: .02em; line-height: 1; white-space: nowrap; vertical-align: middle; } #view-einsatzplanung .nacht-badge svg { flex: 0 0 auto; width: 13px; height: 13px; } #view-einsatzplanung .nacht-badge.kompakt { width: 18px; padding: 0; justify-content: center; } #view-einsatzplanung .nacht-badge.kompakt svg { width: 12px; height: 12px; } #view-einsatzplanung .eintrag .nacht-badge { margin-left: auto; } #view-einsatzplanung .ta-h2 .nacht-badge { height: 22px; font-size: 12px; padding: 0 10px 0 5px; } #view-einsatzplanung .ta-h2 .nacht-badge svg { width: 15px; height: 15px; color: inherit; } #view-einsatzplanung .schicht-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #view-einsatzplanung .schicht-karte { display: grid; gap: 5px; padding: 5px 5px 6px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 650; text-align: center; cursor: pointer; } #view-einsatzplanung .schicht-karte svg { display: block; width: 100%; height: auto; border-radius: 6px; opacity: .6; transition: opacity .12s; } #view-einsatzplanung .schicht-karte:hover { border-color: var(--border-strong); } #view-einsatzplanung .schicht-karte:hover svg { opacity: .85; } #view-einsatzplanung .schicht-karte[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung .schicht-karte[aria-checked="true"] svg { opacity: 1; } #view-einsatzplanung .foto-zoom { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } #view-einsatzplanung .foto-zoom img { display: block; width: 100%; height: 100%; object-fit: cover; } #view-einsatzplanung .foto { position: relative; } #view-einsatzplanung .foto-weg { position: absolute; top: 6px; right: 6px; z-index: 2; width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: rgba(15, 23, 42, .72); color: #fff; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s; } #view-einsatzplanung .foto-weg svg { width: 13px; height: 13px; } #view-einsatzplanung .foto:hover .foto-weg, #view-einsatzplanung .foto-weg:focus-visible { opacity: 1; } #view-einsatzplanung .foto-weg:hover { background: var(--bad); } @media (hover: none) { #view-einsatzplanung .foto-weg { opacity: 1; } } #view-einsatzplanung .foto-hinweis { display: flex; gap: 6px; align-items: flex-start; margin: 10px 0 0; } #view-einsatzplanung .foto-hinweis svg { flex: 0 0 auto; width: 14px; height: 14px; margin-top: 1px; } #view-einsatzplanung .chipwahl .foto-anz { display: inline-flex; align-items: center; gap: 3px; margin-left: 2px; } #view-einsatzplanung .chipwahl .foto-anz svg { width: 12px; height: 12px; }/* v11: Vorschlag ansehen und auswählen */ #view-einsatzplanung .vs { display: grid; gap: 12px; min-width: 0; } #view-einsatzplanung .vs-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #view-einsatzplanung .vs-kopf b { color: var(--text); } #view-einsatzplanung .vs-andere { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); white-space: nowrap; } #view-einsatzplanung .vs-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--text-3); } #view-einsatzplanung .vs-legende > span { display: inline-flex; align-items: center; gap: 7px; } #view-einsatzplanung .vs-rahmen { overflow: auto; max-height: min(56vh, 560px); border: 1px solid var(--border); border-radius: 10px; } #view-einsatzplanung .vs-tabelle { border-collapse: separate; border-spacing: 0; width: 100%; min-width: max-content; font-size: 12.5px; } #view-einsatzplanung .vs-tabelle th, #view-einsatzplanung .vs-tabelle td { border-bottom: 1px solid var(--grid); } #view-einsatzplanung .vs-tabelle thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); } #view-einsatzplanung .vs-tabelle thead tr:nth-child(2) th { top: 44px; border-bottom-color: var(--border-strong); } #view-einsatzplanung .vs-name { position: sticky; left: 0; z-index: 1; min-width: 210px; width: 210px; padding: 0 10px; background: var(--surface); border-right: 1px solid var(--border-strong); text-align: left; font-weight: 600; } #view-einsatzplanung .vs-tabelle thead .vs-name { z-index: 3; background: var(--surface-2); } #view-einsatzplanung .vs-ecke { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .vs-ecke.klein { text-transform: none; letter-spacing: 0; font-weight: 600; } #view-einsatzplanung .vs-tag { min-width: 72px; height: 44px; padding: 0 6px; text-align: center; font-weight: 600; color: var(--text-3); } #view-einsatzplanung .vs-tag span { display: block; font-size: 11px; } #view-einsatzplanung .vs-tag b { display: block; font-size: 12.5px; color: var(--text); } #view-einsatzplanung .vs-tag.heute b { color: var(--accent); } #view-einsatzplanung .vs-bedarf { height: 30px; text-align: center; font-size: 12px; font-weight: 800; } #view-einsatzplanung .vs-bedarf.ok { color: var(--ok); } #view-einsatzplanung .vs-bedarf.fehlt { color: var(--bad); } #view-einsatzplanung .vs-bedarf.mehr { color: var(--warn); } #view-einsatzplanung .vs-gruppe th { position: sticky; left: 0; height: 30px; padding: 0 12px; background: var(--surface-2); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .vs-person { display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: center; width: 100%; min-height: 44px; padding: 4px 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; } #view-einsatzplanung .vs-person:disabled { cursor: default; opacity: .6; } #view-einsatzplanung .vs-person .avatar { grid-row: 1 / span 2; } #view-einsatzplanung .vs-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; } #view-einsatzplanung .vs-frei { font-size: 11.5px; font-weight: 500; color: var(--text-3); } #view-einsatzplanung .vs-person:not(:disabled):hover .vs-pn { color: var(--accent); } #view-einsatzplanung .vs-z { height: 44px; padding: 0 4px; text-align: center; } #view-einsatzplanung .vs-wahl, #view-einsatzplanung .vs-dabei { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 8px; vertical-align: middle; } #view-einsatzplanung .vs-wahl { border: 1.5px dashed var(--border-strong); background: transparent; color: transparent; cursor: pointer; } #view-einsatzplanung .vs-wahl:hover { border-color: var(--accent); color: color-mix(in srgb, var(--accent) 45%, transparent); } #view-einsatzplanung .vs-wahl.an { border: 1.5px solid var(--accent); background: var(--accent); color: var(--on-accent); } #view-einsatzplanung .vs-wahl svg, #view-einsatzplanung .vs-dabei svg { width: 14px; height: 14px; } #view-einsatzplanung .vs-dabei { border: 0; } #view-einsatzplanung .vs-belegt { display: inline-block; max-width: 68px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 6px; border-radius: 6px; background: var(--surface-3); color: var(--text-3); font-size: 10.5px; font-weight: 700; vertical-align: middle; opacity: .85; } #view-einsatzplanung .vs-belegt.art { min-width: 28px; } #view-einsatzplanung .vs-wahl.mini, #view-einsatzplanung .vs-dabei.mini { width: 18px; height: 18px; border-radius: 5px; } #view-einsatzplanung .vs-wahl.mini svg, #view-einsatzplanung .vs-dabei.mini svg { width: 10px; height: 10px; } #view-einsatzplanung .vs-belegt.mini { padding: 1px 6px; font-size: 10px; } #view-einsatzplanung .vs-summe { font-size: 13px; color: var(--text-2); align-self: center; } @media (max-width: 640px) { #view-einsatzplanung .vs-name { min-width: 150px; width: 150px; } #view-einsatzplanung .vs-frei { display: none; } #view-einsatzplanung .vs-person { grid-template-rows: auto; } #view-einsatzplanung .vs-person .avatar { grid-row: auto; } #view-einsatzplanung .vs-tag { min-width: 56px; } #view-einsatzplanung .vs-fuss { flex-wrap: wrap; } #view-einsatzplanung .vs-summe { flex: 1 1 100%; } } #view-einsatzplanung .mehr-text { color: var(--warn); font-weight: 650; } #view-einsatzplanung .vs-legende .mini { position: static; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } #view-einsatzplanung .vs-legende .vs-belegt.mini { display: inline-block; height: auto; border-radius: 5px; }/* v12: Bedarf je Tag */ #view-einsatzplanung button.tagchip { position: relative; padding: 0; border: 0; font: inherit; font-size: 11px; font-weight: 650; cursor: pointer; } #view-einsatzplanung button.tagchip:hover { box-shadow: inset 0 0 0 1.5px currentColor; } #view-einsatzplanung button.tagchip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } #view-einsatzplanung .tagchip.eigen::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } #view-einsatzplanung .tagchip.frei { background: var(--surface-3); color: var(--text-3); } #view-einsatzplanung .tag-hinweis { margin: 8px 0 0; } #view-einsatzplanung .eigen-legende { font-size: 9px; vertical-align: 1px; } #view-einsatzplanung .tb-stepper { display: flex; align-items: center; gap: 10px; } #view-einsatzplanung .tb-stepper .knopf { width: 40px; padding: 0; font-size: 18px; font-weight: 600; } #view-einsatzplanung .tb-zahl { min-width: 40px; text-align: center; font-size: 24px; font-weight: 700; color: var(--text); } #view-einsatzplanung .tb-einheit { font-size: 13px; color: var(--text-3); } #view-einsatzplanung .vs-bedarf.eigen span { text-decoration: underline dotted; text-underline-offset: 3px; } #view-einsatzplanung .farb-feld { grid-template-rows: auto 1fr; } #view-einsatzplanung .farb-feld .farben { align-content: center; }/* v13: Median und Rückfrage */ #view-einsatzplanung .bes-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; } #view-einsatzplanung .bes-zahlen { font-size: 12px; font-weight: 600; color: var(--text-2); white-space: nowrap; } #view-einsatzplanung .bf-wahl { display: grid; gap: 8px; } #view-einsatzplanung .bf-wahl .knopf { height: auto; min-height: 48px; padding: 8px 12px; display: grid; justify-content: stretch; justify-items: start; gap: 2px; text-align: left; } #view-einsatzplanung .bf-wahl .knopf b { font-size: 13px; color: var(--text); } #view-einsatzplanung .bf-wahl .knopf span { font-size: 12px; font-weight: 500; color: var(--text-3); } #view-einsatzplanung .bf-wahl .knopf:hover, #view-einsatzplanung .bf-wahl .knopf:focus-visible { border-color: var(--accent); background: var(--accent-soft); }/* v14: Export */ #view-einsatzplanung .ex { display: grid; gap: 16px; } #view-einsatzplanung .ex .abschnitt-titel { margin-bottom: 8px; } #view-einsatzplanung .ex-formate { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #view-einsatzplanung .ex-karte, #view-einsatzplanung .ex-fest { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; text-align: left; } #view-einsatzplanung .ex-karte { cursor: pointer; } #view-einsatzplanung .ex-karte:hover { border-color: var(--border-strong); } #view-einsatzplanung .ex-karte[aria-checked="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); } #view-einsatzplanung .ex-symbol { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .03em; } #view-einsatzplanung .ex-symbol.excel { background: #107c41; } #view-einsatzplanung .ex-symbol.project { background: #31752f; box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .14); } #view-einsatzplanung .ex-text { display: grid; gap: 3px; min-width: 0; } #view-einsatzplanung .ex-text b { font-size: 14px; } #view-einsatzplanung .ex-text span { font-size: 12.5px; color: var(--text-3); line-height: 1.4; } #view-einsatzplanung .ex-zeitraum { display: grid; gap: 8px; } #view-einsatzplanung .ex-option, #view-einsatzplanung .ex-schalter { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; } #view-einsatzplanung .ex-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); } #view-einsatzplanung .ex-option input, #view-einsatzplanung .ex-schalter input { margin-top: 3px; accent-color: var(--accent); } #view-einsatzplanung .ex-option > span, #view-einsatzplanung .ex-schalter > span { display: grid; gap: 2px; } #view-einsatzplanung .ex-option b, #view-einsatzplanung .ex-schalter b { font-size: 13px; } #view-einsatzplanung .ex-option span span, #view-einsatzplanung .ex-schalter span span { font-size: 12.5px; color: var(--text-3); } #view-einsatzplanung .ex-hinweis { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--surface-2); } #view-einsatzplanung .ex-hinweis svg { flex: 0 0 auto; width: 15px; height: 15px; margin-top: 1px; } #view-einsatzplanung .ex-lader { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ep-ex-dreh .7s linear infinite; } @keyframes ep-ex-dreh { to { transform: rotate(360deg); } } @media (max-width: 640px) { #view-einsatzplanung .ex-formate { grid-template-columns: 1fr; } } /* ---------- App-Einbindung ---------- */ /* Ebenen über der App (App-Kopf liegt bei 60, App-Meldungen bei 1400) */ #view-einsatzplanung .schleier { z-index: 1210; } #view-einsatzplanung .dialog-schleier { z-index: 1220; } #view-einsatzplanung .pop, #view-einsatzplanung .chip-editor { position: fixed; z-index: 1230; } #view-einsatzplanung .ep-toast { z-index: 1300; } #view-einsatzplanung .menue { z-index: 70; } /* Dialoge: Kopf und Fuß bleiben stehen, nur der Inhalt blättert */ #view-einsatzplanung .dialog { display: flex; flex-direction: column; overflow: hidden; } #view-einsatzplanung .dialog-kopf, #view-einsatzplanung .dialog-fuss { flex: 0 0 auto; } #view-einsatzplanung .dialog-inhalt { flex: 1 1 auto; min-height: 0; overflow: auto; } /* Meldung wie die Meldungen der App: Fläche im jeweiligen Modus, Rahmen, „Rückgängig“ in Akzentfarbe */ #view-einsatzplanung .ep-toast { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); } #view-einsatzplanung .ep-toast button { color: var(--accent); } /* Verweise und das Schild „Standard“ in Akzentfarbe (vorher die sehr helle Linienfarbe → kaum lesbar) */ #view-einsatzplanung .link-knopf, #view-einsatzplanung .vl-std { color: var(--accent); } /* Mehrtägige Einträge: Text läuft über die Folgetage (Zelle schneidet sonst ab) */ #view-einsatzplanung .raster td.zelle.lauf-start { overflow: visible; } /* Farbflächen (Vorgänge, Einsatzarten) sind exakt die gewählte Farbe; Zahlen und Punkte darauf bleiben in Tag- und Nachtansicht lesbar */ #view-einsatzplanung .vb .bz.ok, #view-einsatzplanung .vb .bz.fehlt { background: var(--surface); box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); } #view-einsatzplanung .punkt { box-shadow: 0 0 0 1px var(--border-strong); } /* Meilenstein: Raute und Linie exakt in der gewählten Farbe, Beschriftung in Textfarbe (sonst z. B. Türkis auf Weiß bzw. Dunkelblau auf Schwarz nicht lesbar) */ #view-einsatzplanung .ms { color: var(--text); } #view-einsatzplanung .ms:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } /* Kopf der Ansicht */ #view-einsatzplanung .ep-titel { display: grid; gap: 2px; min-width: 0; } #view-einsatzplanung .ep-eyebrow { color: var(--text-3); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .ep-leer { display: grid; gap: 10px; place-items: center; align-content: center; min-height: 320px; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text-3); text-align: center; } #view-einsatzplanung .ep-leer b { color: var(--text); } #view-einsatzplanung .speicherstand { display: inline-flex; align-items: center; gap: 6px; height: var(--h); padding: 0 10px; border-radius: var(--r); color: var(--text-3); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: default; } #view-einsatzplanung .speicherstand svg { width: 14px; height: 14px; flex: 0 0 auto; } #view-einsatzplanung .speicherstand[data-stand="ok"] svg { color: var(--ok); } #view-einsatzplanung .speicherstand[data-stand="fehler"] { background: var(--bad-soft); color: var(--bad); cursor: pointer; } #view-einsatzplanung .ep-lader { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -2px; animation: ep-ex-dreh .7s linear infinite; } #view-einsatzplanung .menue-trenner { display: block; height: 1px; margin: 4px 2px; background: var(--border); } #view-einsatzplanung .menue button svg { width: 16px; height: 16px; color: var(--text-3); flex: 0 0 auto; } #view-einsatzplanung .fehler-text { color: var(--bad); margin: 0; } /* Kleine Knöpfe und Hilfsklassen (im Entwurf als Inline-Stil) */ #view-einsatzplanung .symbol-knopf.klein-knopf { width: 24px; height: 24px; } #view-einsatzplanung .ap-n .klein-knopf { margin-left: auto; } #view-einsatzplanung .symbol-knopf.sicher { color: var(--bad); background: var(--bad-soft); } #view-einsatzplanung .knopf.knopf-klein { height: 28px; } #view-einsatzplanung .eintragen .segment button { height: 26px; } #view-einsatzplanung .leeren-code { border: 1px dashed var(--border-strong); color: var(--text-3); } #view-einsatzplanung .kw-zelle .kw, #view-einsatzplanung .ap-n .kw { padding-left: 0 !important; } #view-einsatzplanung .kw-datum { font-weight: 600; } #view-einsatzplanung .raster .gruppe-zeile td.name-spalte { padding-left: 4px; } #view-einsatzplanung .raster th.name-kopf { padding-left: 14px; font-size: 12px; color: var(--text-3); font-weight: 600; } #view-einsatzplanung .raster td.leer-zelle { position: static; width: auto; min-width: 0; max-width: none; padding: 18px 14px; } #view-einsatzplanung .ap-n.ap-leer { padding: 0 14px; } #view-einsatzplanung .vorgang-zeile[draggable="true"] { cursor: grab; } #view-einsatzplanung .gruppen-punkt { box-shadow: 0 0 0 1px var(--border-strong); } #view-einsatzplanung .paket-zeile > .gruppen-punkt { width: 10px; height: 10px; } #view-einsatzplanung .frei-punkt { background: var(--text-3); } #view-einsatzplanung .paket-stand { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } #view-einsatzplanung .paket-stand .klein { white-space: nowrap; } #view-einsatzplanung .insp-fuss { border-top: 1px solid var(--border); padding-top: 12px; } #view-einsatzplanung .tag-mehr { align-self: center; padding: 0 6px; } #view-einsatzplanung .lade-hinweis { display: inline-flex; align-items: center; gap: 8px; color: var(--text-3); cursor: default; } #view-einsatzplanung .lade-hinweis:hover { border-color: var(--border); background: var(--surface); } #view-einsatzplanung .st-neutral { background: var(--surface-3); color: var(--text-2); } #view-einsatzplanung .haken-zeile { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text-2); } #view-einsatzplanung .farbe-eingabe { width: 36px; height: 30px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: none; } #view-einsatzplanung .lz input[type="date"] { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); width: 100%; min-width: 0; } #view-einsatzplanung .lz-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .pd-felder { display: grid; gap: 14px; } /* Nur Ansicht (ohne Recht „bearbeiten“) */ #view-einsatzplanung .ap.nur-lesen .ap-zl .ap-t { cursor: default; } #view-einsatzplanung .ap.nur-lesen .vb { cursor: pointer; } #view-einsatzplanung .ap.nur-lesen .vb .gl, #view-einsatzplanung .ap.nur-lesen .vb .gr { cursor: pointer; } #view-einsatzplanung .ap.nur-lesen .ms-spur { cursor: default; } #view-einsatzplanung .raster.nur-lesen .ereignis-zelle { cursor: default; } #view-einsatzplanung .eintragen.nur-lesen { min-height: 44px; } #view-einsatzplanung .insp input:disabled, #view-einsatzplanung .insp select:disabled { color: var(--text-2); background: var(--surface-2); } /* Arbeitspaket-Auswahl */ #view-einsatzplanung .pk-inhalt { display: grid; gap: 14px; } #view-einsatzplanung .pk-filter { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } #view-einsatzplanung .pk-check { display: flex; gap: 8px; align-items: center; font-size: 13px; } #view-einsatzplanung .pk-typ { height: 30px; padding: 0 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); font-size: 12.5px; } #view-einsatzplanung .pk-el { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .vorschlag:disabled { opacity: .45; cursor: default; } /* Element-Schublade */ #view-einsatzplanung .schublade-kopf.kopf-oben { align-items: flex-start; } #view-einsatzplanung .schublade-titel { min-width: 0; display: grid; gap: 3px; } #view-einsatzplanung .schublade-h2 { font-family: var(--font-display); font-size: 20px; font-weight: 650; } #view-einsatzplanung .foto.lade { display: grid; place-items: center; align-content: center; gap: 6px; color: var(--text-3); } #view-einsatzplanung .foto.kaputt img { visibility: hidden; } #view-einsatzplanung .foto-weg.sicher { opacity: 1; background: var(--bad); } #view-einsatzplanung .bem-feld { margin-bottom: 10px; } #view-einsatzplanung .bem-feld textarea:disabled { color: var(--text-2); background: var(--surface-2); } #view-einsatzplanung .bem-fuss { justify-content: flex-end; } #view-einsatzplanung .foto-gross-rahmen { display: grid; place-items: center; min-height: 220px; } #view-einsatzplanung .el-feld .segment button:disabled { cursor: default; opacity: .55; } /* Meine Aufgaben */ #view-einsatzplanung .meine2.ohne-wahl { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .meine-hinweis { padding: 18px; } #view-einsatzplanung .meine-titel { margin: 0 0 8px; font-weight: 650; } #view-einsatzplanung .personen-wahl { max-height: calc(100vh - 220px); overflow: auto; } #view-einsatzplanung .pw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .mh-haupt { min-width: 0; } #view-einsatzplanung .mh-art { display: flex; align-items: center; gap: 10px; } #view-einsatzplanung .mh-zeile .knopf:disabled, #view-einsatzplanung .zurueck-knopf:disabled { opacity: .45; cursor: default; } /* Arbeitsanweisung */ #view-einsatzplanung .blatt-unter { font-size: 11px; } #view-einsatzplanung .blatt-trupp { margin-bottom: 12px; } #view-einsatzplanung .blatt-trupp b { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; } @media print { body.ep-druck * { visibility: hidden !important; } body.ep-druck #ep-blatt, body.ep-druck #ep-blatt * { visibility: visible !important; } body.ep-druck #ep-blatt { position: fixed; left: 0; top: 0; width: 100%; margin: 0; padding: 0; box-shadow: none; } } /* Aus Excel übernehmen */ #view-einsatzplanung .im { display: grid; gap: 14px; } #view-einsatzplanung .im-datei { position: relative; display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px dashed var(--border-strong); border-radius: 10px; background: var(--surface-2); cursor: pointer; } #view-einsatzplanung .im-datei input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } #view-einsatzplanung .im-datei:hover, #view-einsatzplanung .im-datei.ziel { border-color: var(--accent); background: var(--accent-soft); } #view-einsatzplanung .im-datei.gewaehlt { border-style: solid; border-color: var(--ok); } #view-einsatzplanung .im-symbol { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 8px; background: #107c41; color: #ffffff; } #view-einsatzplanung .im-symbol svg { width: 20px; height: 20px; } #view-einsatzplanung .im-text { display: grid; gap: 2px; min-width: 0; } #view-einsatzplanung .im-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .im-haken { min-height: 36px; } #view-einsatzplanung .im-warnung { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--text-2); font-size: 12.5px; } #view-einsatzplanung .im-warnung svg { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; color: var(--warn); } #view-einsatzplanung .im-ergebnis { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } #view-einsatzplanung .im-ergebnis > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--grid); font-size: 13px; } #view-einsatzplanung .im-ergebnis > div:last-child { border-bottom: 0; } #view-einsatzplanung .im-hinweise { max-height: 200px; overflow: auto; margin: 0; padding-left: 18px; color: var(--text-2); font-size: 12.5px; } #view-einsatzplanung .vs-leer { padding: 10px 14px; } /* Handy: Eingaben mit 16 px, damit iOS beim Antippen nicht heranzoomt */ @media (max-width: 760px) { #view-einsatzplanung input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), #view-einsatzplanung select, #view-einsatzplanung textarea { font-size: 16px; } #view-einsatzplanung .ansicht-kopf { gap: 10px; } #view-einsatzplanung .kopf-rechts { margin-left: 0; min-width: 0; } } /* Gruppennamen im Ablaufplan einzeilig, die Anzahl bleibt daneben */ #view-einsatzplanung .ap-gr .gruppe-knopf .nm { white-space: nowrap; } #view-einsatzplanung .ap-gr .gruppe-knopf .anz { flex: 0 0 auto; white-space: nowrap; } @media (max-width: 640px) { #view-einsatzplanung .kopf-rechts { width: 100%; } #view-einsatzplanung .datum-nav { width: 100%; } #view-einsatzplanung .zeitraum-knopf { flex: 1 1 auto; min-width: 0; } #view-einsatzplanung .kopf-rechts > .segment { width: 100%; } #view-einsatzplanung .kopf-rechts > .segment button { flex: 1 1 0; padding: 0 6px; } #view-einsatzplanung .ap-head .zeile2 .kw, #view-einsatzplanung .kw-zelle .kw { display: none; } #view-einsatzplanung .reiter { width: 100%; } #view-einsatzplanung .reiter button { flex: 1 1 0; padding: 0 8px; } } /* Kachel „Einsatzplanung“ im Arbeitsbereich wie „Terminplan“: Pfeil rechts, die ganze Zeile ist klickbar. Symbolfeld und Farbe kommen aus arbeitsbereich.css (.ab-symbol, --ab-farbe). */ #einsatzplanungCard::before { content: ""; } #bauleiterArbeitsbereich #einsatzplanungCard { min-height: 78px !important; padding: 15px 76px 15px 70px !important; } #bauleiterArbeitsbereich #einsatzplanungCard > #btnEinsatzplanungOeffnen { position: absolute !important; inset: 0 !important; z-index: 4 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; transform: none !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: transparent !important; font-size: 0 !important; cursor: pointer !important; } #bauleiterArbeitsbereich #einsatzplanungCard::after { content: "›"; position: absolute; right: 20px; top: 39px; transform: translateY(-50%); z-index: 3; color: var(--text-muted); font-size: 26px; font-weight: 400; line-height: 1; pointer-events: none; } @media (max-width: 900px) { #bauleiterArbeitsbereich #einsatzplanungCard { min-height: 74px !important; padding: 14px 58px 14px 60px !important; } #bauleiterArbeitsbereich #einsatzplanungCard::after { right: 14px; top: 37px; } } @media (max-width: 620px) { #bauleiterArbeitsbereich #einsatzplanungCard { min-height: 72px !important; padding: 13px 48px 13px 56px !important; } #bauleiterArbeitsbereich #einsatzplanungCard::after { right: 10px; top: 36px; font-size: 24px; } } /* ===================== v775 ===================== */ /* Farbwerkzeuge: Pipette und Palette in Größe der Farbfelder; eine eigene Farbe zeigt die Palette als Fläche */ #view-einsatzplanung .farben.farben-raster { display: grid; grid-template-columns: repeat(4, 26px); gap: 8px; justify-content: start; align-content: center; } #view-einsatzplanung .farb-werkzeug { display: inline-flex; align-items: center; justify-content: center; padding: 0; background: var(--surface-2); color: var(--text-2); cursor: pointer; } #view-einsatzplanung .farb-werkzeug svg { width: 14px; height: 14px; } #view-einsatzplanung .farb-werkzeug:hover { background: var(--surface-3); color: var(--accent); } #view-einsatzplanung .farb-werkzeug.eigen, #view-einsatzplanung .farb-werkzeug.eigen:hover { background: var(--eigen); color: var(--eigen-text); } #view-einsatzplanung .farb-label { display: flex; align-items: center; justify-content: space-between; gap: 6px; } #view-einsatzplanung .farb-label .pinsel-knopf { margin-block: -4px; } #view-einsatzplanung .pinsel-knopf svg { width: 14px; height: 14px; } #view-einsatzplanung .pinsel-knopf.an { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung #ep-ap.pinsel-aktiv .vb, #view-einsatzplanung #ep-ap.pinsel-aktiv .vb * { cursor: copy; } #view-einsatzplanung .pinsel-hinweis { position: fixed; left: 50%; bottom: calc(max(20px, env(safe-area-inset-bottom, 0px)) + 58px); transform: translateX(-50%); z-index: 1250; display: flex; align-items: center; gap: 8px; max-width: calc(100% - 32px); padding: 6px 6px 6px 12px; border: 1px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--text); box-shadow: var(--shadow-pop); font-size: 12.5px; font-weight: 600; } #view-einsatzplanung .pinsel-hinweis > svg { flex: 0 0 auto; width: 15px; height: 15px; color: var(--accent); } #view-einsatzplanung .pinsel-hinweis > span:not(.pinsel-farbe) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .pinsel-farbe { flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .2); } #view-einsatzplanung .pinsel-hinweis button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; } #view-einsatzplanung .pinsel-hinweis button:hover { border-color: var(--border-strong); } #view-einsatzplanung .pinsel-hinweis kbd { padding: 0 5px; border: 1px solid var(--border-strong); border-radius: 4px; background: var(--surface); color: var(--text-2); font: inherit; font-size: 10.5px; line-height: 16px; } /* Farbknopf + Pipette in den Listen (Verwalten) und im Einsatzart-Editor */ #view-einsatzplanung .farb-paar { display: inline-flex; align-items: center; gap: 4px; } #view-einsatzplanung .farb-knopf { width: 30px; height: 24px; padding: 0; border: 2px solid var(--surface); border-radius: 6px; box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; } #view-einsatzplanung .farb-knopf:hover { box-shadow: 0 0 0 1px var(--accent); } #view-einsatzplanung .farb-mini-pipette { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text-2); cursor: pointer; } #view-einsatzplanung .farb-mini-pipette svg { width: 13px; height: 13px; } #view-einsatzplanung .farb-mini-pipette:hover { border-color: var(--accent); color: var(--accent); } /* Meilensteinfarben: Standard + 7 Farben + Pipette + Palette = 2 Reihen à 5 */ #view-einsatzplanung .farben.ms-farben { display: grid; grid-template-columns: repeat(5, 24px); gap: 8px 10px; justify-content: start; } #view-einsatzplanung .ms-werkzeuge { display: contents; } #view-einsatzplanung .ms-farben .farb-werkzeug svg { width: 13px; height: 13px; } /* Vorlagen: ohne Spalte „Offene Arbeit aus“ */ #view-einsatzplanung .vl-zeile { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 60px 98px; } @media (max-width: 760px) { #view-einsatzplanung .vl-zeile { grid-template-columns: minmax(0, 1fr) 48px auto; grid-template-areas: "n n n" "g b a"; } } /* Einsatzplan: mehrtägige Einträge laufen ohne Trennlinie durch */ #view-einsatzplanung .raster td.zelle.weiter { overflow: visible; } /* Kopierte Felder: gestrichelter Rahmen um die Außenkanten (wie Excel) */ #view-einsatzplanung .raster td.zelle.kopie::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border: 0 dashed var(--accent); } #view-einsatzplanung .raster td.zelle.kopie-o::before { border-top-width: 2px; } #view-einsatzplanung .raster td.zelle.kopie-u::before { border-bottom-width: 2px; } #view-einsatzplanung .raster td.zelle.kopie-l::before { border-left-width: 2px; } #view-einsatzplanung .raster td.zelle.kopie-r::before { border-right-width: 2px; } /* Meine Aufgaben: Personenliste so breit wie der längste Name – kein Querscrollen */ #view-einsatzplanung .meine2 { grid-template-columns: fit-content(420px) minmax(0, 1fr); } #view-einsatzplanung .meine2 > .panel:first-child { min-width: 240px; } #view-einsatzplanung .meine2.ohne-wahl { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .personen-wahl { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; } #view-einsatzplanung .personen-wahl button { white-space: nowrap; } #view-einsatzplanung .personen-wahl .pw-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .personen-wahl .klein { flex: 0 0 auto; padding-left: 8px; } @media (max-width: 760px) { #view-einsatzplanung .meine2 { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .meine2 > .panel:first-child { min-width: 0; } } /* Namensspalte verstellbar: Griff am rechten Rand der Kopfzellen */ #view-einsatzplanung .spalten-griff { position: absolute; top: 0; bottom: 0; right: 0; width: 9px; z-index: 9; cursor: col-resize; touch-action: none; } #view-einsatzplanung .spalten-griff::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 3px; background: transparent; transition: background-color .12s; } #view-einsatzplanung .spalten-griff:focus-visible { outline: none; } #view-einsatzplanung .ap-head:has(.spalten-griff:hover) .spalten-griff::after, #view-einsatzplanung .ap-head:has(.spalten-griff.aktiv) .spalten-griff::after, #view-einsatzplanung .ap-head:has(.spalten-griff:focus-visible) .spalten-griff::after, #view-einsatzplanung .raster thead:has(.spalten-griff:hover) .spalten-griff::after, #view-einsatzplanung .raster thead:has(.spalten-griff.aktiv) .spalten-griff::after, #view-einsatzplanung .raster thead:has(.spalten-griff:focus-visible) .spalten-griff::after { background: var(--accent); } body[data-app-view="einsatzplanung"].ep-spalte-ziehen, body[data-app-view="einsatzplanung"].ep-spalte-ziehen * { cursor: col-resize !important; user-select: none !important; } /* Arbeitspaket: großes Fenster – Arbeitsschritte links, Filter und offene Arbeiten rechts */ #view-einsatzplanung .dialog.pk-dialog { height: min(88vh, 980px); } #view-einsatzplanung .dialog.pk-dialog.pk-nur-frei { height: auto; } #view-einsatzplanung .pk-dialog .dialog-inhalt { display: flex; flex-direction: column; overflow: hidden; } #view-einsatzplanung .pk-dialog.pk-nur-frei .dialog-inhalt { overflow: auto; } #view-einsatzplanung .pk-dialog .pk-inhalt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 14px; } #view-einsatzplanung .pk-kopfzeile { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; } #view-einsatzplanung .pk-kontext { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; color: var(--text-3); } #view-einsatzplanung .pk-label { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .pk-gruppen { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 12px; align-items: center; } #view-einsatzplanung .pk-koerper { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 16px; } #view-einsatzplanung .pk-schritte { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); overflow: hidden; } #view-einsatzplanung .pk-sp-kopf { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 40px; padding: 0 12px; border-bottom: 1px solid var(--border); } #view-einsatzplanung .pk-sp-liste { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px; display: grid; grid-auto-rows: max-content; align-content: start; gap: 2px; } #view-einsatzplanung .pk-sp-liste > .klein { margin: 6px; } #view-einsatzplanung .pk-schritt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 36px; padding: 7px 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13px; line-height: 1.3; text-align: left; cursor: pointer; } #view-einsatzplanung .pk-schritt:hover { background: var(--surface-3); } #view-einsatzplanung .pk-schritt[aria-pressed="true"] { background: var(--accent-soft); color: var(--text); font-weight: 650; } #view-einsatzplanung .pk-schritt.leer:not([aria-pressed="true"]) { color: var(--text-3); } #view-einsatzplanung .pk-kasten { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: transparent; } #view-einsatzplanung .pk-kasten svg { width: 12px; height: 12px; } #view-einsatzplanung .pk-schritt[aria-pressed="true"] .pk-kasten { border-color: var(--accent); background: var(--accent); color: var(--on-accent); } #view-einsatzplanung .pk-schritt .anz { font-size: 12px; font-weight: 700; color: var(--text-3); } #view-einsatzplanung .pk-schritt[aria-pressed="true"] .anz { color: var(--text); } #view-einsatzplanung .pk-haupt { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; } #view-einsatzplanung .pk-filter-raster { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 8px 12px; align-items: center; } #view-einsatzplanung .pk-chips { max-height: 70px; overflow-y: auto; } #view-einsatzplanung .pk-reihe { display: flex; flex-wrap: wrap; gap: 8px; } #view-einsatzplanung .pk-reihe .pk-typ { height: 32px; min-width: 200px; padding: 0 8px; color: var(--text); font-size: 13px; } #view-einsatzplanung .pk-suche { flex: 1 1 220px; min-width: 0; height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } #view-einsatzplanung .pk-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 12.5px; color: var(--text-2); } #view-einsatzplanung .pk-info b { font-size: 14px; color: var(--text); } #view-einsatzplanung .pk-weg { color: var(--text-3); } #view-einsatzplanung .pk-info .link-knopf { margin-left: auto; } #view-einsatzplanung .pk-tabelle { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } #view-einsatzplanung .pk-zeile { display: grid; grid-template-columns: 44px minmax(150px, 1.3fr) minmax(140px, 1.4fr) minmax(110px, 1fr) minmax(100px, .8fr) minmax(84px, .6fr) 100px; align-items: center; min-height: 38px; border-bottom: 1px solid var(--grid); font-size: 13px; cursor: pointer; } #view-einsatzplanung .pk-zeile > span { min-width: 0; padding: 0 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .pk-zeile > .pk-c { display: flex; align-items: center; justify-content: center; padding: 0; } #view-einsatzplanung .pk-zeile input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; } #view-einsatzplanung .pk-zeilen .pk-zeile:hover { background: var(--surface-2); } #view-einsatzplanung .pk-zeilen .pk-zeile.an { background: var(--accent-soft); } #view-einsatzplanung .pk-zeile > .pk-el { font-weight: 650; color: var(--text); } #view-einsatzplanung .pk-zeile > .pk-s { color: var(--text); } #view-einsatzplanung .pk-zeile > .pk-t, #view-einsatzplanung .pk-zeile > .pk-o, #view-einsatzplanung .pk-zeile > .pk-g, #view-einsatzplanung .pk-zeile > .pk-k { color: var(--text-2); } #view-einsatzplanung .pk-zeile > .pk-k { text-align: right; } #view-einsatzplanung .pk-leer { color: var(--text-3); } #view-einsatzplanung .pk-zeile.pk-kopf { position: sticky; top: 0; z-index: 2; min-height: 36px; background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: default; } #view-einsatzplanung .pk-sort { display: flex; align-items: center; gap: 5px; min-width: 0; height: 36px; padding: 0 10px; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-align: left; white-space: nowrap; cursor: pointer; } #view-einsatzplanung .pk-sort.pk-k { justify-content: flex-end; } #view-einsatzplanung .pk-sort:hover, #view-einsatzplanung .pk-sort[aria-sort="ascending"], #view-einsatzplanung .pk-sort[aria-sort="descending"] { color: var(--text); } #view-einsatzplanung .pk-pfeil { font-size: 9px; } #view-einsatzplanung .pk-alle-text { display: none; } #view-einsatzplanung .pk-zeilen .leer-hinweis { margin: 16px; } #view-einsatzplanung .pk-fuss-info { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 4px; font-size: 12.5px; color: var(--text-2); } #view-einsatzplanung .pk-fuss-info b { color: var(--text); } @media (max-width: 760px) { #view-einsatzplanung .dialog.pk-dialog { height: 100%; } #view-einsatzplanung .pk-dialog .dialog-inhalt { display: block; overflow: auto; } #view-einsatzplanung .pk-dialog .pk-inhalt { display: grid; gap: 12px; } #view-einsatzplanung .pk-kontext { margin-left: 0; white-space: normal; } #view-einsatzplanung .pk-gruppen, #view-einsatzplanung .pk-filter-raster { grid-template-columns: minmax(0, 1fr); gap: 6px; } #view-einsatzplanung .pk-koerper { grid-template-columns: minmax(0, 1fr); gap: 12px; } #view-einsatzplanung .pk-sp-liste { max-height: 168px; } #view-einsatzplanung .pk-reihe .pk-typ { flex: 1 1 100%; min-width: 0; } #view-einsatzplanung .pk-tabelle { overflow: visible; } #view-einsatzplanung .pk-zeile { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "c el k" "c s g" "c t o"; row-gap: 2px; padding: 7px 10px 7px 0; } #view-einsatzplanung .pk-zeile > span { padding: 0; } #view-einsatzplanung .pk-zeile > .pk-c { grid-area: c; align-self: stretch; } #view-einsatzplanung .pk-zeile > .pk-el { grid-area: el; } #view-einsatzplanung .pk-zeile > .pk-k { grid-area: k; padding-left: 8px; } #view-einsatzplanung .pk-zeile > .pk-s { grid-area: s; } #view-einsatzplanung .pk-zeile > .pk-g { grid-area: g; padding-left: 8px; text-align: right; } #view-einsatzplanung .pk-zeile > .pk-t { grid-area: t; font-size: 12px; } #view-einsatzplanung .pk-zeile > .pk-o { grid-area: o; padding-left: 8px; text-align: right; font-size: 12px; } #view-einsatzplanung .pk-zeile.pk-kopf { position: static; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "c a"; padding: 0; } #view-einsatzplanung .pk-dialog .dialog-fuss { flex-wrap: wrap; row-gap: 10px; } #view-einsatzplanung .pk-dialog .pk-fuss-info { flex: 1 1 100%; margin-right: 0; } #view-einsatzplanung .pk-dialog .pk-fuss-info:empty { display: none; } #view-einsatzplanung .pk-zeile.pk-kopf .pk-sort { display: none; } #view-einsatzplanung .pk-zeile.pk-kopf .pk-alle-text { display: block; grid-area: a; padding: 0; font-size: 12.5px; font-weight: 650; color: var(--text-2); } } /* Verwalten-Listen: Spalten aus der CSS (vorher Inline), am Handy zweizeilig statt rechts abgeschnitten */ #view-einsatzplanung .lz.lz-arten { grid-template-columns: 62px minmax(0, 1fr) 72px 132px 116px 30px; } #view-einsatzplanung .lz.lz-gruppen { grid-template-columns: 62px minmax(0, 1fr) 140px 90px 30px 30px 30px; } #view-einsatzplanung .lz.lz-ms { grid-template-columns: 62px minmax(0, 1fr) 150px 30px; } @media (max-width: 640px) { #view-einsatzplanung .lz.kopf.lz-arten, #view-einsatzplanung .lz.kopf.lz-gruppen, #view-einsatzplanung .lz.kopf.lz-ms { display: none; } #view-einsatzplanung .lz.lz-arten, #view-einsatzplanung .lz.lz-gruppen, #view-einsatzplanung .lz.lz-ms { row-gap: 8px; padding-top: 8px; padding-bottom: 8px; } #view-einsatzplanung .lz.lz-arten { grid-template-columns: 62px minmax(0, 1fr) 64px 30px; grid-template-areas: "f n k x" "a a p p"; } #view-einsatzplanung .lz-arten > :nth-child(1) { grid-area: f; } #view-einsatzplanung .lz-arten > :nth-child(2) { grid-area: n; } #view-einsatzplanung .lz-arten > :nth-child(3) { grid-area: k; } #view-einsatzplanung .lz-arten > :nth-child(4) { grid-area: a; } #view-einsatzplanung .lz-arten > :nth-child(5) { grid-area: p; } #view-einsatzplanung .lz-arten > :nth-child(6) { grid-area: x; } #view-einsatzplanung .lz.lz-gruppen { grid-template-columns: 62px minmax(0, 1fr) auto 30px 30px; grid-template-areas: "f n n n x" "k k u h r"; } #view-einsatzplanung .lz-gruppen > :nth-child(1) { grid-area: f; } #view-einsatzplanung .lz-gruppen > :nth-child(2) { grid-area: n; } #view-einsatzplanung .lz-gruppen > :nth-child(3) { grid-area: k; } #view-einsatzplanung .lz-gruppen > :nth-child(4) { grid-area: u; } #view-einsatzplanung .lz-gruppen > :nth-child(5) { grid-area: h; } #view-einsatzplanung .lz-gruppen > :nth-child(6) { grid-area: r; } #view-einsatzplanung .lz-gruppen > :nth-child(7) { grid-area: x; } #view-einsatzplanung .lz.lz-ms { grid-template-columns: 62px minmax(0, 1fr) 30px; grid-template-areas: "f n x" ". d ."; } #view-einsatzplanung .lz-ms > :nth-child(1) { grid-area: f; } #view-einsatzplanung .lz-ms > :nth-child(2) { grid-area: n; } #view-einsatzplanung .lz-ms > :nth-child(3) { grid-area: d; } #view-einsatzplanung .lz-ms > :nth-child(4) { grid-area: x; } /* Fußzeilen der Fenster: Knöpfe brechen um, statt links aus dem Fenster zu laufen */ #view-einsatzplanung .dialog-fuss { flex-wrap: wrap; row-gap: 8px; } } /* Markierung im Einsatzplan: Rahmen nur an den Außenkanten (wie Excel) – keine Linien zwischen den Tagen */ #view-einsatzplanung .zelle.markiert::after { box-shadow: none; border: 0 solid var(--accent); } #view-einsatzplanung .zelle.markiert.m-o::after { border-top-width: 2px; } #view-einsatzplanung .zelle.markiert.m-u::after { border-bottom-width: 2px; } #view-einsatzplanung .zelle.markiert.m-l::after { border-left-width: 2px; } #view-einsatzplanung .zelle.markiert.m-r::after { border-right-width: 2px; } /* Gerahmte Listen und Karten schneiden nur die runden Ecken ab (clip). Mit „hidden“ dürfen sie in Rastern und Leisten unter ihren Inhalt schrumpfen – dann schieben sich Zeilen übereinander (Handy, lange Listen). */ #view-einsatzplanung .listen-tabelle, #view-einsatzplanung .pakete, #view-einsatzplanung .karte, #view-einsatzplanung .heute-karte, #view-einsatzplanung .woche-liste, #view-einsatzplanung .mh-karte, #view-einsatzplanung .ta-paket, #view-einsatzplanung .im-ergebnis, #view-einsatzplanung .eintrag-karte { overflow: clip; } /* Personen im Projekt: Spalten aus der CSS; am Handy Name über die ganze Breite, Rolle und Art darunter */ #view-einsatzplanung .lz.lz-person { grid-template-columns: 28px minmax(0, 1fr) 90px 70px 30px; } #view-einsatzplanung .lz-name { min-width: 0; } @media (max-width: 640px) { #view-einsatzplanung .lz.lz-person { grid-template-columns: 28px minmax(0, 1fr) auto 30px; grid-template-areas: "a n n x" ". r k ."; row-gap: 4px; padding-top: 8px; padding-bottom: 8px; } #view-einsatzplanung .lz-person > :nth-child(1) { grid-area: a; } #view-einsatzplanung .lz-person > :nth-child(2) { grid-area: n; white-space: normal; overflow-wrap: anywhere; } #view-einsatzplanung .lz-person > :nth-child(3) { grid-area: r; } #view-einsatzplanung .lz-person > :nth-child(4) { grid-area: k; } #view-einsatzplanung .lz-person > :nth-child(5) { grid-area: x; } } /* ===================== v776 ===================== */ /* Einsatzplan, Liste „Aus dem Ablaufplan“: nach Bereich (Betriebsstelle) gruppiert, Kopf wie die Gruppen im Ablaufplan */ #view-einsatzplanung .liste-titel .alle-knopf { margin-left: auto; height: 22px; text-transform: none; letter-spacing: 0; } #view-einsatzplanung .liste-titel .alle-knopf + .num { margin-left: 8px; } #view-einsatzplanung .liste-gruppe { position: sticky; top: 32px; z-index: 1; display: flex; align-items: center; gap: 8px; padding-right: 12px; background: var(--surface-3); border-bottom: 1px solid var(--grid); } #view-einsatzplanung .liste-gruppe .gruppe-knopf { flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 8px; color: var(--text-2); } #view-einsatzplanung .liste-gruppe .gruppe-knopf .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .liste-gruppe .gruppe-knopf .anz { flex: 0 0 auto; white-space: nowrap; } #view-einsatzplanung .lg-fehlt { flex: 0 0 auto; font-size: 11.5px; font-weight: 650; color: var(--bad); white-space: nowrap; } /* Zeile: Name über die ganze Breite, darunter Zeitraum und Besetzung, die Knöpfe rechts daneben */ #view-einsatzplanung .vorgang-zeile { grid-template-columns: 12px minmax(0, 1fr) auto; grid-template-rows: auto auto auto; row-gap: 1px; } #view-einsatzplanung .vorgang-zeile > .punkt { grid-row: 1; } #view-einsatzplanung .vorgang-zeile .titel { grid-column: 2 / -1; grid-row: 1; white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; line-height: 1.35; } #view-einsatzplanung .vorgang-zeile .meta { grid-column: 2; grid-row: 2; } #view-einsatzplanung .vorgang-zeile .meta.zustand { grid-row: 3; } #view-einsatzplanung .vorgang-zeile .aktion { grid-column: 3; grid-row: 2 / span 2; align-self: center; } /* ===================== v777 ===================== */ /* Fenster (Tagesauftrag, Element): Einblendung nur beim ersten Öffnen – beim Wechsel zwischen beiden springt nichts */ #view-einsatzplanung .schublade.ohne-rein { animation: none; } /* Platz für den Rollbalken ist immer reserviert: der Inhalt wird nicht schmaler, wenn er erscheint */ @media (pointer: fine) { #view-einsatzplanung .schublade-inhalt { scrollbar-gutter: stable; } } /* Platzhalter beim Laden in der Größe der echten Zeilen (statt „wird geladen“, danach Sprung) */ #view-einsatzplanung .el-skelett .skelett-chip { display: inline-block; width: 156px; height: 30px; border-radius: 999px; background: var(--surface-3); } #view-einsatzplanung .el-skelett .skelett-balken { display: block; height: 12px; border-radius: 6px; background: var(--surface-3); } #view-einsatzplanung .el-skelett .skelett-segment { flex: 0 0 auto; width: 148px; height: 30px; border-radius: 8px; background: var(--surface-3); } #view-einsatzplanung .skelett-balken.el-skelett-linie { display: block; width: 58%; height: 12px; margin: 6px 0; border-radius: 6px; background: var(--surface-3); } /* Fotokacheln: während des Ladens eine ruhige Fläche statt kaputtem Bildsymbol, dann sanft einblenden */ #view-einsatzplanung .foto.bild:has(img:not([src])) { background: var(--surface-3); } #view-einsatzplanung .foto.bild img { transition: opacity .15s ease-out; } #view-einsatzplanung .foto.bild img:not([src]) { opacity: 0; } /* v778: Textfelder (z. B. Arbeitsbeschreibung) an ihrer Stelle in der Feldliste – über die ganze Breite */ #view-einsatzplanung .el-feld.el-text { display: block; padding: 10px 14px 12px; } #view-einsatzplanung .el-feld.el-text .bem-feld { margin: 0; } /* ===================== v779: Arbeitspaket – Elementtyp → Attributgruppe → Attribute ===================== */ #view-einsatzplanung .pk-koerper { grid-template-columns: 330px minmax(0, 1fr); } #view-einsatzplanung .pk-baum .pk-sp-liste { gap: 4px; padding: 8px; } /* Ebene 1: Elementtyp */ #view-einsatzplanung .pk-typ-block { display: grid; gap: 2px; } #view-einsatzplanung .pk-typ-knoten { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 6px 12px 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; text-align: left; cursor: pointer; } #view-einsatzplanung .pk-typ-knoten:hover { background: var(--surface-3); } #view-einsatzplanung .pk-typ-block.auf > .pk-typ-knoten { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); } #view-einsatzplanung .pk-typ-knoten .pk-tn { flex: 1 1 auto; min-width: 0; } #view-einsatzplanung .pk-gewaehlt { flex: 0 0 auto; padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11.5px; font-weight: 700; white-space: nowrap; } #view-einsatzplanung .pk-typ-knoten > svg, #view-einsatzplanung .pk-gruppe > svg { flex: 0 0 auto; width: 14px; height: 14px; color: var(--text-3); transition: transform .15s; } #view-einsatzplanung .pk-typ-knoten[aria-expanded="true"] > svg, #view-einsatzplanung .pk-gruppe[aria-expanded="true"] > svg { transform: rotate(90deg); } /* Ebene 2: Attributgruppe (eingerückt, Führungslinie) */ #view-einsatzplanung .pk-typ-unter { display: grid; gap: 2px; margin: 2px 0 6px 15px; padding-left: 8px; border-left: 2px solid var(--border); } #view-einsatzplanung .pk-gruppe-block { display: grid; gap: 2px; } #view-einsatzplanung .pk-gruppe-zeile { display: flex; align-items: center; gap: 6px; } #view-einsatzplanung .pk-gruppe { display: flex; flex: 1 1 auto; min-width: 0; align-items: center; gap: 8px; min-height: 36px; padding: 5px 10px 5px 6px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 13px; font-weight: 650; text-align: left; cursor: pointer; } #view-einsatzplanung .pk-gruppe:hover { background: var(--surface-3); } #view-einsatzplanung .pk-gruppe .pk-gn { flex: 1 1 auto; min-width: 0; } #view-einsatzplanung .pk-gruppe .anz { flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--text-2); } #view-einsatzplanung .pk-alle { flex: 0 0 auto; height: 26px; padding: 0 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--accent); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; } #view-einsatzplanung .pk-alle:hover { border-color: var(--accent); } /* Ebene 3: Attribute */ #view-einsatzplanung .pk-attr-liste { display: grid; gap: 2px; margin: 0 0 6px 13px; padding-left: 8px; border-left: 2px solid var(--grid); } #view-einsatzplanung .pk-baum .pk-schritt { padding-left: 10px; } #view-einsatzplanung .pk-baum-lade { margin: 4px 10px 8px 22px; font-size: 12.5px; color: var(--text-3); } @media (max-width: 760px) { #view-einsatzplanung .pk-koerper { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .pk-baum .pk-sp-liste { max-height: 340px; } } /* ===================== v782: Einsatzplanung als Datei sichern / aus Datei übernehmen ===================== */ #view-einsatzplanung .im-symbol.sd-symbol { background: var(--accent); color: var(--on-accent); } #view-einsatzplanung .sd-bericht { display: grid; gap: 10px; } #view-einsatzplanung .sd-bericht:empty { display: none; } #view-einsatzplanung .sd-bericht .abschnitt-titel { margin: 2px 0 0; } #view-einsatzplanung .sd-neben { display: block; margin-top: 1px; font-size: 12px; color: var(--text-3); } #view-einsatzplanung .sd-quelle, #view-einsatzplanung .sd-info { margin: 0; } #view-einsatzplanung .sd-lade { display: flex; align-items: center; gap: 8px; margin: 0; } /* ===================== v783: Bereiche im Ablaufplan per Ziehen anordnen ===================== */ #view-einsatzplanung .ap-griff { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 30px; margin-right: -6px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--text-3); cursor: grab; touch-action: none; } #view-einsatzplanung .ap-griff svg { width: 14px; height: 14px; } #view-einsatzplanung .ap-griff:hover, #view-einsatzplanung .ap-griff:focus-visible { color: var(--text); background: var(--surface); } #view-einsatzplanung .ap-griff + .gruppe-knopf { padding-left: 4px; } #view-einsatzplanung .ap.bereich-zieht > .ap-z { transition: transform .16s ease; } #view-einsatzplanung .ap.bereich-zieht > .ap-z.zieht { transition: none; z-index: 4; } #view-einsatzplanung .ap-z.zieht > .ap-n, #view-einsatzplanung .ap-z.zieht > .ap-t { background-color: var(--surface); } #view-einsatzplanung .ap-z.zieht-kopf > .ap-n, #view-einsatzplanung .ap-z.zieht-kopf > .ap-t { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface); } #view-einsatzplanung .ap-z.zieht-kopf { box-shadow: 0 -1px 0 var(--accent-line), 0 -6px 16px -10px rgba(15, 23, 42, .35); } #view-einsatzplanung .ap-z.zieht-ende { box-shadow: 0 14px 22px -14px rgba(15, 23, 42, .45); } #view-einsatzplanung .ap-z.zieht-kopf.zieht-ende { box-shadow: 0 0 0 1px var(--accent-line), 0 10px 24px -8px rgba(15, 23, 42, .4); } #view-einsatzplanung .ap-z.zieht .ap-griff { color: var(--accent); cursor: grabbing; } #view-einsatzplanung .ap-z.gleitet { transition: transform .22s cubic-bezier(.2, .8, .2, 1); } body[data-app-view="einsatzplanung"].ep-bereich-ziehen, body[data-app-view="einsatzplanung"].ep-bereich-ziehen * { cursor: grabbing !important; user-select: none; } /* ===================== v784: Zeilen im Bereich per Ziehen anordnen (gleicher Griff wie die Bereiche) ===================== */ #view-einsatzplanung .ap-zl .ap-n.mit-griff { padding-left: 4px; } #view-einsatzplanung .ap-zl .ap-griff + .zeile-knopf { padding-left: 4px; } #view-einsatzplanung .ap-z.ap-zl.ls-zieht > .ap-n, #view-einsatzplanung .ap-z.ap-zl.ls-zieht > .ap-t { background-color: var(--surface); } #view-einsatzplanung .ap-z.ap-zl.ls-zieht { z-index: 4; box-shadow: 0 0 0 1px var(--accent-line), 0 14px 26px -14px rgba(15, 23, 42, .45); } /* ===================== v785: Gruppen und Personen im Einsatzplan per Ziehen anordnen ===================== */ #view-einsatzplanung .raster .name-spalte > .ap-griff { position: absolute; left: 4px; top: 50%; margin: 0; transform: translateY(-50%); } #view-einsatzplanung .raster .person-zeile .name-spalte.mit-griff .person { padding-left: 30px; } #view-einsatzplanung .raster .gruppe-zeile .name-spalte.mit-griff .gruppe-knopf { padding-left: 26px; } #view-einsatzplanung .raster tr.ls-zieht > td { background-color: var(--surface); } #view-einsatzplanung .raster tr.gruppe-zeile.ls-zieht > td { background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--surface-3); } #view-einsatzplanung .raster tr.ls-zieht { box-shadow: 0 0 0 1px var(--accent-line), 0 14px 26px -14px rgba(15, 23, 42, .45); } #view-einsatzplanung .raster:has(tr.ls-zieht) thead th { z-index: 4; } #view-einsatzplanung .raster:has(tr.ls-zieht) thead th.ereignis-zelle.hat { z-index: 5; } /* ===================== v786: Fester Rahmen – die Seite scrollt in Ablauf- und Einsatzplan nicht ===================== */ body[data-app-view="einsatzplanung"].ep-fest { overflow: hidden; } /* ===================== v787: Fokuszelle – Zeile und Spalte des angeklickten Feldes (wie Excel) ===================== */ #view-einsatzplanung { --fz: color-mix(in srgb, var(--accent) 11%, transparent); --fz-kopf: color-mix(in srgb, var(--accent) 11%, var(--surface)); --fz-text: color-mix(in srgb, var(--accent) 85%, var(--text)); } html[data-theme="dark"] #view-einsatzplanung { --fz: color-mix(in srgb, var(--accent) 13%, transparent); --fz-kopf: color-mix(in srgb, var(--accent) 13%, var(--surface)); } #view-einsatzplanung .raster tbody tr.fz-zeile > td:not(.name-spalte), #view-einsatzplanung .raster tbody td.fz-spalte { background-image: linear-gradient(var(--fz), var(--fz)); } #view-einsatzplanung .raster tbody tr.fz-zeile > td.we:not(.name-spalte), #view-einsatzplanung .raster tbody td.we.fz-spalte { background-image: linear-gradient(var(--fz), var(--fz)), linear-gradient(var(--we), var(--we)); } #view-einsatzplanung .raster thead th.tag-kopf.fz-spalte { background: var(--fz-kopf); box-shadow: inset 0 -2px 0 var(--accent); } #view-einsatzplanung .raster thead th.tag-kopf.heute-spalte.fz-spalte { box-shadow: inset 2px 0 0 var(--accent-line), inset -2px 0 0 var(--accent-line), inset 0 -2px 0 var(--accent); } #view-einsatzplanung .raster thead th.tag-kopf.fz-spalte .wt, #view-einsatzplanung .raster thead th.tag-kopf.fz-spalte .dt { color: var(--fz-text); } #view-einsatzplanung .raster tr.fz-zeile > .name-spalte { background: var(--fz-kopf); box-shadow: inset -2px 0 0 var(--accent); } #view-einsatzplanung .raster tr.fz-zeile > .name-spalte .person-name { color: var(--fz-text); } #view-einsatzplanung .raster td.zelle.fz-zelle:not(.kopie)::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; border: 2px solid var(--accent); } #view-einsatzplanung .fokus-knopf[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); } /* ===================== v789: Feiertage, Fortschritt, „Wer ist frei?“, Trupps, Freigabe ===================== */ #view-einsatzplanung { --ft: rgba(220, 38, 38, .075); --ft-streifen: rgba(220, 38, 38, .17); --ft-linie: #dc2626; --ft-text: #b42318; --ft-kopf: color-mix(in srgb, var(--surface) 88%, #dc2626); --ampel-gelb: #f5b301; --ampel-gelb-text: #1f1600; --ampel-rot: #c62828; --ampel-rot-text: #ffffff; --fg: #0a7d56; } html[data-theme="dark"] #view-einsatzplanung { --ft: rgba(255, 123, 123, .08); --ft-streifen: rgba(255, 123, 123, .17); --ft-linie: #ff7b7b; --ft-text: #ff9b9b; --ft-kopf: color-mix(in srgb, var(--surface) 88%, #ff7b7b); --ampel-gelb: #f2b24c; --ampel-gelb-text: #1a1d21; --ampel-rot: #ff7b7b; --ampel-rot-text: #1a1d21; --fg: #3ccf95; } /* Feiertage: Spalte schraffiert, Kopf mit roter Oberkante, Name als Fähnchen in der Meilenstein-Spur */ #view-einsatzplanung .ap-ft { position: absolute; top: 0; bottom: 0; background: repeating-linear-gradient(135deg, var(--ft-streifen) 0 2px, transparent 2px 9px), var(--ft); } #view-einsatzplanung .ap-tag.ft, #view-einsatzplanung .raster thead th.tag-kopf.ft { background: var(--ft-kopf); box-shadow: inset 0 3px 0 var(--ft-linie); } #view-einsatzplanung .ap-tag.ft .wt, #view-einsatzplanung .ap-tag.ft .dt, #view-einsatzplanung .raster thead th.tag-kopf.ft .wt, #view-einsatzplanung .raster thead th.tag-kopf.ft .dt { color: var(--ft-text); } #view-einsatzplanung .raster td.ft { background-image: repeating-linear-gradient(135deg, var(--ft-streifen) 0 2px, transparent 2px 9px), linear-gradient(var(--ft), var(--ft)); } #view-einsatzplanung .raster tbody tr.fz-zeile > td.ft:not(.name-spalte), #view-einsatzplanung .raster tbody td.ft.fz-spalte { background-image: linear-gradient(var(--fz), var(--fz)), repeating-linear-gradient(135deg, var(--ft-streifen) 0 2px, transparent 2px 9px), linear-gradient(var(--ft), var(--ft)); } #view-einsatzplanung .raster thead th.ereignis-zelle.ft { background: var(--ft-kopf); } #view-einsatzplanung .ft-marke { position: absolute; top: 5px; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 5px; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--ft-linie); color: var(--ft-text); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: default; z-index: 1; } #view-einsatzplanung .ft-marke svg { width: 11px; height: 11px; flex: 0 0 auto; } #view-einsatzplanung .raster th.ereignis-zelle .ft-marke { left: 3px; } #view-einsatzplanung .vb .vb-ft { position: absolute; top: 0; bottom: 0; pointer-events: none; background: repeating-linear-gradient(135deg, color-mix(in srgb, currentColor 40%, transparent) 0 2px, transparent 2px 6px); box-shadow: inset 2px 0 0 color-mix(in srgb, currentColor 60%, transparent), inset -2px 0 0 color-mix(in srgb, currentColor 60%, transparent); } #view-einsatzplanung .vb .nm, #view-einsatzplanung .vb .bz, #view-einsatzplanung .vb .fs, #view-einsatzplanung .vb .nacht-badge { position: relative; z-index: 1; } #view-einsatzplanung .ft-hinweis { display: flex; gap: 7px; align-items: flex-start; margin: 0 0 8px; padding: 7px 10px; border-radius: 8px; background: var(--ft); box-shadow: inset 3px 0 0 var(--ft-linie); color: var(--ft-text); font-size: 12px; font-weight: 600; line-height: 1.35; } #view-einsatzplanung .ft-hinweis svg { width: 13px; height: 13px; flex: 0 0 auto; margin-top: 2px; } #view-einsatzplanung .tagchip.ft { background: repeating-linear-gradient(135deg, var(--ft-streifen) 0 2px, transparent 2px 7px), var(--ft); color: var(--ft-text); box-shadow: inset 0 0 0 1px var(--ft-linie); cursor: default; } #view-einsatzplanung .tagchip.ft b { display: inline-flex; height: 15px; align-items: center; } #view-einsatzplanung .tagchip.ft svg { width: 12px; height: 12px; } #view-einsatzplanung .ft-text { display: inline-flex; align-items: center; gap: 5px; color: var(--ft-text); font-weight: 650; } #view-einsatzplanung .ft-text svg { width: 12px; height: 12px; flex: 0 0 auto; } /* Fortschritt am Balken: Streifen unten in Schriftfarbe (Balkenfarbe bleibt exakt) und Prozent – gelb/rot bei Rückstand */ #view-einsatzplanung .vb .vb-spur { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 4px; border-radius: 2px; background: color-mix(in srgb, currentColor 24%, transparent); pointer-events: none; } #view-einsatzplanung .vb .vb-spur i { display: block; height: 100%; border-radius: inherit; background: currentColor; } #view-einsatzplanung .vb .fs { margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px rgba(15, 23, 42, .14); } #view-einsatzplanung .vb .fs + .bz { margin-left: 0; } #view-einsatzplanung .vb .fs.gelb, #view-einsatzplanung .vb .fs.rot { box-shadow: 0 0 0 1px rgba(15, 23, 42, .45); } #view-einsatzplanung .vb .fs-punkt { position: relative; z-index: 1; margin-left: auto; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px rgba(15, 23, 42, .4); } #view-einsatzplanung .vb .fs-punkt.gelb { background: var(--ampel-gelb); } #view-einsatzplanung .vb .fs-punkt.rot { background: var(--ampel-rot); } #view-einsatzplanung .vb .fs-punkt + .bz { margin-left: 4px; } #view-einsatzplanung .fg-knopf .fg-zahl { margin-left: 2px; } #view-einsatzplanung .vb .fs.gelb, #view-einsatzplanung .fs-chip.gelb { background: var(--ampel-gelb); color: var(--ampel-gelb-text); } #view-einsatzplanung .vb .fs.rot, #view-einsatzplanung .fs-chip.rot { background: var(--ampel-rot); color: var(--ampel-rot-text); } #view-einsatzplanung .vb .bz[data-luecke] { cursor: pointer; } #view-einsatzplanung .vb .bz[data-luecke]:hover { box-shadow: 0 0 0 2px var(--bad); } #view-einsatzplanung .fs-chip { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-size: 11px; font-weight: 750; vertical-align: 1px; } /* Fortschritt im Vorgang */ #view-einsatzplanung .fs-block { display: grid; gap: 8px; } #view-einsatzplanung .fs-block .bes-kopf { margin-bottom: 0; } #view-einsatzplanung .fs-wert { font-size: 14px; font-weight: 750; color: var(--text); } #view-einsatzplanung .fs-wert.leer { font-size: 12.5px; font-weight: 600; color: var(--text-3); } #view-einsatzplanung .fs-balken { position: relative; height: 8px; border-radius: 999px; background: var(--surface-3); box-shadow: inset 0 0 0 1px var(--border); } #view-einsatzplanung .fs-balken i { display: block; height: 100%; border-radius: inherit; background: var(--accent); } #view-einsatzplanung .fs-balken.gelb i { background: var(--ampel-gelb); } #view-einsatzplanung .fs-balken.rot i { background: var(--ampel-rot); } #view-einsatzplanung .fs-zeit { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--text); } #view-einsatzplanung .fs-zeile { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 22px; } #view-einsatzplanung .fs-zeile .klein { color: var(--text-3); } #view-einsatzplanung .fs-ampel { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; } #view-einsatzplanung .fs-ampel svg { width: 12px; height: 12px; } #view-einsatzplanung .fs-ampel.rot { background: var(--ampel-rot); color: var(--ampel-rot-text); } #view-einsatzplanung .fs-ampel.gelb { background: var(--ampel-gelb); color: var(--ampel-gelb-text); } #view-einsatzplanung .fs-ampel.ok, #view-einsatzplanung .fs-ampel.fertig { background: var(--ok-soft); color: var(--ok); } #view-einsatzplanung .fs-wahl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)) 58px; gap: 4px; } #view-einsatzplanung .fs-wahl button { height: 30px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; font-weight: 650; text-align: center; white-space: nowrap; } #view-einsatzplanung .fs-wahl button:hover:not(:disabled) { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); } #view-einsatzplanung .fs-wahl button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; } #view-einsatzplanung .fs-wahl button:disabled { cursor: default; opacity: .6; } #view-einsatzplanung .fs-wahl .fs-zahl { height: 30px; min-width: 0; padding: 0 6px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); text-align: center; font-size: 12.5px; } #view-einsatzplanung .fs-hinweis { margin: 0; color: var(--text-3); font-size: 12px; } /* „Wer ist frei?“ */ #view-einsatzplanung .pop.wf { width: min(380px, calc(100vw - 16px)); } #view-einsatzplanung .wf-kopf { display: flex; align-items: center; gap: 8px; min-height: 28px; } #view-einsatzplanung .wf-kopf .titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .wf-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: 0 0 auto; color: var(--text-3); } #view-einsatzplanung .wf-nav button { width: 28px; height: 28px; border-radius: 7px; display: inline-grid; place-items: center; color: var(--text-2); } #view-einsatzplanung .wf-nav button:hover:not(:disabled) { background: var(--surface-3); } #view-einsatzplanung .wf-nav button:disabled { opacity: .35; cursor: default; } #view-einsatzplanung .wf-nav svg { width: 16px; height: 16px; } #view-einsatzplanung .wf-nav .num { min-width: 30px; text-align: center; font-size: 12px; } #view-einsatzplanung .wf-vorgang { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--text-2); } #view-einsatzplanung .wf-vn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .wf-bedarf { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #view-einsatzplanung .wf-bedarf .tb-stepper .knopf { width: 34px; height: 30px; } #view-einsatzplanung .wf-bedarf .tb-zahl { min-width: 28px; font-size: 20px; } #view-einsatzplanung .wf-stand { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } #view-einsatzplanung .wf-stand.ok { background: var(--ok-soft); color: var(--ok); } #view-einsatzplanung .wf-stand.fehlt { background: var(--bad-soft); color: var(--bad); } #view-einsatzplanung .wf-std { justify-self: start; } #view-einsatzplanung .wf-liste { display: grid; gap: 2px; max-height: min(320px, 46vh); overflow: auto; margin: 0 -8px; padding: 0 8px; border-top: 1px solid var(--grid); } #view-einsatzplanung .wf-titel { display: flex; align-items: center; justify-content: space-between; margin: 0; padding: 10px 6px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .wf-zeile { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 42px; padding: 4px 6px; border-radius: 8px; } #view-einsatzplanung .wf-zeile:hover { background: var(--surface-2); } #view-einsatzplanung .wf-text { display: grid; min-width: 0; } #view-einsatzplanung .wf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; } #view-einsatzplanung .wf-grund { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--text-3); } #view-einsatzplanung .wf-warn { color: var(--warn); font-weight: 700; } #view-einsatzplanung .wf-trupp svg { width: 15px; height: 15px; } #view-einsatzplanung .wf-zeile .knopf { padding: 0 10px; font-size: 12px; } #view-einsatzplanung .wf-andere { justify-self: start; margin: 8px 6px 4px; } #view-einsatzplanung .wf .leer-hinweis { padding: 6px 6px 8px; } #view-einsatzplanung .wf .fuss2 { flex-wrap: wrap; } #view-einsatzplanung .luecke-knopf { border: 0; background: none; padding: 0; font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; } #view-einsatzplanung .luecke-knopf:hover { text-decoration-style: solid; } /* Trupps */ #view-einsatzplanung .eintragen .chip > svg { width: 15px; height: 15px; flex: 0 0 auto; color: var(--text-2); } #view-einsatzplanung .tr-dialog { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; min-height: 320px; } #view-einsatzplanung .tr-liste { display: grid; gap: 8px; align-content: start; } #view-einsatzplanung .tr-liste > .knopf { justify-self: start; } #view-einsatzplanung .tr-detail { display: grid; gap: 12px; align-content: start; min-width: 0; } #view-einsatzplanung .tr-personen { display: grid; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 10px; } #view-einsatzplanung .tr-gruppe { position: sticky; top: 0; z-index: 1; padding: 7px 12px; background: var(--surface-2); border-bottom: 1px solid var(--grid); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .tr-person { display: grid; grid-template-columns: 18px 26px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--grid); cursor: pointer; } #view-einsatzplanung .tr-person:last-child { border-bottom: 0; } #view-einsatzplanung .tr-person:hover { background: var(--surface-2); } #view-einsatzplanung .tr-pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 600; color: var(--text); } #view-einsatzplanung .tr-anders { font-size: 11px; font-weight: 650; color: var(--text-3); padding: 2px 7px; border: 1px solid var(--border); border-radius: 999px; white-space: nowrap; } #view-einsatzplanung .tr-detail > .knopf.gefahr { justify-self: start; } /* Feiertage (Verwalten) */ #view-einsatzplanung .ft-liste { display: grid; border: 1px solid var(--border); border-radius: 10px; overflow: clip; max-height: 46vh; overflow-y: auto; } #view-einsatzplanung .ft-zeile { display: grid; grid-template-columns: 122px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 40px; padding: 0 12px; border-bottom: 1px solid var(--grid); text-align: left; font-size: 13px; } #view-einsatzplanung .ft-zeile:hover { background: var(--surface-2); } #view-einsatzplanung .ft-datum { color: var(--text-2); font-weight: 650; } #view-einsatzplanung .ft-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } #view-einsatzplanung .ft-betrifft { font-size: 12px; color: var(--text-3); white-space: nowrap; } #view-einsatzplanung .ft-betrifft.an { color: var(--ft-text); font-weight: 650; } #view-einsatzplanung .ft-jahr { position: sticky; top: 0; z-index: 1; } /* Freigabe für die Monteure */ #view-einsatzplanung .fg-knopf .fg-zahl { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--ampel-gelb); color: var(--ampel-gelb-text); font-size: 11.5px; font-weight: 800; } #view-einsatzplanung .fg-knopf.frei svg { color: var(--fg); } #view-einsatzplanung .pop.fg { width: min(440px, calc(100vw - 16px)); } #view-einsatzplanung .fg-reihe { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, auto); gap: 6px; align-items: center; } #view-einsatzplanung .fg-reihe input[type="date"] { height: 32px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); min-width: 0; } #view-einsatzplanung .fg-reihe .knopf { padding: 0 9px; font-size: 12px; } #view-einsatzplanung .fg-liste { display: grid; max-height: min(260px, 36vh); overflow: auto; border: 1px solid var(--border); border-radius: 10px; } #view-einsatzplanung .fg-liste .abschnitt-titel { position: sticky; top: 0; z-index: 1; margin: 0; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--grid); } #view-einsatzplanung .fg-zeile { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; align-items: center; padding: 7px 12px; border-bottom: 1px solid var(--grid); text-align: left; } #view-einsatzplanung .fg-zeile:last-child { border-bottom: 0; } #view-einsatzplanung .fg-zeile:hover { background: var(--surface-2); } #view-einsatzplanung .fg-text { display: grid; min-width: 0; font-size: 12.5px; } #view-einsatzplanung .fg-text b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 650; } #view-einsatzplanung .fg-text .klein { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); } #view-einsatzplanung .fg-ok { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--ok); font-weight: 650; } #view-einsatzplanung .fg-ok svg { width: 14px; height: 14px; } #view-einsatzplanung .raster .fg-linie { position: absolute; top: 0; bottom: 0; right: -1px; width: 3px; background: var(--fg); z-index: 4; pointer-events: none; } #view-einsatzplanung .raster td.zelle .gm { position: absolute; top: 0; right: 0; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 0; border-color: transparent var(--ampel-gelb) transparent transparent; z-index: 4; } #view-einsatzplanung .geaendert-marke { display: inline-flex; align-items: center; height: 18px; margin-left: 6px; padding: 0 7px; border-radius: 999px; background: var(--ampel-gelb); color: var(--ampel-gelb-text); font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; white-space: nowrap; flex: 0 0 auto; } #view-einsatzplanung .fg-noch { color: var(--text-3); font-style: italic; } #view-einsatzplanung .mh-freigabe { font-size: 12px; color: var(--text-3); } /* Scrollende Listen im Raster: Zeilen nie unter ihren Inhalt schrumpfen lassen (v775-Falle) */ #view-einsatzplanung .ft-liste, #view-einsatzplanung .tr-personen, #view-einsatzplanung .fg-liste, #view-einsatzplanung .wf-liste, #view-einsatzplanung .tr-dialog, #view-einsatzplanung .tr-liste, #view-einsatzplanung .tr-detail { grid-auto-rows: max-content; } #view-einsatzplanung .liste-dlg .dialog-inhalt { grid-auto-rows: max-content; } @media (max-width: 640px) { #view-einsatzplanung .tr-dialog { grid-template-columns: minmax(0, 1fr); min-height: 0; } /* Freigabe in der Eintragen-Leiste: nur Symbol + Zähler – die Leiste darf am Handy nicht breiter werden */ #view-einsatzplanung .fg-knopf { padding: 0 7px; gap: 4px; } #view-einsatzplanung .fg-knopf .fg-text { display: none; } #view-einsatzplanung .ft-zeile { grid-template-columns: 104px minmax(0, 1fr); padding: 6px 12px; } #view-einsatzplanung .ft-betrifft { grid-column: 2; } #view-einsatzplanung .fg-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); } #view-einsatzplanung .fg-reihe input[type="date"] { grid-column: 1 / -1; } #view-einsatzplanung .fs-wahl { grid-template-columns: repeat(6, minmax(0, 1fr)); } #view-einsatzplanung .fs-wahl .fs-zahl { grid-column: 1 / -1; } } /* ===================== v793: Heute und Meilensteine deutlicher (gewählt: Variante B „Stark“) ===================== */ #view-einsatzplanung { --ms-std: var(--warn); --ms-text-std: #ffffff; } html[data-theme="dark"] #view-einsatzplanung { --ms-text-std: #1a1d21; } /* Ablaufplan: eigene Ebene über allen Zeilen (auch den grauen Bereichszeilen), unter den Balken */ #view-einsatzplanung .ap-vg { position: absolute; top: 96px; bottom: 0; left: var(--nb); pointer-events: none; z-index: 1; } #view-einsatzplanung .ap-vg .ap-heute, #view-einsatzplanung .ap-vg .ap-mslinie { position: absolute; top: 0; bottom: 0; width: auto; border: 0; } #view-einsatzplanung .ap-vg .ap-heute::before, #view-einsatzplanung .ap-vg .ap-mslinie::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; } #view-einsatzplanung .vb { z-index: 2; } /* Meilenstein-Etikett: Fähnchen in der exakten Meilensteinfarbe, Schrift Schwarz/Weiß nach WCAG */ #view-einsatzplanung .ms { background: var(--ms, var(--ms-std)); color: var(--ms-text, var(--ms-text-std)); border-radius: 999px; margin-left: -6px; padding: 0 9px 0 6px; } #view-einsatzplanung .ms::before { background: currentColor; } #view-einsatzplanung .ms:hover { color: var(--ms-text, var(--ms-text-std)); text-decoration: none; filter: brightness(1.08); } #view-einsatzplanung .raster th.ereignis-zelle .ms { margin-left: 0; } #view-einsatzplanung .ms.ms-vorschau { margin-left: 0; padding: 2px 9px 2px 6px; } /* Einsatzplan: Meilenstein-Tag eingerahmt durch alle Zeilen (wie heute), im Kopf unterstrichen */ #view-einsatzplanung .raster td.ms-spalte, #view-einsatzplanung .raster th.ms-spalte { box-shadow: inset var(--ms-rahmen) 0 0 var(--ms, var(--ms-std)), inset calc(-1 * var(--ms-rahmen)) 0 0 var(--ms, var(--ms-std)); } #view-einsatzplanung .raster thead th.tag-kopf.ms-spalte { box-shadow: inset var(--ms-rahmen) 0 0 var(--ms, var(--ms-std)), inset calc(-1 * var(--ms-rahmen)) 0 0 var(--ms, var(--ms-std)), inset 0 -3px 0 var(--ms, var(--ms-std)); } /* Heute: Band + Linie mit Lichthof, Kopf des Tages hinterlegt; Meilensteine: Band + Linie, größere Fähnchen. v795: Stärke, Band und Heute-Farbe stellt der Anwender ein (Verwalten › Darstellung, je Projekt); JS setzt die Variablen am Ansicht-Element, hier stehen die Vorgaben (= Variante B). */ #view-einsatzplanung { --heute-farbe: var(--accent); --heute-text: var(--on-accent); --heute-wt: var(--fz-text); --heute-linie: 3px; --heute-rahmen: 2px; --heute-band: 11%; --ms-staerke: 3px; --ms-rahmen: 2px; --ms-band: 10%; } #view-einsatzplanung .ap-vg .ap-heute { background: color-mix(in srgb, var(--heute-farbe) var(--heute-band), transparent); } #view-einsatzplanung .ap-vg .ap-heute::before { width: var(--heute-linie); margin-left: calc(var(--heute-linie) / -2); background: var(--heute-farbe); box-shadow: 0 0 0 var(--heute-linie) color-mix(in srgb, var(--heute-farbe) 22%, transparent); } #view-einsatzplanung .ap-tag.heute, #view-einsatzplanung .raster thead th.tag-kopf.heute { background: color-mix(in srgb, var(--heute-farbe) 14%, var(--surface)); box-shadow: inset 0 -3px 0 var(--heute-farbe); } #view-einsatzplanung .ap-tag.heute .dt, #view-einsatzplanung .raster thead th.tag-kopf.heute .dt { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--heute-farbe); color: var(--heute-text); } #view-einsatzplanung .ap-tag.heute .wt, #view-einsatzplanung .raster thead th.tag-kopf.heute .wt { color: var(--heute-wt); font-weight: 800; } #view-einsatzplanung .raster td.heute-spalte, #view-einsatzplanung .raster th.heute-spalte { box-shadow: inset var(--heute-rahmen) 0 0 var(--heute-farbe), inset calc(-1 * var(--heute-rahmen)) 0 0 var(--heute-farbe); } #view-einsatzplanung .raster thead th.tag-kopf.heute.heute-spalte { box-shadow: inset var(--heute-rahmen) 0 0 var(--heute-farbe), inset calc(-1 * var(--heute-rahmen)) 0 0 var(--heute-farbe), inset 0 -3px 0 var(--heute-farbe); } #view-einsatzplanung .raster tbody tr.person-zeile td.heute-spalte { background-color: color-mix(in srgb, var(--heute-farbe) var(--heute-band), var(--surface)); } #view-einsatzplanung .raster tbody tr.gruppe-zeile td.heute-spalte { background: color-mix(in srgb, var(--heute-farbe) var(--heute-band), var(--surface-3)); } #view-einsatzplanung .ap-vg .ap-mslinie { background: color-mix(in srgb, var(--ms, var(--ms-std)) var(--ms-band), transparent); } #view-einsatzplanung .ap-vg .ap-mslinie::before { width: var(--ms-staerke); margin-left: calc(var(--ms-staerke) / -2); background: var(--ms, var(--ms-std)); } #view-einsatzplanung .raster tbody tr.person-zeile td.ms-spalte { background-color: color-mix(in srgb, var(--ms, var(--ms-std)) var(--ms-band), var(--surface)); } #view-einsatzplanung .ap-tag.ms-tag { box-shadow: inset 0 -4px 0 var(--ms, var(--ms-std)); } #view-einsatzplanung .ms { height: 22px; font-size: 12px; box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .45); } #view-einsatzplanung .ms::before { width: 10px; height: 10px; } /* v795: Darstellung (kleines Fenster unter Verwalten) */ #view-einsatzplanung .pop.darst { width: min(340px, calc(100vw - 16px)); } #view-einsatzplanung .pop.darst .inhalt { gap: 8px; } #view-einsatzplanung .ds-titel { margin: 6px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .ds-zeile { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 32px; } #view-einsatzplanung .ds-zeile .label { font-size: 12.5px; font-weight: 650; color: var(--text-2); } #view-einsatzplanung .ds-farbe { display: flex; align-items: center; gap: 10px; min-width: 0; } #view-einsatzplanung .ds-wahl { display: grid; gap: 4px; } #view-einsatzplanung .ds-wahl.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); } #view-einsatzplanung .ds-wahl.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } #view-einsatzplanung .ds-wahl button { height: 30px; border-radius: 7px; background: var(--surface-3); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); font-size: 12px; font-weight: 650; text-align: center; display: grid; place-items: center; } #view-einsatzplanung .ds-wahl button:hover { box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); } #view-einsatzplanung .ds-wahl button[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; } #view-einsatzplanung .ds-wahl button i { display: block; width: 26px; border-radius: 1px; background: currentColor; } /* ===================== v796: Eigene Tage (z. B. Betriebsschließung) – Farbe exakt; arbeitsfrei schraffiert wie ein Feiertag, sonst getönt ===================== */ #view-einsatzplanung .ap-st { position: absolute; top: 0; bottom: 0; } #view-einsatzplanung .ap-st.frei, #view-einsatzplanung .raster td.st-frei { background-image: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st) 26%, transparent) 0 2px, transparent 2px 9px), linear-gradient(color-mix(in srgb, var(--st) 8%, transparent), color-mix(in srgb, var(--st) 8%, transparent)); } #view-einsatzplanung .ap-st.mark, #view-einsatzplanung .raster td.st-mark { background-image: linear-gradient(color-mix(in srgb, var(--st) 10%, transparent), color-mix(in srgb, var(--st) 10%, transparent)); } #view-einsatzplanung .raster tbody tr.fz-zeile > td.st-frei:not(.name-spalte), #view-einsatzplanung .raster tbody td.st-frei.fz-spalte { background-image: linear-gradient(var(--fz), var(--fz)), repeating-linear-gradient(135deg, color-mix(in srgb, var(--st) 26%, transparent) 0 2px, transparent 2px 9px), linear-gradient(color-mix(in srgb, var(--st) 8%, transparent), color-mix(in srgb, var(--st) 8%, transparent)); } #view-einsatzplanung .raster tbody tr.fz-zeile > td.st-mark:not(.name-spalte), #view-einsatzplanung .raster tbody td.st-mark.fz-spalte { background-image: linear-gradient(var(--fz), var(--fz)), linear-gradient(color-mix(in srgb, var(--st) 10%, transparent), color-mix(in srgb, var(--st) 10%, transparent)); } /* Kopf: Linie oben in der Farbe des Tages (als eigene Fläche, damit Heute- und Feiertagslinien erhalten bleiben) */ #view-einsatzplanung .ap-tag { position: relative; } #view-einsatzplanung .ap-tag.st-frei::before, #view-einsatzplanung .ap-tag.st-mark::before, #view-einsatzplanung .raster thead th.tag-kopf.st-frei::before, #view-einsatzplanung .raster thead th.tag-kopf.st-mark::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--st); pointer-events: none; } /* Etikett: Fähnchen in der exakten Farbe, Schrift Schwarz/Weiß nach WCAG; eckiger als die Meilenstein-Fähnchen */ #view-einsatzplanung .st-marke { position: absolute; top: 5px; display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px 0 5px; border-radius: 5px; background: var(--st); color: var(--st-text); font-size: 11px; font-weight: 700; white-space: nowrap; cursor: default; z-index: 1; box-shadow: 0 0 0 1px rgba(15, 23, 42, .18); } #view-einsatzplanung .st-marke svg { width: 11px; height: 11px; flex: 0 0 auto; } #view-einsatzplanung .st-marke > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .raster th.ereignis-zelle .st-marke { left: 3px; } #view-einsatzplanung .tagchip.st-frei { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--st) 26%, transparent) 0 2px, transparent 2px 7px), color-mix(in srgb, var(--st) 10%, var(--surface)); color: var(--text); box-shadow: inset 0 0 0 1px var(--st); cursor: default; } #view-einsatzplanung .tagchip.st-frei b { display: inline-flex; height: 15px; align-items: center; } #view-einsatzplanung .tagchip.st-frei svg { width: 12px; height: 12px; color: var(--st); } #view-einsatzplanung .st-text { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); font-weight: 650; } #view-einsatzplanung .st-text svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--st); } /* Verwalten › Feiertage und eigene Tage */ #view-einsatzplanung .st-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; } #view-einsatzplanung .lz.lz-st { grid-template-columns: 62px minmax(0, 1fr) 136px 136px 108px 30px; } #view-einsatzplanung .lz.lz-st .haken-zeile { white-space: nowrap; } /* Nur eine Bildlaufleiste: die Feiertagsliste nimmt den Rest der Fensterhöhe */ #view-einsatzplanung .dialog.ft-dialog .dialog-inhalt { display: flex; flex-direction: column; } #view-einsatzplanung .dialog.ft-dialog .dialog-inhalt > * { flex: 0 0 auto; } #view-einsatzplanung .dialog.ft-dialog .ft-liste { flex: 1 1 auto; min-height: 150px; max-height: none; } @media (max-width: 860px) { #view-einsatzplanung .lz.kopf.lz-st { display: none; } #view-einsatzplanung .lz.lz-st { row-gap: 8px; padding-top: 10px; padding-bottom: 10px; grid-template-columns: 62px minmax(0, 1fr) minmax(0, 1fr) 30px; grid-template-areas: "f n n x" "v v b b" "w w w w"; } /* Am Handy nur eine Bildlaufleiste (das Fenster), die Feiertagsliste steht ganz darin */ #view-einsatzplanung .dialog.ft-dialog .ft-liste { flex: 0 0 auto; min-height: 0; overflow: clip; } #view-einsatzplanung .lz-st > :nth-child(1) { grid-area: f; } #view-einsatzplanung .lz-st > :nth-child(2) { grid-area: n; } #view-einsatzplanung .lz-st > :nth-child(3) { grid-area: v; } #view-einsatzplanung .lz-st > :nth-child(4) { grid-area: b; } #view-einsatzplanung .lz-st > :nth-child(5) { grid-area: w; } #view-einsatzplanung .lz-st > :nth-child(6) { grid-area: x; } } /* ===================== v797: Meilensteinspur ohne Überlagerung – weitere Reihen schieben Kopf und Linien-Ebene nach unten ===================== */ #view-einsatzplanung .ap-hg, #view-einsatzplanung .ap-vg { top: calc(96px + var(--spur-plus, 0px)); } #view-einsatzplanung .raster thead tr.r1 th { height: calc(28px + var(--spur-plus, 0px)); } #view-einsatzplanung .raster thead tr.r2 th { top: calc(28px + var(--spur-plus, 0px)); } #view-einsatzplanung .raster thead tr.r3 th { top: calc(58px + var(--spur-plus, 0px)); } #view-einsatzplanung .ft-marke > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* v804: Reiter und Bedienleiste kompakt in EINER Zeile – in der App-Kopfzeile („angedockt“), wenn sie dort hineinpasst, sonst direkt darunter („kompakt“). Meilenstein, Verwalten, Exportieren und Leiste als Symbol mit Hinweistext, Titel „Ablaufplan“ entfällt (steht im Reiter). Angedockt: 38 px wie die Kopfknöpfe, Mitte auf einer Achse, Trennstrich zu den Knöpfen rechts wie links zwischen Start und Titel. Handy (≤ 900 px): unverändert. */ #view-einsatzplanung .ansicht-kopf.angedockt { position: fixed; z-index: 61; margin: 0; flex-wrap: nowrap; gap: 16px; --h: 38px; } #view-einsatzplanung .ansicht-kopf.angedockt .reiter { flex: 0 0 auto; overflow: visible; } #view-einsatzplanung .ansicht-kopf.angedockt .kopf-rechts { flex: 0 0 auto; flex-wrap: nowrap; } #view-einsatzplanung .ansicht-kopf.angedockt::after { content: ""; flex: 0 0 1px; align-self: center; height: 22px; background: var(--border-strong); } #view-einsatzplanung .ansicht-kopf.angedockt .ep-titel, #view-einsatzplanung .ansicht-kopf.kompakt .ep-titel { display: none; } #view-einsatzplanung .ansicht-kopf.angedockt .kt, #view-einsatzplanung .ansicht-kopf.kompakt .kt { display: none; } #view-einsatzplanung .ansicht-kopf.angedockt .dock-symbol, #view-einsatzplanung .ansicht-kopf.kompakt .dock-symbol { width: var(--h); padding: 0; } #view-einsatzplanung .ansicht-kopf.angedockt .speicherstand:not([data-stand="fehler"]), #view-einsatzplanung .ansicht-kopf.kompakt .speicherstand:not([data-stand="fehler"]) { width: 28px; padding: 0; } #view-einsatzplanung .ansicht-kopf.angedockt .speicherstand:not([data-stand="fehler"]) > span, #view-einsatzplanung .ansicht-kopf.kompakt .speicherstand:not([data-stand="fehler"]) > span { display: none; } #view-einsatzplanung .ansicht-kopf.angedockt .datum-nav .knopf.still, #view-einsatzplanung .ansicht-kopf.kompakt .datum-nav .knopf.still { width: 32px; padding: 0; } #view-einsatzplanung .ansicht-kopf.angedockt .zeitraum-knopf, #view-einsatzplanung .ansicht-kopf.kompakt .zeitraum-knopf { min-width: 168px; } #view-einsatzplanung .speicherstand { justify-content: center; } /* v804: Leiste im Ablaufplan ausgeblendet – der Plan nimmt die ganze Breite */ #view-einsatzplanung .flaeche.ohne-leiste { grid-template-columns: minmax(0, 1fr); } #view-einsatzplanung .leiste-knopf .leiste-voll { opacity: 0; } #view-einsatzplanung .leiste-knopf[aria-pressed="true"] .leiste-voll { opacity: .3; } #view-einsatzplanung .leiste-knopf[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); } /* v805: Fenster „Einsatz zuweisen“ – alle Personen, nach Nutzen geordnet. Raster füllt das Fenster, Kopf und Personen bleiben stehen; Felder 38 px hoch (gut zu treffen), frei = gestrichelt mit +, eingeteilt = exakte Vorgangsfarbe, belegt = ruhige Fläche mit Farbstreifen des anderen Vorgangs, abwesend = Kürzel + Name. Breite nach Tagen. */ #view-einsatzplanung .dialog.zw-dialog { max-height: calc(100dvh - 32px); } #view-einsatzplanung .zw-dialog .dialog-inhalt { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 14px; } #view-einsatzplanung .zw2 { display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; min-height: 0; } #view-einsatzplanung .zw-info { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 13px; color: var(--text-2); } #view-einsatzplanung .zw-info b { color: var(--text); font-weight: 650; } #view-einsatzplanung .zw-info .punkt { width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; } #view-einsatzplanung .zw-trenner { width: 1px; height: 14px; background: var(--border-strong); } #view-einsatzplanung .zw-werkzeug { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } #view-einsatzplanung .zw-suche { position: relative; display: block; flex: 0 1 240px; min-width: 180px; margin: 0; } #view-einsatzplanung .zw-suche svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--text-3); pointer-events: none; } #view-einsatzplanung .zw-suche input { width: 100%; height: 34px; margin: 0; padding: 0 10px 0 34px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); color: var(--text); font: inherit; font-size: 13px; } #view-einsatzplanung .zw-suche input:focus { outline: 2px solid var(--accent-line); outline-offset: 0; border-color: var(--accent); } #view-einsatzplanung .zw-chips { display: flex; flex-wrap: wrap; gap: 6px; } #view-einsatzplanung .zw-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; } #view-einsatzplanung .zw-chip .num { color: var(--text-3); font-weight: 600; } #view-einsatzplanung .zw-chip:hover { border-color: var(--border-strong); } #view-einsatzplanung .zw-chip[aria-pressed="true"] { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung .zw-chip[aria-pressed="true"] .num { color: inherit; } #view-einsatzplanung .zw-chip.eigen::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } #view-einsatzplanung .zw-legende { margin-left: auto; display: inline-flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--text-3); } #view-einsatzplanung .zw-legende > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } #view-einsatzplanung .zw-mini { display: inline-block; width: 16px; height: 16px; border-radius: 4px; } #view-einsatzplanung .zw-mini.an { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .16); } #view-einsatzplanung .zw-mini.frei { border: 1.5px dashed var(--border-strong); } #view-einsatzplanung .zw-mini.belegt { background: linear-gradient(90deg, var(--text-3) 0 3px, var(--surface-3) 3px); } #view-einsatzplanung .zw-vorschlag { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--accent-line); border-radius: 10px; background: var(--accent-soft); color: var(--text); font-size: 13px; } #view-einsatzplanung .zw-vorschlag[hidden] { display: none; } #view-einsatzplanung .zw-vorschlag svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--accent); } #view-einsatzplanung .zw-vorschlag > span { flex: 1 1 auto; min-width: 0; } #view-einsatzplanung .zw-vorschlag .knopf { flex: 0 0 auto; } #view-einsatzplanung .zw-raster { flex: 0 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overscroll-behavior: contain; } #view-einsatzplanung .zw-tab { border-collapse: separate; border-spacing: 0; width: 100%; table-layout: fixed; font-size: 13px; } #view-einsatzplanung .zw-tab thead th { position: sticky; top: 0; z-index: 3; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); } #view-einsatzplanung .zw-ecke { left: 0; z-index: 4 !important; width: 300px; min-width: 300px; padding: 0 14px; border-right: 1px solid var(--border-strong); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); } #view-einsatzplanung .zw-tag { min-width: 84px; height: 64px; padding: 6px 8px; text-align: center; font-weight: 600; color: var(--text-3); vertical-align: middle; } #view-einsatzplanung .zw-wt { display: block; font-size: 11px; } #view-einsatzplanung .zw-tag b { display: block; font-size: 13px; color: var(--text); } #view-einsatzplanung .zw-tag.heute b { color: var(--accent); } #view-einsatzplanung .zw-bes { position: relative; display: block; width: 100%; max-width: 76px; height: 18px; margin: 5px auto 0; border-radius: 999px; overflow: hidden; } #view-einsatzplanung .zw-bes i { position: absolute; inset: 0 auto 0 0; } #view-einsatzplanung .zw-bes em { position: relative; display: block; font-style: normal; font-size: 11.5px; font-weight: 800; line-height: 18px; } #view-einsatzplanung .zw-bes.fehlt { background: var(--bad-soft); color: var(--bad); } #view-einsatzplanung .zw-bes.fehlt i { background: color-mix(in srgb, var(--bad) 16%, transparent); } #view-einsatzplanung .zw-bes.ok { background: var(--ok-soft); color: var(--ok); } #view-einsatzplanung .zw-bes.mehr { background: var(--warn-soft); color: var(--warn); } /* v806: freie Tage im Fenster – markiert, planbar, ohne Bedarf */ #view-einsatzplanung .zw-tab thead th.zw-tag.frei { background: var(--surface-3); } #view-einsatzplanung .zw-tag.frei.ft b { color: var(--bad); } #view-einsatzplanung .zw-bes.frei { background: var(--surface); color: var(--text-2); box-shadow: inset 0 0 0 1px var(--border); } #view-einsatzplanung .zw-td.frei { background: var(--we); } #view-einsatzplanung .zw-tab tbody th, #view-einsatzplanung .zw-tab tbody td { border-bottom: 1px solid var(--grid); } #view-einsatzplanung .zw-person { position: sticky; left: 0; z-index: 2; width: 300px; min-width: 300px; padding: 0 10px 0 14px; border-right: 1px solid var(--border-strong); background: var(--surface); text-align: left; font-weight: 400; } #view-einsatzplanung .zw-pzelle { display: flex; align-items: center; gap: 10px; min-height: 46px; } #view-einsatzplanung .zw-pt { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; } #view-einsatzplanung .zw-pn { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 650; color: var(--text); } #view-einsatzplanung .zw-pm { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; font-size: 11.5px; color: var(--text-3); white-space: nowrap; } #view-einsatzplanung .zw-pi { overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .zw-gr { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); font-weight: 600; } #view-einsatzplanung .zw-gr.eigen { background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung .zw-alle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--accent); font-size: 12px; font-weight: 650; white-space: nowrap; cursor: pointer; } #view-einsatzplanung .zw-alle svg { width: 13px; height: 13px; } #view-einsatzplanung .zw-alle:hover { border-color: var(--accent-line); background: var(--accent-soft); } #view-einsatzplanung .zw-alle.raus { color: var(--text-2); } #view-einsatzplanung .zw-alle.raus:hover { border-color: var(--border-strong); background: var(--surface-2); } #view-einsatzplanung .zw-td { height: 47px; padding: 4px; text-align: center; vertical-align: middle; } #view-einsatzplanung .zw-z { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; height: 38px; margin: 0; border-radius: 8px; font-size: 11.5px; user-select: none; } #view-einsatzplanung button.zw-z { padding: 0; border: 0; cursor: pointer; font: inherit; } #view-einsatzplanung .zw-z svg { width: 16px; height: 16px; } #view-einsatzplanung .zw-z.an { box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .16); } #view-einsatzplanung .zw-z.an:hover { box-shadow: inset 0 0 0 2px var(--text); } #view-einsatzplanung .zw-z.an.zug { opacity: .4; } #view-einsatzplanung .zw-z.frei { border: 1.5px dashed var(--border-strong); background: transparent; color: transparent; } #view-einsatzplanung .zw-z.frei:hover, #view-einsatzplanung .zw-z.frei.zug { border-style: solid; border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung .zw-z.frei.vor { border: 2px solid var(--accent); background: var(--accent-soft); color: var(--accent); } #view-einsatzplanung .zw-z.frei.vor.zug { opacity: .45; } #view-einsatzplanung .zw-z.frei:focus-visible, #view-einsatzplanung .zw-z.an:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #view-einsatzplanung .zw-z.belegt { position: relative; justify-content: flex-start; overflow: hidden; padding: 0 8px 0 12px; background: var(--surface-3); color: var(--text-2); font-weight: 600; cursor: default; } #view-einsatzplanung .zw-z.belegt::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: var(--vf); } #view-einsatzplanung .zw-z.belegt span, #view-einsatzplanung .zw-z.art span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #view-einsatzplanung .zw-z.art { justify-content: flex-start; gap: 7px; padding: 0 8px; color: var(--text-3); font-weight: 600; cursor: default; } #view-einsatzplanung .zw-z.art b { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 6px; border-radius: 6px; font-size: 11px; font-weight: 800; } #view-einsatzplanung .zw-zeile:hover > th, #view-einsatzplanung .zw-zeile:hover > td { background: var(--surface-2); } #view-einsatzplanung .zw-zeile.belegt .zw-pn { color: var(--text-2); } #view-einsatzplanung .zw-abschnitt th { height: 34px; padding: 0; border-bottom: 1px solid var(--border); background: var(--surface-2); text-align: left; } #view-einsatzplanung .zw-ab { position: sticky; left: 0; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); } #view-einsatzplanung .zw-ab .num { padding: 0 7px; border-radius: 999px; background: var(--surface-3); letter-spacing: 0; } #view-einsatzplanung .zw-ab-hinweis { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-3); } #view-einsatzplanung .zw-leer { padding: 28px 14px; text-align: center; color: var(--text-3); } #view-einsatzplanung .zw-summe { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 13px; color: var(--text-2); } #view-einsatzplanung .zw-summe b { color: var(--text); } #view-einsatzplanung .zw-balken { position: relative; flex: 0 0 120px; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } #view-einsatzplanung .zw-balken i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--accent); } #view-einsatzplanung .zw-balken.voll i { background: var(--ok); } #view-einsatzplanung .zw-knoepfe { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; } @media (max-width: 640px) { #view-einsatzplanung .zw-ecke, #view-einsatzplanung .zw-person { width: 168px; min-width: 168px; } #view-einsatzplanung .zw-person { padding: 0 8px 0 10px; } #view-einsatzplanung .zw-pzelle .avatar { display: none; } #view-einsatzplanung .zw-alle { width: 30px; padding: 0; justify-content: center; font-size: 0; gap: 0; } #view-einsatzplanung .zw-alle.raus { display: none; } #view-einsatzplanung .zw-tag { min-width: 64px; } #view-einsatzplanung .zw-z.art span { display: none; } #view-einsatzplanung .zw-suche { flex: 1 1 100%; } #view-einsatzplanung .zw-chips { flex-wrap: nowrap; max-width: 100%; overflow-x: auto; } #view-einsatzplanung .zw-legende { display: none; } #view-einsatzplanung .zw-summe { flex: 1 1 100%; flex-wrap: wrap; row-gap: 6px; } #view-einsatzplanung .zw-balken { flex: 1 1 100%; } #view-einsatzplanung .zw-trenner, #view-einsatzplanung .zw-ab-hinweis { display: none; } #view-einsatzplanung .zw-chips { scrollbar-width: none; } #view-einsatzplanung .zw-chips::-webkit-scrollbar { display: none; } #view-einsatzplanung .zw-pm { flex-wrap: wrap; row-gap: 2px; white-space: normal; } #view-einsatzplanung .zw-vs-text { display: none; } #view-einsatzplanung .zw-vorschlag { flex-wrap: wrap; } } /* v807: Ecktermine – feste Termine kompakt oben (eigene Kopfzeile, linker Akzentstreifen, 20-px-Termine dicht gepackt) */ #view-einsatzplanung .ap-basis-kopf .ap-n, #view-einsatzplanung .ap-basis-kopf .ap-t { background: color-mix(in srgb, var(--accent) 10%, var(--surface-3)); } #view-einsatzplanung .ap-basis-kopf .gruppe-knopf .nm { color: var(--text); } #view-einsatzplanung .ap-basis-kopf .gruppe-knopf .anz { color: var(--text-2); } /* auf der getönten Kopfzeile reicht --text-3 nicht (4,3 : 1) */ #view-einsatzplanung .ap-basis .ap-n { box-shadow: inset 3px 0 0 var(--accent); } #view-einsatzplanung .ap-basis .ap-t { background-color: color-mix(in srgb, var(--accent) 4%, transparent); } #view-einsatzplanung .vb.termin { height: 20px; padding: 0 7px; gap: 0; border-radius: 5px; font-size: 11.5px; overflow: visible; } #view-einsatzplanung .vb.termin .nm { overflow: hidden; text-overflow: ellipsis; } #view-einsatzplanung .vb.termin.aussen .nm { position: absolute; left: calc(100% + 4px); top: 50%; transform: translateY(-50%); overflow: visible; padding: 1px 4px; border-radius: 4px; background: var(--surface); color: var(--text); box-shadow: 0 0 0 1px var(--border); } #view-einsatzplanung .vb.termin.aussen.links .nm { left: auto; right: calc(100% + 4px); } #view-einsatzplanung .eck-hinweis { margin: 0; } /* v807: Gateway – Meilenstein 1. Priorität: „G“, dunkler Rahmen, Raute mit Kern, doppelt kräftige Linie */ #view-einsatzplanung .ms.gateway { font-weight: 800; box-shadow: inset 0 0 0 2px var(--text), 0 2px 6px -2px rgba(15, 23, 42, .45); padding-left: 7px; gap: 5px; } #view-einsatzplanung .ms-g { order: -1; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: -1px; border-radius: 4px; background: var(--text); color: var(--surface); font-size: 10px; font-weight: 900; line-height: 1; vertical-align: 1px; } #view-einsatzplanung .ms.gateway::before { width: 12px; height: 12px; box-shadow: inset 0 0 0 3px currentColor; background: var(--ms, var(--ms-std)); outline: 1.5px solid currentColor; } #view-einsatzplanung .ap-vg .ap-mslinie.gateway::before { width: calc(var(--ms-staerke) * 2 + 1px); margin-left: calc(var(--ms-staerke) * -1 - .5px); box-shadow: 0 0 0 1px color-mix(in srgb, var(--text) 35%, transparent); } #view-einsatzplanung .raute.gateway { outline: 2px solid var(--text); outline-offset: 1px; } #view-einsatzplanung .ms-gateway, #view-einsatzplanung .be-basis { align-items: flex-start; gap: 9px; margin: 2px 0 0; } #view-einsatzplanung .ms-gateway .klein, #view-einsatzplanung .be-basis .klein { display: block; margin-top: 2px; } /* v815: „Einsatz?“ – Person auf der Baustelle eingeplant, aber noch ohne Einsatz (wie in der Excel: hellgrün, rote Schrift). Nur Anzeige; die Fläche hat einen feinen Rand, damit sie sich auch auf getönten Spalten (heute, Meilenstein) abhebt. */ #view-einsatzplanung { --offen-bg: #dcfce7; --offen-rand: #86efac; --offen-text: #b91c1c; } html[data-theme="dark"] #view-einsatzplanung { --offen-bg: #173d26; --offen-rand: #2f6b45; --offen-text: #fca5a5; } #view-einsatzplanung .eintrag.einsatz-offen { background: var(--offen-bg); color: var(--offen-text); border: 1px solid var(--offen-rand); font-weight: 700; } /* mehrere Tage am Stück wirken wie ein Balken: keine Trennlinie zwischen den Tagen */ #view-einsatzplanung .eintrag.einsatz-offen.weiter-l { border-left: 0; } #view-einsatzplanung .eintrag.einsatz-offen.weiter-r { border-right: 0; } #view-einsatzplanung .eintrag.einsatz-offen.nur-zeichen { justify-content: center; padding: 0; } #view-einsatzplanung .tag-detail .marke.einsatz-offen { background: var(--offen-bg); color: var(--offen-text); box-shadow: inset 0 0 0 1px var(--offen-rand); } /* v817: Bemerkung direkt im Balken – Eingabefeld über dem ganzen Block, Hinweis darunter (am unteren Rand darüber) */ #view-einsatzplanung .balken-editor { position: absolute; z-index: 5; display: flex; align-items: center; gap: 6px; padding: 0 4px 0 5px; border: 2px solid var(--accent); border-radius: 6px; background: var(--surface); box-shadow: 0 8px 22px rgba(15, 26, 42, .22); } #view-einsatzplanung .balken-editor .code { flex: 0 0 auto; min-width: 22px; height: 18px; } #view-einsatzplanung .balken-editor .punkt { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; } #view-einsatzplanung .balken-editor input { flex: 1 1 auto; min-width: 0; height: 100%; padding: 0 2px; border: 0; outline: 0; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; font-weight: 600; } #view-einsatzplanung .balken-editor input::placeholder { color: var(--text-3); font-weight: 500; } #view-einsatzplanung .balken-editor-hinweis { position: absolute; left: -2px; top: calc(100% + 5px); width: max-content; padding: 5px 9px; border-radius: 6px; background: var(--text); color: var(--surface); font-size: 11.5px; font-weight: 600; line-height: 1.35; box-shadow: 0 6px 16px rgba(15, 26, 42, .25); pointer-events: none; } #view-einsatzplanung .balken-editor.oben .balken-editor-hinweis { top: auto; bottom: calc(100% + 5px); } /* v818: Schaltfläche „Einsatz?“ in der Leiste „Eintragen“ – gleiche Farben wie die Einträge im Plan */ #view-einsatzplanung .code.einsatz-offen { background: var(--offen-bg); color: var(--offen-text); box-shadow: inset 0 0 0 1px var(--offen-rand); } /* Meldungen so breit wie ihr Text (vorher durch left: 50 % auf die halbe Breite gedrückt – lange Meldungen brachen am Handy in viele Zeilen um); höchstens Fensterbreite − 32 px */ #view-einsatzplanung .ep-toast { width: max-content; }