/* Railo — Startseite. Apple-style: kurze Info, dann die Auswahl zwischen
   EVU-Bereich (Unternehmen) und Bewerber-Bereich (Lokführer:innen). */
const { Button, IconButton, Eyebrow, Card } = window.RailoDesignSystem_afb8b0;

/* ---------- Tweaks ---------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "akzent": ["#0a5cff", "#0048d6", "#0036a3"],
  "raster": "Dezent",
  "theme": "Hell"
} /*EDITMODE-END*/;

// Gold-Ton des Metall-Looks als Vollfarbe (fürs Raster).
const RAILO_GOLD = "#c79320";

/* ---------- Platzhalter-Panels für die zwei Foto-Slots ----------
   Bis die echten Fotos (Lokführer-Cockpit / Zug am Bahnsteig) eingesetzt
   werden, zeigen die Split-Hälften ein dunkles Brand-Panel mit dezentem
   Signalblau-Glow — passt zum Hero, wirkt bewusst gesetzt. */
function panelImg(topColor, glowY) {
  const svg = "<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='800'>" +
    "<defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'>" +
    "<stop offset='0' stop-color='" + topColor + "'/><stop offset='1' stop-color='#05070f'/></linearGradient>" +
    "<radialGradient id='r' cx='50%' cy='" + glowY + "' r='62%'>" +
    "<stop offset='0' stop-color='#0a5cff' stop-opacity='0.30'/>" +
    "<stop offset='1' stop-color='#0a5cff' stop-opacity='0'/></radialGradient></defs>" +
    "<rect width='1200' height='800' fill='url(#g)'/>" +
    "<rect width='1200' height='800' fill='url(#r)'/></svg>";
  return "data:image/svg+xml," + encodeURIComponent(svg);
}

// Build the o-raster background image with separate ring & rail colours.
function rasterImage(ringColor, railColor) {
  const tile = (tx, ty) => `<g transform='translate(${tx},${ty})'><circle cx='28' cy='26' r='22' stroke='${ringColor}' stroke-width='3.4'/><path d='M22 40 L27 28' stroke='${railColor}' stroke-width='2'/><path d='M34 40 L29 28' stroke='${railColor}' stroke-width='2'/><path d='M17.7 40.9 H38.4' stroke='${railColor}' stroke-width='1.7' opacity='0.92'/><path d='M20.9 35.7 H35.1' stroke='${railColor}' stroke-width='1.5' opacity='0.78'/><path d='M23.8 30.9 H32.2' stroke='${railColor}' stroke-width='1.4' opacity='0.62'/></g>`;
  const svg = `<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140' viewBox='0 0 240 140'><g fill='none' stroke-linecap='round'>${tile(20, 16)}${tile(140, 86)}</g></svg>`;
  return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
}

/* ---------- Bildzeichen: das Tunnel-„o" ---------- */
function RailoO({ size = 34, color = "var(--text-primary)", track, style }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: "block", ...style }}>
      <circle cx="50" cy="50" r="34" fill="none" stroke={color} strokeWidth="11"></circle>
      <path d="M41 72 L48.5 53" stroke="#c79320" strokeWidth="3.1" strokeLinecap="round"></path>
      <path d="M59 72 L51.5 53" stroke="#c79320" strokeWidth="3.1" strokeLinecap="round"></path>
      <path d="M34 72 H66" stroke="#c79320" strokeWidth="3" strokeLinecap="round"></path>
      <path d="M39 64 H61" stroke="#c79320" strokeWidth="2.7" strokeLinecap="round"></path>
      <path d="M43.5 57 H56.5" stroke="#c79320" strokeWidth="2.4" strokeLinecap="round"></path>
    </svg>);

}

/* ---------- Logo — Wortmarke „Railo" mit Tunnel-„o" auf der Strecke ---------- */
function RailoLogo({ size = 26, color = "var(--text-primary)", accent = "var(--accent)" }) {
  return (
    <span style={{ display: "inline-flex", alignItems: "flex-end", position: "relative", paddingBottom: size * 0.2, lineHeight: 1 }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: 600, letterSpacing: "-0.04em", fontSize: size, color }}>
        Rail
      </span>
      <span style={{ fontSize: size, lineHeight: 1, display: "inline-flex", alignItems: "flex-end", marginLeft: -size * 0.03, marginBottom: 0 }}>
        <RailoO size={size * 0.64} color={color} track={accent} style={{ transform: `translateY(${-size * 0.075}px)` }} />
      </span>
      <svg width="100%" height={Math.max(6, size * 0.16)} viewBox="0 0 300 14" preserveAspectRatio="none" style={{ position: "absolute", left: 0, bottom: 0 }}>
        <path d="M3 4 H140 M160 4 H297" stroke={accent} strokeWidth="2.6" strokeLinecap="round"></path>
        <path d="M3 10 H140 M160 10 H297" stroke={accent} strokeWidth="2.6" strokeLinecap="round" opacity="0.5"></path>
      </svg>
    </span>);

}

