/* ==========================================================================
   lp-hero.css - Scroll-Buehne der Hero Section (seit 2026-10-09, Entwurf 2,
   Stil nach Referenzvideo, vom Inhaber freigegeben). Grafiken nach der
   Startseite der Web App (/app, Video-Konto "Mira A."), Werte aus
   Bewerbungs Webapp Kopie/DESIGN.md (Karten 24px, Kartenweiss, Auflage-
   Schatten, Pillen, PCS Werk 300 fuer Zahlen).
   Grundzustand (ohne html.stage-on): Text mittig, darunter die Startseite
   der App mit allen Karten und dem Panel des KI-Assistenten. So sieht es
   ohne JavaScript, unter 1024px und bei Reduced Motion aus.
   Mit html.stage-on (lp-hero.js) wird die Sektion 240vh hoch, der Inhalt
   klebt als 100vh-Buehne. Das Skript setzt --p (0..1), --b (Panel offen),
   --v (Verlauf im Panel) und die Transforms der fliegenden Elemente.
     p 0          Drei Karten und die Suchpille schweben um die Ueberschrift.
     p 0..0.42    Sie fliegen an ihren Platz, Text blendet aus, die
                  Startseite der App baut sich darunter auf.
     p 0.46..0.54 "Du" klickt auf die Suche, das Panel klappt auf.
     p 0.54..0.66 "Du" tippt die Frage ins Feld "Deine Frage …".
     p 0.67..0.82 Frage und Antwort erscheinen im Verlauf.
     p 0.84..0.92 Unten erscheint die Zeile mit dem Knopf zur Warteliste.
   Bewegt werden transform, opacity, clip-path und der Schatten der
   fliegenden Elemente. Kein Weichzeichner, keine Endlosschleife.
   ========================================================================== */

.hs{
  --kopf-h:76px;
  --hs-app-w:min(1240px, calc(100vw - 2 * var(--gutter, 24px)));
  /* Werte der App */
  --ap-card:color-mix(in srgb,var(--surface) 84%,transparent);
  --ap-card-edge:color-mix(in srgb,var(--surface) 92%,transparent);
  --ap-tile:color-mix(in srgb,var(--surface-2) 80%,transparent);
  --ap-auflage:var(--shadow-app);
  --ap-schwebe:0 24px 60px -20px color-mix(in srgb,var(--text-1) 35%,transparent);
  /* Lage der Suchpille in der Kopfleiste (rechts von ihr: Nutzer, Abmelden) */
  --ap-pad:22px;
  --ap-such-w:216px;
  --ap-rechts:calc(var(--ap-pad) + 8px + 36px + 8px + 104px + 10px);
  position:relative;
}

/* ── Hintergrund: Foto, darueber der weiche Verlauf ──────────────────────
   ::before traegt das bisherige Schreibtischfoto mit seinem Schleier
   (Werte wie bis 2026-10-08), ::after den weichen Verlauf, etwas
   zurueckgenommen, damit Pflanze und Laptop sichtbar bleiben. Kein
   Weichzeichner, keine Endlosschleife (A-B-7 im Anforderungsdokument). */
.hs-buehne{position:relative;isolation:isolate;background-color:var(--bg);padding:clamp(40px,7vh,80px) var(--gutter,24px) clamp(48px,7vh,80px)}
.hs-buehne::before{
  content:"";position:absolute;z-index:-2;inset:0 0 auto;height:min(100vh,62vw);pointer-events:none;
  background-repeat:no-repeat;background-size:cover;background-position:center bottom;
  background-image:
    linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 18%,color-mix(in srgb,var(--bg) 62%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 54%,transparent 66%,transparent 82%,var(--bg) 100%),
    url("/assets/img/hero-jobsuche-1920.webp");
  background-image:
    linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 18%,color-mix(in srgb,var(--bg) 62%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 54%,transparent 66%,transparent 82%,var(--bg) 100%),
    image-set(url("/assets/img/hero-jobsuche-1920.avif") type("image/avif"),url("/assets/img/hero-jobsuche-1920.webp") type("image/webp"));
}
@media (min-width:1600px){
  .hs-buehne::before{background-image:
    linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 18%,color-mix(in srgb,var(--bg) 62%,transparent) 42%,color-mix(in srgb,var(--bg) 30%,transparent) 54%,transparent 66%,transparent 82%,var(--bg) 100%),
    image-set(url("/assets/img/hero-jobsuche-2688.avif") type("image/avif"),url("/assets/img/hero-jobsuche-2688.webp") type("image/webp"))}
}
@media (max-width:1023px){
  .hs-buehne::before{background-image:
    linear-gradient(to bottom,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 25%,color-mix(in srgb,var(--bg) 82%,transparent) 70%,var(--bg) 100%),
    image-set(url("/assets/img/hero-jobsuche-1280.avif") type("image/avif"),url("/assets/img/hero-jobsuche-1280.webp") type("image/webp"))}
}
@media (max-width:699px){.hs-buehne::before{height:600px;background-position:88% bottom}}
.hs-buehne::after{
  content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    radial-gradient(42% 46% at 58% 58%,color-mix(in srgb,var(--brand-warm) 22%,transparent) 0%,color-mix(in srgb,var(--chart-2) 9%,transparent) 45%,transparent 72%),
    radial-gradient(34% 42% at 30% 42%,color-mix(in srgb,var(--accent) 12%,transparent) 0%,color-mix(in srgb,var(--accent) 4%,transparent) 50%,transparent 75%),
    radial-gradient(26% 32% at 82% 24%,color-mix(in srgb,var(--info) 8%,transparent) 0%,transparent 70%);
}

