/* Heimat · nur für skill-management.html */
/* ===== Produktseite im Startseiten-Stil (Test 30.10.2026) – baut nur auf den Startseiten-Tokens auf ===== */
.pp-h3 { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
/* Hero: Text zentriert wie auf der Startseite, darunter die Produktgrafik ganz auf hellem Verlauf */
.pp-hero .px-hero { padding-bottom: 0; }
.pp-hero-stage { justify-content: center; }
.pp-hero-fig { margin: 0; width: min(100%, 620px); flex: none; }
.pp-hero-fig svg { display: block; width: 100%; height: auto; overflow: visible; }
@media (min-width: 961px) {
  .px-hero-sec .pp-hero-stage { height: auto !important; padding: var(--sp-9) var(--sp-9) var(--sp-6) !important; align-items: center !important; }
}
@media (max-width: 960px) {
  .px-hero-sec .pp-hero-stage { min-height: 0; padding: var(--sp-6) !important; border-radius: 16px 16px 0 0; }
}
/* Kennzahlen: drei Spalten, nur Linien */
.pp-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-kpi { display: flex; flex-direction: column; gap: var(--sp-2); padding: clamp(32px, 1rem + 1.6vw, 48px) var(--gutter); }
.pp-kpi + .pp-kpi { border-left: 1px solid var(--rule); }
/* Drei Vorteile: Spalten an den Schienen, keine Karten */
.pp-bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pp-ben { display: flex; flex-direction: column; gap: var(--sp-4); padding: clamp(40px, 1rem + 2.4vw, 56px) var(--gutter); color: inherit; transition: background-color var(--dur-hover) ease; }
.pp-ben + .pp-ben { border-left: 1px solid var(--rule); }
.pp-ben .px-tile { margin-bottom: var(--sp-2); }
.pp-ben p { font-size: var(--fs-copy); line-height: 1.55; color: var(--muted); }
.pp-ben-more { margin-top: auto; padding-top: var(--sp-2); display: inline-flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-copy); font-weight: 500; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .pp-ben:hover { background: var(--ground); } .px-ground .pp-ben:hover { background: var(--bg); } .pp-ben:hover .px-arr { transform: translateX(3px); } }
/* Zweispalter mit Punkteliste: etwas kompakter als die Startseite, weil hier eine Liste dazukommt */
.pp-col-txt { padding-block: clamp(56px, 1.5rem + 3.4vw, 80px); gap: var(--sp-6); }
.pp-col-txt .px-lead { max-width: 52ch; }
.pp-points { gap: var(--sp-3); }
.pp-points li { font-size: var(--fs-copy); color: var(--text); }
.pp-points .px-ico { margin-top: 3px; }
/* Rollen: Liste links, Bild rechts, an den Schienen */
.pp-roles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); border-top: 1px solid var(--rule); }
.pp-role-list { display: flex; flex-direction: column; }
.pp-role-btn { position: relative; flex: 1; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-1); min-height: 44px;
  padding: var(--sp-6) var(--gutter); border: 0; border-radius: 0; background: transparent; text-align: left; cursor: pointer;
  transition: background-color var(--dur-hover) ease; }
