// Quick City — Home pages (IFM + LNS) — Legacy-Look mit Hero, Stats, Leistungen, Zertifikate, Über-Uns, Prozess

/* ─────────────────────────────────────────
   Shared bits for both home pages
───────────────────────────────────────── */

function HomeStyles() {
  // Inject home-specific CSS once
  React.useEffect(() => {
    if (document.getElementById('home-page-styles')) return;
    const s = document.createElement('style');
    s.id = 'home-page-styles';
    s.textContent = `
      .hh { margin-top: 68px; position: relative; height: calc(100vh - 68px); min-height: 560px; overflow: hidden; background: #1a1a1a; }
      .hh__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
      .hh--ifm .hh__img { object-position: center right; }
      .hh--lns .hh__img { object-position: center; }
      /* Dark gradient overlay for hero text readability */
      .hh::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
        background: linear-gradient(135deg, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 45%, rgba(0,0,0,0.22) 100%); }
      .hh--lns::before { background: linear-gradient(180deg, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.12) 35%, rgba(0,0,0,0.28) 100%); }
      .hh__shape { position: absolute; inset: 0; pointer-events: none; }
      .hh__shape svg { width: 100%; height: 100%; position: absolute; inset: 0; }
      .hh__content { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; color: #fff; max-width: 460px; padding: 0 24px; }
      .hh--ifm .hh__content { left: 6%; }
      .hh--lns .hh__content { right: 6%; text-align: right; }
      .hh__eyebrow { font-size: 11px; font-weight: 400; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.92; margin-bottom: 16px; }
      .hh__title { font-size: clamp(36px, 5vw, 68px); font-weight: 900; line-height: 1.0; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 22px; }
      .hh__sub { font-size: 16px; font-weight: 300; line-height: 1.7; opacity: 0.92; margin-bottom: 32px; }
      .hh__cta { display: inline-flex; align-items: center; gap: 12px; background: #fff; color: var(--accent); font-family: inherit; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; padding: 14px 28px; text-decoration: none; transition: background .2s, color .2s; border: none; cursor: pointer; }
      .hh__cta:hover { background: var(--accent); color: #fff; }

      /* Section primitives shared by home */
      .hsec { padding: 96px 0; }
      .hsec--alt { background: #f5f5f5; }
      .hsec--dark { background: #1a1a1a; color: #fff; }
      .hsec--light { background: #fafafa; }
      .hsec__label { font-size: 10px; font-weight: 700; letter-spacing: 0.35em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
      .hsec__label::before { content: ''; display: block; width: 32px; height: 2px; background: var(--accent); flex-shrink: 0; }
      .hsec__title { font-size: clamp(28px, 3.5vw, 46px); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: -0.01em; margin-bottom: 24px; }
      .hsec--dark .hsec__title { color: #fff; }
      .hsec__text { font-size: 16px; font-weight: 300; line-height: 1.8; color: #555; max-width: 620px; }
      .hsec--dark .hsec__text { color: rgba(255,255,255,0.7); }

      /* Two-column with stats */
      .hpartner { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
      @media (max-width: 900px) { .hpartner { grid-template-columns: 1fr; gap: 48px; } }
      .hpartner__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 40px; }
      .hstat { border-left: 3px solid var(--accent); padding-left: 18px; }
      .hstat__num { font-size: 42px; font-weight: 900; color: var(--accent); line-height: 1; letter-spacing: -0.02em; }
      .hstat__label { font-size: 11px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: #444; margin-top: 6px; line-height: 1.4; }
      .hpartner__img-wrap { position: relative; aspect-ratio: 4/3; overflow: hidden; }
      .hpartner__img-wrap--ifm::before { content:''; position: absolute; top: -20px; right: -20px; width: 60%; height: 60%; background: var(--accent); opacity: 0.12; z-index: 0; }
      .hpartner__img-wrap--lns::before { content:''; position: absolute; top: -20px; left: -20px; width: 60%; height: 60%; background: var(--accent); opacity: 0.12; z-index: 0; }
      .hpartner__img { position: relative; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

      /* Service grid (5 cols) */
      .hsvc-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; }
      .hsvc-grid--4 { grid-template-columns: repeat(4, 1fr); max-width: 1000px; margin: 0 auto; }
      @media (max-width: 1100px) { .hsvc-grid { grid-template-columns: repeat(3, 1fr); } .hsvc-grid--4 { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 700px) { .hsvc-grid { grid-template-columns: 1fr 1fr; } .hsvc-grid--4 { grid-template-columns: 1fr; } }
      .hsvc { background: #fff; padding: 36px 28px; position: relative; overflow: hidden; transition: transform .25s, box-shadow .25s; cursor: pointer; text-decoration: none; color: inherit; display: block; }
      .hsvc::before { content:''; position: absolute; bottom: 0; left: 0; right: 0; height: 4px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.77,0,.175,1); }
      .hsvc:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }
      .hsvc:hover::before { transform: scaleX(1); }
      .hsvc__icon { width: 64px; height: 64px; margin-bottom: 20px; object-fit: contain; display: block; }
      .hsvc__title { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 12px; }
      .hsvc__text { font-size: 13px; font-weight: 300; line-height: 1.7; color: #666; }
      .hsvc__link { display: inline-flex; align-items: center; gap: 6px; margin-top: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); }

      /* LNS service cards (6-grid) — bigger, with item list */
      .hsvc-grid--lns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
      @media (max-width: 1100px) { .hsvc-grid--lns { grid-template-columns: repeat(2, 1fr); } }
      @media (max-width: 700px) { .hsvc-grid--lns { grid-template-columns: 1fr; } }
      .hsvc--lns { display: flex; flex-direction: column; padding: 36px 32px 32px; min-height: 320px; }
      .hsvc__num { position: absolute; top: 24px; right: 28px; font-size: 12px; font-weight: 800; letter-spacing: 0.15em; color: rgba(0,0,0,0.18); font-variant-numeric: tabular-nums; }
      .hsvc__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
      .hsvc__icon-box { flex-shrink: 0; width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: #f5f5f5; transition: background 0.25s; }
      .hsvc:hover .hsvc__icon-box { background: var(--accent); }
      .hsvc:hover .hsvc__icon-box img { filter: brightness(0) invert(1); }
      .hsvc:hover .hsvc__icon-box svg { color: #fff; }
      .hsvc__icon-box img, .hsvc__icon-box svg { width: 32px; height: 32px; object-fit: contain; transition: filter 0.25s; }
      .hsvc__head-text { flex: 1; min-width: 0; padding-top: 4px; }
      .hsvc--lns .hsvc__title { font-size: 17px; letter-spacing: 0.02em; text-transform: none; line-height: 1.25; margin-bottom: 6px; }
      .hsvc--lns .hsvc__text { font-size: 13px; line-height: 1.65; color: #555; margin-bottom: 16px; }
      .hsvc__items { font-size: 11.5px; line-height: 1.75; color: #888; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.08); margin-bottom: 16px; flex: 1; letter-spacing: 0.01em; }
      .hsvc--lns .hsvc__link { margin-top: 0; padding-top: 4px; }

      /* Emergency service highlight — full-width red block */
      .hsvc-emergency { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0; background: #1a1a1a; color: #fff; margin-bottom: 32px; overflow: hidden; position: relative; }
      @media (max-width: 900px) { .hsvc-emergency { grid-template-columns: 1fr; } }
      .hsvc-emergency::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--accent); z-index: 2; }
      .hsvc-emergency__body { padding: 40px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; }
      @media (max-width: 900px) { .hsvc-emergency__body { padding: 32px 28px; } }
      .hsvc-emergency__badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; align-self: flex-start; margin-bottom: 18px; }
      .hsvc-emergency__badge-dot { width: 8px; height: 8px; background: #fff; border-radius: 50%; animation: hsvcPulse 1.6s ease-out infinite; }
      @keyframes hsvcPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
      .hsvc-emergency__title { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin-bottom: 14px; }
      @media (max-width: 1100px) { .hsvc-emergency__title { font-size: 26px; } }
      .hsvc-emergency__text { font-size: 15px; line-height: 1.7; color: rgba(255,255,255,0.7); max-width: 520px; margin-bottom: 20px; }
      .hsvc-emergency__items { font-size: 12px; line-height: 1.85; color: rgba(255,255,255,0.55); margin-bottom: 24px; }
      .hsvc-emergency__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; align-self: flex-start; transition: transform 0.2s, background 0.2s; }
      .hsvc-emergency__cta:hover { transform: translateX(4px); background: #b91c1c; }
      .hsvc-emergency__visual { position: relative; background: linear-gradient(135deg, #2a0a0a 0%, #1a1a1a 100%); display: flex; align-items: center; justify-content: center; min-height: 260px; overflow: hidden; }
      .hsvc-emergency__visual-stat { text-align: center; color: #fff; position: relative; z-index: 2; }
      .hsvc-emergency__visual-num { font-size: 120px; font-weight: 900; line-height: 0.85; letter-spacing: -0.04em; color: #fff; font-variant-numeric: tabular-nums; }
      @media (max-width: 1100px) { .hsvc-emergency__visual-num { font-size: 88px; } }
      .hsvc-emergency__visual-lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: 12px; }
      .hsvc-emergency__visual::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(220,38,38,0.25) 0%, transparent 60%); pointer-events: none; }
      .hsvc-emergency__visual::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; opacity: 0.5; }

      /* Values block (Über-Uns) */
      .hvals { display: flex; flex-direction: column; gap: 24px; margin-top: 36px; }
      .hval { display: flex; gap: 20px; align-items: flex-start; }
      .hval__num { font-size: 36px; font-weight: 900; color: var(--accent); line-height: 1; flex-shrink: 0; width: 48px; }
      .hval__title { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
      .hval__text { font-size: 13px; font-weight: 300; line-height: 1.7; color: rgba(255,255,255,0.6); }
      .hueber__img-wrap { aspect-ratio: 3/4; overflow: hidden; position: relative; }
      .hueber__img { width: 100%; height: 100%; object-fit: cover; }
      .hueber__placeholder { width: 100%; height: 100%; background: repeating-linear-gradient(-45deg, #2a2a2a 0px, #2a2a2a 1px, #222 1px, #222 10px); display: flex; align-items: center; justify-content: center; font-size: 11px; letter-spacing: 0.15em; color: #555; text-transform: uppercase; }
      .hueber__accent { position: absolute; bottom: -24px; width: 120px; height: 120px; background: var(--accent); z-index: 0; }
      .hueber__accent--right { right: -24px; }
      .hueber__accent--left { left: -24px; }

      /* Process steps */
      .hsteps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 56px; }
      @media (max-width: 800px) { .hsteps { grid-template-columns: 1fr; } }
      .hstep { position: relative; padding-top: 20px; }
      .hstep::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #e8e8e8; }
      .hstep::after  { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--accent); }
      .hstep__num { font-size: 52px; font-weight: 900; color: #efefef; line-height: 1; margin-bottom: 12px; letter-spacing: -0.03em; }
      .hstep__title { font-size: 14px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; }
      .hstep__text { font-size: 13px; font-weight: 300; line-height: 1.8; color: #666; }

      /* Projects grid (LNS) */
      .hprojekte { display: grid; grid-template-columns: 2fr 1fr; gap: 4px; margin-top: 48px; }
      @media (max-width: 800px) { .hprojekte { grid-template-columns: 1fr; } }
      .hprojekte__main { aspect-ratio: 16/9; overflow: hidden; }
      .hprojekte__main img, .hprojekte__side img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .hprojekte__side { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; }
      .hprojekte__side > div { overflow: hidden; }

      /* Cert cards (legacy, kept for fallback) */
      .hcerts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; max-width: 760px; align-items: start; }
      @media (max-width: 700px) { .hcerts { grid-template-columns: 1fr; } }
      .hcert { background: #fff; padding: 20px; border: 1px solid #e8e8e8; }
      .hcert img { width: 100%; height: auto; display: block; }
      .hcert__label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-top: 14px; }
      .hcert__desc { font-size: 13px; color: #666; margin-top: 6px; line-height: 1.6; }

      /* ───────── NEW: Editorial certificate section (light, minimalist) ───────── */
      .hzert { position: relative; background: #f5f4f0; color: #1a1a1a; padding: 96px 0; overflow: hidden; }
      .hzert::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.04) 1px, transparent 1px); background-size: 32px 32px; pointer-events: none; opacity: 0.5; }
      .hzert__accent-line { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.7; }
      .hzert .container { position: relative; z-index: 1; }
      .hzert__head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
      .hzert__label { display: inline-flex; align-items: center; gap: 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--accent); margin-bottom: 20px; }
      .hzert__label::before, .hzert__label::after { content: ''; display: block; width: 32px; height: 2px; background: var(--accent); }
      .hzert__title { font-size: clamp(32px, 4.4vw, 56px); font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: #1a1a1a; }
      .hzert__title em { font-style: normal; color: var(--accent); }

      .hzert__seals { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 920px; margin: 0 auto; }
      .hzert__seals--single { max-width: 320px; }
      .hzert__seal-card { position: relative; padding: 28px 28px 24px; border: 1px solid rgba(0,0,0,0.1); background: #fff; text-align: center; transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; gap: 16px; }
      .hzert__seal-card:hover { border-color: var(--accent); transform: translateY(-3px); box-shadow: 0 18px 40px rgba(0,0,0,0.08); }
      .hzert__seal-img-wrap { width: 100%; aspect-ratio: 1; background: #fafafa; border: 1px solid rgba(0,0,0,0.06); display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
      .hzert__seal-img { width: 100%; height: 100%; object-fit: contain; display: block; }
      .hzert__seal-name { font-size: 14.5px; font-weight: 700; color: #1a1a1a; letter-spacing: 0.01em; line-height: 1.3; }
      .hzert__seal-year { font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #888; }

      .hzert__more { text-align: center; margin-top: 48px; }
      .hzert__cta { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border: 1.5px solid #1a1a1a; color: #1a1a1a; font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; }
      .hzert__cta:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

      /* Reach quotes (LNS) */
      .hreach { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
      @media (max-width: 900px) { .hreach { grid-template-columns: 1fr; } }
      /* Vertical variant: heading row on top, full-width map+legend below */
      .hreach--vertical { display: block; }
      .hreach__head { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: end; margin-bottom: 56px; }
      @media (max-width: 900px) { .hreach__head { grid-template-columns: 1fr; gap: 32px; margin-bottom: 40px; } }
      .hreach__map { width: 100%; }
      .hreach__quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
      .hreach__quote { border: 1px solid rgba(255,255,255,0.12); padding: 24px; }
      .hreach__quote-mark { font-size: 34px; color: var(--accent); font-weight: 900; line-height: 1; }
      .hreach__quote-text { font-size: 14px; font-weight: 400; line-height: 1.6; color: rgba(255,255,255,0.85); margin-top: 8px; }
      .hreach__boxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 40px; }
      .hreach__box { border-left: 3px solid var(--accent); padding-left: 18px; }
      .hreach__box-label { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 6px; }
      .hreach__box-value { font-size: 18px; font-weight: 700; color: #fff; }

      /* Section CTA — "Mehr erfahren" link with arrow, used on home sections */
      .hsec__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 32px; padding: 14px 22px; border: 1px solid currentColor; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, color 0.2s; }
      .hsec__cta:hover { background: var(--accent); color: #fff; }
      .hsec__cta svg { transition: transform 0.2s; }
      .hsec__cta:hover svg { transform: translateX(3px); }
      .hsec__cta--ondark { color: #fff; border-color: rgba(255,255,255,0.4); }
      .hsec__cta--ondark:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

      /* Reach Index — Städte-Liste als Station-Index */
      .hreach-idx { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); padding: 36px 36px 28px; position: relative; }
      @media (max-width: 900px) { .hreach-idx { padding: 28px 24px 20px; margin-top: 40px; } }
      .hreach-idx__num { font-size: 96px; font-weight: 900; line-height: 0.9; color: #fff; letter-spacing: -0.04em; margin-bottom: 4px; }
      .hreach-idx__num-plus { color: var(--accent); }
      .hreach-idx__num-cap { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.5); font-weight: 700; margin-bottom: 28px; }
      .hreach-idx__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255,255,255,0.1); }
      .hreach-idx__row { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
      .hreach-idx__row--hub { grid-template-columns: 28px 1fr auto; padding: 14px 0; border-bottom: 1px solid var(--accent); }
      .hreach-idx__row--hub::before { content: ''; position: absolute; left: 0; width: 4px; height: 36px; background: var(--accent); margin-left: -36px; }
      .hreach-idx__idx { font-size: 11px; font-weight: 700; color: rgba(255,255,255,0.35); letter-spacing: 0.05em; font-variant-numeric: tabular-nums; }
      .hreach-idx__row--hub .hreach-idx__idx { color: var(--accent); }
      .hreach-idx__city { font-size: 16px; font-weight: 600; color: #fff; }
      .hreach-idx__row--hub .hreach-idx__city { font-size: 18px; font-weight: 800; }
      .hreach-idx__state { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.45); font-weight: 600; }
      .hreach-idx__row--hub .hreach-idx__state { color: var(--accent); font-weight: 700; }
      .hreach-idx__more { display: flex; align-items: center; gap: 10px; padding-top: 18px; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.55); font-weight: 700; }
      .hreach-idx__more-line { flex: 1; height: 1px; background: rgba(255,255,255,0.15); }

      /* Projects Slideshow — "Editorial Stack" wow design */
      .hpsl { position: relative; min-height: 640px; }
      @media (max-width: 900px) { .hpsl { min-height: auto; } }

      /* Massive editorial year — cuts diagonally across, brand red outline */
      .hpsl__bgyear { position: absolute; right: -24px; bottom: -64px; font-size: clamp(180px, 22vw, 320px); font-weight: 900; line-height: 0.82; letter-spacing: -0.07em; color: transparent; -webkit-text-stroke: 2px rgba(220,38,38,0.55); text-stroke: 2px rgba(220,38,38,0.55); pointer-events: none; z-index: 0; font-variant-numeric: tabular-nums; user-select: none; transition: opacity 0.5s; }
      @media (max-width: 900px) { .hpsl__bgyear { display: none; } }

      /* Diagonal accent lines — brand DNA: paths */
      .hpsl__diag { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
      .hpsl__diag::before, .hpsl__diag::after { content: ''; position: absolute; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
      .hpsl__diag::before { top: 18%; left: -10%; width: 60%; transform: rotate(-8deg); opacity: 0.4; }
      .hpsl__diag::after { bottom: 14%; right: -10%; width: 50%; transform: rotate(-8deg); opacity: 0.25; }

      /* Main grid — filmstrip-left, hero-mid, info-right */
      .hpsl__grid { position: relative; z-index: 1; display: grid; grid-template-columns: 110px minmax(0, 1.6fr) minmax(0, 1fr); gap: 0; align-items: stretch; min-height: 580px; }
      @media (max-width: 1100px) { .hpsl__grid { grid-template-columns: 88px minmax(0, 1.4fr) minmax(0, 1fr); } }
      @media (max-width: 900px) { .hpsl__grid { grid-template-columns: 1fr; min-height: auto; } }

      /* Filmstrip — vertical thumbnail navigation */
      .hpsl__strip { display: flex; flex-direction: column; gap: 10px; padding-right: 16px; }
      @media (max-width: 900px) { .hpsl__strip { flex-direction: row; padding: 0 0 16px; overflow-x: auto; } }
      .hpsl__thumb { position: relative; flex: 1; min-height: 80px; overflow: hidden; cursor: pointer; border: 0; padding: 0; background: #1a1a1a; transition: transform 0.3s; opacity: 0.45; filter: grayscale(0.6); }
      @media (max-width: 900px) { .hpsl__thumb { flex: 0 0 96px; min-height: 60px; } }
      .hpsl__thumb:hover { opacity: 0.85; filter: grayscale(0); transform: translateX(2px); }
      .hpsl__thumb.is-active { opacity: 1; filter: grayscale(0); transform: translateX(4px); }
      @media (max-width: 900px) { .hpsl__thumb.is-active, .hpsl__thumb:hover { transform: translateY(-2px); } }
      .hpsl__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
      .hpsl__thumb-num { position: absolute; left: 8px; top: 6px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.6); font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }
      .hpsl__thumb.is-active::after { content: ''; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
      @media (max-width: 900px) { .hpsl__thumb.is-active::after { right: 0; left: 0; top: auto; bottom: 0; height: 3px; width: auto; } }

      /* Hero stage — sliding image carousel */
      .hpsl__stage { position: relative; overflow: hidden; background: #0a0a0a; min-height: 580px; }
      @media (max-width: 900px) { .hpsl__stage { min-height: 320px; } }
      .hpsl__stage-track { position: absolute; inset: 0; display: flex; transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1); }
      .hpsl__stage-slide { flex: 0 0 100%; position: relative; overflow: hidden; }
      .hpsl__stage-slide img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.02); transition: transform 5s ease-out; }
      .hpsl__stage-slide.is-active img { transform: scale(1.08); }
      .hpsl__stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,0.55) 100%), linear-gradient(120deg, rgba(220,38,38,0.12) 0%, transparent 50%); pointer-events: none; z-index: 2; }

      /* Floating index — XXL on the image */
      .hpsl__index { position: absolute; left: 32px; top: 28px; z-index: 3; display: flex; flex-direction: column; gap: 6px; color: #fff; }
      @media (max-width: 900px) { .hpsl__index { left: 20px; top: 18px; } }
      .hpsl__index-num { font-size: 96px; font-weight: 900; line-height: 0.85; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
      @media (max-width: 1100px) { .hpsl__index-num { font-size: 72px; } }
      .hpsl__index-row { display: flex; align-items: center; gap: 10px; }
      .hpsl__index-line { width: 32px; height: 2px; background: var(--accent); }
      .hpsl__index-tot { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); }

      /* Bottom-left big stat on image */
      .hpsl__stat { position: absolute; left: 32px; bottom: 32px; z-index: 3; color: #fff; }
      @media (max-width: 900px) { .hpsl__stat { left: 20px; bottom: 20px; } }
      .hpsl__stat-val { font-size: 56px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
      @media (max-width: 1100px) { .hpsl__stat-val { font-size: 42px; } }
      .hpsl__stat-lbl { font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 6px; }

      /* Vertical region tag — runs up the right edge of image */
      .hpsl__region { position: absolute; right: 24px; bottom: 32px; z-index: 3; color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; writing-mode: vertical-rl; transform: rotate(180deg); padding: 14px 0; border-top: 2px solid var(--accent); }

      /* Info column — clean, layered, no card */
      .hpsl__info { position: relative; padding: 12px 0 12px 48px; display: flex; flex-direction: column; }
      @media (max-width: 900px) { .hpsl__info { padding: 28px 0 0; } }

      .hpsl__meta { display: flex; gap: 14px; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
      .hpsl__meta-dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(0,0,0,0.25); }
      .hpsl__title { font-size: 36px; font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; margin-bottom: 28px; min-height: 110px; color: #1a1a1a; }
      @media (max-width: 1300px) { .hpsl__title { font-size: 30px; min-height: 96px; } }
      @media (max-width: 1100px) { .hpsl__title { font-size: 26px; min-height: 80px; } }

      .hpsl__client-row { display: flex; align-items: flex-start; gap: 14px; padding: 18px 0; border-top: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); margin-bottom: 24px; }
      .hpsl__client-icon { width: 32px; height: 32px; flex-shrink: 0; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; }
      .hpsl__client-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
      .hpsl__client-label { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #999; font-weight: 700; }
      .hpsl__client-name { font-size: 16px; font-weight: 700; color: #1a1a1a; }

      /* Service bullet list — vertical stack */
      .hpsl__svc { list-style: none; padding: 0; margin: 0 0 36px; display: flex; flex-direction: column; gap: 0; }
      .hpsl__svc-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: #1a1a1a; border-bottom: 1px solid rgba(0,0,0,0.08); }
      .hpsl__svc-item:last-child { border-bottom: 0; }
      .hpsl__svc-bullet { width: 6px; height: 6px; background: var(--accent); flex-shrink: 0; transform: rotate(45deg); }

      /* Animate body content on slide change */
      .hpsl__info--anim .hpsl__meta,
      .hpsl__info--anim .hpsl__title,
      .hpsl__info--anim .hpsl__client-row,
      .hpsl__info--anim .hpsl__svc-item,
      .hpsl__info--anim .hpsl__stat { animation: hpslIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
      .hpsl__info--anim .hpsl__title { animation-delay: 0.06s; }
      .hpsl__info--anim .hpsl__client-row { animation-delay: 0.12s; }
      .hpsl__info--anim .hpsl__svc-item:nth-child(1) { animation-delay: 0.18s; }
      .hpsl__info--anim .hpsl__svc-item:nth-child(2) { animation-delay: 0.22s; }
      .hpsl__info--anim .hpsl__svc-item:nth-child(3) { animation-delay: 0.26s; }
      .hpsl__info--anim .hpsl__svc-item:nth-child(4) { animation-delay: 0.30s; }
      .hpsl__info--anim .hpsl__svc-item:nth-child(5) { animation-delay: 0.34s; }
      @keyframes hpslIn { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
      @keyframes hpslStat { 0% { opacity: 0; transform: translateY(20px) scale(0.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
      .hpsl__stage-slide.is-active .hpsl__stat { animation: hpslStat 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s both; }
      .hpsl__stage-slide.is-active .hpsl__index { animation: hpslIn 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both; }

      /* Nav bar */
      .hpsl__nav { margin-top: auto; padding-top: 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
      .hpsl__nav-meta { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #999; font-variant-numeric: tabular-nums; }
      .hpsl__nav-meta b { color: #1a1a1a; font-weight: 800; }
      .hpsl__arrows { display: flex; gap: 8px; flex-shrink: 0; }
      .hpsl__arrow { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; border: 1.5px solid rgba(0,0,0,0.15); background: transparent; color: #1a1a1a; cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.25s; }
      .hpsl__arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(3px); }
      .hpsl__arrow:first-child:hover { transform: translateX(-3px); }

      /* Override .page > .hero:first-child padding-top reset for our custom hero */
      .page > .hh:first-child { padding-top: 0; margin-top: 0; height: 100vh; }

      /* Reach Hub — Bernau koordiniert 20+ Städte */
      .hreach__hub { position: relative; width: 100%; max-width: 480px; aspect-ratio: 1; margin: 0 auto; }
      @media (max-width: 900px) { .hreach__hub { max-width: 360px; margin-top: 40px; } }
      .hreach__hub-pin { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: var(--accent); border-radius: 50%; z-index: 4; box-shadow: 0 0 0 6px rgba(220,38,38,0.25), 0 0 0 14px rgba(220,38,38,0.1); }
      .hreach__hub-pin::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid var(--accent); animation: hreachpulse 2.6s ease-out infinite; }
      @keyframes hreachpulse { 0% { transform: scale(0.5); opacity: 1; } 100% { transform: scale(3.5); opacity: 0; } }
      .hreach__hub-rings { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
      .hreach__hub-rings span { position: absolute; border: 1px dashed rgba(255,255,255,0.12); border-radius: 50%; }
      .hreach__hub-rings span:nth-child(1) { width: 35%; height: 35%; }
      .hreach__hub-rings span:nth-child(2) { width: 65%; height: 65%; }
      .hreach__hub-rings span:nth-child(3) { width: 95%; height: 95%; border-style: solid; border-color: rgba(255,255,255,0.06); }
      .hreach__hub-spokes { position: absolute; inset: 0; pointer-events: none; }
      .hreach__hub-spokes span { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; }
      .hreach__hub-spokes span::before { content: ''; position: absolute; left: 0; top: 0; width: 45%; height: 1px; background: linear-gradient(90deg, var(--accent), rgba(220,38,38,0.05)); transform-origin: 0 0; }
      .hreach__hub-spokes span::after { content: ''; position: absolute; width: 5px; height: 5px; background: rgba(255,255,255,0.85); border-radius: 50%; box-shadow: 0 0 8px rgba(255,255,255,0.4); transform-origin: 0 0; }
      .hreach__hub-spokes span:nth-child(1)::before { transform: rotate(-67deg); width: 38%; } .hreach__hub-spokes span:nth-child(1)::after { left: calc(38% * 0.39); top: calc(38% * -0.92); }
      .hreach__hub-spokes span:nth-child(2)::before { transform: rotate(-22deg); width: 42%; } .hreach__hub-spokes span:nth-child(2)::after { left: calc(42% * 0.92); top: calc(42% * -0.37); }
      .hreach__hub-spokes span:nth-child(3)::before { transform: rotate(22deg); width: 42%; } .hreach__hub-spokes span:nth-child(3)::after { left: calc(42% * 0.92); top: calc(42% * 0.37); }
      .hreach__hub-spokes span:nth-child(4)::before { transform: rotate(67deg); width: 38%; } .hreach__hub-spokes span:nth-child(4)::after { left: calc(38% * 0.39); top: calc(38% * 0.92); }
      .hreach__hub-spokes span:nth-child(5)::before { transform: rotate(113deg); width: 38%; } .hreach__hub-spokes span:nth-child(5)::after { left: calc(38% * -0.39); top: calc(38% * 0.92); }
      .hreach__hub-spokes span:nth-child(6)::before { transform: rotate(158deg); width: 42%; } .hreach__hub-spokes span:nth-child(6)::after { left: calc(42% * -0.92); top: calc(42% * 0.37); }
      .hreach__hub-spokes span:nth-child(7)::before { transform: rotate(202deg); width: 42%; } .hreach__hub-spokes span:nth-child(7)::after { left: calc(42% * -0.92); top: calc(42% * -0.37); }
      .hreach__hub-spokes span:nth-child(8)::before { transform: rotate(247deg); width: 38%; } .hreach__hub-spokes span:nth-child(8)::after { left: calc(38% * -0.39); top: calc(38% * -0.92); }
      .hreach__hub-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 26px); text-align: center; z-index: 5; pointer-events: none; }
      .hreach__hub-label-eyebrow { font-size: 9px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 4px; }
      .hreach__hub-label-name { font-size: 14px; font-weight: 800; color: #fff; line-height: 1.15; letter-spacing: -0.005em; }
      .hreach__hub-cities { position: absolute; inset: 0; pointer-events: none; }
      .hreach__hub-cities span { position: absolute; font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap; }

      /* Kunden logos */
      .hkunden { background: #fff; padding: 88px 0 96px; border-top: 1px solid #ededed; }
      .hkunden__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: #ececec; border: 1px solid #ececec; max-width: 1180px; margin: 0 auto; }
      .hkunden__logo { background: #fff; aspect-ratio: 3/2; display: flex; align-items: center; justify-content: center; padding: 24px 28px; }
      .hkunden__logo img { max-width: 100%; max-height: 100%; object-fit: contain; filter: grayscale(1) opacity(0.55); transition: filter 0.25s; }
      .hkunden__logo:hover img { filter: grayscale(0) opacity(1); }

      .hzert__seal-img-wrap { position: relative; }
      .hzert__seal-badge { position: absolute; right: -10px; bottom: -10px; width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); }

      /* Career teaser */
      .ctease { background: #fff; padding: 96px 0; border-top: 1px solid #ededed; }
      .ctease__inner { max-width: 1280px; margin: 0 auto; position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 48px; }
      .ctease__img { min-height: 520px; background-size: cover; background-position: center; display: block; width: 100%; box-shadow: 0 20px 50px rgba(0,0,0,0.12); }
      .ctease__card { background: #fff; box-shadow: 0 30px 70px rgba(0,0,0,0.14); padding: 56px 56px 48px; margin-left: -120px; position: relative; z-index: 2; }
      .ctease__label { font-size: 11px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent); margin-bottom: 14px; }
      .ctease__title { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: #1a1a1a; margin: 0 0 14px; }
      .ctease__sub { font-size: 16px; line-height: 1.6; color: #555; margin: 0 0 32px; }
      .ctease__list { display: flex; flex-direction: column; gap: 22px; margin-bottom: 36px; }
      .ctease__item { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
      .ctease__item-icon { width: 44px; height: 44px; border-radius: 50%; background: rgba(0,0,0,0.04); display: flex; align-items: center; justify-content: center; font-size: 20px; }
      .ctease__item-h { font-size: 15.5px; font-weight: 700; color: #1a1a1a; margin-bottom: 5px; line-height: 1.3; }
      .ctease__item-t { font-size: 13.5px; line-height: 1.6; color: #666; margin: 0; }
      .ctease__btn { display: inline-block; padding: 14px 36px; border: 1.5px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, color 0.2s; }
      .ctease__btn:hover { background: var(--accent); color: #fff; }
      @media (max-width: 900px) {
        .ctease { padding-bottom: 56px; }
        .ctease__inner { grid-template-columns: 1fr; padding: 0; }
        .ctease__img { min-height: 280px; }
        .ctease__card { margin-left: 0; margin-top: -40px; margin-right: 0; padding: 36px 24px 32px; box-shadow: 0 -10px 40px rgba(0,0,0,0.1); }
      }
    `;
    document.head.appendChild(s);
  }, []);
  return null;
}

