/* Prozesslandschaft (Punkt 74, 16.09.2026) — Ebene 1 Landkarte, Ebene 2 SIPOC,
   Ebene 3 Swimlane + Wertstrom-Zeitleiste. Nur Tokens aus style.css, keine eigenen
   Farbwerte; Waerme laeuft ueber --pz-heiss (Prozent) und --pz-strich (px), die
   prozesse.js je Element setzt. Alles unter .pz, damit nichts ins Uebrige streut. */

.pz { display: grid; gap: 14px; }
.pz-karte { min-width: 0; }
.pz-titel-zeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pz-untertitel { margin: 4px 0 0; }
.pz-kopf-knoepfe { margin-top: 0; flex-wrap: wrap; }
.pz-kopf-rechts { display: grid; gap: 10px; justify-items: end; }
.pz h4 { margin: 18px 0 8px; font-size: 14px; font-family: "Onest", "Instrument Sans", sans-serif; letter-spacing: -0.01em; }
.pz-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.pz-chip-klick { cursor: pointer; }
.pz-chip-klick:hover { color: var(--schrift); }

/* Pfad: Firma > Abteilung > Prozess */
.pz-pfad { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13.5px; }
.pz-pfad-link { color: var(--gedimmt); text-decoration: none; border-bottom: 1px dotted transparent; }
.pz-pfad-link:hover { color: var(--schrift); border-bottom-color: var(--gedimmt); }
.pz-pfad-trenner { color: var(--gedimmt); }
.pz-pfad-akt { color: var(--schrift); font-weight: 550; }

/* Ebene 1: drei Baender */
.pz-baender { display: grid; gap: 10px; margin-top: 16px; }
.pz-band {
  display: grid; grid-template-columns: 150px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche2);
}
.pz-band-titel {
  font-family: "Onest", "Instrument Sans", sans-serif; font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gedimmt); padding-top: 12px;
}
.pz-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pz-kachel, .pz-prozess-karte {
  text-align: left; display: grid; gap: 6px; padding: 12px 14px;
  background: var(--flaeche); color: var(--schrift); font: inherit; cursor: pointer;
  border: 2px solid color-mix(in srgb, var(--linie), var(--schlecht) var(--pz-heiss, 0%));
  border-radius: 12px; min-width: 0;
  box-shadow: 0 0 0 0 transparent;
}
.pz-kachel:hover, .pz-prozess-karte:hover { border-color: color-mix(in srgb, var(--gedimmt), var(--schlecht) var(--pz-heiss, 0%)); }
.pz-kachel-titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pz-kachel-titel strong { font-weight: 600; font-size: 15px; }
.pz-kachel-zahlen { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--gedimmt); align-items: center; }
/* Beschreibung auf drei Zeilen gedeckelt, der volle Text steht im Tooltip —
   sonst bestimmt die laengste Beschreibung die Hoehe des ganzen Bandes */