/* ---------- Brand-Lockup: Marke + Wortmarke „Railo" ---------- */
function RailoBrand() {
  return (
    <a href="#" onClick={(e) => e.preventDefault()} style={{ display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none" }}>
      <RailoO size={30} color="#3a86ff" metal />
      <span style={{
        fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 21,
        letterSpacing: "-0.02em", color: "#fff"
      }}>Railo</span>
    </a>);

}

/* ---------- Mittiges Floating-Pill-Menü ---------- */
function NavLinks() {
  const links = [
    ["Lokführer:in werden", "Railo%20Lokfuehrer.html"],
    ["Für Unternehmen", "Railo%20Unternehmen.html"],
    ["Über uns", "Railo%20Ueber%20Uns.html"]];

  return (
    <div style={{
      display: "flex", alignItems: "center", gap: 2, padding: 5,
      borderRadius: 980, background: "rgba(255,255,255,0.07)",
      border: "1px solid rgba(255,255,255,0.12)",
      backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)"
    }}>
      {links.map(([l, href]) => {
        const on = false;
        return (
          <a key={l} href={href} style={{
            fontFamily: "var(--font-text)", fontSize: 14, fontWeight: on ? 600 : 500,
            color: on ? "#fff" : "rgba(255,255,255,0.66)",
            textDecoration: "none", padding: "8px 16px", borderRadius: 980,
            background: on ? "rgba(255,255,255,0.14)" : "transparent",
            boxShadow: on ? "inset 0 0 0 1px rgba(255,255,255,0.14)" : "none",
            transition: "color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard)",
            whiteSpace: "nowrap"
          }}>{l}</a>);

      })}
    </div>);

}

/* ---------- De/En-Sprachumschalter ---------- */
function LangToggle() {
  const [lang, setLang] = React.useState("En");
  return (
    <div style={{
      display: "inline-flex", padding: 3, borderRadius: 980,
      background: "rgba(255,255,255,0.07)",
      border: "1px solid rgba(255,255,255,0.12)",
      backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)"
    }}>
      {["En", "De"].map((l) => {
        const on = lang === l;
        return (
          <button key={l} onClick={() => setLang(l)} style={{
            appearance: "none", border: "none", cursor: "pointer",
            fontFamily: "var(--font-text)", fontSize: 13, fontWeight: 600,
            padding: "5px 13px", borderRadius: 980,
            background: on ? "rgba(255,255,255,0.16)" : "transparent",
            color: on ? "#fff" : "rgba(255,255,255,0.6)",
            transition: "background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard)"
          }}>{l}</button>);

      })}
    </div>);

}

/* ---------- Mobiles Vollbild-Menü (dunkel, für den Hero) ---------- */
const RAILO_NAV_LINKS = [
  ["Lokführer:in werden", "Railo%20Lokfuehrer.html"],
  ["Für Unternehmen", "Railo%20Unternehmen.html"],
  ["Über uns", "Railo%20Ueber%20Uns.html"]];

function HomeMobileMenu({ open, onClose }) {
  React.useEffect(() => {
    if (open) {
      const prev = document.body.style.overflow;
      document.body.style.overflow = "hidden";
      return () => { document.body.style.overflow = prev; };
    }
  }, [open]);
  React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [open]);
  return (
    <div role="dialog" aria-modal="true" aria-hidden={!open} style={{
      position: "fixed", inset: 0, zIndex: 200,
      background: "rgba(5,7,15,0.97)",
      backdropFilter: "blur(24px)", WebkitBackdropFilter: "blur(24px)",
      display: "flex", flexDirection: "column",
      padding: "calc(env(safe-area-inset-top, 0px) + 18px) 24px 32px",
      opacity: open ? 1 : 0, pointerEvents: open ? "auto" : "none",
      transform: open ? "none" : "translateY(-8px)",
      transition: "opacity 260ms var(--ease-out), transform 260ms var(--ease-out)"
    }}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", height: 40 }}>
        <RailoBrand />
        <button onClick={onClose} aria-label="Menü schließen" style={{
          appearance: "none", border: "none", background: "transparent", cursor: "pointer",
          width: 44, height: 44, display: "inline-flex", alignItems: "center", justifyContent: "center",
          color: "#fff", margin: "0 -10px 0 0"
        }}><i data-lucide="x" style={{ width: 26, height: 26 }}></i></button>
      </div>
      <nav style={{ marginTop: 30, display: "flex", flexDirection: "column" }}>
        {RAILO_NAV_LINKS.map(([l, href]) =>
          <a key={l} href={href} style={{
            fontFamily: "var(--font-display)", fontWeight: 600, fontSize: 28,
            letterSpacing: "var(--tracking-title)", color: "#fff", textDecoration: "none",
            padding: "18px 0", borderBottom: "1px solid rgba(255,255,255,0.12)",
            display: "flex", alignItems: "center", justifyContent: "space-between"
          }}>{l}<span style={{ color: "rgba(255,255,255,0.5)", fontWeight: 400 }}>›</span></a>)}
      </nav>
      <a href="Railo%20Lokfuehrer.html" style={{
        marginTop: 32, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
        fontFamily: "var(--font-text)", fontSize: 17, fontWeight: 600,
        color: "#05070f", textDecoration: "none",
        padding: "16px 24px", borderRadius: 980, background: "#fff"
      }}>Jetzt bewerben&nbsp;<span style={{ opacity: 0.5 }}>→</span></a>
    </div>);
}

