/* ==========================================================================
   HausChat — Produkte-Seite
   Wird nur von produkte.html nach styles.css geladen. Oben der Hero mit der
   Übersicht aller Produkte (jede Kachel springt zu ihrem Abschnitt), darunter
   je Produkt ein Abschnitt in seiner Farbe: Rot, Grün, Gelb oder Braun, als
   weicher Verlauf. In jedem Abschnitt eine breite Karte und zwei kleine,
   jede mit einem ruhigen, hellen Bild.
   Die Bilder haben eine feste Bühne (breit 520 × 300, klein 400 × 250).
   js/produkte.js skaliert sie passend zur Karte, js/szenen.js startet sie
   (data-play, data-loop). Ablaufzeiten stehen als --d direkt am Element.
   Ohne JavaScript steht jedes Bild im Endzustand, bei reduzierter Bewegung
   ebenfalls.
   ========================================================================== */

/* ── Farben je Produkt ──────────────────────────────────────────────── */
.pk--rot{--c:#D6573D;--c-tief:#A83E27;--c-weich:#FBE3DC;--c-hell:#FFF6F3;--c-rand:rgba(214,87,61,.22);--c-text:#9A3A24}
.pk--gruen{--c:var(--teal-500);--c-tief:var(--teal-700);--c-weich:var(--teal-100);--c-hell:var(--teal-50);--c-rand:color-mix(in srgb,var(--teal-500) 22%,transparent);--c-text:var(--teal-700)}
.pk--gelb{--c:#D19A12;--c-tief:#9C6F05;--c-weich:#FBEEC4;--c-hell:#FFFAEA;--c-rand:rgba(209,154,18,.28);--c-text:#8A6206}
.pk--braun{--c:#9A6337;--c-tief:#6F4424;--c-weich:#F0E2D4;--c-hell:#FBF6F1;--c-rand:rgba(154,99,55,.24);--c-text:#6B4122}

/* ── Hero mit Übersicht ────────────────────────────────────────────── */
.ph{position:relative;overflow:hidden;padding:calc(88px + var(--nav-height)) 0 104px;
  background:
    radial-gradient(38% 46% at 6% 10%,rgba(251,227,220,.95),transparent 70%),
    radial-gradient(36% 42% at 36% 0%,rgba(251,238,196,.9),transparent 70%),
    radial-gradient(38% 46% at 68% 6%,rgba(226,241,211,.95),transparent 70%),
    radial-gradient(38% 46% at 98% 18%,rgba(240,226,212,.95),transparent 70%),
    linear-gradient(to top,var(--page) 0,color-mix(in srgb,var(--page) 0%,transparent) 55%),
    var(--page)}
.ph__kopf{display:flex;flex-direction:column;align-items:center;max-width:880px;margin:0 auto;text-align:center}
.ph .eyebrow{color:var(--teal-700)}
.ph h1{max-width:14em;margin:14px 0 18px;font-size:clamp(32px,4.2vw,56px);font-weight:600;line-height:1.1;letter-spacing:var(--ls-display);color:var(--ink)}
.ph .ph__lead{max-width:36em;margin:0 0 28px;font-size:17px;line-height:var(--lh-lead);color:var(--body)}
.ph__uebersicht{margin-top:64px}
.ph__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0;padding:0;list-style:none}
.ph__raster>li{display:flex}
.ph__raster>li:first-child{grid-column:span 2}
.ph-kachel{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:20px 20px 18px;border-radius:22px;
  background:linear-gradient(160deg,var(--c-hell) 0%,#FFFFFF 72%);border:1px solid var(--c-rand);color:var(--ink);text-decoration:none;
  transition:translate var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.ph-kachel:hover{translate:0 -3px;border-color:var(--c);color:var(--ink)}
.ph-kachel:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.ph-kachel__kopf{display:flex;align-items:center;justify-content:space-between;width:100%;margin-bottom:10px}
/* Schlichtes Symbol in der Farbe des Produkts, ohne Farbkachel und Schatten. */
.ph-kachel__ic{display:grid;place-items:center;width:28px;height:28px;color:var(--c-tief)}
.ph-kachel__ic .icon{width:26px;height:26px}
.ph-kachel__n{font-family:var(--font-heading);font-size:15px;color:var(--c-text)}
.ph-kachel strong{font-size:18px;line-height:1.25;font-weight:var(--fw-bold)}
.ph-kachel__text{font-size:14px;line-height:1.5;color:var(--body)}
.ph-kachel__mehr{display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:12px;font-size:13.5px;font-weight:var(--fw-bold);color:var(--c-text)}
.ph-kachel__mehr .icon{width:15px;height:15px;transition:translate var(--dur-fast) var(--ease-out)}
.ph-kachel:hover .ph-kachel__mehr .icon{translate:3px 0}
/* Die erste Kachel ist doppelt so breit und zeigt eine kleine Frage an den Assistenten. */
.ph-kachel--gross{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:24px;align-content:start;justify-items:start}
.ph-kachel--gross .ph-kachel__mehr{margin-top:0}
/* Kopf über die ganze Breite, damit die Nummer wie bei den anderen Kacheln rechts oben steht. */
.ph-kachel--gross .ph-kachel__kopf{grid-column:1/-1}
.ph-vorschau{grid-column:2;grid-row:2/span 3;align-self:center;justify-self:stretch;display:flex;flex-direction:column;gap:8px}
.ph-vorschau__frage{align-self:flex-end;max-width:100%;padding:8px 12px;border-radius:14px 14px 4px 14px;background:var(--c);color:#FFFFFF;font-size:13px;line-height:1.4}
.ph-vorschau__antwort{display:flex;align-items:flex-start;gap:7px;padding:9px 12px;border-radius:14px 14px 14px 4px;background:#FFFFFF;border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);
  font-size:13px;line-height:1.4;color:var(--ink);box-shadow:0 10px 24px -16px color-mix(in srgb,var(--ink) 30%,transparent)}
.ph-vorschau__antwort .icon{width:14px;height:14px;margin-top:2px;color:var(--c)}

/* ── Abschnitte je Produkt ─────────────────────────────────────────── */
/* Oben und unten läuft jeder Abschnitt in die Seitenfarbe aus, der Schein
   neben der Überschrift beginnt erst darunter. So gibt es keine harte Kante. */
.pk-sec{--schein-x:0%;position:relative;padding:var(--section-py-web) 0;
  background:
    linear-gradient(180deg,var(--page) 0,transparent 180px,transparent calc(100% - 180px),var(--page) 100%),
    radial-gradient(680px 460px at var(--schein-x) 300px,var(--c-weich),transparent 72%),
    var(--c-hell)}
.pk-sec:nth-of-type(odd){--schein-x:100%}
.pk-sec__kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:end;gap:20px 64px;margin-bottom:40px}
.pk-sec__marke{display:inline-flex;align-items:center;gap:10px;height:36px;padding:0 14px 0 4px;border-radius:var(--radius-pill);background:#FFFFFF;border:1px solid var(--c-rand);
  font-size:12.5px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--c-text)}
.pk-sec__ic{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:linear-gradient(145deg,var(--c),var(--c-tief));color:#FFFFFF}
.pk-sec__ic .icon{width:15px;height:15px}
.pk-sec h2{margin-top:16px;font-size:clamp(32px,3.6vw,46px);line-height:1.1;letter-spacing:var(--ls-heading);color:var(--ink)}
.pk-sec .pk-sec__lead{margin:0;font-size:18px;line-height:1.6;color:var(--body)}
.pk-sec .pk-sec__preis{display:inline-flex;margin:14px 0 0;padding:6px 12px;border-radius:var(--radius-pill);background:var(--c-weich);color:var(--c-text);font-size:13.5px;font-weight:var(--fw-bold)}

.pk-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.pk-karte{display:flex;flex-direction:column;padding:10px;border-radius:26px;background:#FFFFFF;border:1px solid var(--hairline)}
.pk-karte__text{padding:22px 22px 24px}
.pk-karte h3{font-size:24px;line-height:1.22;color:var(--ink)}
/* Stufe über der Überschrift, z. B. Standard oder Plus */
.pk-stufe{display:flex;align-items:center;width:max-content;height:24px;margin-bottom:12px;padding:0 10px;border-radius:var(--radius-pill);background:var(--c-weich);color:var(--c-text);font-size:11px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}
.pk-stufe--plus{background:linear-gradient(145deg,var(--c),var(--c-tief));color:#FFFFFF}
.pk-karte .pk-karte__text p{margin:10px 0 0;max-width:34em;font-size:16px;line-height:1.6;color:var(--body)}
.pk-karte--breit{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:10px}
.pk-karte--breit .pk-karte__text{padding:28px 20px 28px 30px}
.pk-karte--breit h3{font-size:clamp(26px,2.6vw,34px);line-height:1.15}
.pk-breit--links .pk-karte__text{order:2;padding:28px 30px 28px 20px}

/* ── Bühne und Szene ───────────────────────────────────────────────── */
.pk-buehne{--s:1;position:relative;height:calc(var(--h) * var(--s) + 48px);border-radius:18px;overflow:hidden;
  background:radial-gradient(80% 75% at 50% 42%,#FFFFFF 0%,var(--c-hell) 62%,var(--c-weich) 140%)}
.pk-buehne--breit{--w:520px;--h:300px}
.pk-buehne--klein{--w:400px;--h:250px}
.pk-szene{--rand:color-mix(in srgb,var(--ink) 7%,transparent);--schatten:0 1px 2px color-mix(in srgb,var(--ink) 4%,transparent),0 14px 34px -16px color-mix(in srgb,var(--ink) 22%,transparent);--grau:var(--muted);
  --ring:0 0 0 3px color-mix(in srgb,var(--c) 18%,transparent);--ease:cubic-bezier(.22,.61,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);
  position:absolute;left:50%;top:50%;width:var(--w);height:var(--h);translate:-50% -50%;scale:var(--s);transition:opacity .3s var(--ease-out)}
.pk-szene.is-fade{opacity:0}
.pk-szene.is-reset,.pk-szene.is-reset *,.pk-szene.is-reset *::before,.pk-szene.is-reset *::after{transition:none!important;animation:none!important}

/* ── Bausteine ─────────────────────────────────────────────────────── */
.pk-szene .icon{flex:0 0 auto}
.pk-k{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--b,auto);height:var(--hh,auto);display:block;
  background:#FFFFFF;border:1px solid var(--rand);border-radius:14px;box-shadow:var(--schatten);color:var(--ink)}
.pk-pos{position:absolute;left:var(--x,0);top:var(--y,0)}
.pk-lbl{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:var(--fw-bold);line-height:1.3;letter-spacing:.1em;text-transform:uppercase;color:var(--grau);white-space:nowrap}
.pk-lbl .icon{width:12px;height:12px}
.pk-lbl.pk-akzent{color:var(--c-text)}
.pk-lbl.pk-akzent .icon,.icon.pk-akzent{color:var(--c)}
.pk-text{display:block;font-size:12.5px;line-height:1.5;color:var(--ink)}
.pk-t{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0}
.pk-t b{font-size:12.5px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-t>span:not(.pk-lbl):not(.pk-tausch){display:block;font-size:11px;line-height:1.35;color:var(--grau);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pk-t>span .icon{width:11px;height:11px;margin-right:3px;vertical-align:-1px;color:var(--c)}
.pk-kopf{display:flex;align-items:center;gap:10px}
.pk-kopf>img{flex:0 0 auto;width:24px;height:24px}
.pk-kopf>time,.pk-knoten>time,.pk-post>time,.pk-treffer>time,.pk-fund>time{flex:0 0 auto;margin-left:auto;font-size:10.5px;color:var(--grau)}
.pk-ic{position:relative;display:grid;place-items:center;flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:#F1F3F5;color:var(--muted)}
.pk-ic .icon{width:14px;height:14px}
.pk-ic--rot{background:#FBE3DC;color:#B8472F}
.pk-ic--gruen{background:#E6F2DD;color:var(--teal-700)}
.pk-ic--gelb{background:#FBEEC4;color:#8A6206}
.pk-ic--braun{background:#F0E2D4;color:#7A4B27}
.pk-ic--blau{background:var(--himmel-100);color:var(--himmel-700)}
.pk-farbe--gelb{color:var(--amber-500)}
.pk-farbe--braun{color:#8B5A2B}
.pk-farbe--gruen{color:var(--teal-500)}
.pk-av{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:9.5px;font-weight:var(--fw-bold);line-height:1}
.pk-av--sk{background:var(--red-50);color:var(--red-500)}
.pk-av--tb{background:var(--himmel-100);color:var(--himmel-700)}
.pk-av--ay{background:var(--amber-50);color:var(--amber-500)}
.pk-ok{display:grid;place-items:center;flex:0 0 auto;width:18px;height:18px;border-radius:50%;background:var(--violet-500);color:#FFFFFF}
.pk-ok .icon{width:10px;height:10px}
.pk-rot{position:absolute;right:-1px;top:-1px;width:9px;height:9px;border-radius:50%;background:var(--red-500);box-shadow:0 0 0 2px #FFFFFF}
.pk-linien{position:absolute;left:0;top:0;width:var(--w);height:var(--h);overflow:visible;pointer-events:none}
.pk-weg{fill:none;stroke:color-mix(in srgb,var(--c) 45%,#D5DAE0);stroke-width:1.5;stroke-dasharray:4 5;stroke-linecap:round}
.pk-weg--an{stroke:var(--c)}
.pk-punkt{position:absolute;z-index:3;left:0;top:0;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--c);opacity:0;
  offset-path:var(--weg);offset-rotate:0deg;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 18%,transparent),0 0 12px color-mix(in srgb,var(--c) 55%,transparent)}
.pk-marke{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--radius-pill);background:var(--c-weich);
  color:var(--c-text);font-size:11.5px;font-weight:var(--fw-bold);white-space:nowrap}
.pk-marke .icon{width:12px;height:12px}
.pk-marke--hell{background:#FFFFFF;border:1px solid var(--rand);color:var(--body)}
.pk-knoepfe{display:flex;justify-content:flex-end;gap:8px;margin-top:10px}
.pk-knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:30px;padding:0 12px;border-radius:9px;
  font-size:12px;font-weight:var(--fw-bold);white-space:nowrap}
.pk-knopf .icon{width:13px;height:13px}
.pk-knopf--hell{background:#FFFFFF;border:1px solid var(--rand);color:var(--body)}
.pk-knopf--akzent{z-index:2;background:linear-gradient(180deg,color-mix(in srgb,var(--c) 86%,#FFFFFF),var(--c));border:1px solid var(--c-tief);color:#FFFFFF;
  box-shadow:0 6px 14px -8px var(--c-tief)}
.pk-knopf.pk-a-tausch{padding:0}
.pk-knopf.pk-a-tausch>span{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 12px}
.pk-schalter{position:relative;flex:0 0 auto;width:32px;height:18px;margin-left:auto;border-radius:var(--radius-pill);background:var(--c)}
.pk-schalter::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#FFFFFF;translate:14px 0;
  box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 25%,transparent)}
.pk-status-pille{display:flex;align-items:center;gap:8px;height:34px;padding:0 12px 0 5px;border-radius:var(--radius-pill);
  font-size:12px;font-weight:var(--fw-bold);white-space:nowrap}
.pk-blase{display:block;width:max-content;max-width:100%;padding:8px 12px;border-radius:14px;font-size:12px;line-height:1.45;color:var(--ink)}
.pk-blase--ich{align-self:flex-end;max-width:78%;border-radius:14px 14px 4px 14px;background:var(--c);color:#FFFFFF}
.pk-blase--ki{align-self:flex-start;border-radius:14px 14px 14px 4px;background:var(--c-hell);border:1px solid var(--c-rand)}
.pk-blase--rein{margin-top:10px;border-radius:4px 14px 14px 14px;background:#F3F5F7}
.pk-blase--rechts{align-self:flex-end;margin-top:0;border-radius:14px 4px 14px 14px}
.pk-blase--raus{margin:8px 0 0 auto;border-radius:14px 14px 4px 14px;background:#E9F5E4}
.pk-wer{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:auto;font-size:11.5px;font-weight:var(--fw-bold);white-space:nowrap}
.pk-wer--rand{height:28px;padding:0 10px 0 2px;border:1px solid var(--rand);border-radius:var(--radius-pill)}
/* Zeiger mit Namensschild, --c ist hier die Farbe der Person. */
.pk-zeiger{z-index:6;display:flex;align-items:flex-start;gap:2px;pointer-events:none}
.pk-zeiger svg{width:18px;height:18px;overflow:visible;filter:drop-shadow(0 2px 3px rgba(0,0,0,.2))}
.pk-zeiger path{fill:var(--c);stroke:#FFFFFF;stroke-width:1.2;stroke-linejoin:round}
.pk-zeiger em{margin-top:14px;padding:3px 9px;border-radius:var(--radius-pill);background:var(--c);color:#FFFFFF;
  font-style:normal;font-size:11px;font-weight:var(--fw-bold);line-height:1.3;white-space:nowrap}

/* ── Abläufe: Startzustand nur mit html.js, Zeitpunkt über --d ─────── */
@keyframes pk-lauf{0%{offset-distance:0%;opacity:0}15%,85%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes pk-druck{50%{scale:.92}}
@keyframes pk-tippt{0%{opacity:0}10%,90%{opacity:1}100%{opacity:0}}
@keyframes pk-punkte{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes pk-scan{0%{top:0;opacity:0}12%,88%{opacity:1}100%{top:100%;opacity:0}}
@keyframes pk-ring{0%{opacity:.6;scale:1}100%{opacity:0;scale:1.7}}
@keyframes pk-live{0%,100%{scale:1 .4}50%{scale:1 1}}
@keyframes pk-blinken{50%{opacity:0}}

html.js .pk-a-rein{opacity:0;translate:0 10px;transition:opacity .45s var(--ease) var(--d,0s),translate .45s var(--ease) var(--d,0s)}
html.js .pk-a-links{opacity:0;translate:-10px 0;transition:opacity .45s var(--ease) var(--d,0s),translate .45s var(--ease) var(--d,0s)}
html.js .pk-a-pop{opacity:0;scale:.85;transition:opacity .3s var(--ease) var(--d,0s),scale .45s var(--pop) var(--d,0s)}
html.js .pk-a-weg{opacity:0;transition:opacity .3s var(--ease) var(--d,0s)}
html.js .is-play .pk-a-rein,html.js .is-play .pk-a-links,html.js .is-play .pk-a-weg{opacity:1;translate:0 0}
html.js .is-play .pk-a-pop{opacity:1;scale:1}
html.js .is-play .pk-punkt{animation:pk-lauf .9s var(--ease) var(--d,0s) both}

.pk-a-ring{border-color:color-mix(in srgb,var(--c) 50%,transparent);box-shadow:var(--ring),var(--schatten)}
html.js .pk-a-ring{border-color:var(--rand);box-shadow:none;
  transition:border-color .3s var(--ease) var(--d-ring,var(--d,0s)),box-shadow .3s var(--ease) var(--d-ring,var(--d,0s))}
html.js .pk-k.pk-a-ring{box-shadow:var(--schatten)}
html.js .pk-a-links.pk-a-ring{transition:opacity .45s var(--ease) var(--d,0s),translate .45s var(--ease) var(--d,0s),
  border-color .3s var(--ease) var(--d-ring,var(--d,0s)),box-shadow .3s var(--ease) var(--d-ring,var(--d,0s))}
html.js .is-play .pk-a-ring{border-color:color-mix(in srgb,var(--c) 50%,transparent);box-shadow:var(--ring),var(--schatten)}

html.js .is-play .pk-a-klick{animation:pk-druck .3s var(--ease) var(--d-klick,var(--d,0s))}

html.js .pk-a-zeiger{opacity:0;translate:var(--zx,40px) var(--zy,60px);transition:opacity .3s var(--ease) var(--d,0s),translate .8s var(--ease) var(--d,0s)}
html.js .is-play .pk-a-zeiger{opacity:1;translate:0 0}

.pk-a-tausch{display:inline-grid}
.pk-a-tausch>span{grid-area:1/1}
.pk-a-tausch>.a{opacity:0}
html.js .pk-a-tausch>span{transition:opacity .2s var(--ease) var(--d,0s)}
html.js .pk-a-tausch>.a{opacity:1}
html.js .pk-a-tausch>.b{opacity:0}
html.js .is-play .pk-a-tausch>.a{opacity:0}
html.js .is-play .pk-a-tausch>.b{opacity:1}

html.js .pk-a-schalter{background:#D5DBE1;transition:background-color .25s var(--ease) var(--d,0s)}
html.js .pk-a-schalter::after{translate:0 0;transition:translate .25s var(--ease) var(--d,0s)}
html.js .is-play .pk-a-schalter{background:var(--c)}
html.js .is-play .pk-a-schalter::after{translate:14px 0}

html.js .pk-a-schieben{translate:0 0;transition:translate .35s var(--ease) var(--d,0s)}

html.js .pk-a-zeichnen{stroke-dashoffset:100;transition:stroke-dashoffset var(--dauer,1.2s) var(--ease) var(--d,0s)}
html.js .is-play .pk-a-zeichnen{stroke-dashoffset:0}

html.js .pk-a-balken{scale:0 1;transition:scale var(--dauer,.6s) var(--ease) var(--d,0s)}
html.js .is-play .pk-a-balken{scale:1 1}

html.js .pk-a-mark{background:transparent;color:inherit;transition:background-color .3s var(--ease) var(--d,0s),color .3s var(--ease) var(--d,0s)}
html.js .is-play .pk-a-mark{background:var(--c-weich);color:var(--c-text)}

html.js .is-play .pk-a-tippt{animation:pk-tippt 1s linear var(--d,0s) both}
html.js .is-play .pk-a-scan{animation:pk-scan 1.4s ease-in-out var(--d,0s) both}

html.js .pk-a-haken .pk-haken{background:#DDE2E8;transition:background-color .25s var(--ease) var(--d,0s)}
html.js .is-play .pk-a-haken .pk-haken{background:var(--violet-500)}

html.js .pk-a-fokus{border-color:var(--rand);box-shadow:var(--schatten);
  transition:border-color .3s var(--ease) var(--d,0s),box-shadow .3s var(--ease) var(--d,0s)}
html.js .is-play .pk-a-fokus{border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:var(--ring),var(--schatten)}

/* ── 1 · KI-Assistent ──────────────────────────────────────────────── */
.pk-chat{display:flex;flex-direction:column;overflow:hidden}
.pk-chat__kopf{display:flex;align-items:center;gap:10px;flex:0 0 auto;height:48px;padding:0 16px;border-bottom:1px solid #EEF1F4;font-size:13.5px}
.pk-chat__kopf img{width:26px;height:26px;border-radius:7px}
.pk-chat__kopf .icon{width:16px;height:16px;margin-left:auto}
.pk-chat__verlauf{display:flex;flex-direction:column;gap:10px;flex:1;padding:14px 16px;background:#FBFBFC}
.pk-treffer{display:flex;align-items:center;gap:10px;width:360px;height:40px;margin-top:8px;padding:0 10px;border-radius:10px;background:#FFFFFF;border:1px solid var(--rand)}
.pk-treffer+.pk-treffer{margin-top:6px}
.pk-treffer>img{width:24px;height:24px}
.pk-tippt{position:absolute;left:16px;top:106px;z-index:2;display:flex;gap:4px;padding:11px 13px;border-radius:14px 14px 14px 4px;
  background:var(--c-hell);border:1px solid var(--c-rand);opacity:0}
.pk-tippt i{width:6px;height:6px;border-radius:50%;background:var(--c);animation:pk-punkte 1.1s ease-in-out infinite}
.pk-tippt i:nth-child(2){animation-delay:.18s}
.pk-tippt i:nth-child(3){animation-delay:.36s}

.pk-brief{padding:12px 14px;overflow:hidden}
.pk-brief__text{display:block;margin-top:9px;font-size:11px;line-height:1.55;color:var(--body)}
.pk-brief mark{padding:0 2px;border-radius:3px;background:var(--c-weich);color:var(--c-text);font-weight:var(--fw-bold)}
.pk-erkannt{padding:8px 12px}
.pk-erkannt b{display:block;margin-top:1px;font-size:12.5px;white-space:nowrap}

.pk-nachricht,.pk-vorschlag{padding:12px 14px}
.pk-vorschlag .pk-text{margin-top:6px}

/* ── 2 · Kommunikation empfangen ───────────────────────────────────── */
.pk-kachel{position:absolute;left:var(--x);top:var(--y);display:grid;place-items:center;width:56px;height:56px;border-radius:16px;
  background:#FFFFFF;border:1px solid var(--rand);box-shadow:var(--schatten)}
.pk-kachel img{width:30px;height:30px}
.pk-kachel .icon{width:24px;height:24px}
.pk-kachel .pk-kachel__breit{width:42px;height:auto}
.pk-eingang{padding:0 14px;overflow:hidden}
.pk-eingang__kopf{display:flex;align-items:center;justify-content:space-between;height:42px;border-bottom:1px solid #EEF1F4;font-size:13px}
.pk-zahl{padding:3px 9px;border-radius:var(--radius-pill);background:var(--c-weich);color:var(--c-text);font-size:11px;font-weight:var(--fw-bold)}
.pk-post{display:flex;align-items:center;gap:10px;height:41px;border-bottom:1px solid #F4F5F7}
.pk-post:last-child{border-bottom:0}
.pk-post>img{width:24px;height:24px}

.pk-tabelle{padding:12px 14px 10px}
.pk-reihe{display:flex;align-items:center;gap:10px;height:36px;margin-top:6px;padding:0 10px;border:1px solid transparent;border-radius:10px;font-size:12.5px;background:#FFFFFF}
.pk-reihe b{font-weight:var(--fw-bold)}
.pk-ankunft{display:flex;align-items:center;gap:10px;height:52px;padding:0 12px}
.pk-ankunft>img{flex:0 0 auto;width:24px;height:24px}
.pk-ankunft .pk-marke{margin-left:auto}

.pk-fall{padding:12px 14px}
.pk-status{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:30px;margin:12px 0 4px;padding:3px;border-radius:9px;background:#F1F3F5;
  font-size:11.5px;font-weight:var(--fw-bold)}
.pk-status>span{position:relative;z-index:1;display:grid;place-items:center;color:var(--body)}
.pk-status__marke{position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px) / 3);border-radius:7px;background:#FFFFFF;
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 15%,transparent);translate:200% 0}
html.js .is-play .pk-status__marke{translate:200% 0}
.pk-notiz{display:flex;align-items:flex-start;gap:8px;margin-top:8px}
.pk-notiz>span{padding:7px 10px;border-radius:4px 12px 12px 12px;background:#FFF8E6;font-size:11.5px;line-height:1.45;color:var(--ink)}
.pk-notiz small{display:block;margin-bottom:1px;font-size:9px;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--amber-500)}
.pk-erwaehnung{color:var(--himmel-700);font-weight:var(--fw-bold)}

/* ── 3 · Automation ────────────────────────────────────────────────── */
.pk-knoten{display:flex;align-items:center;gap:9px;height:50px;padding:0 12px 0 10px}
.pk-knoten .pk-lbl{font-size:9px;letter-spacing:.08em}
.pk-knoten .pk-t b{font-size:12px}
.pk-palette{padding:10px 10px 6px}
.pk-palette__z{display:flex;align-items:center;gap:7px;height:32px;margin-top:4px;padding:0 8px;border:1px dashed #DAD6CC;border-radius:9px;
  font-size:11.5px;font-weight:var(--fw-bold);color:var(--body);white-space:nowrap}
.pk-palette .pk-lbl+.pk-palette__z{margin-top:8px}
.pk-palette__z .icon{width:13px;height:13px;color:var(--c-tief)}
.pk-palette__z:last-child{border-style:solid;border-color:var(--c-rand);background:var(--c-hell);color:var(--c-text)}
.pk-sms{padding:12px 14px}
.pk-sms__kopf{display:flex;align-items:center;gap:6px}
.pk-sms__kopf time{margin-left:auto;font-size:10.5px;color:var(--grau)}
.pk-vorlagen{padding:12px 14px 4px}
.pk-vorlage{display:flex;align-items:center;gap:10px;height:50px;border-top:1px solid #EEF1F4}
.pk-vorlagen .pk-lbl+.pk-vorlage{margin-top:8px;border-top:0}

/* ── 4 · Telefon-KI ────────────────────────────────────────────────── */
.pk-anruf{display:flex;flex-direction:column;align-items:flex-start;gap:12px;padding:16px}
.pk-anruf__ic{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(145deg,var(--c),var(--c-tief));color:#FFFFFF}
.pk-anruf__ic .icon{width:20px;height:20px}
.pk-welle-ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--c);opacity:0;animation:pk-ring 2s ease-out 3}
.pk-live{display:inline-flex;align-items:center;gap:3px;height:26px;padding:0 10px 0 9px;border-radius:var(--radius-pill);background:var(--c-weich);
  color:var(--c-text);font-size:11px;font-weight:var(--fw-bold);white-space:nowrap}
.pk-live i{width:3px;height:12px;border-radius:2px;background:var(--c);animation:pk-live 1s ease-in-out infinite}
.pk-live i:nth-child(2){animation-delay:.15s}
.pk-live i:nth-child(3){animation-delay:.3s}
.pk-live i:nth-child(4){animation-delay:.45s}
.pk-live i:nth-child(5){margin-right:6px;animation-delay:.6s}
.pk-gespraech{display:flex;flex-direction:column;gap:8px;padding:12px 14px}

.pk-sprach{padding:14px 16px}
.pk-player{display:flex;align-items:center;gap:10px;margin-top:12px}
.pk-play{position:relative;flex:0 0 auto;width:28px;height:28px;border-radius:50%;background:var(--c)}
.pk-play::after{content:"";position:absolute;left:11px;top:9px;width:9px;height:10px;background:#FFFFFF;clip-path:polygon(0 0,100% 50%,0 100%)}
.pk-welle{flex:1 1 auto;min-width:0;height:24px;overflow:visible}
.pk-welle path{fill:none;stroke:#D5DBE1;stroke-width:2.4;stroke-linecap:round}
.pk-welle .pk-welle__an{stroke:var(--c);stroke-dasharray:100 101}
.pk-player time{font-size:11px;color:var(--grau)}
.pk-abschrift{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #EEF1F4}
.pk-abschrift .pk-text{margin-top:5px}

/* Plus: Anruf in einer Zeile, darunter der Termin, den die Telefon-KI einträgt */
.pk-anruf--kompakt{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:10px 8px;padding:12px}
.pk-anruf--kompakt .pk-live{grid-column:1/-1;justify-self:start}
.pk-termin{display:flex;flex-direction:column;align-items:flex-start;padding:12px 14px}
.pk-termin b{margin-top:8px;font-size:16px;line-height:1.2;color:var(--ink)}
.pk-termin__was{margin-top:3px;font-size:11.5px;line-height:1.35;color:var(--body)}
.pk-termin__ok{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;font-weight:var(--fw-bold);color:var(--teal-700)}

/* ── 5 · Post-Scan-Service ─────────────────────────────────────────── */
.pk-umschlag{border-radius:8px;overflow:hidden}
.pk-umschlag svg{position:absolute;left:0;top:0;width:100%;height:100%}
.pk-umschlag path{fill:none;stroke:#E4E0DA;stroke-width:1.2}
.pk-umschlag__fenster{position:absolute;left:12px;top:44px;width:78px;padding:4px 6px;border:1px solid #E4E0DA;border-radius:4px;background:#FBFAF8;
  font-size:7.5px;line-height:1.35;color:var(--ink)}
.pk-umschlag__marke{position:absolute;right:10px;top:9px;width:16px;height:20px;border:1.5px dashed var(--c);border-radius:2px;background:var(--c-hell)}
.pk-blatt{padding:14px 14px 0;border-radius:6px;overflow:hidden;font-size:7px;line-height:1.5;color:var(--body)}
.pk-blatt__kopf{display:flex;align-items:center;gap:5px;font-size:8px;font-weight:var(--fw-bold);color:var(--ink)}
.pk-blatt__kopf i{width:12px;height:12px;border-radius:3px;background:var(--ink)}
.pk-blatt__an{display:block;margin-top:12px;font-size:7.5px;line-height:1.4;color:var(--ink)}
.pk-blatt__betreff{display:block;margin-top:12px;font-size:8.5px;font-weight:var(--fw-bold);line-height:1.35;color:var(--ink)}
.pk-blatt__text{display:block;margin-top:6px}
.pk-scan{position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);opacity:0;
  box-shadow:0 0 12px 3px color-mix(in srgb,var(--c) 60%,transparent)}
.pk-ankommen{padding:12px 12px 14px}
.pk-ankommen .pk-text{margin:8px 0 10px;font-size:11.5px;color:var(--body)}

.pk-rueck{padding:14px 16px}
.pk-umschalter{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:34px;margin:10px 0 14px;padding:3px;border-radius:10px;background:#F1F3F5;
  font-size:12px;font-weight:var(--fw-bold)}
.pk-umschalter span{position:relative;z-index:1;display:grid;place-items:center;color:var(--body)}
.pk-umschalter__marke{position:absolute;left:3px;top:3px;bottom:3px;width:calc((100% - 6px) / 2);border-radius:8px;background:#FFFFFF;
  box-shadow:0 1px 3px color-mix(in srgb,var(--ink) 15%,transparent);translate:100% 0}
html.js .is-play .pk-umschalter__marke{translate:100% 0}
.pk-stapel{position:absolute;left:var(--x);top:var(--y);width:132px;height:84px}
.pk-stapel i{position:absolute;width:120px;height:60px;border-radius:6px;background:#FFFFFF;border:1px solid var(--rand);box-shadow:var(--schatten)}
.pk-stapel i:nth-child(1){left:12px;top:14px}
.pk-stapel i:nth-child(2){left:6px;top:7px}
.pk-stapel i:nth-child(3){left:0;top:0}
.pk-stapel .pk-marke{position:absolute;left:16px;top:60px;background:#FFFFFF;border:1px solid var(--c-rand)}

/* ── 6 · Analyse ───────────────────────────────────────────────────── */
.pk-tabs{display:flex;gap:4px;padding:3px;border-radius:10px;background:#FFFFFF;border:1px solid var(--rand);font-size:11.5px;font-weight:var(--fw-bold);color:var(--grau)}
.pk-tabs span{padding:5px 10px;border-radius:7px}
.pk-tabs .is-an{background:var(--c-weich);color:var(--c-text)}
.pk-kpi{padding:11px 10px}
.pk-wert{display:block;margin-top:6px;font-family:var(--font-heading);font-weight:400;font-size:26px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.pk-trend{display:inline-flex;align-items:center;height:18px;margin-top:8px;padding:0 7px;border-radius:var(--radius-pill);background:var(--teal-50);color:var(--teal-500);
  font-size:10px;font-weight:var(--fw-bold)}
.pk-kurve{padding:11px 14px}
.pk-kurve svg{display:block;width:100%;height:64px;margin-top:12px;overflow:visible}
.pk-kurve path{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100 101}
.pk-kurve__rein{stroke:var(--c)}
.pk-kurve__raus{stroke:color-mix(in srgb,var(--c) 40%,#FFFFFF)}

.pk-hm{padding:12px 14px 10px}
.pk-hm .pk-lbl{margin-bottom:8px}
.pk-hm__zeile{display:flex;align-items:center;gap:3px;height:21px}
.pk-hm__zeile b{width:24px;font-size:10px;font-weight:var(--fw-bold);color:var(--grau)}
.pk-hm__zeile i{width:21px;height:17px;border-radius:4px;background:color-mix(in srgb,var(--c) calc(var(--v) * 100%),#EEF1F4)}
.pk-hm__achse{display:flex;justify-content:space-between;margin:6px 0 0 27px;font-size:9.5px;color:var(--grau)}

.pk-liste{padding:11px 14px 8px}
.pk-liste .pk-lbl{margin-bottom:4px}
.pk-balken{display:grid;grid-template-columns:96px minmax(0,1fr) 26px;align-items:center;gap:8px;height:22px;font-size:11.5px;color:var(--body)}
.pk-balken>span{display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;overflow:hidden}
.pk-balken .pk-av{width:18px;height:18px;font-size:8px}
.pk-balken>i{position:relative;height:6px;border-radius:var(--radius-pill);background:#EEF1F4;overflow:hidden}
.pk-balken>i>i{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:var(--radius-pill);background:var(--c);transform-origin:0 50%}
.pk-balken>b{text-align:right;font-size:12px;color:var(--ink)}

/* ── 7 · Archiv ────────────────────────────────────────────────────── */
.pk-suchfeld{display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-color:color-mix(in srgb,var(--c) 45%,transparent);box-shadow:var(--ring),var(--schatten)}
.pk-suchfeld>.icon{width:16px;height:16px;color:var(--grau)}
.pk-wort{display:flex;align-items:center;height:18px;font-size:13.5px;color:var(--ink);white-space:pre}
.pk-b{display:inline-block;overflow:hidden}
html.js .pk-b{max-width:0;transition:max-width 0s linear calc(var(--d,0s) + .3s + var(--i) * 65ms)}
html.js .is-play .pk-b{max-width:1em}
.pk-caret{display:inline-block;width:1.5px;height:16px;margin-left:1px;background:var(--c);animation:pk-blinken 1s steps(1) infinite}
.pk-filter{display:flex;gap:6px}
.pk-filter span{height:26px;padding:0 11px;border:1px solid var(--rand);border-radius:var(--radius-pill);background:#FFFFFF;
  font-size:11.5px;font-weight:var(--fw-bold);line-height:24px;color:var(--body)}
.pk-filter .is-an{border-color:var(--c);background:var(--c-weich);color:var(--c-text)}
.pk-treffer-liste{padding:11px 14px 6px}
.pk-fund{display:flex;align-items:center;gap:10px;height:44px;border-top:1px solid #F1F3F5}
.pk-treffer-liste .pk-lbl+.pk-fund{margin-top:6px;border-top:0}
.pk-fund>img{width:22px;height:22px}
.pk-fund mark{padding:0 2px;border-radius:3px;background:var(--c-weich);color:var(--c-text);font-weight:var(--fw-bold)}

.pk-protokoll{padding:12px 14px 8px}
.pk-proto{display:flex;align-items:center;gap:8px;height:36px;border-top:1px solid #F1F3F5;font-size:12px;color:var(--ink);white-space:nowrap}
.pk-protokoll .pk-lbl+.pk-proto{margin-top:6px;border-top:0}
.pk-proto time{flex:0 0 auto;width:38px;font-size:11px;color:var(--grau)}
.pk-proto .icon{width:13px;height:13px;color:var(--c-text)}
.pk-proto--sperre{color:var(--c-text);font-weight:var(--fw-bold)}

.pk-export{padding:12px 16px 14px}
.pk-export .pk-ic{width:28px;height:28px}
.pk-tausch{display:grid;font-size:11px;color:var(--grau)}
.pk-tausch>span{white-space:nowrap}
.pk-tausch>.b{color:var(--teal-500);font-weight:var(--fw-bold)}
.pk-fortschritt{position:relative;display:block;height:6px;margin:12px 0 10px;border-radius:var(--radius-pill);background:#EEF1F4;overflow:hidden}
.pk-fortschritt i{position:absolute;left:0;top:0;bottom:0;width:var(--p);border-radius:var(--radius-pill);background:var(--violet-500);transform-origin:0 50%}
.pk-posten{display:flex;align-items:center;gap:8px;height:26px;font-size:12px;color:var(--body)}
.pk-posten b{margin-left:auto;font-size:12px;color:var(--ink)}
.pk-haken{display:grid;place-items:center;flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:var(--violet-500);color:#FFFFFF}
.pk-haken .icon{width:9px;height:9px}
.pk-auskunft{display:flex;align-items:center;gap:10px;height:50px;padding:0 12px}

/* ── Breiten ───────────────────────────────────────────────────────── */
@media (max-width:1100px){
  .ph__raster{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ph__raster>li:first-child{grid-column:1/-1}
}
@media (max-width:960px){
  .ph{padding-top:calc(64px + var(--nav-height));padding-bottom:80px}
  .ph__uebersicht{margin-top:48px}
  .pk-sec__kopf{grid-template-columns:1fr;gap:16px;margin-bottom:28px}
  .pk-raster{grid-template-columns:1fr}
  .pk-karte--breit{grid-template-columns:1fr}
  .pk-karte--breit .pk-karte__text,.pk-breit--links .pk-karte__text{order:2;padding:22px 22px 24px}
}
@media (max-width:640px){
  .ph h1{font-size:30px}
  .ph .ph__lead{font-size:17px}
  .ph{background:
      radial-gradient(240px 220px at 0% 3%,rgba(251,227,220,.95),transparent 70%),
      radial-gradient(220px 200px at 42% 0%,rgba(251,238,196,.9),transparent 70%),
      radial-gradient(240px 220px at 78% 2%,rgba(226,241,211,.95),transparent 70%),
      radial-gradient(240px 240px at 100% 12%,rgba(240,226,212,.95),transparent 70%),
      var(--page)}
  .ph__raster{grid-template-columns:1fr;gap:10px}
  .ph-kachel--gross{grid-template-columns:1fr}
  .ph-vorschau{grid-column:1;grid-row:auto;margin:10px 0 4px}
  /* Am Handy wird die Übersicht zur kurzen Liste: Symbol, Name, ein Satz, Pfeil. */
  .ph-kachel:not(.ph-kachel--gross){display:grid;grid-template-columns:28px minmax(0,1fr) auto;column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px 14px 14px;border-radius:18px}
  .ph-kachel:not(.ph-kachel--gross) .ph-kachel__kopf{display:contents}
  .ph-kachel:not(.ph-kachel--gross) .ph-kachel__ic{grid-column:1;grid-row:1/span 2}
  .ph-kachel:not(.ph-kachel--gross) .ph-kachel__n{display:none}
  .ph-kachel:not(.ph-kachel--gross) strong{grid-column:2;grid-row:1;align-self:end;font-size:16.5px}
  .ph-kachel:not(.ph-kachel--gross) .ph-kachel__text{grid-column:2;grid-row:2;align-self:start;font-size:13.5px;line-height:1.4}
  .ph-kachel:not(.ph-kachel--gross) .ph-kachel__mehr{grid-column:3;grid-row:1/span 2;margin:0;padding:0;font-size:0}
  .ph-kachel:not(.ph-kachel--gross) .ph-kachel__mehr .icon{width:18px;height:18px}
  .pk-sec h2{font-size:30px}
  .pk-sec .pk-sec__lead{font-size:16px}
  .pk-karte{padding:6px;border-radius:22px}
  .pk-buehne{--s-rand:8}
  /* Ohne JavaScript passen die Bilder so ungefähr, mit JavaScript genau. */
  .pk-buehne--breit{--s:.6}
  .pk-buehne--klein{--s:.8}
  .pk-karte h3,.pk-karte--breit h3{font-size:22px}
  .pk-karte__text,.pk-karte--breit .pk-karte__text,.pk-breit--links .pk-karte__text{padding:18px 14px 20px}
}
@media (prefers-reduced-motion:reduce){
  .ph-kachel,.ph-kachel__mehr .icon{transition:none}
  .pk-szene,.pk-szene *,.pk-szene *::after{transition:none!important;animation:none!important}
  .pk-punkt,.pk-tippt,.pk-scan{display:none}
}