/* ============================================================
   BFSonline · Öffentliche Landing (online.bfs.at/) — Richtung C1
   Diagonale 50/50-Weiche Login ↔ Bewerben. Eigene Public-Marke
   (Gelb #FFD400 / Anthrazit #2B2E30, Archivo/Hanken). NICHT das
   interne Admin-CD. Design-Handoff: landingPage/01_landing.
   ============================================================ */
:root {
  --lp-yellow: #FFD400;
  --lp-ink: #2B2E30;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body.lp-body {
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--lp-ink); color: var(--lp-ink);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.lp-display { font-family: "Archivo", "Hanken Grotesk", sans-serif; }

.lp-stage { position: fixed; inset: 0; overflow: hidden; background: var(--lp-ink); }

/* ---- halves ---- */
.lp-half {
  position: absolute; inset: 0; display: flex; align-items: center;
  text-decoration: none; border: none; cursor: pointer; overflow: hidden;
  color: var(--lp-ink); /* Anchor-Defaultfarbe neutralisieren (kein Link-Blau/Lila) */
  transition: clip-path .45s cubic-bezier(.4,0,.2,1);
}
.lp-half--login { background: var(--lp-ink); justify-content: flex-start; padding-left: 8%;
  clip-path: polygon(0 0, 58% 0, 46% 100%, 0 100%); }
.lp-half--apply { background: var(--lp-yellow); justify-content: flex-end; padding-right: 8%;
  clip-path: polygon(58% 0, 100% 0, 100% 100%, 46% 100%); }

/* hover-grow via :has (Desktop) */
.lp-stage:has(.lp-half--login:hover) .lp-half--login { clip-path: polygon(0 0, 70% 0, 58% 100%, 0 100%); }
.lp-stage:has(.lp-half--login:hover) .lp-half--apply { clip-path: polygon(70% 0, 100% 0, 100% 100%, 58% 100%); }
.lp-stage:has(.lp-half--apply:hover) .lp-half--login { clip-path: polygon(0 0, 46% 0, 34% 100%, 0 100%); }
.lp-stage:has(.lp-half--apply:hover) .lp-half--apply { clip-path: polygon(46% 0, 100% 0, 100% 100%, 34% 100%); }

/* diagonal hatch on the dark half */
.lp-half--login::before {
  content: ""; position: absolute; inset: 0; opacity: .5;
  background-image: repeating-linear-gradient(-32deg, rgba(255,255,255,.03) 0 1px, transparent 1px 26px);
}
/* ghost number */
.lp-ghost { position: absolute; bottom: -12%; font-family: "Archivo", sans-serif; font-weight: 800;
  font-size: clamp(160px, 26vw, 320px); line-height: 1; user-select: none; pointer-events: none; }
.lp-half--login .lp-ghost { left: -6%; color: rgba(255,255,255,.03); }
.lp-half--apply .lp-ghost { right: -4%; color: rgba(43,46,48,.06); }

/* ---- half content ---- */
.lp-content { position: relative; z-index: 2; max-width: 360px; transition: transform .35s cubic-bezier(.2,.7,.3,1); }
.lp-half:hover .lp-content { transform: scale(1.04); }
.lp-ico { width: 60px; height: 60px; border: 2px solid; display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px; transition: background .3s, color .3s; }
.lp-ico svg { width: 28px; height: 28px; }
.lp-half--login .lp-ico { border-color: var(--lp-yellow); color: var(--lp-yellow); }
.lp-half--login:hover .lp-ico { background: var(--lp-yellow); color: var(--lp-ink); }
.lp-half--apply .lp-ico { border-color: var(--lp-ink); color: var(--lp-ink); }
.lp-half--apply:hover .lp-ico { background: var(--lp-ink); color: var(--lp-yellow); }

.lp-kicker { font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.lp-half--login .lp-kicker { color: var(--lp-yellow); }
.lp-half--apply .lp-kicker { color: rgba(43,46,48,.5); }
.lp-h1 { font-size: clamp(34px, 5vw, 46px); line-height: .98; margin: 0 0 16px; font-weight: 800; letter-spacing: -.015em; color: var(--lp-ink); }
.lp-half--login .lp-h1 { color: #fff; }
.lp-sub { font-size: 16px; line-height: 1.5; margin: 0 0 32px; }
.lp-half--login .lp-sub { color: rgba(255,255,255,.6); }
.lp-half--apply .lp-sub { color: rgba(43,46,48,.62); }
.lp-foot-link { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px;
  letter-spacing: .07em; text-transform: uppercase; padding-bottom: 5px; border-bottom: 2px solid; }
.lp-half--login .lp-foot-link { color: #fff; border-color: var(--lp-yellow); }
.lp-half--apply .lp-foot-link { color: var(--lp-ink); border-color: var(--lp-ink); }
.lp-foot-link svg { width: 19px; height: 19px; transition: transform .25s; }
.lp-half:hover .lp-foot-link svg { transform: translateX(6px); }

/* ---- top bar + footer (overlay) ---- */
.lp-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 28px clamp(20px,4vw,48px); z-index: 6; pointer-events: none; }
.lp-top img { height: 34px; width: auto; }
.lp-top__claim { display: flex; align-items: center; gap: 9px; color: var(--lp-ink); font-weight: 800;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; }
.lp-top__claim svg { width: 16px; height: 16px; }
.lp-footer { position: absolute; bottom: 0; left: 0; right: 0; padding: 22px clamp(20px,4vw,48px); z-index: 6;
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.55); pointer-events: none; }

/* ---- mobile: stack vertically, no diagonal ---- */
@media (max-width: 640px) {
  body.lp-body { overflow: auto; }
  .lp-stage { position: relative; min-height: 100vh; }
  .lp-half { position: relative; inset: auto; clip-path: none !important; min-height: 52vh;
    padding: 64px 28px; justify-content: flex-start; }
  .lp-half--apply { padding: 64px 28px; }
  .lp-content { max-width: none; }
  .lp-half:hover .lp-content { transform: none; }
  .lp-top__claim { display: none; }
  .lp-footer { position: relative; color: rgba(255,255,255,.55); background: var(--lp-ink); }
}