/* Heimat · gemeinsames Stylesheet aller Seiten (aus dem Canvas exportiert) */
heimat-header, heimat-footer { display: contents; }

/* =========================================================================
   Heimat Startseite · Paradigm-Aufbau, Heimat-Farben (A) – poliert
   Eigenständiges Stylesheet, alle Klassen mit Präfix px- (kollidiert nicht
   mit Tailwind). Schriften: Newsreader (Display) + Roboto (Text).
   ========================================================================= */

/* ---------- Tokens ---------- */
:root {
  /* Farben – dunkle Flächen */
  --dark: #184865;
  --dark-raised: #1F5574;
  --dark-fg: #F2F8FA;
  --dark-muted: #B9D2DC;          /* 6,2:1 auf --dark */
  --dark-rule: rgba(255, 255, 255, .16);

  /* Farben – helle Flächen */
  --bg: #FFFFFF;
  --ground: #F7FBFB;
  --sunken: #F1F8F8;
  --ink: #184865;
  --text: #33424C;
  --muted: #5A7382;               /* ≥ 4,6:1 auf allen hellen Flächen */
  --rule: #DFEAEE;

  /* Akzente */
  --accent: #15849C;              /* Icons, Fokusring, aktiver Tab */
  --accent-2: #5EC9BF;            /* Akzent auf dunklem Grund */
  --btn: #127A90;                 /* weiß darauf 5,0:1 (vorher #15849C = 4,36:1) */
  --btn-hover: #0C6476;
  --btn-fg: #FFFFFF;
  --dbtn: #5EC9BF;
  --dbtn-hover: #7AD4CB;
  --dbtn-fg: #0F3346;

  --grad-soft: linear-gradient(160deg, #E2F3F1 0%, #F4FAFA 100%);
  --grad-deep: linear-gradient(160deg, #1F5C7C 0%, #133A52 100%);
  /* Heller Verlauf hinter Produkt-Screenshots, aus Markenfarben aufgehellt:
     Mint #5EC9BF, Teal #15849C, Navy #184865 */
  --grad-aurora:
    radial-gradient(105% 80% at 0% 0%, #C3EBE4 0%, rgba(195, 235, 228, 0) 58%),
    radial-gradient(75% 60% at 95% 5%, #CDE6EE 0%, rgba(205, 230, 238, 0) 62%),
    radial-gradient(95% 80% at 100% 100%, #BCD3E6 0%, rgba(188, 211, 230, 0) 62%),
    radial-gradient(80% 70% at 5% 100%, #C2E4E8 0%, rgba(194, 228, 232, 0) 60%),
    linear-gradient(160deg, #ECF7F5 0%, #E4F1F3 50%, #DDE8F1 100%);
  /* Hero-Hintergrund nur aus Markenfarben: Navy #184865 unten links, dunkles Navy #0F3346
     in der Mitte, Petrol #00434A oben rechts, darüber Lichter in Teal #15849C und Mint #5EC9BF */
  --grad-hero:
    radial-gradient(55% 70% at 100% 0%, rgba(94, 201, 191, .42) 0%, rgba(94, 201, 191, 0) 62%),
    radial-gradient(45% 60% at 80% 45%, rgba(21, 132, 156, .34) 0%, rgba(21, 132, 156, 0) 70%),
    radial-gradient(60% 75% at -5% 108%, rgba(46, 125, 175, .42) 0%, rgba(46, 125, 175, 0) 60%),
    linear-gradient(118deg, #184865 0%, #0F3346 45%, #0D3842 75%, #00434A 100%);
  --scrim: rgba(10, 34, 48, .34);
  --shadow-pop: 0 1px 2px rgba(19, 44, 64, .06), 0 24px 48px -24px rgba(19, 44, 64, .34);

  /* Schrift */
  --display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Typo-Skala (fließend zwischen 375 und 1440 px) */
  --fs-display: clamp(2.75rem, 1.55rem + 3.9vw, 4.75rem);   /* 44 → 76 */
  --fs-closing: clamp(2.5rem, 1.6rem + 2.9vw, 4rem);        /* 40 → 64 */
  --fs-h2: clamp(2.125rem, 1.55rem + 1.8vw, 3rem);          /* 34 → 48 */
  --fs-lead: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);   /* 17 → 18 */
  --fs-h3: 1.125rem;      /* 18 – Zwischentitel, FAQ-Fragen */
  --fs-body: 1rem;        /* 16 */
  --fs-copy: .9375rem;    /* 15 – Fließtext in Karten und Spalten */
  --fs-ui: .875rem;       /* 14 – Navigation, Buttons, Tabs */
  --fs-small: .8125rem;   /* 13 – Zusatzzeilen */
  --fs-eyebrow: .75rem;   /* 12 – Eyebrow, nur Versalien */

  /* Abstände (4er-Raster) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px;
  --sp-9: 48px; --sp-10: 56px; --sp-11: 64px; --sp-12: 80px;
  --gutter: clamp(20px, .5rem + 3.4vw, 56px);               /* 20 → 56 */
  --sec-y: clamp(64px, 2.5rem + 4.4vw, 104px);              /* 64 → 104 */
  --wrap: 1280px;
  --r-pill: 999px;
  --hdr-h: 68px;

  /* Bewegung */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --dur-press: 160ms;
  --dur-hover: 150ms;
  --dur-pop: 200ms;
  --dur-pop-exit: 130ms;

  /* Ebenen */
  --z-header: 50;
  --z-skip: 60;
}
/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + var(--sp-4));
  -webkit-text-size-adjust: 100%;
}
html.px-lock { overflow: hidden; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
p { text-wrap: pretty; }
::selection { background: #CDEDEA; color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.px-dark :focus-visible, .px-hdr :focus-visible { outline-color: var(--accent-2); }
.px-hdr .px-pop :focus-visible { outline-color: var(--accent); }
.px-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.px-skip {
  position: absolute; left: var(--sp-4); top: calc(-1 * var(--sp-12)); z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--dark-fg); color: var(--ink);
  font-size: var(--fs-ui); font-weight: 500;
}
.px-skip:focus { top: var(--sp-3); }
/* ---------- Typografie ---------- */
.px-serif {
  font-family: var(--display);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}
.px-display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.025em; }
.px-h2 { font-size: var(--fs-h2); line-height: 1.08; letter-spacing: -.02em; }
.px-closing { font-size: var(--fs-closing); line-height: 1.02; letter-spacing: -.025em; }
.px-eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.px-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); max-width: 46ch; }
.px-dark { background: var(--dark); color: var(--dark-fg); }
.px-dark .px-serif { color: var(--dark-fg); }
.px-dark .px-eyebrow, .px-dark .px-lead { color: var(--dark-muted); }
/* ---------- Raster ---------- */
.px-wrap { max-width: var(--wrap); margin-inline: auto; border-inline: 1px solid var(--rule); }
.px-dark .px-wrap { border-color: var(--dark-rule); }
.px-sec { border-top: 1px solid var(--rule); }
.px-dark.px-sec { border-top-color: var(--dark-rule); }
/* Leeres Band zwischen zwei Blöcken: mehr Luft, die Schienen laufen durch (wie bei Paradigm) */
.px-gap { border-top: 1px solid var(--rule); }
.px-gap .px-wrap { height: clamp(56px, .9rem + 6vw, 160px); }
/* bei 1440 px ~100 px */
.px-ground { background: var(--ground); }
.px-sunken { background: var(--sunken); }
.px-head { display: flex; flex-direction: column; gap: var(--sp-5); }
.px-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.px-cols > * { min-width: 0; }
.px-cols > * + * { border-left: 1px solid var(--rule); }
.px-dark .px-cols > * + * { border-left-color: var(--dark-rule); }
.px-col-txt {
  padding: var(--sec-y) var(--gutter) calc(var(--sec-y) + var(--sp-2));
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-7);
}
.px-col-fig { padding: var(--gutter); display: flex; align-items: center; justify-content: center; }
.px-frame { width: 100%; padding: var(--sp-8); background: var(--grad-aurora); }
/* gleicher Farbverlauf wie Hero und Plattform */
.px-frame-deep { background: var(--grad-deep); }
/* Hochformat-Grafik (Kandidatenliste): gleiche Rahmengröße wie die 620×512-Grafiken,
   damit beide Blöcke gleich hoch sind; das Bild sitzt mittig darin */
.px-frame-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 620 / 512; object-fit: contain; }
/* Loop-Videos in den ersten Blöcken: gleicher Rahmen wie die Mockups, Pause-Knopf (WCAG 2.2.2) */
.px-vid-wrap { position: relative; }
.px-col-fig:has(.px-frame-video) { padding: var(--sp-6); }
.px-frame-video { padding: var(--sp-6); }
.px-loop-video {
  display: block; width: 100%; height: auto; border-radius: 12px; background: #F7FAFA;
  box-shadow: 0 2px 6px rgba(12, 38, 54, .08), 0 28px 56px -24px rgba(12, 38, 54, .35);
}
.px-vid-btn {
  position: absolute; right: var(--sp-3); bottom: var(--sp-3);
  width: 28px; height: 28px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 0; cursor: pointer;
  display: grid; place-items: center;
  background: rgba(15, 51, 70, .5); color: #FFFFFF;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: .85;
  transition: background-color var(--dur-hover) ease, opacity var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.px-vid-btn svg { width: 12px; height: 12px; }
.px-vid-btn::before { content: ""; position: absolute; inset: -8px; }
/* 44 px Trefferfläche */
.px-vid-btn:hover { background: rgba(15, 51, 70, .8); opacity: 1; }
.px-vid-btn:active { transform: scale(.94); }
/* immer nur ein Symbol: stärker als „.px-frame svg { display: block }“ */
.px-vid-btn .px-vid-play { display: none; }
.px-vid-btn[aria-pressed="true"] .px-vid-pause { display: none; }
.px-vid-btn[aria-pressed="true"] .px-vid-play { display: block; }
.px-frame svg, .px-step-fig svg, .px-pane svg { display: block; width: 100%; height: auto; overflow: visible; }
/* ---------- Buttons & Links ---------- */
.px-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: var(--sp-3) var(--sp-6);
  border: 1px solid transparent; border-radius: 0;  /* eckig wie die Schritt-Chips */
  font-family: var(--sans); font-size: var(--fs-ui); font-weight: 500; line-height: 1.2;
  white-space: nowrap; cursor: pointer;
  transition:
    background-color var(--dur-hover) ease,
    border-color var(--dur-hover) ease,
    color var(--dur-hover) ease,
    transform var(--dur-press) var(--ease-out);
}
.px-btn:active { transform: scale(.97); }
.px-btn-fill { background: var(--btn); color: var(--btn-fg); }
.px-dark .px-btn-fill, .px-hdr .px-btn-fill { background: var(--dbtn); color: var(--dbtn-fg); }
.px-btn-line { border-color: var(--dark-rule); background: transparent; color: var(--dark-fg); }
.px-link {
  display: inline-flex; align-items: center; gap: var(--sp-2); width: fit-content;
  font-size: var(--fs-copy); font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1.5px;
  text-decoration-color: var(--accent); text-underline-offset: 6px;
  transition: text-decoration-color 200ms ease;
}
.px-link:hover { text-decoration-color: var(--ink); }
.px-arr { flex: none; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .px-btn-fill:hover { background: var(--btn-hover); }
  .px-dark .px-btn-fill:hover, .px-hdr .px-btn-fill:hover { background: var(--dbtn-hover); }
  .px-btn-line:hover { border-color: rgba(255, 255, 255, .6); }
  .px-btn:hover .px-arr, .px-link:hover .px-arr { transform: translateX(3px); }
}
.px-ico { flex: none; margin-top: 4px; color: var(--accent); }
.px-dark .px-ico { color: var(--accent-2); }
/* =========================================================================
   Header
   ========================================================================= */
.px-hdr {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--dark); color: var(--dark-fg);
  border-bottom: 1px solid var(--dark-rule);
  transition: background-color 240ms ease, border-color 240ms ease;
}
/* Ganz oben liegt der Header durchsichtig auf dem Hero-Verlauf */
.px-hdr[data-top]:not([data-mnav-open]):not([data-mega-open]),
.px-hdr.is-top:not(.is-mnav):not(.is-mega) { background-color: transparent; border-bottom-color: transparent; }
/* bewusst ohne position: relative – das Mega-Menü richtet sich am ganzen Header aus.
   Wie bei Napta: Header bündig mit dem Inhalt, auch auf großen Monitoren */