/* ---------- Transparenter Header über dem dunklen Hero ---------- */
function RailoNav() {
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{
      position: "absolute", top: 0, left: 0, right: 0, zIndex: 50, height: 76,
      display: "flex", alignItems: "center", background: "transparent"
    }}>
      <nav style={{
        position: "relative", width: "100%", maxWidth: 1280, margin: "0 auto", padding: "0 28px",
        display: "flex", alignItems: "center", justifyContent: "space-between"
      }}>
        <RailoBrand />
        <div className="nav-wide" style={{ position: "absolute", left: "50%", top: "50%", transform: "translate(-50%, -50%)" }}>
          <NavLinks />
        </div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <a href="Railo%20Lokfuehrer.html" className="home-cta" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-text)", fontSize: 14, fontWeight: 600,
            color: "#05070f", textDecoration: "none",
            padding: "10px 20px", borderRadius: 980, background: "#fff",
            boxShadow: "0 2px 16px rgba(0,0,0,0.18)"
          }}>Bewerben&nbsp;<span style={{ opacity: 0.5 }}>→</span></a>
          <button onClick={() => setOpen(true)} aria-label="Menü öffnen" className="nav-burger" style={{
            appearance: "none", border: "none", background: "transparent", cursor: "pointer",
            width: 44, height: 44, alignItems: "center", justifyContent: "center",
            color: "#fff", margin: "0 -10px 0 0"
          }}><i data-lucide="menu" style={{ width: 26, height: 26 }}></i></button>
        </div>
      </nav>
      <HomeMobileMenu open={open} onClose={() => setOpen(false)} />
    </header>);

}