/* ── Text ──────────────────────────────────────────────────────────────── */
.stage-copy{position:relative;z-index:3;max-width:var(--wrap-max,1200px);margin:0 auto;text-align:center}
.stage-copy h1{width:fit-content;max-width:100%;margin:0 auto;font-family:var(--font-display);font-weight:300;
  font-size:clamp(2.75rem,7vw,6rem);line-height:var(--hero-h1-lh,1.05);letter-spacing:var(--hero-h1-ls,-.025em);color:var(--text-1);text-wrap:balance}
.hero-lead{max-width:56ch;margin:var(--hero-gap-lead,24px) auto 0;color:var(--text-2);font-size:clamp(1.0625rem,1.4vw,1.25rem);text-wrap:balance}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--hero-gap-cta,32px)}
.hero-cta .pill{font-size:1rem;font-weight:var(--fw-semibold,600)}
.hero-note{margin:16px 0 0;font-size:var(--fs-small,.875rem);color:var(--text-2)}
.hero-bild-hinweis{max-width:var(--wrap-max,1200px);margin:12px auto 0;text-align:center;color:var(--text-2)}

/* ── App-Fenster ───────────────────────────────────────────────────────── */
.hs-app{position:relative;width:var(--hs-app-w);margin:clamp(48px,8vh,88px) auto 0;font-family:var(--font-sans);color:var(--text-1)}
/* Rahmen: Seitengrund der App (Petrolverlauf, warme Ecke unten rechts) */
.hs-chrome{position:absolute;inset:0;border-radius:24px;overflow:hidden;border:1px solid color-mix(in srgb,var(--surface) 90%,transparent);
  background:radial-gradient(60% 55% at 100% 100%,color-mix(in srgb,var(--brand-warm) 14%,transparent),transparent 70%),linear-gradient(135deg,var(--page-a),var(--page-b));
  box-shadow:0 1px 2px color-mix(in srgb,var(--text-1) 5%,transparent),0 30px 70px -28px color-mix(in srgb,var(--text-1) 32%,transparent)}
.hs-fensterleiste{display:flex;gap:6px;height:34px;align-items:center;padding:0 16px;border-bottom:1px solid color-mix(in srgb,var(--surface) 70%,transparent);background:color-mix(in srgb,var(--surface) 55%,transparent)}
/* Fensterknoepfe als kleine Quadrate mit Radius 3, keine Kreise */
.hs-fensterleiste i{width:10px;height:10px;border-radius:3px;background:var(--line-strong)}
.hs-fensterleiste span{margin:0 auto;padding:3px 14px;border-radius:999px;background:color-mix(in srgb,var(--surface) 80%,transparent);font-size:.75rem;color:var(--text-2)}

.hs-raster{position:relative;z-index:1;display:grid;gap:18px var(--ap-gap,16px);
  grid-template-columns:minmax(0,1fr) minmax(0,2.05fr) minmax(0,1fr);
  grid-template-areas:"kopf kopf kopf" "seite seite seite" "pipe pipe pipe" "woche bew antw" "panel panel panel";
  align-items:start;padding:calc(34px + 16px) var(--ap-pad) 26px}
/* position und z-index seit Critique 2026-10-09 (fuenfter Lauf): ohne
   Buehne lag .hs-chrome (inset:0) darueber, sichtbar 1,02:1. */
.hs-hinweis{position:relative;z-index:1;margin:12px 0 0;text-align:center;font-size:var(--fs-micro,.75rem);color:var(--text-2)}

