/* =========================================================
   Lebende Sequenzen · webentwickler.io CRM (Produktseite)
   Nachbau der CRM-Bildschirme mit Demo-Daten. Eigener Code, keine Bibliothek.
   Maße in em: die Bühne skaliert über die Schriftgröße (Container-Einheiten),
   dadurch bleibt alles gestochen scharf und proportional.
   Markup: lib/produkt_sequenzen.php · Bewegung: sequenzen.js
   ========================================================= */

.pcs{
  --n:#180E48; --n9:#0F0830; --n7:#241A66;
  --lime:#9DEA1B; --lime-ink:#3F6200; --lime-soft:rgba(157,234,27,.28);
  --bg:#F4F3FA; --fg:#1B1538; --fg2:#4A4566; --fg3:#6E6A86;
  --line:rgba(24,14,72,.13); --hair:rgba(24,14,72,.09); --pill:#EEECF5;
  --blau:#2F6FD8; --blau-d:#1B4B99;
  --ease:cubic-bezier(.32,.72,0,1);
  margin:0; position:relative;
}

/* Doppelrand: äußere Schale + innerer Kern */
.pcs-schale{
  padding:.5rem; border-radius:1.75rem;
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18));
  box-shadow:0 0 0 1px rgba(24,14,72,.08), 0 30px 70px -38px rgba(24,14,72,.55), 0 2px 6px rgba(24,14,72,.05);
}
.pc-dunkel .pcs-schale{
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  box-shadow:0 0 0 1px rgba(255,255,255,.12), 0 40px 90px -40px rgba(0,0,0,.65);
}
.pcs-kern{position:relative; border-radius:calc(1.75rem - .5rem); overflow:hidden; background:var(--bg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.pcs-buehne{container-type:inline-size; position:relative}

/* Pause-Knopf */
.pcs-pause{
  position:absolute; right:.75rem; bottom:.75rem; z-index:5;
  width:2.5rem; height:2.5rem; border-radius:999px; border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(24,14,72,.78); color:#fff;
  box-shadow:0 6px 18px -6px rgba(24,14,72,.6);
  transition:transform .4s var(--ease), background .3s var(--ease);
}
.pcs-pause:hover{background:var(--n); transform:scale(1.06)}
.pcs-pause:active{transform:scale(.96)}
.pcs-pause:focus-visible{outline:3px solid var(--lime); outline-offset:3px}
.pcs-pause svg{width:18px; height:18px; stroke:#fff; stroke-width:2.4; fill:none}
.pcs-pause .pcs-pause-s{display:none; fill:#fff; stroke-width:1.5}
.pcs-pause[aria-pressed="true"] .pcs-pause-p{display:none}
.pcs-pause[aria-pressed="true"] .pcs-pause-s{display:block}

/* ── CRM-Gerüst ─────────────────────────────────────────── */
.pcs-app{
  position:relative; overflow:hidden; aspect-ratio:16/10;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:calc(100cqw / 74); line-height:1.35; color:var(--fg); background:var(--bg);
  display:grid; grid-template-rows:3.7em 1fr; letter-spacing:0;
  -webkit-font-smoothing:antialiased; user-select:none;
}
.pcs-app *{box-sizing:border-box}
.pcs-app b{font-weight:700}
.pcs-i{width:1.15em; height:1.15em; flex:0 0 auto; stroke:currentColor; fill:none}
.pcs-fl{flex:1 1 auto}
.pcs-mono{font-family:"JetBrains Mono",ui-monospace,Menlo,monospace; font-size:.74em; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg3)}

.pcs-top{
  background:var(--n); color:#fff; display:flex; align-items:center; gap:.7em; padding:0 1.1em;
  border-bottom:1px solid rgba(255,255,255,.08); white-space:nowrap; min-width:0;
}
.pcs-logo{font-weight:800; font-size:1.06em; letter-spacing:-.02em; display:flex; align-items:center}
.pcs-logo b{color:var(--lime); font-weight:800}
.pcs-logo i{font-style:normal; font-family:"JetBrains Mono",monospace; font-size:.56em; font-weight:700; letter-spacing:.08em;
  margin-left:.55em; padding:.2em .5em; border-radius:.4em; border:1px solid rgba(255,255,255,.25); color:#C1C1DA}
.pcs-site{display:flex; align-items:center; gap:.5em; padding:.42em .85em; border-radius:999px; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12); font-size:.86em; font-weight:600; margin-left:.6em}
.pcs-site-dot{width:.55em; height:.55em; border-radius:50%; background:var(--lime); box-shadow:0 0 0 .22em rgba(157,234,27,.25)}
.pcs-suche{display:flex; align-items:center; gap:.45em; font-size:.84em; color:#B9B6D3; padding:.42em .85em; border-radius:999px;
  background:rgba(255,255,255,.06); min-width:9em}
.pcs-live{display:flex; align-items:center; gap:.4em; font-size:.84em; font-weight:700; color:var(--n); background:var(--lime);
  padding:.48em .9em; border-radius:999px}
.pcs-bearb{display:flex; align-items:center; gap:.4em; font-size:.84em; font-weight:600; padding:.42em .85em; border-radius:999px;
  border:1px solid rgba(255,255,255,.28)}
.pcs-glocke{position:relative; width:2.2em; height:2.2em; border-radius:.6em; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14)}
.pcs-badge{position:absolute; top:-.45em; right:-.45em; min-width:1.35em; height:1.35em; border-radius:999px; background:var(--lime);
  color:var(--n); font-size:.72em; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 .3em}
.pcs-ava{width:2.2em; height:2.2em; border-radius:50%; background:#C1C1DA; color:var(--n); display:flex; align-items:center; justify-content:center}

.pcs-koerper{display:grid; grid-template-columns:13.6em minmax(0,1fr); min-height:0}
.pcs-side{background:#fff; border-right:1px solid var(--hair); padding:.9em .7em; display:flex; flex-direction:column; gap:.18em; min-width:0}
.pcs-firma{display:flex; gap:.6em; align-items:center; padding:.2em .4em .9em; margin-bottom:.4em; border-bottom:1px solid var(--hair)}
.pcs-firma-logo{width:2.2em; height:2.2em; border-radius:.55em; background:var(--n); color:var(--lime); font-weight:800; display:flex; align-items:center; justify-content:center}
.pcs-firma b{display:block; font-size:.84em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:9em}
.pcs-firma small{display:block; font-size:.68em; color:var(--fg3); letter-spacing:.04em}
.pcs-nav{display:flex; align-items:center; gap:.65em; padding:.58em .7em; border-radius:.6em; font-size:.88em; font-weight:500; color:var(--fg2)}
.pcs-nav.is-aktiv{background:var(--n); color:#fff; font-weight:600}
.pcs-nav.is-aktiv .pcs-i{color:var(--lime)}

.pcs-main{position:relative; padding:1.3em 1.5em; display:flex; flex-direction:column; gap:1em; min-width:0; min-height:0; overflow:hidden}

/* Bausteine wie im CRM */
.pcs-kopfzeile{display:flex; flex-direction:column; gap:.2em}
.pcs-h1{font-family:"Inter Tight",Inter,sans-serif; font-weight:700; font-size:1.75em; letter-spacing:-.025em; line-height:1.1}
.pcs-stand{font-size:.82em; color:var(--fg3)}
.pcs-band{background:var(--n); border-radius:.9em; padding:.75em 1em .75em 1.15em; display:flex; align-items:center; gap:1.6em; color:#fff}
.pcs-fakt{display:flex; align-items:center; gap:.6em; font-size:.88em; font-weight:600; white-space:nowrap}
.pcs-fakt > i{width:.6em; height:.6em; border-radius:50%; background:var(--lime); box-shadow:0 0 0 .25em rgba(157,234,27,.22)}
.pcs-fakt .pcs-mono{display:block; color:#B9E05A; font-size:.66em}
.pcs-seg{display:flex; gap:.15em; padding:.2em; background:var(--n9); border-radius:.65em; font-size:.8em; color:#C1C1DA}
.pcs-seg > *{padding:.35em .7em; border-radius:.5em}
.pcs-seg b{background:var(--lime); color:var(--n)}

.pcs-kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75em}
.pcs-kpi{background:#fff; border:1px solid var(--line); border-radius:.8em; padding:.85em 1em; display:flex; flex-direction:column; gap:.4em;
  box-shadow:0 1px 2px rgba(24,14,72,.04); min-width:0}
.pcs-kpi-l{font-size:.8em; font-weight:500; color:var(--fg2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcs-kpi-v{display:flex; align-items:baseline; gap:.2em}
.pcs-kpi-v b{font-family:"Inter Tight",Inter,sans-serif; font-size:1.85em; letter-spacing:-.02em; line-height:1; font-variant-numeric:tabular-nums}
.pcs-kpi-v small{font-size:.8em; color:var(--fg3)}
.pcs-bar{display:block; height:.32em; border-radius:999px; background:var(--pill); overflow:hidden}
.pcs-bar > span{display:block; height:100%; width:var(--w); background:var(--lime-ink); border-radius:inherit; transform-origin:left center}
.pcs-pill{align-self:flex-start; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.74em; font-weight:600;
  padding:.18em .6em; border-radius:999px; background:var(--pill); color:var(--fg2)}
.pcs-pill--ok{background:var(--lime-soft); color:var(--lime-ink)}

.pcs-karte{background:#fff; border:1px solid var(--line); border-radius:.9em; padding:1em 1.1em; display:flex; flex-direction:column; gap:.55em;
  box-shadow:0 1px 2px rgba(24,14,72,.04),0 12px 28px -22px rgba(24,14,72,.35); min-width:0}
.pcs-karte-t{font-weight:700; font-size:.95em}
.pcs-zeile{display:grid; grid-template-columns:2.2em 9em minmax(0,1fr) auto 6.5em; gap:.8em; align-items:center; padding:.4em .2em;
  border-bottom:1px solid #F1F0F6; font-size:.86em}
.pcs-zeile:last-child{border-bottom:0}
.pcs-zi{width:2.2em; height:2.2em; border-radius:.6em; background:var(--pill); color:var(--n7); display:flex; align-items:center; justify-content:center}
.pcs-zt{color:#2E2850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcs-zw{font-size:.86em; color:var(--fg3); text-align:right; white-space:nowrap}
.pcs-chip{justify-self:start; display:inline-flex; align-items:center; gap:.35em; font-size:.76em; font-weight:600; padding:.22em .65em;
  border-radius:999px; background:var(--pill); color:var(--fg2); white-space:nowrap}
.pcs-chip--entwurf{background:rgba(244,183,64,.24); color:#8a4b00}
.pcs-chip--ki{background:rgba(47,111,216,.12); color:#1B4B99}

.pcs-knopf{display:inline-flex; align-items:center; justify-content:center; gap:.4em; font-size:.84em; font-weight:700; padding:.55em 1em;
  border-radius:999px; white-space:nowrap; position:relative}
.pcs-knopf--lime{background:var(--lime); color:var(--n)}
.pcs-knopf--navy{background:var(--n); color:#fff}
.pcs-knopf--leise{background:#fff; color:var(--n); border:1px solid #CFCCE0}
.pcs-knopf--klein{font-size:.74em; padding:.35em .7em; background:#fff; border:1px solid #CFCCE0; color:var(--n)}
.pcs-pub-b{display:none; align-items:center; gap:.35em}
.pcs-knopf.is-ok .pcs-pub-a{display:none}
.pcs-knopf.is-ok .pcs-pub-b{display:inline-flex}
.pcs-knopf--lime.is-ok{background:#3F6200; color:#fff}
.pcs-knopf--navy.is-ok{background:#3F6200}

/* Tippen: Schreibmarke */
.pcs-app .is-tippt::after{content:""; display:inline-block; width:.08em; height:1em; margin-left:.06em; vertical-align:-.12em;
  background:currentColor; animation:pcs-blink .9s steps(1) infinite}
@keyframes pcs-blink{50%{opacity:0}}

/* Cursor */
.pcs-cursor{position:absolute; left:0; top:0; z-index:9; width:1.25em; height:1.25em; margin:-.62em 0 0 -.62em; border-radius:50%;
  background:rgba(24,14,72,.82); box-shadow:0 0 0 .4em rgba(24,14,72,.14), 0 .4em 1em rgba(24,14,72,.3); opacity:0; pointer-events:none}

/* Mini-Website (Demo) */
.pcs-web{background:#fff; border:1px solid var(--line); border-radius:.8em; overflow:hidden; display:flex; flex-direction:column}
.pcs-web-nav{display:flex; align-items:center; gap:1.1em; padding:.75em 1.1em; border-bottom:1px solid var(--hair); font-size:.8em; color:var(--fg2)}
.pcs-web-nav b{color:var(--n); font-size:1.1em; margin-right:auto; letter-spacing:-.01em}
.pcs-web-hero{display:flex; flex-direction:column; gap:.7em; padding:1.6em 1.4em; background:linear-gradient(135deg,#F6F5FB,#EEF6E0)}
.pcs-web-h{font-family:"Inter Tight",Inter,sans-serif; font-weight:700; font-size:1.55em; line-height:1.12; letter-spacing:-.02em; color:var(--n);
  border-radius:.25em; outline:2px dashed transparent; outline-offset:.25em; min-height:1.12em}
.pcs-web-h.is-wahl{outline-color:#7FB000; background:rgba(157,234,27,.18)}
.pcs-web-p{font-size:.86em; color:var(--fg2); max-width:34em}
.pcs-web-btns{display:flex; gap:.6em}
.pcs-web-btn{align-self:flex-start; font-size:.8em; font-weight:700; padding:.55em 1em; border-radius:999px; background:var(--n); color:#fff}
.pcs-web-btn--leise{background:#fff; color:var(--n); border:1px solid #CFCCE0}
.pcs-web-kacheln{display:grid; grid-template-columns:repeat(3,1fr); gap:.7em; padding:1em 1.4em 1.3em}
.pcs-web-kacheln span{height:4.4em; border-radius:.6em; background:linear-gradient(135deg,#E6E3F1,#F3F2F8)}

/* Hero: Drawer + Meldung */
.pcs--hero .pcs-app{aspect-ratio:16/9.4}
.pcs-drawer{position:absolute; top:3.7em; right:0; bottom:0; width:46%; z-index:6; background:#fff; border-left:1px solid var(--line);
  box-shadow:-2em 0 3em -2em rgba(24,14,72,.35); padding:1.1em; display:flex; flex-direction:column; gap:.9em; transform:translateX(104%)}
.pcs-drawer-kopf{display:flex; align-items:center; justify-content:space-between}
.pcs-drawer .pcs-web-h{font-size:1.3em}
.pcs-drawer-fuss{display:flex; justify-content:flex-end; gap:.6em; margin-top:auto}
.pcs-meldung{position:absolute; top:4.3em; right:1.1em; z-index:7; width:21em; display:flex; align-items:center; gap:.8em; padding:.85em 1em;
  background:#fff; border-radius:.9em; border:1px solid var(--line); box-shadow:0 1.4em 2.6em -1.2em rgba(24,14,72,.45); font-size:.92em}
.pcs-meldung-i{width:2.3em; height:2.3em; border-radius:.6em; background:var(--lime-soft); color:var(--lime-ink); display:flex; align-items:center; justify-content:center}
.pcs-meldung b{display:block}
.pcs-meldung > span:nth-child(2){flex:1; min-width:0; font-size:.92em; color:var(--fg2)}
.pcs-meldung > span:nth-child(2) b{color:var(--fg); font-size:1.05em}

/* Kapitel 1: Editor + Versionen */
.pcs-ed{display:flex; flex-direction:column; gap:.9em; height:100%}
.pcs-ed-leiste{display:flex; align-items:center; gap:.7em; background:#fff; border:1px solid var(--line); border-radius:.8em; padding:.55em .6em .55em 1em}
.pcs-ed-leiste b{font-size:.95em}
.pcs-web--gross{flex:1}
.pcs-web--gross .pcs-web-hero{padding:2.2em 1.8em}
.pcs-web--gross .pcs-web-h{font-size:2.1em}
.pcs-versionen{position:absolute; top:8.4em; right:1.5em; z-index:6; width:24em; background:#fff; border:1px solid var(--line); border-radius:.9em;
  padding:1em; display:flex; flex-direction:column; gap:.2em; box-shadow:0 1.6em 3em -1.4em rgba(24,14,72,.5)}
.pcs-versionen .pcs-karte-t{margin-bottom:.4em}
.pcs-ver{display:grid; grid-template-columns:1.1em minmax(0,1fr) auto; gap:.6em; align-items:center; padding:.5em .3em; border-radius:.6em; position:relative; font-size:.9em}
.pcs-ver > i{width:.7em; height:.7em; border-radius:50%; border:2px solid #B9B6D3; background:#fff; justify-self:center}
.pcs-ver.is-aktuell > i{border-color:#3F6200; background:var(--lime)}
.pcs-ver b{display:block; font-size:.95em}
.pcs-ver small{display:block; font-size:.8em; color:var(--fg3)}
.pcs-ver.is-hover{background:#F4F3FA}
.pcs-toast{position:absolute; left:50%; bottom:1.3em; z-index:8; transform:translateX(-50%); display:flex; align-items:center; gap:.5em; white-space:nowrap;
  padding:.65em 1.1em; border-radius:999px; background:var(--n); color:#fff; font-weight:600; font-size:.9em; opacity:0;
  box-shadow:0 1em 2em -1em rgba(24,14,72,.6)}
.pcs-toast .pcs-i{color:var(--lime)}

/* Kapitel 2: Diagramm, Weg, Brief */
.pcs-zwei{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:.9em; flex:1; min-height:0}
.pcs-svg{width:100%; height:auto; display:block; overflow:visible}
.pcs-diag{min-height:0}
.pcs-raster{stroke:rgba(67,64,90,.16); stroke-width:1; fill:none; vector-effect:non-scaling-stroke}
.pcs-flaeche{fill:rgba(47,111,216,.12)}
.pcs-linie{fill:none; stroke:var(--blau); stroke-width:3.2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1 1}
.pcs-weg{gap:.7em}
.pcs-stufe{display:grid; grid-template-columns:6.2em minmax(0,1fr) 3em; gap:.6em; align-items:center; font-size:.84em}
.pcs-stufe b{text-align:right; font-variant-numeric:tabular-nums}
.pcs-stufe-b{height:1.5em; background:#F1F0F6; border-radius:.4em; overflow:hidden}
.pcs-stufe-b i{display:block; height:100%; width:var(--w); background:linear-gradient(90deg,var(--blau-d),var(--blau)); border-radius:.4em; transform-origin:left center}
.pcs-brief{position:absolute; left:50%; top:50%; z-index:7; width:19em; margin:-6em 0 0 -9.5em; background:#fff; border-radius:.9em; border:1px solid var(--line);
  padding:1em 1.1em; display:flex; flex-direction:column; gap:.45em; box-shadow:0 2em 3.5em -1.5em rgba(24,14,72,.5); opacity:0}
.pcs-brief-kopf{display:flex; align-items:center; gap:.5em; padding-bottom:.5em; border-bottom:1px solid var(--hair); color:var(--n)}
.pcs-brief-z{display:flex; justify-content:space-between; font-size:.88em; color:var(--fg2)}
.pcs-brief-z b{color:var(--fg)}
.pcs-postfach{position:absolute; right:1.2em; top:4.4em; z-index:6; display:flex; align-items:center; gap:.7em; background:#fff; border-radius:.9em;
  border:1px solid var(--line); padding:.65em .95em; box-shadow:0 1em 2em -1.2em rgba(24,14,72,.45); font-size:.88em}
.pcs-postfach b{display:block}
.pcs-postfach small{color:var(--fg3)}
.pcs-postfach-i{position:relative; width:2.3em; height:2.3em; border-radius:.6em; background:var(--n); color:#fff; display:flex; align-items:center; justify-content:center}
.pcs-postfach-i i{position:absolute; top:-.4em; right:-.4em; min-width:1.3em; height:1.3em; border-radius:999px; background:var(--lime); color:var(--n);
  font-style:normal; font-weight:800; font-size:.72em; display:flex; align-items:center; justify-content:center}

/* Kapitel 3: KI-Sichtbarkeit */
.pcs-frage{display:flex; align-items:center; gap:.7em; background:#fff; border:1px solid var(--line); border-radius:999px; padding:.65em 1.1em;
  font-size:.95em; font-weight:600; box-shadow:0 .6em 1.4em -1em rgba(24,14,72,.35); min-height:2.9em}
.pcs-frage-i{color:var(--fg3); display:flex}
.pcs-ki{display:grid; grid-template-columns:minmax(0,1fr) 13.5em; gap:.9em; flex:1; min-height:0}
.pcs-assis{gap:.1em; padding:.6em .9em}
.pcs-assi{display:grid; grid-template-columns:8.2em minmax(0,1fr) auto; gap:.8em; align-items:center; padding:.6em .1em; border-bottom:1px solid #F1F0F6}
.pcs-assi:last-child{border-bottom:0}
.pcs-assi-n{display:flex; align-items:center; gap:.55em; font-weight:700; font-size:.9em}
.pcs-assi-n i{width:1.9em; height:1.9em; border-radius:.55em; background:var(--pill); color:var(--n7); font-style:normal; font-weight:800; font-size:.86em;
  display:flex; align-items:center; justify-content:center}
.pcs-assi-a{display:flex; gap:.45em; min-width:0; flex-wrap:nowrap; overflow:hidden}
.pcs-platz{display:inline-flex; align-items:center; gap:.4em; white-space:nowrap; font-size:.8em; padding:.3em .65em .3em .3em; border-radius:999px;
  background:#F6F5FB; color:var(--fg2); border:1px solid var(--hair)}
.pcs-platz i{width:1.5em; height:1.5em; border-radius:50%; background:#fff; font-style:normal; font-weight:700; font-size:.85em; display:flex; align-items:center; justify-content:center; color:var(--fg2)}
.pcs-platz.is-wir{background:var(--lime-soft); border-color:rgba(63,98,0,.25); color:var(--lime-ink); font-weight:700}
.pcs-platz.is-wir i{background:var(--lime-ink); color:#fff}
.pcs-quelle{font-size:.72em; color:var(--fg3); white-space:nowrap}
.pcs-ring-karte{align-items:center; justify-content:center; text-align:center}
.pcs-ring{position:relative; width:8.4em; height:8.4em; display:block}
.pcs-ring svg{width:100%; height:100%; transform:rotate(-90deg)}
.pcs-ring-h{fill:none; stroke:#EEECF5; stroke-width:11}
.pcs-ring-v{fill:none; stroke:#7FB000; stroke-width:11; stroke-linecap:round; stroke-dasharray:1 1}
.pcs-ring-z{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center}
.pcs-ring-z b{font-family:"Inter Tight",Inter,sans-serif; font-size:2.4em; line-height:1}
.pcs-ring-z small{font-size:.8em; color:var(--fg3)}

/* Kapitel 4: Sicherheit */
.pcs-sicher{display:grid; grid-template-columns:15em minmax(0,1fr); gap:.9em; flex:1; min-height:0}
.pcs-schild-karte{align-items:center; justify-content:center; text-align:center; gap:.5em}
.pcs-schild{width:7.5em; height:8.1em; overflow:visible}
.pcs-schild-f{fill:rgba(157,234,27,.16)}
.pcs-schild-r{fill:none; stroke:var(--lime-ink); stroke-width:4; stroke-linejoin:round; stroke-dasharray:1 1}
.pcs-schild-h{fill:none; stroke:var(--lime-ink); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1 1}
.pcs-schild-karte b{font-size:.92em}
.pcs-schild-karte small{font-size:.76em; color:var(--fg3)}
.pcs-ampel{display:flex; gap:.4em; padding:.35em .55em; background:var(--n); border-radius:999px}
.pcs-ampel i{width:.75em; height:.75em; border-radius:50%; background:rgba(255,255,255,.18)}
.pcs-ampel i.is-an{background:var(--lime); box-shadow:0 0 .6em rgba(157,234,27,.8)}
.pcs-pruefungen{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7em; align-content:start}
.pcs-pruef{display:grid; grid-template-columns:2.4em minmax(0,1fr) 1.7em; gap:.7em; align-items:center; background:#fff; border:1px solid var(--line);
  border-radius:.85em; padding:.85em .9em; box-shadow:0 1px 2px rgba(24,14,72,.04)}
.pcs-pruef-i{width:2.4em; height:2.4em; border-radius:.65em; background:var(--pill); color:var(--n7); display:flex; align-items:center; justify-content:center}
.pcs-pruef b{display:block; font-size:.9em}
.pcs-pruef small{display:block; font-size:.78em; color:var(--fg3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pcs-pruef-s{width:1.7em; height:1.7em; border-radius:50%; background:var(--lime); color:var(--n); display:flex; align-items:center; justify-content:center}
.pcs-pruef-s .pcs-i{width:1em; height:1em; stroke-width:3}

/* Kapitel 5: Terminbuchung */
.pcs-buchung{display:grid; grid-template-columns:minmax(0,1fr) 15em; gap:.9em; height:100%}
.pcs-web--buchung{min-height:0}
.pcs-bu{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1.2em; padding:1.1em 1.2em}
.pcs-bu-mon{display:block; font-weight:700; font-size:.95em; margin-bottom:.6em}
.pcs-bu-wt,.pcs-bu-tage{display:grid; grid-template-columns:repeat(7,1fr); gap:.3em; text-align:center}
.pcs-bu-wt i{font-style:normal; font-size:.7em; color:var(--fg3); font-weight:600}
.pcs-bu-tage{margin-top:.35em}
.pcs-bu-tage span{font-size:.78em; height:2.2em; display:flex; align-items:center; justify-content:center; border-radius:.5em; color:#B0ADC4}
.pcs-bu-tage span.is-frei{color:var(--fg); background:#F4F3FA; font-weight:600}
.pcs-bu-tage span.is-wahl{background:var(--n); color:#fff; font-weight:700}
.pcs-bu-r{display:flex; flex-direction:column; gap:.6em}
.pcs-bu-zeiten{display:grid; grid-template-columns:repeat(2,1fr); gap:.4em}
.pcs-bu-zeiten span{font-size:.8em; font-weight:600; text-align:center; padding:.5em; border-radius:.55em; border:1px solid #CFCCE0; color:var(--n)}
.pcs-bu-zeiten span.is-wahl{background:var(--lime); border-color:var(--lime)}
.pcs-feld{display:flex; flex-direction:column; gap:.2em; border:1px solid #CFCCE0; border-radius:.55em; padding:.4em .65em; font-size:.84em; min-height:3.1em}
.pcs-feld small{font-size:.78em; color:var(--fg3)}
.pcs-woche{gap:0; padding-bottom:.6em}
.pcs-woche .pcs-karte-t{margin-bottom:.5em}
.pcs-std{position:relative; display:block; height:4.1em; border-top:1px solid var(--hair)}
.pcs-std > i{position:absolute; left:0; top:.25em; font-style:normal; font-size:.72em; color:var(--fg3)}
.pcs-termin{position:absolute; left:2.4em; right:0; top:.35em; height:3.4em; border-radius:.55em; background:var(--n); color:#fff; padding:.45em .7em;
  display:flex; flex-direction:column; border-left:.3em solid var(--lime)}
.pcs-termin b{font-size:.84em}
.pcs-termin small{font-size:.72em; color:#C1C1DA}

/* Kapitel 6: Claude */
.pcs-kiz{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:1em; height:100%}
.pcs-chat{background:#FBFAF7; border:1px solid var(--line); border-radius:.9em; padding:1em; display:flex; flex-direction:column; gap:.75em; min-height:0}
.pcs-chat-kopf{display:flex; align-items:center; gap:.55em; padding-bottom:.65em; border-bottom:1px solid var(--hair)}
.pcs-chat-kopf small{font-size:.74em; color:var(--fg3); margin-left:auto}
.pcs-chat-logo{width:2em; height:2em; border-radius:.55em; background:#D97757; color:#fff; display:flex; align-items:center; justify-content:center}
.pcs-msg{font-size:.88em; line-height:1.45; color:#2E2850; max-width:92%}
.pcs-msg--ich{align-self:flex-end; background:#EDEAE2; border-radius:1em 1em .3em 1em; padding:.7em .9em; color:var(--fg)}
.pcs-werkzeug{align-self:flex-start; display:inline-flex; align-items:center; gap:.45em; font-size:.76em; font-weight:600; padding:.35em .75em; border-radius:.55em;
  background:#fff; border:1px solid var(--line); color:var(--fg2)}
.pcs-chat-eingabe{margin-top:auto; display:flex; align-items:center; justify-content:space-between; font-size:.82em; color:var(--fg3); background:#fff;
  border:1px solid var(--line); border-radius:.8em; padding:.65em .8em}
.pcs-entwurf{align-self:start; gap:.75em}
.pcs-ent-kopf{display:flex; align-items:center; justify-content:space-between; gap:.5em; flex-wrap:wrap}
.pcs-ent-kopf b{font-size:.92em}
.pcs-diff{display:flex; flex-direction:column; gap:.35em; font-size:.88em}
.pcs-diff-alt{padding:.45em .7em; border-radius:.5em; background:rgba(179,38,30,.08); color:#8f1f18; text-decoration:line-through}
.pcs-diff-neu{padding:.45em .7em; border-radius:.5em; background:var(--lime-soft); color:var(--lime-ink); font-weight:700}
.pcs-ent-meta{font-size:.76em; color:var(--fg3)}
.pcs-ent-knoepfe{display:flex; justify-content:flex-end; gap:.5em}

/* ── Mittlere Bühne (Kapitel neben Text, Tablet): ohne Seitenleiste, größere Schrift ── */
@container (min-width: 561px) and (max-width: 860px){
  .pcs-app{font-size:calc(100cqw / 56)}
  .pcs-koerper{grid-template-columns:minmax(0,1fr)}
  .pcs-side,.pcs-suche,.pcs-ava{display:none}
  .pcs-site{margin-left:auto}
  .pcs-versionen{top:7.6em}
}

/* ── Schmale Bühne (Smartphone) ─────────────────────────── */
@container (max-width: 560px){
  .pcs-app,.pcs--hero .pcs-app{font-size:calc(100cqw / 40); aspect-ratio:4/5}
  .pcs-koerper{grid-template-columns:minmax(0,1fr)}
  .pcs-side,.pcs-suche,.pcs-live,.pcs-ava,.pcs-weg-schmal,.pcs-logo i{display:none}
  .pcs-site{margin-left:auto; font-size:.8em}
  .pcs-top{gap:.5em; padding:0 .9em}
  .pcs-bearb{padding:.42em .6em; font-size:.8em}
  .pcs-main{padding:1em; gap:.8em}
  .pcs-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pcs-zeile{grid-template-columns:2.2em minmax(0,1fr) auto; }
  .pcs-zeile b{display:none}
  .pcs-zeile .pcs-chip{display:none}
  .pcs-drawer{width:100%}
  .pcs-meldung{left:1em; right:1em; width:auto}
  .pcs-zwei,.pcs-ki,.pcs-sicher,.pcs-kiz,.pcs-buchung{grid-template-columns:minmax(0,1fr)}
  .pcs-assi{grid-template-columns:7em minmax(0,1fr)}
  .pcs-ring-karte{flex-direction:row; gap:1em; justify-content:flex-start; text-align:left}
  .pcs-ring{width:5em; height:5em}
  .pcs-ring-z b{font-size:1.6em}
  .pcs-schild-karte{flex-direction:row; flex-wrap:wrap; justify-content:flex-start; text-align:left; column-gap:1em}
  .pcs-schild{width:4em; height:4.4em}
  .pcs-ampel{display:none}
  .pcs-pruefungen{grid-template-columns:minmax(0,1fr)}
  .pcs-pruef{padding:.6em .8em}
  .pcs-versionen{left:1em; right:1em; top:auto; bottom:1em; width:auto}
  .pcs-web--gross .pcs-web-h{font-size:1.6em}
  .pcs-web--gross .pcs-web-hero{padding:1.4em 1.2em}
  .pcs-web-nav span{display:none}
  .pcs-bu{grid-template-columns:minmax(0,1fr); gap:.8em}
  .pcs-bu-tage span{height:1.8em}
  .pcs-chat{max-height:none}
  .pcs-chat-eingabe{display:none}
  .pcs-chat{gap:.6em}
  .pcs-postfach{left:1em; right:1em; top:auto; bottom:1em}
  .pcs-brief{width:17em; margin-left:-8.5em}
}

/* Bis sequenzen.js übernimmt, bleibt die Fläche leer (sonst blitzt der Endzustand auf). Nur mit JS und Bewegung. */
@media (prefers-reduced-motion: no-preference){
  .pcs-js .pcs:not(.is-bereit) .pcs-app > :not(.pcs-top){opacity:0}
}
.pcs-mess .pcs-drawer{transform:none !important}
.pcs-mess *{animation:none !important}

/* Reduzierte Bewegung: nur der ruhige Endzustand (sequenzen.js startet dann nichts) */
@media (prefers-reduced-motion: reduce){
  .pcs-app .is-tippt::after{animation:none}
  .pcs-pause{display:none}
}