.pz-kachel-text {
  line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.pz-kachel-leer { padding: 12px 0; }
/* Abteilung ohne gezeichneten Ablauf: auf der Karte, aber ohne Gewicht */
.pz-kachel-ohne { border-style: dashed; border-width: 1.5px; background: transparent; }
.pz-kachel-ohne .pz-kachel-titel strong { font-weight: 550; color: var(--gedimmt); }
.pz-kachel-ohne:hover .pz-kachel-titel strong { color: var(--schrift); }
.pz-kachel-stand { margin: 0; flex: none; }
.pz-kachel-titel .punkt { width: 8px; height: 8px; }

/* Uebergaenge unter den Baendern */
.pz-uebergang-liste { display: grid; gap: 8px; }
.pz-uebergang {
  padding: 8px 12px; border-radius: 10px; border: 1px solid var(--linie);
  border-left: 4px solid color-mix(in srgb, var(--linie), var(--schlecht) var(--pz-heiss, 0%));
}
.pz-uebergang-kopf { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.pz-uebergang-pfeil { color: var(--gedimmt); }

/* Ebene 2: SIPOC */
.pz-sipoc { display: grid; grid-template-columns: 1fr 1fr 1.7fr 1fr 1fr; gap: 10px; margin-top: 16px; align-items: start; }
.pz-sipoc-spalte { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; background: var(--flaeche2); min-width: 0; }
.pz-sipoc-mitte { background: var(--flaeche); border-color: var(--gedimmt); }
.pz-sipoc-kopf {
  font-family: "Onest", "Instrument Sans", sans-serif; font-weight: 600; font-size: 12.5px;
  text-transform: uppercase; letter-spacing: .08em; color: var(--gedimmt); margin-bottom: 8px;
}
.pz-sipoc-kopf-klein { margin-top: 14px; }
.pz-sipoc-liste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.pz-sipoc-liste li { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; padding: 3px 0; }
.pz-sipoc-leer { font-style: italic; }
.pz-x { padding: 0 6px; line-height: 1; font-size: 16px; }
.pz-sipoc-eingabe { margin-top: 8px; font-size: 13px; padding: 6px 8px; }
.pz-sipoc-prozesse { display: grid; gap: 8px; }
.pz-beteiligte { margin-top: 4px; }

/* Ebene 3: Werkzeugleiste */
.pz-werkzeuge { display: flex; gap: 8px 14px; flex-wrap: wrap; align-items: center; margin: 14px 0 10px; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche2); }
.pz-werkzeug-gruppe { display: flex; gap: 6px; flex-wrap: wrap; }
.pz-werkzeug-rechts { margin-left: auto; }
.pz-werkzeuge button.klein { padding: 5px 11px; font-size: 13px; }
.pz-werkzeuge button.aktiv { border-color: var(--akzent); color: var(--akzent); }
.pz-werkzeug-hinweis { flex-basis: 100%; min-height: 0; }
.pz-werkzeug-hinweis:empty { display: none; }

/* Sichtbarkeits-Schalter */
.pz-sichtbar { display: flex; align-items: center; gap: 10px; }
.pz-schalter { display: inline-flex; border: 1px solid var(--linie); border-radius: 9px; overflow: hidden; }
.pz-schalter-knopf { border: none; border-radius: 0; padding: 5px 12px; font-size: 13px; background: transparent; color: var(--gedimmt); }
.pz-schalter-knopf + .pz-schalter-knopf { border-left: 1px solid var(--linie); }
.pz-schalter-knopf.aktiv { background: var(--flaeche2); color: var(--schrift); }

/* Diagramm und Seitenleiste */
/* Das Diagramm ist das Kernbild des Werkzeugs und braucht mehr als die 1040 px
   der Textspalte: bei K&P sind 13 Knoten rund 2.230 px breit, neben der
   Seitenleiste blieben davon 636 px uebrig. Die Bild-Karten brechen deshalb
   kontrolliert aus der Spalte aus, bleiben mittig und fallen auf schmalen
   Fenstern auf die normale Breite zurueck (16.09.2026, Punkt 74). */
@media (min-width: 1140px) {
  .pz-breit {
    --pz-breite: min(94vw, 1680px);
    width: var(--pz-breite);
    margin-left: calc((100% - var(--pz-breite)) / 2);
  }
}

.pz-flaeche { display: flex; gap: 14px; align-items: stretch; min-width: 0; }
.pz-diagramm { flex: 1 1 auto; min-width: 0; overflow: hidden; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); }
.pz-diagramm .leer { margin: 12px; }

/* Leinwand (18.09.2026): ein Fenster fester Hoehe auf eine unendliche Flaeche.
   Das SVG fuellt das Fenster, der Ausschnitt steht in der viewBox (prozesse.js).
   Ziehen verschiebt, Rad rollt, Strg + Rad oder zwei Finger zoomen. Unten links
   die Zoom-Knoepfe, unten rechts die Uebersichtskarte mit dem Fensterrahmen. */