/* Kopfleiste */
.ap-kopf{grid-area:kopf;display:flex;align-items:center;gap:20px;height:52px;padding:0 8px 0 14px;border-radius:20px;background:var(--surface);box-shadow:var(--ap-auflage)}
.ap-marke{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;line-height:1.05;white-space:nowrap}
.ap-marke small{display:block;font-size:.75rem;font-weight:400;color:var(--text-2)}
.ap-marke img{object-fit:contain}
.ap-nav{display:flex;gap:4px;margin:0 auto;font-size:.8125rem;color:var(--text-2);white-space:nowrap}
.ap-nav>*{padding:6px 11px;border-radius:999px}
.ap-nav b{color:var(--accent-strong);font-weight:600}
.ap-nav em{font-style:normal;display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:3px;border-radius:999px;background:var(--accent-dim);color:var(--accent-strong);font:600 .75rem/1 var(--font-mono)}
.ap-kopf-rechts{display:flex;align-items:center;gap:8px;margin-left:auto}
.ap-such-platz{width:var(--ap-such-w);height:36px;margin-right:2px}
.ap-nutzer{display:flex;align-items:center;justify-content:flex-end;gap:8px;width:104px;font-size:.8125rem;color:var(--text-2);white-space:nowrap}
.ap-avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-dim);color:var(--accent-strong);font:600 .75rem/1 var(--font-mono)}
.ap-rund{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--surface);box-shadow:var(--ap-auflage);color:var(--text-1)}
.ap-rund svg,.ap-eck svg,.ap-zahlen i svg,.ap-suche svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ap-rund svg{width:16px;height:16px}

/* Suchpille "Suchen oder fragen": schwebt, landet rechts in der Kopfleiste */
.ap-suche{--f:0;position:absolute;z-index:2;top:calc(34px + 16px + 8px);right:var(--ap-rechts);width:var(--ap-such-w);height:36px;box-sizing:border-box;
  display:flex;align-items:center;gap:8px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--control-off);
  font-size:.8125rem;color:var(--text-1);white-space:nowrap;
  box-shadow:0 1px 2px color-mix(in srgb,var(--text-1) 6%,transparent),0 calc(4px + var(--f) * 22px) calc(12px + var(--f) * 40px) calc(-4px - var(--f) * 10px) color-mix(in srgb,var(--text-1) calc((12 + var(--f) * 10) * 1%),transparent)}
.ap-suche>svg{width:15px;height:15px;flex:none;color:var(--text-2)}
.ap-suche .hs-tipp{overflow:hidden;text-overflow:ellipsis}
.hs-tipp.ist-leer{color:var(--text-2)}
.hs-tipp:not(.ist-leer)::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:2px;vertical-align:-.15em;background:var(--accent-2-line)}

/* Seitenkopf */
.ap-seitenkopf{grid-area:seite;display:flex;align-items:flex-end;gap:28px;padding:6px 20px 0}
.ap-titel p{margin:0}
.ap-datum{font-size:.8125rem;color:var(--text-2)}
.ap-start{margin-top:4px!important;font-family:var(--font-display);font-weight:300;font-size:3.25rem;line-height:.95;letter-spacing:-.035em}
.ap-gruss{margin-top:8px!important;font-size:.8125rem;color:var(--text-2)}
.ap-knopf{display:inline-flex;align-items:center;height:40px;padding:0 18px;border-radius:999px;background:var(--accent);color:var(--on-accent);font-size:.8125rem;font-weight:500;white-space:nowrap;box-shadow:var(--ap-auflage)}
.ap-zahlen{display:flex;gap:30px;margin-left:auto}
.ap-zahlen p{display:flex;align-items:center;gap:10px;margin:0}
.ap-zahlen strong{font-family:var(--font-display);font-weight:300;font-size:2.5rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.ap-zahlen i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--surface);color:var(--text-2);box-shadow:0 1px 2px color-mix(in srgb,var(--text-1) 8%,transparent)}
.ap-zahlen i svg{width:14px;height:14px}
.ap-zahlen span{display:block;margin-top:8px;font-size:.75rem;color:var(--text-2)}
.ap-zahlen small{display:block;margin-top:4px;font-size:.75rem;color:var(--text-3)}

/* Pipeline als Pillenreihe */
.ap-pipeline{grid-area:pipe;display:flex;gap:6px;width:58%;padding:0 20px}
.ap-pipeline>div{flex:var(--n)}
.ap-pipeline span{display:block;margin:0 0 6px;font-size:.75rem;color:var(--text-2);white-space:nowrap}
.ap-pipeline b{display:flex;align-items:center;height:34px;padding:0 14px;border-radius:999px;font-size:.75rem;font-weight:500;box-sizing:border-box}
.ap-kontur{border:1.5px solid var(--text-1);color:var(--text-1)}
.ap-tinte{background:var(--text-1);color:var(--on-accent)}
.ap-petrol{background:var(--accent);color:var(--on-accent)}

/* Karten */
.ap-karte{--f:0;position:relative;box-sizing:border-box;padding:18px 18px 16px;border-radius:22px;background:var(--ap-card);border:1px solid var(--ap-card-edge);
  box-shadow:0 1px 2px color-mix(in srgb,var(--text-1) 6%,transparent),0 calc(4px + var(--f) * 22px) calc(12px + var(--f) * 40px) calc(-4px - var(--f) * 10px) color-mix(in srgb,var(--text-1) calc((14 + var(--f) * 8) * 1%),transparent);
  transform-origin:center center}