.px-hdr-in {
  max-width: var(--wrap); margin-inline: auto;
  height: var(--hdr-h);
  /* Logo und Button schließen auf breiten Bildschirmen bündig mit den Seitenlinien ab */
  padding-inline: clamp(0px, calc((var(--wrap) + 2 * var(--gutter) - 100vw) / 2), var(--gutter));
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.px-hdr-logo { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
.px-hdr-logo img { height: 38px; width: auto; }
/* Hauptnavigation */
.px-nav { height: 100%; }
.px-nav-list { height: 100%; display: flex; align-items: stretch; gap: var(--sp-1); }
.px-nav-item { display: flex; align-items: center; }
.px-nav-item--drop { position: relative; }
.px-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: var(--sp-2) var(--sp-3);
  background: none; border: 0; cursor: pointer;
  font-size: var(--fs-ui); font-weight: 500; line-height: 1.2;
  color: var(--dark-muted);
  transition: color var(--dur-hover) ease;
}
.px-nav-link:hover,
.px-nav-link[aria-expanded="true"],
.px-nav-link[aria-current="page"] { color: var(--dark-fg); }
.px-chev { flex: none; opacity: .7; transition: transform 200ms var(--ease-out); }
.px-nav-link[aria-expanded="true"] .px-chev { transform: rotate(180deg); }
.px-hdr-r { justify-self: end; display: flex; align-items: center; gap: var(--sp-2); }
/* Aufklapp-Flächen (Mega-Menü und kleine Dropdowns) */
.px-pop {
  visibility: hidden; opacity: 0; pointer-events: none;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-pop-exit) ease,
    transform var(--dur-pop-exit) ease,
    visibility 0s linear var(--dur-pop-exit);
}
.px-nav-item[data-open] > .px-pop {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none;
  transition:
    opacity var(--dur-pop) var(--ease-out),
    transform var(--dur-pop) var(--ease-out),
    visibility 0s;
}
/* Ohne JavaScript öffnen die Menüs per Hover und Tastaturfokus */
html:not(.js) .px-nav-item:hover > .px-pop,
html:not(.js) .px-nav-item:focus-within > .px-pop { visibility: visible; opacity: 1; pointer-events: auto; transform: none; }
/* Wechsel zwischen offenen Menüs ohne erneute Animation */
.px-hdr[data-instant] .px-pop, .px-hdr[data-instant] .px-scrim { transition-duration: 0s !important; }
/* Mega-Menü „Produkt“ */
.px-mega {
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--bg); color: var(--text);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 32px 64px -32px rgba(10, 34, 48, .38);
}
.px-mega-in {
  max-width: var(--wrap); margin-inline: auto;
  border-inline: 1px solid var(--rule);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr);
}
.px-mega-col { padding: var(--sp-8) var(--sp-8) var(--sp-9); display: flex; flex-direction: column; gap: var(--sp-1); }
.px-mega-col:first-child { padding-left: var(--gutter); }
.px-mega-col + .px-mega-col { border-left: 1px solid var(--rule); }
.px-mega-col > .px-eyebrow { margin-bottom: var(--sp-3); }
.px-mega-feat {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4); margin-inline: calc(-1 * var(--sp-4));
  transition: background-color var(--dur-hover) ease;
}
.px-mega-row {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3); margin-inline: calc(-1 * var(--sp-3));
  transition: background-color var(--dur-hover) ease;
}
.px-mega-feat:hover, .px-mega-row:hover { background: var(--ground); }
.px-mega-t { display: block; font-size: var(--fs-copy); font-weight: 500; line-height: 1.35; color: var(--ink); }
.px-mega-feat .px-mega-t { font-size: var(--fs-body); font-weight: 600; }
.px-mega-d { display: block; margin-top: 2px; font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.px-mega-row svg { flex: none; margin-top: 1px; color: var(--muted); transition: color var(--dur-hover) ease; }
.px-mega-row:hover svg { color: var(--accent); }
.px-mega-more { margin-top: var(--sp-4); font-size: var(--fs-ui); }
.px-tile {
  width: 40px; height: 40px; flex: none;
  display: grid; place-items: center;
  background: var(--sunken); border: 1px solid var(--rule); color: var(--accent);
}
/* Kleine Dropdowns */
.px-drop {
  position: absolute; top: 100%; left: calc(-1 * var(--sp-2));
  min-width: 288px; padding: var(--sp-2);
  background: var(--bg); color: var(--text);
  border: 1px solid var(--rule); border-top: 0;
  box-shadow: var(--shadow-pop);
  transform-origin: top left;
}
.px-drop a {
  display: block; padding: var(--sp-3) var(--sp-4);
  transition: background-color var(--dur-hover) ease;
}
.px-drop a:hover { background: var(--ground); }
/* Abdunklung hinter dem Mega-Menü */
.px-scrim {
  position: absolute; top: 100%; left: 0; right: 0; height: 100vh;
  background: var(--scrim);
  opacity: 0; visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
.px-hdr[data-mega-open] .px-scrim { opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0s; }
/* Burger + mobiles Menü */
.px-burger {
  display: none; width: 44px; height: 44px; margin-right: calc(-1 * var(--sp-3));
  align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--dark-fg);
}
.px-burger svg path { transition: transform 200ms var(--ease-out), opacity 150ms ease; transform-origin: 12px 12px; }
.px-burger[aria-expanded="true"] .px-b1 { transform: translateY(5px) rotate(45deg); }
.px-burger[aria-expanded="true"] .px-b2 { opacity: 0; }
.px-burger[aria-expanded="true"] .px-b3 { transform: translateY(-5px) rotate(-45deg); }
.px-mnav {
  position: fixed; top: calc(var(--hdr-h) + 1px); left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; gap: var(--sp-8);
  padding: var(--sp-3) var(--gutter) var(--sp-9);
  background: var(--dark); color: var(--dark-fg);
  overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.px-hdr[data-mnav-open] .px-mnav {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s;
}
.px-macc, .px-mlink { border-bottom: 1px solid var(--dark-rule); }
.px-macc summary, .px-mlink {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 60px; cursor: pointer; list-style: none;
  font-size: 1.25rem; font-weight: 500; color: var(--dark-fg);
}
.px-macc summary::-webkit-details-marker { display: none; }
.px-macc summary svg { transition: transform 200ms var(--ease-out); }
.px-macc[open] summary svg { transform: rotate(180deg); }
.px-macc ul { display: flex; flex-direction: column; padding-bottom: var(--sp-4); }
.px-macc li a {
  display: flex; align-items: center; min-height: 44px;
  font-size: var(--fs-body); color: var(--dark-muted);
}
.px-macc li a:hover { color: var(--dark-fg); }
.px-mnav-cta { display: grid; gap: var(--sp-3); }
.px-mnav-cta .px-btn { width: 100%; }
/* =========================================================================
   1 · Hero
   ========================================================================= */
.px-hero {
  display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
  align-items: center; gap: var(--sp-10);
  min-height: min(720px, calc(100svh - var(--hdr-h)));
  padding: clamp(48px, 1rem + 3.4vw, 80px) var(--gutter);
}
.px-hero-txt .px-eyebrow { margin-bottom: var(--sp-6); color: var(--accent-2); }
/* Mint auf Navy: 4,9:1 */
.px-hero-sec {
  overflow-x: clip;
  margin-top: calc(-1 * (var(--hdr-h) + 1px));
  padding-top: calc(var(--hdr-h) + 1px);
  background: var(--grad-hero);
}
.px-hero-sec .px-wrap { border-color: rgba(255, 255, 255, .1); }
/* Headline in genau zwei Zeilen: Schriftgröße wächst mit der Textspalte mit */
.px-hero h1 { font-size: clamp(2.5rem, 4.95vw - .24rem, 3.8rem); font-weight: 400; max-width: none; }
/* Gewicht 400 wie von Leo im Canvas gesetzt */
@media (min-width: 601px) { .px-h1-l { display: block; white-space: nowrap; } }
@media (min-width: 601px) and (max-width: 960px) { .px-hero h1 { font-size: clamp(2.75rem, 7.4vw, 4rem); } }
.px-hero-sub {
  margin-top: var(--sp-7); max-width: 44ch;
  font-size: var(--fs-lead); line-height: 1.55; color: var(--dark-muted);
}
.px-hero-cta { margin-top: var(--sp-8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-5); }
.px-hero-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Hero-CTAs eine Stufe größer: 48 px Klickfläche, 15 px Schrift (Rest der Seite bleibt 44 px) */
.px-hero-btns .px-btn { min-height: 48px; padding: var(--sp-3) var(--sp-6); font-size: var(--fs-copy); }
.px-trust { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6); font-size: var(--fs-ui); color: var(--dark-muted); }
.px-trust li { display: inline-flex; align-items: center; gap: var(--sp-2); }
.px-trust .px-ico { margin-top: 0; }
/* Produktbild auf hellem Verlauf, läuft am rechten Rand aus */
.px-hero-stage {
  position: relative; overflow: hidden; align-self: stretch;
  display: flex; align-items: center;
  padding: var(--sp-8) 0 var(--sp-8) var(--sp-9);
  background: var(--grad-aurora);
  border-radius: 24px;
}
.px-hero-shot {
  /* feste Größe statt Prozent: auf großen Monitoren wächst die Fläche, das Bild nicht */
  flex: none; width: calc(min(100vw, var(--wrap)) * .7); max-width: none;
  border-radius: 14px; background: #FFFFFF;
  box-shadow:
    0 1px 2px rgba(12, 38, 54, .08),
    0 24px 48px -16px rgba(12, 38, 54, .24),
    0 48px 96px -48px rgba(12, 38, 54, .3);
}
.px-hero-shot img { display: block; width: 100%; height: auto; border-radius: 14px; }
/* Zwei Karten aus der App schweben über dem Screenshot */
.px-hero-card {
  position: absolute; z-index: 2; height: auto;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(12, 38, 54, .08), 0 28px 56px -20px rgba(12, 38, 54, .38);
}
.px-hero-card--match { width: clamp(200px, 17vw, 250px); left: var(--sp-5); top: var(--sp-7); }
.px-hero-card--forecast { width: clamp(230px, 20vw, 290px); right: var(--sp-5); bottom: var(--sp-7); }
/* =========================================================================
   2 · Logos (hell, Schrift und Logos einheitlich grau)
   ========================================================================= */
.px-logos { padding: var(--sp-9) var(--gutter) var(--sp-10); display: grid; justify-items: center; gap: var(--sp-6); text-align: center; }
.px-logos p { font-size: var(--fs-small); color: var(--muted); }
/* Logo-Leiste sitzt im Hero: gleicher Verlauf, weiße Logos */
.px-hero-sec .px-logos p { font-family: var(--sans); font-size: var(--fs-copy); line-height: 1.5; color: var(--dark-muted); }
.px-logos-row { color: var(--muted); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-7) var(--sp-12); }
.px-logos-row img, .px-logos-row svg { width: auto; }
.px-hero-sec .px-logos-row, .px-hero-sec .px-logos-row svg { color: #FFFFFF; }
/* Logos auf dem Laptop schon im ersten Bild sichtbar: Hero unten kompakter */
.px-hero-sec .px-hero { min-height: 0; padding-top: clamp(32px, .5rem + 2.4vw, 56px); padding-bottom: var(--sp-4); }
/* Überzeile auf Höhe der oberen Bildkante (Desktop) */
@media (min-width: 961px) { .px-hero-sec .px-hero-txt { align-self: start; padding-top: calc(var(--sp-8) + var(--sp-5)); } .px-hero-sec .px-hero-stage { align-items: flex-start; } }
/* Logos näher an den Hero-Inhalt */
.px-hero-sec .px-logos { padding-top: var(--sp-9); padding-bottom: var(--sp-8); gap: var(--sp-5); margin-top: 0; }
/* nie unter das Bild schieben */

/* =========================================================================
   3 / 4 / 8 · Zweispalter mit Liste
   ========================================================================= */
.px-list { display: flex; flex-direction: column; gap: var(--sp-4); }
.px-list li { display: flex; gap: var(--sp-3); font-size: var(--fs-body); line-height: 1.5; color: var(--muted); }
.px-list b { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ink); }
.px-list-loose { gap: var(--sp-6); }
.px-list-neg .px-ico { color: var(--muted); }
/* =========================================================================
   5 · Ablauf
   ========================================================================= */
.px-split-top {
  padding: var(--sec-y) var(--gutter) var(--sp-10);
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--sp-10); align-items: end;
}
.px-split-top-r { display: flex; flex-direction: column; gap: var(--sp-5); }
.px-steps-line {
  position: relative; height: 56px;
  border-block: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.px-steps-line::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--rule); }
.px-step-chip {
  position: relative; justify-self: center; align-self: center;
  min-height: 32px; padding: var(--sp-1) var(--sp-3); border-radius: 0;
  font: inherit; font-size: var(--fs-eyebrow); font-weight: 500; font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1px solid var(--rule); color: var(--muted);
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform var(--dur-press) var(--ease-out);
}
.px-step-chip:active { transform: scale(.97); }
.px-step-chip[aria-pressed="true"] { background: var(--btn); border-color: var(--btn); color: var(--btn-fg); }
@media (hover: hover) and (pointer: fine) {
  .px-step-chip[aria-pressed="false"]:hover { border-color: var(--btn); color: var(--ink); }
}
.px-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr; }
.px-step {
  display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: var(--sp-2);
  padding: var(--sp-8) var(--sp-7) var(--sp-9); min-width: 0;
}
.px-step + .px-step { border-left: 1px solid var(--rule); }
.px-step-num { display: none; }
.px-step h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.35; color: var(--ink); }
.px-step p { font-size: var(--fs-copy); line-height: 1.55; color: var(--muted); }
/* vier Schritte: auf mittleren Breiten etwas schmaler gepolstert */
@media (min-width: 961px) and (max-width: 1240px) { .px-step { padding-inline: var(--sp-5); } }
.px-step-fig { align-self: start; margin-top: var(--sp-4); padding: var(--sp-5); background: var(--grad-aurora); }
/* Aktiver Schritt (nur Desktop, wo es die Chips gibt): Fläche tönt sich ein, eine Linie zieht von
   links auf, die Grafik hebt sich leicht. Nach dem ersten Klick treten die anderen Grafiken zurück. */
@media (min-width: 961px) {
  .px-step { position: relative; isolation: isolate; }
  .px-step::before, .px-step::after { content: ""; position: absolute; pointer-events: none; }
  .px-step::before { inset: 0; z-index: -1; background: var(--ground); opacity: 0; transition: opacity 280ms ease; }
  .px-step::after {
    top: 0; left: 0; right: 0; height: 2px; background: var(--btn);
    transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out);
  }
  .px-step.is-active::before { opacity: 1; }
  .px-step.is-active::after { transform: scaleX(1); }
  .px-step-fig { transition: transform 320ms var(--ease-out), opacity 280ms ease; }
  .px-step.is-active .px-step-fig { transform: translateY(-4px); }
  .px-steps[data-touched="true"] .px-step:not(.is-active) .px-step-fig { opacity: .55; }
}
@media (min-width: 961px) and (prefers-reduced-motion: reduce) {
  .px-step::after { transform: none; opacity: 0; transition: opacity 200ms ease; }
  .px-step.is-active::after { opacity: 1; }
  .px-step.is-active .px-step-fig { transform: none; }
}
@supports not (grid-template-rows: subgrid) {
  .px-step { display: flex; flex-direction: column; gap: var(--sp-2); }
  .px-step p { min-height: 3.1em; }
}
/* =========================================================================
   6 · Plattform (Tabs)
   ========================================================================= */
.px-tabs { display: flex; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.px-tabs::-webkit-scrollbar { display: none; }
/* Kein Mini-Scrollen in der Leiste: senkrecht nie, waagerecht nur, wenn die Tabs nicht passen (Handy) */
.px-tabs { overflow-y: hidden; }
@media (min-width: 961px) { .px-tabs { overflow: visible; } }
.px-tab {
  position: relative; flex: 1 0 auto; min-height: 56px; padding: var(--sp-4) var(--sp-5);
  background: transparent; border: 0; border-right: 1px solid var(--rule);
  font-size: var(--fs-ui); font-weight: 500; color: var(--muted);
  cursor: pointer; scroll-snap-align: start;
  transition: color var(--dur-hover) ease, background-color var(--dur-hover) ease;
}
.px-tab:last-child { border-right: 0; }
.px-tab:hover { color: var(--ink); background: var(--ground); }
.px-tab::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;  /* nicht über die Leiste hinaus, sonst wird sie scrollbar */
  background: var(--accent); transform: scaleX(0);
  transition: transform 240ms var(--ease-out);
}
.px-tab[aria-selected="true"] { color: var(--ink); background: var(--sunken); }
.px-tab[aria-selected="true"]::after { transform: scaleX(1); }
.px-tab:focus-visible { outline-offset: -3px; }
.px-plat-panel {
  height: 100%; min-height: 620px; padding: var(--sp-10) var(--sp-9);
  background: var(--grad-aurora);
  display: grid; align-items: center;
}
/* Alle Ansichten liegen übereinander: kein Höhensprung beim Wechsel */
.px-pane, .px-plat-copy { grid-area: 1 / 1; }
.px-pane:not(.is-active), .px-plat-copy:not(.is-active) { visibility: hidden; }
.px-pane-img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: 0 2px 6px rgba(12, 38, 54, .08), 0 28px 56px -24px rgba(12, 38, 54, .35); }
.px-plat-copies { display: grid; }
.px-plat-copy { display: flex; flex-direction: column; gap: var(--sp-5); }
.is-entering { animation: px-swap 340ms var(--ease-out) both; }
@keyframes px-swap { from { opacity: 0; transform: translateY(8px); filter: blur(3px); } }
.px-plist { margin-top: var(--sp-2); border-top: 1px solid var(--rule); }
.px-plist li { border-bottom: 1px solid var(--rule); }
.px-pl-btn {
  width: calc(100% + 2 * var(--sp-3)); margin-inline: calc(-1 * var(--sp-3));
  min-height: 52px; padding: var(--sp-3);
  display: flex; align-items: center; gap: var(--sp-4);
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-copy); font-weight: 500; color: var(--muted);
  transition: background-color var(--dur-hover) ease, color var(--dur-hover) ease;
}
.px-pl-t { flex: 1; }
.px-pl-btn .px-arr { color: #A9BCC5; transition: transform 200ms var(--ease-out), color 200ms ease; }
.px-pl-btn.on { color: var(--ink); }
.px-pl-btn.on .px-arr { color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
  .px-pl-btn:hover { background: var(--ground); color: var(--ink); }
  .px-pl-btn:hover .px-arr { transform: translateX(3px); color: var(--accent); }
}
/* =========================================================================
   7 · Integrationen
   ========================================================================= */
/* Filter: hebt die passenden Integrationen hervor, die anderen werden grau */
.px-int-filter {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
  padding: 0 var(--gutter) var(--sp-7);
}
.px-chip {
  min-height: 40px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  background: var(--bg); color: var(--ink);
  font-size: var(--fs-ui); font-weight: 500; line-height: 1.2; cursor: pointer;
  transition: background-color var(--dur-hover) ease, border-color var(--dur-hover) ease, color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out);
}
.px-chip:hover { border-color: var(--muted); }
.px-chip:active { transform: scale(.97); }
.px-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--dark-fg); }
.px-int-grid {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule); background: var(--bg);
}
.px-int-grid > li { min-width: 0; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.px-int-grid > li:nth-child(5n) { border-right: 0; }
.px-int-grid > li:nth-last-child(-n + 5) { border-bottom: 0; }
.px-int-item {
  display: flex; align-items: center; gap: var(--sp-4); height: 100%;
  padding: var(--sp-6) var(--sp-5);
  font-size: var(--fs-ui); font-weight: 500; line-height: 1.4; color: var(--ink);
  transition: background-color 200ms ease, color 200ms ease;
}
.px-int-item small { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--muted); }
.px-int-item .px-tile { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; }
a.px-int-item:hover { background: var(--ground); }
/* Nicht passende Kacheln: grau, aber lesbar (Text bleibt ≥ 4,5:1) */
.px-int-grid:not([data-f="all"]) > li:not([data-cat="any"]) .px-int-item { background: var(--ground); color: var(--muted); }
.px-int-grid:not([data-f="all"]) > li:not([data-cat="any"]) .px-tile { background: var(--ground); border-color: var(--rule); color: #9DB0BA; }
.px-int-grid[data-f="crm"] > li[data-cat="crm"] .px-int-item,
.px-int-grid[data-f="hr"] > li[data-cat="hr"] .px-int-item,
.px-int-grid[data-f="pm"] > li[data-cat="pm"] .px-int-item,
.px-int-grid[data-f="sec"] > li[data-cat="sec"] .px-int-item,
.px-int-grid[data-f="data"] > li[data-cat="data"] .px-int-item { background: var(--bg); color: var(--ink); }
.px-int-grid[data-f="crm"] > li[data-cat="crm"] .px-tile,
.px-int-grid[data-f="hr"] > li[data-cat="hr"] .px-tile,
.px-int-grid[data-f="pm"] > li[data-cat="pm"] .px-tile,
.px-int-grid[data-f="sec"] > li[data-cat="sec"] .px-tile,
.px-int-grid[data-f="data"] > li[data-cat="data"] .px-tile { background: #E3F4F2; border-color: #BFE3DF; color: var(--accent); }
/* =========================================================================
   8 · Kundenstimme (Foto links bis an die Schienen, Zahl + Zitat rechts)
   ========================================================================= */
/* Wie die anderen Zweispalter: Foto links an der Schiene, weiße Textfläche rechts bis zur Schiene */
.px-case {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr);
}
.px-case-photo { position: relative; margin: 0; min-height: 100%; background: var(--dark); }
.px-case-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.px-case-photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(15, 51, 70, .72) 0%, rgba(15, 51, 70, 0) 50%);
}
.px-case-logo { position: absolute; left: var(--sp-6); bottom: var(--sp-6); z-index: 1; color: #FFFFFF; }
.px-case-logo svg { width: 116px; height: auto; }
.px-case-body {
  position: relative; display: flex; flex-direction: column; justify-content: center; gap: var(--sp-6);
  padding: clamp(40px, 1.5rem + 2.4vw, 64px) var(--gutter);
  border-left: 1px solid var(--rule);
}
/* Anführungszeichen oben, wo vorher die Kennzahl stand */
.px-case-mark { display: block; width: clamp(44px, 1.6rem + 1.6vw, 60px); height: auto; fill: #A9D4D8; }
.px-case-quote { margin: 0; }
.px-case-quote p { font-size: clamp(1.0625rem, .98rem + .35vw, 1.25rem); line-height: 1.6; color: var(--muted); text-wrap: pretty; max-width: 62ch; }
.px-case-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-5) var(--sp-7); margin-top: var(--sp-2); }
.px-case-author { display: flex; align-items: center; gap: var(--sp-4); font-size: var(--fs-small); color: var(--muted); }
.px-case-author img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex: none; }
.px-case-author b { display: block; font-size: var(--fs-body); font-weight: 500; color: var(--ink); }
/* =========================================================================
   5b · Kennzahlen (Kopf links, drei Zahlen in Spalten, nur Linien – keine Karten)
   ========================================================================= */
