/* ===== Workflow-Vorschau: Editor, Aufgaben, Panel ===== */
:root {
    --wf-dunkel: #1f2a37;
    --wf-lime: #a8ec00;
    --wf-blau: #4f6bed;
    --wf-gruen: #2e9e5b;
    --wf-rot: #d9534f;
    --wf-rand: #e3e7ee;
    --wf-text2: #64748b;
}

/* Zaehler im Menue / Gruppen */
.wf-zaehler {
    display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px;
    border-radius: 10px; background: var(--wf-lime); color: var(--wf-dunkel); font-size: .72rem; font-weight: 700;
}

/* ---------- Editor ---------- */
.wf-editor { display: flex; flex-direction: column; height: calc(100vh - 96px); margin: -8px 0; }
.wf-leiste {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 12px; margin-bottom: 10px;
    background: #fff; border: 1px solid var(--wf-rand); border-radius: 12px; box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
}
.wf-leiste .wf-name { max-width: 300px; }
.wf-leiste .wf-name input { font-size: 1.15rem; font-weight: 600; }
.wf-leiste .wf-doctyp { max-width: 230px; }
.wf-arbeitsbereich { display: flex; gap: 12px; flex: 1; min-height: 0; }

.wf-canvas {
    position: relative; flex: 1; overflow: auto; border-radius: 14px; border: 1px solid var(--wf-rand);
    background-color: #f8fafc;
    background-image: radial-gradient(circle, #cbd5e1 1px, transparent 1.2px);
    background-size: 22px 22px;
    touch-action: none;
}
.wf-canvas.wf-verbindet { cursor: crosshair; }
.wf-flaeche { position: relative; width: 2600px; height: 1400px; }
.wf-kanten { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.wf-kante { fill: none; stroke-width: 2.4; stroke-dasharray: 7 5; animation: wf-fluss 1.2s linear infinite; }
.wf-kante.art-0 { stroke: var(--wf-blau); }
.wf-kante.art-1 { stroke: var(--wf-gruen); }
.wf-kante.art-2 { stroke: var(--wf-rot); }
.wf-kante-temp { stroke: var(--wf-dunkel); stroke-dasharray: 4 4; opacity: .7; }
@keyframes wf-fluss { to { stroke-dashoffset: -24; } }

.wf-knoten {
    position: absolute; user-select: none; cursor: grab; transition: box-shadow .15s, transform .15s;
}
.wf-knoten.wf-zieht { cursor: grabbing; transition: none; z-index: 5; transform: scale(1.02); }
.wf-knoten.wf-ziel-hover { outline: 3px solid var(--wf-lime); outline-offset: 3px; }

.wf-start, .wf-ende {
    display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 10px; border-radius: 40px;
    background: var(--wf-dunkel); color: #fff; box-shadow: 0 6px 18px rgba(31, 42, 55, .25); min-width: 170px;
}
.wf-start-icon {
    width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: var(--wf-lime); color: var(--wf-dunkel);
}
.wf-start-icon.ende { background: #fff; }
.wf-start .wf-knoten-sub, .wf-ende .wf-knoten-sub { color: #cbd5e1; font-size: .75rem; }
.wf-knoten.gewaehlt.wf-start, .wf-knoten.gewaehlt.wf-ende { box-shadow: 0 0 0 3px var(--wf-lime), 0 6px 18px rgba(31, 42, 55, .25); }

.wf-schritt {
    width: 240px; background: #fff; border-radius: 14px; border: 1px solid var(--wf-rand);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08); overflow: visible;
}
.wf-schritt::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--wf-blau), #8b5cf6);
}
.wf-schritt:hover { box-shadow: 0 12px 30px rgba(15, 23, 42, .14); }
.wf-schritt.gewaehlt { border-color: var(--wf-blau); box-shadow: 0 0 0 3px rgba(79, 107, 237, .25), 0 12px 30px rgba(15, 23, 42, .14); }
.wf-schritt-kopf { display: flex; align-items: center; gap: 8px; padding: 14px 14px 6px; }
.wf-nr {
    width: 24px; height: 24px; border-radius: 8px; background: #eef2ff; color: var(--wf-blau);
    display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; font-weight: 700;
}
.wf-knoten-titel { font-weight: 600; font-size: .95rem; line-height: 1.2; }
.wf-schritt-box {
    display: inline-flex; align-items: center; gap: 4px; margin: 0 14px 8px; padding: 2px 10px 2px 6px; border-radius: 20px;
    background: #f1f5f9; color: #334155; font-size: .8rem;
}
.wf-schritt-box.fehlt { background: #fff7ed; color: #c2410c; }
.wf-felder { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 14px 10px; }
.wf-feld { font-size: .72rem; padding: 2px 8px; border-radius: 6px; background: #fefce8; color: #854d0e; border: 1px solid #fde68a; }
.wf-ausgaenge { border-top: 1px solid #f1f5f9; padding: 6px 0 8px; }
.wf-ausgang {
    position: relative; display: flex; align-items: center; justify-content: flex-end; padding: 5px 22px 5px 14px;
    font-size: .82rem; font-weight: 500;
}
.wf-ausgang.art-0 { color: var(--wf-blau); }
.wf-ausgang.art-1 { color: var(--wf-gruen); }
.wf-ausgang.art-2 { color: var(--wf-rot); }
.wf-port-aus, .wf-port-ein {
    position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid currentColor;
    top: 50%; transform: translateY(-50%);
}
.wf-port-aus { right: -8px; cursor: crosshair; z-index: 2; transition: transform .12s; }
.wf-port-aus:hover { transform: translateY(-50%) scale(1.35); background: var(--wf-lime); }
.wf-start .wf-port-aus { color: var(--wf-lime); border-color: var(--wf-lime); background: var(--wf-dunkel); }
.wf-port-ein { left: -8px; top: 22px; color: #94a3b8; }
.wf-ende .wf-port-ein { top: 50%; color: #94a3b8; }
.wf-plus {
    display: block; margin: 2px 14px 0 auto; border: 1px dashed #cbd5e1; background: none; border-radius: 8px;
    color: var(--wf-text2); font: inherit; font-size: .75rem; padding: 2px 10px; cursor: pointer;
}
.wf-plus:hover { border-color: var(--wf-blau); color: var(--wf-blau); }

.wf-pruefung {
    position: sticky; left: 12px; bottom: 12px; float: left; margin-top: -120px; max-width: 420px; z-index: 6;
    background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 12px; padding: 10px 14px; font-size: .82rem;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08);
}
.wf-pruefung.ok { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; display: flex; align-items: center; gap: 6px; margin-top: -56px; }
.wf-pruefung-zeile { margin-top: 3px; }
.wf-tipp {
    position: sticky; right: 12px; bottom: 12px; float: right; margin-top: -44px; z-index: 6; font-size: .75rem;
    color: var(--wf-text2); background: rgba(255, 255, 255, .85); padding: 6px 12px; border-radius: 20px; border: 1px solid var(--wf-rand);
}

.wf-eigenschaften {
    width: 340px; flex-shrink: 0; overflow: auto; background: #fff; border: 1px solid var(--wf-rand); border-radius: 14px;
    padding: 14px 16px; box-shadow: 0 8px 24px rgba(15, 23, 42, .06); animation: wf-rein .18s ease-out;
}
@keyframes wf-rein { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }
.wf-knopf-karte { border: 1px solid var(--wf-rand); border-left: 4px solid var(--wf-blau); border-radius: 10px; padding: 6px 10px 8px; margin-bottom: 10px; }
.wf-knopf-karte.art-1 { border-left-color: var(--wf-gruen); }
.wf-knopf-karte.art-2 { border-left-color: var(--wf-rot); }

/* ---------- Karten (Aufgaben, Uebersicht) ---------- */
.wf-gruppe { display: flex; align-items: center; gap: 8px; margin: 18px 0 10px; font-weight: 600; color: var(--wf-dunkel); }
.wf-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.wf-karte {
    background: #fff; border: 1px solid var(--wf-rand); border-radius: 14px; padding: 14px 16px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04); transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column; gap: 6px;
}
.wf-karte:hover, .wf-karte:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(15, 23, 42, .1); border-color: #c7d2fe; outline: none; }
.wf-karte-kopf { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Langer Dokumenttyp kuerzt sich selbst, die Etiketten (manuell/automatisch, aktiv) bleiben immer ganz sichtbar –
   auch bei laengeren Uebersetzungen (EN/FR). */
.wf-karte-workflow { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--wf-text2); font-weight: 600;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wf-karte-kopf > .wf-startart-tag, .wf-karte-kopf > .wf-status { flex-shrink: 0; white-space: nowrap; }
.wf-karte-titel { font-weight: 600; font-size: 1rem; color: var(--wf-dunkel); word-break: break-word; }
.wf-karte-schritt { display: flex; align-items: center; gap: 6px; color: var(--wf-blau); font-weight: 500; font-size: .88rem; }
.wf-karte-fuss { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--wf-text2); }
.wf-neu { font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 10px; background: var(--wf-lime); color: var(--wf-dunkel); }
.wf-fortschritt { display: flex; gap: 4px; }
.wf-fortschritt span { flex: 1; height: 5px; border-radius: 3px; background: #e2e8f0; }
.wf-fortschritt span.fertig { background: var(--wf-gruen); }
.wf-fortschritt span.aktiv { background: linear-gradient(90deg, var(--wf-blau), #8b5cf6); }
.wf-status { font-size: .7rem; font-weight: 600; padding: 2px 10px; border-radius: 10px; background: #f1f5f9; color: var(--wf-text2); }
.wf-status.aktiv { background: #dcfce7; color: #166534; }
.wf-warn { color: #b45309; }
.wf-mini { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.wf-mini-schritt { font-size: .75rem; padding: 3px 9px; border-radius: 8px; background: #eef2ff; color: #3730a3; }
.wf-mini-pfeil { color: #94a3b8; }
.wf-mini-start { width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--wf-dunkel); color: var(--wf-lime); }
.wf-mini-start.ende { color: #fff; }
.wf-leer { text-align: center; padding: 56px 16px; color: var(--wf-text2); display: flex; flex-direction: column; align-items: center; gap: 6px; }

/* ---------- Panel in der Dokumentansicht ---------- */
.wf-panel { background: #fff; border: 1px solid #c7d2fe; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(79, 107, 237, .08); }
.wf-panel-kopf {
    display: flex; align-items: center; gap: 8px; padding: 10px 14px; color: #fff; font-size: .9rem;
    background: linear-gradient(90deg, var(--wf-dunkel), #34445a);
}
.wf-vorschau { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; padding: 2px 8px; border-radius: 10px; background: var(--wf-lime); color: var(--wf-dunkel); font-weight: 700; }
.wf-stepper { display: flex; align-items: flex-start; padding: 14px 12px 4px; overflow-x: auto; }
.wf-step { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; text-align: center; }
.wf-step-punkt {
    width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: #f1f5f9; color: var(--wf-text2); font-size: .8rem; font-weight: 700; border: 2px solid #e2e8f0;
}
.wf-step.fertig .wf-step-punkt { background: var(--wf-gruen); border-color: var(--wf-gruen); color: #fff; }
.wf-step.aktiv .wf-step-punkt { background: var(--wf-blau); border-color: var(--wf-blau); color: #fff; box-shadow: 0 0 0 4px rgba(79, 107, 237, .2); animation: wf-puls 1.8s ease-in-out infinite; }
@keyframes wf-puls { 50% { box-shadow: 0 0 0 7px rgba(79, 107, 237, .08); } }
.wf-step-name { font-size: .7rem; color: var(--wf-text2); line-height: 1.15; max-width: 84px; }
.wf-step.aktiv .wf-step-name { color: var(--wf-dunkel); font-weight: 600; }
.wf-step-linie { flex: 1; height: 2px; background: #e2e8f0; margin-top: 14px; min-width: 14px; }
.wf-step-linie.fertig { background: var(--wf-gruen); }
.wf-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.wf-verlauf .mud-expand-panel { border: 1px solid var(--wf-rand); border-radius: 10px !important; }
.wf-verlauf-zeile { display: flex; gap: 10px; font-size: .8rem; padding: 3px 0; }
.wf-verlauf-zeit { color: var(--wf-text2); white-space: nowrap; }
.wf-panel-leer { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border-style: dashed; box-shadow: none; color: var(--wf-text2); font-size: .88rem; }
.wf-panel-menue { color: #fff; margin-right: -8px; }
.wf-panel-menue .mud-icon-button { color: #fff; }
.wf-menue-typ { color: var(--wf-text2); font-size: .8em; margin-left: 4px; }
.wf-speicherstatus { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--wf-gruen); padding: 4px 10px; border-radius: 20px; background: #ecfdf5; }
.wf-speicherstatus.offen { color: var(--wf-text2); background: #f1f5f9; }

/* Entscheidungen */
.wf-kante.art-3 { stroke: #d97706; }
.wf-kante.art-4 { stroke: #94a3b8; }
.wf-ausgang.art-3 { color: #b45309; }
.wf-ausgang.art-4 { color: #64748b; font-style: italic; }
.wf-entscheidung {
    width: 250px; background: #fffbeb; border-radius: 14px; border: 1px solid #fcd34d;
    box-shadow: 0 8px 24px rgba(180, 83, 9, .10);
}
.wf-entscheidung::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 14px 14px 0 0;
    background: repeating-linear-gradient(45deg, #f59e0b 0 8px, #fbbf24 8px 16px);
}
.wf-entscheidung.gewaehlt { border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, .25), 0 12px 30px rgba(15, 23, 42, .14); }
.wf-entscheidung .wf-ausgaenge { border-top-color: #fde68a; }
.wf-entscheidung .wf-knoten-sub { font-size: .72rem; color: #b45309; }
.wf-raute {
    width: 26px; height: 26px; transform: rotate(45deg); border-radius: 6px; background: #f59e0b; color: #fff;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0 4px;
}
.wf-raute .mud-icon-root { transform: rotate(-45deg); }
.wf-regel-text { max-width: 210px; text-align: right; line-height: 1.25; }
.wf-regel-karte { border: 1px solid #fde68a; border-left: 4px solid #f59e0b; border-radius: 10px; padding: 6px 10px 8px; margin-bottom: 10px; background: #fffdf5; }
.wf-mini-schritt.entscheidung { background: #fef3c7; color: #92400e; }
.wf-und { margin: 2px 0 6px; border-top: 1px dashed #fcd34d; padding-top: 4px; }
.wf-und-label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; color: #b45309; background: #fef3c7; padding: 1px 8px; border-radius: 8px; }

/* ---------- Freigado (Marke: Haekchen in Indigo #4f46e5) ---------- */
:root { --fg-indigo: #4f46e5; --fg-indigo-hell: #eef2ff; }
.fg-logo {
    width: 26px; height: 26px; border-radius: 8px; background: var(--fg-indigo); color: #fff; font-weight: 800;
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem;
}
.fg-logo.klein { width: 20px; height: 20px; border-radius: 6px; font-size: .72rem; }

/* Knoten im Editor */
.wf-freigado {
    width: 250px; background: #fff; border-radius: 14px; border: 1px solid #c7d2fe;
    box-shadow: 0 8px 24px rgba(79, 70, 229, .10);
}
.wf-freigado::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 14px 14px 0 0;
    background: linear-gradient(90deg, var(--fg-indigo), #818cf8);
}
.wf-freigado.gewaehlt { border-color: var(--fg-indigo); box-shadow: 0 0 0 3px rgba(79, 70, 229, .25), 0 12px 30px rgba(15, 23, 42, .14); }
.wf-freigado .wf-knoten-sub { font-size: .72rem; color: var(--fg-indigo); }
.wf-freigado .wf-ausgaenge { border-top-color: #e0e7ff; }

/* Workflow-Panel: wartet auf Freigado */
.fg-wartet { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; background: var(--fg-indigo-hell); margin-bottom: 8px; }
.fg-wartet-status { font-weight: 600; font-size: .9rem; color: #3730a3; }
.fg-wartet-status.fehler { color: #b91c1c; }
.fg-wartet-meta { font-size: .75rem; color: var(--wf-text2); word-break: break-word; }

/* Statuszeile in der Dokumentansicht */
.fg-zeile { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--wf-rand); }
.fg-zeile-text { flex: 1; min-width: 0; font-size: .88rem; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.fg-zeile-meta { font-size: .75rem; color: var(--wf-text2); }

/* Zeitstrahl */
.fg-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.fg-meta { font-size: .78rem; color: var(--wf-text2); }
.fg-status { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; background: var(--fg-indigo-hell); color: #3730a3; white-space: nowrap; }
.fg-status.frei { background: rgba(0, 168, 132, .14); color: #00795f; }
.fg-status.ab { background: rgba(229, 72, 77, .12); color: #b91c1c; }
.fg-status.aus { background: #f1f5f9; color: #475569; }
.fg-status.fehler { background: rgba(229, 72, 77, .12); color: #b91c1c; }
.fg-abschnitt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--wf-text2); margin: 12px 0 6px; }
.fg-empfaenger { display: flex; flex-direction: column; gap: 6px; }
.fg-person { display: flex; gap: 10px; padding: 8px 10px; border: 1px solid var(--wf-rand); border-radius: 10px; }
.fg-person.active { border-color: var(--fg-indigo); box-shadow: 0 0 0 2px rgba(79, 70, 229, .12); }
.fg-person.completed { border-left: 4px solid #00a884; }
.fg-person.rejected { border-left: 4px solid #e5484d; }
.fg-pos { width: 22px; height: 22px; border-radius: 50%; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; flex-shrink: 0; }
.fg-person.active .fg-pos { background: var(--fg-indigo); color: #fff; }
.fg-person-text { min-width: 0; font-size: .85rem; word-break: break-word; }
.fg-person-status { font-size: .72rem; color: var(--wf-text2); margin-left: 4px; }
.fg-person-zeiten { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .74rem; color: var(--wf-text2); margin-top: 2px; }
.fg-entscheidung { font-size: .82rem; font-weight: 600; margin-top: 3px; }
.fg-kommentar { font-size: .82rem; font-style: italic; margin-top: 2px; white-space: pre-wrap; }
.fg-linie { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #e0e7ff; }
.fg-ereignis { position: relative; padding: 4px 0 8px 10px; font-size: .84rem; display: flex; gap: 10px; }
.fg-punkt { position: absolute; left: -21px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid var(--fg-indigo); }
.fg-ereignis.completed .fg-punkt, .fg-ereignis.signer_completed .fg-punkt, .fg-ereignis.result_fetched .fg-punkt { border-color: #00a884; }
.fg-ereignis.rejected .fg-punkt, .fg-ereignis.expired .fg-punkt, .fg-ereignis.canceled .fg-punkt { border-color: #e5484d; }
.fg-zeit { color: var(--wf-text2); white-space: nowrap; font-size: .76rem; min-width: 104px; }
.fg-detail { color: var(--wf-text2); }
.fg-geprueft { margin-top: 10px; font-size: .72rem; color: var(--wf-text2); }

/* Sendedialog */
.fg-knopf-zeile { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.fg-knopf-text { flex: 1; }
.fg-anlage { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--wf-rand); border-radius: 8px; margin-top: 6px; font-size: .85rem; }
.fg-anlage-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-anlage-groesse { font-size: .75rem; color: var(--wf-text2); }

/* Aufgaben */
.fg-karte { cursor: default; }
.fg-karte .wf-karte-titel { cursor: pointer; }
.fg-karte-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fg-karte-hinweis { font-size: .78rem; padding: 4px 8px; border-radius: 8px; background: var(--fg-indigo-hell); color: #3730a3; }
.fg-karte-hinweis.frei { background: rgba(0, 168, 132, .12); color: #00795f; }
.fg-karte-hinweis.ab { background: rgba(229, 72, 77, .10); color: #b91c1c; }

/* Dunkel */
.ipaweb-dunkel .wf-freigado { background: #0d2740; border-color: #3730a3; box-shadow: none; }
.ipaweb-dunkel .fg-wartet, .ipaweb-dunkel .fg-status, .ipaweb-dunkel .fg-karte-hinweis { background: rgba(79, 70, 229, .22); color: #c7d2fe; }
.ipaweb-dunkel .fg-wartet-status { color: #c7d2fe; }
.ipaweb-dunkel .fg-status.frei, .ipaweb-dunkel .fg-karte-hinweis.frei { background: rgba(0, 168, 132, .2); color: #6ee7b7; }
.ipaweb-dunkel .fg-status.ab, .ipaweb-dunkel .fg-status.fehler, .ipaweb-dunkel .fg-karte-hinweis.ab { background: rgba(229, 72, 77, .2); color: #fca5a5; }
.ipaweb-dunkel .fg-status.aus, .ipaweb-dunkel .fg-pos { background: #16314d; color: #b8c7d8; }
.ipaweb-dunkel .fg-punkt { background: #0d2740; }
.ipaweb-dunkel .fg-linie { border-left-color: #3730a3; }

/* Start-Art: automatisch / nur manuell */
.wf-startart .mud-toggle-item { text-transform: none; font-size: .8rem; padding: 2px 10px; }
.wf-startart-tag { font-size: .66rem; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #f1f5f9; color: var(--wf-text2); text-transform: uppercase; letter-spacing: .04em; }
.wf-startart-tag.auto { background: rgba(3, 169, 244, .14); color: #0277bd; }
.ipaweb-dunkel .wf-startart-tag { background: #16314d; color: #b8c7d8; }
.ipaweb-dunkel .wf-startart-tag.auto { background: rgba(3, 169, 244, .2); color: #4fc3f7; }

/* Anlagen-Knopf (Label fuer natives Dateifeld) – sieht aus wie ein MudButton outlined small */
.fg-datei-eingabe { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; pointer-events: none; }
.fg-datei-knopf {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 4px; cursor: pointer; user-select: none;
    border: 1px solid var(--mud-palette-lines-inputs); font-size: .8125rem; font-weight: 500; text-transform: uppercase; letter-spacing: .02em;
    color: var(--mud-palette-text-primary); transition: background .15s, border-color .15s;
}
.fg-datei-knopf:hover, .fg-datei-knopf:focus-visible { background: var(--mud-palette-action-default-hover); border-color: var(--mud-palette-text-primary); outline: none; }
.fg-datei-knopf.aus { opacity: .45; cursor: default; pointer-events: none; }

/* Seite „Freigado-Auftraege“ */
.fg-zaehler { background: var(--fg-indigo); color: #fff; }
.fg-filter { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fg-suche { max-width: 320px; }
.fg-anzahl { font-size: .72rem; font-weight: 700; margin-left: 6px; opacity: .75; }
.fg-liste { display: flex; flex-direction: column; gap: 8px; }
.fg-eintrag { display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px auto; gap: 14px; align-items: center;
    padding: 10px 14px; border: 1px solid var(--wf-rand); border-radius: 12px; background: var(--mud-palette-surface); }
.fg-eintrag.offen { border-left: 4px solid var(--fg-indigo); }
.fg-eintrag .fg-status { justify-self: start; }
.fg-eintrag-dok { font-weight: 600; color: inherit; text-decoration: none; word-break: break-word; }
.fg-eintrag-dok:hover { text-decoration: underline; }
.fg-eintrag-meta { font-size: .8rem; color: var(--wf-text2); display: flex; flex-wrap: wrap; gap: 4px; word-break: break-word; }
.fg-eintrag-zeit { font-size: .76rem; color: var(--wf-text2); text-align: right; }
.fg-eintrag-aktionen { display: flex; gap: 2px; }
@media (max-width: 900px) {
    .fg-eintrag { grid-template-columns: 1fr auto; }
    .fg-eintrag-zeit { text-align: left; grid-column: 1 / 2; }
}