.ap-karte-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ap-karte-titel{margin:0;font-family:var(--font-display);font-weight:400;font-size:1.1875rem;letter-spacing:-.01em}
.ap-eck{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--control-off);color:var(--accent-strong)}
.ap-eck svg{width:15px;height:15px}

/* Diese Woche */
.ap-woche{grid-area:woche}
.ap-tage{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);margin:16px 0 0;padding:0;text-align:center;font-family:var(--font-display);font-weight:300;font-size:1.25rem;color:var(--text-2)}
.ap-tage small{display:block;margin-bottom:4px;font-family:var(--font-sans);font-size:.75rem;color:var(--text-2)}
.ap-tage .ist-heute{color:var(--text-1);font-weight:500}
.ap-tage .ist-termin{color:var(--accent-strong);font-weight:500}
.ap-termin{margin:14px 0 0;padding:9px 12px;border-radius:14px;background:var(--ap-tile);font-size:.8125rem;line-height:1.4}
.ap-termin time{display:block;font-size:.75rem;font-weight:600;color:var(--accent-strong)}

/* Aktuelle Bewerbungen */
.ap-bewerbungen{grid-area:bew}
.ap-segment{display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);font-size:.75rem;color:var(--text-2)}
.ap-segment>*{padding:5px 11px;border-radius:999px}
.ap-segment b{background:var(--accent);color:var(--on-accent);font-weight:500}
.ap-tabelle{width:100%;margin-top:10px;border-collapse:collapse;font-size:.8125rem}
.ap-tabelle th{padding:6px 8px;text-align:left;font-weight:400;font-size:.75rem;color:var(--text-2);border-bottom:1px dotted var(--line-strong)}
.ap-tabelle td{padding:8px;vertical-align:middle;white-space:nowrap}
.ap-tabelle td:first-child{display:flex;align-items:center;gap:8px;font-weight:500}
.ap-tabelle td:nth-child(2){max-width:150px;overflow:hidden;text-overflow:ellipsis;color:var(--text-1)}
.ap-tabelle td:nth-child(3){font-variant-numeric:tabular-nums}
.ap-mono{display:grid;place-items:center;width:26px;height:26px;flex:none;border-radius:50%;background:var(--surface-2);color:var(--text-2);font:600 .6875rem/1 var(--font-mono)}
.ap-match{display:inline-block;width:40px;height:5px;margin-right:8px;vertical-align:middle;border-radius:999px;background:linear-gradient(to right,var(--accent) calc(var(--m) * 100%),var(--surface-3) 0)}
/* Statuspille mit Punkt wie in der App (Ausnahme fuer App-Ansichten) */
.ap-status{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;font-size:.75rem;font-weight:500}
.ap-status::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}
.ap-status--beworben{background:var(--accent-dim);color:var(--accent-strong)}
.ap-status--interview{background:var(--status-interview-dim);color:var(--status-interview)}
.ap-status--neu{background:var(--surface-2);color:var(--text-2)}

/* Antworten im Petrolfeld */
.ap-antworten{grid-area:antw;background:var(--field);border-color:var(--field);color:var(--on-field)}
.ap-antworten .ap-karte-titel{color:var(--on-field)}
.ap-antworten .ap-eck{border-color:color-mix(in srgb,var(--surface) 35%,transparent);color:var(--on-field)}
.ap-antworten-zahlen{display:flex;gap:22px;margin-top:18px}
.ap-antworten-zahlen p{margin:0}
.ap-antworten-zahlen strong{display:block;font-family:var(--font-display);font-weight:300;font-size:2.25rem;line-height:1;letter-spacing:-.03em}
.ap-antworten-zahlen span{display:block;margin-top:6px;font-size:.75rem;color:var(--on-field-2)}
.ap-legende{list-style:none;display:flex;gap:12px;margin:18px 0 0;padding:0;font-size:.75rem;color:var(--on-field-3)}
.ap-legende li{display:flex;align-items:center;gap:5px}
.ap-legende li::before{content:"";width:6px;height:6px;border-radius:50%;background:color-mix(in srgb,var(--surface) 40%,transparent)}
.ap-legende .ist-an{color:var(--on-field)}
.ap-legende .ist-an::before{background:var(--on-field)}

/* ── Cursor "Du" und "KI" ──────────────────────────────────────────────── */
.hs-cursor{position:absolute;z-index:4;display:none;align-items:flex-start;gap:2px;pointer-events:none}
.hs-cursor svg{width:16px;height:16px;fill:var(--hs-c);stroke:var(--surface);stroke-width:1.2;stroke-linejoin:round;filter:drop-shadow(0 1px 1px color-mix(in srgb,var(--text-1) 25%,transparent))}
.hs-cursor b{margin-top:12px;padding:3px 9px;border-radius:999px;background:var(--hs-c);color:var(--hs-c-ink);font-size:.75rem;font-weight:700;line-height:1.2;box-shadow:0 2px 6px -2px color-mix(in srgb,var(--text-1) 35%,transparent)}
.hs-cursor--du{--hs-c:var(--accent);--hs-c-ink:var(--on-accent);left:62%;top:62%}
.hs-cursor--ki{--hs-c:var(--accent-2);--hs-c-ink:var(--on-accent-2);left:62%;top:44%}