/* ---------- Hero — dunkel & immersiv (Referenz-Look) ---------- */
function Hero() {
  return (
    <section style={{
      position: "relative", overflow: "hidden", textAlign: "center",
      minHeight: "100vh", display: "flex", flexDirection: "column",
      alignItems: "center", justifyContent: "center",
      padding: "150px 22px 96px", background: "#05070f", color: "#fff"
    }}>
      {/* Immersiver Glow-Hintergrund in Railo-Signalblau */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
        background:
          "radial-gradient(130% 85% at 50% 14%, rgba(10,92,255,0.55) 0%, rgba(10,92,255,0.16) 34%, transparent 62%)," +
          "radial-gradient(120% 120% at 50% 128%, rgba(36,120,255,0.42) 0%, transparent 52%)," +
          "radial-gradient(80% 60% at 50% 50%, rgba(10,92,255,0.14) 0%, transparent 70%)," +
          "#05070f"
      }}></div>
      {/* Perspektivische Lichtstreifen */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0, opacity: 0.5,
        background:
          "repeating-linear-gradient(74deg, rgba(120,170,255,0.10) 0 1px, transparent 1px 46px)," +
          "repeating-linear-gradient(-74deg, rgba(120,170,255,0.08) 0 1px, transparent 1px 52px)",
        maskImage: "radial-gradient(75% 75% at 50% 42%, #000 0%, transparent 78%)",
        WebkitMaskImage: "radial-gradient(75% 75% at 50% 42%, #000 0%, transparent 78%)"
      }}></div>
      {/* o-Monogramm-Raster — im Hero Ring gold, Schienen blau (durchgängig) */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
        backgroundImage: "var(--hero-raster-image)", backgroundSize: "240px 140px",
        opacity: "var(--hero-raster-opacity, 0.45)"
      }}></div>
      {/* Zweite Ebene: kaschiert die Monogramme in der Mitte hinter dem Hauptlogo */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
        backdropFilter: "blur(9px)", WebkitBackdropFilter: "blur(9px)",
        background: "radial-gradient(44% 52% at 50% 40%, rgba(7,11,24,0.78) 0%, rgba(7,11,24,0.5) 48%, transparent 76%)",
        maskImage: "radial-gradient(46% 54% at 50% 40%, #000 0%, #000 54%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(46% 54% at 50% 40%, #000 0%, #000 54%, transparent 80%)"
      }}></div>
      {/* Zweite Freizone: kaschiert die Monogramme um den CTA-Button */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
        backdropFilter: "blur(9px)", WebkitBackdropFilter: "blur(9px)",
        background: "radial-gradient(34% 22% at 50% 84%, rgba(7,11,24,0.78) 0%, rgba(7,11,24,0.5) 48%, transparent 76%)",
        maskImage: "radial-gradient(36% 24% at 50% 84%, #000 0%, #000 54%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(36% 24% at 50% 84%, #000 0%, #000 54%, transparent 80%)"
      }}></div>
      {/* Dritte Freizone: kaschiert die Monogramme hinter Logo + „Railo" oben links */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
        backdropFilter: "blur(9px)", WebkitBackdropFilter: "blur(9px)",
        background: "radial-gradient(22% 12% at 9% 5%, rgba(7,11,24,0.78) 0%, rgba(7,11,24,0.5) 48%, transparent 76%)",
        maskImage: "radial-gradient(24% 14% at 9% 5%, #000 0%, #000 54%, transparent 80%)",
        WebkitMaskImage: "radial-gradient(24% 14% at 9% 5%, #000 0%, #000 54%, transparent 80%)"
      }}></div>
      {/* Vignette */}
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none", zIndex: 0,
        background: "radial-gradient(100% 80% at 50% 38%, transparent 52%, rgba(0,0,0,0.55) 100%)"
      }}></div>
      {/* Weicher Übergang in den hellen Bereich darunter */}
      <div aria-hidden="true" style={{
        position: "absolute", left: 0, right: 0, bottom: 0, height: 420, pointerEvents: "none", zIndex: 0,
        background: "linear-gradient(to bottom," +
          " rgba(5,7,15,0) 0%," +
          " rgba(5,7,15,0.18) 26%," +
          " rgba(8,12,26,0.5) 48%," +
          " rgba(40,70,140,0.42) 66%," +
          " rgba(150,180,230,0.5) 82%," +
          " var(--surface-page) 100%)"
      }}></div>

      <div className="reveal" style={{ maxWidth: 880, margin: "0 auto", position: "relative", zIndex: 1 }}>
        <div className="hero-logo" style={{ display: "flex", justifyContent: "center", marginBottom: 40 }}>
          <RailoLogo size={132} color="#fff" accent="#3a86ff" />
        </div>
        <h1 style={{
          fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(48px, 8.4vw, 92px)", lineHeight: 1.03,
          letterSpacing: "var(--tracking-hero)", margin: 0,
          background: "linear-gradient(92deg, rgba(255,255,255,0.34) 0%, #ffffff 26%, #ffffff 74%, rgba(255,255,255,0.34) 100%)",
          WebkitBackgroundClip: "text", backgroundClip: "text",
          WebkitTextFillColor: "transparent", color: "transparent"
        }}>
          <span style={{ display: "block" }}>Menschen, die Züge</span>
          <span style={{ display: "block" }}>bewegen.</span>
        </h1>
        <p style={{
          fontFamily: "var(--font-text)", fontSize: "clamp(18px, 2.4vw, 22px)",
          lineHeight: 1.45, color: "rgba(255,255,255,0.72)", maxWidth: 580,
          margin: "28px auto 0"
        }}>Wir bieten mehr. Für alle Seiten. Messbare Risikominimierung bei
          gleichzeitiger Effizienzsteigerung für Sie als EVU.
        </p>
        <p style={{
          fontFamily: "var(--font-text)", fontSize: "clamp(18px, 2.4vw, 22px)",
          lineHeight: 1.45, color: "rgba(255,255,255,0.72)", maxWidth: 580,
          margin: "14px auto 0"
        }}>Bestbezahlung für Lokführer:innen / Tf.
        </p>
        <div className="hero-cta-row" style={{ display: "flex", justifyContent: "center", alignItems: "center", gap: 14, marginTop: 132, flexWrap: "wrap" }}>
          <a href="Railo%20Lokfuehrer.html" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontFamily: "var(--font-text)", fontSize: 16, fontWeight: 600,
            color: "#05070f", textDecoration: "none",
            padding: "15px 28px", borderRadius: 980, background: "#fff",
            boxShadow: "0 0 0 1px rgba(255,255,255,0.6), 0 8px 40px rgba(10,92,255,0.55)"
          }}>
            <RailoO size={48} color="var(--accent)" />
            Jetzt bei Railo bewerben
          </a>
          <a href="Railo%20Unternehmen.html" style={{
            display: "inline-flex", alignItems: "center", gap: 10,
            fontFamily: "var(--font-text)", fontSize: 16, fontWeight: 600,
            color: "#05070f", textDecoration: "none",
            padding: "15px 28px", borderRadius: 980, background: "#fff",
            boxShadow: "0 0 0 1px rgba(255,255,255,0.6), 0 8px 40px rgba(10,92,255,0.55)"
          }}>
            Jetzt Lokführer anfragen
            <RailoO size={48} color="var(--accent)" />
          </a>
        </div>
      </div>
    </section>);

}