/* ─────────────────────────────────────────
   IFM Home
───────────────────────────────────────── */
function IfmHome() {
  const { t } = useT();
  return (
    <Layout brand="ifm">
      <HomeStyles />

      {/* HERO */}
      <section className="hh hh--ifm">
        <img className="hh__img" src="assets/ifm-hero-sm.jpg" alt="Quick City IFM" fetchpriority="high" decoding="async" />
        <div className="hh__content">
          <div className="hh__eyebrow">{t('ifm.hero.eyebrow')}</div>
          <div className="hh__title" dangerouslySetInnerHTML={{__html: t('ifm.hero.title', 'Wir sind<br/>die Lösung.')}} />
          <p className="hh__sub">{t('ifm.hero.sub')}</p>
          <a className="hh__cta" href="/ifm/leistungen">
            <span>{t('ifm.hero.cta')}</span>
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </a>
        </div>
      </section>

      {/* PARTNER */}
      <section className="hsec">
        <div className="container">
          <div className="hpartner">
            <div>
              <div className="hsec__label">{t('ifm.partner.label')}</div>
              <h2 className="hsec__title" dangerouslySetInnerHTML={{__html: t('ifm.partner.title')}} />
              <p className="hsec__text">{t('ifm.partner.text')}</p>
              <div className="hpartner__stats">
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value="25+" /></div><div className="hstat__label">{t('ifm.stat1')}</div></div>
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value="150" /></div><div className="hstat__label">{t('ifm.stat2')}</div></div>
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value="350+" /></div><div className="hstat__label">{t('ifm.stat3')}</div></div>
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value="750+" /></div><div className="hstat__label">{t('ifm.stat4')}</div></div>
              </div>
            </div>
            <div className="hpartner__img-wrap hpartner__img-wrap--ifm">
              <img className="hpartner__img" src="assets/ifm-bg.jpg" alt="Winterdienst" />
            </div>
          </div>
        </div>
      </section>

      {/* LEISTUNGEN */}
      <section className="hsec hsec--alt" id="leistungen">
        <div className="container">
          <div className="hsec__label">{t('ifm.services.label')}</div>
          <h2 className="hsec__title" style={{marginBottom: 56}}>{t('ifm.services.title')}</h2>
          <div className="hsvc-grid">
            <a className="hsvc" href="/ifm/winterdienst">
              <img className="hsvc__icon" src="assets/icons/ifm-winterdienst.png" alt="" />
              <div className="hsvc__title">{t('ifm.s1.title')}</div>
              <p className="hsvc__text">{t('ifm.s1.text')}</p>
              <span className="hsvc__link">{t('ifm.more')}</span>
            </a>
            <a className="hsvc" href="/ifm/garten">
              <img className="hsvc__icon" src="assets/icons/ifm-garten.png" alt="" />
              <div className="hsvc__title">{t('ifm.s2.title')}</div>
              <p className="hsvc__text">{t('ifm.s2.text')}</p>
              <span className="hsvc__link">{t('ifm.more')}</span>
            </a>
            <a className="hsvc" href="/ifm/gruen">
              <img className="hsvc__icon" src="assets/icons/ifm-gruen.png" alt="" />
              <div className="hsvc__title">{t('ifm.s3.title')}</div>
              <p className="hsvc__text">{t('ifm.s3.text')}</p>
              <span className="hsvc__link">{t('ifm.more')}</span>
            </a>
            <a className="hsvc" href="/ifm/baum">
              <img className="hsvc__icon" src="assets/icons/ifm-baum.png" alt="" />
              <div className="hsvc__title">{t('ifm.s5.title')}</div>
              <p className="hsvc__text">{t('ifm.s5.text')}</p>
              <span className="hsvc__link">{t('ifm.more')}</span>
            </a>
            <a className="hsvc" href="/ifm/reinigung">
              <img className="hsvc__icon" src="assets/icons/ifm-reinigung.png" alt="" />
              <div className="hsvc__title">{t('ifm.s4.title')}</div>
              <p className="hsvc__text">{t('ifm.s4.text')}</p>
              <span className="hsvc__link">{t('ifm.more')}</span>
            </a>
          </div>

          <div style={{textAlign:'center', marginTop: 56}}>
            <a href="/ifm/kontakt" className="hh__cta" style={{background:'var(--accent)', color:'#fff'}}>
              <span>{t('common.contact_cta')}</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>
      </section>

      {/* ÜBER UNS */}
      <section className="hsec hsec--dark">
        <div className="container">
          <div className="hpartner">
            <div>
              <div className="hsec__label">{t('ifm.about.label')}</div>
              <h2 className="hsec__title">{t('ifm.about.title')}</h2>
              <p className="hsec__text">{t('ifm.about.text')}</p>
              <div className="hvals">
                <div className="hval">
                  <div className="hval__num">01</div>
                  <div>
                    <div className="hval__title">{t('ifm.v1.title')}</div>
                    <div className="hval__text">{t('ifm.v1.text')}</div>
                  </div>
                </div>
                <div className="hval">
                  <div className="hval__num">02</div>
                  <div>
                    <div className="hval__title">{t('ifm.v2.title')}</div>
                    <div className="hval__text">{t('ifm.v2.text')}</div>
                  </div>
                </div>
                <div className="hval">
                  <div className="hval__num">03</div>
                  <div>
                    <div className="hval__title">{t('ifm.v3.title')}</div>
                    <div className="hval__text">{t('ifm.v3.text')}</div>
                  </div>
                </div>
              </div>
            </div>
            <div style={{position:'relative'}}>
              <div className="hueber__img-wrap">
                <img className="hueber__img" src="assets/ifm-truck-arocs.jpg" alt="Quick City Arocs LKW" />
              </div>
              <div className="hueber__accent hueber__accent--right"></div>
            </div>
          </div>
        </div>
      </section>

      {/* ZERTIFIKATE */}
      <section className="hzert">
        <span className="hzert__accent-line"></span>
        <div className="container">
          <div className="hzert__head">
            <div className="hzert__label">{t('common.certs.label', 'Zertifiziert')}</div>
            <h2 className="hzert__title" dangerouslySetInnerHTML={{__html: t('common.certs.title2', 'ISO-<em>geprüft.</em>')}} />
          </div>
          <div className="hzert__seals">
            <a href="/ifm/zertifikate" className="hzert__seal-card">
              <div className="hzert__seal-img-wrap">
                <img className="hzert__seal-img" src="assets/zertifikate/qc-iso-9001.jpg" alt="ISO 9001" />
                <img className="hzert__seal-badge" src="assets/zertifikate/icg-siegel.png" alt="ICG zertifiziert" />
              </div>
              <div className="hzert__seal-name">{t('certs.qm', 'Qualitätsmanagement')}</div>
              <div className="hzert__seal-year">DIN EN ISO 9001:2015</div>
            </a>
            <a href="/ifm/zertifikate" className="hzert__seal-card">
              <div className="hzert__seal-img-wrap">
                <img className="hzert__seal-img" src="assets/zertifikate/qc-iso-14001.jpg" alt="ISO 14001" />
                <img className="hzert__seal-badge" src="assets/zertifikate/icg-siegel.png" alt="ICG zertifiziert" />
              </div>
              <div className="hzert__seal-name">{t('certs.um', 'Umweltmanagement')}</div>
              <div className="hzert__seal-year">DIN EN ISO 14001:2015</div>
            </a>
          </div>
          <div className="hzert__more">
            <a href="/ifm/zertifikate" className="hzert__cta">
              <span>{t('ifm.certs.cta', 'Alle Zertifikate ansehen')}</span>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>
      </section>

      {/* PROZESS removed */}

      {/* KUNDEN */}
      <section className="hkunden">
        <div className="container">
          <div className="hzert__head">
            <div className="hzert__label">Referenzen</div>
            <h2 className="hzert__title">Vertrauen von <em>führenden Unternehmen</em> &amp; Institutionen</h2>
          </div>
          <div className="hkunden__grid">
            {[
              ['Apleona', 'Apleona.webp'], ['Deutsche Bahn', 'Deutsche_Bahn.webp'], ['BVG', 'BVG.webp'],
              ['Vonovia', 'Vonovia.webp'], ['degewo', 'degewo.webp'], ['Deutsche Wohnen', 'Deutsche_Wohnen.webp'],
              ['Deutscher Bundestag', 'Deutscher_Bundestag.webp'], ['Berliner Wasserbetriebe', 'Berliner_Wasserbetriebe.webp'],
              ['Senatsverwaltung Berlin', 'Senatsverwaltung_Berlin.webp'], ['GESOBAU', 'GESOBAU.png'],
              ['STADT UND LAND', 'STADT_UND_LAND.webp'], ['BImA', 'BImA.webp'], ['Autobahn GmbH', 'Autobahn_GmbH.webp'],
              ['Deutsche Rentenversicherung Berlin-Brandenburg', 'Deutsche_Rentenversicherung_Berlin-Brandenburg.webp']
            ].map(([name, file]) => (
              <div className="hkunden__logo" key={file} title={name}>
                <img src={`uploads/kunden_ifm/${file}`} alt={name} loading="lazy" />
              </div>
            ))}
          </div>
        </div>
      </section>

      <CareerTeaser brand="ifm" t={t} />
    </Layout>
  );
}