/* ── Panel der Suche mit KI-Assistent ──────────────────────────────────── */
/* Ohne Buehne steht das Panel als Karte unter den Karten (Sprungziel
   #beispiel); auf der Buehne klappt es unter der Kopfleiste auf. */
.ap-panel{grid-area:panel;box-sizing:border-box;padding:16px 18px 18px;border-radius:22px;background:var(--surface);box-shadow:var(--ap-auflage)}
.ap-panel-tabs{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--surface-2);font-size:.8125rem;color:var(--text-2)}
.ap-panel-tabs>*{padding:6px 14px;border-radius:999px}
.ap-panel-tabs b{background:var(--accent-2);color:var(--on-accent-2);font-weight:600}
.ap-panel-hinweis{margin:12px 0 0;padding:8px 12px;border-radius:12px;background:var(--accent-2-dim);color:var(--accent-2-strong);font-size:.75rem;line-height:1.45}
.ap-panel-frage{width:fit-content;max-width:80%;margin:12px 0 0 auto;padding:8px 14px;border-radius:16px 16px 4px 16px;background:var(--surface-2);font-size:.8125rem}
.ap-panel-antwort{margin-top:12px}
.ap-panel-titel{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:.875rem;font-weight:600}
.ap-panel-titel em{margin-left:auto;font-style:normal;padding:3px 10px;border-radius:999px;background:var(--accent-dim);color:var(--accent-strong);font-size:.75rem;font-weight:600;white-space:nowrap}
.ap-ki-symbol{display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:var(--accent-2);color:var(--on-accent-2)}
.ap-ki-symbol svg{width:15px;height:15px;fill:currentColor}
.ap-panel-spalten{display:grid;grid-template-columns:1.1fr 1fr;gap:22px}
.ap-label{margin:12px 0 7px;font-size:.75rem;color:var(--text-2)}
.ap-label:first-child{margin-top:0}
.ap-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0}
.ap-chips li{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:999px;background:var(--accent-dim);color:var(--accent-strong);font-size:.75rem;font-weight:500}
.ap-chips--ki li{background:var(--accent-2-dim);color:var(--accent-2-strong)}
.ap-abdeckung{display:flex;justify-content:space-between;gap:12px;margin:0;font-size:.75rem;color:var(--text-2)}
.ap-abdeckung strong{color:var(--text-1);font-variant-numeric:tabular-nums}
.ap-abdeckung-balken{display:flex;height:8px;margin:8px 0 12px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.ap-abdeckung-balken i{display:block;height:100%}
.ap-abdeckung-balken i:first-child{width:40%;background:var(--accent)}
.ap-abdeckung-balken i:last-child{width:calc(var(--b,1) * 40%);background:var(--accent-2)}
.ap-panel-text{margin:0;font-size:.8125rem;line-height:1.55}
.ap-gehalt{display:flex;justify-content:space-between;gap:12px;margin:10px 0 0;padding-top:10px;border-top:1px dotted var(--line-strong);font-size:.75rem;color:var(--text-2)}
.ap-gehalt strong{color:var(--text-1);font-weight:600}
.ap-panel-eingabe{display:flex;align-items:center;gap:10px;margin-top:14px;height:42px;padding:0 6px 0 14px;border-radius:14px;border:1px solid var(--accent-2-line);background:var(--surface);font-size:.8125rem;color:var(--text-1)}
.ap-panel-eingabe .hs-tipp{flex:1}
.ap-senden{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--surface-2);color:var(--text-2)}
.ap-senden svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ap-panel.ist-bereit .ap-senden{background:var(--accent-2);color:var(--on-accent-2)}

/* ── Abschluss mit Knopf ───────────────────────────────────────────────
   Ohne Buehne: Zeile unter der App. Auf der Buehne: schwebende Leiste am
   unteren Rand, erscheint nach der Antwort der KI (--z, lp-hero.js). */
.hs-abschluss{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 20px;max-width:760px;margin:28px auto 0;text-align:center}
.hs-abschluss p{margin:0;max-width:46ch;color:var(--text-2);font-size:var(--fs-sm,.9375rem);line-height:1.5;text-wrap:balance}
.hs-abschluss .pill{flex:none}
/* Fuehrungszeile (seit 2026-10-09, Critique Schritt 4): nur auf der Buehne */
.hs-fuehrung{display:none}
.hs-ueberspringen{display:none}