/* ---------- Die Auswahl — zwei Wege ---------- */
const PATHS = [
{
  id: "lokfuehrer",
  eyebrow: "Für Lokführer:innen",
  head: "Dein Platz im Führerstand.",
  sub: "Wir bezahlen besser als dein Arbeitgeber. Wir schätzen dich mehr als dein Arbeitgeber. Einzigartige Zusatzverdienste möglich.",
  primary: "Hier zum Erstgespräch",
  secondary: "Jetzt unverbindlich mehr erfahren",
  photo: "Foto: Lokführer:in im Führerstand",
  img: panelImg("#0b1a3a", "80%")
},
{
  id: "evu",
  eyebrow: "Für Unternehmen",
  head: "Qualifizierte Lokführer. Wenn Sie sie brauchen.",
  sub: "Ihr Unternehmen soll nicht das kriegen, was wir grade haben – wir kriegen, was Sie grade brauchen. Einzigartig enge Zusammenarbeit erleben bei Railo.",
  primary: "Hier zum Erstgespräch",
  secondary: "Wieso Railo?",
  photo: "Foto: Zug am Bahnsteig",
  img: panelImg("#0a1530", "20%")
}];


function PathCard({ p }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: "var(--surface-card)",
        border: "1px solid var(--border-subtle)",
        borderRadius: "var(--radius-xl)",
        overflow: "hidden",
        display: "flex", flexDirection: "column",
        boxShadow: hover ? "var(--shadow-raised)" : "var(--shadow-card)",
        transform: hover ? "translateY(-3px)" : "translateY(0)",
        transition: "transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out)"
      }}>

      <div style={{ padding: "44px 40px 32px", textAlign: "center" }}>
        <Eyebrow style={{ marginBottom: 14 }}>{p.eyebrow}</Eyebrow>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(28px, 3.2vw, 38px)", lineHeight: 1.08,
          letterSpacing: "var(--tracking-display)", color: "var(--text-primary)",
          margin: 0, textWrap: "balance"
        }}>{p.head}</h2>
        <p style={{
          fontFamily: "var(--font-text)", fontSize: 18, lineHeight: 1.45,
          color: "var(--text-secondary)", maxWidth: 420, margin: "16px auto 0"
        }}>{p.sub}</p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 26, flexWrap: "wrap" }}>
          <Button variant="primary" size="md" onClick={(e) => e.preventDefault()}>{p.primary}</Button>
          <Button variant="text" size="md" onClick={(e) => e.preventDefault()}>{p.secondary}</Button>
        </div>
      </div>
      <image-slot
        id={p.id}
        shape="rect"
        placeholder={p.photo}
        src={p.img}
        style={{ display: "block", width: "100%", height: 300, marginTop: "auto" }}>
      </image-slot>
    </div>);

}

/* ---------- Route-Ebene: die Seite als Strecke ---------- */
function RouteVertical({ height = 56 }) {
  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      <svg width="12" height={height} viewBox={`0 0 12 ${height}`} fill="none" style={{ display: "block" }}>
        <path d={`M6 2 V${height - 2}`} stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"></path>
      </svg>
    </div>);

}

function RouteFork() {
  return (
    <React.Fragment>
      <div className="rail-wide">
        <svg width="100%" viewBox="0 0 1024 94" preserveAspectRatio="xMidYMid meet" fill="none" style={{ display: "block", height: "auto" }}>
          <path d="M512 4 V30" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"></path>
          <path d="M512 30 C 430 54, 336 60, 256 90" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"></path>
          <path d="M512 30 C 594 54, 688 60, 768 90" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"></path>
          <circle cx="512" cy="4" r="4.5" fill="var(--accent)"></circle>
          <circle cx="256" cy="90" r="4.5" fill="var(--accent)"></circle>
          <circle cx="768" cy="90" r="4.5" fill="var(--accent)"></circle>
        </svg>
      </div>
      <div className="rail-narrow"><RouteVertical height={36} /></div>
    </React.Fragment>);

}

function RouteMerge() {
  return (
    <React.Fragment>
      <div className="rail-wide">
        <svg width="100%" viewBox="0 0 1024 94" preserveAspectRatio="xMidYMid meet" fill="none" style={{ display: "block", height: "auto" }}>
          <circle cx="256" cy="4" r="4.5" fill="var(--accent)"></circle>
          <circle cx="768" cy="4" r="4.5" fill="var(--accent)"></circle>
          <path d="M256 4 C 336 34, 430 40, 512 64" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"></path>
          <path d="M768 4 C 688 34, 594 40, 512 64" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"></path>
          <path d="M512 64 V90" stroke="var(--accent)" strokeWidth="3" strokeLinecap="round"></path>
        </svg>
      </div>
      <div className="rail-narrow"><RouteVertical height={36} /></div>
    </React.Fragment>);

}