.pz-leinwand {
  position: relative; height: clamp(380px, 64vh, 820px); overflow: hidden;
  touch-action: none; cursor: grab; user-select: none; background: var(--flaeche);
  background-image: radial-gradient(color-mix(in srgb, var(--linie) 80%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
}
.pz-leinwand.zieht { cursor: grabbing; }
.pz-leinwand .pz-svg { width: 100%; height: 100%; display: block; }
.pz-leinwand .pz-zoom {
  position: absolute; left: 10px; bottom: 10px; z-index: 2;
  display: flex; gap: 3px; align-items: center; padding: 4px;
  border: 1px solid var(--linie); border-radius: 10px;
  background: color-mix(in srgb, var(--flaeche) 90%, transparent); backdrop-filter: blur(6px);
}
.pz-zoom button.klein { padding: 4px 9px; font-size: 13px; min-width: 30px; }
.pz-zoom-wert { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; }
.pz-uebersicht {
  position: absolute; right: 10px; bottom: 10px; z-index: 2; display: block;
  border: 1px solid var(--linie); border-radius: 8px; cursor: pointer;
  background: color-mix(in srgb, var(--flaeche) 94%, transparent); backdrop-filter: blur(6px);
}
.pz-ue-grund { fill: transparent; }
.pz-ue-bahn { fill: color-mix(in srgb, var(--flaeche2) 75%, transparent); }
.pz-ue-kasten { fill: var(--gedimmt); opacity: .5; }
.pz-ue-fenster { fill: color-mix(in srgb, var(--akzent) 14%, transparent); stroke: var(--akzent); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.pz-praesentation .pz-leinwand { height: calc(100vh - 150px); }
.pz-legende { display: flex; gap: 14px; flex-wrap: wrap; padding: 6px 12px; border-top: 1px solid var(--linie); }
.pz-seite { flex: 0 0 300px; display: grid; gap: 10px; align-content: start; padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche2); max-height: 720px; overflow: auto; }
/* Ohne Auswahl bleibt die Leiste zu, das Bild bekommt die volle Breite */
.pz-seite.pz-seite-zu { display: none; }
.pz-seite-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pz-seite-kopf h4 { margin: 0; font-size: 15px; }
.pz-feld { font-size: 14px; display: grid; gap: 1px; }
.pz-feld-name { color: var(--gedimmt); font-size: 12.5px; }
.pz-seite-knoepfe { margin-top: 4px; flex-wrap: wrap; }
.pz-seite-knoepfe button { padding: 6px 12px; font-size: 13px; }
.pz-seite-befunde { display: grid; gap: 4px; }
.pz-befund-zeile { text-align: left; padding: 4px 8px; font-size: 13.5px; color: var(--schrift); border-color: var(--linie); }
.pz-befund-dran { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 13.5px; }
.pz-befund-anhaengen select { font-size: 13px; padding: 6px 8px; }
.pz-eingabe { margin: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--gedimmt); }
.pz-eingabe input, .pz-eingabe select, .pz-eingabe textarea { font-size: 13.5px; padding: 7px 9px; }
.pz-seite-leer { padding: 6px 0; line-height: 1.5; }
/* Kundenportal: die Spalte dort ist schmal, eine Seitenleiste daneben liesse
   dem Bild kaum 350 px. Deshalb Bild in voller Breite, Einzelheiten darunter. */
#portal-tab-ablaeufe .pz-flaeche { flex-direction: column; }
#portal-tab-ablaeufe .pz-seite { flex-basis: auto; max-height: none; }
.pz-wunsch { display: grid; gap: 6px; align-content: start; }
.pz-wunsch textarea { font-size: 13.5px; }
.pz-wunsch .knopf-zeile { margin-top: 0; align-items: center; }
.pz-wunsch-stand { line-height: 1.4; }

/* Vorschlags-Panel (Schritt 7): Quellen nebeneinander (Dokument | Wunsch),
   darunter die Vermerke mit Haken je Aenderung */
.pz-vorschlaege { display: grid; gap: 12px; }
.pz-vorschlag-quellen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 28px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche2);
}
.pz-vorschlag-quellen:has(> :only-child) { grid-template-columns: 1fr; }
.pz-vorschlag-start { display: grid; gap: 8px; align-content: start; }
.pz-vorschlag-start select { max-width: none; }
@media (max-width: 900px) { .pz-vorschlag-quellen { grid-template-columns: 1fr; } }
.pz-vorschlag-start select { font-size: 13px; padding: 7px 9px; max-width: min(100%, 420px); }
.pz-vorschlag-stand { line-height: 1.4; }
.pz-vorschlag-liste { display: grid; gap: 10px; }
.pz-vermerk { border: 1px solid var(--linie); border-radius: 12px; padding: 10px 12px; background: var(--flaeche2); display: grid; gap: 8px; }
.pz-vermerk-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pz-vermerk-wunsch { margin: 0; line-height: 1.45; }
.pz-vermerk-knoepfe { margin-top: 2px; align-items: center; flex-wrap: wrap; }
.pz-aenderungen { display: grid; gap: 8px; }
.pz-aenderung { display: grid; grid-template-columns: 20px 1fr; gap: 8px; align-items: start; padding: 8px 10px; border: 1px solid var(--linie); border-radius: 10px; background: var(--flaeche); }
.pz-aenderung input[type="checkbox"] { margin-top: 3px; }
.pz-aenderung-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pz-aenderung-fehler { opacity: .62; border-style: dashed; }
.pz-beleg { line-height: 1.45; }