/* ── Schmal ────────────────────────────────────────────────────────────── */
@media (max-width:1023px){
  .hs-raster{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"kopf kopf" "bew bew" "panel panel"}
  /* Ohne Buehne nur Kopfleiste, Tabelle und Panel (Critique 2026-10-09:
     vorher 2838px Mockup am Handy) */
  .ap-seitenkopf,.ap-pipeline,.ap-woche,.ap-antworten{display:none}
  .ap-nav{display:none}
  .ap-seitenkopf{flex-wrap:wrap;padding:6px 8px 0}
  .ap-zahlen{width:100%;margin-left:0}
  .ap-pipeline{width:auto;padding:0 8px}
}
@media (max-width:640px){
  .hs{--ap-pad:12px;--ap-such-w:176px;--ap-rechts:calc(var(--ap-pad) + 8px + 36px + 8px)}
  .ap-nutzer,.ap-marke>span,.ap-knopf,.ap-segment{display:none}
  .hs-raster{grid-template-columns:minmax(0,1fr);grid-template-areas:"panel";gap:14px;padding-top:14px}
  /* Am Handy nur das Panel: Fensterleiste, Kopfleiste und Suchpille tragen
     dort keinen Inhalt (Critique 2026-10-09) */
  .ap-bewerbungen,.hs-fensterleiste,.ap-kopf,.ap-suche{display:none}
  .ap-panel-spalten{grid-template-columns:minmax(0,1fr)}
  /* Mobiler Hero kuerzer (Critique 2026-10-09, Variante B, 1711 auf 1331px
     bei 375x812): ohne Fensterrahmen, Reiter und Eingabefeld, Symbol neben
     dem Stellentitel; ohne Schluesselbegriffe und Abdeckungsbalken. Es
     bleiben Frage, Stelle, Passung, Luecken, Zuschnitt und Marktspanne. */
  .hs-app{margin-top:28px}
  .hs-chrome{display:none}
  .hs-raster{padding:0;gap:0}
  .ap-panel{box-shadow:var(--shadow-card);padding:16px}
  .ap-panel-tabs,.ap-panel-eingabe{display:none}
  .ap-begriffe,.ap-abdeckung,.ap-abdeckung-balken{display:none}
  .ap-panel-titel{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:10px;align-items:start}
  .ap-panel-titel em{grid-column:2;justify-self:start;margin:6px 0 0}
  .hs-hinweis{margin-top:10px}
  .hs-abschluss{margin-top:20px;gap:10px}
  .ap-start{font-size:2.5rem}
  .ap-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .ap-zahlen strong{font-size:2rem}
  .ap-tabelle th:nth-child(2),.ap-tabelle td:nth-child(2),.ap-match{display:none}
  .ap-tabelle td,.ap-tabelle th{padding-left:4px;padding-right:4px}
  .ap-tabelle td:first-child{white-space:normal}
}

/* ── Buehne (nur mit lp-hero.js, ab 1024px, ohne Reduced Motion) ───────
   Nur am Bildschirm: gedruckt steht der Hero flach (Audit 2026-10-09). */