/* ---------- Die Auswahl — randloser Split-Screen mit „o" in der Mitte ---------- */
const headBase = {
  fontFamily: "var(--font-display)", fontWeight: 600,
  letterSpacing: "var(--tracking-display)", margin: 0, textWrap: "balance"
};
function SplitHalf({ p, i, hover, setHover }) {
  const active = hover === i;
  const leftPct = hover === 0 ? 62 : hover === 1 ? 38 : 50;
  const basis = i === 0 ? leftPct : 100 - leftPct;
  return (
    <div
      className="split-half"
      onMouseEnter={() => setHover(i)} onMouseLeave={() => setHover(null)}
      style={{ position: "relative", flex: `0 0 ${basis}%`, minWidth: 0, overflow: "hidden", cursor: "pointer", transition: "flex-basis 520ms var(--ease-out)" }}>

      <image-slot
        id={p.id} shape="rect" placeholder={p.photo} src={p.img}
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", display: "block" }}>
      </image-slot>
      <div aria-hidden="true" style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: active ?
        "linear-gradient(to top, rgba(6,11,20,0.94) 0%, rgba(6,11,20,0.62) 46%, rgba(6,11,20,0.40) 100%)" :
        "linear-gradient(to top, rgba(6,11,20,0.90) 0%, rgba(6,11,20,0.52) 50%, rgba(6,11,20,0.34) 100%)",
        transition: "background 420ms var(--ease-out)"
      }}></div>
      <div style={{
        position: "absolute", inset: 0, padding: "clamp(28px, 4vw, 60px)",
        display: "flex", flexDirection: "column", justifyContent: "flex-end",
        alignItems: i === 0 ? "flex-start" : "flex-end", textAlign: i === 0 ? "left" : "right",
        pointerEvents: "none"
      }}>
        <span style={{ fontFamily: "var(--font-text)", fontSize: 12, fontWeight: 700, letterSpacing: "0.1em", textTransform: "uppercase", color: "#fff", opacity: 0.88, marginBottom: 16 }}>{p.eyebrow}</span>
        <h2 style={{ ...headBase, color: "#fff", fontSize: "clamp(30px, 3.4vw, 44px)", lineHeight: 1.06, maxWidth: 420 }}>{p.head}</h2>
        <p style={{
          fontFamily: "var(--font-text)", fontSize: 17, lineHeight: 1.45, color: "rgba(255,255,255,0.9)",
          maxWidth: 380, margin: "16px 0 0", marginLeft: i === 1 ? "auto" : 0,
          maxHeight: active ? 160 : 0, opacity: active ? 1 : 0, overflow: "hidden",
          transition: "max-height 480ms var(--ease-out), opacity 360ms ease"
        }}>{p.sub}</p>
        <div style={{ marginTop: 24, pointerEvents: "auto", display: "flex", gap: 14, justifyContent: i === 1 ? "flex-end" : "flex-start", flexWrap: "wrap" }}>
          <Button variant="primary" size="md" onClick={(e) => e.preventDefault()}>{p.primary} ›</Button>
        </div>
      </div>
    </div>);

}

function PathChoice() {
  const [hover, setHover] = React.useState(null);
  return (
    <section style={{ position: "relative" }}>
      <div className="reveal" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto", padding: "56px 22px 40px", position: "relative", zIndex: 1 }}>
        <p style={{
          fontSize: 13, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase",
          color: "var(--accent)", margin: "0 0 14px", fontFamily: "var(--font-text)"
        }}>Das Beste für beide</p>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(34px, 5.4vw, 56px)", lineHeight: 1.06,
          letterSpacing: "var(--tracking-display)", color: "var(--text-primary)", margin: 0
        }}>Zwei <span style={{ color: "var(--accent)" }}>Wege.</span> Ein <span style={{ color: "var(--accent)" }}>Gleis.</span></h2>
        <p style={{
          fontFamily: "var(--font-text)", fontSize: "clamp(18px, 2.2vw, 21px)",
          lineHeight: 1.45, color: "var(--text-secondary)", maxWidth: 540, margin: "18px auto 0"
        }}>Ob im Führerstand oder im Unternehmen – Railo bringt beide Seiten auf dieselbe Strecke.</p>
      </div>
      <div className="split-row" style={{ position: "relative", display: "flex", width: "100%", height: "clamp(520px, 66vh, 660px)" }}>
        <SplitHalf p={PATHS[0]} i={0} hover={hover} setHover={setHover} />
        <SplitHalf p={PATHS[1]} i={1} hover={hover} setHover={setHover} />
        <div aria-hidden="true" className="split-seam" style={{ position: "absolute", left: `${hover === 0 ? 62 : hover === 1 ? 38 : 50}%`, top: 0, bottom: 0, width: 2, transform: "translateX(-1px)", background: "var(--accent)", opacity: 0.9, pointerEvents: "none", transition: "left 520ms var(--ease-out)" }}></div>
        <div className="split-o" style={{
          position: "absolute", left: `${hover === 0 ? 62 : hover === 1 ? 38 : 50}%`, top: "50%", transform: "translate(-50%, -50%)",
          transition: "left 520ms var(--ease-out)",
          width: 76, height: 76, borderRadius: "50%", background: "#fff",
          display: "flex", alignItems: "center", justifyContent: "center",
          boxShadow: "0 8px 28px rgba(0,0,0,0.28)", pointerEvents: "none", zIndex: 2
        }}>
          <RailoO size={42} color="var(--accent)" metal />
        </div>
      </div>
    </section>);

}

