/* ==========================================================================================
   Prozessbild — gemeinsame Stile fuer Kundenportal und Hub (2026-10-09). Gehoert zu
   prozessbild.js. Alles haengt unter .pb-wurzel, damit nichts in die uebrigen Seiten wirkt.

   bpmn-js zeichnet in .pb-buehne; das Wasserzeichen „powered by bpmn.io" (.bjs-powered-by)
   bleibt sichtbar und wird von nichts ueberdeckt (bpmn.io-Lizenz): Steuerung und Tipp sitzen
   links, das Detailfenster laesst unten rechts Platz. Beim Vergleich steht immer ein Wort
   (Neu, Geaendert, Entfernt), die Farbe ist nur Zugabe. Die Zeichenflaeche ist in beiden
   Themen weiss, weil die Diagramme schwarz auf weiss gezeichnet sind.
   ========================================================================================== */
.pb-wurzel { --pb-papier: #fff; --pb-tinte-fest: #16130F; --pb-linie-fest: #E8E2D8; }
.pb-wurzel .pb-leiste { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; margin: 0 0 24px; }
.pb-wurzel .pb-prozesse { display: flex; flex-wrap: wrap; gap: 8px; flex-basis: 100%; }
.pb-wurzel .pb-reiter { font: 500 15px/1.4 var(--p-sans, system-ui); color: var(--p-dim); background: transparent; border: 1px solid var(--p-linie); border-radius: 999px; padding: 10px 18px; min-height: 44px; cursor: pointer; }
.pb-wurzel .pb-reiter--aktiv { color: var(--p-karte, #fff); background: var(--p-tinte); border-color: var(--p-tinte); }
.pb-wurzel .pb-sichten { display: flex; gap: 0; border: 1px solid var(--p-linie); border-radius: 8px; overflow: hidden; }
.pb-wurzel .pb-sicht { font: 500 15px/1.4 var(--p-sans, system-ui); color: var(--p-dim); background: var(--p-karte, #fff); border: 0; padding: 10px 16px; min-height: 44px; cursor: pointer; }
.pb-wurzel .pb-sicht + .pb-sicht { border-left: 1px solid var(--p-linie); }
.pb-wurzel .pb-sicht--aktiv { color: var(--p-tinte); background: var(--p-akzent-weich); font-weight: 700; }
.pb-wurzel .pb-version { width: auto; flex: 0 0 auto; font: 400 15px/1.4 var(--p-sans, system-ui); color: var(--p-tinte); background: var(--p-karte, #fff); border: 1px solid var(--p-linie); border-radius: 8px; padding: 10px 14px; min-height: 44px; }
.pb-wurzel .pb-version:disabled { color: var(--p-dim); }
.pb-wurzel .pb-vergleich { margin-left: auto; }
.pb-wurzel .pb-vergleich--an { background: var(--p-tinte); color: var(--p-karte, #fff); border-color: var(--p-tinte); }
.pb-wurzel .pb-raster { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 24px; align-items: start; }
.pb-wurzel .pb-karte { padding: 24px; }
.pb-wurzel .pb-karte-kopf { gap: 12px; flex-wrap: wrap; }
.pb-wurzel .pb-meta { display: inline-flex; gap: 8px; align-items: center; }
.pb-wurzel .pb-buehne-hinweis { margin: 16px 0 0; font-size: 15px; }
.pb-wurzel .pb-seitenleiste { display: flex; flex-direction: column; gap: 24px; }
.pb-wurzel .pb-seitenkarte { padding: 24px; }
.pb-wurzel .pb-leer { margin: 0; }

/* ---- Rahmen: Zeichenflaeche + Steuerung + Detailfenster; geht als Ganzes ins Vollbild ---- */
.pb-wurzel .pb-rahmen { position: relative; height: 560px; border: 1px solid var(--pb-linie-fest); border-radius: 8px; background: var(--pb-papier); overflow: hidden; color: var(--pb-tinte-fest); outline: none; }
.pb-wurzel .pb-rahmen:focus-visible { box-shadow: 0 0 0 3px var(--p-akzent, #22634f); }
.pb-wurzel .pb-buehne { position: absolute; inset: 0; cursor: grab; touch-action: none; }
.pb-wurzel .pb-buehne:active { cursor: grabbing; }
.pb-wurzel .pb-rahmen-titel { display: none; }
.pb-wurzel .pb-steuerung { position: absolute; top: 12px; left: 12px; display: flex; gap: 6px; z-index: 5; flex-wrap: wrap; }
.pb-wurzel .pb-steuer { font: 600 18px/1 var(--p-sans, system-ui); color: var(--pb-tinte-fest); background: #fff; border: 1px solid var(--pb-linie-fest); border-radius: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.pb-wurzel .pb-steuer--text { font-size: 14px; }
.pb-wurzel .pb-steuer:hover { background: #f4f1ec; }
.pb-wurzel .pb-steuer[aria-pressed="true"] { background: var(--pb-tinte-fest); color: #fff; border-color: var(--pb-tinte-fest); }
.pb-wurzel .pb-tipp { position: absolute; left: 12px; bottom: 10px; margin: 0; max-width: calc(100% - 200px); font: 400 13px/1.4 var(--p-sans, system-ui); color: #6F675C; background: rgba(255,255,255,.9); border-radius: 6px; padding: 4px 8px; pointer-events: none; z-index: 4; }
.pb-wurzel .pb-rahmen--detail .pb-tipp { display: none; }

/* Vollbild: echte Fullscreen-API (der Rahmen ist das Vollbild-Element) oder Ersatz als
   festes Overlay ueber der ganzen Seite, wenn das Geraet die API nicht kennt (iPhone). */
.pb-wurzel .pb-rahmen--vollbild { height: 100%; width: 100%; border: 0; border-radius: 0; }
.pb-wurzel .pb-rahmen--vollbild .pb-detail { width: min(400px, 88%); }
.pb-wurzel .pb-rahmen--ersatz { position: fixed; inset: 0; z-index: 1000; height: auto; padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0); }
.pb-wurzel .pb-rahmen:fullscreen { height: 100vh; width: 100vw; background: var(--pb-papier); }
.pb-wurzel .pb-rahmen--vollbild .pb-rahmen-titel { display: block; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin: 0; z-index: 4; font: 600 15px/1.3 var(--p-sans, system-ui); color: var(--pb-tinte-fest); background: rgba(255,255,255,.92); padding: 6px 12px; border-radius: 6px; max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
html.pb-seite-gesperrt, html.pb-seite-gesperrt body { overflow: hidden; }

/* ---- Detailfenster: rechts im Rahmen; auf dem Handy als unteres Blatt ---- */
.pb-wurzel .pb-detail { position: absolute; top: 0; right: 0; bottom: 48px; width: min(380px, 62%); z-index: 6; overflow-y: auto; background: #fff; color: var(--pb-tinte-fest); border-left: 1px solid var(--pb-linie-fest); box-shadow: -8px 0 24px -12px rgba(0,0,0,.25); padding: 20px 22px 28px; outline: none; font-family: var(--p-sans, system-ui); }
.pb-wurzel .pb-detail-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.pb-wurzel .pb-detail-art { margin: 0; font: 500 12px/1.4 var(--p-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: #3d6b5a; background: #E3EFE9; border-radius: 4px; padding: 3px 8px; }
.pb-wurzel .pb-detail-zu { font: 400 18px/1 var(--p-sans, system-ui); color: var(--pb-tinte-fest); background: transparent; border: 1px solid var(--pb-linie-fest); border-radius: 999px; width: 40px; height: 40px; cursor: pointer; flex: 0 0 auto; }
.pb-wurzel .pb-detail-name { margin: 4px 0 8px; font: 700 20px/1.3 var(--p-sans, system-ui); letter-spacing: -.01em; }
.pb-wurzel .pb-detail-erklaerung { margin: 0 0 16px; font-size: 15px; line-height: 1.5; color: #6F675C; }
.pb-wurzel .pb-detail-abschnitt { border-top: 1px solid var(--pb-linie-fest); padding: 14px 0 0; margin: 14px 0 0; }
.pb-wurzel .pb-detail-unter { margin: 0 0 8px; font: 500 12px/1.4 var(--p-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; color: #6F675C; }
.pb-wurzel .pb-detail-text { margin: 0 0 8px; font-size: 15px; line-height: 1.55; white-space: pre-line; }
.pb-wurzel .pb-detail-quelle { font-size: 14px; color: #4a443c; }
.pb-wurzel .pb-zitat { margin: 0 0 12px; }
.pb-wurzel .pb-zitat blockquote { margin: 0; padding: 8px 12px; border-left: 3px solid var(--pb-tinte-fest); background: #f7f4ef; font-size: 15px; line-height: 1.5; }
.pb-wurzel .pb-zitat figcaption { margin-top: 4px; color: #6F675C; }
.pb-wurzel .pb-offen { border-radius: 8px; padding: 12px 14px; margin: 0 0 4px; }
.pb-wurzel .pb-offen--luecke { background: #fdf0e6; border: 1px solid #f0b48a; }
.pb-wurzel .pb-offen--annahme { background: #fdf8e1; border: 1px solid #e6cf6a; }
.pb-wurzel .pb-offen-titel { margin: 0 0 4px; font-weight: 700; font-size: 15px; }
.pb-wurzel .pb-offen-text { margin: 0; font-size: 15px; line-height: 1.5; }
.pb-wurzel .pb-detail .p-leer { font-size: 15px; color: #6F675C; }
.pb-wurzel .pb-detail .p-datei-meta { color: #6F675C; }
.pb-wurzel .pb-form { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--pb-linie-fest); padding-top: 14px; margin-top: 14px; }
.pb-wurzel .pb-feld { display: flex; flex-direction: column; gap: 6px; }
.pb-wurzel .pb-form textarea { font: 400 16px/1.5 var(--p-sans, system-ui); color: var(--pb-tinte-fest); border: 1px solid var(--pb-linie-fest); border-radius: 8px; padding: 12px 14px; width: 100%; resize: vertical; background: #fff; box-sizing: border-box; }
.pb-wurzel .pb-form .p-knopf { align-self: flex-start; }

/* ---- Listen in Seitenkarten und Detailfenster ---- */
.pb-wurzel .pb-liste { list-style: none; margin: 0; padding: 0; }
.pb-wurzel .pb-kommentar { display: flex; flex-direction: column; gap: 4px; padding: 14px 0; border-top: 1px solid var(--p-linie); }
.pb-wurzel .pb-detail .pb-kommentar { border-top-color: var(--pb-linie-fest); }
.pb-wurzel .pb-kommentar:first-child { border-top: 0; padding-top: 0; }
.pb-wurzel .pb-kommentar-element { align-self: flex-start; font: 500 15px/1.4 var(--p-sans, system-ui); color: inherit; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pb-wurzel .pb-kommentar-text { margin: 0; font-size: 16px; line-height: 1.5; }
.pb-wurzel .pb-kommentar-fuss { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pb-wurzel .pb-klein { min-height: 36px; padding: 6px 12px; font-size: 13px; }
.pb-wurzel .pb-aenderung { display: flex; gap: 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--p-linie); font-size: 15px; line-height: 1.5; }
.pb-wurzel .pb-aenderung:first-child { border-top: 0; }
.pb-wurzel .pb-aenderung-art { flex: 0 0 auto; font: 400 13px/1.4 var(--p-mono, ui-monospace, monospace); letter-spacing: .1em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; color: var(--pb-tinte-fest); background: #E3EFE9; }
.pb-wurzel .pb-aenderung--neu .pb-aenderung-art { background: #d7f0df; }
.pb-wurzel .pb-aenderung--geaendert .pb-aenderung-art { background: #faeeb5; }
.pb-wurzel .pb-aenderung--entfernt .pb-aenderung-art { background: #f7d4d0; text-decoration: line-through; }
.pb-wurzel .pb-bestaetigung-text, .pb-wurzel .pb-freigabe-text { margin: 0 0 16px; font-size: 16px; line-height: 1.55; }
.pb-wurzel .pb-aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.pb-wurzel .pb-stand { margin: 0; }
.pb-wurzel .pb-freigabe-zeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--p-linie); }
.pb-wurzel .pb-freigabe-zeile:first-child { border-top: 0; }
.pb-wurzel .pb-freigabe-links { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.pb-wurzel .pb-freigabe-name { font-weight: 700; }
.pb-wurzel .pb-pill { display: inline-block; font: 500 12px/1.4 var(--p-mono, ui-monospace, monospace); letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 2px 10px; }
.pb-wurzel .pb-pill--frei { color: #1d5a40; background: #d7f0df; }
.pb-wurzel .pb-pill--intern { color: #6b4a00; background: #faeeb5; }

/* ---- Markierungen im Diagramm ---- */
.pb-wurzel .pb-marker { font: 700 13px/1 var(--p-mono, ui-monospace, monospace); color: #fff; background: var(--pb-tinte-fest); border: 2px solid #fff; border-radius: 999px; min-width: 26px; height: 26px; padding: 0 6px; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.pb-wurzel .djs-element.pb-luecke .djs-visual > :nth-child(1) { stroke: #d9692b !important; stroke-dasharray: 6 4; stroke-width: 2px !important; }
.pb-wurzel .djs-element.pb-annahme .djs-visual > :nth-child(1) { stroke: #b58900 !important; stroke-dasharray: 6 4; stroke-width: 2px !important; }
.pb-wurzel .djs-element.pb-neu .djs-visual > :nth-child(1) { stroke: #1f8a4c !important; stroke-width: 3px !important; fill: #e4f5ea !important; }
.pb-wurzel .djs-element.pb-geaendert .djs-visual > :nth-child(1) { stroke: #b58900 !important; stroke-width: 3px !important; fill: #fdf5d2 !important; }
.pb-wurzel .djs-element.pb-gewaehlt .djs-visual > :nth-child(1) { stroke: #16130F !important; stroke-width: 4px !important; stroke-dasharray: none; }
.pb-wurzel .djs-element.djs-connection.pb-gewaehlt .djs-visual > path { stroke-width: 4px !important; }

@media (max-width: 960px) {
  .pb-wurzel .pb-raster { grid-template-columns: minmax(0, 1fr); }
  .pb-wurzel .pb-rahmen { height: 460px; }
}
/* Handy: Detailfenster als unteres Blatt ueber der ganzen Breite. */
@media (max-width: 600px) {
  .pb-wurzel .pb-rahmen { height: 380px; }
  .pb-wurzel .pb-rahmen--vollbild { height: 100%; }
  .pb-wurzel .pb-vergleich { margin-left: 0; width: 100%; }
  .pb-wurzel .pb-karte, .pb-wurzel .pb-seitenkarte { padding: 16px; }
  .pb-wurzel .pb-steuerung { left: 8px; top: 8px; }
  .pb-wurzel .pb-tipp { display: none; }
  .pb-wurzel .pb-rahmen--vollbild .pb-rahmen-titel { display: none; }
  .pb-wurzel .pb-detail { position: fixed; top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 62vh; border-left: 0; border-top: 1px solid var(--pb-linie-fest); border-radius: 16px 16px 0 0; box-shadow: 0 -12px 32px -12px rgba(0,0,0,.35); padding: 12px 18px calc(24px + env(safe-area-inset-bottom, 0)); z-index: 1001; }
  .pb-wurzel .pb-rahmen--vollbild .pb-detail { width: auto; }
  .pb-wurzel .pb-detail::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: #d6d0c6; margin: 0 auto 10px; }
}