@media screen and (prefers-reduced-motion:no-preference){
  .stage-on .stage{height:240vh}
  .stage-on .hs-buehne{position:sticky;top:0;height:100vh;overflow:clip;box-sizing:border-box;padding:calc(var(--kopf-h) + 5vh) var(--gutter,24px) 0}
  /* Foto auf der Buehne: eine Fensterhoehe minus Kopfzeile, tritt zurueck,
     sobald die App steht */
  .stage-on .hs-buehne::before{height:min(100vh - var(--kopf-h),62vw);
    opacity:calc(1 - clamp(0, calc((var(--p,0) - .12) / .3), 1) * .45)}
  .stage-on .hero-bild-hinweis{position:absolute;z-index:2;right:max(var(--gutter,24px),calc(50% - var(--wrap-max,1200px) / 2));top:calc(var(--kopf-h) + 16px);margin:0;text-align:right}

  /* Text: gleitet hoch, wird kleiner, blendet bis p .26 aus */
  .stage-on .stage-copy{
    --a:clamp(0, calc(var(--p,0) / .18), 1);
    transform:translateY(calc(var(--a) * -14vh)) scale(calc(1 - var(--a) * .08));
    opacity:calc(1 - var(--a));transform-origin:center top}
  /* Ab halber Ausblendung keine Klicks mehr (lp-hero.js setzt .ist-weg) */
  .stage-on .stage-copy.ist-weg{pointer-events:none}
  .stage-on .stage-copy:focus-within{opacity:1;transform:none;pointer-events:auto}

  /* App: Oberkante 44px unter der Kopfzeile, darueber steht der Bildhinweis;
     sie ragt unten aus dem Bild */
  .stage-on .hs-app{position:absolute;left:0;right:0;top:calc(var(--kopf-h) + 44px);margin:0 auto}
  /* Hinweis "Beispielansicht mit erfundenen Daten." rechts in der
     Fensterleiste; am Anfang steht er so direkt unter dem Bildhinweis */
  .stage-on .hs-hinweis{position:absolute;z-index:2;top:9px;right:16px;margin:0;text-align:right;line-height:1.3}
  .stage-on .hs-chrome{
    --c:clamp(0, calc((var(--p,0) - .14) / .28), 1);
    opacity:var(--c);transform:translateY(calc((1 - var(--c)) * 80px)) scale(calc(.96 + var(--c) * .04));transform-origin:center top}
  .stage-on .hs-still{
    --s:clamp(0, calc((var(--p,0) - .26) / .16), 1);
    opacity:var(--s);transform:translateY(calc((1 - var(--s)) * 16px))}

  .stage-on .hs-abschluss{position:absolute;z-index:7;left:0;right:0;bottom:28px;width:fit-content;max-width:calc(100% - 2 * var(--gutter,24px));margin:0 auto;
    padding:10px 10px 10px 24px;border-radius:999px;background:var(--surface);box-shadow:var(--ap-schwebe);flex-wrap:nowrap;text-align:left;
    opacity:var(--z,0);transform:translateY(calc((1 - var(--z,0)) * 28px));pointer-events:none}
  .stage-on .hs-abschluss.ist-da,.stage-on .hs-abschluss:focus-within{pointer-events:auto}
  .stage-on .hs-abschluss:focus-within{opacity:1;transform:none}
  .stage-on .hs-abschluss p{max-width:none;white-space:nowrap}
  /* Link "Weiter zur Seite" (seit 2026-10-09 spaet): rechts unten auf
     Hoehe der Fuehrungszeile, an der rechten Kante des Inhalts. Er geht,
     sobald die Abschlusszeile mit dem Knopf zur Warteliste steht. */
  .stage-on .hs-ueberspringen{display:inline-flex;align-items:center;gap:8px;position:absolute;z-index:7;
    right:max(var(--gutter,24px),calc(50% - var(--wrap-max,1200px) / 2));bottom:34px;min-height:44px;box-sizing:border-box;padding:0 18px;
    border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--text-1);
    font-size:var(--fs-sm,.9375rem);font-weight:var(--fw-semibold);line-height:1;text-decoration:none;
    transition:opacity .25s ease,border-color .2s ease,color .2s ease}
  .stage-on .hs-ueberspringen:hover{border-color:var(--accent);color:var(--accent-strong)}
  .stage-on .hs-ueberspringen:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
  .stage-on .hs:has(.hs-abschluss.ist-da) .hs-ueberspringen{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}

  /* Fuehrungszeile an der Stelle der Abschlusszeile: zwei Phasen, danach
     uebernimmt .hs-abschluss (ab p .84). Vorher stand die App nach dem
     Ausblenden der Ueberschrift rund 1000px ohne Erklaerung da. */
  .stage-on .hs-fuehrung{display:grid;position:absolute;z-index:6;left:0;right:0;bottom:34px;width:fit-content;max-width:calc(100% - 2 * var(--gutter,24px));
    margin:0 auto;pointer-events:none}
  .stage-on .hs-fuehrung p{grid-area:1/1;margin:0;padding:12px 24px;border-radius:999px;background:var(--surface);box-shadow:var(--ap-schwebe);
    font-size:var(--fs-sm,.9375rem);line-height:1.4;color:var(--text-1);white-space:nowrap;justify-self:center}
  .stage-on .hs-fuehrung p:first-child{
    --g:calc(clamp(0, calc((var(--p,0) - .24) / .06), 1) * clamp(0, calc((.46 - var(--p,0)) / .04), 1));
    opacity:var(--g);transform:translateY(calc((1 - var(--g)) * 14px))}
  .stage-on .hs-fuehrung p:last-child{
    --g:calc(clamp(0, calc((var(--p,0) - .5) / .05), 1) * clamp(0, calc((.83 - var(--p,0)) / .04), 1));
    opacity:var(--g);transform:translateY(calc((1 - var(--g)) * 14px))}

  /* Auf der Buehne liegt das Panel absolut ueber der Startseite, die
     Reihe dafuer entfaellt */
  .stage-on .hs-raster{grid-template-areas:"kopf kopf kopf" "seite seite seite" "pipe pipe pipe" "woche bew antw"}

  /* Fliegende Elemente: Transform und --f setzt das Skript */
  .stage-on [data-flug]{z-index:2;will-change:transform}

  /* Cursor kommen beim Laden einmal ins Bild (keine Schleife) */
  .stage-on .hs-cursor{display:flex;animation:hsCursorRein 1.1s cubic-bezier(.16,1,.3,1) .7s both}
  .stage-on .hs-cursor--ki{animation-delay:1s;opacity:calc(1 - var(--b,0))}
  /* Verlauf im Panel waechst, sobald die Frage abgeschickt ist */
  .stage-on .ap-panel-verlauf{max-height:calc(var(--v,0) * 480px);overflow:hidden;opacity:var(--v,0)}
  .stage-on .ap-suche{border-color:color-mix(in srgb,var(--accent-line) calc(var(--b,0) * 100%),var(--control-off))}
  .stage-on .hs-cursor--du{opacity:calc(1 - var(--b,0) * .6)}

  /* Zweite Phase: Panel klappt unter der Kopfleiste auf, die Startseite
     dahinter tritt zurueck */
  .stage-on .ap-panel{
    grid-area:auto;position:absolute;z-index:5;top:calc(34px + 16px + 52px + 8px);right:var(--ap-pad);width:min(640px,60%);box-sizing:border-box;
    padding:16px 18px 18px;border-radius:22px;background:var(--surface);box-shadow:var(--ap-schwebe);
    opacity:clamp(0, calc(var(--b,0) * 3), 1);
    clip-path:inset(0 0 calc((1 - var(--b,0)) * 100%) 0 round 22px);
    pointer-events:none}
  /* Der Inhalt erscheint erst, wenn die Flaeche fast offen ist: kein halb
     abgeschnittener Satz mehr bei p .5 (Critique 2026-10-09, Schritt 4) */
  .stage-on .ap-panel>*{opacity:clamp(0, calc((var(--b,0) - .72) / .28), 1)}
  /* Die Kennzahlen liegen unter dem Panel; sie gehen mit, statt als
     Unterzeilen ohne Zahlen stehen zu bleiben */
  .stage-on .ap-zahlen{opacity:calc(1 - clamp(0, calc(var(--b,0) * 2.5), 1))}
  /* Seit Critique 2026-10-09 (sechster Lauf) tritt die Startseite hinter dem
     Panel nicht mehr zurueck: Mit Deckkraft .55 und Saettigung .6 lag ihr
     Text bei 2,5 bis 3,5:1 und sie wirkte gesperrt; schon .82 drueckte ihn
     unter 4,5:1 (volle Farben ab 4,8:1). Das Panel hebt sich ueber Schatten
     und Flaeche ab. */
  .stage-on .ap-seitenkopf,.stage-on .ap-pipeline{opacity:var(--s)}
}
@keyframes hsCursorRein{from{opacity:0;translate:-36px 26px}to{opacity:1;translate:0 0}}