/* ---------- Zusammenführung — dunkler CTA-Header ---------- */
function TogetherBand() {
  return (
    <section style={{
      padding: "clamp(96px, 13vw, 160px) 22px", background: "#05070f",
      textAlign: "center", position: "relative", overflow: "hidden", isolation: "isolate"
    }}>
      <div aria-hidden="true" style={{
        position: "absolute", left: "50%", top: "30%", width: 720, height: 720,
        transform: "translate(-50%,-50%)", zIndex: -1, pointerEvents: "none",
        background: "radial-gradient(circle, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 62%)",
        filter: "blur(20px)", opacity: 0.7
      }}></div>
      <div className="reveal" style={{ maxWidth: 880, margin: "0 auto" }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 30 }}><RailoO size={56} color="var(--accent)" metal /></div>
        <div style={{
          fontFamily: "var(--font-text)", fontSize: 13, fontWeight: 600,
          letterSpacing: "0.08em", textTransform: "uppercase",
          color: "color-mix(in srgb, var(--accent) 72%, white)", marginBottom: 20
        }}>Zwei Wege. Eine Strecke.</div>
        <h2 style={{
          fontFamily: "var(--font-display)", fontWeight: 600,
          fontSize: "clamp(40px, 7vw, 80px)", letterSpacing: "var(--tracking-display)",
          lineHeight: 1.02, margin: 0, color: "#fff", textWrap: "balance"
        }}>Aufs selbe Gleis.</h2>
        <p style={{
          fontFamily: "var(--font-text)", fontSize: "clamp(18px, 2.2vw, 22px)",
          lineHeight: 1.45, color: "rgba(255,255,255,0.66)", maxWidth: 560, margin: "22px auto 0"
        }}>Railo bringt Lokführer:in und Unternehmen zusammen – fair, planbar, mit echtem Rückhalt.</p>
        <div style={{ display: "flex", gap: 16, justifyContent: "center", marginTop: 44, flexWrap: "wrap", alignItems: "center" }}>
          <a href="Railo%20Lokfuehrer.html" style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            fontFamily: "var(--font-text)", fontSize: 17, fontWeight: 600,
            color: "#05070f", textDecoration: "none",
            padding: "15px 30px", borderRadius: 980, background: "#fff"
          }}>Jetzt bewerben</a>
          <a href="Railo%20Unternehmen.html" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            fontFamily: "var(--font-text)", fontSize: 17, fontWeight: 600,
            color: "#fff", textDecoration: "none", padding: "15px 12px"
          }}>Für Unternehmen&nbsp;›</a>
        </div>
      </div>
    </section>);

}