/* ─────────────────────────────────────────
   LNS Home
───────────────────────────────────────── */
function LnsProjectsSlideshow() {
  const { t } = useT();
  const [idx, setIdx] = React.useState(0);

  // Hand-curated home highlights — 5 LNS projects with rotating imagery + wow stats
  const slides = [
    { year: '2025', region: 'Sachsen / Lausitz', title: 'Glasfaserausbau Lausitz und Südbrandenburg', client: 'Glasfaser-Netzbetreiber', img: 'assets/lns-kabel.jpg',    services: ['Glasfaser', 'Tiefbau', 'Spleißung'], stat: { val: '2.892', unit: '', lbl: 'Hausanschlüsse' } },
    { year: '2025', region: 'Sachsen / Lausitz', title: 'Glasfaserausbau Landkreis Spree-Neiße', client: 'Glasfaser-Netzbetreiber', img: 'assets/lns-steine.jpeg',  services: ['Glasfaser', 'Tiefbau', 'Spülbohrung'], stat: { val: '432', unit: 'km', lbl: 'Trasse' } },
    { year: '2024', region: 'Sachsen-Anhalt', title: 'Glasfaserausbau Sachsen-Anhalt', client: 'Glasfaser-Netzbetreiber', img: 'assets/lns-tiefbau.jpeg', services: ['Glasfaser', 'Tiefbau', 'Spleißung'], stat: { val: '203', unit: 'km', lbl: 'Trasse' } },
    { year: '2024', region: 'Brandenburg', title: 'Strategischer Glasfaserausbau Brandenburg', client: 'Glasfaser-Netzbetreiber', img: 'assets/lns-kabel.jpg',    services: ['Glasfaser', 'Tiefbau', 'Spülbohrung'], stat: { val: '1.995', unit: '', lbl: 'Hausanschlüsse' } },
    { year: '2024', region: 'Brandenburg', title: 'Glasfaserausbau Bernau', client: 'Glasfaser-Netzbetreiber', img: 'assets/lns-tiefbau.jpeg', services: ['Glasfaser', 'Tiefbau', 'Spleißung'], stat: { val: '129', unit: 'km', lbl: 'Trasse' } },
  ];

  const total = slides.length;
  const go = (delta) => setIdx((i) => (i + delta + total) % total);

  React.useEffect(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowLeft') go(-1);
      else if (e.key === 'ArrowRight') go(1);
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const cur = slides[idx];
  const [animKey, setAnimKey] = React.useState(0);
  React.useEffect(() => { setAnimKey((k) => k + 1); }, [idx]);

  return (
    <div className="hpsl">
      <div className="hpsl__diag"></div>

      <div className="hpsl__grid">
        {/* Filmstrip thumbnails */}
        <div className="hpsl__strip">
          {slides.map((s, i) => (
            <button
              key={i}
              className={'hpsl__thumb' + (i === idx ? ' is-active' : '')}
              onClick={() => setIdx(i)}
              aria-label={`Projekt ${i + 1}`}
            >
              <img src={s.img} alt="" />
              <span className="hpsl__thumb-num">{String(i + 1).padStart(2, '0')}</span>
            </button>
          ))}
        </div>

        {/* Hero stage — sliding carousel */}
        <div className="hpsl__stage">
          <div className="hpsl__stage-track" style={{ transform: `translateX(-${idx * 100}%)` }}>
            {slides.map((s, i) => (
              <div key={i} className={'hpsl__stage-slide' + (i === idx ? ' is-active' : '')}>
                <img src={s.img} alt={s.title} />
                {i === idx && (
                  <>
                    <div className="hpsl__index">
                      <span className="hpsl__index-num">{String(idx + 1).padStart(2, '0')}</span>
                      <div className="hpsl__index-row">
                        <span className="hpsl__index-line"></span>
                        <span className="hpsl__index-tot">VON {String(total).padStart(2, '0')}</span>
                      </div>
                    </div>
                    <div className="hpsl__stat">
                      <div className="hpsl__stat-val"><AnimatedNumber value={cur.stat.val} />{cur.stat.unit && <span style={{fontSize:'0.5em', fontWeight:700, marginLeft:6, letterSpacing:0}}>{cur.stat.unit}</span>}</div>
                      <div className="hpsl__stat-lbl">{cur.stat.lbl}</div>
                    </div>
                    <div className="hpsl__region">{cur.region} · {cur.year}</div>
                  </>
                )}
              </div>
            ))}
          </div>
        </div>

        {/* Info column */}
        <div className={'hpsl__info hpsl__info--anim'} key={'b' + animKey}>
          <div className="hpsl__meta">
            <span>{cur.year}</span>
            <span className="hpsl__meta-dot"></span>
            <span>{cur.region}</span>
            <span className="hpsl__meta-dot"></span>
            <span>QC LNS</span>
          </div>
          <h3 className="hpsl__title">{cur.title}</h3>
          <div className="hpsl__client-row">
            <div className="hpsl__client-icon" aria-hidden="true">
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2 14V6l6-4 6 4v8H2zM6 14V9h4v5" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/></svg>
            </div>
            <div className="hpsl__client-meta">
              <div className="hpsl__client-label">{t('projects.client', 'Auftraggeber')}</div>
              <div className="hpsl__client-name">{cur.client}</div>
            </div>
          </div>

          <ul className="hpsl__svc" key={'m' + animKey}>
            {cur.services.map((s, i) => (
              <li key={i} className="hpsl__svc-item">
                <span className="hpsl__svc-bullet" aria-hidden="true"></span>
                <span>{s}</span>
              </li>
            ))}
          </ul>

          <div className="hpsl__nav">
            <div className="hpsl__nav-meta"><b>{String(idx + 1).padStart(2, '0')}</b> / {String(total).padStart(2, '0')} Highlights</div>
            <div className="hpsl__arrows">
              <button className="hpsl__arrow" onClick={() => go(-1)} aria-label="Vorheriges Projekt">
                <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M13 8H3M7 12 3 8l4-4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
              <button className="hpsl__arrow" onClick={() => go(1)} aria-label="Nächstes Projekt">
                <svg width="18" height="18" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function LnsHome() {
  const { t } = useT();
  return (
    <Layout brand="lns">
      <HomeStyles />

      {/* HERO */}
      <section className="hh hh--lns">
        <img className="hh__img" src="assets/lns-hero.jpg" alt="Quick City LNS" fetchpriority="high" decoding="async" />
        <div className="hh__content">
          <div className="hh__eyebrow">{t('lns.hero.eyebrow')}</div>
          <div className="hh__title" dangerouslySetInnerHTML={{__html: t('lns.hero.title')}} />
          <p className="hh__sub">{t('lns.hero.sub')}</p>
          <a className="hh__cta" href="/lns/leistungen">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            <span>{t('lns.hero.cta')}</span>
          </a>
        </div>
      </section>

      {/* PARTNER */}
      <section className="hsec">
        <div className="container">
          <div className="hpartner">
            <div className="hpartner__img-wrap hpartner__img-wrap--lns">
              <img className="hpartner__img" src="assets/lns-tiefbau.jpeg" alt="LNS Tiefbau" />
            </div>
            <div>
              <div className="hsec__label">{t('lns.partner.label')}</div>
              <h2 className="hsec__title" dangerouslySetInnerHTML={{__html: t('lns.partner.title')}} />
              <p className="hsec__text">{t('lns.partner.text')}</p>
              <div className="hpartner__stats">
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value={t('lns.stat1.num')} /></div><div className="hstat__label">{t('lns.stat1')}</div></div>
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value={t('lns.stat2.num')} /></div><div className="hstat__label">{t('lns.stat2')}</div></div>
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value={t('lns.stat3.num')} /></div><div className="hstat__label">{t('lns.stat3')}</div></div>
                <div className="hstat"><div className="hstat__num"><AnimatedNumber value={t('lns.stat4.num')} /></div><div className="hstat__label">{t('lns.stat4')}</div></div>
              </div>
              <a href="/lns/ueber-uns" className="hsec__cta">
                <span>{t('lns.partner.cta', 'Über uns')}</span>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* LEISTUNGEN */}
      <section className="hsec hsec--alt hsec--lns-svc" id="leistungen" style={{position:'relative', backgroundImage:'url(assets/lns-leistungen-bg.jpg)', backgroundSize:'cover', backgroundPosition:'center', backgroundRepeat:'no-repeat'}}>
        <div style={{position:'absolute', inset:0, background:'linear-gradient(180deg, rgba(245,245,245,0.72) 0%, rgba(245,245,245,0.55) 50%, rgba(245,245,245,0.85) 100%)', pointerEvents:'none'}}></div>
        <div className="container" style={{position:'relative', zIndex:1}}>
          <div className="hsec__label">{t('lns.services.label')}</div>
          <h2 className="hsec__title" style={{marginBottom: 56}}>{t('lns.services.title')}</h2>
          <div className="hsvc-grid">
            <a className="hsvc" href="/lns/ausbau">
              <img className="hsvc__icon" src="assets/icons/lns-telekom.png" alt="" />
              <div className="hsvc__title">{t('lns.s1.title')}</div>
              <p className="hsvc__text">{t('lns.s1.text')}</p>
              <span className="hsvc__link">{t('lns.more')}</span>
            </a>
            <a className="hsvc" href="/lns/tiefbau">
              <img className="hsvc__icon" src="assets/icons/lns-tiefbau.png" alt="" />
              <div className="hsvc__title">{t('lns.s2.title')}</div>
              <p className="hsvc__text">{t('lns.s2.text')}</p>
              <span className="hsvc__link">{t('lns.more')}</span>
            </a>
            <a className="hsvc" href="/lns/bau">
              <img className="hsvc__icon" src="assets/icons/lns-strasse.png" alt="" />
              <div className="hsvc__title">{t('lns.s3.title')}</div>
              <p className="hsvc__text">{t('lns.s3.text')}</p>
              <span className="hsvc__link">{t('lns.more')}</span>
            </a>
            <a className="hsvc" href="/lns/baustellenpruefung">
              <img className="hsvc__icon" src="assets/icons/lns-baustelle.png" alt="" />
              <div className="hsvc__title">{t('lns.s4.title')}</div>
              <p className="hsvc__text">{t('lns.s4.text')}</p>
              <span className="hsvc__link">{t('lns.more')}</span>
            </a>
            <a className="hsvc" href="/lns/stoerungsdienst">
              <svg className="hsvc__icon" viewBox="0 0 64 64" fill="none" stroke="#1a1a1a" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" style={{display:'block'}}>
                <circle cx="32" cy="32" r="22"/>
                <path d="M32 18 L32 32 L42 38"/>
                <path d="M48 14 L52 10 M16 14 L12 10"/>
              </svg>
              <div className="hsvc__title">{t('lns.s5.title')}</div>
              <p className="hsvc__text">{t('lns.s5.text')}</p>
              <span className="hsvc__link">{t('lns.more')}</span>
            </a>
          </div>

          <div style={{textAlign:'center', marginTop: 56}}>
            <a href="/lns/kontakt" className="hh__cta" style={{background:'var(--accent)', color:'#fff'}}>
              <span>{t('common.contact_cta')}</span>
              <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>
      </section>

      {/* BUNDESWEIT */}
      <section className="hsec hsec--dark">
        <div className="container">
          <div className="hreach">
            <div>
              <div className="hsec__label">{t('lns.reach.label')}</div>
              <h2 className="hsec__title" dangerouslySetInnerHTML={{__html: t('lns.reach.title')}} />
              <p className="hsec__text" style={{marginTop: 20, maxWidth: 540}}>{t('lns.reach.text')}</p>
              <a href="/lns/ueber-uns" className="hsec__cta hsec__cta--ondark" style={{marginTop: 24}}>
                <span>{t('lns.reach.cta', 'Über uns')}</span>
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </a>
            </div>
            <div>
              <GermanyClusterMap clusters={window.QC_LNS_CITY_CLUSTERS || []} />
            </div>
          </div>
        </div>
      </section>

      {/* MANIFEST removed — content moved into Werte section below */}

      {/* PROJEKTE — temporär ausgeblendet, bis echte Inhalte vorliegen.
          Zum Wiedereinblenden: window.LNS_PROJ = true setzen oder diesen Block entkommentieren. */}
      {window.LNS_PROJ && (
      <section className="hsec hsec--alt">
        <div className="container">
          <div className="hsec__label">{t('lns.ref.label')}</div>
          <h2 className="hsec__title" style={{marginBottom: 40}}>{t('lns.ref.title')}</h2>
          <LnsProjectsSlideshow />
          <div style={{textAlign:'center', marginTop: 48}}>
            <a href="/projekte?brand=lns" className="hsec__cta">
              <span>{t('lns.ref.cta', 'Alle Projekte')}</span>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>
      </section>
      )}

      {/* ÜBER UNS removed */}
      {/* PROZESS removed */}

      {/* ZERTIFIKATE — moved to end */}
      <section className="hzert">
        <span className="hzert__accent-line"></span>
        <div className="container">
          <div className="hzert__head">
            <div className="hzert__label">{t('common.certs.label', 'Zertifiziert')}</div>
            <h2 className="hzert__title" dangerouslySetInnerHTML={{__html: t('common.certs.title2', 'ISO-<em>geprüft.</em>')}} />
          </div>
          <div className="hzert__seals hzert__seals--single">
            <a href="/lns/zertifikate" className="hzert__seal-card">
              <div className="hzert__seal-img-wrap">
                <img className="hzert__seal-img" src="assets/zertifikate/lns-iso-9001.jpg" alt="ISO 9001" />
              </div>
              <div className="hzert__seal-name">{t('certs.qm', 'Qualitätsmanagement')}</div>
              <div className="hzert__seal-year">DIN EN ISO 9001:2015</div>
            </a>
          </div>
          <div className="hzert__more">
            <a href="/lns/zertifikate" className="hzert__cta">
              <span>{t('lns.certs.cta', 'Alle Zertifikate ansehen')}</span>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </a>
          </div>
        </div>
      </section>

      <CareerTeaser brand="lns" t={t} />
    </Layout>
  );
}

/* ─────────────────────────────────────────
   Career teaser — image left, overlapping white card right (both brands)
───────────────────────────────────────── */
function CareerTeaser({ brand, t }) {
  const benefits = [
    { icon: '📄', h: t('career.teaser.b1.h', 'Zukunftssicheres und unbefristetes Arbeitsverhältnis'), x: t('career.teaser.b1.t', 'Langfristige Verbindungen beruhen auf Gegenseitigkeit — das werden Sie an unserem Vertragsangebot erkennen.') },
    { icon: '🎓', h: t('career.teaser.b3.h', 'Individuelle Weiterbildungsmöglichkeiten'), x: t('career.teaser.b3.t', 'Wir finden gemeinsam heraus, welche Angebote Ihnen helfen, bei uns voranzukommen und sich im Job zu entwickeln.') }
  ];
  const sub = brand === 'ifm'
    ? t('career.teaser.sub.ifm', 'Werden Sie Teil eines wachsenden Teams im infrastrukturellen Facility Management.')
    : t('career.teaser.sub.lns', 'Werden Sie Teil eines wachsenden Teams im Tief- und Netzbau.');
  return (
    <section className="ctease">
      <div className="ctease__inner">
        <div className="ctease__img" style={{backgroundImage:'url(assets/karriere-teaser.jpg)'}}></div>
        <div className="ctease__card">
          <div className="ctease__label">{t('career.teaser.label', 'Karriere')}</div>
          <h2 className="ctease__title">{t('career.teaser.title', 'Arbeiten bei Quick City')}</h2>
          <p className="ctease__sub">{sub}</p>
          <div className="ctease__list">
            {benefits.map((b, i) => (
              <div key={i} className="ctease__item">
                <span className="ctease__item-icon" aria-hidden="true">{b.icon}</span>
                <div>
                  <div className="ctease__item-h">{b.h}</div>
                  <p className="ctease__item-t">{b.x}</p>
                </div>
              </div>
            ))}
          </div>
          <a className="ctease__btn" href={`/${brand}/karriere`}>{t('career.teaser.cta', 'Karriere')}</a>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { IfmHome, LnsHome, HomeStyles, CareerTeaser });