/* Unterer Rand laeuft in den Seitenverlauf aus. Seit Critique 2026-10-09
   (dritter Lauf) so hoch wie der Abstand unten in .hs-buehne: mit 12vh lag
   der Verlauf unter 1024px und bei Reduced Motion ueber dem Knopf am Ende
   des Hero, die untere Haelfte wirkte deaktiviert. .hs-buehne bildet eine
   eigene Ebene (isolation), ein z-index am Knopf haette nicht gereicht. */
.stage::after{content:"";position:absolute;inset:auto 0 0;height:clamp(48px,7vh,80px);background:linear-gradient(to bottom,transparent,var(--bg));pointer-events:none}
.stage-on .stage::after{display:none}

/* ── Definition nach dem Hero (#was-ist-das) ────────────────────────────
   Seit Critique 2026-10-09 (vierter Lauf, Entwurf A) ein Steckbrief: die
   Frage links in --fs-h1, rechts Definition und Quellen-Satz (vorher
   eigenes Band). Die Linien oben und unten sind die des alten Bandes.
   Vorher: zentriert, h2 in 52px; nach dem Hero las sich das wie ein Tal. */
.was-ist-das{margin-top:clamp(48px,7vh,80px);padding:clamp(28px,4vh,40px) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.was-ist-das .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,72px);row-gap:12px;align-items:start}
.was-ist-das h2{grid-row:1 / span 2;margin:0;font-family:var(--font-display);font-weight:400;font-size:var(--fs-h1);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
.was-ist-das .definition{margin:0;text-wrap:pretty}
.was-ist-das .band-satz{margin:0;max-width:none;text-align:left;font-size:var(--fs-body);text-wrap:pretty}
@media (max-width:760px){.was-ist-das .wrap{grid-template-columns:minmax(0,1fr)}.was-ist-das h2{grid-row:auto}}
/* Mit Buehne endet der Hero mit harter Kante (.stage-on .stage::after ist
   aus); der Abstand darueber lag als 63 px breiter Streifen zwischen Kante
   und Linie (Critique 2026-10-09, sechster Lauf). Die Linie liegt jetzt auf der Kante. */
.stage-on .was-ist-das{margin-top:0}

/* ── Druck (Audit 2026-10-09) ─────────────────────────────────────────────
   Die Buehne gilt nur am Bildschirm. lp-hero.js setzt die Transforms der
   fliegenden Elemente aber inline; gedruckt stehen sie an ihrem Platz. */
@media print{
  [data-flug]{transform:none!important}
  .hs-cursor{display:none!important}
}