/* SVG: Bahnen */
.pz-svg { display: block; font-family: "Instrument Sans", sans-serif; user-select: none; }
.pz-bahn-flaeche { fill: transparent; }
.pz-bahn-alt .pz-bahn-flaeche { fill: color-mix(in srgb, var(--flaeche2) 60%, transparent); }
.pz-bahn-kopf { fill: var(--flaeche2); }
.pz-bahn.aktiv .pz-bahn-kopf { fill: color-mix(in srgb, var(--akzent) 22%, var(--flaeche2)); }
.pz-bahn-linie { stroke: var(--linie); stroke-width: 1; }
.pz-bahn-name { fill: var(--schrift); font-size: 13px; font-weight: 550; }
.pz-bahn-unter { fill: var(--gedimmt); font-size: 12px; }
/* Fixierte Bahnkoepfe (Punkt 107): blickAnwenden fuehrt die Kopie am linken
   Fensterrand mit. Leicht durchscheinend, damit man sieht, dass darunter
   Inhalt liegt, mit Kante und weichem Schatten rechts. Im Druck nie, dort
   wiederholt die Druckfassung den Kopf je Teilblatt selbst. */
.pz-bahnen-fix { cursor: pointer; }
.pz-bahnen-fix .pz-bahn-kopf { fill-opacity: .9; }
.pz-bahnen-fix .pz-bahn-alt .pz-bahn-kopf { fill: color-mix(in srgb, var(--flaeche2) 85%, var(--flaeche)); }
.pz-bahnen-fix-kante { stroke: var(--linie); stroke-width: 1; }
.pz-bahnen-fix-schatten { stroke: var(--schrift); stroke-opacity: .07; stroke-width: 6; stroke-linecap: butt; }