.px-kpi { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); }
.px-kpi-head {
  display: flex; flex-direction: column; justify-content: center; gap: var(--sp-3);
  padding: clamp(36px, 1rem + 2vw, 56px) var(--sp-7) clamp(36px, 1rem + 2vw, 56px) var(--gutter);
}
/* Überschrift höchstens zwei Zeilen */
.px-kpi-head .px-h2 { font-size: clamp(1.625rem, 1.15rem + .9vw, 2rem); text-wrap: balance; }
.px-kpi-head .px-lead { font-size: var(--fs-copy); }
/* Drei Zahlen; Überzeile, Zahl und Text stehen in allen Spalten auf einer Linie */
/* Außenzeilen 1fr: die Spalten (und ihre Trennlinien) gehen über die volle Höhe, der Inhalt bleibt mittig */
.px-kpi-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 1fr auto auto auto 1fr; row-gap: var(--sp-2); }
.px-kpi-item {
  grid-row: 1 / 6; display: grid; grid-template-rows: subgrid;
  padding: clamp(36px, 1rem + 2vw, 56px) var(--sp-7);
  border-left: 1px solid var(--rule);
}
.px-kpi-item .px-eyebrow { margin: 0; grid-row: 2; }
.px-kpi-item .px-kpi-num { grid-row: 3; }
.px-kpi-item .px-kpi-txt { grid-row: 4; }
.px-kpi-num {
  margin-top: var(--sp-1);
  font-size: clamp(2.25rem, 1.7rem + 1.4vw, 3rem); font-weight: 400; line-height: 1; letter-spacing: -.02em;
  color: var(--dark); font-variant-numeric: lining-nums; white-space: nowrap;  /* Navy wie der Hero */
}
.px-kpi-txt { font-size: var(--fs-copy); line-height: 1.45; color: var(--muted); }
/* =========================================================================
   9 · FAQ
   ========================================================================= */
.px-faq-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.px-faq-l { padding: var(--sec-y) var(--gutter); display: flex; flex-direction: column; gap: var(--sp-5); }
.px-faq-l a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.px-faq-r { padding: calc(var(--sec-y) - var(--sp-7)) var(--gutter) var(--sec-y); border-left: 1px solid var(--rule); }
.px-faq details { border-bottom: 1px solid var(--rule); }
.px-faq details:first-child { border-top: 1px solid var(--rule); }
.px-faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-6);
  min-height: 44px; padding: var(--sp-6) 0;
  list-style: none; cursor: pointer;
  font-size: var(--fs-h3); font-weight: 500; line-height: 1.4; color: var(--ink);
}
.px-faq summary::-webkit-details-marker { display: none; }
.px-faq-sign { flex: none; color: var(--muted); transition: transform 300ms var(--ease-out); }
.px-faq details[open] .px-faq-sign { transform: rotate(45deg); }
.px-faq-a { padding: 0 var(--sp-9) var(--sp-7) 0; max-width: 68ch; font-size: var(--fs-body); line-height: 1.65; color: var(--muted); }
/* Antwort blendet nur ein (wie bei Paradigm) – keine Höhen-Animation */
.px-faq details[open] .px-faq-a { animation: px-fade-down 260ms var(--ease-out); }
@keyframes px-fade-down { from { opacity: 0; transform: translateY(-4px); } }
/* =========================================================================
   10 · Sicherheit
   ========================================================================= */
/* Gleiches Navy wie der Footer; ein Abstandsband trennt die beiden */
/* Flacher Balken: Text breit links, Bild schmal rechts */
.px-secu-cols { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); }
/* Bildspalte so breit wie das Foto der Kundenstimme */
/* Kundenstimme und Sicherheit gleich hoch (Desktop) */
@media (min-width: 961px) { .px-case, .px-secu-cols { min-height: clamp(380px, 320px + 6vw, 430px); } }
.px-secu { padding: clamp(40px, 1rem + 2.4vw, 64px) var(--gutter); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-7); }
.px-secu .px-head { gap: var(--sp-3); }
.px-secu .px-h2 { font-size: clamp(1.875rem, 1.4rem + 1.3vw, 2.5rem); }
/* Vier Punkte, immer zwei nebeneinander */
.px-secu-list { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: var(--sp-4) var(--sp-9); }
.px-secu-list li {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-body); font-weight: 500; line-height: 1.35; color: var(--dark-fg);
}
/* Bild rechts bis an die Schiene, mit grau-navy Schatten darüber */
.px-secu-photo { position: relative; margin: 0; min-height: 100%; overflow: hidden; background: var(--dark-raised); }
.px-secu-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.px-secu-photo::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(24, 72, 101, .55) 0%, rgba(24, 72, 101, 0) 45%),
    linear-gradient(0deg, rgba(15, 51, 70, .55) 0%, rgba(15, 51, 70, .15) 60%),
    rgba(40, 52, 60, .18);
}
.px-secu-ico { display: block; flex: none; width: 28px; height: 28px; }
.px-secu-ico .b { stroke: var(--dark-muted); stroke-width: 1.4; stroke-linejoin: round; }
.px-secu-ico .a { stroke: var(--accent-2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* =========================================================================
   Footer (mit Abschluss-CTA, wie Paradigm)
   ========================================================================= */
.px-ftr { border-top: 1px solid var(--dark-rule); }
.px-ftr-cta { padding: clamp(48px, 1.5rem + 3vw, 72px) var(--gutter); display: flex; flex-direction: column; gap: var(--sp-8); }
.px-ftr-logo { display: inline-flex; width: fit-content; }
.px-ftr-logo img { height: 38px; width: auto; }
/* so groß wie im Header */
.px-ftr-cta-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--sp-10); align-items: end; }
.px-ftr-cta-r { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-6); }
.px-ftr-nav { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--dark-rule); }
.px-ftr-col { padding: var(--sp-8) var(--sp-6) var(--sp-9); min-width: 0; }
.px-ftr-col:first-child { padding-left: var(--gutter); }
.px-ftr-col + .px-ftr-col { border-left: 1px solid var(--dark-rule); }
.px-ftr-col h3 { margin-bottom: var(--sp-4); font-family: var(--sans); font-size: var(--fs-small); font-weight: 600; color: var(--dark-fg); }
.px-ftr-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.px-ftr-col a, .px-ftr-col button {
  display: inline-block; padding-block: 2px; padding-inline: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font-size: var(--fs-ui); line-height: 1.5; color: var(--dark-muted);
  transition: color var(--dur-hover) ease;
}
.px-ftr-col a:hover, .px-ftr-col button:hover { color: var(--dark-fg); }
.px-ftr-base {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--sp-6);
  padding: var(--sp-7) var(--gutter);
  border-top: 1px solid var(--dark-rule);
  font-size: var(--fs-small); line-height: 1.5; color: var(--dark-muted);
}
.px-ftr-cert a { transition: color var(--dur-hover) ease; }
.px-ftr-cert a:hover { color: var(--dark-fg); }
.px-ftr-base address { justify-self: end; text-align: right; }
/* =========================================================================
   Bewegung: Einstieg im Hero und dezentes Einblenden beim Scrollen
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js .px-hero-txt > * { animation: px-rise 700ms var(--ease-out) both; }
  .js .px-hero-txt > :nth-child(2) { animation-delay: 70ms; }
  .js .px-hero-txt > :nth-child(3) { animation-delay: 140ms; }
  .js .px-hero-txt > :nth-child(4) { animation-delay: 210ms; }
  .js .px-hero-shot { animation: px-rise-far 900ms var(--ease-out) 280ms both; }
  .js .px-hero-card--match { animation: px-rise 700ms var(--ease-out) 640ms both; }
  .js .px-hero-card--forecast { animation: px-rise 700ms var(--ease-out) 760ms both; }

  .js [data-reveal] {
    opacity: 0; transform: translateY(16px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
    transition-delay: calc(var(--i, 0) * 70ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@keyframes px-rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes px-rise-far { from { opacity: 0; transform: translateY(32px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1100px) {
  .px-nav, .px-hdr-r .px-btn { display: none; }
  .px-hdr-in { grid-template-columns: 1fr auto; }
  .px-burger { display: inline-flex; }
}
@media (min-width: 1101px) {
  .px-mnav { display: none; }
}
/* Laptop-Breiten (bis 1799 px, z. B. MacBook 1440/1512/1728): das Bild läuft bis an den
   rechten Bildschirmrand. Auf großen Monitoren bleibt es bündig im Inhalt, sonst wird die
   Fläche zu breit und der Hero kippt nach rechts. */