/* ---------- Footer ---------- */
function RailoFooter() {
  const cols = [
  { h: "Lokführer:innen", items: [["Stellen", "Railo%20Lokfuehrer.html"], ["Bewerben", "Railo%20Lokfuehrer.html"], ["Weiterbildung", "Railo%20Lokfuehrer.html"]] },
  { h: "Unternehmen", items: [["Personal anfragen", "Railo%20Unternehmen.html"], ["So funktioniert's", "Railo%20Unternehmen.html"], ["Branchen", "Railo%20Unternehmen.html"]] },
  { h: "Railo", items: [["Über uns", "Railo%20Ueber%20Uns.html"], ["Kontakt", "#"], ["Karriere", "Railo%20Ueber%20Uns.html"]] }];

  return (
    <footer style={{ borderTop: "1px solid var(--border-subtle)", background: "var(--surface-page)", position: "relative", zIndex: 1 }}>
      <div style={{ maxWidth: 1024, margin: "0 auto", padding: "56px 22px 40px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr repeat(3, 1fr)", gap: 32 }}>
          <div>
            <RailoLogo size={24} />
            <p style={{ fontFamily: "var(--font-text)", fontSize: 14, color: "var(--text-tertiary)", lineHeight: 1.5, marginTop: 16, maxWidth: 220 }}>
              Menschen, die Züge bewegen.
            </p>
          </div>
          {cols.map((c) =>
          <div key={c.h}>
              <div style={{ fontFamily: "var(--font-text)", fontSize: 13, fontWeight: 600, color: "var(--text-primary)", marginBottom: 14 }}>{c.h}</div>
              <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                {c.items.map(([it, href]) =>
              <li key={it}><a href={href} style={{ fontFamily: "var(--font-text)", fontSize: 14, color: "var(--text-secondary)", textDecoration: "none" }}>{it}</a></li>
              )}
              </ul>
            </div>
          )}
        </div>
        <div style={{ marginTop: 40, paddingTop: 22, borderTop: "1px solid var(--border-subtle)", fontFamily: "var(--font-text)", fontSize: 13, color: "var(--text-tertiary)" }}>
          © 2026 Railo. Alle Rechte vorbehalten. ·{" "}
          <a href="Impressum.html" style={{ color: "inherit", textDecoration: "none" }}>Impressum</a> ·{" "}
          <a href="Datenschutz.html" style={{ color: "inherit", textDecoration: "none" }}>Datenschutz</a>
        </div>
      </div>
    </footer>);

}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  React.useEffect(() => {if (window.lucide) window.lucide.createIcons();}, []);
  React.useEffect(() => {
    const root = document.documentElement;
    const pal = Array.isArray(t.akzent) ? t.akzent : ["#0a5cff", "#0048d6", "#0036a3"];
    root.style.setProperty("--accent", pal[0]);
    root.style.setProperty("--accent-hover", pal[1] || pal[0]);
    root.style.setProperty("--accent-pressed", pal[2] || pal[0]);
    root.style.setProperty("--text-link", pal[0]);
    root.style.setProperty("--railo-blue-500", pal[0]);
    const op = t.raster === "Aus" ? 0 : t.raster === "Markant" ? 0.17 : 0.08;
    root.style.setProperty("--raster-opacity", String(op));
    // Weißer Bereich: Ring blau, Schienen gold
    root.style.setProperty("--raster-image", rasterImage(pal[0], RAILO_GOLD));
    // Hero (dunkel): Ring gold, Schienen blau — invertierter Kontrast
    const heroOp = t.raster === "Aus" ? 0 : t.raster === "Markant" ? 0.7 : 0.45;
    root.style.setProperty("--hero-raster-image", rasterImage(RAILO_GOLD, "#4f93ff"));
    root.style.setProperty("--hero-raster-opacity", String(heroOp));
    // Theme: Hell ↔ Anthrazit
    const dark = t.theme === "Anthrazit";
    const set = (k, v) => v == null ? root.style.removeProperty(k) : root.style.setProperty(k, v);
    set("--surface-page", dark ? "#1b1e23" : null);
    set("--surface-card", dark ? "#252931" : null);
    set("--surface-section", dark ? "#202329" : null);
    set("--text-primary", dark ? "#f4f5f7" : null);
    set("--text-secondary", dark ? "#a7acb6" : null);
    set("--text-tertiary", dark ? "#7e838d" : null);
    set("--border-subtle", dark ? "rgba(255,255,255,0.13)" : null);
    set("--nav-bg", dark ? "rgba(24,27,32,0.72)" : null);
    set("--nav-pill-bg", dark ? "rgba(255,255,255,0.07)" : null);
    set("--nav-pill-active", dark ? "#3a3f48" : null);
    set("--ink-700", dark ? "#c7ccd4" : null);
  }, [t.akzent, t.raster, t.theme]);

  return (
    <React.Fragment>
      <RailoNav />
      <Hero />
      <PathChoice />
      <TogetherBand />
      <RailoFooter />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Stimmung" />
        <TweakColor label="Akzent" value={t.akzent}
        options={[["#0a5cff", "#0048d6", "#0036a3"], ["#1e3a8f", "#16306f", "#0f2350"], ["#1f8a5b", "#19744c", "#13573a"], ["#c2531f", "#a8471a", "#863914"]]}
        onChange={(v) => setTweak("akzent", v)} />
        <TweakSection label="Hintergrund" />
        <TweakRadio label="o-Raster" value={t.raster} options={["Aus", "Dezent", "Markant"]} onChange={(v) => setTweak("raster", v)} />
        <TweakRadio label="Theme" value={t.theme} options={["Hell", "Anthrazit"]} onChange={(v) => setTweak("theme", v)} />
      </TweaksPanel>
    </React.Fragment>);

}
ReactDOM.createRoot(document.getElementById("root")).render(<App />);