/* SVG: Knoten */
.pz-knoten { cursor: pointer; }
.pz-knoten.zieht { cursor: grabbing; opacity: .85; }
.pz-form {
  fill: color-mix(in srgb, var(--flaeche2), var(--schlecht) calc(var(--pz-heiss, 0%) * 0.18));
  stroke: color-mix(in srgb, var(--gedimmt), var(--schlecht) var(--pz-heiss, 0%));
  stroke-width: var(--pz-strich, 1.5px);
}
.pz-typ-start .pz-form { fill: var(--schrift); stroke: var(--schrift); }
.pz-typ-ende .pz-form { fill: var(--flaeche); stroke: var(--schrift); stroke-width: 2; }
.pz-form-innen { fill: var(--schrift); }
.pz-typ-system .pz-form { fill: var(--flaeche); stroke-dasharray: none; }
.pz-streifen { fill: var(--akzent); }
.pz-knoten.gewaehlt .pz-form { stroke: var(--akzent); stroke-width: 2.5px; }
.pz-knoten.kante-von .pz-form { stroke: var(--akzent); stroke-dasharray: 4 3; }
.pz-text-titel { fill: var(--schrift); font-size: 13px; font-weight: 550; }
.pz-text-meta { fill: var(--gedimmt); font-size: 12px; }
.pz-text-system { fill: var(--akzent); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.pz-system-tag rect { fill: var(--flaeche); stroke: var(--linie); }
.pz-system-tag text { fill: var(--gedimmt); font-size: 11px; }
.pz-griff { fill: var(--akzent); stroke: var(--flaeche); stroke-width: 2; display: none; cursor: crosshair; }
.pz-knoten:hover .pz-griff, .pz-knoten.gewaehlt .pz-griff { display: block; }
.pz-drill circle { fill: var(--akzent); }
.pz-drill text { fill: var(--auf-akzent); font-size: 14px; font-weight: 700; }
.pz-gummi { fill: none; stroke: var(--akzent); stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }

/* SVG: Kanten */
.pz-kante-treffer { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.pz-kante-linie {
  fill: none; stroke-width: var(--pz-strich, 1.5px);
  stroke: color-mix(in srgb, var(--gedimmt), var(--schlecht) var(--pz-heiss, 0%));
  stroke-linejoin: round;
}
.pz-spitze { fill: color-mix(in srgb, var(--gedimmt), var(--schlecht) var(--pz-heiss, 0%)); }
.pz-kante-medienbruch .pz-kante-linie, .pz-kante-medienbruch .pz-spitze {
  stroke: color-mix(in srgb, var(--laeuft), var(--schlecht) var(--pz-heiss, 0%));
  fill: none;
}
.pz-kante-medienbruch .pz-spitze { fill: color-mix(in srgb, var(--laeuft), var(--schlecht) var(--pz-heiss, 0%)); }
.pz-medienbruch path { stroke: var(--laeuft); stroke-width: 2.5; fill: none; }
.pz-kante.gewaehlt .pz-kante-linie, .pz-kante.gewaehlt .pz-spitze { stroke: var(--akzent); }
.pz-kante.gewaehlt .pz-spitze { fill: var(--akzent); }
.pz-kante-label rect { fill: var(--flaeche); stroke: var(--linie); }
/* Obere Etikettenlage: liegt ueber den Kaesten, faengt aber keine Klicks ab */
.pz-kanten-oben { pointer-events: none; }
.pz-kanten-oben .pz-badge, .pz-kanten-oben .pz-kante-label { pointer-events: auto; }
.pz-kante-label text { fill: var(--gedimmt); font-size: 12px; }
.pz-label-faden { stroke: var(--gedimmt); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.pz-vorschlag-start button { justify-self: start; }
.pz-kante:hover .pz-kante-label text { fill: var(--schrift); }

/* SVG: Befund-Badges */
.pz-badge { cursor: pointer; }
.pz-badge rect { fill: var(--flaeche); stroke: var(--laeuft); stroke-width: 1.2; }
.pz-badge text { fill: var(--laeuft); font-size: 11px; font-weight: 600; }
.pz-badge-frei rect { stroke: var(--gut); }
.pz-badge-frei text { fill: var(--gut); }
.pz-badge:hover rect { fill: var(--flaeche2); }

/* Wertstrom-Zeitleiste */
.pz-zeit-summen { font-size: 13px; color: var(--gedimmt); text-align: right; }
.pz-zeit-svg { display: block; margin-top: 10px; font-family: "Instrument Sans", sans-serif; }
.pz-zeit-arbeit { fill: var(--akzent); }
.pz-zeit-warte { fill: url(#pz-schraffur-zeit); stroke: var(--laeuft); stroke-width: 1; }
.pz-schraffur-linie { stroke: var(--laeuft); stroke-width: 1.4; }
.pz-zeit-gitter { stroke: var(--linie); stroke-width: 1; }
.pz-zeit-label { fill: var(--schrift); font-size: 12px; }
.pz-zeit-wert { fill: var(--gedimmt); font-size: 11px; }
.pz-zeit-wert-innen { fill: var(--schrift); }
.pz-zeit-achse { fill: var(--gedimmt); font-size: 11px; }
/* Zeitleiste als Liste (schmale Bildschirme) */
.pz-zeit-liste { display: grid; gap: 10px; margin-top: 10px; }
.pz-zeit-zeile { display: grid; gap: 3px; }
.pz-zeit-zeile-name { font-weight: 550; font-size: 14px; }
.pz-zeit-balken { display: flex; height: 12px; border-radius: 4px; overflow: hidden; background: var(--flaeche2); }
.pz-zeit-balken-arbeit { display: block; background: var(--akzent); }
.pz-zeit-balken-warte {
  display: block; border: 1px solid var(--laeuft);
  background: repeating-linear-gradient(135deg, var(--laeuft) 0 1.4px, transparent 1.4px 6px);
}
.pz-top-liste { display: grid; gap: 8px; margin-top: 6px; }
.pz-top {
  display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center;
  padding: 10px 12px; border: 1px solid var(--linie); border-radius: 10px;
  border-left: 4px solid color-mix(in srgb, var(--linie), var(--schlecht) var(--pz-heiss, 0%));
}
.pz-top-rang { font-family: "Onest", sans-serif; font-weight: 700; font-size: 18px; color: var(--gedimmt); text-align: center; }
.pz-top-mitte { min-width: 0; display: grid; gap: 2px; }
.pz-top-wert { font-family: "Onest", sans-serif; font-weight: 600; font-size: 17px; white-space: nowrap; }

/* Dialog */
.pz-dialog-hinter { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: rgba(0, 0, 0, .45); padding: 16px; }
.pz-dialog { width: min(92vw, 440px); display: grid; gap: 10px; }
.pz-dialog h3 { margin: 0; }
.pz-dialog-breit { width: min(92vw, 560px); }
.pz-vorschau { display: grid; gap: 8px; }
.pz-vorschau p { margin: 0; }
.pz-vorschau-liste { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.pz-vorschau-rest summary { cursor: pointer; }
.pz-karte-hinweis { margin-top: 14px; display: grid; gap: 8px; }
.pz-karte-hinweis p { margin: 0; }
.pz-karte-zug { margin: 0; }
.pz-dialog p { margin: 0; }
.pz-dialog .knopf-zeile { margin-top: 6px; }
.pz-meldung {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 90;
  padding: 10px 16px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie);
  color: var(--schrift); font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}
.pz-meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }

/* Praesentationsmodus: volle Breite ueber der Seite, groessere Schrift, nichts zum Bedienen */
.pz-praesentation {
  position: fixed; inset: 0; z-index: 60; overflow: auto;
  background: var(--grund); color: var(--schrift); padding: 14px 28px 40px; font-size: 115%;
}
.pz-praes-leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.pz-praes-leiste .knopf-zeile { margin: 0; }
.pz-praes-inhalt { display: grid; gap: 16px; }
.pz-praesentation .pz-seite, .pz-praesentation .pz-werkzeuge, .pz-praesentation .pz-griff, .pz-praesentation .pz-kopf-knoepfe, .pz-praesentation .pz-sichtbar { display: none !important; }
.pz-praesentation .pz-diagramm { overflow: auto; }
.pz-zoom { display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; }
.pz-zoom button { min-width: 30px; }
.pz-zoom-wert { min-width: 42px; text-align: center; }
.pz-praesentation .pz-kachel, .pz-praesentation .pz-prozess-karte { cursor: pointer; }
.pz-praesentation .pz-text-titel { font-size: 14px; }
.pz-praesentation .pz-text-meta, .pz-praesentation .pz-kante-label text { font-size: 13px; }

/* Druckfassung (18.09.2026): Landkarte + je Ablauf ein Querblatt */
.pz-druck-leiste {
  position: sticky; top: 8px; z-index: 5; display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid var(--linie); border-radius: 10px;
  background: color-mix(in srgb, var(--flaeche2) 92%, transparent); backdrop-filter: blur(6px);
}
.pz-druck-leiste .knopf-zeile { margin: 0; }
.pz-druck-blatt { display: grid; gap: 14px; }
.pz-druck-blatt + .pz-druck-blatt { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--linie); }
.pz-druck-pfad { margin: 0 0 -6px; }
.pz-druck-teil { margin: 12px 0 4px; }
.pz-druck-bild { width: 100%; max-height: 70vh; border: 1px solid var(--linie); border-radius: 12px; background: var(--flaeche); overflow: hidden; }
.pz-svg-druck { width: 100%; height: 100%; display: block; }
.pz-druck-deck { fill: var(--flaeche); }

/* Schmale Bildschirme */
@media (max-width: 900px) {
  .pz-sipoc { grid-template-columns: 1fr 1fr; }
  .pz-sipoc-mitte { grid-column: 1 / -1; order: -1; }
  .pz-flaeche { flex-direction: column; }
  .pz-seite { flex-basis: auto; max-height: none; }
}
@media (max-width: 640px) {
  .pz-band { grid-template-columns: 1fr; gap: 6px; }
  .pz-band-titel { padding-top: 0; }
  .pz-sipoc { grid-template-columns: 1fr; }
  .pz-kopf-rechts { justify-items: start; }
  .pz-werkzeug-rechts { margin-left: 0; }
  .pz-praesentation { padding: 10px 14px 30px; }
  .pz-top { grid-template-columns: 24px 1fr; }
  .pz-top-wert { grid-column: 2; }
  .pz-zeit-summen { text-align: left; }
  .pz-leinwand { height: 60vh; }
  .pz-uebersicht { display: none; }
  .pz-bahnen-fix .pz-bahn-kopf { fill-opacity: .8; }
  .pz-leinwand .pz-zoom { left: 6px; bottom: 6px; }
  .pz-druck-bild { max-height: none; }
}

/* Druck: hell, ohne Bedienelemente, Diagramm auf Seitenbreite */
@media print {
  .pz-werkzeuge, .pz-seite, .pz-griff, .pz-kopf-knoepfe, .pz-sichtbar, .pz-wunsch, .pz-legende,
  .pz-sipoc-eingabe, .pz-x, .pz-praes-leiste, .pz-meldung, .pz-dialog-hinter,
  .pz-vorschlaege, .pz-zoom { display: none !important; }
  .pz, .pz-praesentation { position: static; padding: 0; font-size: 100%; background: #fff; color: #111; }
  /* Farbtoken auch fuer die eingebettete Sicht setzen, sonst bleibt der Titel
     hell auf weiss (16.09.: in der Druckprobe war die Ueberschrift unsichtbar) */
  .pz, .pz-praesentation { --grund: #fff; --flaeche: #fff; --flaeche2: #f4f4f0; --linie: #d9d9d2; --schrift: #111; --gedimmt: #666; --akzent: #6c4ff7; --gut: #2f8f3e; --schlecht: #c93c34; --laeuft: #b07d12; }
  .pz h3, .pz h4, .pz strong, .pz .pz-pfad-akt { color: #111; }
  .pz .abzeichen { color: #444; border-color: #d9d9d2; background: #f4f4f0; }
  .pz .karte, .pz-karte { break-inside: avoid; box-shadow: none; border-color: #d9d9d2; }
  .pz-diagramm { overflow: visible; border: none; }
  .pz-svg { width: 100%; height: auto; }
  .pz-flaeche { display: block; }
  .pz-kachel, .pz-prozess-karte { break-inside: avoid; }
  /* Leinwand: kein Fenster, das ganze Bild (beforeprint setzt die viewBox) */
  .pz-leinwand { height: auto !important; overflow: visible; cursor: auto; background-image: none; }
  .pz-leinwand .pz-svg { height: auto; }
  .pz-uebersicht, .pz-leinwand .pz-zoom, .pz-druck-leiste, .pz-bahnen-fix { display: none !important; }
  /* Druckfassung: App-Rahmen weg, je Blatt eine Seite */
  body.pz-druckmodus .kopfzeile, body.pz-druckmodus .brotkrume, body.pz-druckmodus #akte-nav,
  body.pz-druckmodus #ansicht-akte > .zeile-kopf, body.pz-druckmodus #portal-nav,
  body.pz-druckmodus #portal .zeile-kopf, body.pz-druckmodus .pz-pfad { display: none !important; }
  /* #app main schlaegt sonst die Spaltenregel aus seitenleiste.css (Schritt 6) */
  body.pz-druckmodus main, body.pz-druckmodus #app main { padding: 0; max-width: none; }
  body.pz-druckmodus .pz-breit { width: 100%; margin-left: 0; }
  .pz-druck-blatt { break-after: page; }
  .pz-druck-blatt:last-child { break-after: auto; }
  .pz-druck-blatt + .pz-druck-blatt { border-top: none; margin-top: 0; padding-top: 0; }
  /* Die Ablauf-Karte darf zwischen ihren Teilen brechen (zwei Teile passen nie
     auf ein Blatt); ein Teil selbst bleibt beisammen, ebenso Kopf + erster Teil */
  .pz-druck-karte { break-inside: auto; border: none; padding: 0; }
  .pz-druck-karte .pz-druck-pfad, .pz-druck-karte .pz-prozess-kopf { break-after: avoid; }
  .pz-druck-teil { break-after: avoid; }
  .pz-druck-bild { max-height: none; border: none; border-radius: 0; break-inside: avoid; }
  .pz-druck-ablauf .pz-zeit-karte, .pz-druck-ablauf .pz-zeit-top { break-inside: avoid; }
  /* Landkarte auf ein Blatt: Baender nicht trennen, Kacheln schmaler, volle Beschreibung */
  .pz-band { break-inside: avoid; padding: 8px 10px; }
  .pz-baender { gap: 8px; }
  .pz-kacheln { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
  .pz-kachel { padding: 8px 10px; gap: 4px; }
  .pz-kachel-titel strong { font-size: 13.5px; }
  .pz-kachel-text { font-size: 11.5px; line-height: 1.35; }
  .pz-uebergang { padding: 5px 10px; }
  .pz-uebergang-liste { grid-template-columns: 1fr 1fr; }
  /* Ein Teil hoechstens 130 mm hoch: laesst auf dem Querblatt Platz fuer
     Kopf oder Zeitleiste, die Schrift bleibt bei rund 7 pt */
  .pz-druck-bild { max-height: 130mm; }
  .pz-svg-druck { height: 100%; }
  .pz-kachel-ohne { border-style: dashed; }
}

/* Eingebettet im Fahrplan-Druck (Etappe 8): keine Pfadnavigation, keine Leiste,
   volle Breite; die Blaetter behalten ihren Seitenumbruch (je Ablauf ein Querblatt) */
.pz-eingebettet .pz-pfad, .pz-eingebettet .pz-druck-leiste { display: none !important; }
.pz-eingebettet .pz-breit { width: 100%; margin-left: 0; }
.pz-eingebettet .pz-druck-blatt:first-child { margin-top: 0; padding-top: 0; border-top: none; }
/* Kantenfuehrung 2 (08.10.2026): Rand in Flaechenfarbe unter jeder Linie, damit
   Kreuzungen als Bruecke lesbar sind; spaetere Linien schneiden fruehere. */
.pz-kante-halo { fill: none; stroke: var(--flaeche); stroke-width: calc(var(--pz-strich, 1.5px) + 4px); stroke-linejoin: round; pointer-events: none; }
/* Abteilungs-Ebene (08.10.2026): die Ablaeufe als Karten-Raster statt SIPOC */
.pz-prozess-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 14px; }
.pz-prozess-raster .pz-prozess-karte { text-align: left; }
.pz-prozess-raster .pz-prozess-karte { align-content: start; }
.pz-prozess-raster .pz-kachel-text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: none; }
.pz-band-titel { overflow-wrap: break-word; hyphens: manual; }
.pz-kachel, .pz-prozess-karte { align-content: start; }