@media (min-width: 961px) and (max-width: 1799px) {
  .px-hero { padding-right: 0; }
  .px-hero-stage {
    border-radius: 24px 0 0 24px;
    margin-right: min(0px, calc((var(--wrap) - 100vw) / 2));
  }
}
/* Fünf Integrations-Spalten auf mittleren Breiten: Icon über den Text */
@media (min-width: 961px) and (max-width: 1240px) {
  .px-int-item { flex-direction: column; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-5) var(--sp-4); }
}
@media (max-width: 960px) {
  .px-kpi { grid-template-columns: minmax(0, 1fr); }
  .px-kpi-head { padding: var(--sp-9) var(--gutter) var(--sp-4); }
  .px-kpi-item { padding: var(--sp-5) var(--sp-5) var(--sp-9); }
  .px-kpi-item:first-child { border-left: 0; padding-left: var(--gutter); }
  .px-secu-photo { min-height: 0; aspect-ratio: 16 / 9; }
  .px-cols, .px-split-top, .px-faq-sec, .px-ftr-cta-grid { grid-template-columns: minmax(0, 1fr); }
  .px-split-top, .px-ftr-cta-grid { gap: var(--sp-6); }
  .px-cols > * + *, .px-faq-r { border-left: 0; border-top: 1px solid var(--rule); }
  .px-dark .px-cols > * + * { border-top-color: var(--dark-rule); }

  .px-col-txt { padding-block: var(--sp-11) var(--sp-9); }
  .px-col-fig { padding: var(--sp-6) var(--sp-4); }
  .px-mirror > .px-col-txt { order: -1; border-top: 0; }
  .px-mirror > .px-col-fig { border-top: 1px solid var(--rule); }
  .px-frame { padding: var(--sp-5); }

  .px-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--sp-9); padding-right: var(--gutter); }
  /* Mint-Licht nach unten rechts hinter das Bild, damit die Mint-Überzeile oben lesbar bleibt */
  .px-hero-sec {
    background:
      radial-gradient(80% 45% at 100% 100%, rgba(94, 201, 191, .42) 0%, rgba(94, 201, 191, 0) 62%),
      radial-gradient(70% 40% at 80% 75%, rgba(21, 132, 156, .34) 0%, rgba(21, 132, 156, 0) 70%),
      radial-gradient(90% 45% at -5% 0%, rgba(46, 125, 175, .24) 0%, rgba(46, 125, 175, 0) 60%),
      linear-gradient(160deg, #184865 0%, #0F3346 45%, #0D3842 75%, #00434A 100%);
  }
  .px-hero-stage { border-radius: 20px; padding: var(--sp-6) 0 var(--sp-6) var(--sp-6); }
  .px-hero-shot { width: 140%; }
  .px-hero-stage { min-height: 360px; }

  .px-steps-line { display: none; }
  .px-steps { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .px-step { display: flex; flex-direction: column; gap: var(--sp-2); grid-row: auto; padding: var(--sp-8) var(--gutter); }
  .px-step + .px-step { border-left: 0; border-top: 1px solid var(--rule); }
  .px-step:first-child { border-top: 1px solid var(--rule); }
  .px-step-num { display: block; margin-bottom: var(--sp-1); }

  .px-plat-panel { min-height: 0; padding: var(--sp-7) var(--sp-5); }
  .px-case { grid-template-columns: minmax(0, 1fr); }
  .px-case-body { border-left: 0; border-top: 1px solid var(--rule); }
  .px-case-photo { min-height: 0; aspect-ratio: 16 / 9; }

  .px-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-int-grid > li:nth-child(5n) { border-right: 1px solid var(--rule); }
  .px-int-grid > li:nth-child(2n) { border-right: 0; }
  .px-int-grid > li:nth-last-child(-n + 5) { border-bottom: 1px solid var(--rule); }
  .px-int-grid > li:nth-last-child(-n + 2) { border-bottom: 0; }
  .px-int-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .px-int-filter::-webkit-scrollbar { display: none; }
  .px-chip { flex: none; }

  .px-faq-r { padding-top: var(--sp-4); }
  .px-faq-a { padding-right: 0; }

  .px-ftr-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-ftr-col, .px-ftr-col:first-child { padding: var(--sp-7) var(--gutter); }
  .px-ftr-col + .px-ftr-col { border-left: 0; }
  .px-ftr-col:nth-child(n + 3) { border-top: 1px solid var(--dark-rule); }
  .px-ftr-col:nth-child(even) { border-left: 1px solid var(--dark-rule); }
  .px-ftr-col:last-child { grid-column: 1 / -1; border-left: 0; }
  .px-ftr-base { grid-template-columns: minmax(0, 1fr); justify-items: start; }
  .px-ftr-base address { justify-self: start; text-align: left; }
}
@media (max-width: 600px) {
  .px-kpi-list { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .px-kpi-item { grid-row: auto; display: flex; flex-direction: column; gap: var(--sp-2); border-left: 0; border-top: 1px solid var(--rule); padding: var(--sp-6) var(--gutter); }
  .px-kpi-item:last-child { padding-bottom: var(--sp-9); }
  .px-secu-list { grid-template-columns: minmax(0, 1fr); }
  .px-display, .px-h2, .px-closing { hyphens: auto; overflow-wrap: break-word; }
  .px-hero-cta .px-btn { width: 100%; }
  .px-hero-stage { min-height: 300px; align-items: flex-start; }
  .px-hero-card--forecast { display: none; }
  .px-hero-card--match { width: 190px; top: auto; left: var(--sp-4); bottom: var(--sp-4); }
  .px-int-grid { grid-template-columns: minmax(0, 1fr); }
  .px-int-grid > li, .px-int-grid > li:nth-child(5n) { border-right: 0; }
  .px-int-grid > li:nth-last-child(-n + 2) { border-bottom: 1px solid var(--rule); }
  .px-int-grid > li:last-child { border-bottom: 0; }
  .px-int-item { padding: var(--sp-4) var(--gutter); }
  .px-logos-row { gap: var(--sp-6) var(--sp-9); }
}
/* =========================================================================
   Canvas-Board: Zustände kommen als Klassen aus der Board-Logik
   ========================================================================= */
.px-nav-item.is-open > .px-pop {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none;
  transition: opacity var(--dur-pop) var(--ease-out), transform var(--dur-pop) var(--ease-out), visibility 0s;
}
.px-hdr.is-mega .px-scrim,
.px-hdr:has(.px-nav-item[data-mega]:hover) .px-scrim { opacity: 1; visibility: visible; transition: opacity 240ms ease, visibility 0s; }
.px-hdr.is-mnav .px-mnav {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s;
}
.px-pane.is-active, .px-plat-copy.is-active { animation: px-swap 340ms var(--ease-out) both; }
/* Startseite-Fassung „zentriert + Plus Jakarta Sans“: wird nach startseite.css geladen */
/* Hero-Variante B · Bild dominant: Text zentriert oben, App-Bild groß darunter über die Inhaltsbreite */
@media (min-width: 961px) {
  .px-hero-sec .px-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: var(--sp-10); padding-top: clamp(48px, 1rem + 3vw, 80px); }
  .px-hero-sec .px-hero-txt { align-self: auto; padding-top: 0; display: flex; flex-direction: column; align-items: center; }
  .px-hero-sec .px-hero h1 { font-size: clamp(3.25rem, 1.4rem + 3.4vw, 5rem) !important; line-height: 1 !important; letter-spacing: -.03em; }
  .px-hero-sec .px-hero-sub { max-width: 54ch; margin-inline: auto; }
  .px-hero-sec .px-hero-cta { align-items: center; }
  .px-hero-sec .px-hero-stage { width: 100%; margin-right: 0 !important; border-radius: 16px 16px 0 0 !important;
    justify-content: center; align-items: flex-end !important; padding: var(--sp-9) var(--sp-9) 0 !important; height: clamp(360px, 30vw, 520px); overflow: hidden; }
  .px-hero-sec .px-hero-shot { width: min(100%, 1000px); align-self: flex-start; border-radius: 12px 12px 0 0; }
  .px-hero-sec .px-hero-card--match { left: var(--sp-7); top: calc(var(--sp-9) + var(--sp-7)); }
  .px-hero-sec .px-hero-card--forecast { right: var(--sp-7); top: calc(var(--sp-9) + var(--sp-11)); bottom: auto; }
  .px-hero-sec .px-logos-wrap .px-logos { padding-top: var(--sp-9); }
}
/* Alle Überschriften in Plus Jakarta Sans (Fließtext bleibt Roboto) */
.px-serif, .px-display, .px-h2, .px-closing, .px-kpi-num {
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif !important;
  font-weight: 600 !important; letter-spacing: -.03em !important;
}
.px-hero-sec .px-hero h1 { line-height: 1.04 !important; }
.px-case-quote p.px-serif { font-weight: 500 !important; letter-spacing: -.01em !important; }
/* Überzeile im Hero passend zur großen Überschrift: 14 statt 12 px */
@media (min-width: 961px) { .px-hero-sec .px-hero-txt .px-eyebrow { font-size: .875rem; letter-spacing: .14em; margin-bottom: var(--sp-7); } }
/* Hero exakt mittig: rechts derselbe Innenabstand wie links (alte Fassung lief rechts bis an den Rand) */
@media (min-width: 961px) { .px-hero-sec .px-hero { padding-right: var(--gutter); } }
/* Sicherheit · Variante C: zentriert, weiße Icons, BITMi-Siegel (28.10.) */
.px-secu-c-in { padding: clamp(40px, .5rem + 2.6vw, 56px) var(--gutter); display: flex; flex-direction: column; align-items: center; gap: var(--sp-7); text-align: center; }
.px-secu-c .px-head { align-items: center; gap: var(--sp-3); }
.px-secu-c .px-h2 { font-size: clamp(1.875rem, 1.4rem + 1.3vw, 2.5rem); }
.px-secu-c-lead { margin: calc(-1 * var(--sp-4)) auto 0; max-width: 98ch; font-size: var(--fs-copy); line-height: 1.6; color: var(--dark-muted); text-wrap: balance; }
.px-secu-c .px-secu-list { grid-template-columns: repeat(4, max-content); justify-content: center; gap: var(--sp-4) var(--sp-9); }
.px-secu-c .px-secu-ico .b, .px-secu-c .px-secu-ico .a { stroke: #FFFFFF; }
.px-secu-seals { display: flex; justify-content: center; align-items: center; gap: var(--sp-5); width: 100%; padding-top: var(--sp-7); border-top: 1px solid var(--dark-rule); }
.px-seal { margin: 0; display: grid; place-items: center; overflow: hidden; background: #FFFFFF; border-radius: 12px; box-shadow: 0 1px 2px rgba(12,38,54,.10), 0 18px 40px -20px rgba(12,38,54,.45); }
.px-seal img { display: block; object-fit: contain; }
.px-seal--made { width: 168px; height: 102px; padding: 10px 12px; }
.px-seal--made img { width: 100%; height: 100%; }
.px-seal--host { width: 102px; height: 102px; }
.px-seal--host img { width: 128%; height: 128%; max-width: none; }
@media (max-width: 960px) { .px-secu-c .px-secu-list { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 560px) { .px-secu-c .px-secu-list { grid-template-columns: max-content; justify-content: start; text-align: left; } }
/* Sicherheit · Foto links (28.10.) */
.px-secu-c-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); }
.px-secu-c-photo { position: relative; margin: 0; overflow: hidden; border-right: 1px solid var(--dark-rule); }
.px-secu-c-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 72%; }
.px-secu-c-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,72,101,.10), rgba(24,72,101,.35)); }
.px-secu-c-grid .px-secu-c-in { align-items: flex-start; text-align: left; }
.px-secu-c-grid .px-head { align-items: flex-start; }
.px-secu-c-grid .px-secu-c-lead { margin: calc(-1 * var(--sp-4)) 0 0; max-width: 68ch; }
.px-secu-c-grid .px-secu-list { grid-template-columns: repeat(2, max-content); justify-content: start; }
.px-secu-c-grid .px-secu-seals { justify-content: flex-start; }
@media (min-width: 961px) {
  .px-secu-c-grid .px-secu-c-in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--sp-7); }
  .px-secu-c-grid .px-secu-c-in > .px-head { grid-column: 1; grid-row: 1; }
  .px-secu-c-grid .px-secu-seals { grid-column: 2; grid-row: 1; }
  .px-secu-c-grid .px-secu-c-lead, .px-secu-c-grid .px-secu-c-in > .px-secu-list { grid-column: 1 / -1; }
  .px-secu-c-grid .px-secu-c-lead { margin-top: calc(-1 * var(--sp-3)); }
  .px-secu-c-grid .px-secu-seals { width: auto; padding-top: 0; border-top: 0; }
  .px-secu-c-grid .px-secu-c-lead { max-width: none; }
}
@media (max-width: 560px) { .px-secu-c-grid .px-secu-list { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 960px) { .px-secu-c-grid { grid-template-columns: minmax(0, 1fr); } .px-secu-c-photo { aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1px solid var(--dark-rule); } }
/* Sicherheit · Siegel rechts übereinander (28.10.) */
@media (min-width: 961px) {
  .px-secu-c-grid .px-secu-seals { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-4); align-self: center; }
  .px-secu-c-grid .px-secu-c-in > .px-head, .px-secu-c-grid .px-secu-c-lead, .px-secu-c-grid .px-secu-c-in > .px-secu-list { grid-column: 1; }
}
.px-seal--host { padding: 8px; }
.px-seal--host img { width: 100%; height: 100%; max-width: 100%; }
/* Footer · BITMi-Siegel klein, gleich große Kästen (28.10.) */
.px-ftr-seals { display: flex; align-items: center; gap: 10px; }
.px-ftr-seal { display: grid; place-items: center; width: 84px; height: 52px; padding: 5px 7px; background: #FFFFFF; border-radius: 6px; transition: transform var(--dur-hover) ease, opacity var(--dur-hover) ease; }
.px-ftr-seal img { display: block; width: auto; height: auto; max-width: 100%; max-height: 42px; }
@media (hover: hover) and (pointer: fine) { .px-ftr-seal:hover { opacity: .9; } }
/* Vertrauenszeile (Hero + Footer-CTA), 28.10. */
.px-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-5); margin: 0; padding: 0; list-style: none; font-size: var(--fs-ui, .875rem); color: var(--dark-muted); }
.px-trust li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.px-trust-chk { flex: none; color: var(--accent-2); }
.px-trust-eu { flex: none; display: block; }
.px-trust--cta { justify-content: flex-start; margin-top: calc(-1 * var(--sp-2)); }
.px-ftr-btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
/* Platz für die Vertrauenszeile: Bänder minimal schmaler, Hero-Abstand enger (Seite bleibt < 8000 px) */
.px-gap .px-wrap { height: clamp(56px, .9rem + 4vw, 150px); }
.px-hero-sec .px-hero-cta { gap: var(--sp-4); }
@media (max-width: 560px) { .px-hero-sec .px-trust { justify-content: flex-start; } .px-ftr-btns .px-btn { width: 100%; } }
/* Sicherheit ohne Siegel, Überschrift einzeilig; Hero: Luft vor der Vertrauenszeile (28.10.) */
@media (min-width: 961px) {
  .px-secu-c-grid .px-secu-c-in { grid-template-columns: minmax(0, 1fr); }
  .px-secu-c .px-h2 { white-space: nowrap; }
}
.px-hero-sec .px-hero-cta { gap: var(--sp-7); }
/* Abschluss · Variante 3: Glanz wie im Hero, großer Button + Textlink (28.10.) */
.px-ftr {
  background:
    radial-gradient(45% 38% at 100% 0%, rgba(94, 201, 191, .32) 0%, rgba(94, 201, 191, 0) 70%),
    radial-gradient(35% 32% at 78% 12%, rgba(21, 132, 156, .28) 0%, rgba(21, 132, 156, 0) 72%),
    radial-gradient(40% 34% at -4% 30%, rgba(46, 125, 175, .34) 0%, rgba(46, 125, 175, 0) 68%),
    var(--dark);
}
.px-ftr-btns { align-items: center; gap: var(--sp-6); }
.px-ftr-btns .px-btn { min-height: 56px; padding: 0 var(--sp-7); font-size: 1rem; }
.px-ftr-link { color: var(--dark-fg); font-size: .9375rem; text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(255, 255, 255, .35); transition: text-decoration-color var(--dur-hover) ease; }
@media (hover: hover) and (pointer: fine) { .px-ftr-link:hover { text-decoration-color: currentColor; } }
@media (max-width: 560px) { .px-ftr-btns { gap: var(--sp-4); } .px-ftr-link { width: 100%; text-align: center; } }
/* Abschluss Feinschliff: größer, oben bündig, Ghost-Button, Ansprechpartnerin (28.10.) */
.px-ftr .px-closing { font-size: clamp(2.75rem, 1.7rem + 3.3vw, 4.5rem); }
.px-ftr-cta-grid { align-items: start; }
.px-ftr-cta-r { padding-top: .35em; }
.px-ftr-cta { gap: var(--sp-6); }
.px-ftr .px-ftr-cta { padding-top: clamp(40px, 1rem + 2.6vw, 56px); padding-bottom: clamp(40px, 1rem + 2.6vw, 56px); }
.px-ftr-person { display: flex; align-items: center; gap: var(--sp-3); margin: 0; padding-top: var(--sp-3); border-top: 1px solid var(--dark-rule); font-size: .9375rem; color: var(--dark-muted); }
.px-ftr-person b { color: var(--dark-fg); font-weight: 500; }
.px-ftr-person img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
/* Abschluss: Luisa statt Kontakt-Button (28.10.) */
.px-ftr-meet { display: inline-flex; align-items: center; gap: var(--sp-3); font-size: .875rem; line-height: 1.4; color: var(--dark-muted); }
.px-ftr-meet img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.px-ftr-meet { white-space: nowrap; }
.px-ftr-meet b { color: var(--dark-fg); font-weight: 500; }
@media (max-width: 560px) { .px-ftr-meet { white-space: normal; } }
/* Abschluss: Luisa eckig in Button-Höhe (28.10.) */
.px-ftr-meet img { width: 56px; height: 56px; border-radius: 0; }
/* Abschluss: Luisa als Ghost-Button-Kasten (28.10.) */
.px-ftr-meet { display: inline-flex; align-items: center; gap: var(--sp-3); height: 56px; padding: 0 var(--sp-5) 0 0; border: 1px solid var(--dark-rule); background: transparent; color: var(--dark-muted); font-size: .8125rem; line-height: 1.3; white-space: nowrap; text-decoration: none; transition: border-color var(--dur-hover) ease, transform var(--dur-press) var(--ease-out); }
.px-ftr-meet img { display: block; flex: none; width: 54px; height: 54px; border-radius: 0; object-fit: cover; }
.px-ftr-meet b { color: var(--dark-fg); font-weight: 500; font-size: .9375rem; }
.px-ftr-meet:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .px-ftr-meet:hover { border-color: rgba(255, 255, 255, .6); } }
/* Abschluss: Luisa wieder rund und klein, ohne Kasten (28.10.) */
.px-ftr-meet--rund { height: auto; padding: 0; border: 0; font-size: .875rem; line-height: 1.4; }
.px-ftr-meet--rund img { width: 48px; height: 48px; border-radius: 50%; }
.px-ftr-meet--rund:active { transform: none; }
/* Hero-Bild länger, unten weich auslaufend (28.10.) */
@media (min-width: 961px) {
  .px-hero-sec .px-hero-stage { height: clamp(440px, 39vw, 640px); }
  .px-hero-sec .px-hero-shot { -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
  .px-hero-sec .px-logos-wrap .px-logos { padding-top: var(--sp-7); }
}
/* Hero-Subline: zwei Zeilen, obere minimal die längste, nie breiter als die H1 (Leo 28.10.).
   Unter 1440 px fließt der Text frei (34em); ab 1440 px ist die H1 breit genug für die zwei festen Zeilen (735 / 769 px; Leo wollte „Monate im Voraus“, untere Zeile dafür etwas länger). */
.px-sub-z { display: inline; }
@media (min-width: 961px) {
  .px-hero-sec .px-hero-txt .px-hero-sub { width: 0; min-width: min(100%, 34em); max-width: none; text-wrap: balance; }
}
@media (min-width: 1440px) {
  .px-hero-sec .px-hero-txt .px-hero-sub { min-width: 100%; }
  .px-sub-z { display: block; white-space: nowrap; }
}
/* Hero: Heimat-App-Fenster, läuft von selbst durch (Staffing, Projekte, Skills, Reports) – Leo 28.10.
   Bewusst skizziert und ruhig wie bei Personio: weißes Fenster, Teal nur in der Seitenleiste, sonst Navy/Grau. */
.hx { --hx-ink: #184865; --hx-text: #33424C; --hx-mute: #6B8290; --hx-rule: #E4ECEF; --hx-bg: #F6F9FA;
  --hx-teal: #4FB3AE; --hx-red: #C2413F; --hx-redbg: #FCEDEC; --hx-ok: #2E7D55; --hx-okbg: #EAF5EE;
  --hx-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; width: min(100%, 1000px); align-self: flex-start; margin: 0 auto; font-family: Roboto, sans-serif; color: var(--hx-text); text-align: left; }
.hx-r { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
/* Reiter über dem Fenster mit Fortschrittslinie */
.hx-tabs { display: flex; justify-content: center; gap: 6px; margin: 0 0 14px; }
.hx-tab { position: relative; padding: 8px 14px 10px; font-size: 14px; font-weight: 500; color: #4A6573; cursor: pointer; border-radius: 6px; transition: color 160ms ease, background-color 160ms ease; }
.hx-tab:hover { color: var(--hx-ink); background: rgba(255, 255, 255, .45); }
.hx-tab b { position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; border-radius: 2px; background: rgba(24, 72, 101, .14); overflow: hidden; }
.hx-tab b i { display: block; height: 100%; width: 100%; background: var(--hx-ink); transform: scaleX(0); transform-origin: left; }
#hx-1:checked ~ .hx-tabs .hx-tab--1, #hx-2:checked ~ .hx-tabs .hx-tab--2, #hx-3:checked ~ .hx-tabs .hx-tab--3, #hx-4:checked ~ .hx-tabs .hx-tab--4,
.hx:not(:has(.hx-r:checked)) .hx-tab--1 { color: var(--hx-ink); }
#hx-1:checked ~ .hx-tabs .hx-tab--1 b i, #hx-2:checked ~ .hx-tabs .hx-tab--2 b i, #hx-3:checked ~ .hx-tabs .hx-tab--3 b i, #hx-4:checked ~ .hx-tabs .hx-tab--4 b i { animation: hx-prog 4500ms linear forwards; }
.hx.is-manual .hx-tab b i { animation: none !important; transform: scaleX(0); }
#hx-1:checked ~ .hx-tabs .hx-tab--1 b, #hx-2:checked ~ .hx-tabs .hx-tab--2 b, #hx-3:checked ~ .hx-tabs .hx-tab--3 b, #hx-4:checked ~ .hx-tabs .hx-tab--4 b { background: rgba(24, 72, 101, .22); }
.hx.is-manual #hx-1:checked ~ .hx-tabs .hx-tab--1 b, .hx.is-manual #hx-2:checked ~ .hx-tabs .hx-tab--2 b, .hx.is-manual #hx-3:checked ~ .hx-tabs .hx-tab--3 b, .hx.is-manual #hx-4:checked ~ .hx-tabs .hx-tab--4 b { background: var(--hx-ink); }
.hx:hover .hx-tab b i, .hx.is-off .hx-tab b i { animation-play-state: paused !important; }
@keyframes hx-prog { to { transform: scaleX(1); } }
/* Fenster: wie das bisherige App-Bild im Hero (kein zusätzlicher Rahmen) */
.hx-frame { border-radius: 12px; box-shadow: 0 1px 2px rgba(12, 38, 54, .08), 0 24px 48px -16px rgba(12, 38, 54, .24), 0 48px 96px -48px rgba(12, 38, 54, .3); }
.hx-win { display: grid; grid-template-columns: 172px 1fr; height: 580px; border-radius: 12px; overflow: hidden; background: var(--hx-bg); }
/* Seitenleiste wie in der App */
.hx-side { display: flex; flex-direction: column; gap: 2px; padding: 16px 10px 12px; background: linear-gradient(180deg, #2B7E86 0%, #3A989A 55%, #48AAA8 100%); color: #fff; }
.hx-logo { display: flex; align-items: center; gap: 8px; padding: 0 8px 14px; font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.hx-logo img { width: 92px; height: auto; }
.hx-nav { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13px; color: rgba(255, 255, 255, .62); }
.hx-nav svg { flex: none; opacity: .9; }
label.hx-nav { color: #fff; cursor: pointer; transition: background-color 160ms ease; }
label.hx-nav:hover { background: rgba(255, 255, 255, .12); }
#hx-1:checked ~ .hx-frame .hx-nav--1, #hx-2:checked ~ .hx-frame .hx-nav--2, #hx-3:checked ~ .hx-frame .hx-nav--3, #hx-4:checked ~ .hx-frame .hx-nav--4,
.hx:not(:has(.hx-r:checked)) .hx-nav--1 { background: rgba(255, 255, 255, .24); }
.hx-me { margin-top: auto; display: flex; align-items: center; gap: 8px; padding: 10px 8px 0; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 13px; }
.hx-me img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
/* Ansichten: alt kurz raus, neu ruhig rein */
.hx-main { position: relative; overflow: hidden; }
.hx-v { position: absolute; inset: 0; padding: 18px 22px; opacity: 0; transform: translateY(6px); visibility: hidden; transition: opacity 120ms ease, transform 120ms ease, visibility 0s linear 120ms; }
#hx-1:checked ~ .hx-frame .hx-v--1, #hx-2:checked ~ .hx-frame .hx-v--2, #hx-3:checked ~ .hx-frame .hx-v--3, #hx-4:checked ~ .hx-frame .hx-v--4,
.hx:not(:has(.hx-r:checked)) .hx-v--1 { opacity: 1; transform: none; visibility: visible; transition: opacity 280ms var(--hx-ease) 100ms, transform 320ms var(--hx-ease) 100ms, visibility 0s; }
/* Bausteine */
.hx-sub { display: flex; gap: 18px; padding-bottom: 8px; margin-bottom: 14px; border-bottom: 1px solid var(--hx-rule); font-size: 13px; color: var(--hx-mute); }
.hx-sub b { color: var(--hx-ink); font-weight: 500; position: relative; }
.hx-sub b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--hx-teal); }
.hx-card { background: #fff; border: 1px solid var(--hx-rule); border-radius: 10px; }
.hx-h { margin: 0; font-size: 17px; font-weight: 600; color: var(--hx-ink); letter-spacing: -.01em; }
.hx-small { font-size: 11.5px; color: var(--hx-mute); }
.hx-pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; border: 1px solid transparent; }
.hx-pill--red { color: var(--hx-red); background: var(--hx-redbg); border-color: #F2C9C6; }
.hx-pill--ok { color: var(--hx-ok); background: var(--hx-okbg); border-color: #C9E6D3; }
.hx-chip { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; background: var(--hx-okbg); color: var(--hx-ok); }
.hx-chip--no { background: var(--hx-redbg); color: var(--hx-red); }
.hx-av { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; flex: none; }
.hx-ini { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #E3F2F1; color: var(--hx-ink); font-size: 10px; font-weight: 600; flex: none; }
.hx-ring { flex: none; }
.hx-ring circle + circle { stroke-dashoffset: 100; transition: stroke-dashoffset 900ms var(--hx-ease) 300ms; }
#hx-1:checked ~ .hx-frame .hx-ring circle + circle, .hx:not(:has(.hx-r:checked)) .hx-ring circle + circle { stroke-dashoffset: var(--off); }
/* 1 Staffing */
.hx-req { margin-bottom: 12px; }
.hx-req p { margin: 4px 0 8px; font-size: 12px; color: var(--hx-mute); }
.hx-req .hx-chip { background: #EEF3F5; color: var(--hx-text); margin-right: 4px; }
.hx-seg { display: inline-flex; margin-bottom: 10px; border: 1px solid var(--hx-rule); border-radius: 8px; overflow: hidden; font-size: 12px; }
.hx-seg span { padding: 5px 14px; color: var(--hx-mute); }
.hx-seg span:first-child { background: #E8F3F3; color: var(--hx-ink); font-weight: 500; }
.hx-cands { display: flex; flex-direction: column; gap: 8px; width: 54%; }
.hx-cand { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; }
.hx-cand { position: relative; }
.hx-cand > div { flex: 1; min-width: 0; }
.hx-cand strong { display: block; font-size: 13px; color: var(--hx-ink); font-weight: 500; }
.hx-cand .hx-chip { margin: 6px 3px 0 0; }
.hx-avail::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: #3DAA6A; vertical-align: 1px; }
.hx-cand { opacity: 0; transform: translateY(8px); transition: opacity 260ms ease, transform 320ms var(--hx-ease); }
#hx-1:checked ~ .hx-frame .hx-cand, .hx:not(:has(.hx-r:checked)) .hx-cand { opacity: 1; transform: none; }
.hx-cand:nth-child(2) { transition-delay: 70ms; }
.hx-cand:nth-child(3) { transition-delay: 140ms; }
.hx-drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 44%; padding: 18px 18px; background: #fff; border-left: 1px solid var(--hx-rule); box-shadow: -18px 0 40px -28px rgba(19, 44, 64, .35);
  transform: translateX(104%); transition: transform 420ms var(--hx-ease) 700ms; }
#hx-1:checked ~ .hx-frame .hx-v--1 .hx-drawer, .hx:not(:has(.hx-r:checked)) .hx-v--1 .hx-drawer, #hx-5:checked ~ .hx-frame .hx-v--5 .hx-drawer { transform: none; }
.hx-drawer header { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.hx-drawer header img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.hx-drawer header div { flex: 1; }
.hx-drawer header strong { display: block; font-size: 14px; color: var(--hx-ink); font-weight: 600; }
.hx-fit { list-style: none; margin: 0; padding: 0; }
.hx-fit li { display: grid; grid-template-columns: 18px 1fr; gap: 2px 8px; padding: 9px 0; border-top: 1px solid var(--hx-rule); font-size: 12.5px; }
.hx-fit li b { font-weight: 500; color: var(--hx-ink); }
.hx-fit li span { grid-column: 2; font-size: 11.5px; color: var(--hx-mute); }
.hx-fit svg { margin-top: 1px; }
.hx-ai { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: #F2F7F8; font-size: 11.5px; line-height: 1.45; color: var(--hx-text); }
.hx-ai p { margin: 4px 0 0; }
.hx-ai-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 500; color: var(--hx-ink); }
/* 2 Projekte */
.hx-filters { display: flex; gap: 8px; margin-bottom: 12px; }
.hx-filters span { padding: 6px 12px; border: 1px solid var(--hx-rule); border-radius: 6px; background: #fff; font-size: 12px; color: var(--hx-mute); }
.hx-table { overflow: hidden; }
.hx-row { display: grid; grid-template-columns: 2.1fr 1.3fr .9fr 1.25fr 1.35fr .9fr; align-items: center; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--hx-rule); font-size: 12.5px; }
.hx-row--head { border-top: 0; padding-top: 11px; padding-bottom: 9px; font-size: 11.5px; font-weight: 500; color: var(--hx-mute); }
.hx-row > span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-name { display: flex; align-items: center; gap: 10px; }
.hx-name img { width: 58px; height: 36px; border-radius: 4px; object-fit: cover; flex: none; }
.hx-name b { font-weight: 500; color: var(--hx-ink); font-size: 13px; }
.hx-person { display: flex; align-items: center; gap: 7px; }
.hx-person img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.hx-v--2 .hx-row:not(.hx-row--head) { opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 320ms var(--hx-ease); }
#hx-2:checked ~ .hx-frame .hx-v--2 .hx-row { opacity: 1; transform: none; }
.hx-v--2 .hx-row:nth-child(3) { transition-delay: 50ms; }
.hx-v--2 .hx-row:nth-child(4) { transition-delay: 100ms; }
.hx-v--2 .hx-row:nth-child(5) { transition-delay: 150ms; }
.hx-v--2 .hx-row:nth-child(6) { transition-delay: 200ms; }
/* 3 Skills */
.hx-skills { display: grid; grid-template-columns: 1.55fr 1fr; gap: 12px; }
.hx-skills .hx-card { padding: 14px 16px; }
.hx-skills h4 { margin: 0 0 10px; font-size: 13.5px; font-weight: 600; color: var(--hx-ink); }
.hx-sk { display: grid; grid-template-columns: 1.4fr 34px 1.1fr 46px; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--hx-rule); font-size: 12px; }
.hx-sk--head { border-top: 0; padding-top: 0; font-size: 11px; color: var(--hx-mute); }
.hx-sk em { font-style: normal; text-align: right; color: var(--hx-mute); }
.hx-sk .hx-gap { text-align: right; color: var(--hx-mute); }
.hx-sk .hx-gap--red { color: var(--hx-red); }
.hx-mini { display: grid; grid-template-columns: 1fr 30px 92px; align-items: center; gap: 8px; padding: 6px 0; font-size: 12px; }
.hx-mini em { font-style: normal; text-align: right; color: var(--hx-mute); }
.hx-side-cards { display: flex; flex-direction: column; gap: 12px; }
.hx-bar3 { display: flex; height: 9px; border-radius: 3px; overflow: hidden; transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--hx-ease) 150ms; }
.hx-bar3 i:nth-child(1) { background: #5EC9BF; }
.hx-bar3 i:nth-child(2) { background: #2E8C8F; }
.hx-bar3 i:nth-child(3) { background: #134E5C; }
#hx-3:checked ~ .hx-frame .hx-bar3 { transform: none; }
/* 4 Reports */
.hx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; }
.hx-kpis .hx-card { padding: 12px 14px; }
.hx-kpis strong { display: block; font-family: "Plus Jakarta Sans", Roboto, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.02em; color: var(--hx-ink); }
.hx-kpis strong.hx-red { color: var(--hx-red); }
.hx-kpis span { display: block; margin-top: 2px; font-size: 11px; color: var(--hx-mute); line-height: 1.35; }
.hx-charts { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.hx-charts .hx-card { padding: 12px 14px 8px; }
.hx-charts h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--hx-ink); }
.hx-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 6px; font-size: 10.5px; color: var(--hx-mute); }
.hx-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 2px; vertical-align: 0; }
.hx-chart { display: block; width: 100%; height: auto; }
.hx-area { clip-path: inset(0 100% 0 0); transition: clip-path 900ms var(--hx-ease) 150ms; }
#hx-4:checked ~ .hx-frame .hx-area { clip-path: inset(0 0 0 0); }
.hx-bars rect { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; transition: transform 600ms var(--hx-ease); }
#hx-4:checked ~ .hx-frame .hx-bars rect { transform: none; }
.hx-v--4 .hx-kpis .hx-card { opacity: 0; transform: translateY(6px); transition: opacity 240ms ease, transform 320ms var(--hx-ease); }
#hx-4:checked ~ .hx-frame .hx-v--4 .hx-kpis .hx-card { opacity: 1; transform: none; }
.hx-v--4 .hx-kpis .hx-card:nth-child(2) { transition-delay: 60ms; }
.hx-v--4 .hx-kpis .hx-card:nth-child(3) { transition-delay: 120ms; }
.hx-v--4 .hx-kpis .hx-card:nth-child(4) { transition-delay: 180ms; }
/* Größe: unter 1180 px kleiner, unter 961 px das bisherige Bild mit den zwei Karten */
@media (min-width: 961px) and (max-width: 1179px) { .hx { zoom: .84; } }
.px-hero-stage--hx .px-hero-shot, .px-hero-stage--hx .px-hero-card { display: none; }
@media (max-width: 960px) {
  .px-hero-stage--hx .hx { display: none; }
  .px-hero-stage--hx .px-hero-shot, .px-hero-stage--hx .px-hero-card { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .hx *, .hx *::before { transition: none !important; animation: none !important; }
}
/* Bühne: Fenster fast ganz zeigen, unten nur weich ausblenden */
@media (min-width: 961px) {
  .px-hero-sec .px-hero-stage--hx { height: auto !important; padding-bottom: 0 !important; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent 100%); mask-image: linear-gradient(180deg, #000 93%, transparent 100%); }
  .px-hero-sec .px-hero-stage--hx .hx-frame { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
}
/* ---------- Ablauf innerhalb der Ansichten (Leo 28.10.: „es soll sich etwas bewegen, damit man es versteht“) ---------- */
/* Dauer je Ansicht (Leo 28.10.: „viel zu langsam“ → etwa 40 % schneller); Staffing hat die meisten Schritte */
#hx-1:checked ~ .hx-tabs .hx-tab--1 b i { animation-duration: 5500ms; }
#hx-2:checked ~ .hx-tabs .hx-tab--2 b i { animation-duration: 4800ms; }
#hx-3:checked ~ .hx-tabs .hx-tab--3 b i { animation-duration: 4000ms; }
#hx-4:checked ~ .hx-tabs .hx-tab--4 b i { animation-duration: 4300ms; }
/* Staffing: Vorschläge erscheinen → Fynn wird ausgewählt → Profil öffnet → KI-Zusammenfassung → Passung Punkt für Punkt */
.hx-cand::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--hx-teal); border-radius: 10px; opacity: 0; pointer-events: none; }
.hx-cand:first-child::after { transition: opacity 220ms ease 600ms; }
#hx-1:checked ~ .hx-frame .hx-cand:first-child::after, .hx:not(:has(.hx-r:checked)) .hx-cand:first-child::after { opacity: 1; }
.hx-cand .hx-ring circle + circle { transition-delay: 250ms; }
.hx-drawer { transition-delay: 850ms; }
.hx-drawer .hx-ring circle + circle { transition-delay: 1150ms; }
.hx-ai { opacity: 0; transition: opacity 250ms ease 1250ms; }
.hx-ai p { clip-path: inset(0 100% 0 0); transition: clip-path 900ms linear 1350ms; }
.hx-fit li { opacity: 0; transform: translateY(4px); transition: opacity 240ms ease, transform 300ms var(--hx-ease); }
.hx-fit li:nth-child(1) { transition-delay: 2200ms; }
.hx-fit li:nth-child(2) { transition-delay: 2350ms; }
.hx-fit li:nth-child(3) { transition-delay: 2500ms; }
.hx-fit li:nth-child(4) { transition-delay: 2650ms; }
.hx-fit li:nth-child(5) { transition-delay: 2800ms; }
#hx-1:checked ~ .hx-frame .hx-ai, .hx:not(:has(.hx-r:checked)) .hx-ai,
#hx-1:checked ~ .hx-frame .hx-fit li, .hx:not(:has(.hx-r:checked)) .hx-fit li { opacity: 1; transform: none; }
#hx-1:checked ~ .hx-frame .hx-ai p, .hx:not(:has(.hx-r:checked)) .hx-ai p { clip-path: inset(0 0 0 0); }
/* Projekte: Horizon Stream klappt auf und zeigt Details */
.hx-chev { flex: none; color: var(--hx-mute); transition: transform 300ms var(--hx-ease) 450ms; }
#hx-2:checked ~ .hx-frame .hx-row--open .hx-chev { transform: rotate(90deg); }
.hx-row--open { background: #FAFCFC; }
.hx-detail { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 550ms var(--hx-ease) 500ms; background: #FAFCFC; }
.hx-detail > div { overflow: hidden; }
#hx-2:checked ~ .hx-frame .hx-detail { grid-template-rows: 1fr; }
.hx-detail-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; padding: 4px 14px 14px 36px; font-size: 12px; }
.hx-detail-in p { margin: 0 0 10px; color: var(--hx-text); line-height: 1.5; }
.hx-prog-bar { height: 6px; border-radius: 3px; background: #E4ECEF; overflow: hidden; }
.hx-prog-bar i { display: block; height: 100%; background: var(--hx-teal); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--hx-ease) 950ms; }
#hx-2:checked ~ .hx-frame .hx-prog-bar i { transform: scaleX(var(--p)); }
.hx-dates { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: var(--hx-mute); }
.hx-dates b { display: block; font-weight: 500; color: var(--hx-ink); font-size: 12px; }
.hx-dates span:last-child { text-align: right; }
.hx-detail-in dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; }
.hx-detail-in dt { color: var(--hx-mute); font-size: 11.5px; }
.hx-detail-in dd { margin: 0; color: var(--hx-ink); font-weight: 500; }
.hx-detail-in dd .hx-pill { margin-left: 4px; font-weight: 500; }
/* Skills: Zeile mit großem Skill-Gap wird kurz hervorgehoben */
.hx-v--3 .hx-sk:nth-child(2) { border-radius: 4px; transition: background-color 400ms ease 800ms; }
#hx-3:checked ~ .hx-frame .hx-v--3 .hx-sk:nth-child(2) { background: #FDF3F2; }
/* ---------- Ansicht 5: Mitarbeiter:innen ---------- */
#hx-5:checked ~ .hx-tabs .hx-tab--5 { color: var(--hx-ink); }
#hx-5:checked ~ .hx-tabs .hx-tab--5 b { background: rgba(24, 72, 101, .22); }
#hx-5:checked ~ .hx-tabs .hx-tab--5 b i { animation: hx-prog 4800ms linear forwards; }
.hx.is-manual #hx-5:checked ~ .hx-tabs .hx-tab--5 b { background: var(--hx-ink); }
.hx.is-manual .hx-tab--5 b i { animation: none !important; }
#hx-5:checked ~ .hx-frame .hx-nav--5 { background: rgba(255, 255, 255, .24); }
#hx-5:checked ~ .hx-frame .hx-v--5 { opacity: 1; transform: none; visibility: visible; transition: opacity 280ms var(--hx-ease) 100ms, transform 320ms var(--hx-ease) 100ms, visibility 0s; }
.hx-head5 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.hx-head5 .hx-filters { margin: 0; }
.hx-pgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hx-pc { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 12px; opacity: 0; transform: translateY(8px); transition: opacity 240ms ease, transform 320ms var(--hx-ease); }
.hx-pc > div { min-width: 0; flex: 1; }
.hx-pc strong { display: block; font-size: 13px; font-weight: 500; color: var(--hx-ink); }
.hx-pav { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.hx-pav--ini { display: grid; place-items: center; background: #E3F2F1; color: var(--hx-ink); font-size: 13px; font-weight: 600; }
.hx-util { display: block; height: 5px; margin: 8px 0 3px; border-radius: 3px; background: #E4ECEF; overflow: hidden; }
.hx-util i { display: block; height: 100%; background: var(--hx-teal); transform: scaleX(0); transform-origin: left; transition: transform 700ms var(--hx-ease) 500ms; }
#hx-5:checked ~ .hx-frame .hx-pc { opacity: 1; transform: none; }
#hx-5:checked ~ .hx-frame .hx-util i { transform: scaleX(var(--u)); }
.hx-pc:nth-child(2) { transition-delay: 40ms; }
.hx-pc:nth-child(3) { transition-delay: 80ms; }
.hx-pc:nth-child(4) { transition-delay: 120ms; }
.hx-pc:nth-child(5) { transition-delay: 160ms; }
.hx-pc:nth-child(6) { transition-delay: 200ms; }
.hx-pc:nth-child(7) { transition-delay: 240ms; }
.hx-pc:nth-child(8) { transition-delay: 280ms; }
.hx-pc:nth-child(9) { transition-delay: 320ms; }
.hx-pc::after { content: ""; position: absolute; inset: -1px; border: 2px solid var(--hx-teal); border-radius: 10px; opacity: 0; pointer-events: none; }
.hx-pc--sel::after { transition: opacity 220ms ease 600ms; }
#hx-5:checked ~ .hx-frame .hx-pc--sel::after { opacity: 1; }
.hx-drawer--p { width: 40%; }
.hx-h5 { margin: 14px 0 8px; font-size: 11.5px; font-weight: 500; color: var(--hx-mute); text-transform: none; }
.hx-ubars { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; align-items: end; height: 92px; }
.hx-ub { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 10px; }
.hx-ub i { display: block; width: 100%; height: calc(var(--h) * 58px); border-radius: 3px 3px 0 0; background: #2F6475; transform: scaleY(0); transform-origin: bottom; transition: transform 600ms var(--hx-ease); }
.hx-ub b { order: -1; margin-bottom: 3px; font-weight: 500; color: var(--hx-ink); }
.hx-ub em { margin-top: 4px; font-style: normal; color: var(--hx-mute); }
#hx-5:checked ~ .hx-frame .hx-ub i { transform: none; }
.hx-skl { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-skl span { display: inline-flex; gap: 6px; padding: 4px 8px; border-radius: 6px; background: #EEF5F6; font-size: 11.5px; color: var(--hx-ink); }
.hx-skl b { font-weight: 400; color: var(--hx-mute); }
.hx-plist { list-style: none; margin: 0; padding: 0; }
.hx-plist li { padding: 7px 0; border-top: 1px solid var(--hx-rule); font-size: 12px; }
.hx-plist b { display: block; font-weight: 500; color: var(--hx-ink); }
.hx-plist span { font-size: 11.5px; color: var(--hx-mute); }
.hx-v--5 .hx-h5, .hx-skl, .hx-plist { opacity: 0; transition: opacity 250ms ease 1500ms; }
#hx-5:checked ~ .hx-frame .hx-v--5 .hx-h5, #hx-5:checked ~ .hx-frame .hx-skl, #hx-5:checked ~ .hx-frame .hx-plist { opacity: 1; }
#hx-5:checked ~ .hx-frame .hx-v--5 .hx-h5:first-of-type { transition-delay: 1050ms; }
/* Abstand zwischen Fenster und hellem Rahmen kleiner (Leo 28.10.) */
@media (min-width: 961px) {
  .px-hero-sec .px-hero-stage--hx { padding: var(--sp-6) var(--sp-6) 0 !important; }
  .px-hero-stage--hx .hx { width: min(100%, 1120px); }
  .px-hero-stage--hx .hx-tabs { margin-bottom: 10px; }
}
/* Subline schmal unter kurzer H1 (28.10. abends) */
@media (min-width: 961px) {
  .px-hero-sec .px-hero-txt .px-hero-sub { width: auto; min-width: 0; max-width: min(100%, 31em); text-wrap: balance; }
  .px-hero-sec .px-sub-z { display: inline; white-space: normal; }
}
/* Subline zwei feste Zeilen unter „Finde das beste Team …“ (28.10. abends) */
@media (min-width: 1440px) {
  .px-hero-sec .px-hero-txt .px-hero-sub { max-width: none; }
  .px-hero-sec .px-sub-z { display: block; white-space: nowrap; }
}
/* Hero-Mockup im Float-Stil (29.10.): ersetzt die klickbare Hero-App (.hx, geparkt). Markup: build/hero_mockup.py
   Zwei ruhige Bewegungen: einmaliges Aufbauen (Zeilen, Score-Ringe, Balken) und sanftes Schweben der Karten.
   Variante b wechselt zusätzlich langsam zwischen Kandidatensuche und Planungsboard. */
.hm {
  --hm-ink: #184865; --hm-mute: #5A7382; --hm-rule: #DFEAEE; --hm-teal: #127A90; --hm-mint: #5EC9BF;
  --hm-busy: rgba(90, 115, 130, .26); --hm-ease: cubic-bezier(.23, 1, .32, 1);
  position: relative; margin: 0 auto; width: min(100%, 1040px);
  font-family: Roboto, 'Helvetica Neue', Arial, sans-serif; color: var(--hm-ink); text-align: left;
}
.hm * { box-sizing: border-box; }
.hm p { margin: 0; }
.hm b { font-weight: 600; }
/* Fenster */
.hm-win { background: #FFFFFF; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(12, 38, 54, .08), 0 24px 48px -16px rgba(12, 38, 54, .22), 0 48px 96px -48px rgba(12, 38, 54, .28); }
.hm-bar { display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 16px; border-bottom: 1px solid var(--hm-rule); background: #F7FBFB; }
.hm-dots { display: flex; gap: 6px; }
.hm-dots i { width: 9px; height: 9px; border-radius: 50%; background: #D3E0E5; }
.hm-crumb { font-size: 13px; color: var(--hm-mute); }
.hm-body { display: grid; padding: 22px 24px 120px; }
.hm-body > .hm-v { grid-area: 1 / 1; }
/* Personalbedarf */
.hm-eye { font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--hm-mute); }
.hm-h { margin: 6px 0 4px; font: 600 21px/1.2 'Plus Jakarta Sans', Roboto, sans-serif; letter-spacing: -.02em; color: var(--hm-ink); }
.hm-meta { font-size: 13.5px; color: var(--hm-mute); }
.hm-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px !important; }
.hm-chips span { font-size: 12.5px; padding: 4px 10px; border-radius: 6px; background: #EEF6F7; color: var(--hm-ink); }
.hm-req { padding-bottom: 18px; border-bottom: 1px solid var(--hm-rule); }
/* Kandidatenliste */
.hm-row { display: grid; grid-template-columns: 36px minmax(0, 180px) minmax(0, 1fr) 40px; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid #EDF4F5; }
.hm-row--head { grid-template-columns: 196px minmax(0, 1fr) 40px; padding: 14px 0 8px; font-size: 12px; color: var(--hm-mute); border-bottom: 0; }
.hm-row--head > span:first-child { font-weight: 500; color: var(--hm-ink); }
.hm-av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; display: block; }
.hm-who { display: flex; flex-direction: column; min-width: 0; }
.hm-who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-who > span { font-size: 12.5px; color: var(--hm-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-ai-mini { display: none; }
.hm-months { display: grid; grid-template-columns: repeat(6, 1fr); font-size: 11.5px; color: var(--hm-mute); }
.hm-months span { padding-left: 4px; }
.hm-track { display: block; position: relative; height: 12px; border-radius: 6px; background: #F1F6F8; overflow: hidden; }
.hm-seg { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 6 * 100%); width: calc((var(--e) - var(--s)) / 6 * 100%); transform-origin: left center; }
.hm-seg--busy { background: var(--hm-busy); }
.hm-seg--free { background: var(--hm-mint); }
.hm-seg--half { background: linear-gradient(180deg, var(--hm-mint) 50%, var(--hm-busy) 50%); }
.hm-ring { display: block; flex: none; }
/* Karten */
.hm-card { background: #FFFFFF; border-radius: 12px; padding: 18px;
  box-shadow: 0 2px 6px rgba(12, 38, 54, .08), 0 28px 56px -20px rgba(12, 38, 54, .36); }
.hm-ai-top { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.hm-ai .hm-av { width: 44px; height: 44px; }
.hm-ai-h { display: flex; align-items: center; gap: 6px; margin-top: 16px !important; font-size: 12.5px; font-weight: 500; color: var(--hm-teal); }
.hm-ai-p { margin-top: 6px !important; font-size: 13.5px; line-height: 1.5; color: #33424C; }
.hm-fit { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px !important; font-size: 12.5px; color: var(--hm-ink); }
.hm-fit span { display: inline-flex; align-items: center; gap: 5px; }
.hm-fit svg { color: var(--hm-teal); }
.hm-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; height: 76px; margin-top: 14px; }
.hm-col { display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; transform-origin: bottom center; }
.hm-col-free { flex: calc(100 - var(--b)); background: var(--hm-mint); }
.hm-col-busy { flex: var(--b); background: var(--hm-busy); }
.hm-months--cols { gap: 8px; margin-top: 6px; }
.hm-months--cols span { padding-left: 0; text-align: center; }
.hm-legend { display: flex; align-items: center; gap: 14px; margin-top: 12px !important; font-size: 12.5px; color: var(--hm-mute); }
.hm-legend b { margin-left: auto; color: var(--hm-ink); font-size: 13px; }
.hm-lg { display: inline-flex; align-items: center; gap: 6px; }
.hm-lg::before { content: ''; width: 10px; height: 10px; border-radius: 3px; }
.hm-lg--free::before { background: var(--hm-mint); }
.hm-lg--busy::before { background: var(--hm-busy); }
/* Planungsboard (Variante b) */
.hm-plan .hm-row--head { grid-template-columns: 228px minmax(0, 1fr); padding-top: 4px; }
.hm-prow { grid-template-columns: 32px 180px minmax(0, 1fr); padding: 14px 0; }
.hm-prow .hm-av { width: 32px; height: 32px; }
.hm-lane { position: relative; height: 36px; border-radius: 6px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / 6 - 1px), #EDF4F5 calc(100% / 6 - 1px) calc(100% / 6)); }
.hm-pbar { position: absolute; top: 0; bottom: 0; left: calc(var(--s) / 6 * 100% + 2px); width: calc((var(--e) - var(--s)) / 6 * 100% - 4px);
  display: flex; align-items: center; padding: 0 10px; border-radius: 6px; font-style: normal; font-size: 12px; white-space: nowrap; overflow: hidden;
  background: #E6EEF2; color: var(--hm-ink); transform-origin: left center; }
.hm-pbar--half { bottom: 50%; margin-bottom: 1px; }
.hm-pbar--new { top: 50%; margin-top: 1px; background: var(--hm-teal); color: #FFFFFF; font-weight: 500; }
.hm-toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; }
.hm-ok { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--hm-teal); color: #FFFFFF; flex: none; }
/* Variante c: Profilkarte im Fokus */
.hm--c { display: grid; justify-items: center; padding: 64px 0 72px; }
.hm-focus { position: relative; z-index: 2; width: min(100%, 540px); padding: 24px; }
.hm-focus .hm-av { width: 52px; height: 52px; }
.hm-focus .hm-who b { font-size: 16px; }
.hm-eye--sp { margin-top: 20px !important; margin-bottom: 8px !important; }
.hm-track--big { height: 18px; border-radius: 6px; }
.hm-focus .hm-months { margin-top: 6px; }
.hm-ghost { position: absolute; z-index: 1; display: grid; grid-template-columns: 36px minmax(0, 1fr) 40px; align-items: center; gap: 12px; width: 300px; padding: 14px 16px; opacity: .85; }
.hm-ghost--l { left: 0; top: 210px; }
.hm-ghost--r { right: 0; top: 120px; }
.hm-reqcard { position: absolute; z-index: 3; left: 4%; top: 0; display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; }
.hm-reqcard b { font: 600 16px/1.3 'Plus Jakarta Sans', Roboto, sans-serif; letter-spacing: -.01em; }
.hm-reqcard span { font-size: 12.5px; color: var(--hm-mute); }
/* Desktop: schwebende Karten an den Fensterkanten (wie float.com) */
@media (min-width: 961px) {
  .px-hero-sec .px-hero-stage--hm { height: auto !important; padding: var(--sp-9) var(--sp-9) 0 !important; overflow: hidden; display: block;
    -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, #000 86%, transparent 100%); }
  .hm--a .hm-win, .hm--b .hm-win { width: 65%; margin-left: 1%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .hm--a .hm-body, .hm--b .hm-body { padding-bottom: 110px; }
  .hm-ai, .hm-toast { position: absolute; z-index: 2; right: 0; top: 56px; width: 34%; }
  .hm-avail { position: absolute; z-index: 2; right: 2.5%; top: 262px; width: 33%; }
}
@media (min-width: 961px) and (max-width: 1179px) {
  .hm-row { grid-template-columns: 36px minmax(0, 150px) minmax(0, 1fr) 40px; gap: 12px; }
  .hm-row--head { grid-template-columns: 162px minmax(0, 1fr) 40px; }
  .hm-ai, .hm-toast { width: 36%; }
  .hm--layer .hm-body { padding-bottom: 120px; }
  .hm--layer .hm-search, .hm--layer .hm-fc { width: 42%; }
  .hm-avail { width: 34%; right: 0; }
}
/* Tablet und Handy: nichts überlappt, Karten stehen unter dem Fenster */
@media (max-width: 960px) {
  .px-hero-sec .px-hero-stage--hm { display: block; height: auto !important; min-height: 0 !important; padding: var(--sp-6) !important; overflow: hidden; }
  .hm--a { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
  .hm--a .hm-win { grid-column: 1 / -1; }
  .hm-body { padding-bottom: 12px; }
  .hm-swap1, .hm-swap2 { display: none; }
  .hm--c { padding: 0; gap: var(--sp-4); }
  .hm-ghost { display: none; }
  .hm-reqcard { position: static; width: min(100%, 540px); }
}
@media (max-width: 600px) {
  .px-hero-sec .px-hero-stage--hm { padding: var(--sp-4) !important; }
  .hm--a { display: block; }
  .hm-ai, .hm-avail { display: none; }
  .hm-bar { height: 32px; }
  .hm-body { padding: 16px 16px 4px; }
  .hm-h { font-size: 18px; }
  .hm-chips { display: none !important; }
  .hm-row--head { grid-template-columns: 1fr auto; }
  .hm-row--head .hm-months { display: none; }
  .hm-row { grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 4px 12px; }
  .hm-row .hm-track { grid-column: 2 / 3; grid-row: 2; height: 8px; }
  .hm-list .hm-row:nth-child(n + 4) { display: none; }
  .hm-ai-mini { display: flex; gap: 6px; align-items: flex-start; margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #33424C; white-space: normal !important; }
  .hm-ai-mini svg { flex: none; margin-top: 2px; color: var(--hm-teal); }
  .hm-prow { grid-template-columns: 32px minmax(0, 1fr); }
  .hm-prow .hm-lane { grid-column: 1 / -1; }
  .hm-plan .hm-row--head { grid-template-columns: 1fr; }
  .hm-focus { padding: 18px; }
  .hm-focus .hm-fit { display: none; }
}
/* Bewegung 1: einmal aufbauen · Bewegung 2: Karten schweben sanft (nur transform/opacity) */
@media (prefers-reduced-motion: no-preference) {
  .hm-row:not(.hm-row--head) { animation: hm-rise 700ms var(--hm-ease) calc(500ms + var(--i, 0) * 90ms) both; }
  .hm-ring-v { animation: hm-ring 1100ms var(--hm-ease) 800ms both; }
  .hm-seg, .hm-pbar--new { animation: hm-grow 1000ms var(--hm-ease) 900ms both; }
  .hm-col { animation: hm-grow-y 900ms var(--hm-ease) calc(1100ms + var(--i) * 60ms) both; }
  .hm-card { animation: hm-rise 800ms var(--hm-ease) 1000ms both, hm-float 7s ease-in-out 1800ms infinite alternate; }
  .hm-avail { animation-delay: 1150ms, 2600ms; }
  .hm-ghost--r { animation-delay: 1120ms, 3200ms; }
  .hm-reqcard { animation-delay: 600ms, 2200ms; }
  /* Variante b: nach der Suche ins Planungsboard und zurück (16 s) */
  .hm-v, .hm-swap1, .hm-swap2 { animation: hm-show1 16s ease-in-out 1s infinite both; }
  .hm-v--2, .hm-swap2 { animation-name: hm-show2; }
  .hm-v--2 .hm-pbar--new { animation: hm-plan-in 16s var(--hm-ease) 1s infinite both; }
  .hm--b:hover .hm-v, .hm--b:hover .hm-swap1, .hm--b:hover .hm-swap2, .hm--b:hover .hm-pbar--new { animation-play-state: paused; }
}
@media (min-width: 961px) { .hm--b .hm-swap1, .hm--b .hm-swap2 { position: absolute; inset: 0; pointer-events: none; } }
/* ohne Bewegung bleibt Variante b bei der Kandidatensuche stehen */
.hm--b .hm-v--2, .hm--b .hm-swap2 { display: none; }
@media (prefers-reduced-motion: no-preference) { .hm--b .hm-v--2 { display: block; } }
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) { .hm--b .hm-swap2 { display: block; } }
@keyframes hm-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes hm-ring { from { stroke-dashoffset: 100; } }
@keyframes hm-grow { from { transform: scaleX(0); } }
@keyframes hm-grow-y { from { transform: scaleY(0); } }
@keyframes hm-float { from { translate: 0 0; } to { translate: 0 -8px; } }
@keyframes hm-show1 { 0%, 44% { opacity: 1; } 50%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes hm-show2 { 0%, 44% { opacity: 0; } 50%, 94% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hm-plan-in { 0%, 52% { transform: scaleX(0); } 62%, 100% { transform: scaleX(1); } }
/* ---------- Varianten d/e/f (Leo 29.10.): vorne Kandidatensuche, dann Forecast, dahinter die Staffing-Übersicht ---------- */
.hm-h--s { margin: 0; font-size: 17px; }
.hm-ovr-top { display: flex; align-items: center; gap: 8px; padding-bottom: 14px; }
.hm-ovr-top .hm-h { margin-right: auto; }
.hm-filter { font-size: 12px; padding: 5px 10px; border: 1px solid var(--hm-rule); border-radius: 6px; color: var(--hm-mute); }
.hm-trow { display: grid; grid-template-columns: 1.3fr 1.5fr .6fr .5fr 1fr; gap: 12px; align-items: center; padding: 11px 8px; border-top: 1px solid #EDF4F5; font-size: 13px; color: #33424C; }
.hm-trow--head { border-top: 0; padding-top: 0; font-size: 12px; color: var(--hm-mute); }
.hm-trow b { color: var(--hm-ink); font-weight: 500; }
.hm-trow--hl { background: #E1F3F1; border-radius: 8px; }
.hm-pill { font-style: normal; font-size: 12px; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.hm-pill--open { border: 1px solid var(--hm-ink); color: var(--hm-ink); }
.hm-pill--prop { background: #E1F3F1; color: #0C6476; }
.hm-pill--done { background: #EEF2F4; color: var(--hm-mute); }
.hm-search { padding: 18px 18px 8px; }
.hm-search-h { margin-top: 4px !important; font: 600 16px/1.3 'Plus Jakarta Sans', Roboto, sans-serif; letter-spacing: -.01em; padding-bottom: 6px; }
.hm-srow { display: grid; grid-template-columns: 36px minmax(0, 1fr) 40px; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid #EDF4F5; }
.hm-srow--top { align-items: start; }
.hm-ai-line { display: flex !important; gap: 6px; align-items: flex-start; margin-top: 8px; font-size: 12.5px !important; line-height: 1.45; color: #33424C !important; white-space: normal !important; }
.hm-ai-line svg { flex: none; margin-top: 2px; color: var(--hm-teal); }
.hm-srow .hm-track { margin-top: 10px; height: 8px; }
.hm-fc-svg { display: block; width: 100%; height: 112px; margin-top: 14px; overflow: visible; }
.hm-months--fc span { padding-left: 0; }
.hm-lg--dem::before { background: var(--hm-teal); height: 3px; }
.hm-lg--cap::before { background: var(--hm-ink); height: 2px; }
@media (min-width: 961px) {
  .hm--layer .hm-win { width: 86%; margin-left: 7%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .hm--layer .hm-body { padding: 22px 24px 48px; }
  .hm--layer .hm-search { position: absolute; z-index: 2; left: 0; top: 64px; width: 40%; }
  .hm--layer .hm-fc { position: absolute; z-index: 3; right: 0; top: 170px; width: 36%; }
  .hm--f .hm-win { width: 82%; margin-left: 0; }
  .hm--f .hm-search { left: auto; right: 0; top: 84px; }
  .hm--f .hm-fc { right: auto; left: 6%; top: 268px; width: 34%; }
  .hm--f .hm-body { padding-bottom: 110px; }
}
@media (max-width: 960px) {
  .hm--layer { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); align-items: start; }
  .hm--layer .hm-win { display: none; }
}
@media (max-width: 600px) {
  .hm--layer { grid-template-columns: 1fr; }
  .hm--layer .hm-srow:nth-of-type(n + 3) { display: none; }
  .hm-fc-svg { height: 84px; }
}
@media (prefers-reduced-motion: no-preference) {
  .hm-srow { animation: hm-rise 700ms var(--hm-ease) calc(1200ms + var(--i, 0) * 90ms) both; }
  .hm-fc-l--dem { stroke-dasharray: 100; animation: hm-draw 1400ms var(--hm-ease) 1700ms both; }
  .hm-fc-gap { animation: hm-fade 800ms ease-out 2600ms both; }
  .hm--layer .hm-fc { animation-delay: 1500ms, 2400ms; }
  .hm--f .hm-trow--hl { animation: hm-fade 600ms ease-out 700ms both; }
  .hm--f .hm-search { animation-delay: 1100ms, 2000ms; }
  /* Variante e: Kandidatensuche und Forecast wechseln sich langsam im Vordergrund ab (14 s) */
  @media (min-width: 961px) {
    .hm--e .hm-search { animation: hm-rise 800ms var(--hm-ease) 1000ms both, hm-front-a 14s ease-in-out 3s infinite; }
    .hm--e .hm-fc { animation: hm-rise 800ms var(--hm-ease) 1500ms both, hm-front-b 14s ease-in-out 3s infinite; }
    .hm--e:hover .hm-search, .hm--e:hover .hm-fc { animation-play-state: paused; }
  }
}
@keyframes hm-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes hm-fade { from { opacity: 0; } }
@keyframes hm-front-a { 0%, 44% { z-index: 3; scale: 1; opacity: 1; } 50%, 94% { z-index: 1; scale: .97; opacity: .6; } 100% { z-index: 3; scale: 1; opacity: 1; } }
@keyframes hm-front-b { 0%, 44% { z-index: 1; scale: .97; opacity: .6; } 50%, 94% { z-index: 3; scale: 1; opacity: 1; } 100% { z-index: 1; scale: .97; opacity: .6; } }
@media (min-width: 961px) and (max-width: 1179px) {
  .hm--layer .hm-body { padding-bottom: 130px; }
  .hm--layer .hm-search, .hm--layer .hm-fc { width: 44%; }
}
@media (min-width: 961px) { .hm--f .hm-body { padding-bottom: 150px; } }
/* ---------- F2 „Näher an Heimat“ (Leo 29.10.): App-Rahmen mit Seitenleiste, Kandidatenkarte wie in der App, Forecast mit „Heute“ ---------- */
.hm-scene { position: relative; }
.hm-app { display: grid; grid-template-columns: 168px minmax(0, 1fr); min-height: 100%; }
.hm-side { display: flex; flex-direction: column; gap: 4px; padding: 18px 12px; background: linear-gradient(180deg, #127A90 0%, #3FA6A8 100%); }
.hm-logo { width: 84px; height: auto; margin: 0 0 18px 8px; display: block; }
.hm-nav { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: #FFFFFF; }
.hm-nav i { width: 14px; height: 14px; border-radius: 4px; border: 1.6px solid rgba(255, 255, 255, .85); flex: none; }
.hm-nav.is-on { background: rgba(255, 255, 255, .2); font-weight: 500; }
.hm-main { padding: 14px 22px 0; min-width: 0; }
.hm-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--hm-rule); margin-bottom: 12px; font-size: 14px; font-weight: 500; }
.hm-tabs span { padding: 6px 0 10px; color: var(--hm-ink); }
.hm-tabs .is-on { color: var(--hm-teal); box-shadow: inset 0 -2px 0 var(--hm-teal); }
.hm-t2 { display: grid; grid-template-columns: 1.25fr 1.4fr .9fr .7fr 1fr 1fr; gap: 10px; align-items: center; padding: 10px 8px; border-top: 1px solid #EDF4F5; font-size: 13px; color: #33424C; }
.hm-t2--head { border-top: 0; padding-top: 0; font-size: 12px; font-weight: 500; color: var(--hm-ink); }
.hm-t2 b { display: block; font-weight: 500; color: var(--hm-ink); }
.hm-t2 small { display: block; font-size: 11.5px; color: var(--hm-mute); }
.hm-t2 > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-t2--hl { background: #E1F3F1; border-radius: 8px; }
.hm-cands { display: flex; }
.hm-av--s { width: 24px; height: 24px; border: 2px solid #FFFFFF; margin-right: -6px; }
.hm-unset { font-size: 12px; color: var(--hm-mute); }
.hm-search2 { padding: 18px; }
.hm-cand-top { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 12px; align-items: center; margin-top: 12px; }
.hm-av--l { width: 52px; height: 52px; }
.hm-cand-top .hm-who b { font: 600 16px/1.25 'Plus Jakarta Sans', Roboto, sans-serif; letter-spacing: -.01em; }
.hm-skills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px !important; }
.hm-skills span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #E1F3F1; color: #0C6476; }
.hm-aibox { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 12px; border: 1px solid var(--hm-rule); border-radius: 10px; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--hm-ink); }
.hm-aibox svg { flex: none; margin-top: 1px; color: var(--hm-teal); }
.hm-cand-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #EDF4F5; font-size: 13px; color: #33424C; }
.hm-cand-foot em { font-style: normal; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #E1F3F1; color: #0C6476; }
.hm-more { margin-top: 8px; }
.hm-more .hm-srow { grid-template-columns: 32px minmax(0, 1fr) 36px; padding: 9px 0; }
.hm-more .hm-av { width: 32px; height: 32px; }
.hm-fc2 { position: relative; }
.hm-fc-t { font: 600 16px/1.3 'Plus Jakarta Sans', Roboto, sans-serif; letter-spacing: -.01em; }
.hm-heute { position: absolute; left: calc(18px + 14% + 6px); top: 58px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-mute); }
.hm-gap-pill { position: absolute; right: 22px; top: 62px; font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #E1F3F1; color: #0C6476; }
.hm-lg--cap2::before { background: var(--hm-ink); height: 3px; }
.hm-fc2 .hm-lg--free::before { height: 3px; }
@media (min-width: 961px) {
  .hm--g .hm-win { width: 84%; margin-left: 0; }
  .hm--g .hm-search { left: auto; right: 0; top: 56px; width: 35%; }
  .hm--g .hm-fc { left: 10%; right: auto; top: 244px; width: 34%; }
  .hm--g .hm-main { padding-bottom: 150px; }
}
@media (min-width: 961px) and (max-width: 1179px) {
  .hm--g .hm-app { grid-template-columns: 132px minmax(0, 1fr); }
  .hm--g .hm-t2 { grid-template-columns: 1.3fr 1.4fr .9fr 1fr; }
  .hm--g .hm-t2 > :nth-child(4), .hm--g .hm-t2 > :nth-child(6) { display: none; }
  .hm--g .hm-search { width: 40%; }
  .hm--g .hm-fc { width: 40%; left: 4%; }
}
@media (max-width: 960px) { .hm--g .hm-scene { display: contents; } }
@media (max-width: 600px) { .hm--g .hm-more { display: none; } }
/* Bewegung: die ganze Szene wird sehr langsam größer, die Karten wachsen beim Erscheinen leicht auf */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 961px) {
    .hm--g .hm-scene { transform-origin: 55% 35%; animation: hm-zoom 16s cubic-bezier(.33, 0, .2, 1) 600ms both; }
  }
  .hm--g .hm-card { animation: hm-grow-in 900ms var(--hm-ease) 1100ms both; }
  .hm--g .hm-fc { animation-delay: 1600ms, 2600ms; }
  .hm--g .hm-t2--hl { animation: hm-fade 700ms ease-out 600ms both; }
  .hm--g .hm-fc-band, .hm--g .hm-gap-pill { animation: hm-fade 800ms ease-out 2800ms both; }
}
@keyframes hm-zoom { from { transform: scale(.96); } to { transform: none; } }
@keyframes hm-grow-in { from { opacity: 0; transform: scale(.9); } }
/* ---------- F2, Runde 2 (Leo 29.10.): echte Seitenleiste, längere Tabelle, Fynn-Karte mit Reitern ---------- */
.hm-side--real { background: linear-gradient(180deg, #4B7F8D 0%, #6DB3B6 100%); gap: 2px; padding: 16px 10px 12px; }
.hm-side--real .hm-nav { position: relative; gap: 12px; padding: 7px 12px; border-radius: 999px; font-size: 12.5px; }
.hm-side--real .hm-nav svg { flex: none; }
.hm-side--real .hm-nav.is-on { background: #7CC7BD; font-weight: 400; }
.hm-badge { position: absolute; left: 20px; top: 1px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: #1E3A44; font-size: 9px; font-weight: 600; }
.hm-side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; }
.hm-me { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px 0; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 13px; font-weight: 500; color: #FFFFFF; }
.hm-me img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.hm-t3 { grid-template-columns: 1.35fr 1.5fr .95fr .95fr .7fr 1.05fr 1.5fr; }
.hm-ini { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: -6px; border: 2px solid #FFFFFF; border-radius: 50%; background: #E1F3F1; font-size: 9.5px; font-weight: 600; color: var(--hm-ink); }
.hm-unset-ic { width: 22px; height: 22px; border-radius: 50%; border: 1.5px dashed #9FB4C0; flex: none; }
.hm-cnote { margin-left: 12px; font-size: 11.5px; color: var(--hm-mute); white-space: nowrap; }
.hm-cands { align-items: center; }
.hm-avail-line { display: inline-flex !important; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; color: #33424C !important; }
.hm-avail-line i { width: 8px; height: 8px; border-radius: 50%; background: var(--hm-mint); flex: none; }
.hm-skills span { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 11px; line-height: 1; }
.hm-ctabs { display: flex; align-items: center; gap: 14px; margin-top: 14px !important; padding-bottom: 8px; border-bottom: 1px solid #EDF4F5; font-size: 12px; font-weight: 500; color: var(--hm-mute); }
.hm-ctab-star { display: inline-flex; }
.hm-ctab-star svg { width: 16px; height: 16px; }
.hm-ctabs .is-on { color: var(--hm-ink); }
.hm-ctabs em { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 50%; background: #EEF2F4; font-style: normal; font-size: 11px; }
.hm-bullets { margin: 10px 0 0; padding: 0 0 0 16px; font-size: 12.5px; line-height: 1.5; color: #33424C; }
.hm-bullets li + li { margin-top: 4px; }
@media (min-width: 961px) {
  .hm--g .hm-app { height: 606px; overflow: hidden; }
  .hm--g .hm-main { padding-bottom: 0; }
  .hm--g .hm-search { width: 38%; top: 40px; }
}
@media (min-width: 961px) and (max-width: 1279px) {
  .hm--g .hm-t3 { grid-template-columns: 1.3fr 1.4fr .9fr 1fr; }
  .hm--g .hm-t3 > :nth-child(3), .hm--g .hm-t3 > :nth-child(5), .hm--g .hm-t3 > :nth-child(7) { display: none; }
  .hm--g .hm-search { width: 44%; }
}
@media (max-width: 600px) { .hm--g .hm-bullets li + li { display: none; } }
.hm--g .hm-app { grid-template-columns: 184px minmax(0, 1fr); }
.hm-side--real .hm-nav { white-space: nowrap; }
.hm-bullets { list-style: disc; }
.hm-bullets li { display: list-item; }
.hm-fc2 .hm-gap-pill { top: 16px; right: 18px; }
.hm-fc2 .hm-fc-svg { overflow: hidden; }
/* Leo 29.10.: weißes Fenster rechts genauso weit vom Rand wie links */
@media (min-width: 961px) { .hm--g .hm-win { width: 100%; margin-left: 0; } }
@media (min-width: 961px) { .hm--g .hm-scene { transform-origin: 50% 35%; } }
/* Leo 29.10.: Kandidatenkarte ragt rechts etwas über das Fenster hinaus (plastischer); Szene wächst bis 100 % statt darüber, damit die Schrift scharf bleibt */
@media (min-width: 961px) { .hm--g .hm-search { right: -26px; } }
/* resp:hero-phone */
@media (max-width: 600px) {
  .px-hero-sec .px-hero { gap: var(--sp-7); }
  .px-hero-sec .px-hero h1 { font-size: clamp(1.75rem, 8.6vw, 2.5rem); }
  .px-hero-sec .px-h1-l { display: block; }
  .px-hero-sec .px-hero-sub { margin-top: var(--sp-5); text-wrap: pretty; }
  .px-hero-sec .px-hero-cta { margin-top: var(--sp-6); gap: var(--sp-4); }
}
/* Mockup F2 auf Tablet und Handy (Karten stehen dort ohne App-Fenster, ~300 px breit):
   Kandidatenkarte ohne abgeschnittene Zeilen, Reiter in einer Zeile */
@media (max-width: 960px) {
  .hm--g .hm-search { padding: 16px 16px 8px; }
  .hm--g .hm-cand-top { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 10px; }
  .hm--g .hm-cand-top .hm-av--l, .hm--g .hm-cand-top .hm-ring { width: 44px; height: 44px; }
  .hm--g .hm-cand-top .hm-who > span { white-space: normal; }
  .hm--g .hm-ctabs { gap: 10px; white-space: nowrap; }
  .hm--g .hm-ctabs > :last-child { display: none; }
}
/* /resp:hero-phone */
/* resp:tap */
@media (max-width: 600px), (pointer: coarse) {
  .px-ftr-col ul { gap: 0; }
  .px-ftr-col a, .px-ftr-col button { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; padding-block: 0; }
  .px-ftr-logo { min-height: 44px; align-items: center; }
  .px-link { min-height: 44px; }
  .px-chip { min-height: 44px; }
  .px-faq-l .px-lead a { padding-block: 12px; }
}
/* /resp:tap */
/* resp:tablet */
@media (min-width: 601px) and (max-width: 960px) {
  .px-hero-sec .px-hero h1 { font-size: clamp(2.75rem, 6.6vw, 3.5rem); }
  .px-hero-sec .px-hero-sub { max-width: 52ch; }
}
@media (min-width: 961px) and (max-width: 1180px) {
  .px-kpi { grid-template-columns: minmax(0, 1fr); }
  .px-kpi-head { padding: var(--sp-9) var(--gutter) var(--sp-4); }
  .px-kpi-item:first-child { border-left: 0; padding-left: var(--gutter); }
}
/* /resp:tablet */
/* resp:sub-desktop */
@media (min-width: 961px) {
  .px-hero-sec .px-hero-txt .px-hero-sub { width: auto; min-width: 0; max-width: min(100%, 35.6em); text-wrap: wrap; }
  .px-hero-sec .px-sub-z { display: inline; white-space: normal; }
}
/* /resp:sub-desktop */
/* resp:headings */
@media (min-width: 961px) {
  .px-faq-l { padding-right: var(--sp-6); }
}
@media (min-width: 961px) and (max-width: 1279px) {
  .px-faq-sec { grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); }
  .px-ftr .px-closing { font-size: min(clamp(2.75rem, 1.7rem + 3.3vw, 4.5rem), 5.4vw); }
}
@media (max-width: 600px) {
  .px-ftr .px-closing { font-size: min(2.75rem, 9.6vw); }
}
.px-step h3 { text-wrap: balance; }
/* /resp:headings */
/* resp:wide */
@media (min-width: 1600px) {
  :root { --wrap: 1400px; }
  .px-hero-sec .hm { width: min(100%, 1140px); }
}
/* /resp:wide */
/* resp:phone-blocks */
@media (max-width: 600px) {
  .px-step { padding-block: var(--sp-7); }
  .px-step-fig { align-self: stretch; padding: var(--sp-4); }
  .px-step-fig svg { max-height: 190px; }
  .px-int-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .px-int-grid > li, .px-int-grid > li:nth-child(5n) { border-right: 1px solid var(--rule); }
  .px-int-grid > li:nth-child(2n) { border-right: 0; }
  .px-int-grid > li:nth-last-child(-n + 2) { border-bottom: 0; }
  .px-int-item { flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-4); }
}
/* /resp:phone-blocks */
/* resp:phone-text */
@media (max-width: 600px) {
  .px-eyebrow { font-size: .8125rem; }
  .px-int-item small { font-size: .875rem; }
}
/* /resp:phone-text */

/* Hero-Subline so breit wie die H1 (29.10.) */
@media (min-width: 961px) {
  .px-hero-sec .px-hero-txt { width: fit-content; max-width: 100%; margin-inline: auto; }
  .px-hero-sec .px-hero-txt .px-hero-sub { width: 0; min-width: 100%; max-width: none; text-wrap: balance; }
}
/* Hero-Subline drei feste Zeilen ab 1280 (29.10.) */
@media (min-width: 1280px) {
  .px-hero-sec .px-sub-l { display: block; white-space: nowrap; }
  .px-hero-sec .px-hero-txt .px-hero-sub { font-size: 1.25rem; }
}
/* resp:header-panels */
/* Alle Menüs als Panel an den Schienen, gleiches Raster wie „Produkt“:
   Spalte 1 = Einträge untereinander, Spalte 2+3 = breiter Teaser auf --ground */
.px-mega-span { grid-column: span 2; }
.px-mega-aside { background: var(--ground); }
.px-mega-col { min-width: 0; }
/* Produkt: Zeilen-Icons als kleine Kacheln in Teal (wie die Kernfunktionen) */
.px-mega-row { align-items: center; }
.px-mega-row > svg {
  width: 36px; height: 36px; padding: 8px; margin-top: 0;
  background: var(--sunken); color: var(--accent);
}
.px-mega-row:hover > svg, .px-mega-feat:hover .px-tile { background: var(--bg); }
/* Kernfunktionen und Branchen größer (Runde 2) */
.px-mega-feat { gap: var(--sp-5); padding: var(--sp-5) var(--sp-4); }
.px-mega-feat .px-tile { width: 52px; height: 52px; }
.px-mega-feat .px-tile svg { width: 24px; height: 24px; }
.px-mega-feat .px-mega-t { font-size: var(--fs-h3); }
.px-mega-feat .px-mega-d { margin-top: var(--sp-1); font-size: var(--fs-copy); }
/* Teaser im Menü */
.px-mt { display: flex; gap: var(--sp-6); color: var(--text); }
.px-mt-vis { position: relative; display: block; flex: none; overflow: hidden; background: var(--grad-aurora); }
.px-mt-txt { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.px-mt-t {
  font-family: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; font-weight: 600;
  font-size: var(--fs-body); line-height: 1.4; letter-spacing: -.01em; color: var(--ink);
  text-wrap: balance;
}
.px-mt-d { font-size: var(--fs-small); line-height: 1.45; color: var(--muted); }
.px-mt .px-link { margin-top: var(--sp-3); font-size: var(--fs-ui); }
/* breit: Bild links, Text rechts (Branchen) */
.px-mt--wide { align-items: center; }
.px-mt--wide .px-mt-vis { width: 52%; aspect-ratio: 16 / 10; }
.px-mt--wide .px-mt-t { font-size: var(--fs-h3); line-height: 1.4; letter-spacing: -.015em; }
.px-mt--wide .px-mt-d { margin-top: var(--sp-2); font-size: var(--fs-ui); }
.px-mt-photo { width: 100%; height: 100%; object-fit: cover; }
.px-mt-vis .px-case-logo { left: var(--sp-5); bottom: var(--sp-5); }
.px-mt-vis .px-case-logo svg { width: 112px; }
.px-mt-vis:has(.px-case-logo)::after {
  content: ""; position: absolute; inset: 45% 0 0; pointer-events: none;
  background: linear-gradient(to top, rgba(15, 51, 70, .55), rgba(15, 51, 70, 0));
}
.px-mt-vis .px-case-logo { z-index: 1; }
/* quer und klein: Produkt, unten in der Spalte Kernfunktionen */
.px-mt--row { align-items: center; gap: var(--sp-5); margin-top: auto; padding-top: var(--sp-6); border-top: 1px solid var(--rule); }
.px-mt--row .px-mt-vis { width: 168px; aspect-ratio: 3 / 2; }
.px-mt-shot {
  position: absolute; left: 14px; top: 14px; width: 260%; max-width: none; height: auto;
  border-radius: 6px; box-shadow: 0 16px 32px -16px rgba(19, 44, 64, .4);
}
@media (hover: hover) and (pointer: fine) {
  .px-mt-photo, .px-mt-shot { transition: transform 400ms var(--ease-out); }
  .px-mt:hover .px-mt-photo { transform: scale(1.03); }
  .px-mt:hover .px-mt-shot { transform: translate(-4px, -4px); }
  .px-mt:hover .px-link { text-decoration-color: var(--ink); }
  .px-mt:hover .px-arr { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .px-mt:hover .px-mt-photo, .px-mt:hover .px-mt-shot { transform: none; }
}
/* Mint-Linie unter dem geöffneten Menüpunkt, sitzt auf der Unterkante des Headers */
.px-nav-link { position: relative; }
.px-nav-link::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3);
  bottom: calc((44px - var(--hdr-h)) / 2); height: 2px;
  background: var(--accent-2);
  transform: scaleX(0); transition: transform 200ms var(--ease-out);
}
.px-nav-link[aria-expanded="true"]::after,
.px-nav-item.is-open > .px-nav-link::after,
html:not(.js) .px-nav-item:hover > .px-nav-link::after { transform: scaleX(1); }
.px-hdr[data-instant] .px-nav-link::after { transition-duration: 0s; }
/* Kleinere Desktop-Breiten */
@media (max-width: 1240px) {
  .px-mt--row .px-mt-vis { width: 132px; }
  .px-mt--wide .px-mt-vis { width: 46%; }
  .px-mt--wide .px-mt-t { font-size: 1.125rem; }
}
/* /resp:header-panels */