/* =========================================================
   Szenen-Baukasten · Funktionsseiten des webentwickler.io CRM
   Ergänzt sequenzen.css (Gerüst, Kacheln, Knöpfe). Maße in em,
   die Bühne skaliert über die Schriftgröße (Container-Einheiten).
   Markup: lib/produkt_szenen.php · Bewegung: szenen.js
   ========================================================= */

.pfs{display:flex; flex-direction:column; gap:.85em; height:100%; min-height:0}
.pfs-kopf .pcs-h1{font-size:1.6em}
.pfs .pcs-karte{min-height:0}
.pfs-toast span{white-space:nowrap}

/* Töne für Chips */
.pfs-ton--ok{background:var(--lime-soft); color:var(--lime-ink)}
.pfs-ton--warn{background:rgba(244,183,64,.26); color:#7a4300}
.pfs-ton--fehler{background:rgba(210,64,47,.14); color:#9b2318}
.pfs-ton--neu{background:#C8078A; color:#fff}

/* Filter-Chips */
.pfs-fchips{display:flex; gap:.4em; flex-wrap:wrap}
.pfs-fchip{font-size:.78em; font-weight:600; padding:.32em .8em; border-radius:999px; background:#fff; border:1px solid #CFCCE0; color:var(--n); white-space:nowrap}
.pfs-fchip.is-an{background:var(--n); border-color:var(--n); color:#fff}

/* Motive (gezeichnete Platzhalter statt Fotos) */
.pfs-motiv{display:block; width:100%; aspect-ratio:5/4; border-radius:.55em; overflow:hidden}
.pfs-motiv svg{display:block; width:100%; height:100%}

.pfs-gross{display:flex; align-items:baseline; gap:.3em}
.pfs-gross b{font-family:"Inter Tight",Inter,sans-serif; font-size:2.3em; letter-spacing:-.02em; line-height:1; color:var(--n); font-variant-numeric:tabular-nums}
.pfs-gross small{font-size:.8em; color:var(--fg3)}
.pfs-reihe-r{display:flex; justify-content:flex-end}
.pfs-bar-dick{height:.6em}
.pcs-bar > span{transform-origin:left center}

/* Auswahl-Rahmen für bearbeitete Texte */
.pfs [data-k="ziel"],.pfs [data-k="t1"],.pfs [data-k="b1"],.pfs-markiert{border-radius:.25em; outline:2px dashed transparent; outline-offset:.2em}
.pfs .is-wahl[data-k="ziel"],.pfs .is-wahl[data-k="t1"],.pfs .is-wahl[data-k="b1"],.pfs-markiert.is-wahl{outline-color:#7FB000; background:rgba(157,234,27,.18)}

/* ── Diagramm ───────────────────────────────────────────── */
.pfs-kpis--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pfs-kpis--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.pfs-diag{flex:1; gap:.7em}
.pfs-diag-kopf{display:flex; align-items:center; gap:1em; flex-wrap:wrap}
.pfs-diag-kopf .pcs-karte-t{margin-right:auto}
.pfs-leg{display:inline-flex; align-items:center; gap:.4em; font-size:.76em; color:var(--fg2)}
.pfs-leg i{width:1.1em; height:.25em; border-radius:2px; background:var(--blau)}
.pfs-leg--1 i{background:#B9B6D3}
.pfs-diag-flaeche{position:relative}
.pfs-svg{display:block; width:100%; height:auto; overflow:visible}
.pfs-vgl{fill:none; stroke:#B9B6D3; stroke-width:2.4; stroke-dasharray:1 1; stroke-linecap:round; stroke-linejoin:round}
.pfs-mark{position:absolute; width:0; height:0; z-index:2}
.pfs-mark i{position:absolute; left:-.55em; top:-.55em; width:1.1em; height:1.1em; border-radius:50%; background:#fff; border:.25em solid #D2402F; box-shadow:0 0 0 .4em rgba(210,64,47,.18)}
.pfs-mark b{position:absolute; right:.9em; bottom:.9em; white-space:nowrap; font-size:.78em; font-weight:700; padding:.35em .7em; border-radius:.5em; background:var(--n); color:#fff;
  box-shadow:0 .6em 1.2em -.6em rgba(24,14,72,.5)}
.pfs-mark--balken,.pfs-mark--status{position:static; width:auto; height:auto; align-self:flex-start; display:flex; align-items:center; gap:.5em}
.pfs-mark--balken b,.pfs-mark--status b{position:static}
.pfs-mark--status i{position:static; width:.9em; height:.9em; border-width:.2em}
.pfs-balken-reihe{display:flex; align-items:flex-end; gap:.6em; height:10.5em; padding-top:.4em}
.pfs-balken{flex:1 1 0; min-width:0; height:var(--h); border-radius:.35em .35em .15em .15em; background:linear-gradient(180deg,var(--blau),var(--blau-d)); transform-origin:bottom center}
.pfs-balken.is-mark{background:linear-gradient(180deg,#9DEA1B,#5f8f00)}
.pfs-balken-reihe--status{height:4.6em; gap:.22em}
.pfs-balken-reihe--status .pfs-balken{background:#7FB000; border-radius:.2em}
.pfs-balken-reihe--status .pfs-balken.is-aus{background:#D2402F}
.pfs-achse{display:flex; gap:.6em}
.pfs-achse span{flex:1 1 0; min-width:0; text-align:center; font-size:.74em; color:var(--fg3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── Liste ──────────────────────────────────────────────── */
.pfs-liste{gap:.15em}
.pfs-zeile{grid-template-columns:2.2em 9.5em minmax(0,1fr) auto 4.6em; border-radius:.55em}
.pfs-zeile.is-hervor{background:rgba(157,234,27,.16); border-bottom-color:transparent}

/* ── Schalter ───────────────────────────────────────────── */
.pfs-person{flex-direction:row; align-items:center; gap:.8em; padding:.75em 1em}
.pfs-ava{background:var(--pill); flex:0 0 auto}
.pfs-person b{display:block; font-size:.95em}
.pfs-person small{display:block; font-size:.78em; color:var(--fg3)}
.pfs-rolle{margin-left:auto; font-size:.8em; font-weight:700; padding:.4em .9em; border-radius:999px; background:var(--n); color:#fff; white-space:nowrap}
.pfs-sch-raster{display:grid; grid-template-columns:minmax(0,1fr); gap:.85em; flex:1; min-height:0}
.pfs-sch-raster.pfs-mit-ring{grid-template-columns:minmax(0,1fr) 13em; align-items:start}
.pfs-schalter{gap:.15em}
.pfs-sch{display:grid; grid-template-columns:2.2em minmax(0,1fr) auto; gap:.8em; align-items:center; padding:.5em .2em; border-bottom:1px solid #F1F0F6}
.pfs-sch:last-child{border-bottom:0}
.pfs-sch-t b{display:block; font-size:.9em}
.pfs-sch-t small{display:block; font-size:.76em; color:var(--fg3)}
.pfs-kipp{position:relative; width:2.7em; height:1.5em; border-radius:999px; background:#D9D6E8}
.pfs-kipp i{position:absolute; top:.18em; left:.18em; width:1.14em; height:1.14em; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(24,14,72,.3)}
.pfs-sch.is-an .pfs-kipp{background:#5f8f00}
.pfs-sch.is-an .pfs-kipp i{transform:translateX(1.2em)}
.pfs-sch.is-fest .pfs-kipp{opacity:.55}
.pfs-ringkarte .pcs-ring-v,.pfs-ring-v{stroke-dashoffset:calc(1 - var(--r,1))}

/* ── Text auf der Seite / Dokument ──────────────────────── */
.pfs-web-liste{display:flex; flex-direction:column; gap:.3em; font-size:.84em; color:var(--fg2)}
.pfs-web-li{display:flex; align-items:center; gap:.5em}
.pfs-web-li i{width:.45em; height:.45em; border-radius:50%; background:#7FB000}
.pfs-ziel-p{display:block; font-size:.95em; color:var(--fg); line-height:1.5}
.pfs--webtext .pcs-web--gross .pcs-web-h{font-size:1.75em}
.pfs-dok{flex:1; gap:.8em}
.pfs-tbs{display:flex; gap:.3em; align-items:center; padding-bottom:.6em; border-bottom:1px solid var(--hair); flex-wrap:wrap}
.pfs-tb{min-width:2em; height:2em; padding:0 .5em; display:inline-flex; align-items:center; justify-content:center; gap:.35em; border-radius:.45em; font-size:.8em; font-weight:700;
  color:var(--n); background:#F4F3FA; transition:background .3s var(--ease)}
.pfs-tb.is-druck{background:var(--n); color:#fff}
.pfs-tb--ki{margin-left:auto; background:rgba(47,111,216,.12); color:#1B4B99; padding:0 .8em}
.pfs-tb--ki.is-druck{background:#1B4B99; color:#fff}
.pfs-blks{display:flex; flex-direction:column; gap:.5em}
.pfs-blk{display:grid; grid-template-columns:1.3em minmax(0,1fr); gap:.4em; align-items:start; padding:.25em .3em; border-radius:.45em; position:relative; background:#fff}
.pfs-blk > .pcs-i{color:#C9C6DA; margin-top:.15em}
.pfs-blk--h1{display:block; font-family:"Inter Tight",Inter,sans-serif; font-weight:700; font-size:1.45em; letter-spacing:-.02em; color:var(--n); line-height:1.15; padding-left:.9em; min-height:1.15em}
.pfs-blk--h2 .pfs-blk-t{font-family:"Inter Tight",Inter,sans-serif; font-weight:700; font-size:1.18em; color:var(--n)}
.pfs-blk--p .pfs-blk-t{font-size:.9em; color:var(--fg2); line-height:1.5}
.pfs-blk-li{display:flex; flex-direction:column; gap:.25em; font-size:.88em; color:var(--fg)}
.pfs-blk-li span{display:flex; align-items:center; gap:.5em}
.pfs-blk-li i{width:.4em; height:.4em; border-radius:50%; background:var(--n)}
.pfs-blk.is-zieh{z-index:2; box-shadow:0 .8em 1.6em -.8em rgba(24,14,72,.45), 0 0 0 1px rgba(127,176,0,.6)}
.pfs-blk.is-zieh > .pcs-i{color:var(--lime-ink)}

/* ── Google-Vorschau ────────────────────────────────────── */
.pfs-snip{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:.9em; flex:1; min-height:0}
.pfs-snip-form{gap:.7em}
.pfs-feld{font-size:.86em; min-height:3.4em}
.pfs-feld small{display:flex; justify-content:space-between}
.pfs-feld--hoch{min-height:5.6em}
.pfs-zahl{font-style:normal; font-variant-numeric:tabular-nums}
.pfs-zahl b{font-weight:700; color:var(--lime-ink)}
.pfs-serp{gap:.8em; background:#fff}
.pfs-serp-such{display:flex; align-items:center; gap:.6em; padding:.55em .9em; border-radius:999px; border:1px solid #DADCE0; font-size:.86em; color:#202124;
  box-shadow:0 1px 4px rgba(32,33,36,.12)}
.pfs-serp-treffer{display:flex; flex-direction:column; gap:.2em; padding:.5em .4em; border-radius:.5em}
.pfs-serp-treffer.is-hervor{background:rgba(157,234,27,.12)}
.pfs-serp-url{display:flex; align-items:center; gap:.5em; font-size:.76em; color:#4d5156}
.pfs-serp-url i{width:1.6em; height:1.6em; border-radius:50%; background:var(--n); color:var(--lime); font-style:normal; font-weight:800; font-size:.85em; display:flex; align-items:center; justify-content:center}
.pfs-serp-t{font-size:1.05em; color:#1a0dab; line-height:1.3; min-height:1.3em}
.pfs-serp-b{font-size:.8em; color:#4d5156; line-height:1.45; min-height:2.9em}
.pfs-serp-grau{opacity:.45}

/* ── Kalender ───────────────────────────────────────────── */
.pfs-kal{flex:1}
.pfs-art{font-size:.78em; font-weight:700; color:var(--n); background:var(--lime-soft); padding:.35em .7em; border-radius:.5em; align-self:flex-start}

/* ── Karte ──────────────────────────────────────────────── */
.pfs-kartenraster{display:grid; grid-template-columns:minmax(0,1fr) 15em; gap:.9em; flex:1; min-height:0}
.pfs-plan-karte{position:relative; padding:0; overflow:hidden; min-height:18em; background:#EEF0F4}
.pfs-plan{position:absolute; inset:0; width:100%; height:100%}
.pfs-wasser{fill:#CFE3F7}
.pfs-strasse{fill:none; stroke:#fff; stroke-width:7; stroke-linecap:round}
.pfs-park{fill:#DDEFC4}
.pfs-pin{position:absolute; width:2.3em; height:2.3em; margin:-2.2em 0 0 -1.15em; color:var(--n); z-index:2}
.pfs-pin .pcs-i{width:100%; height:100%; fill:#fff; stroke-width:1.7}
.pfs-pin.is-aktiv{color:#3F6200; z-index:3}
.pfs-pin.is-aktiv .pcs-i{fill:var(--lime)}
.pfs-pop{position:absolute; z-index:4; width:13em; margin:-6.4em 0 0 -6.5em; display:flex; flex-direction:column; gap:.1em; padding:.6em .8em; border-radius:.7em; background:#fff;
  box-shadow:0 1em 2em -1em rgba(24,14,72,.55); border:1px solid var(--line); text-align:center}
.pfs-pop b{font-size:.88em}
.pfs-pop small{font-size:.76em; color:var(--lime-ink); font-weight:600}
.pfs-orte{gap:.3em}
.pfs-ort{display:grid; grid-template-columns:1.8em minmax(0,1fr); gap:.6em; align-items:center; padding:.45em .4em; border-radius:.55em; font-size:.88em}
.pfs-ort i{width:1.8em; height:1.8em; border-radius:50%; background:var(--pill); color:var(--n7); font-style:normal; font-weight:700; font-size:.82em; display:flex; align-items:center; justify-content:center}
.pfs-ort b{display:block}
.pfs-ort small{display:block; font-size:.82em; color:var(--fg3)}
.pfs-ort.is-aktiv{background:rgba(157,234,27,.18)}
.pfs-ort.is-aktiv i{background:var(--lime-ink); color:#fff}

/* ── Postfach ───────────────────────────────────────────── */
.pfs-post{display:grid; grid-template-columns:16.5em minmax(0,1fr); gap:.9em; flex:1; min-height:0}
.pfs-eingang{gap:.15em; padding:.8em .6em}
.pfs-eingang .pcs-karte-t{display:flex; align-items:center; gap:.45em; padding:0 .4em .4em}
.pfs-mail{display:grid; grid-template-columns:.55em minmax(0,1fr) auto; gap:.55em; align-items:center; padding:.55em .45em; border-radius:.55em; font-size:.84em}
.pfs-mail i{width:.55em; height:.55em; border-radius:50%; background:transparent}
.pfs-mail.is-neu i{background:#5f8f00}
.pfs-mail b{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pfs-mail small{display:block; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pfs-mail em{font-style:normal; font-size:.82em; color:var(--fg3); white-space:nowrap}
.pfs-mail.is-neu b{font-weight:800}
.pfs-mail.is-wahl{background:#EEECF5}
.pfs-mailansicht{gap:.6em; padding:1em 1.2em}
.pfs-mailkopf{display:flex; flex-direction:column; gap:.15em; padding-bottom:.5em; border-bottom:1px solid var(--hair)}
.pfs-mailkopf b{font-size:1.05em}
.pfs-mailband{display:flex; align-items:center; gap:.6em; padding:.6em .8em; border-radius:.55em; color:#fff; font-weight:700; font-size:.9em; transform-origin:left center}
.pfs-maillogo{width:1.8em; height:1.8em; border-radius:.45em; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center; font-weight:800}
.pfs-mailtext{font-size:.86em; color:var(--fg2); line-height:1.5}
.pfs-mailzeilen{display:flex; flex-direction:column; gap:.35em}
.pfs-mailknopf{align-self:flex-start; color:#fff}
.pfs-mailfuss{font-size:.72em; color:var(--fg3); padding-top:.5em; border-top:1px solid var(--hair)}

/* ── Prüfung ────────────────────────────────────────────── */
.pfs-pruefraster{grid-template-columns:13.5em minmax(0,1fr); align-items:start}
.pfs-pruefraster > .pfs-score{padding-block:1.2em}
.pfs-score{gap:.45em}
.pfs-score--mittel .pcs-ring-v{stroke:#E8A317}
.pfs-score--schlecht .pcs-ring-v{stroke:#D2402F}
.pfs-pks-raster{grid-template-columns:repeat(2,minmax(0,1fr))}
.pfs-pk{padding:.7em .8em}
.pfs-pk--warn .pfs-pks{background:#F4B740}
.pfs-pk--fehler .pfs-pks{background:#D2402F; color:#fff}
.pfs-pk.is-offen .pfs-pks{background:#F4B740}
.pfs-pk.is-offen .pfs-pks .pcs-i{opacity:0}
.pfs-pk.is-offen .pfs-pks::after{content:"!"; position:absolute; font-weight:800; color:var(--n)}
.pfs-pks{position:relative}

/* ── Galerie ────────────────────────────────────────────── */
.pfs-upload{flex-direction:row; align-items:center; gap:.8em; padding:.7em 1em}
.pfs-upload > span:nth-child(2){flex:1; display:flex; flex-direction:column; gap:.35em; min-width:0}
.pfs-upload b{font-size:.86em}
.pfs-galerie{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75em}
.pfs-galerie--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pfs-kachel{position:relative; background:#fff; border:1px solid var(--line); border-radius:.8em; padding:.45em; display:flex; flex-direction:column; gap:.45em; min-width:0}
.pfs-marke{position:absolute; top:.85em; left:.85em; font-size:.68em; font-weight:800; letter-spacing:.04em; padding:.25em .55em; border-radius:999px; background:var(--n); color:var(--lime)}
.pfs-kachel-u{display:flex; flex-direction:column; gap:.2em; padding:0 .25em .2em}
.pfs-kachel-u b{font-size:.76em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pfs-groesse{display:flex; gap:.5em; align-items:baseline; font-size:.8em}
.pfs-groesse s{text-decoration:none; color:var(--fg2)}
.pfs-groesse s.is-alt{text-decoration:line-through; color:var(--fg3)}
.pfs-groesse em{font-style:normal; font-weight:800; color:var(--lime-ink)}
.pfs-summe{flex-direction:row; align-items:center; gap:1em; padding:.75em 1em; font-size:.9em}
.pfs-summe b{white-space:nowrap}
.pfs-summe .pcs-bar{flex:1; height:.5em}
.pfs-summe .pcs-bar span{background:#5f8f00}

/* ── Feed auf der Website ───────────────────────────────── */
.pfs-feed-web{flex:1; min-height:0}
.pfs-feed-kopf{display:flex; align-items:center; gap:1em; padding:1em 1.2em .2em; flex-wrap:wrap}
.pfs-feed-h{font-family:"Inter Tight",Inter,sans-serif; font-weight:700; font-size:1.35em; color:var(--n); letter-spacing:-.02em; margin-right:auto}
.pfs-quelle{background:var(--lime-soft); color:var(--lime-ink)}
.pfs-schnitt{display:flex; align-items:center; gap:.5em}
.pfs-schnitt b{font-family:"Inter Tight",Inter,sans-serif; font-size:1.6em; color:var(--n)}
.pfs-schnitt small{font-size:.78em; color:var(--fg3)}
.pfs-sterne{color:#E8A317; letter-spacing:.05em; font-size:.9em}
.pfs-feed{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75em; padding:.9em 1.2em 1.2em}
.pfs-fk{position:relative; border-radius:.75em; background:#fff; border:1px solid var(--line); min-width:0; transition:box-shadow .4s var(--ease)}
.pfs-fk.is-neu{box-shadow:0 0 0 .2em rgba(157,234,27,.8)}
.pfs-insta{padding:0; overflow:hidden; border:0}
.pfs-insta .pfs-motiv{aspect-ratio:1/1; border-radius:0}
.pfs-insta-u{position:absolute; left:.5em; bottom:.5em; display:flex; align-items:center; gap:.3em; font-size:.74em; font-weight:700; color:#fff; padding:.25em .55em; border-radius:999px; background:rgba(24,14,72,.65)}
.pfs-insta-u .pcs-i{width:1em; height:1em}
.pfs-feed--insta{grid-template-columns:repeat(6,minmax(0,1fr)); gap:.5em}
.pfs-post-k{display:flex; flex-direction:column; gap:.55em; padding:.8em}
.pfs-post-kopf{display:flex; align-items:center; gap:.5em}
.pfs-post-kopf b{display:block; font-size:.76em}
.pfs-post-kopf small{display:block; font-size:.68em; color:var(--fg3)}
.pfs-ava-k{width:2em; height:2em; flex:0 0 auto; border-radius:.45em; background:var(--n); color:var(--lime); font-weight:800; display:flex; align-items:center; justify-content:center; font-size:.85em}
.pfs-seg-chip{margin-left:auto; font-size:.66em; font-weight:700; padding:.2em .55em; border-radius:999px; background:rgba(47,111,216,.12); color:#1B4B99; white-space:nowrap}
.pfs-post-t{font-size:.82em; line-height:1.45; color:var(--fg)}
.pfs-post-f{display:flex; align-items:center; gap:.35em; font-size:.74em; color:var(--fg3)}
.pfs-bew{display:flex; flex-direction:column; gap:.5em; padding:.9em}
.pfs-bew-t{font-size:.84em; line-height:1.45; color:var(--fg)}
.pfs-bew-n{display:flex; align-items:center; gap:.45em; font-size:.78em; font-weight:700; margin-top:auto}
.pfs-bew-n i{width:1.8em; height:1.8em; border-radius:50%; background:var(--pill); font-style:normal; display:flex; align-items:center; justify-content:center; color:var(--n7)}
.pfs-bew-n small{font-weight:400; color:var(--fg3); margin-left:auto}
.pfs-obj{display:flex; flex-direction:column; overflow:hidden}
.pfs-obj .pfs-motiv{border-radius:0; aspect-ratio:16/10}
.pfs-obj-u{display:flex; flex-direction:column; gap:.15em; padding:.6em .75em .75em}
.pfs-obj-u b{font-size:.86em}
.pfs-obj-u small{font-size:.74em; color:var(--fg3)}
.pfs-obj-u em{font-style:normal; font-weight:800; color:var(--n); font-size:.9em; margin-top:.2em}

/* ── Formular ───────────────────────────────────────────── */
.pfs-form{flex:1; min-height:0; display:flex}
.pfs-form-raster{display:grid; grid-template-columns:minmax(0,1fr) 16em; gap:.9em; flex:1; min-height:0}
.pfs-anfrage{display:flex; flex-direction:column; gap:.6em; padding:1em 1.2em 1.2em}
.pfs-anfrage .pcs-knopf{align-self:flex-start}
.pfs-erg{gap:.55em}
.pfs-erg-z{display:grid; grid-template-columns:1.9em minmax(0,1fr); gap:.6em; align-items:center}
.pfs-erg-i{width:1.9em; height:1.9em; border-radius:50%; display:flex; align-items:center; justify-content:center}
.pfs-erg-i .pcs-i{width:1em; height:1em; stroke-width:2.6}
.pfs-erg-z b{display:block; font-size:.86em}
.pfs-erg-z small{display:block; font-size:.76em; color:var(--fg3)}
.pfs-web-mark .pcs-web-hero{padding:1.4em 1.4em 1em}
.pfs-markiert{cursor:default}
.pfs-blase{display:flex; flex-direction:column; gap:.45em; margin:0 1.4em 1.2em; padding:.8em 1em; border-radius:.8em; background:#fff; border:1px solid var(--line);
  box-shadow:0 1em 2em -1.2em rgba(24,14,72,.5)}
.pfs-blase small{font-size:.74em; font-weight:700; color:var(--fg3); text-transform:uppercase; letter-spacing:.08em}
.pfs-blase > span{font-size:.88em; min-height:2.6em; line-height:1.45}
.pfs-blase .pcs-knopf{align-self:flex-end}
.pfs-wz{display:flex; flex-direction:column; gap:.7em; padding:1em 1.2em 1.2em}
.pfs-wz-leiste{display:flex; gap:.4em}
.pfs-wz-s{flex:1; display:flex; align-items:center; gap:.4em; font-size:.74em; font-weight:600; color:var(--fg3); padding:.35em .5em; border-radius:.5em; background:#F4F3FA; min-width:0;
  white-space:nowrap; overflow:hidden}
.pfs-wz-s i{width:1.5em; height:1.5em; flex:0 0 auto; border-radius:50%; background:#fff; font-style:normal; display:flex; align-items:center; justify-content:center; font-weight:800}
.pfs-wz-s.is-an{background:var(--n); color:#fff}
.pfs-wz-s.is-an i{background:var(--lime); color:var(--n)}
.pfs-wz-frage{font-weight:700; font-size:1.05em; color:var(--n)}
.pfs-opts{display:flex; gap:.5em; flex-wrap:wrap}
.pfs-opt{font-size:.84em; font-weight:600; padding:.55em 1em; border-radius:.6em; border:1px solid #CFCCE0; color:var(--n)}
.pfs-opt.is-wahl{background:var(--n); border-color:var(--n); color:#fff}
.pfs-wz-felder{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.5em}
.pfs-wz .pcs-knopf{align-self:flex-start}

/* ── Sicherung / Dateien ────────────────────────────────── */
.pfs-sich{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.9em; flex:1; min-height:0}
.pfs-lauf{gap:.7em}
.pfs-lauf-z{display:flex; align-items:baseline; gap:.3em}
.pfs-lauf-z > span{font-size:.86em; color:var(--fg2); margin-right:auto}
.pfs-lauf-z b{font-family:"Inter Tight",Inter,sans-serif; font-size:2em; color:var(--n); font-variant-numeric:tabular-nums}
.pfs-lauf .pcs-bar span{background:#5f8f00}
.pfs-lauf-schritte{display:flex; flex-direction:column; gap:.4em; font-size:.84em}
.pfs-lauf-schritte span{display:flex; align-items:center; gap:.5em}
.pfs-lauf-schritte .pcs-i{color:#fff; background:#5f8f00; border-radius:50%; padding:.18em; width:1.3em; height:1.3em; stroke-width:3}
.pfs-staende{gap:.15em}
.pfs-stand .pcs-knopf--klein.is-ok{background:#3F6200; color:#fff; border-color:#3F6200}
.pfs-dat{display:grid; grid-template-columns:minmax(0,1fr) 14em; gap:.9em; flex:1; min-height:0}
.pfs-dat-liste{gap:.1em}
.pfs-pfad{display:flex; align-items:center; gap:.45em; font-size:.82em; color:var(--fg2); padding-bottom:.5em; border-bottom:1px solid var(--hair); margin-bottom:.3em}
.pfs-pfad span::before{content:"/ "; color:var(--fg3)}
.pfs-datei{display:grid; grid-template-columns:2em minmax(0,1fr) auto 4.4em; gap:.7em; align-items:center; padding:.45em .3em; border-radius:.5em; font-size:.86em}
.pfs-datei-i{width:2em; height:2em; border-radius:.5em; background:var(--pill); color:var(--n7); display:flex; align-items:center; justify-content:center}
.pfs-datei b{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600}
.pfs-datei small,.pfs-datei em{font-size:.82em; color:var(--fg3); font-style:normal; white-space:nowrap; text-align:right}
.pfs-datei.is-neu{background:rgba(157,234,27,.18)}
.pfs-dat-r{display:flex; flex-direction:column; gap:.9em}
.pfs-drop{align-items:center; text-align:center; border:1.5px dashed #B9B6D3; box-shadow:none; gap:.5em}
.pfs-drop > .pcs-i{width:1.8em; height:1.8em; color:var(--n7)}
.pfs-drop b{font-size:.84em; word-break:break-all}
.pfs-drop .pcs-bar{width:100%}
.pfs-drop .pcs-bar span{background:#5f8f00}
.pfs-drop small{font-size:.76em; color:var(--lime-ink); font-weight:700}
.pfs-korb{display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:.5em .6em}
.pfs-korb > span:nth-child(2){min-width:0}
.pfs-korb .pcs-knopf{grid-column:1 / -1; justify-self:start}
.pfs-korb b{display:block; font-size:.86em}
.pfs-korb small{display:block; font-size:.74em; color:var(--fg3)}

/* ── Baum ───────────────────────────────────────────────── */
.pfs-baumraster{display:grid; grid-template-columns:minmax(0,1fr); gap:.9em; flex:1; min-height:0}
.pfs-baumraster.pfs-mit-seite{grid-template-columns:minmax(0,1fr) 13em; align-items:start}
.pfs-baum{gap:.3em}
.pfs-knoten{position:relative; display:flex; align-items:center; gap:.55em; padding:.45em .7em; border-radius:.55em; font-size:.88em; background:#fff; border:1px solid #EEEDF4}
.pfs-e1{margin-left:1.6em}.pfs-e2{margin-left:3.2em}.pfs-e3{margin-left:4.8em}
.pfs-e1::before,.pfs-e2::before,.pfs-e3::before{content:""; position:absolute; left:-1em; top:50%; width:.8em; border-top:1.5px solid #CFCCE0}
.pfs-k-griff{color:#B9B6D3; display:flex}
.pfs-e0 .pfs-k-griff{color:var(--n7)}
.pfs-knoten b{font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.pfs-k-info{margin-left:auto; font-size:.8em; color:var(--fg3); white-space:nowrap}
.pfs-k--neu{border-color:rgba(127,176,0,.5)}
.pfs-k--neu .pfs-k-info{color:var(--lime-ink); font-weight:700}
.pfs-knoten.is-blink{background:rgba(157,234,27,.18)}
.pfs-k--fehler .pfs-k-info{color:var(--lime-ink); font-weight:700}
.pfs-knoten.is-defekt{border-color:rgba(210,64,47,.45); background:rgba(210,64,47,.06)}
.pfs-knoten.is-defekt .pfs-k-info{color:#9b2318}
.pfs-knoten.is-defekt .pfs-k-griff{color:#D2402F}
.pfs-k--zieh{border-color:rgba(127,176,0,.5)}
.pfs-knoten.is-zieh{z-index:2; box-shadow:0 .8em 1.6em -.8em rgba(24,14,72,.45)}
.pfs-baum-seite{align-items:flex-start; justify-content:center; gap:.4em}
.pfs-baum-seite small{font-size:.78em; color:var(--fg3)}

/* ── Zeitleiste ─────────────────────────────────────────── */
.pfs-zl{position:relative; padding:1.3em 1.2em 1.1em}
.pfs-zl-linie{position:absolute; left:12.5%; right:12.5%; top:2.45em; height:.25em; background:#EEECF5; border-radius:999px}
.pfs-zl-linie span{display:block; height:100%; width:var(--w); background:#7FB000; border-radius:inherit; transform-origin:left center}
.pfs-phasen{position:relative; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6em}
.pfs-phasen--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pfs-phasen--5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pfs-phase{display:flex; flex-direction:column; align-items:center; text-align:center; gap:.3em; min-width:0}
.pfs-phase > i{width:2.4em; height:2.4em; border-radius:50%; display:flex; align-items:center; justify-content:center; font-style:normal; font-weight:800; font-size:.9em;
  background:#fff; border:2px solid #CFCCE0; color:var(--fg3)}
.pfs-phase > i .pcs-i{width:1.2em; height:1.2em; stroke-width:3}
.pfs-ph--fertig > i{background:#7FB000; border-color:#7FB000; color:#fff}
.pfs-ph--aktiv > i{background:var(--n); border-color:var(--n); color:var(--lime)}
.pfs-phase b{font-size:.86em}
.pfs-phase small{font-size:.74em; color:var(--fg3)}
.pfs-zl-detail{gap:.55em}
.pfs-zl-kopf{display:flex; align-items:center; justify-content:space-between; gap:.6em}
.pfs-dzs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5em}
.pfs-dz{display:flex; align-items:center; gap:.45em; font-size:.82em; padding:.55em .7em; border-radius:.55em; background:#F4F3FA}
.pfs-dz .pcs-i{color:#5f8f00; stroke-width:2.6; flex:0 0 auto}

/* ── Datenfluss ─────────────────────────────────────────── */
.pfs-flussk{position:relative; padding:0; aspect-ratio:600/280; background:linear-gradient(135deg,#FBFBFE,#F1F0F8)}
.pfs-fluss-svg{position:absolute; inset:0; width:100%; height:100%}
.pfs-kante{fill:none; stroke:#B9B6D3; stroke-width:2.5; stroke-dasharray:1 1}
.pfs-paket{fill:none; stroke:#7FB000; stroke-width:6; stroke-linecap:round; stroke-dasharray:.07 .93; opacity:0}
.pfs-node{position:absolute; width:36%; transform:translateY(-50%); display:flex; align-items:center; gap:.6em; padding:.65em .8em; border-radius:.8em; background:#fff;
  border:1px solid var(--line); box-shadow:0 .8em 1.6em -1.2em rgba(24,14,72,.45); z-index:2}
.pfs-node-i{width:2.3em; height:2.3em; flex:0 0 auto; border-radius:.6em; background:var(--n); color:var(--lime); display:flex; align-items:center; justify-content:center}
.pfs-node b{display:block; font-size:.88em}
.pfs-node small{display:block; font-size:.74em; color:var(--fg3)}
.pfs-kl{position:absolute; z-index:3; transform:translate(-50%,-50%); display:inline-flex; align-items:center; gap:.3em; font-size:.72em; font-weight:700; padding:.25em .6em;
  border-radius:999px; background:var(--lime-soft); color:var(--lime-ink); white-space:nowrap}
.pfs-kl .pcs-i{width:1em; height:1em}

/* ── Kurzlink ───────────────────────────────────────────── */
.pfs-kl-raster{display:grid; grid-template-columns:minmax(0,1fr) 11em 14em; gap:.9em; flex:1; min-height:0}
.pfs-kl-karte{gap:.7em}
.pfs-kl-karte .pcs-karte-t{display:flex; align-items:center; gap:.45em; color:var(--n); word-break:break-all}
.pfs-druck{font-size:.76em; color:var(--fg3)}
.pfs-qr-karte{align-items:center; justify-content:center; gap:.4em}
.pfs-qr{width:100%; height:auto; fill:var(--n)}
.pfs-qr-r{fill:none; stroke:var(--n); stroke-width:1}
.pfs-qr-karte small{font-size:.74em; color:var(--lime-ink); font-weight:700}
.pfs-aufrufe .pfs-balken-reihe{height:5em; gap:.25em}

/* ── Farben und Schriften ───────────────────────────────── */
.pfs-pal{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:.9em; flex:1; min-height:0}
.pfs-mess{position:relative; overflow:hidden; padding:.6em}
.pfs-mess .pcs-web{height:100%}
.pfs-scan{position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(180deg,transparent 0,transparent 88%,rgba(157,234,27,.35) 97%,#9DEA1B 100%)}
.pfs-guide{gap:.8em}
.pfs-guide-kopf{display:flex; align-items:center; justify-content:space-between; gap:.5em}
.pfs-swatches{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.6em}
.pfs-swatch{display:flex; flex-direction:column; gap:.2em; min-width:0}
.pfs-swatch i{display:block; height:3.2em; border-radius:.6em; box-shadow:inset 0 0 0 1px rgba(24,14,72,.12)}
.pfs-swatch b{font-size:.78em}
.pfs-swatch small{font-size:.7em; color:var(--fg3); font-family:"JetBrains Mono",ui-monospace,monospace}
.pfs-schriften{display:flex; flex-direction:column; gap:.4em}
.pfs-schrift{display:flex; align-items:baseline; gap:.8em; padding:.35em 0; border-top:1px solid var(--hair)}
.pfs-schrift-bsp{font-family:"Inter Tight",Inter,sans-serif; color:var(--n); line-height:1.1; min-width:2.2em}
.pfs-schrift small{font-size:.76em; color:var(--fg2)}

/* ── KI-Ranking ─────────────────────────────────────────── */
.pfs-rk{display:grid; grid-template-columns:minmax(0,1fr) 12.5em; gap:.9em; flex:1; min-height:0}
.pfs-rk-tab{gap:.25em}
.pfs-rk-z{display:grid; grid-template-columns:11.5em repeat(4,minmax(0,1fr)); gap:.4em; align-items:center; padding:.35em 0; border-bottom:1px solid #F1F0F6}
.pfs-rk-z:last-child{border-bottom:0}
.pfs-rk-kopf span{font-size:.74em; font-weight:700; color:var(--fg3); text-align:center}
.pfs-rk-f{font-size:.84em; font-weight:600; line-height:1.3}
.pfs-rk-c{text-align:center; font-size:.76em; font-weight:700; padding:.45em .2em; border-radius:.5em; background:#F6F5FB; color:var(--fg3); white-space:nowrap}
.pfs-rk-c.is-ja{background:rgba(157,234,27,.2); color:var(--lime-ink)}
.pfs-rk-c.is-eins{background:var(--lime-ink); color:#fff}
.pfs-rk-trend{gap:.5em}
.pfs-trend{margin-top:auto}
.pfs-rk-trend > small{font-size:.74em; color:var(--fg3)}

/* ── KI-Vorschlag ───────────────────────────────────────── */
.pfs-vorschlag{gap:.7em; flex:1}
.pfs-denkt{display:flex; align-items:center; gap:.5em; font-size:.82em; color:var(--lime-ink); font-weight:600}
.pfs-denkt > .pcs-i{color:var(--lime-ink); stroke-width:2.6}
.pfs-punkte{display:none; gap:.25em}
.pfs-punkte i{width:.45em; height:.45em; border-radius:50%; background:#1B4B99; opacity:.35}
.pfs-denkt.is-denkt{color:#1B4B99}
.pfs-denkt.is-denkt .pfs-punkte{display:inline-flex}
.pfs-denkt.is-denkt > .pcs-i{display:none}
.pfs-denkt.is-denkt .pfs-punkte i{animation:pfs-punkt 1s infinite ease-in-out}
.pfs-denkt.is-denkt .pfs-punkte i:nth-child(2){animation-delay:.15s}
.pfs-denkt.is-denkt .pfs-punkte i:nth-child(3){animation-delay:.3s}
@keyframes pfs-punkt{50%{opacity:1; transform:translateY(-.2em)}}
.pfs-vs{display:flex; flex-direction:column; gap:.3em}
.pfs-vs small{font-size:.74em; font-weight:700; color:var(--fg3); text-transform:uppercase; letter-spacing:.08em}
.pfs-vs .pcs-diff-alt,.pfs-vs .pcs-diff-neu{font-size:.88em}
.pfs-vs .pcs-diff-neu{min-height:2.2em}
.pfs-code{font-family:"JetBrains Mono",ui-monospace,monospace; font-size:.8em !important; font-weight:600}
.pfs-vorschlag .pcs-ent-knoepfe{margin-top:auto}

/* ── Mittlere Bühne (561–860 px): eine Spalte weniger ───── */
@container (min-width: 561px) and (max-width: 860px){
  .pfs-kartenraster,.pfs-rk{grid-template-columns:minmax(0,1fr) 12em}
  .pfs-post{grid-template-columns:13em minmax(0,1fr)}
  .pfs-kl-raster{grid-template-columns:minmax(0,1fr) 10em}
  .pfs-kl-raster .pfs-aufrufe{display:none}
  .pfs-dzs{grid-template-columns:minmax(0,1fr)}
  .pfs-dzs .pfs-dz:nth-child(n+3){display:none}
  .pfs-zeile{grid-template-columns:2.2em 8em minmax(0,1fr) auto}
  .pfs-zeile .pcs-zw{display:none}
}

/* ── Schmale Bühne (Smartphone, 4:5) ────────────────────── */
@container (max-width: 560px){
  .pfs-kopf .pcs-h1{font-size:1.45em}
  .pfs-kpis,.pfs-kpis--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfs-kpis--3 .pcs-kpi:nth-child(3){display:none}
  .pfs-zeile{grid-template-columns:minmax(0,1fr) auto; row-gap:.1em}
  .pfs-zeile > b{display:block; grid-column:1; grid-row:1; font-size:.95em}
  .pfs-zeile .pcs-zt{grid-column:1; grid-row:2; font-size:.9em}
  .pfs-zeile .pcs-chip{display:inline-flex; grid-column:2; grid-row:1 / span 2; align-self:center}
  .pfs-zeile .pcs-zw,.pfs-zeile .pcs-zi{display:none}
  .pfs-sch-raster.pfs-mit-ring,.pfs-snip,.pfs-kartenraster,.pfs-post,.pfs-pruefraster,.pfs-sich,.pfs-dat,.pfs-baumraster.pfs-mit-seite,
  .pfs-kl-raster,.pfs-pal,.pfs-rk,.pfs-form-raster{grid-template-columns:minmax(0,1fr)}
  .pfs-ringkarte,.pfs-score{flex-direction:row; gap:1em; justify-content:flex-start; text-align:left}
  .pfs-ringkarte .pcs-ring,.pfs-score .pcs-ring{width:5em; height:5em}
  .pfs-ringkarte .pcs-ring-z b,.pfs-score .pcs-ring-z b{font-size:1.5em}
  .pfs-pks-raster{grid-template-columns:minmax(0,1fr)}
  .pfs-snip-form{display:none}
  .pfs-plan-karte{min-height:20em}
  .pfs-eingang .pfs-mail[data-k="mail"]:nth-of-type(n+3){display:none}
  .pfs-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfs-galerie--3 .pfs-kachel:nth-child(3){display:none}
  .pfs-feed,.pfs-feed--insta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pfs-feed--insta{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pfs-feed .pfs-fk:nth-child(n+3){display:none}
  .pfs-feed--insta .pfs-fk:nth-child(n+3){display:block}
  .pfs-form-raster .pfs-erg{order:2}
  .pfs-wz-s{font-size:.66em}
  .pfs-dat .pfs-datei:nth-child(n+5){display:none}
  .pfs-dat-r{flex-direction:row}
  .pfs-dat-r > *{flex:1; min-width:0}
  .pfs-korb .pcs-knopf{display:none}
  .pfs-zl-linie{top:2.35em}
  .pfs-phase small{display:none}
  .pfs-dzs{grid-template-columns:minmax(0,1fr)}
  .pfs-node{width:44%; font-size:.85em}
  .pfs-kl{font-size:.62em}
  .pfs-kl-raster{grid-template-columns:minmax(0,1fr) 7.5em; align-items:start}
  .pfs-kl-raster .pfs-kl-karte{grid-row:1; grid-column:1}
  .pfs-kl-raster .pfs-qr-karte{grid-row:1; grid-column:2}
  .pfs-vorschlag .pcs-ent-knoepfe{margin-top:.4em}
  .pfs-galerie .pfs-motiv{aspect-ratio:16 / 10}
  .pfs-mess{display:none}
  .pfs-rk-z{grid-template-columns:7.5em repeat(4,minmax(0,1fr)); gap:.25em}
  .pfs-rk-f{font-size:.74em}
  .pfs-rk-c{font-size:.62em; padding:.4em .1em}
  .pfs-rk-kopf span{font-size:.6em}
  .pfs-baum-seite{flex-direction:row; align-items:center; gap:1em}
  .pfs-tbs .pfs-tb:nth-child(n+5):not(.pfs-tb--ki):not([data-k="tbliste"]){display:none}
  .pfs-lauf-schritte span:nth-child(n+3){display:none}
  .pfs-pruefraster,.pfs-dat,.pfs-sch-raster,.pfs-baumraster{align-content:start}
  .pfs-dat-liste{flex:0 0 auto}
  /* Pointe darf umbrechen und lässt rechts Platz für den Pause-Knopf */
  .pfs-toast,.pfs-toast span{white-space:normal}
  .pfs-toast{max-width:calc(100% - 8.5rem); width:max-content; text-align:left; border-radius:1em; line-height:1.3}
}

@media (prefers-reduced-motion: reduce){
  .pfs-denkt .pfs-punkte i{animation:none}
}