/* Railo — gemeinsame Bausteine für alle Unterseiten.
Apple-Stil, hell. Komponiert die Core-Komponenten aus dem DS-Bundle.
Alle Komponenten werden ans window exportiert, weil jede Seite diese
Datei als eigenes Babel-Script lädt. Bewusst schlank & deklarativ
gehalten, damit die spätere echte Implementierung (Claude Code) klar
ablesen kann, was wohin gehört. */
const { Button, IconButton, Eyebrow, Card, Badge, Tag, Stat, Input } =
window.RailoDesignSystem_afb8b0;
/* ---------- Navigationsmodell — echte Dateien, echter Klickpfad ---------- */
const RAILO_NAV = [
{ key: "lok", label: "Lokführer:in werden", href: "Railo%20Lokfuehrer.html" },
{ key: "evu", label: "Für Unternehmen", href: "Railo%20Unternehmen.html" },
{ key: "ueber", label: "Über uns", href: "Railo%20Ueber%20Uns.html" },
];
const RAILO_HOME = "/";
const RAILO_GOLD = "#c79320";
/* ---------- o-Raster-Hintergrundbild (Ring + Schiene getrennt einfärbbar) ---------- */
function railoRasterImage(ringColor, railColor) {
const tile = (tx, ty) =>
``;
const svg = ``;
return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
}
/* ---------- Bildzeichen: das Tunnel-„o" ---------- */
function RailoO({ size = 34, color = "var(--text-primary)", track, style }) {
return (
);
}
/* ---------- Wortmarke „Railo" mit Tunnel-„o" auf der Strecke ---------- */
function RailoLogo({ size = 24, color = "var(--text-primary)", accent = "var(--accent)" }) {
return (
Rail
);
}
/* ---------- Mobiles Vollbild-Menü (Overlay) ---------- */
function MobileMenu({ active, open, onClose, dark = false }) {
React.useEffect(() => {
if (open) {
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
return () => { document.body.style.overflow = prev; };
}
}, [open]);
const text = dark ? "#fff" : "var(--text-primary)";
const sub = dark ? "rgba(255,255,255,0.6)" : "var(--text-secondary)";
return (
);
}
/* ---------- Hamburger-Button ---------- */
function BurgerButton({ onClick, dark = false, className }) {
return (
);
}
/* ---------- Helle, sticky, blurred Navigation für Unterseiten ---------- */
function SubNav({ active }) {
const [open, setOpen] = React.useState(false);
React.useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, [open]);
return (
setOpen(false)} />
);
}
/* ---------- Reveal (reines CSS, sichtbarer Fallback) ---------- */
function Reveal({ children, as = "div", className, style, ...rest }) {
const Tag = as;
return {children};
}
/* ---------- Section-Heading-Block (Eyebrow + Headline + Lede) ---------- */
function SectionHead({ eyebrow, head, sub, align = "center", maxWidth = 720, kicker }) {
return (
{eyebrow && {eyebrow}}
{head}
{sub && {sub}}
);
}
/* ---------- Heller Unterseiten-Hero ---------- */
function PageHero({ eyebrow, title, sub, primary, secondary, primaryHref = "#", secondaryHref = "#", image, imageId, imageH = 440, tone = "page" }) {
const lines = Array.isArray(title) ? title : [title];
if (tone === "immersive") {
return (
{eyebrow &&
{eyebrow}
}
{lines.map((l, i) => {l})}
{sub &&
{sub}
}
{(primary || secondary) &&
}
);
}
return (
{eyebrow &&
{eyebrow}}
{lines.map((l, i) => {l})}
{sub &&
{sub}
}
{(primary || secondary) &&
}
}
);
}
const btnPrimary = {
display: "inline-flex", alignItems: "center", gap: 8,
fontFamily: "var(--font-text)", fontSize: 17, fontWeight: 600,
color: "var(--text-on-accent)", textDecoration: "none",
padding: "14px 26px", borderRadius: 980, background: "var(--accent)",
boxShadow: "0 8px 28px rgba(10,92,255,0.28)"
};
const btnText = {
display: "inline-flex", alignItems: "center",
fontFamily: "var(--font-text)", fontSize: 17, fontWeight: 500,
color: "var(--accent)", textDecoration: "none", padding: "14px 6px"
};
/* ---------- Zahlen-Platzhalter (echte Zahlen werden nachgereicht) ---------- */
function StatPlaceholder({ label, hint = "Platzhalter", value, align = "center" }) {
const hasValue = value != null && value !== "";
return (
{hasValue ? {value} : 0,0}
{label}
{!hasValue &&
{hint}
}
);
}
function StatRow({ items, columns }) {
return (
);
}
/* ---------- Argument-Band: zentriert ODER als Bild/Text-Split ---------- */
function ArgumentBand({ eyebrow, head, sub, mode = "center", image, imageId, flip = false, tinted = false, statLabel }) {
const bg = tinted ? "var(--surface-section)" : "var(--surface-page)";
if (mode === "split") {
const text = (
{eyebrow}
{head}
{sub}
{statLabel && }
);
const pic = (
);
return (
);
}
// center
return (
{eyebrow}
{head}
{sub}
{statLabel && }
);
}
/* ---------- Prozessschritte ---------- */
function ProcessSteps({ eyebrow, head, sub, steps, tinted = true }) {
return (
{steps.map((s, i) => (
))}
);
}
/* ---------- Vorteile/Leistungen-Raster ---------- */
function FeatureGrid({ eyebrow, head, sub, items, columns = 3, tinted = false }) {
return (
{items.map((it, i) => (
))}
);
}
/* ---------- Abschluss-CTA-Band — dunkler, markanter Header ---------- */
function CTABand({ eyebrow, head, sub, primary, secondary, primaryHref = "Railo%20Lokfuehrer.html", secondaryHref = "#" }) {
return (
{/* dezenter Glow hinter dem o, nur für Tiefe – kein Deko-Verlauf */}
{eyebrow &&
{eyebrow}
}
{head}
{sub &&
{sub}
}
);
}
/* ---------- 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 (
);
}
/* ---------- Akzent/Raster-Tweak-Effekt (gemeinsam) ---------- */
function useRailoTheme(t) {
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.16 : 0.07;
root.style.setProperty("--raster-opacity", String(op));
root.style.setProperty("--raster-image", railoRasterImage(pal[0], RAILO_GOLD));
}, [t.akzent, t.raster]);
}
/* ---------- gemeinsamer Tweak-Block (Akzent + Raster) ---------- */
function RailoBaseTweaks({ t, setTweak, children }) {
return (
{children}
setTweak("akzent", v)} />
setTweak("raster", v)} />
);
}
Object.assign(window, {
RAILO_NAV, RAILO_HOME, RAILO_GOLD, railoRasterImage,
RailoO, RailoLogo, SubNav, Reveal, SectionHead, PageHero,
StatPlaceholder, StatRow, ArgumentBand, ProcessSteps, FeatureGrid,
CTABand, RailoFooter, useRailoTheme, RailoBaseTweaks,
railoBtnPrimary: btnPrimary, railoBtnText: btnText,
});