.pp-role-btn + .pp-role-btn { border-top: 1px solid var(--rule); }
.pp-role-btn:hover { background: var(--bg); }
.pp-role-on, .pp-role-on:hover { background: var(--bg); }
.px-sec:not(.px-ground) .pp-role-btn:hover, .px-sec:not(.px-ground) .pp-role-on, .px-sec:not(.px-ground) .pp-role-on:hover { background: var(--ground); }
.pp-role-name { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; color: var(--muted); }
.pp-role-on .pp-role-name { color: var(--ink); }
.pp-role-cap { font-size: var(--fs-ui); color: var(--muted); }
.pp-role-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rule); overflow: hidden; }
.pp-role-bar i { display: block; height: 100%; background: var(--accent); transform-origin: left center; animation: pp-fill 7s linear forwards; }
@keyframes pp-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .pp-role-bar i { animation: none; transform: scaleX(1); } }
.pp-role-panel { position: relative; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; justify-content: flex-end; background: var(--dark); border-left: 1px solid var(--rule); }
.pp-role-img { position: absolute; top: 0; left: 0; width: 100%; height: 82%; object-fit: cover; display: block; filter: saturate(.82) contrast(1.03) brightness(.98); }
.pp-role-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(24, 72, 101, 1) 0%, rgba(24, 72, 101, 1) 32%, rgba(24, 72, 101, .7) 46%, rgba(24, 72, 101, .2) 62%, rgba(24, 72, 101, 0) 76%); }
.pp-role-copy { position: relative; display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-8) var(--gutter) var(--sp-9); }
.pp-role-copy .px-eyebrow { color: var(--accent-2); }
.pp-role-copy h3 { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 600; font-size: clamp(1.5rem, 1.1rem + 1vw, 1.875rem); line-height: 1.15; letter-spacing: -.03em; color: var(--dark-fg); text-wrap: balance; }
.pp-role-copy p { font-size: var(--fs-lead); line-height: 1.55; color: var(--dark-muted); max-width: 56ch; }
/* Kundenstimmen: Navy, zwei Spalten mit feiner Linie */
.pp-quote { margin: 0; display: flex; flex-direction: column; gap: var(--sp-6); padding: clamp(48px, 1rem + 3vw, 72px) var(--gutter); }
.pp-quote .px-case-mark { width: 44px; height: auto; fill: var(--accent-2); opacity: .7; }
.pp-quote blockquote { margin: 0; }
.pp-quote blockquote p { font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 500; font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.6; letter-spacing: -.01em; color: var(--dark-fg); text-wrap: pretty; }
.pp-who { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4) var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--dark-rule); }
.pp-who-p { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-small); line-height: 1.4; color: var(--dark-muted); }
.pp-who-p img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }
.pp-who-p b { display: block; font-size: var(--fs-body); font-weight: 500; color: var(--dark-fg); }
.pp-who .px-logo-ds { width: 92px; height: auto; color: #FFFFFF; }
/* Bilder (keine Inline-Grafik) im Rahmen: runde Ecken und weicher Schatten wie die Startseiten-Mockups */
.pp-shot { display: block; width: 100%; height: auto; border-radius: 12px; background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(12, 38, 54, .08), 0 28px 56px -24px rgba(12, 38, 54, .35); }
/* Nur ein Zitat: eine Spalte, Zeilenlänge begrenzt */
.pp-quotes-1 .pp-quote blockquote p { max-width: 62ch; }
/* FAQ etwas dichter */
.pp-faq.px-faq summary { padding-block: var(--sp-5); }
@media (max-width: 960px) {
  .pp-kpis, .pp-bens, .pp-roles { grid-template-columns: minmax(0, 1fr); }
  .pp-kpi + .pp-kpi, .pp-ben + .pp-ben { border-left: 0; border-top: 1px solid var(--rule); }
  .pp-role-list { flex-direction: row; overflow-x: auto; }
  .pp-role-btn { flex: 1 0 auto; padding: var(--sp-4) var(--sp-5); }
  .pp-role-btn + .pp-role-btn { border-top: 0; border-left: 1px solid var(--rule); }
  .pp-role-cap { display: none; }
  .pp-role-panel { border-left: 0; border-top: 1px solid var(--rule); min-height: 420px; }
  .px-dark .px-cols > .pp-quote + .pp-quote { border-top: 1px solid var(--dark-rule); }
}
/* ===== Leos Feedback 30.10.: Kopf wie Original-Produktseite, Vorteile kompakt, Rollen, Integrationen ===== */
/* Heller Header (gleiche Menüs wie die Startseite, lesbar auf hell) */
.px-hdr.pp-hdr-light, .px-hdr.pp-hdr-light.is-top:not(.is-mnav):not(.is-mega) { background: #FFFFFF; color: var(--ink); border-bottom-color: var(--rule); }
.pp-hdr-light .px-nav-link { color: var(--text); }
.pp-hdr-light .px-nav-link:hover, .pp-hdr-light .px-nav-link[aria-expanded="true"] { color: var(--ink); }
.pp-hdr-light .px-nav-link::after { background: var(--accent); }
.pp-hdr-light .px-burger { color: var(--ink); }
.pp-hdr-light :focus-visible { outline-color: var(--accent); }
.pp-hdr-light .px-hdr-r .px-btn { background: var(--btn); border-color: transparent; color: var(--btn-fg); }
@media (hover: hover) and (pointer: fine) { .pp-hdr-light .px-hdr-r .px-btn:hover { background: var(--btn-hover); } }
/* Kopf: Grafik links, Text rechts, feine Linie dazwischen, hellgrüner Grund */
.pp-phero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.pp-phero-fig { display: flex; align-items: center; justify-content: center; padding: clamp(40px, 1rem + 2.6vw, 64px) var(--gutter); }
.pp-phero-fig svg { display: block; width: 100%; max-width: 580px; height: auto; overflow: visible; }
.pp-phero-txt { display: flex; flex-direction: column; justify-content: center; padding: clamp(48px, 1rem + 3.4vw, 72px) var(--gutter); border-left: 1px solid var(--rule); }
.pp-phero-eb { font-size: .875rem; font-weight: 500; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--btn); }
.pp-phero-h1 { margin-top: var(--sp-6); font-size: clamp(2.375rem, 1.5rem + 2.4vw, 3.625rem); line-height: 1.06; }
.pp-phero-sub { margin-top: var(--sp-6); max-width: 48ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.pp-phero-btns { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.pp-phero-btns .px-btn { min-height: 48px; font-size: var(--fs-copy); }
.pp-hkpis { margin-top: var(--sp-8); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); background: #FFFFFF; }
.pp-hkpi { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5) var(--sp-4); min-width: 0; }
.pp-hkpi + .pp-hkpi { border-left: 1px solid var(--rule); }
.pp-hkpi .px-kpi-num { margin: 0; font-size: clamp(1.5rem, 1.1rem + .9vw, 1.875rem); line-height: 1; }
.pp-hkpi-l { font-size: var(--fs-ui); line-height: 1.4; color: var(--muted); hyphens: auto; overflow-wrap: break-word; }
/* Vorteile kompakt: Icon links, Titel und Text rechts */
.pp-ben { flex-direction: row; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-7) var(--sp-6); }
.pp-ben:first-child { padding-left: var(--gutter); }
.pp-ben:last-child { padding-right: var(--gutter); }
.pp-ben .px-tile { margin: 0; width: 36px; height: 36px; }
.pp-ben-t { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.pp-ben .pp-h3 { font-size: 1.0625rem; line-height: 1.3; }
.pp-ben p { font-size: var(--fs-ui); line-height: 1.5; }
/* Rollen: Liste breiter und größer, Bild kleiner; Spalten wie Überschrift / Text darüber */
#rollen .px-split-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding-inline: 0; }
#rollen .px-split-top > * { padding-inline: var(--gutter); }
.pp-roles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.pp-role-btn { gap: var(--sp-2); padding: var(--sp-7) var(--gutter); }
.pp-role-name { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); letter-spacing: -.03em; }
.pp-role-cap { font-size: var(--fs-lead); line-height: 1.45; }
.pp-role-panel { min-height: 400px; }
.pp-role-img { height: 78%; }
.pp-role-copy { padding: var(--sp-7) var(--gutter) var(--sp-8); }
.pp-role-copy h3 { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); }
.pp-role-copy p { font-size: var(--fs-copy); }
@media (max-width: 960px) {
  .pp-phero-grid { grid-template-columns: minmax(0, 1fr); }
  .pp-phero-txt { order: -1; border-left: 0; padding-bottom: var(--sp-6); }
  .pp-phero-fig { padding-top: 0; }
  #rollen .px-split-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-6); }
  .pp-roles { grid-template-columns: minmax(0, 1fr); }
  .pp-role-name { font-size: 1.125rem; }
}
@media (max-width: 560px) {
  .pp-hkpis { grid-template-columns: minmax(0, 1fr); }
  .pp-hkpi + .pp-hkpi { border-left: 0; border-top: 1px solid var(--rule); }
  .pp-ben { padding-inline: var(--gutter); }
}
/* ===== Leos Feedback Runde 2 (30.10.) ===== */
/* Hero ohne senkrechte Linie */
.pp-phero-txt { border-left: 0; }
/* „Eine Heimat für alle.“: links Überschrift + Rollen, rechts Bild; beide oben auf einer Linie */
.pp-roles2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-top: 0; }
.pp-roles-l { display: flex; flex-direction: column; min-width: 0; }
.pp-roles-head { display: flex; flex-direction: column; gap: var(--sp-5); padding: var(--sp-9) var(--gutter) var(--sp-8); }
.pp-roles-head .px-lead { max-width: 48ch; }
.pp-roles2 .pp-role-list { flex: 1; border-top: 1px solid var(--rule); }
.pp-roles2 .pp-role-btn { padding: var(--sp-6) var(--gutter); }
.pp-roles-r { display: flex; padding: var(--sp-9) var(--gutter); border-left: 1px solid var(--rule); }
.pp-roles2 .pp-role-panel { flex: 1; min-height: 0; border-left: 0; }
@media (max-width: 960px) {
  .pp-roles2 { grid-template-columns: minmax(0, 1fr); }
  .pp-roles-head { padding: var(--sp-8) var(--gutter) var(--sp-6); }
  .pp-roles-r { border-left: 0; border-top: 1px solid var(--rule); padding: var(--sp-6) var(--gutter); }
  .pp-roles2 .pp-role-panel { min-height: 420px; }
}
/* Hero-Kennzahlen: Zeile passt sich der Anzahl an (2 Zellen ohne leere dritte), 30.10. */
.pp-hkpis--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 560px) { .pp-hkpis--2 { grid-template-columns: minmax(0, 1fr); } }