/* barucom React redesign test bundle - generated 2026-05-02T22:34:05.983Z */
(function(){
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var __TWEAKS_STYLE = "\n  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;\n    max-height:calc(100vh - 32px);display:flex;flex-direction:column;\n    background:rgba(250,249,247,.78);color:#29261b;\n    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);\n    border:.5px solid rgba(255,255,255,.6);border-radius:14px;\n    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);\n    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}\n  .twk-hd{display:flex;align-items:center;justify-content:space-between;\n    padding:10px 8px 10px 14px;cursor:move;user-select:none}\n  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}\n  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);\n    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}\n  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}\n  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;\n    overflow-y:auto;overflow-x:hidden;min-height:0;\n    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}\n  .twk-body::-webkit-scrollbar{width:8px}\n  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}\n  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;\n    border:2px solid transparent;background-clip:content-box}\n  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);\n    border:2px solid transparent;background-clip:content-box}\n  .twk-row{display:flex;flex-direction:column;gap:5px}\n  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}\n  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;\n    color:rgba(41,38,27,.72)}\n  .twk-lbl>span:first-child{font-weight:500}\n  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}\n\n  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;\n    color:rgba(41,38,27,.45);padding:10px 0 0}\n  .twk-sect:first-child{padding-top:0}\n\n  .twk-field{appearance:none;width:100%;height:26px;padding:0 8px;\n    border:.5px solid rgba(0,0,0,.1);border-radius:7px;\n    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}\n  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}\n  select.twk-field{padding-right:22px;\n    background-image:url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>\");\n    background-repeat:no-repeat;background-position:right 8px center}\n\n  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;\n    border-radius:999px;background:rgba(0,0,0,.12);outline:none}\n  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;\n    width:14px;height:14px;border-radius:50%;background:#fff;\n    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}\n  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;\n    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}\n\n  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;\n    background:rgba(0,0,0,.06);user-select:none}\n  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;\n    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);\n    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}\n  .twk-seg.dragging .twk-seg-thumb{transition:none}\n  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;\n    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;\n    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;\n    overflow-wrap:anywhere}\n\n  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;\n    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}\n  .twk-toggle[data-on=\"1\"]{background:#34c759}\n  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;\n    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}\n  .twk-toggle[data-on=\"1\"] i{transform:translateX(14px)}\n\n  .twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;\n    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}\n  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;\n    user-select:none;padding-right:8px}\n  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;\n    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;\n    outline:none;color:inherit;-moz-appearance:textfield}\n  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{\n    -webkit-appearance:none;margin:0}\n  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}\n\n  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;\n    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}\n  .twk-btn:hover{background:rgba(0,0,0,.88)}\n  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}\n  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}\n\n  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;\n    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;\n    background:transparent;flex-shrink:0}\n  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}\n  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}\n  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}\n";
function useTweaks(defaults) {
  var _React$useState = React.useState(defaults),
    _React$useState2 = _slicedToArray(_React$useState, 2),
    values = _React$useState2[0],
    setValues = _React$useState2[1];
  var setTweak = React.useCallback(function (keyOrEdits, val) {
    var edits = _typeof(keyOrEdits) === 'object' && keyOrEdits !== null ? keyOrEdits : _defineProperty({}, keyOrEdits, val);
    setValues(function (prev) {
      return _objectSpread(_objectSpread({}, prev), edits);
    });
    window.parent.postMessage({
      type: '__edit_mode_set_keys',
      edits: edits
    }, '*');
  }, []);
  return [values, setTweak];
}
function TweaksPanel(_ref2) {
  var _ref2$title = _ref2.title,
    title = _ref2$title === void 0 ? 'Tweaks' : _ref2$title,
    children = _ref2.children;
  var _React$useState3 = React.useState(false),
    _React$useState4 = _slicedToArray(_React$useState3, 2),
    open = _React$useState4[0],
    setOpen = _React$useState4[1];
  var dragRef = React.useRef(null);
  var offsetRef = React.useRef({
    x: 16,
    y: 16
  });
  var PAD = 16;
  var clampToViewport = React.useCallback(function () {
    var panel = dragRef.current;
    if (!panel) return;
    var w = panel.offsetWidth,
      h = panel.offsetHeight;
    var maxRight = Math.max(PAD, window.innerWidth - w - PAD);
    var maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
    offsetRef.current = {
      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y))
    };
    panel.style.right = offsetRef.current.x + 'px';
    panel.style.bottom = offsetRef.current.y + 'px';
  }, []);
  React.useEffect(function () {
    if (!open) return;
    clampToViewport();
    if (typeof ResizeObserver === 'undefined') {
      window.addEventListener('resize', clampToViewport);
      return function () {
        return window.removeEventListener('resize', clampToViewport);
      };
    }
    var ro = new ResizeObserver(clampToViewport);
    ro.observe(document.documentElement);
    return function () {
      return ro.disconnect();
    };
  }, [open, clampToViewport]);
  React.useEffect(function () {
    var onMsg = function onMsg(e) {
      var _e$data;
      var t = e === null || e === void 0 || (_e$data = e.data) === null || _e$data === void 0 ? void 0 : _e$data.type;
      if (t === '__activate_edit_mode') setOpen(true);else if (t === '__deactivate_edit_mode') setOpen(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({
      type: '__edit_mode_available'
    }, '*');
    return function () {
      return window.removeEventListener('message', onMsg);
    };
  }, []);
  var dismiss = function dismiss() {
    setOpen(false);
    window.parent.postMessage({
      type: '__edit_mode_dismissed'
    }, '*');
  };
  var onDragStart = function onDragStart(e) {
    var panel = dragRef.current;
    if (!panel) return;
    var r = panel.getBoundingClientRect();
    var sx = e.clientX,
      sy = e.clientY;
    var startRight = window.innerWidth - r.right;
    var startBottom = window.innerHeight - r.bottom;
    var move = function move(ev) {
      offsetRef.current = {
        x: startRight - (ev.clientX - sx),
        y: startBottom - (ev.clientY - sy)
      };
      clampToViewport();
    };
    var _up = function up() {
      window.removeEventListener('mousemove', move);
      window.removeEventListener('mouseup', _up);
    };
    window.addEventListener('mousemove', move);
    window.addEventListener('mouseup', _up);
  };
  if (!open) return null;
  return React.createElement(React.Fragment, null, React.createElement("style", null, __TWEAKS_STYLE), React.createElement("div", {
    ref: dragRef,
    className: "twk-panel",
    "data-noncommentable": "",
    style: {
      right: offsetRef.current.x,
      bottom: offsetRef.current.y
    }
  }, React.createElement("div", {
    className: "twk-hd",
    onMouseDown: onDragStart
  }, React.createElement("b", null, title), React.createElement("button", {
    className: "twk-x",
    "aria-label": "Close tweaks",
    onMouseDown: function onMouseDown(e) {
      return e.stopPropagation();
    },
    onClick: dismiss
  }, "\u2715")), React.createElement("div", {
    className: "twk-body"
  }, children)));
}
function TweakSection(_ref3) {
  var label = _ref3.label,
    children = _ref3.children;
  return React.createElement(React.Fragment, null, React.createElement("div", {
    className: "twk-sect"
  }, label), children);
}
function TweakRow(_ref4) {
  var label = _ref4.label,
    value = _ref4.value,
    children = _ref4.children,
    _ref4$inline = _ref4.inline,
    inline = _ref4$inline === void 0 ? false : _ref4$inline;
  return React.createElement("div", {
    className: inline ? 'twk-row twk-row-h' : 'twk-row'
  }, React.createElement("div", {
    className: "twk-lbl"
  }, React.createElement("span", null, label), value != null && React.createElement("span", {
    className: "twk-val"
  }, value)), children);
}
function TweakSlider(_ref5) {
  var label = _ref5.label,
    value = _ref5.value,
    _ref5$min = _ref5.min,
    min = _ref5$min === void 0 ? 0 : _ref5$min,
    _ref5$max = _ref5.max,
    max = _ref5$max === void 0 ? 100 : _ref5$max,
    _ref5$step = _ref5.step,
    step = _ref5$step === void 0 ? 1 : _ref5$step,
    _ref5$unit = _ref5.unit,
    unit = _ref5$unit === void 0 ? '' : _ref5$unit,
    _onChange = _ref5.onChange;
  return React.createElement(TweakRow, {
    label: label,
    value: "".concat(value).concat(unit)
  }, React.createElement("input", {
    type: "range",
    className: "twk-slider",
    min: min,
    max: max,
    step: step,
    value: value,
    onChange: function onChange(e) {
      return _onChange(Number(e.target.value));
    }
  }));
}
function TweakToggle(_ref6) {
  var label = _ref6.label,
    value = _ref6.value,
    onChange = _ref6.onChange;
  return React.createElement("div", {
    className: "twk-row twk-row-h"
  }, React.createElement("div", {
    className: "twk-lbl"
  }, React.createElement("span", null, label)), React.createElement("button", {
    type: "button",
    className: "twk-toggle",
    "data-on": value ? '1' : '0',
    role: "switch",
    "aria-checked": !!value,
    onClick: function onClick() {
      return onChange(!value);
    }
  }, React.createElement("i", null)));
}
function TweakRadio(_ref7) {
  var label = _ref7.label,
    value = _ref7.value,
    options = _ref7.options,
    onChange = _ref7.onChange;
  var trackRef = React.useRef(null);
  var _React$useState5 = React.useState(false),
    _React$useState6 = _slicedToArray(_React$useState5, 2),
    dragging = _React$useState6[0],
    setDragging = _React$useState6[1];
  var opts = options.map(function (o) {
    return _typeof(o) === 'object' ? o : {
      value: o,
      label: o
    };
  });
  var idx = Math.max(0, opts.findIndex(function (o) {
    return o.value === value;
  }));
  var n = opts.length;
  var valueRef = React.useRef(value);
  valueRef.current = value;
  var segAt = function segAt(clientX) {
    var r = trackRef.current.getBoundingClientRect();
    var inner = r.width - 4;
    var i = Math.floor((clientX - r.left - 2) / inner * n);
    return opts[Math.max(0, Math.min(n - 1, i))].value;
  };
  var onPointerDown = function onPointerDown(e) {
    setDragging(true);
    var v0 = segAt(e.clientX);
    if (v0 !== valueRef.current) onChange(v0);
    var move = function move(ev) {
      if (!trackRef.current) return;
      var v = segAt(ev.clientX);
      if (v !== valueRef.current) onChange(v);
    };
    var _up2 = function up() {
      setDragging(false);
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', _up2);
    };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', _up2);
  };
  return React.createElement(TweakRow, {
    label: label
  }, React.createElement("div", {
    ref: trackRef,
    role: "radiogroup",
    onPointerDown: onPointerDown,
    className: dragging ? 'twk-seg dragging' : 'twk-seg'
  }, React.createElement("div", {
    className: "twk-seg-thumb",
    style: {
      left: "calc(2px + ".concat(idx, " * (100% - 4px) / ").concat(n, ")"),
      width: "calc((100% - 4px) / ".concat(n, ")")
    }
  }), opts.map(function (o) {
    return React.createElement("button", {
      key: o.value,
      type: "button",
      role: "radio",
      "aria-checked": o.value === value
    }, o.label);
  })));
}
function TweakSelect(_ref8) {
  var label = _ref8.label,
    value = _ref8.value,
    options = _ref8.options,
    _onChange2 = _ref8.onChange;
  return React.createElement(TweakRow, {
    label: label
  }, React.createElement("select", {
    className: "twk-field",
    value: value,
    onChange: function onChange(e) {
      return _onChange2(e.target.value);
    }
  }, options.map(function (o) {
    var v = _typeof(o) === 'object' ? o.value : o;
    var l = _typeof(o) === 'object' ? o.label : o;
    return React.createElement("option", {
      key: v,
      value: v
    }, l);
  })));
}
function TweakText(_ref9) {
  var label = _ref9.label,
    value = _ref9.value,
    placeholder = _ref9.placeholder,
    _onChange3 = _ref9.onChange;
  return React.createElement(TweakRow, {
    label: label
  }, React.createElement("input", {
    className: "twk-field",
    type: "text",
    value: value,
    placeholder: placeholder,
    onChange: function onChange(e) {
      return _onChange3(e.target.value);
    }
  }));
}
function TweakNumber(_ref0) {
  var label = _ref0.label,
    value = _ref0.value,
    min = _ref0.min,
    max = _ref0.max,
    _ref0$step = _ref0.step,
    step = _ref0$step === void 0 ? 1 : _ref0$step,
    _ref0$unit = _ref0.unit,
    unit = _ref0$unit === void 0 ? '' : _ref0$unit,
    _onChange4 = _ref0.onChange;
  var clamp = function clamp(n) {
    if (min != null && n < min) return min;
    if (max != null && n > max) return max;
    return n;
  };
  var startRef = React.useRef({
    x: 0,
    val: 0
  });
  var onScrubStart = function onScrubStart(e) {
    e.preventDefault();
    startRef.current = {
      x: e.clientX,
      val: value
    };
    var decimals = (String(step).split('.')[1] || '').length;
    var move = function move(ev) {
      var dx = ev.clientX - startRef.current.x;
      var raw = startRef.current.val + dx * step;
      var snapped = Math.round(raw / step) * step;
      _onChange4(clamp(Number(snapped.toFixed(decimals))));
    };
    var _up3 = function up() {
      window.removeEventListener('pointermove', move);
      window.removeEventListener('pointerup', _up3);
    };
    window.addEventListener('pointermove', move);
    window.addEventListener('pointerup', _up3);
  };
  return React.createElement("div", {
    className: "twk-num"
  }, React.createElement("span", {
    className: "twk-num-lbl",
    onPointerDown: onScrubStart
  }, label), React.createElement("input", {
    type: "number",
    value: value,
    min: min,
    max: max,
    step: step,
    onChange: function onChange(e) {
      return _onChange4(clamp(Number(e.target.value)));
    }
  }), unit && React.createElement("span", {
    className: "twk-num-unit"
  }, unit));
}
function TweakColor(_ref1) {
  var label = _ref1.label,
    value = _ref1.value,
    _onChange5 = _ref1.onChange;
  return React.createElement("div", {
    className: "twk-row twk-row-h"
  }, React.createElement("div", {
    className: "twk-lbl"
  }, React.createElement("span", null, label)), React.createElement("input", {
    type: "color",
    className: "twk-swatch",
    value: value,
    onChange: function onChange(e) {
      return _onChange5(e.target.value);
    }
  }));
}
function TweakButton(_ref10) {
  var label = _ref10.label,
    onClick = _ref10.onClick,
    _ref10$secondary = _ref10.secondary,
    secondary = _ref10$secondary === void 0 ? false : _ref10$secondary;
  return React.createElement("button", {
    type: "button",
    className: secondary ? 'twk-btn secondary' : 'twk-btn',
    onClick: onClick
  }, label);
}
Object.assign(window, {
  useTweaks: useTweaks,
  TweaksPanel: TweaksPanel,
  TweakSection: TweakSection,
  TweakRow: TweakRow,
  TweakSlider: TweakSlider,
  TweakToggle: TweakToggle,
  TweakRadio: TweakRadio,
  TweakSelect: TweakSelect,
  TweakText: TweakText,
  TweakNumber: TweakNumber,
  TweakColor: TweakColor,
  TweakButton: TweakButton
});
var TWEAK_DEFAULTS = {
  "accent": "#1E96EB",
  "accentSecondary": "#f59e2b",
  "heroStyle": "hero-stack",
  "navStyle": "pill"
};
window.TWEAK_DEFAULTS = TWEAK_DEFAULTS;
var NAV_ITEMS = [{
  id: 'home',
  label: 'Home'
}, {
  id: 'about',
  label: 'baru com'
}, {
  id: 'it',
  label: 'IT-Infrastruktur',
  kern: true
}, {
  id: 'elektro',
  label: 'Elektro-Infrastruktur'
}, {
  id: 'automation',
  label: 'Software Automation'
}, {
  id: 'lwl',
  label: 'LWL-Verkabelung'
}, {
  id: 'cloud',
  label: 'Hosting'
}, {
  id: 'remote',
  label: 'Remote Support'
}, {
  id: 'contact',
  label: 'Kontakt'
}];
window.NAV_ITEMS = NAV_ITEMS;
function Nav(_ref11) {
  var page = _ref11.page,
    setPage = _ref11.setPage,
    tweaks = _ref11.tweaks;
  var accent = tweaks.accent;
  return React.createElement("header", {
    style: {
      position: 'sticky',
      top: 0,
      zIndex: 50,
      background: 'rgba(246,248,250,0.96)',
      backdropFilter: 'saturate(140%) blur(12px)',
      WebkitBackdropFilter: 'saturate(140%) blur(12px)',
      borderBottom: '1px solid var(--baru-rule)'
    }
  }, React.createElement("nav", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'auto 1fr auto',
      alignItems: 'center',
      padding: '14px 32px',
      gap: 32,
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("a", {
    onClick: function onClick() {
      return setPage('home');
    },
    style: {
      display: 'flex',
      alignItems: 'center',
      cursor: 'pointer'
    }
  }, React.createElement("img", {
    src: "https://barucom.de/wp-content/uploads/2026/05/baru-logo-tight.png",
    alt: "baru com",
    style: {
      height: 38,
      width: 'auto',
      display: 'block'
    }
  })), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 4,
      justifyContent: 'center',
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 13
    }
  }, NAV_ITEMS.filter(function (n) {
    return n.id !== 'home' && n.id !== 'contact' && n.id !== 'remote';
  }).map(function (n) {
    var active = page === n.id;
    return React.createElement("a", {
      key: n.id,
      onClick: function onClick() {
        return setPage(n.id);
      },
      style: {
        padding: '8px 14px',
        borderRadius: 999,
        color: active ? '#fff' : 'var(--baru-ink)',
        background: active ? accent : 'transparent',
        textDecoration: 'none',
        cursor: 'pointer',
        fontWeight: active ? 600 : 500,
        transition: 'all 0.18s',
        position: 'relative',
        whiteSpace: 'nowrap'
      },
      onMouseEnter: function onMouseEnter(e) {
        if (!active) e.currentTarget.style.background = 'var(--baru-rule)';
      },
      onMouseLeave: function onMouseLeave(e) {
        if (!active) e.currentTarget.style.background = 'transparent';
      }
    }, n.label, n.kern && !active && React.createElement("span", {
      style: {
        position: 'absolute',
        top: 4,
        right: 4,
        width: 5,
        height: 5,
        borderRadius: '50%',
        background: accent
      }
    }));
  })), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 8,
      alignItems: 'center'
    }
  }, React.createElement("a", {
    onClick: function onClick() {
      return setPage('remote');
    },
    style: {
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 13,
      padding: '8px 14px',
      borderRadius: 999,
      background: accent,
      color: '#fff',
      textDecoration: 'none',
      cursor: 'pointer',
      fontWeight: 600,
      whiteSpace: 'nowrap',
      boxShadow: "0 0 0 4px ".concat(accent, "22")
    }
  }, React.createElement("span", {
    style: {
      width: 8,
      height: 8,
      borderRadius: '50%',
      background: '#fff',
      boxShadow: '0 0 0 0 #ffffff80',
      animation: 'baruPulse 2.4s ease-out infinite'
    }
  }), "Remote Support"), React.createElement("a", {
    href: "tel:+4930233202620",
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: 'var(--baru-muted)',
      textDecoration: 'none',
      padding: '8px 12px',
      whiteSpace: 'nowrap'
    }
  }, "030 233 202 620"), React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      border: 'none',
      padding: '10px 18px',
      borderRadius: 999,
      fontSize: 13,
      fontWeight: 600,
      cursor: 'pointer',
      display: 'flex',
      alignItems: 'center',
      gap: 6
    }
  }, "Beratung ", React.createElement("span", {
    "aria-hidden": true
  }, "\u2192")))));
}
function Footer(_ref12) {
  var setPage = _ref12.setPage,
    tweaks = _ref12.tweaks;
  return React.createElement("footer", {
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      padding: '80px 48px 32px',
      marginTop: 80
    }
  }, React.createElement("div", {
    style: {
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '2fr 1fr 1fr 1fr 1fr',
      gap: 40,
      paddingBottom: 64,
      borderBottom: '1px solid #ffffff15'
    }
  }, React.createElement("div", null, React.createElement("img", {
    src: "https://barucom.de/wp-content/uploads/2026/05/baru-logo-tight.png",
    alt: "baru com",
    style: {
      height: 36,
      width: 'auto',
      display: 'block',
      filter: 'brightness(0) invert(1)'
    }
  }), React.createElement("div", {
    style: {
      fontSize: 14,
      opacity: 0.7,
      marginTop: 20,
      lineHeight: 1.6,
      maxWidth: 280
    }
  }, "Wir verbinden zwei Welten."), React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      opacity: 0.5,
      marginTop: 24,
      lineHeight: 1.7
    }
  }, "baru com UG", React.createElement("br", null), "Manteuffelstra\xDFe 47", React.createElement("br", null), "12103 Berlin")), [['Leistungen', [['IT-Infrastruktur', 'it'], ['Elektro-Infrastruktur', 'elektro'], ['Cloud Services', 'cloud'], ['IT-Support & Helpdesk', 'it']]], ['Unternehmen', [['baru com', 'about'], ['Kontakt', 'contact'], ['Remote Support', 'remote']]], ['Rechtliches', [['Impressum', null], ['Datenschutz', null], ['Cookie-Richtlinie', null], ['AGB', null]]], ['Folgen', [['LinkedIn', null], ['Instagram', null], ['Facebook', null]]]].map(function (_ref13) {
    var _ref14 = _slicedToArray(_ref13, 2),
      title = _ref14[0],
      items = _ref14[1];
    return React.createElement("div", {
      key: title
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: tweaks.accent,
        letterSpacing: '0.1em',
        textTransform: 'uppercase',
        marginBottom: 18
      }
    }, title), React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 10
      }
    }, items.map(function (_ref15) {
      var _ref16 = _slicedToArray(_ref15, 2),
        t = _ref16[0],
        p = _ref16[1];
      return React.createElement("a", {
        key: t,
        onClick: function onClick() {
          return p && setPage(p);
        },
        style: {
          fontSize: 14,
          color: '#fff',
          textDecoration: 'none',
          cursor: p ? 'pointer' : 'default',
          opacity: 0.85,
          transition: 'opacity 0.15s'
        },
        onMouseEnter: function onMouseEnter(e) {
          return e.currentTarget.style.opacity = 1;
        },
        onMouseLeave: function onMouseLeave(e) {
          return e.currentTarget.style.opacity = 0.85;
        }
      }, t);
    })));
  })), React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      paddingTop: 24,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      opacity: 0.5
    }
  }, React.createElement("span", null, "\xA9 2026 baru com UG \xB7 Alle Rechte vorbehalten"), React.createElement("span", null, "Made in Berlin"))));
}
function PrimaryBtn(_ref17) {
  var children = _ref17.children,
    onClick = _ref17.onClick,
    accent = _ref17.accent,
    _ref17$size = _ref17.size,
    size = _ref17$size === void 0 ? 'md' : _ref17$size;
  var padding = size === 'lg' ? '16px 28px' : '12px 22px';
  var fontSize = size === 'lg' ? 15 : 14;
  return React.createElement("button", {
    onClick: onClick,
    style: {
      background: accent || 'var(--baru-ink)',
      color: '#fff',
      border: 'none',
      padding: padding,
      borderRadius: 999,
      fontSize: fontSize,
      fontWeight: 600,
      cursor: 'pointer',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      transition: 'transform 0.12s ease, filter 0.12s'
    },
    onMouseEnter: function onMouseEnter(e) {
      e.currentTarget.style.transform = 'translateY(-1px)';
      e.currentTarget.style.filter = 'brightness(1.05)';
    },
    onMouseLeave: function onMouseLeave(e) {
      e.currentTarget.style.transform = 'none';
      e.currentTarget.style.filter = 'none';
    }
  }, children);
}
function GhostBtn(_ref18) {
  var children = _ref18.children,
    onClick = _ref18.onClick,
    _ref18$size = _ref18.size,
    size = _ref18$size === void 0 ? 'md' : _ref18$size;
  var padding = size === 'lg' ? '16px 28px' : '12px 22px';
  var fontSize = size === 'lg' ? 15 : 14;
  return React.createElement("button", {
    onClick: onClick,
    style: {
      background: 'transparent',
      color: 'var(--baru-ink)',
      border: '1.5px solid var(--baru-ink)',
      padding: padding,
      borderRadius: 999,
      fontSize: fontSize,
      fontWeight: 600,
      cursor: 'pointer',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8,
      transition: 'all 0.12s'
    },
    onMouseEnter: function onMouseEnter(e) {
      e.currentTarget.style.background = 'var(--baru-ink)';
      e.currentTarget.style.color = '#fff';
    },
    onMouseLeave: function onMouseLeave(e) {
      e.currentTarget.style.background = 'transparent';
      e.currentTarget.style.color = 'var(--baru-ink)';
    }
  }, children);
}
function SectionTag(_ref19) {
  var children = _ref19.children,
    color = _ref19.color;
  return React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: color || 'var(--baru-muted)',
      textTransform: 'uppercase',
      letterSpacing: '0.12em',
      display: 'flex',
      alignItems: 'center',
      gap: 8
    }
  }, React.createElement("span", {
    style: {
      width: 18,
      height: 1,
      background: color || 'var(--baru-muted)'
    }
  }), children);
}
function Card(_ref20) {
  var children = _ref20.children,
    _ref20$style = _ref20.style,
    style = _ref20$style === void 0 ? {} : _ref20$style,
    _ref20$hover = _ref20.hover,
    hover = _ref20$hover === void 0 ? true : _ref20$hover;
  var _React$useState7 = React.useState(false),
    _React$useState8 = _slicedToArray(_React$useState7, 2),
    h = _React$useState8[0],
    setH = _React$useState8[1];
  return React.createElement("div", {
    onMouseEnter: function onMouseEnter() {
      return hover && setH(true);
    },
    onMouseLeave: function onMouseLeave() {
      return hover && setH(false);
    },
    style: _objectSpread({
      background: 'var(--baru-paper)',
      border: '1px solid var(--baru-rule)',
      borderRadius: 20,
      padding: 28,
      transition: 'transform 0.18s, box-shadow 0.18s, border-color 0.18s',
      transform: h ? 'translateY(-2px)' : 'none',
      boxShadow: h ? '0 12px 32px rgba(26,36,44,0.08)' : 'none'
    }, style)
  }, children);
}
function StackVisual(_ref21) {
  var accent = _ref21.accent;
  return React.createElement("svg", {
    viewBox: "0 0 400 280",
    width: "100%",
    height: "100%",
    style: {
      display: 'block'
    }
  }, React.createElement("defs", null, React.createElement("linearGradient", {
    id: "stackGrad",
    x1: "0",
    x2: "0",
    y1: "0",
    y2: "1"
  }, React.createElement("stop", {
    offset: "0%",
    stopColor: accent,
    stopOpacity: "0.15"
  }), React.createElement("stop", {
    offset: "100%",
    stopColor: accent,
    stopOpacity: "0"
  }))), [{
    y: 30,
    l: 'Endgeräte',
    icons: ['💻', '📱', '🖥️']
  }, {
    y: 90,
    l: 'Netzwerk',
    icons: ['↔']
  }, {
    y: 150,
    l: 'Server',
    icons: ['▮']
  }, {
    y: 210,
    l: 'Storage',
    icons: ['◫']
  }].map(function (row, i) {
    return null;
  }), React.createElement("g", null, React.createElement("rect", {
    x: "40",
    y: "20",
    width: "64",
    height: "44",
    rx: "4",
    fill: "none",
    stroke: accent,
    strokeWidth: "1.5"
  }), React.createElement("rect", {
    x: "50",
    y: "28",
    width: "44",
    height: "22",
    rx: "2",
    fill: accent,
    opacity: "0.15"
  }), React.createElement("rect", {
    x: "168",
    y: "20",
    width: "64",
    height: "44",
    rx: "4",
    fill: "none",
    stroke: accent,
    strokeWidth: "1.5"
  }), React.createElement("rect", {
    x: "178",
    y: "28",
    width: "44",
    height: "22",
    rx: "2",
    fill: accent,
    opacity: "0.15"
  }), React.createElement("rect", {
    x: "296",
    y: "20",
    width: "64",
    height: "44",
    rx: "4",
    fill: "none",
    stroke: accent,
    strokeWidth: "1.5"
  }), React.createElement("rect", {
    x: "306",
    y: "28",
    width: "44",
    height: "22",
    rx: "2",
    fill: accent,
    opacity: "0.15"
  })), React.createElement("line", {
    x1: "72",
    y1: "64",
    x2: "200",
    y2: "120",
    stroke: accent,
    strokeWidth: "1.5"
  }), React.createElement("line", {
    x1: "200",
    y1: "64",
    x2: "200",
    y2: "120",
    stroke: accent,
    strokeWidth: "1.5"
  }), React.createElement("line", {
    x1: "328",
    y1: "64",
    x2: "200",
    y2: "120",
    stroke: accent,
    strokeWidth: "1.5"
  }), React.createElement("rect", {
    x: "140",
    y: "120",
    width: "120",
    height: "32",
    rx: "4",
    fill: accent
  }), React.createElement("text", {
    x: "200",
    y: "141",
    textAnchor: "middle",
    fill: "#fff",
    fontFamily: "JetBrains Mono",
    fontSize: "11",
    fontWeight: "600"
  }, "CORE-SWITCH"), React.createElement("line", {
    x1: "200",
    y1: "152",
    x2: "200",
    y2: "180",
    stroke: accent,
    strokeWidth: "1.5",
    strokeDasharray: "3 3"
  }), React.createElement("rect", {
    x: "100",
    y: "180",
    width: "200",
    height: "80",
    rx: "4",
    fill: "none",
    stroke: accent,
    strokeWidth: "1.5"
  }), [0, 1, 2, 3].map(function (i) {
    return React.createElement("g", {
      key: i
    }, React.createElement("rect", {
      x: "110",
      y: 188 + i * 16,
      width: "180",
      height: "12",
      rx: "1",
      fill: accent,
      opacity: 0.7 - i * 0.13
    }), React.createElement("circle", {
      cx: "282",
      cy: 194 + i * 16,
      r: "2",
      fill: "#fff"
    }));
  }), React.createElement("rect", {
    x: "0",
    y: "0",
    width: "400",
    height: "280",
    fill: "url(#stackGrad)",
    pointerEvents: "none"
  }));
}
window.Nav = Nav;
window.Footer = Footer;
window.PrimaryBtn = PrimaryBtn;
window.GhostBtn = GhostBtn;
window.SectionTag = SectionTag;
window.Card = Card;
window.StackVisual = StackVisual;
function PageHome(_ref22) {
  var setPage = _ref22.setPage,
    tweaks = _ref22.tweaks;
  var accent = tweaks.accent;
  var heroStyle = tweaks.heroStyle;
  return React.createElement("div", null, heroStyle === 'hero-bigtype' && React.createElement(HeroBigType, {
    accent: accent,
    setPage: setPage
  }), heroStyle === 'hero-split' && React.createElement(HeroSplit, {
    accent: accent,
    setPage: setPage
  }), (heroStyle === 'hero-stack' || !heroStyle) && React.createElement(HeroStack, {
    accent: accent,
    setPage: setPage
  }), React.createElement(Leistungen, {
    accent: accent,
    setPage: setPage
  }), React.createElement(Kennzahlen, {
    accent: accent
  }), React.createElement(Werte, {
    accent: accent
  }), React.createElement(Process, {
    accent: accent
  }), React.createElement(CtaStrip, {
    accent: accent,
    setPage: setPage
  }));
}
function HeroStack(_ref23) {
  var accent = _ref23.accent,
    setPage = _ref23.setPage;
  return React.createElement("section", {
    style: {
      padding: '80px 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "baru com \xB7 Berlin"), React.createElement("h1", {
    style: {
      fontSize: 'clamp(64px, 11vw, 200px)',
      lineHeight: 0.88,
      letterSpacing: '-0.05em',
      fontWeight: 800,
      margin: '32px 0 0',
      textWrap: 'balance'
    }
  }, "IT, die ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "einfach funktioniert"), "."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.2fr 1fr',
      gap: 64,
      marginTop: 64,
      alignItems: 'end'
    }
  }, React.createElement("p", {
    style: {
      fontSize: 24,
      lineHeight: 1.35,
      fontWeight: 400,
      margin: 0,
      letterSpacing: '-0.005em',
      maxWidth: 640,
      color: 'var(--baru-ink2)'
    }
  }, "IT-Infrastruktur, Software-Automation, LWL-Verkabelung und Hosting \u2013 aus einer Hand. Wir planen, betreuen und sichern Ihre Systeme, damit Sie st\xF6rungsfrei arbeiten k\xF6nnen."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      justifyContent: 'flex-end',
      flexWrap: 'wrap'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    size: "lg",
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Jetzt beraten \u2192"), React.createElement(window.GhostBtn, {
    size: "lg",
    onClick: function onClick() {
      return setPage('it');
    }
  }, "Leistungen ansehen"))));
}
function HeroSplit(_ref24) {
  var accent = _ref24.accent,
    setPage = _ref24.setPage;
  return React.createElement("section", {
    style: {
      padding: '40px 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr',
      gap: 64,
      alignItems: 'center',
      minHeight: 600
    }
  }, React.createElement("div", null, React.createElement(window.SectionTag, {
    color: accent
  }, "baru com \xB7 Berlin"), React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.95,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: '24px 0 0',
      textWrap: 'balance'
    }
  }, "IT, die ", React.createElement("span", {
    style: {
      color: accent,
      fontStyle: 'italic',
      fontWeight: 500
    }
  }, "einfach funktioniert"), "."), React.createElement("p", {
    style: {
      fontSize: 22,
      lineHeight: 1.4,
      marginTop: 32,
      maxWidth: 560,
      color: 'var(--baru-ink2)'
    }
  }, "Infrastruktur \xB7 Automation \xB7 LWL \xB7 Hosting \u2014 aus einer Hand."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      marginTop: 40
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    size: "lg",
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Jetzt beraten \u2192"), React.createElement(window.GhostBtn, {
    size: "lg",
    onClick: function onClick() {
      return setPage('it');
    }
  }, "Leistungen"))), React.createElement("div", {
    style: {
      background: 'var(--baru-paper)',
      border: '1px solid var(--baru-rule)',
      borderRadius: 24,
      padding: 24,
      aspectRatio: '4/5',
      display: 'flex',
      flexDirection: 'column'
    }
  }, React.createElement("div", {
    style: {
      flex: 1
    }
  }, React.createElement(window.StackVisual, {
    accent: accent
  })), React.createElement("div", {
    style: {
      padding: 16,
      marginTop: 16,
      background: 'var(--baru-off)',
      borderRadius: 12,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      color: 'var(--baru-muted)'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between'
    }
  }, React.createElement("span", null, "baru.cloud \xB7 DE-1"), React.createElement("span", {
    style: {
      color: '#0a8'
    }
  }, "\u25CF online")), React.createElement("div", {
    style: {
      marginTop: 6,
      opacity: 0.7
    }
  }, "uptime 99.98% \xB7 last 30d")))));
}
function HeroBigType(_ref25) {
  var accent = _ref25.accent,
    setPage = _ref25.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 120px',
      maxWidth: 1640,
      margin: '0 auto'
    }
  }, React.createElement("h1", {
    style: {
      fontSize: 'clamp(72px, 16vw, 280px)',
      lineHeight: 0.82,
      letterSpacing: '-0.06em',
      fontWeight: 900,
      margin: 0,
      textWrap: 'balance'
    }
  }, "IT, die", React.createElement("br", null), React.createElement("span", {
    style: {
      color: accent
    }
  }, "funktioniert"), "."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 40,
      marginTop: 80
    }
  }, React.createElement("p", {
    style: {
      gridColumn: '1 / 3',
      fontSize: 28,
      lineHeight: 1.3,
      margin: 0,
      fontWeight: 400,
      color: 'var(--baru-ink2)'
    }
  }, "Infrastruktur \xB7 Automation \xB7 LWL \xB7 Hosting \u2014 aus einer Hand."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      alignItems: 'flex-end',
      flexWrap: 'wrap'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    size: "lg",
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Jetzt beraten"), React.createElement(window.GhostBtn, {
    size: "lg",
    onClick: function onClick() {
      return setPage('it');
    }
  }, "Leistungen"))));
}
function Leistungen(_ref26) {
  var accent = _ref26.accent,
    setPage = _ref26.setPage;
  var items = [{
    t: 'IT-Infrastruktur',
    d: 'Planung, Betreuung und Wartung von Servern, Netzwerken und Endgeräten – das Rückgrat Ihres Unternehmens.',
    page: 'it'
  }, {
    t: 'Software Automation',
    d: 'Workflows, APIs, Skripte – wir automatisieren wiederkehrende Prozesse und sparen Ihnen Zeit und Fehler.',
    page: 'automation'
  }, {
    t: 'LWL-Verkabelung',
    d: 'Glasfaser-Strecken für Backbone, Etagen und Standorte. Geplant, gespleißt, OTDR-gemessen.',
    page: 'lwl'
  }, {
    t: 'Hosting & Cloud',
    d: 'Virtuelle Server, Webhosting, Backup & Storage in deutschen Rechenzentren – DSGVO-konform.',
    page: 'cloud'
  }, {
    t: 'IT-Service & Helpdesk',
    d: 'Schneller Support bei Störungen und Fragen – persönlich, mit Reaktionszeiten unter 2 Stunden.',
    page: 'it'
  }, {
    t: 'Microsoft 365',
    d: 'Teams, SharePoint, Exchange. Migration, Tenant-Verwaltung und Lizenzierung aus einer Hand.',
    page: 'cloud'
  }];
  return React.createElement("section", {
    style: {
      background: 'var(--baru-paper)',
      borderTop: '1px solid var(--baru-rule)',
      borderBottom: '1px solid var(--baru-rule)',
      padding: '120px 48px'
    }
  }, React.createElement("div", {
    style: {
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 56
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Unsere Kernleistungen"), React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 64px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "Vier Schwerpunkte. Ein Partner."), React.createElement("p", {
    style: {
      fontSize: 20,
      lineHeight: 1.4,
      marginTop: 20,
      color: 'var(--baru-muted)',
      maxWidth: 720
    }
  }, "Infrastruktur, Automation, LWL und Hosting \u2013 wir planen, bauen und betreuen die Systeme, auf denen Ihr Gesch\xE4ft l\xE4uft."))), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 16
    }
  }, items.map(function (it, i) {
    return React.createElement(LeistungCard, {
      key: i,
      it: it,
      accent: accent,
      setPage: setPage,
      num: String(i + 1).padStart(2, '0')
    });
  }))));
}
function LeistungCard(_ref27) {
  var it = _ref27.it,
    accent = _ref27.accent,
    setPage = _ref27.setPage,
    num = _ref27.num;
  var _React$useState9 = React.useState(false),
    _React$useState0 = _slicedToArray(_React$useState9, 2),
    hover = _React$useState0[0],
    setHover = _React$useState0[1];
  return React.createElement("div", {
    onMouseEnter: function onMouseEnter() {
      return setHover(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setHover(false);
    },
    onClick: function onClick() {
      return setPage(it.page);
    },
    style: {
      background: 'var(--baru-off)',
      border: '1px solid var(--baru-rule)',
      borderRadius: 20,
      padding: 32,
      cursor: 'pointer',
      minHeight: 280,
      display: 'flex',
      flexDirection: 'column',
      transition: 'transform 0.18s, box-shadow 0.18s, border-color 0.18s',
      transform: hover ? 'translateY(-3px)' : 'none',
      boxShadow: hover ? '0 16px 36px rgba(26,36,44,0.10)' : 'none',
      borderColor: hover ? accent : 'var(--baru-rule)'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'flex-start'
    }
  }, React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: accent,
      fontWeight: 600
    }
  }, num), React.createElement("div", {
    style: {
      width: 32,
      height: 32,
      borderRadius: '50%',
      border: '1.5px solid var(--baru-rule)',
      display: 'grid',
      placeItems: 'center',
      fontSize: 13,
      transition: 'transform 0.2s',
      transform: hover ? 'translate(2px,-2px) rotate(-12deg)' : 'none',
      color: hover ? accent : 'var(--baru-ink)'
    }
  }, "\u2192")), React.createElement("div", {
    style: {
      marginTop: 'auto'
    }
  }, React.createElement("h3", {
    style: {
      fontSize: 26,
      lineHeight: 1.1,
      letterSpacing: '-0.02em',
      fontWeight: 700,
      margin: '0 0 12px'
    }
  }, it.t), React.createElement("p", {
    style: {
      fontSize: 15,
      lineHeight: 1.55,
      color: 'var(--baru-muted)',
      margin: 0
    }
  }, it.d)));
}
function Kennzahlen(_ref28) {
  var accent = _ref28.accent;
  return React.createElement("section", {
    style: {
      padding: '120px 48px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      borderRadius: 24,
      padding: '80px 64px',
      position: 'relative',
      overflow: 'hidden'
    }
  }, React.createElement("div", {
    "aria-hidden": true,
    style: {
      position: 'absolute',
      top: -40,
      left: -20,
      right: -20,
      fontSize: 320,
      fontWeight: 800,
      letterSpacing: '-0.06em',
      color: '#ffffff05',
      lineHeight: 1,
      pointerEvents: 'none',
      whiteSpace: 'nowrap'
    }
  }, "baru baru baru"), React.createElement("div", {
    style: {
      position: 'relative',
      maxWidth: 1100
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "baru com Performance"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 3.5vw, 56px)',
      lineHeight: 1.1,
      fontWeight: 600,
      letterSpacing: '-0.02em',
      margin: '24px 0 0',
      textWrap: 'pretty',
      maxWidth: 880
    }
  }, "Wichtige Kennzahlen zu unserer ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "Arbeit und unserem Einfluss"), "."), React.createElement("p", {
    style: {
      fontSize: 18,
      marginTop: 20,
      opacity: 0.7,
      maxWidth: 640,
      lineHeight: 1.5
    }
  }, "Unsere Ergebnisse zeigen, dass wir halten, was wir versprechen \u2013 zuverl\xE4ssig, effizient und kundenorientiert."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: 48,
      marginTop: 64,
      paddingTop: 32,
      borderTop: '1px solid #ffffff15',
      maxWidth: 720
    }
  }, [['100+', 'Projekte abgeschlossen'], ['98%', 'Kundenbetreuung']].map(function (_ref29) {
    var _ref30 = _slicedToArray(_ref29, 2),
      n = _ref30[0],
      l = _ref30[1];
    return React.createElement("div", {
      key: l
    }, React.createElement("div", {
      style: {
        fontSize: 'clamp(48px, 6vw, 96px)',
        fontWeight: 700,
        letterSpacing: '-0.04em',
        lineHeight: 1
      }
    }, n), React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12,
        opacity: 0.6,
        marginTop: 16,
        textTransform: 'uppercase',
        letterSpacing: '0.08em'
      }
    }, l));
  })))));
}
function Werte(_ref31) {
  var accent = _ref31.accent;
  var werte = [['Schnelligkeit', 'kurze Reaktionszeiten'], ['Kompetenz', 'fundiertes Wissen in IT & Elektrotechnik'], ['Zukunftssicherheit', 'Lösungen, die mit Ihrem Unternehmen wachsen'], ['Persönlichkeit', 'direkter Kontakt statt Hotline']];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 56
    }
  }, React.createElement(window.SectionTag, null, "Unsere Werte"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 64px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "Moderne Technik bringt nur dann Mehrwert, wenn sie ", React.createElement("span", {
    style: {
      color: 'var(--baru-muted)',
      fontWeight: 400
    }
  }, "verl\xE4sslich funktioniert"), ".")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 16
    }
  }, werte.map(function (_ref32, i) {
    var _ref33 = _slicedToArray(_ref32, 2),
      t = _ref33[0],
      d = _ref33[1];
    return React.createElement("div", {
      key: t,
      style: {
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)',
        borderRadius: 16,
        padding: 28,
        minHeight: 200,
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600
      }
    }, "0", i + 1), React.createElement("div", {
      style: {
        fontSize: 24,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        marginTop: 32
      }
    }, t), React.createElement("div", {
      style: {
        fontSize: 14,
        color: 'var(--baru-muted)',
        marginTop: 8,
        lineHeight: 1.55
      }
    }, d));
  })));
}
function Process(_ref34) {
  var accent = _ref34.accent;
  var steps = [['01', 'Kontaktaufnahme', 'Nehmen Sie über unser Kontaktformular oder telefonisch Kontakt mit uns auf.'], ['02', 'Bedarfsanalyse', 'Wir führen eine Bedarfsanalyse durch, um Ihre spezifischen Anforderungen zu verstehen.'], ['03', 'Angebotserstellung', 'Auf Grundlage der Analyse erstellen wir ein maßgeschneidertes Angebot für Sie.'], ['04', 'Vertragsabschluss', 'Nach Ihrer Zustimmung schließen wir einen Vertrag zur Sicherstellung der vereinbarten Leistungen ab.']];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 56
    }
  }, React.createElement(window.SectionTag, null, "So arbeiten wir"), React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 64px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "So erwerben Sie unsere Dienstleistungen."), React.createElement("p", {
    style: {
      fontSize: 20,
      lineHeight: 1.4,
      marginTop: 20,
      color: 'var(--baru-muted)'
    }
  }, "Unser Team steht bereit, um Ihre Anforderungen zu besprechen."))), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 12
    }
  }, steps.map(function (_ref35) {
    var _ref36 = _slicedToArray(_ref35, 3),
      n = _ref36[0],
      t = _ref36[1],
      d = _ref36[2];
    return React.createElement("div", {
      key: n,
      style: {
        padding: 28,
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)',
        borderRadius: 16,
        minHeight: 240,
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600
      }
    }, n), React.createElement("div", {
      style: {
        fontSize: 22,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        marginTop: 36
      }
    }, t), React.createElement("div", {
      style: {
        fontSize: 14,
        color: 'var(--baru-muted)',
        marginTop: 12,
        lineHeight: 1.55
      }
    }, d));
  })));
}
function CtaStrip(_ref37) {
  var accent = _ref37.accent,
    setPage = _ref37.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px 0',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: accent,
      color: '#fff',
      borderRadius: 24,
      padding: '64px 64px',
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      opacity: 0.85,
      textTransform: 'uppercase',
      letterSpacing: '0.12em'
    }
  }, "Lassen Sie uns starten"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 4vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: '16px 0 0'
    }
  }, "Wir finden die passende L\xF6sung f\xFCr Ihr Unternehmen.")), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 12,
      alignItems: 'flex-start'
    }
  }, React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: '#fff',
      color: accent,
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer',
      display: 'inline-flex',
      alignItems: 'center',
      gap: 8
    }
  }, "Jetzt beraten \u2192"), React.createElement("a", {
    href: "tel:+4930233202620",
    style: {
      color: '#fff',
      textDecoration: 'none',
      opacity: 0.9,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 14,
      padding: '8px 0'
    }
  }, "oder anrufen: 030 233 202 620"))));
}
window.PageHome = PageHome;
function PageIT(_ref38) {
  var setPage = _ref38.setPage,
    tweaks = _ref38.tweaks;
  var accent = tweaks.accent;
  return React.createElement("div", null, React.createElement(ITHero, {
    accent: accent,
    setPage: setPage
  }), React.createElement(ITLeistungen, {
    accent: accent
  }), React.createElement(ITKategorien, {
    accent: accent
  }), React.createElement(ITStack, {
    accent: accent
  }), React.createElement(ITTypicalDay, {
    accent: accent
  }), React.createElement(ITGuarantees, {
    accent: accent
  }), React.createElement(ITContactCta, {
    accent: accent,
    setPage: setPage
  }));
}
function ITHero(_ref39) {
  var accent = _ref39.accent,
    setPage = _ref39.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 80px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      marginBottom: 32
    }
  }, React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      padding: '4px 10px',
      borderRadius: 999,
      background: accent,
      color: '#fff',
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      fontWeight: 600
    }
  }, "IT-Service"), React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: 'var(--baru-muted)'
    }
  }, "Leistungen")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.5fr 1fr',
      gap: 64,
      alignItems: 'flex-end'
    }
  }, React.createElement("h1", {
    style: {
      fontSize: 'clamp(56px, 8vw, 132px)',
      lineHeight: 0.92,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "IT, die ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "einfach funktioniert"), "."), React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 19,
      lineHeight: 1.5,
      color: 'var(--baru-ink2)',
      margin: 0
    }
  }, "Von Infrastruktur bis Cloud \u2013 wir sorgen f\xFCr eine sichere und leistungsstarke IT in Ihrem Unternehmen."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      marginTop: 24,
      flexWrap: 'wrap'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Jetzt beraten"), React.createElement(window.GhostBtn, {
    onClick: function onClick() {
      return setPage('cloud');
    }
  }, "Cloud Services \u2192")))));
}
function ITLeistungen(_ref40) {
  var accent = _ref40.accent;
  var services = [{
    tag: 'Infrastruktur',
    title: 'IT-Infrastruktur',
    d: 'Stabile Netzwerke, Server und Arbeitsplätze – maßgeschneidert und zukunftssicher.',
    bullets: ['Netzwerke', 'Server', 'Arbeitsplätze', 'Maßgeschneidert'],
    featured: true
  }, {
    tag: 'Cloud',
    title: 'Cloud Services',
    d: 'Microsoft 365, Cloud-Hosting, Backup & Storage, E-Mail-Services und Archivierung.',
    bullets: ['Microsoft 365', 'Cloud-Hosting', 'Backup & Storage', 'E-Mail-Services']
  }, {
    tag: 'Sicherheit',
    title: 'IT-Sicherheit',
    d: 'Firewall, Virenschutz, Backup-Strategien – wir schützen Ihre Systeme zuverlässig.',
    bullets: ['Firewall', 'Virenschutz', 'Backup-Strategien']
  }, {
    tag: 'Wartung',
    title: 'EDV-Wartung',
    d: 'Updates, Monitoring und Pflege – für dauerhaft reibungslosen Betrieb.',
    bullets: ['Updates', 'Monitoring', 'Pflege']
  }, {
    tag: 'Netzwerk',
    title: 'Netzwerkinfrastruktur',
    d: 'Effiziente, stabile Netzwerklösungen für jede Branche.',
    bullets: ['Effizient', 'Stabil', 'Branchenübergreifend']
  }, {
    tag: 'Telefonie',
    title: 'Telekommunikation',
    d: 'Software-Telefonanlagen mit 3CX – lokal oder in der Cloud, perfekt integriert.',
    bullets: ['3CX', 'Lokal', 'Cloud', 'Integration']
  }];
  return React.createElement("section", {
    style: {
      padding: '60px 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Leistungen im \xDCberblick"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: '16px 0 56px'
    }
  }, "Sechs Bereiche. Ein Partner."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 12,
      gridAutoRows: 'minmax(320px, auto)'
    }
  }, services.map(function (s, i) {
    return React.createElement("div", {
      key: s.title,
      style: {
        background: s.featured ? 'var(--baru-ink)' : 'var(--baru-paper)',
        color: s.featured ? '#fff' : 'var(--baru-ink)',
        border: s.featured ? "1px solid var(--baru-ink)" : "1px solid var(--baru-rule)",
        borderRadius: 20,
        padding: 28,
        gridColumn: s.featured ? 'span 2' : 'span 1',
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: s.featured ? accent : accent,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em'
      }
    }, s.tag), React.createElement("h3", {
      style: {
        fontSize: s.featured ? 36 : 26,
        lineHeight: 1.05,
        letterSpacing: '-0.025em',
        fontWeight: 700,
        marginTop: 16,
        marginBottom: 12
      }
    }, s.title), React.createElement("p", {
      style: {
        fontSize: 15,
        lineHeight: 1.55,
        color: s.featured ? '#ffffffb0' : 'var(--baru-muted)',
        margin: 0,
        marginBottom: 20
      }
    }, s.d), React.createElement("div", {
      style: {
        marginTop: 'auto',
        display: 'flex',
        flexWrap: 'wrap',
        gap: 6
      }
    }, s.bullets.map(function (b) {
      return React.createElement("span", {
        key: b,
        style: {
          fontSize: 12,
          padding: '5px 10px',
          borderRadius: 999,
          background: s.featured ? '#ffffff10' : 'var(--baru-off)',
          border: s.featured ? "1px solid #ffffff20" : "1px solid var(--baru-rule)",
          fontWeight: 500
        }
      }, b);
    })));
  })));
}
function ITStack(_ref41) {
  var accent = _ref41.accent;
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-paper)',
      borderRadius: 24,
      padding: 48,
      border: '1px solid var(--baru-rule)'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1.4fr',
      gap: 64,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement(window.SectionTag, {
    color: accent
  }, "Technologien"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: '16px 0 0'
    }
  }, "Bew\xE4hrte Systeme und Partner."), React.createElement("p", {
    style: {
      fontSize: 17,
      lineHeight: 1.55,
      color: 'var(--baru-muted)',
      marginTop: 24
    }
  }, "F\xFCr stabile, sichere und leistungsstarke L\xF6sungen setzen wir auf bew\xE4hrte Systeme und Partner.")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 12
    }
  }, [['Microsoft 365', 'Office'], ['Windows Server', 'Server'], ['Veeam Backup', 'Backup'], ['3CX', 'Telefonie'], ['Sophos / Fortinet', 'Firewall'], ['HPE / Dell', 'Hardware'], ['Ubiquiti', 'Netzwerk'], ['Hetzner / OVH', 'Hosting'], ['Microsoft Azure', 'Cloud']].map(function (_ref42) {
    var _ref43 = _slicedToArray(_ref42, 2),
      n = _ref43[0],
      c = _ref43[1];
    return React.createElement("div", {
      key: n,
      style: {
        padding: '16px 14px',
        borderRadius: 12,
        background: 'var(--baru-off)',
        border: '1px solid var(--baru-rule)'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 10,
        color: accent,
        textTransform: 'uppercase',
        letterSpacing: '0.08em'
      }
    }, c), React.createElement("div", {
      style: {
        fontSize: 14,
        fontWeight: 600,
        marginTop: 4
      }
    }, n));
  })))));
}
function ITKategorien(_ref44) {
  var accent = _ref44.accent;
  var cols = [{
    tag: 'Support',
    items: ['IT-Helpdesk', 'IT-Support']
  }, {
    tag: 'Cloud',
    items: ['Hosting', 'Cloud Services']
  }, {
    tag: 'Netzwerk',
    items: ['Netzwerk Infrastruktur', 'Telekommunikation']
  }];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 16
    }
  }, cols.map(function (c) {
    return React.createElement("div", {
      key: c.tag,
      style: {
        padding: 32,
        borderRadius: 20,
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        marginBottom: 24
      }
    }, c.tag), React.createElement("div", {
      style: {
        display: 'flex',
        flexDirection: 'column',
        gap: 10
      }
    }, c.items.map(function (it) {
      return React.createElement("div", {
        key: it,
        style: {
          fontSize: 22,
          fontWeight: 600,
          letterSpacing: '-0.015em'
        }
      }, it);
    })));
  })));
}
function ITTypicalDay(_ref45) {
  var accent = _ref45.accent;
  var events = [{
    t: '08:42',
    col: 'in',
    label: 'Eingehend',
    title: 'Drucker im 2. OG geht nicht',
    who: 'Helpdesk · Lara'
  }, {
    t: '08:51',
    col: 'out',
    label: 'Erledigt',
    title: 'Per Remote behoben — Treiber neu installiert',
    who: 'Reaktion: 9 min'
  }, {
    t: '10:15',
    col: 'mon',
    label: 'Monitoring',
    title: 'Backup auf SRV-FILE-01 verifiziert',
    who: 'Veeam · automatisch'
  }, {
    t: '13:30',
    col: 'plan',
    label: 'Geplant',
    title: 'Vor-Ort: Switch-Tausch im Server-Raum',
    who: 'Techniker · Tobias'
  }, {
    t: '15:08',
    col: 'sec',
    label: 'Security',
    title: 'Windows-Updates auf 12 Clients ausgerollt',
    who: 'Patch-Mgmt · automatisch'
  }, {
    t: '17:45',
    col: 'in',
    label: 'Eingehend',
    title: 'Onboarding neuer Mitarbeiter — Konto + M365',
    who: 'Helpdesk · Lara'
  }];
  var colorMap = {
    in: accent,
    out: '#0a8a4a',
    mon: 'var(--baru-muted)',
    plan: 'var(--baru-ink)',
    sec: '#9333ea'
  };
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 48
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Ein typischer Tag"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 4vw, 56px)',
      lineHeight: 1.05,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "Ihre Technik in besten H\xE4nden.")), React.createElement("div", {
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      borderRadius: 24,
      padding: '40px 48px',
      overflow: 'hidden'
    }
  }, React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      opacity: 0.5,
      marginBottom: 24,
      display: 'flex',
      justifyContent: 'space-between'
    }
  }, React.createElement("span", null, "$ baru-helpdesk \xB7 live \xB7 2026-03-14"), React.createElement("span", {
    style: {
      display: 'flex',
      gap: 16,
      alignItems: 'center'
    }
  }, React.createElement("span", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 6
    }
  }, React.createElement("span", {
    style: {
      width: 6,
      height: 6,
      borderRadius: '50%',
      background: '#0a8a4a'
    }
  }), "alle systeme online"))), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column'
    }
  }, events.map(function (e, i) {
    return React.createElement("div", {
      key: i,
      style: {
        display: 'grid',
        gridTemplateColumns: '80px 140px 1fr 200px',
        gap: 24,
        padding: '16px 0',
        borderTop: i === 0 ? 'none' : '1px solid #ffffff15',
        alignItems: 'center'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 14,
        fontWeight: 600
      }
    }, e.t), React.createElement("div", null, React.createElement("span", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        padding: '4px 10px',
        borderRadius: 999,
        background: "".concat(colorMap[e.col], "25"),
        color: colorMap[e.col],
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        fontWeight: 600
      }
    }, e.label)), React.createElement("div", {
      style: {
        fontSize: 17,
        fontWeight: 500
      }
    }, e.title), React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12,
        opacity: 0.6,
        textAlign: 'right'
      }
    }, e.who));
  }))));
}
function ITGuarantees(_ref46) {
  var accent = _ref46.accent;
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr 1fr',
      gap: 16
    }
  }, [{
    n: '<2h',
    t: 'Reaktionszeit',
    d: 'Werktags zwischen 8 und 18 Uhr — meist deutlich schneller.'
  }, {
    n: '€',
    t: 'Klare Pakete',
    d: 'Pauschal pro Mitarbeiter oder nach Aufwand. Sie wissen, was kommt.'
  }, {
    n: '∞',
    t: 'Persönlich',
    d: 'Ein fester Ansprechpartner. Keine wechselnden Tickets, keine Hotline-Lotterie.'
  }].map(function (g) {
    return React.createElement(window.Card, {
      key: g.t
    }, React.createElement("div", {
      style: {
        fontSize: 56,
        fontWeight: 700,
        color: accent,
        letterSpacing: '-0.04em',
        lineHeight: 1,
        marginBottom: 16
      }
    }, g.n), React.createElement("div", {
      style: {
        fontSize: 22,
        fontWeight: 700,
        letterSpacing: '-0.02em'
      }
    }, g.t), React.createElement("p", {
      style: {
        fontSize: 15,
        lineHeight: 1.55,
        color: 'var(--baru-muted)',
        marginTop: 8,
        marginBottom: 0
      }
    }, g.d));
  })));
}
function ITContactCta(_ref47) {
  var accent = _ref47.accent,
    setPage = _ref47.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px 0',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: accent,
      color: '#fff',
      borderRadius: 24,
      padding: '64px',
      display: 'grid',
      gridTemplateColumns: '2fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: 0
    }
  }, "Ihre Technik in besten H\xE4nden."), React.createElement("p", {
    style: {
      fontSize: 18,
      marginTop: 16,
      opacity: 0.9,
      maxWidth: 540,
      lineHeight: 1.5
    }
  }, "Kontaktieren Sie uns f\xFCr eine unverbindliche Beratung.")), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 12,
      alignItems: 'flex-start'
    }
  }, React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: '#fff',
      color: accent,
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer'
    }
  }, "Jetzt kontaktieren \u2192"), React.createElement("a", {
    href: "tel:+4930233202620",
    style: {
      color: '#fff',
      textDecoration: 'none',
      opacity: 0.9,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 14
    }
  }, "oder anrufen: 030 233 202 620"))));
}
window.PageIT = PageIT;
function PageAutomation(_ref48) {
  var setPage = _ref48.setPage,
    tweaks = _ref48.tweaks;
  var accent = tweaks.accent;
  return React.createElement("div", null, React.createElement(AuHero, {
    accent: accent,
    setPage: setPage
  }), React.createElement(AuLeistungen, {
    accent: accent
  }), React.createElement(AuStack, {
    accent: accent
  }), React.createElement(AuCta, {
    accent: accent,
    setPage: setPage
  }));
}
function AuHero(_ref49) {
  var accent = _ref49.accent,
    setPage = _ref49.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 80px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      marginBottom: 32
    }
  }, React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      padding: '4px 10px',
      borderRadius: 999,
      background: accent,
      color: '#fff',
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      fontWeight: 600
    }
  }, "Software Automation"), React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: 'var(--baru-muted)'
    }
  }, "Leistungen")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.5fr 1fr',
      gap: 64,
      alignItems: 'flex-end'
    }
  }, React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.94,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "Prozesse automatisieren \u2014 ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "Routinearbeit abschaffen"), "."), React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 19,
      lineHeight: 1.5,
      color: 'var(--baru-ink2)',
      margin: 0
    }
  }, "Wiederkehrende Abl\xE4ufe, Datenfl\xFCsse zwischen Systemen, Schnittstellen zwischen Tools \u2014 wir bauen die Br\xFCcken, die Ihren Alltag entlasten."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      marginTop: 24,
      flexWrap: 'wrap'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Use-Case besprechen"), React.createElement(window.GhostBtn, {
    onClick: function onClick() {
      return setPage('it');
    }
  }, "\u2190 IT-Infrastruktur")))));
}
function AuLeistungen(_ref50) {
  var accent = _ref50.accent;
  var items = [{
    tag: 'Workflow',
    t: 'Workflow-Automatisierung',
    d: 'Prozesse zwischen Mail, CRM, Buchhaltung, ERP und Cloud-Diensten verbinden — manuelle Übergaben abschaffen.',
    featured: true,
    bullets: ['n8n', 'Make', 'Power Automate', 'Zapier']
  }, {
    tag: 'API',
    t: 'Schnittstellen & APIs',
    d: 'REST- und GraphQL-Anbindungen, Webhooks, Datenabgleich zwischen Systemen — sauber dokumentiert.',
    bullets: ['REST', 'Webhooks', 'OAuth', 'JSON']
  }, {
    tag: 'Skripte',
    t: 'Custom Scripts & Tools',
    d: 'Maßgeschneiderte Skripte für Datenmigration, Reports, Massenverarbeitung — Python, PowerShell, Bash.',
    bullets: ['Python', 'PowerShell', 'Bash']
  }, {
    tag: 'M365',
    t: 'Microsoft 365 Automation',
    d: 'Power Automate, SharePoint-Workflows, Teams-Bots, Mail-Routing und Genehmigungsprozesse.',
    bullets: ['Power Automate', 'SharePoint', 'Teams']
  }, {
    tag: 'Daten',
    t: 'ETL & Daten-Pipelines',
    d: 'Daten aus mehreren Quellen zusammenführen, transformieren und in Reports oder Dashboards überführen.',
    bullets: ['ETL', 'Reporting', 'Dashboards']
  }, {
    tag: 'KI',
    t: 'KI-gestützte Automation',
    d: 'LLMs in bestehende Prozesse integrieren — Klassifizierung, Zusammenfassung, Entwurfsgenerierung.',
    bullets: ['LLM-Integration', 'Klassifizierung', 'Drafts']
  }];
  return React.createElement("section", {
    style: {
      padding: '60px 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Was wir automatisieren"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: '16px 0 56px'
    }
  }, "Sechs Bereiche. Ein Ziel: weniger Klicks."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 12,
      gridAutoRows: 'minmax(280px, auto)'
    }
  }, items.map(function (s) {
    return React.createElement("div", {
      key: s.t,
      style: {
        background: s.featured ? 'var(--baru-ink)' : 'var(--baru-paper)',
        color: s.featured ? '#fff' : 'var(--baru-ink)',
        border: s.featured ? '1px solid var(--baru-ink)' : '1px solid var(--baru-rule)',
        borderRadius: 20,
        padding: 28,
        gridColumn: s.featured ? 'span 2' : 'span 1',
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em'
      }
    }, s.tag), React.createElement("h3", {
      style: {
        fontSize: s.featured ? 36 : 24,
        lineHeight: 1.1,
        letterSpacing: '-0.025em',
        fontWeight: 700,
        marginTop: 16,
        marginBottom: 12
      }
    }, s.t), React.createElement("p", {
      style: {
        fontSize: 15,
        lineHeight: 1.55,
        color: s.featured ? '#ffffffb0' : 'var(--baru-muted)',
        margin: 0,
        marginBottom: 20
      }
    }, s.d), React.createElement("div", {
      style: {
        marginTop: 'auto',
        display: 'flex',
        flexWrap: 'wrap',
        gap: 6
      }
    }, s.bullets.map(function (b) {
      return React.createElement("span", {
        key: b,
        style: {
          fontSize: 12,
          padding: '5px 10px',
          borderRadius: 999,
          background: s.featured ? '#ffffff10' : 'var(--baru-off)',
          border: s.featured ? '1px solid #ffffff20' : '1px solid var(--baru-rule)',
          fontWeight: 500
        }
      }, b);
    })));
  })));
}
function AuStack(_ref51) {
  var accent = _ref51.accent;
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-paper)',
      borderRadius: 24,
      padding: 48,
      border: '1px solid var(--baru-rule)'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1.4fr',
      gap: 64,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement(window.SectionTag, {
    color: accent
  }, "So gehen wir vor"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3vw, 42px)',
      lineHeight: 1.1,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: '16px 0 0'
    }
  }, "Vom Schmerzpunkt zum Workflow."), React.createElement("p", {
    style: {
      fontSize: 17,
      lineHeight: 1.55,
      color: 'var(--baru-muted)',
      marginTop: 24
    }
  }, "Wir starten mit einer Analyse: Wo geht Zeit verloren? Welche Schritte sind manuell, obwohl sie es nicht sein m\xFCssten? Daraus bauen wir Schritt f\xFCr Schritt eine L\xF6sung \u2014 getestet, dokumentiert, \xFCbergeben.")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(2, 1fr)',
      gap: 12
    }
  }, [['01', 'Analyse', 'Workshop, Prozess-Mapping, Aufwandsschätzung'], ['02', 'Prototyp', 'Lauffähige Erstversion in Tagen, nicht Wochen'], ['03', 'Integration', 'Anbindung an Ihre Systeme & Live-Daten'], ['04', 'Übergabe', 'Doku, Schulung, Wartung — auf Wunsch von uns']].map(function (_ref52) {
    var _ref53 = _slicedToArray(_ref52, 3),
      n = _ref53[0],
      t = _ref53[1],
      d = _ref53[2];
    return React.createElement("div", {
      key: n,
      style: {
        padding: 20,
        borderRadius: 12,
        background: 'var(--baru-off)',
        border: '1px solid var(--baru-rule)'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600
      }
    }, n), React.createElement("div", {
      style: {
        fontSize: 18,
        fontWeight: 700,
        marginTop: 12
      }
    }, t), React.createElement("div", {
      style: {
        fontSize: 13,
        color: 'var(--baru-muted)',
        marginTop: 6,
        lineHeight: 1.5
      }
    }, d));
  })))));
}
function AuCta(_ref54) {
  var accent = _ref54.accent,
    setPage = _ref54.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: accent,
      color: '#fff',
      borderRadius: 24,
      padding: 64,
      display: 'grid',
      gridTemplateColumns: '2fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: 0
    }
  }, "Welcher Prozess klaut Ihrem Team die meiste Zeit?"), React.createElement("p", {
    style: {
      fontSize: 17,
      marginTop: 16,
      opacity: 0.9,
      maxWidth: 540,
      lineHeight: 1.5
    }
  }, "Erz\xE4hlen Sie uns davon \u2014 wir schauen uns an, ob und wie er sich automatisieren l\xE4sst. Erstgespr\xE4ch kostenfrei.")), React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: '#fff',
      color: accent,
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer',
      justifySelf: 'flex-start'
    }
  }, "Use-Case besprechen \u2192")));
}
window.PageAutomation = PageAutomation;
function PageLWL(_ref55) {
  var setPage = _ref55.setPage,
    tweaks = _ref55.tweaks;
  var accent = tweaks.accent;
  return React.createElement("div", null, React.createElement(LwHero, {
    accent: accent,
    setPage: setPage
  }), React.createElement(LwLeistungen, {
    accent: accent
  }), React.createElement(LwSpecs, {
    accent: accent
  }), React.createElement(LwProcess, {
    accent: accent
  }), React.createElement(LwCta, {
    accent: accent,
    setPage: setPage
  }));
}
function LwHero(_ref56) {
  var accent = _ref56.accent,
    setPage = _ref56.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 80px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      marginBottom: 32
    }
  }, React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      padding: '4px 10px',
      borderRadius: 999,
      background: accent,
      color: '#fff',
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      fontWeight: 600
    }
  }, "LWL-Verkabelung"), React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: 'var(--baru-muted)'
    }
  }, "Leistungen")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.5fr 1fr',
      gap: 64,
      alignItems: 'flex-end'
    }
  }, React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.94,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "Glasfaser, ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "verlegt, gesplei\xDFt, gemessen"), "."), React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 19,
      lineHeight: 1.5,
      color: 'var(--baru-ink2)',
      margin: 0
    }
  }, "LWL-Strecken zwischen Etagen, Geb\xE4uden und Standorten \u2014 Singlemode oder Multimode, mit Messprotokoll und Doku."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      marginTop: 24,
      flexWrap: 'wrap'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Begehung anfragen"), React.createElement(window.GhostBtn, {
    onClick: function onClick() {
      return setPage('it');
    }
  }, "\u2190 IT-Infrastruktur")))));
}
function LwLeistungen(_ref57) {
  var accent = _ref57.accent;
  var items = [{
    tag: 'Backbone',
    t: 'Inhouse-Backbone',
    d: 'Glasfaser zwischen Etagen und Verteilerräumen — die Wirbelsäule Ihres Netzwerks.',
    featured: true,
    bullets: ['Singlemode OS2', 'Multimode OM4', '40/100 GBit']
  }, {
    tag: 'Standorte',
    t: 'Verbindung zwischen Standorten',
    d: 'Punkt-zu-Punkt-Strecken mit Schmelzspleiß — sauber dokumentiert.',
    bullets: ['P2P', 'Spleißen', 'Doku']
  }, {
    tag: 'FTTD',
    t: 'Fiber-to-the-Desk',
    d: 'Glasfaser direkt an den Arbeitsplatz — für Hochlast-Anwendungen wie Video, CAD oder Forschung.',
    bullets: ['FTTD', 'Hochlast']
  }, {
    tag: 'Messung',
    t: 'OTDR-Messung & Protokoll',
    d: 'Jede Faser wird gemessen. Sie bekommen ein vollständiges Messprotokoll.',
    bullets: ['OTDR', 'Protokoll']
  }, {
    tag: 'Spleißen',
    t: 'Schmelzspleißen vor Ort',
    d: 'Mobiler Spleißkoffer, Spleiß-Boxen und LC/SC/MPO-Stecker — alles vor Ort konfektioniert.',
    bullets: ['LC', 'SC', 'MPO']
  }, {
    tag: 'Patch',
    t: 'LWL-Patchpanel & Verteiler',
    d: '19-Zoll-Patchpanel, Spleißkassetten und beschriftete Rangierungen — übersichtlich.',
    bullets: ['Patchpanel', 'Spleißkassette']
  }];
  return React.createElement("section", {
    style: {
      padding: '60px 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Was wir verlegen"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: '16px 0 56px'
    }
  }, "Sechs Bausteine f\xFCr eine saubere LWL-Strecke."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 12,
      gridAutoRows: 'minmax(280px, auto)'
    }
  }, items.map(function (s) {
    return React.createElement("div", {
      key: s.t,
      style: {
        background: s.featured ? 'var(--baru-ink)' : 'var(--baru-paper)',
        color: s.featured ? '#fff' : 'var(--baru-ink)',
        border: s.featured ? '1px solid var(--baru-ink)' : '1px solid var(--baru-rule)',
        borderRadius: 20,
        padding: 28,
        gridColumn: s.featured ? 'span 2' : 'span 1',
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em'
      }
    }, s.tag), React.createElement("h3", {
      style: {
        fontSize: s.featured ? 36 : 24,
        lineHeight: 1.1,
        letterSpacing: '-0.025em',
        fontWeight: 700,
        marginTop: 16,
        marginBottom: 12
      }
    }, s.t), React.createElement("p", {
      style: {
        fontSize: 15,
        lineHeight: 1.55,
        color: s.featured ? '#ffffffb0' : 'var(--baru-muted)',
        margin: 0,
        marginBottom: 20
      }
    }, s.d), React.createElement("div", {
      style: {
        marginTop: 'auto',
        display: 'flex',
        flexWrap: 'wrap',
        gap: 6
      }
    }, s.bullets.map(function (b) {
      return React.createElement("span", {
        key: b,
        style: {
          fontSize: 12,
          padding: '5px 10px',
          borderRadius: 999,
          background: s.featured ? '#ffffff10' : 'var(--baru-off)',
          border: s.featured ? '1px solid #ffffff20' : '1px solid var(--baru-rule)',
          fontWeight: 500
        }
      }, b);
    })));
  })));
}
function LwSpecs(_ref58) {
  var accent = _ref58.accent;
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 12
    }
  }, [['OS2', 'Singlemode', 'Reichweite bis 40 km · Backbone & Außenstrecken'], ['OM4', 'Multimode', '40 GBit auf 150 m · Inhouse-Backbone'], ['MPO', 'Stecker', 'Bis 12 Fasern parallel · Rechenzentrum'], ['OTDR', 'Messung', 'Reflektometer-Protokoll je Faser']].map(function (_ref59) {
    var _ref60 = _slicedToArray(_ref59, 3),
      n = _ref60[0],
      t = _ref60[1],
      d = _ref60[2];
    return React.createElement("div", {
      key: n,
      style: {
        padding: 28,
        borderRadius: 16,
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)'
      }
    }, React.createElement("div", {
      style: {
        fontSize: 36,
        fontWeight: 700,
        color: accent,
        letterSpacing: '-0.03em'
      }
    }, n), React.createElement("div", {
      style: {
        fontSize: 18,
        fontWeight: 700,
        marginTop: 16
      }
    }, t), React.createElement("div", {
      style: {
        fontSize: 13,
        color: 'var(--baru-muted)',
        marginTop: 6,
        lineHeight: 1.5
      }
    }, d));
  })));
}
function LwProcess(_ref61) {
  var accent = _ref61.accent;
  var steps = [['01', 'Begehung', 'Vor Ort. Wir schauen uns Räume und Kabelwege an.'], ['02', 'Plan & Angebot', 'Streckenplan, Faseranzahl, Materialliste, Festpreis.'], ['03', 'Verlegung', 'Kabel ziehen, Spleißen vor Ort, Stecker setzen.'], ['04', 'Messen & Doku', 'OTDR-Messung je Faser. Sie erhalten Protokoll & Plan.']];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 48
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "So arbeiten wir"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 4vw, 56px)',
      lineHeight: 1.05,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "Vom ersten Termin bis zum Messprotokoll.")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 12
    }
  }, steps.map(function (_ref62) {
    var _ref63 = _slicedToArray(_ref62, 3),
      n = _ref63[0],
      t = _ref63[1],
      d = _ref63[2];
    return React.createElement("div", {
      key: n,
      style: {
        padding: 28,
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)',
        borderRadius: 16,
        minHeight: 240,
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600
      }
    }, n), React.createElement("div", {
      style: {
        fontSize: 22,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        marginTop: 36
      }
    }, t), React.createElement("div", {
      style: {
        fontSize: 14,
        color: 'var(--baru-muted)',
        marginTop: 12,
        lineHeight: 1.55
      }
    }, d));
  })));
}
function LwCta(_ref64) {
  var accent = _ref64.accent,
    setPage = _ref64.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      borderRadius: 24,
      padding: 64,
      display: 'grid',
      gridTemplateColumns: '2fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: 0
    }
  }, "Glasfaser-Bedarf? Wir machen die Begehung."), React.createElement("p", {
    style: {
      fontSize: 17,
      marginTop: 16,
      opacity: 0.8,
      maxWidth: 540,
      lineHeight: 1.5
    }
  }, "Egal ob Neubau, Erweiterung oder Sanierung \u2014 wir planen die Strecken und legen los.")), React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: accent,
      color: '#fff',
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer',
      justifySelf: 'flex-start'
    }
  }, "Begehung vereinbaren \u2192")));
}
window.PageLWL = PageLWL;
function PageCloud(_ref65) {
  var setPage = _ref65.setPage,
    tweaks = _ref65.tweaks;
  var accent = tweaks.accent;
  return React.createElement("div", null, React.createElement(CloudHero, {
    accent: accent,
    setPage: setPage
  }), React.createElement(CloudLeistungen, {
    accent: accent
  }), React.createElement(CloudWhy, {
    accent: accent
  }), React.createElement(CloudCta, {
    accent: accent,
    setPage: setPage
  }));
}
function CloudHero(_ref66) {
  var accent = _ref66.accent,
    setPage = _ref66.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 80px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      marginBottom: 32
    }
  }, React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      padding: '4px 10px',
      borderRadius: 999,
      background: accent,
      color: '#fff',
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      fontWeight: 600
    }
  }, "Cloud Services"), React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: 'var(--baru-muted)'
    }
  }, "Leistungen")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr',
      gap: 64,
      alignItems: 'flex-end'
    }
  }, React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.94,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "Flexible Cloud-L\xF6sungen f\xFCr ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "Zusammenarbeit, Sicherheit und Wachstum"), "."), React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 19,
      lineHeight: 1.5,
      color: 'var(--baru-ink2)',
      margin: 0
    }
  }, "Microsoft 365, Linux Collaboration, virtuelle Server, Backup & Storage \u2013 in deutschen Rechenzentren, pers\xF6nlich betreut."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      marginTop: 24,
      flexWrap: 'wrap'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Jetzt beraten"), React.createElement(window.GhostBtn, {
    onClick: function onClick() {
      return setPage('it');
    }
  }, "\u2190 IT-Service")))));
}
function CloudLeistungen(_ref67) {
  var accent = _ref67.accent;
  var items = [{
    tag: 'Microsoft 365',
    title: 'Microsoft 365',
    d: 'Teams, SharePoint, Exchange. Migration, Tenant-Verwaltung und Lizenzierung aus einer Hand.',
    bullets: ['Teams', 'SharePoint', 'Exchange'],
    featured: true
  }, {
    tag: 'Open Source',
    title: 'Linux Collaboration',
    d: 'Offene Alternativen zu Microsoft 365 für Teams, die unabhängig arbeiten wollen.',
    bullets: ['Nextcloud', 'Mail-Server', 'Webmeeting']
  }, {
    tag: 'Hosting',
    title: 'Cloud-Hosting & virtuelle Server',
    d: 'Skalierbare virtuelle Server und Webhosting für Ihre Anwendungen und Webseiten.',
    bullets: ['Virtuelle Server', 'Webhosting', 'Skalierbar']
  }, {
    tag: 'Datensicherheit',
    title: 'Backup & Storage',
    d: 'Datensicherung in deutschen Rechenzentren – DSGVO-konform und revisionssicher.',
    bullets: ['Deutsche Rechenzentren', 'Tägliche Sicherung', 'DSGVO-konform']
  }, {
    tag: 'E-Mail',
    title: 'E-Mail-Services und Archivierung',
    d: 'Professionelle E-Mail-Lösungen mit gesetzeskonformer Archivierung.',
    bullets: ['E-Mail-Services', 'Archivierung', 'Compliance']
  }];
  return React.createElement("section", {
    style: {
      padding: '40px 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 48
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Cloud Services im \xDCberblick"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "F\xFCnf Bausteine. Eine Cloud, die zu Ihnen passt.")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 12,
      gridAutoRows: 'minmax(280px, auto)'
    }
  }, items.map(function (s) {
    return React.createElement("div", {
      key: s.title,
      style: {
        background: s.featured ? 'var(--baru-ink)' : 'var(--baru-paper)',
        color: s.featured ? '#fff' : 'var(--baru-ink)',
        border: s.featured ? "1px solid var(--baru-ink)" : "1px solid var(--baru-rule)",
        borderRadius: 20,
        padding: 28,
        gridColumn: s.featured ? 'span 2' : 'span 1',
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em'
      }
    }, s.tag), React.createElement("h3", {
      style: {
        fontSize: s.featured ? 36 : 24,
        lineHeight: 1.1,
        letterSpacing: '-0.025em',
        fontWeight: 700,
        marginTop: 16,
        marginBottom: 12
      }
    }, s.title), React.createElement("p", {
      style: {
        fontSize: 15,
        lineHeight: 1.55,
        color: s.featured ? '#ffffffb0' : 'var(--baru-muted)',
        margin: 0,
        marginBottom: 20
      }
    }, s.d), React.createElement("div", {
      style: {
        marginTop: 'auto',
        display: 'flex',
        flexWrap: 'wrap',
        gap: 6
      }
    }, s.bullets.map(function (b) {
      return React.createElement("span", {
        key: b,
        style: {
          fontSize: 12,
          padding: '5px 10px',
          borderRadius: 999,
          background: s.featured ? '#ffffff10' : 'var(--baru-off)',
          border: s.featured ? "1px solid #ffffff20" : "1px solid var(--baru-rule)",
          fontWeight: 500
        }
      }, b);
    })));
  })));
}
function CloudWhy(_ref68) {
  var accent = _ref68.accent;
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-paper)',
      borderRadius: 24,
      padding: 48,
      border: '1px solid var(--baru-rule)'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64
    }
  }, React.createElement("div", null, React.createElement(window.SectionTag, {
    color: accent
  }, "Warum baru com Cloud"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3vw, 42px)',
      lineHeight: 1.1,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: '16px 0 0'
    }
  }, "Cloud, die zu Ihrem Unternehmen w\xE4chst.")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 24
    }
  }, [['Deutsche Rechenzentren', 'Speicherung in Deutschland – DSGVO-konform und nach europäischem Recht.'], ['Persönlicher Support', 'Direkter Kontakt statt Hotline. Wir kennen Ihre Infrastruktur.'], ['Verzahnt mit Ihrer IT', 'Cloud-Services und IT-Betreuung kommen aus einer Hand.'], ['Zukunftssicher', 'Lösungen, die mit Ihrem Unternehmen wachsen.']].map(function (_ref69) {
    var _ref70 = _slicedToArray(_ref69, 2),
      t = _ref70[0],
      d = _ref70[1];
    return React.createElement("div", {
      key: t
    }, React.createElement("div", {
      style: {
        fontSize: 18,
        fontWeight: 700,
        letterSpacing: '-0.015em'
      }
    }, t), React.createElement("p", {
      style: {
        fontSize: 15,
        lineHeight: 1.55,
        color: 'var(--baru-muted)',
        marginTop: 6,
        margin: '6px 0 0'
      }
    }, d));
  })))));
}
function CloudCta(_ref71) {
  var accent = _ref71.accent,
    setPage = _ref71.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      borderRadius: 24,
      padding: '64px',
      display: 'grid',
      gridTemplateColumns: '2fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: 0
    }
  }, "Ihre Technik in besten H\xE4nden."), React.createElement("p", {
    style: {
      fontSize: 17,
      marginTop: 16,
      opacity: 0.8,
      maxWidth: 540,
      lineHeight: 1.5
    }
  }, "Kontaktieren Sie uns f\xFCr eine unverbindliche Beratung.")), React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: accent,
      color: '#fff',
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer',
      justifySelf: 'flex-start'
    }
  }, "Jetzt kontaktieren \u2192")));
}
window.PageCloud = PageCloud;
function PageElektro(_ref72) {
  var setPage = _ref72.setPage,
    tweaks = _ref72.tweaks;
  var accent = tweaks.accent;
  var sec = tweaks.accentSecondary;
  return React.createElement("div", null, React.createElement(ElHero, {
    accent: accent,
    sec: sec,
    setPage: setPage
  }), React.createElement(ElLeistungen, {
    accent: accent,
    sec: sec
  }), React.createElement(ElProcess, {
    accent: accent,
    sec: sec
  }), React.createElement(ElCta, {
    accent: accent,
    sec: sec,
    setPage: setPage
  }));
}
function ElHero(_ref73) {
  var accent = _ref73.accent,
    sec = _ref73.sec,
    setPage = _ref73.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 80px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      marginBottom: 32
    }
  }, React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      padding: '4px 10px',
      borderRadius: 999,
      background: 'var(--baru-ink)',
      color: '#fff',
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      fontWeight: 600
    }
  }, "Elektro-Infrastruktur"), React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: 'var(--baru-muted)'
    }
  }, "Leistungen")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.5fr 1fr',
      gap: 64,
      alignItems: 'flex-end'
    }
  }, React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.94,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "Inhouse-Verkabelung mit ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "Kupfer & Glasfaser"), "."), React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 19,
      lineHeight: 1.5,
      color: 'var(--baru-ink2)',
      margin: 0
    }
  }, "Elektroinstallationen, Netzwerk- und Strukturverkabelung sowie moderne Geb\xE4udetechnik \u2013 zukunftssicher und aus einer Hand."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      marginTop: 24,
      flexWrap: 'wrap'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    onClick: function onClick() {
      return setPage('contact');
    }
  }, "Jetzt beraten"), React.createElement(window.GhostBtn, {
    onClick: function onClick() {
      return setPage('it');
    }
  }, "\u2190 IT-Infrastruktur")))));
}
function ElLeistungen(_ref74) {
  var accent = _ref74.accent,
    sec = _ref74.sec;
  var items = [{
    tag: 'Installation',
    t: 'Elektroinstallationen für Unternehmen',
    d: 'Planung und Umsetzung von Elektroinstallationen – für Büros, Werkstätten und Gewerbeflächen.'
  }, {
    tag: 'Verkabelung',
    t: 'Netzwerk- und Strukturverkabelung',
    d: 'Kupfer- und Glasfaser-Verkabelung nach Norm – strukturiert, dokumentiert, zukunftssicher.'
  }, {
    tag: 'Gebäudetechnik',
    t: 'Moderne Gebäudetechnik',
    d: 'Smarte Lösungen für Beleuchtung, Steuerung und Energiemanagement im Unternehmen.'
  }, {
    tag: 'Inhouse',
    t: 'Inhouse-Verkabelung',
    d: 'Kupfer & Glasfaser für Etagen, Standorte und Server-Räume – sauber gemessen.'
  }, {
    tag: 'Server-Raum',
    t: 'Server-Räume & Netzwerkschränke',
    d: '19-Zoll-Schränke, strukturierte Patchpanel und Rangierungen mit Beschriftung und Dokumentation.'
  }, {
    tag: 'Sicherheit',
    t: 'Sicherheitsrelevante Prüfungen',
    d: 'Wiederkehrende Prüfungen elektrischer Anlagen und Betriebsmittel – damit alles vorschriftsmäßig bleibt.'
  }];
  return React.createElement("section", {
    style: {
      padding: '60px 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Leistungen im \xDCberblick"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: '16px 0 56px'
    }
  }, "Elektro & Verkabelung \u2013 aus einer Hand."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 16
    }
  }, items.map(function (it) {
    return React.createElement(window.Card, {
      key: it.t
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em'
      }
    }, it.tag), React.createElement("h3", {
      style: {
        fontSize: 22,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        marginTop: 12,
        marginBottom: 10
      }
    }, it.t), React.createElement("p", {
      style: {
        fontSize: 14,
        lineHeight: 1.55,
        color: 'var(--baru-muted)',
        margin: 0
      }
    }, it.d));
  })));
}
function ElProcess(_ref75) {
  var accent = _ref75.accent,
    sec = _ref75.sec;
  var steps = [['01', 'Kontaktaufnahme', 'Nehmen Sie über unser Kontaktformular oder telefonisch Kontakt mit uns auf.'], ['02', 'Bedarfsanalyse', 'Wir führen eine Bedarfsanalyse durch, um Ihre spezifischen Anforderungen zu verstehen.'], ['03', 'Angebotserstellung', 'Auf Grundlage der Analyse erstellen wir ein maßgeschneidertes Angebot für Sie.'], ['04', 'Vertragsabschluss', 'Nach Ihrer Zustimmung schließen wir einen Vertrag zur Sicherstellung der vereinbarten Leistungen ab.']];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 48
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "So arbeiten wir"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 4vw, 56px)',
      lineHeight: 1.05,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "So erwerben Sie unsere Dienstleistungen.")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 12
    }
  }, steps.map(function (_ref76) {
    var _ref77 = _slicedToArray(_ref76, 3),
      n = _ref77[0],
      t = _ref77[1],
      d = _ref77[2];
    return React.createElement("div", {
      key: n,
      style: {
        padding: 24,
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)',
        borderRadius: 16,
        minHeight: 220,
        display: 'flex',
        flexDirection: 'column'
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600
      }
    }, n), React.createElement("div", {
      style: {
        fontSize: 22,
        fontWeight: 700,
        letterSpacing: '-0.02em',
        marginTop: 36
      }
    }, t), React.createElement("div", {
      style: {
        fontSize: 14,
        color: 'var(--baru-muted)',
        marginTop: 8,
        lineHeight: 1.55
      }
    }, d));
  })));
}
function ElCta(_ref78) {
  var accent = _ref78.accent,
    sec = _ref78.sec,
    setPage = _ref78.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      borderRadius: 24,
      padding: '64px',
      display: 'grid',
      gridTemplateColumns: '2fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: 0
    }
  }, "Ihre Technik in besten H\xE4nden."), React.createElement("p", {
    style: {
      fontSize: 17,
      marginTop: 16,
      opacity: 0.8,
      maxWidth: 540,
      lineHeight: 1.5
    }
  }, "Kontaktieren Sie uns f\xFCr eine unverbindliche Beratung.")), React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: accent,
      color: '#fff',
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer',
      justifySelf: 'flex-start'
    }
  }, "Jetzt kontaktieren \u2192")));
}
window.PageElektro = PageElektro;
function PageRemote(_ref79) {
  var setPage = _ref79.setPage,
    tweaks = _ref79.tweaks;
  var accent = tweaks.accent;
  return React.createElement("div", null, React.createElement(RemoteHero, {
    accent: accent,
    setPage: setPage
  }), React.createElement(RemoteSteps, {
    accent: accent,
    setPage: setPage
  }), React.createElement(RemoteDownloads, {
    accent: accent
  }), React.createElement(RemoteSecurity, {
    accent: accent
  }), React.createElement(RemoteCta, {
    accent: accent,
    setPage: setPage
  }));
}
function RemoteHero(_ref80) {
  var accent = _ref80.accent,
    setPage = _ref80.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 80px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      gap: 12,
      marginBottom: 32
    }
  }, React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      padding: '4px 10px',
      borderRadius: 999,
      background: accent,
      color: '#fff',
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      fontWeight: 600
    }
  }, "\u25CF Live"), React.createElement("span", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 12,
      color: 'var(--baru-muted)'
    }
  }, "Fernwartung \xB7 Remote Support")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.5fr 1fr',
      gap: 64,
      alignItems: 'flex-end'
    }
  }, React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.94,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "Hilfe \u2014 ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "direkt auf Ihren Bildschirm"), "."), React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 19,
      lineHeight: 1.5,
      color: 'var(--baru-ink2)',
      margin: 0
    }
  }, "Sechs Schritte \u2014 und wir sind verbunden. Verschl\xFCsselt, freigegeben, jederzeit von Ihnen beendbar."), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 12,
      marginTop: 24,
      flexWrap: 'wrap'
    }
  }, React.createElement("a", {
    href: "tel:+4930233202620",
    style: {
      textDecoration: 'none'
    }
  }, React.createElement(window.PrimaryBtn, {
    accent: accent,
    size: "lg"
  }, "Jetzt anrufen: 030 233 202 620"))))));
}
function RemoteSteps(_ref81) {
  var accent = _ref81.accent,
    setPage = _ref81.setPage;
  var steps = [{
    n: '01',
    t: 'Anrufen oder mailen',
    d: 'Kontaktieren Sie uns telefonisch oder per E-Mail und schildern Sie uns Ihr Anliegen. Gemeinsam legen wir einen Zeitpunkt für die Fernwartung fest.',
    action: {
      label: 'Jetzt anrufen',
      href: 'tel:+4930233202620'
    }
  }, {
    n: '02',
    t: 'Supportclient herunterladen',
    d: 'Wählen Sie unten die passende Version für Ihr Betriebssystem und laden Sie RustDesk oder AnyDesk direkt herunter. Keine Installation nötig — einfach starten.',
    anchor: 'downloads'
  }, {
    n: '03',
    t: 'Support-Adresse mitteilen',
    d: 'Öffnen Sie RustDesk oder AnyDesk. Notieren Sie sich die neunstellige Adresse, die oben im Fenster angezeigt wird, und teilen Sie sie unserem Team telefonisch oder per Mail mit.'
  }, {
    n: '04',
    t: 'Verbindung akzeptieren',
    d: 'Sobald wir die Verbindung anfragen, erscheint eine Benachrichtigung auf Ihrem Bildschirm. Klicken Sie auf „Akzeptieren", um den Zugang zu gewähren. Sie behalten die Kontrolle.'
  }, {
    n: '05',
    t: 'Support & Problemlösung',
    d: 'Während der Sitzung übernehmen wir die Steuerung, um das Problem zu lösen. Sie können alle Aktionen auf Ihrem Bildschirm live verfolgen — und jederzeit eingreifen.'
  }, {
    n: '06',
    t: 'Sitzung beenden',
    d: 'Nach Abschluss wird die Sitzung sicher beendet. Sie können RustDesk oder AnyDesk danach behalten oder deinstallieren — ganz wie Sie möchten.'
  }];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "So funktioniert's"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(36px, 4.5vw, 56px)',
      lineHeight: 1.0,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: '16px 0 56px'
    }
  }, "Sechs Schritte zur Fernwartung."), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 12
    }
  }, steps.map(function (s, i) {
    return React.createElement("div", {
      key: s.n,
      style: {
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)',
        borderRadius: 20,
        padding: '28px 32px',
        display: 'grid',
        gridTemplateColumns: '120px 1fr 240px',
        gap: 32,
        alignItems: 'center'
      }
    }, React.createElement("div", {
      style: {
        fontSize: 64,
        fontWeight: 700,
        letterSpacing: '-0.04em',
        color: i === 0 || i === 1 ? accent : 'var(--baru-rule)',
        lineHeight: 1,
        fontFamily: "'JetBrains Mono', monospace"
      }
    }, s.n), React.createElement("div", null, React.createElement("h3", {
      style: {
        fontSize: 26,
        fontWeight: 700,
        letterSpacing: '-0.025em',
        margin: 0,
        lineHeight: 1.2
      }
    }, s.t), React.createElement("p", {
      style: {
        fontSize: 15,
        lineHeight: 1.55,
        color: 'var(--baru-muted)',
        margin: '8px 0 0',
        maxWidth: 720
      }
    }, s.d)), React.createElement("div", {
      style: {
        justifySelf: 'end'
      }
    }, s.action && React.createElement("a", {
      href: s.action.href,
      style: {
        textDecoration: 'none'
      }
    }, React.createElement(window.PrimaryBtn, {
      accent: accent
    }, s.action.label, " \u2192")), s.anchor && React.createElement("button", {
      onClick: function onClick() {
        var el = document.getElementById(s.anchor);
        if (el) el.scrollIntoView({
          behavior: 'smooth',
          block: 'start'
        });
      },
      style: {
        background: 'transparent',
        color: 'var(--baru-ink)',
        border: '1.5px solid var(--baru-ink)',
        padding: '12px 22px',
        borderRadius: 999,
        fontSize: 14,
        fontWeight: 600,
        cursor: 'pointer',
        fontFamily: 'inherit'
      }
    }, "\u2193 Zum Download")));
  })));
}
function RemoteDownloads(_ref82) {
  var accent = _ref82.accent;
  var downloads = [{
    brand: 'AnyDesk',
    os: 'Windows',
    icon: 'windows',
    ext: '.exe',
    href: 'https://my.anydesk.com/v2/api/v2/custom-clients/downloads/public/3PLQKXNJMFSY/baru-com_RemoteSupport.exe',
    featured: true,
    sub: 'Empfohlen für Windows'
  }, {
    brand: 'RustDesk',
    os: 'Windows',
    icon: 'windows',
    ext: '.exe',
    href: 'https://barucom.de/downloads/barucom-support-windows.exe',
    sub: 'Open-Source-Alternative'
  }, {
    brand: 'RustDesk',
    os: 'macOS',
    icon: 'apple',
    ext: '.dmg',
    href: 'https://barucom.de/downloads/barucom-support-x64-macosx.dmg',
    sub: 'für Mac (Intel & Apple Silicon)'
  }, {
    brand: 'RustDesk',
    os: 'Linux',
    icon: 'linux',
    ext: '.deb',
    href: 'https://barucom.de/downloads/barucom-support-x86_64-linux.deb',
    sub: 'Debian / Ubuntu (.deb)'
  }, {
    brand: 'RustDesk',
    os: 'Android',
    icon: 'android',
    ext: '.apk',
    href: 'https://barucom.de/downloads/barucom-support-android.apk',
    sub: 'für Smartphone & Tablet'
  }];
  return React.createElement("section", {
    id: "downloads",
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto',
      scrollMarginTop: 100
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 48
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Downloads"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 4vw, 56px)',
      lineHeight: 1.05,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "W\xE4hlen Sie Ihren Supportclient.")), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(3, 1fr)',
      gap: 12,
      gridAutoRows: 'minmax(220px, auto)'
    }
  }, downloads.map(function (d, i) {
    return React.createElement(DownloadCard, {
      key: "".concat(d.brand, "-").concat(d.os),
      d: d,
      accent: accent,
      span: d.featured ? 2 : 1
    });
  })));
}
function DownloadCard(_ref83) {
  var d = _ref83.d,
    accent = _ref83.accent,
    span = _ref83.span;
  var _React$useState1 = React.useState(false),
    _React$useState10 = _slicedToArray(_React$useState1, 2),
    hover = _React$useState10[0],
    setHover = _React$useState10[1];
  return React.createElement("a", {
    href: d.href,
    target: "_blank",
    rel: "noopener",
    onMouseEnter: function onMouseEnter() {
      return setHover(true);
    },
    onMouseLeave: function onMouseLeave() {
      return setHover(false);
    },
    style: {
      textDecoration: 'none',
      gridColumn: "span ".concat(span),
      background: d.featured ? 'var(--baru-ink)' : 'var(--baru-paper)',
      color: d.featured ? '#fff' : 'var(--baru-ink)',
      border: d.featured ? "1px solid var(--baru-ink)" : "1px solid var(--baru-rule)",
      borderRadius: 20,
      padding: 28,
      display: 'flex',
      flexDirection: 'column',
      transition: 'transform 0.18s, box-shadow 0.18s',
      transform: hover ? 'translateY(-3px)' : 'none',
      boxShadow: hover ? '0 16px 36px rgba(26,36,44,0.12)' : 'none',
      position: 'relative',
      minHeight: span === 2 ? 240 : 220
    }
  }, React.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'space-between',
      alignItems: 'flex-start'
    }
  }, React.createElement(OSIcon, {
    kind: d.icon,
    color: d.featured ? '#fff' : 'var(--baru-ink)',
    accent: accent
  }), React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      padding: '4px 10px',
      borderRadius: 999,
      background: d.featured ? accent : "".concat(accent, "18"),
      color: d.featured ? '#fff' : accent,
      textTransform: 'uppercase',
      letterSpacing: '0.08em',
      fontWeight: 600
    }
  }, d.ext)), React.createElement("div", {
    style: {
      marginTop: 'auto'
    }
  }, React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      color: d.featured ? accent : 'var(--baru-muted)',
      textTransform: 'uppercase',
      letterSpacing: '0.1em',
      fontWeight: 600
    }
  }, d.brand), React.createElement("div", {
    style: {
      fontSize: span === 2 ? 40 : 32,
      fontWeight: 700,
      letterSpacing: '-0.025em',
      marginTop: 6,
      lineHeight: 1.05
    }
  }, d.os), React.createElement("div", {
    style: {
      fontSize: 14,
      marginTop: 8,
      color: d.featured ? '#ffffffa0' : 'var(--baru-muted)'
    }
  }, d.sub)), React.createElement("div", {
    style: {
      marginTop: 20,
      paddingTop: 16,
      borderTop: "1px solid ".concat(d.featured ? '#ffffff20' : 'var(--baru-rule)'),
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      fontSize: 14,
      fontWeight: 600
    }
  }, React.createElement("span", null, "\u2193 Download starten"), React.createElement("span", {
    style: {
      width: 32,
      height: 32,
      borderRadius: '50%',
      border: "1.5px solid ".concat(d.featured ? '#ffffff40' : 'var(--baru-rule)'),
      display: 'grid',
      placeItems: 'center',
      transition: 'transform 0.2s',
      transform: hover ? 'translate(2px,-2px) rotate(-12deg)' : 'none'
    }
  }, "\u2197")));
}
function OSIcon(_ref84) {
  var kind = _ref84.kind,
    color = _ref84.color,
    accent = _ref84.accent;
  var size = 36;
  var s = {
    width: size,
    height: size,
    display: 'block'
  };
  if (kind === 'windows') return React.createElement("svg", {
    viewBox: "0 0 24 24",
    style: s,
    fill: "none"
  }, React.createElement("rect", {
    x: "2",
    y: "3",
    width: "9",
    height: "9",
    fill: accent
  }), React.createElement("rect", {
    x: "13",
    y: "3",
    width: "9",
    height: "9",
    fill: color,
    opacity: "0.85"
  }), React.createElement("rect", {
    x: "2",
    y: "13",
    width: "9",
    height: "9",
    fill: color,
    opacity: "0.85"
  }), React.createElement("rect", {
    x: "13",
    y: "13",
    width: "9",
    height: "9",
    fill: accent
  }));
  if (kind === 'apple') return React.createElement("svg", {
    viewBox: "0 0 24 24",
    style: s,
    fill: color
  }, React.createElement("path", {
    d: "M17.6 13.1c0-3 2.4-4.4 2.5-4.5-1.4-2-3.5-2.3-4.2-2.3-1.8-.2-3.5 1-4.4 1-.9 0-2.3-1-3.8-1-2 .1-3.8 1.1-4.8 2.9-2 3.5-.5 8.7 1.4 11.5 1 1.4 2.1 2.9 3.6 2.9 1.4-.1 2-.9 3.7-.9 1.7 0 2.2.9 3.7.9 1.5 0 2.5-1.4 3.5-2.8 1.1-1.6 1.5-3.1 1.5-3.2-.1-.1-3-1.2-3-4.5zM14.6 4.5c.7-.9 1.3-2.1 1.1-3.4-1.1.1-2.4.7-3.2 1.6-.7.8-1.3 2.1-1.1 3.3 1.2.1 2.4-.6 3.2-1.5z"
  }));
  if (kind === 'linux') return React.createElement("svg", {
    viewBox: "0 0 24 24",
    style: s,
    fill: color
  }, React.createElement("path", {
    d: "M12.5 2c-2 0-3.4 1.6-3.4 3.6 0 .9.3 1.7.7 2.3-.5.4-1 1-1.4 1.7-.7 1.2-1.1 2.6-1.7 3.7-.6 1.2-1.3 2-1.6 3-.3 1 0 1.7.4 2.5.4.7.7 1.3.7 2 0 .8-.4 1.6-.4 2.3 0 .9.7 1.4 2 1.4.6 0 1.5-.2 2.2-.4.6.2 1.4.4 2 .4.6 0 1.3-.2 1.9-.4.7.2 1.6.4 2.2.4 1.3 0 2-.5 2-1.4 0-.7-.4-1.5-.4-2.3 0-.7.3-1.3.7-2 .4-.8.7-1.5.4-2.5-.3-1-1-1.8-1.6-3-.6-1.1-1-2.5-1.7-3.7-.4-.7-.9-1.3-1.4-1.7.4-.6.7-1.4.7-2.3C15.9 3.6 14.5 2 12.5 2zm-1.7 3.2c.3 0 .6.4.6.9 0 .3-.1.5-.2.7-.1-.2-.4-.3-.6-.3-.2 0-.4.1-.5.3-.1-.2-.2-.4-.2-.7 0-.5.4-.9.9-.9zm3.4 0c.5 0 .9.4.9.9 0 .3-.1.5-.2.7-.1-.2-.3-.3-.5-.3-.3 0-.5.1-.6.3-.1-.2-.2-.4-.2-.7 0-.5.3-.9.6-.9zM12 13c2.2 0 4.5 1.8 4.5 3.5s-2 1.5-4.5 1.5-4.5.2-4.5-1.5S9.8 13 12 13z"
  }));
  if (kind === 'android') return React.createElement("svg", {
    viewBox: "0 0 24 24",
    style: s,
    fill: color
  }, React.createElement("path", {
    d: "M6 9h12v9c0 .6-.4 1-1 1h-1v3c0 .6-.4 1-1 1s-1-.4-1-1v-3h-2v3c0 .6-.4 1-1 1s-1-.4-1-1v-3H9v3c0 .6-.4 1-1 1s-1-.4-1-1v-3H6c-.6 0-1-.4-1-1V9h1zM4 9c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1s1-.4 1-1v-6c0-.6-.4-1-1-1zm16 0c-.6 0-1 .4-1 1v6c0 .6.4 1 1 1s1-.4 1-1v-6c0-.6-.4-1-1-1zM15.5 5.3l1.4-1.4c.2-.2.2-.5 0-.7-.2-.2-.5-.2-.7 0L14.7 4.7C13.9 4.3 13 4 12 4s-1.9.3-2.7.7L7.8 3.2c-.2-.2-.5-.2-.7 0-.2.2-.2.5 0 .7l1.4 1.4C7 6.4 6 7.6 6 9h12c0-1.4-1-2.6-2.5-3.7zM9.5 7.5c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5zm5 0c-.3 0-.5-.2-.5-.5s.2-.5.5-.5.5.2.5.5-.2.5-.5.5z"
  }));
  return null;
}
function RemoteSecurity(_ref85) {
  var accent = _ref85.accent;
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: 'var(--baru-ink)',
      color: '#fff',
      borderRadius: 24,
      padding: '56px 64px',
      position: 'relative',
      overflow: 'hidden'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64
    }
  }, React.createElement("div", null, React.createElement(window.SectionTag, {
    color: accent
  }, "Sicherheit"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3vw, 44px)',
      lineHeight: 1.1,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: '16px 0 0'
    }
  }, "Sie behalten die Kontrolle. Immer.")), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 16
    }
  }, [{
    i: '🔒',
    t: 'Verschlüsselte Verbindung',
    d: 'Jede Sitzung läuft über eine Ende-zu-Ende-verschlüsselte Verbindung.'
  }, {
    i: '✓',
    t: 'Nur mit Ihrer Freigabe',
    d: 'Ohne Ihre explizite Zustimmung kann keine Verbindung hergestellt werden.'
  }, {
    i: '🛡',
    t: 'Vertraulich behandelt',
    d: 'Ihre Daten bleiben unter Ihrer Kontrolle und werden absolut vertraulich behandelt.'
  }, {
    i: '⏏',
    t: 'Jederzeit beendbar',
    d: 'Sie können die Sitzung mit einem Klick beenden — wir verlieren sofort den Zugriff.'
  }].map(function (item) {
    return React.createElement("div", {
      key: item.t,
      style: {
        display: 'grid',
        gridTemplateColumns: '40px 1fr',
        gap: 20,
        paddingBottom: 16,
        borderBottom: '1px solid #ffffff15'
      }
    }, React.createElement("div", {
      style: {
        width: 40,
        height: 40,
        borderRadius: 10,
        background: "".concat(accent, "25"),
        color: accent,
        display: 'grid',
        placeItems: 'center',
        fontSize: 18,
        fontWeight: 700
      }
    }, item.i), React.createElement("div", null, React.createElement("div", {
      style: {
        fontSize: 18,
        fontWeight: 700,
        letterSpacing: '-0.015em'
      }
    }, item.t), React.createElement("div", {
      style: {
        fontSize: 14,
        opacity: 0.75,
        marginTop: 4,
        lineHeight: 1.5
      }
    }, item.d)));
  })))));
}
function RemoteCta(_ref86) {
  var accent = _ref86.accent,
    setPage = _ref86.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: accent,
      color: '#fff',
      borderRadius: 24,
      padding: '64px',
      display: 'grid',
      gridTemplateColumns: '2fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: 0
    }
  }, "Noch kein Fernwartungs-Vertrag?"), React.createElement("p", {
    style: {
      fontSize: 17,
      marginTop: 16,
      opacity: 0.9,
      maxWidth: 540,
      lineHeight: 1.5
    }
  }, "Sprechen Sie mit uns \u2014 wir betreuen Sie auch dauerhaft, mit garantierten Reaktionszeiten und festem Ansprechpartner.")), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 12,
      alignItems: 'flex-start'
    }
  }, React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: '#fff',
      color: accent,
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer'
    }
  }, "Beratung anfragen \u2192"), React.createElement("a", {
    href: "tel:+4930233202620",
    style: {
      color: '#fff',
      textDecoration: 'none',
      opacity: 0.9,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 14
    }
  }, "oder direkt: 030 233 202 620"))));
}
window.PageRemote = PageRemote;
function PageAbout(_ref87) {
  var setPage = _ref87.setPage,
    tweaks = _ref87.tweaks;
  var accent = tweaks.accent;
  return React.createElement("div", null, React.createElement(AboutHero, {
    accent: accent,
    setPage: setPage
  }), React.createElement(AboutValues, {
    accent: accent
  }), React.createElement(AboutVorteile, {
    accent: accent
  }), React.createElement(AboutCta, {
    accent: accent,
    setPage: setPage
  }));
}
function AboutHero(_ref88) {
  var accent = _ref88.accent,
    setPage = _ref88.setPage;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 80px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "baru com \u2013 Zwei Welten. Ein Partner."), React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.95,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: '24px 0 0',
      textWrap: 'balance',
      maxWidth: 1100
    }
  }, "Ihr Partner f\xFCr ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "IT & Elektrotechnik"), "."), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.4fr 1fr',
      gap: 64,
      marginTop: 64
    }
  }, React.createElement("div", null, React.createElement("p", {
    style: {
      fontSize: 21,
      lineHeight: 1.45,
      color: 'var(--baru-ink2)',
      margin: 0,
      fontWeight: 400,
      maxWidth: 720
    }
  }, "Wir sind die ", React.createElement("strong", null, "baru com UG"), " \u2013 ein Unternehmen aus Berlin, das IT- und Elektrotechnik-Leistungen unter einem Dach vereint. Unser Alleinstellungsmerkmal: ", React.createElement("em", null, "zwei Welten \u2013 ein Partner"), "."), React.createElement("p", {
    style: {
      fontSize: 18,
      lineHeight: 1.5,
      color: 'var(--baru-muted)',
      marginTop: 24,
      maxWidth: 720
    }
  }, "So bekommen Sie IT-Infrastruktur, Support und Elektroinstallationen aus einer Hand \u2013 zuverl\xE4ssig, effizient und immer auf Ihre Bed\xFCrfnisse zugeschnitten.")), React.createElement("div", {
    style: {
      background: 'var(--baru-paper)',
      borderRadius: 16,
      border: '1px solid var(--baru-rule)',
      padding: 24
    }
  }, React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      color: accent,
      textTransform: 'uppercase',
      letterSpacing: '0.1em'
    }
  }, "Standort"), React.createElement("div", {
    style: {
      fontSize: 18,
      fontWeight: 600,
      marginTop: 8,
      lineHeight: 1.4
    }
  }, "baru com UG", React.createElement("br", null), "Manteuffelstra\xDFe 47", React.createElement("br", null), "12103 Berlin"), React.createElement("a", {
    href: "tel:+4930233202620",
    style: {
      display: 'block',
      marginTop: 16,
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 14,
      color: accent,
      textDecoration: 'none',
      fontWeight: 600
    }
  }, "030 233 202 620"))));
}
function AboutValues(_ref89) {
  var accent = _ref89.accent;
  var values = [{
    n: '01',
    t: 'Schnelligkeit',
    d: 'Kurze Reaktionszeiten – damit Sie nicht warten müssen.'
  }, {
    n: '02',
    t: 'Kompetenz',
    d: 'Fundiertes Wissen in IT & Elektrotechnik unter einem Dach.'
  }, {
    n: '03',
    t: 'Zukunftssicherheit',
    d: 'Lösungen, die mit Ihrem Unternehmen wachsen.'
  }, {
    n: '04',
    t: 'Persönlichkeit',
    d: 'Direkter Kontakt statt Hotline.'
  }];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 48
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Unsere Werte"), React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 4vw, 56px)',
      lineHeight: 1.05,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0,
      textWrap: 'balance'
    }
  }, "Innovation & Zuverl\xE4ssigkeit. ", React.createElement("span", {
    style: {
      color: 'var(--baru-muted)',
      fontWeight: 400
    }
  }, "Moderne Technik, die verl\xE4sslich funktioniert."))), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: 'repeat(4, 1fr)',
      gap: 12
    }
  }, values.map(function (v) {
    return React.createElement(window.Card, {
      key: v.n,
      style: {
        minHeight: 240
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 12,
        color: accent,
        fontWeight: 600
      }
    }, v.n), React.createElement("div", {
      style: {
        fontSize: 26,
        fontWeight: 700,
        letterSpacing: '-0.025em',
        marginTop: 24,
        marginBottom: 12
      }
    }, v.t), React.createElement("p", {
      style: {
        fontSize: 14,
        lineHeight: 1.55,
        color: 'var(--baru-muted)',
        margin: 0
      }
    }, v.d));
  })));
}
function AboutVorteile(_ref90) {
  var accent = _ref90.accent;
  var cols = [{
    title: 'Umfassende IT-Dienstleistungen für Unternehmen',
    items: ['Umfassende IT-Dienstleistungen', 'Zuverlässiger Managed Service', 'Schnelle Reaktionszeiten', 'Persönliche Ansprechpartner', 'Zukunftssichere Lösungen – IT-Service / Wartungen']
  }, {
    title: 'Innovative Elektrotechnik-Lösungen für Unternehmen',
    items: ['Elektroinstallationen für Unternehmen', 'Netzwerk- und Strukturverkabelung', 'Moderne Gebäudetechnik']
  }];
  return React.createElement("section", {
    style: {
      padding: '0 48px 120px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 2fr',
      gap: 64,
      marginBottom: 48
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Unsere Vorteile"), React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(32px, 4vw, 56px)',
      lineHeight: 1.05,
      letterSpacing: '-0.03em',
      fontWeight: 700,
      margin: 0
    }
  }, "Ma\xDFgeschneiderte L\xF6sungen."), React.createElement("p", {
    style: {
      fontSize: 19,
      lineHeight: 1.45,
      color: 'var(--baru-muted)',
      marginTop: 20,
      maxWidth: 720
    }
  }, "Wir bieten ma\xDFgeschneiderte L\xF6sungen f\xFCr Ihre IT- und Elektroanforderungen."))), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 16
    }
  }, cols.map(function (c, i) {
    return React.createElement("div", {
      key: c.title,
      style: {
        background: i === 0 ? 'var(--baru-ink)' : 'var(--baru-paper)',
        color: i === 0 ? '#fff' : 'var(--baru-ink)',
        border: i === 0 ? '1px solid var(--baru-ink)' : '1px solid var(--baru-rule)',
        borderRadius: 24,
        padding: 40
      }
    }, React.createElement("div", {
      style: {
        fontFamily: "'JetBrains Mono', monospace",
        fontSize: 11,
        color: accent,
        fontWeight: 600,
        textTransform: 'uppercase',
        letterSpacing: '0.08em',
        marginBottom: 16
      }
    }, i === 0 ? 'IT' : 'Elektro'), React.createElement("h3", {
      style: {
        fontSize: 28,
        lineHeight: 1.15,
        letterSpacing: '-0.02em',
        fontWeight: 700,
        margin: '0 0 24px'
      }
    }, c.title), React.createElement("ul", {
      style: {
        listStyle: 'none',
        padding: 0,
        margin: 0,
        display: 'flex',
        flexDirection: 'column',
        gap: 12
      }
    }, c.items.map(function (it) {
      return React.createElement("li", {
        key: it,
        style: {
          display: 'flex',
          alignItems: 'flex-start',
          gap: 12,
          fontSize: 16,
          lineHeight: 1.4,
          paddingTop: 12,
          borderTop: "1px solid ".concat(i === 0 ? '#ffffff15' : 'var(--baru-rule)')
        }
      }, React.createElement("span", {
        style: {
          width: 18,
          height: 18,
          borderRadius: '50%',
          background: accent,
          color: '#fff',
          display: 'grid',
          placeItems: 'center',
          fontSize: 11,
          fontWeight: 700,
          flexShrink: 0,
          marginTop: 2
        }
      }, "\u2713"), it);
    })));
  })), React.createElement("div", {
    style: {
      marginTop: 32,
      padding: '32px 40px',
      borderRadius: 16,
      background: 'var(--baru-paper)',
      border: "2px solid ".concat(accent),
      textAlign: 'center'
    }
  }, React.createElement("p", {
    style: {
      fontSize: 22,
      fontWeight: 600,
      margin: 0,
      letterSpacing: '-0.015em',
      textWrap: 'balance'
    }
  }, "Ein Ansprechpartner \u2013 weniger Schnittstellen, weniger Aufwand,", React.createElement("span", {
    style: {
      color: accent
    }
  }, " mehr Effizienz."))));
}
function AboutCta(_ref91) {
  var accent = _ref91.accent,
    setPage = _ref91.setPage;
  return React.createElement("section", {
    style: {
      padding: '0 48px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      background: accent,
      color: '#fff',
      borderRadius: 24,
      padding: '64px',
      display: 'grid',
      gridTemplateColumns: '2fr 1fr',
      gap: 48,
      alignItems: 'center'
    }
  }, React.createElement("div", null, React.createElement("h2", {
    style: {
      fontSize: 'clamp(28px, 3.5vw, 48px)',
      lineHeight: 1.05,
      letterSpacing: '-0.025em',
      fontWeight: 700,
      margin: 0
    }
  }, "Treffen Sie die richtige Entscheidung!"), React.createElement("p", {
    style: {
      fontSize: 17,
      marginTop: 16,
      opacity: 0.9,
      maxWidth: 540,
      lineHeight: 1.5
    }
  }, "Kontaktieren Sie uns noch heute.")), React.createElement("button", {
    onClick: function onClick() {
      return setPage('contact');
    },
    style: {
      background: '#fff',
      color: accent,
      border: 'none',
      padding: '18px 32px',
      borderRadius: 999,
      fontSize: 16,
      fontWeight: 600,
      cursor: 'pointer',
      justifySelf: 'flex-start'
    }
  }, "Jetzt kontaktieren \u2192")));
}
window.PageAbout = PageAbout;
var _React = React,
  useStateContact = _React.useState;
function PageContact(_ref) {
  var setPage = _ref.setPage,
    tweaks = _ref.tweaks;
  var accent = tweaks.accent;
  return React.createElement("div", null, React.createElement(ContactHero, {
    accent: accent
  }), React.createElement(ContactGrid, {
    accent: accent
  }));
}
function ContactHero(_ref92) {
  var accent = _ref92.accent;
  return React.createElement("section", {
    style: {
      padding: '60px 48px 40px',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement(window.SectionTag, {
    color: accent
  }, "Kontakt"), React.createElement("h1", {
    style: {
      fontSize: 'clamp(48px, 7vw, 110px)',
      lineHeight: 0.95,
      letterSpacing: '-0.04em',
      fontWeight: 700,
      margin: '24px 0 0',
      textWrap: 'balance',
      maxWidth: 1200
    }
  }, "Treffen Sie die ", React.createElement("span", {
    style: {
      color: accent
    }
  }, "richtige Entscheidung"), "."), React.createElement("p", {
    style: {
      fontSize: 21,
      lineHeight: 1.45,
      color: 'var(--baru-ink2)',
      maxWidth: 720,
      marginTop: 32
    }
  }, "Kontaktieren Sie uns noch heute. Wir finden die passende L\xF6sung f\xFCr Ihr Unternehmen \u2013 zuverl\xE4ssig, effizient und kundenorientiert."));
}
function ContactGrid(_ref93) {
  var accent = _ref93.accent;
  return React.createElement("section", {
    style: {
      padding: '40px 48px 0',
      maxWidth: 1480,
      margin: '0 auto'
    }
  }, React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1.5fr 1fr',
      gap: 24
    }
  }, React.createElement(ContactForm, {
    accent: accent
  }), React.createElement("div", {
    style: {
      display: 'flex',
      flexDirection: 'column',
      gap: 16
    }
  }, React.createElement(ContactCard, {
    label: "Telefon",
    value: "030 233 202 620",
    sub: "Jetzt anrufen",
    href: "tel:+4930233202620",
    accent: accent,
    hi: true
  }), React.createElement(ContactCard, {
    label: "Adresse",
    value: "Manteuffelstra\xDFe 47, 12103 Berlin",
    sub: "baru com UG",
    href: "https://maps.google.com/?q=Manteuffelstra\xDFe+47+Berlin",
    accent: accent
  }), React.createElement(ContactCard, {
    label: "Remote Support",
    value: "Schnelle Hilfe per Fernwartung",
    sub: "F\xFCr bestehende Kunden",
    accent: accent
  }))));
}
function ContactCard(_ref94) {
  var label = _ref94.label,
    value = _ref94.value,
    sub = _ref94.sub,
    href = _ref94.href,
    accent = _ref94.accent,
    hi = _ref94.hi,
    muted = _ref94.muted;
  var content = React.createElement("div", {
    style: {
      background: hi ? 'var(--baru-ink)' : 'var(--baru-paper)',
      color: hi ? '#fff' : 'var(--baru-ink)',
      border: hi ? '1px solid var(--baru-ink)' : '1px solid var(--baru-rule)',
      borderRadius: 20,
      padding: 28,
      opacity: muted ? 0.6 : 1
    }
  }, React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      color: hi ? accent : accent,
      textTransform: 'uppercase',
      letterSpacing: '0.1em',
      fontWeight: 600
    }
  }, label), React.createElement("div", {
    style: {
      fontSize: 22,
      fontWeight: 700,
      letterSpacing: '-0.02em',
      marginTop: 12,
      lineHeight: 1.3
    }
  }, value), React.createElement("div", {
    style: {
      fontSize: 13,
      color: hi ? '#ffffff80' : 'var(--baru-muted)',
      marginTop: 6
    }
  }, sub));
  if (href) return React.createElement("a", {
    href: href,
    style: {
      textDecoration: 'none',
      display: 'block'
    }
  }, content);
  return content;
}
function ContactForm(_ref95) {
  var accent = _ref95.accent;
  var _useStateContact = useStateContact('it'),
    _useStateContact2 = _slicedToArray(_useStateContact, 2),
    topic = _useStateContact2[0],
    setTopic = _useStateContact2[1];
  var _useStateContact3 = useStateContact(false),
    _useStateContact4 = _slicedToArray(_useStateContact3, 2),
    submitted = _useStateContact4[0],
    setSubmitted = _useStateContact4[1];
  if (submitted) {
    return React.createElement("div", {
      style: {
        background: 'var(--baru-paper)',
        border: '1px solid var(--baru-rule)',
        borderRadius: 24,
        padding: '64px 48px',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'flex-start',
        minHeight: 540,
        justifyContent: 'center'
      }
    }, React.createElement("div", {
      style: {
        width: 64,
        height: 64,
        borderRadius: '50%',
        background: accent,
        display: 'grid',
        placeItems: 'center',
        color: '#fff',
        fontSize: 28,
        fontWeight: 700,
        marginBottom: 24
      }
    }, "\u2713"), React.createElement("h2", {
      style: {
        fontSize: 36,
        lineHeight: 1.1,
        letterSpacing: '-0.025em',
        fontWeight: 700,
        margin: 0
      }
    }, "Vielen Dank \u2014 wir melden uns."), React.createElement("p", {
      style: {
        fontSize: 17,
        lineHeight: 1.55,
        color: 'var(--baru-muted)',
        marginTop: 16,
        maxWidth: 480
      }
    }, "Wir antworten in der Regel innerhalb eines Werktages. Bei dringenden Anliegen rufen Sie uns gerne direkt an."), React.createElement("button", {
      onClick: function onClick() {
        return setSubmitted(false);
      },
      style: {
        marginTop: 32,
        background: 'transparent',
        color: 'var(--baru-ink)',
        border: '1.5px solid var(--baru-ink)',
        padding: '12px 22px',
        borderRadius: 999,
        fontSize: 14,
        fontWeight: 600,
        cursor: 'pointer'
      }
    }, "\u2190 Neue Nachricht"));
  }
  var topics = [{
    id: 'it',
    label: 'IT-Service'
  }, {
    id: 'cloud',
    label: 'Cloud Services'
  }, {
    id: 'elektro',
    label: 'Elektro'
  }, {
    id: 'other',
    label: 'Etwas anderes'
  }];
  return React.createElement("form", {
    onSubmit: function onSubmit(e) {
      e.preventDefault();
      setSubmitted(true);
    },
    style: {
      background: 'var(--baru-paper)',
      border: '1px solid var(--baru-rule)',
      borderRadius: 24,
      padding: 36
    }
  }, React.createElement("div", {
    style: {
      marginBottom: 28
    }
  }, React.createElement(Label, null, "Worum geht es?"), React.createElement("div", {
    style: {
      display: 'flex',
      gap: 8,
      marginTop: 12,
      flexWrap: 'wrap'
    }
  }, topics.map(function (t) {
    return React.createElement("button", {
      type: "button",
      key: t.id,
      onClick: function onClick() {
        return setTopic(t.id);
      },
      style: {
        padding: '10px 16px',
        borderRadius: 999,
        background: topic === t.id ? accent : 'var(--baru-off)',
        color: topic === t.id ? '#fff' : 'var(--baru-ink)',
        border: '1px solid ' + (topic === t.id ? accent : 'var(--baru-rule)'),
        fontSize: 14,
        fontWeight: 500,
        cursor: 'pointer',
        fontFamily: 'inherit'
      }
    }, t.label);
  }))), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 16,
      marginBottom: 16
    }
  }, React.createElement(Field, {
    label: "Name",
    placeholder: "Max Mustermann",
    required: true
  }), React.createElement(Field, {
    label: "Firma",
    placeholder: "Mustermann GmbH"
  })), React.createElement("div", {
    style: {
      display: 'grid',
      gridTemplateColumns: '1fr 1fr',
      gap: 16,
      marginBottom: 16
    }
  }, React.createElement(Field, {
    label: "E-Mail",
    type: "email",
    placeholder: "max@mustermann.de",
    required: true
  }), React.createElement(Field, {
    label: "Telefon",
    placeholder: "+49 30 1234567"
  })), React.createElement("div", {
    style: {
      marginBottom: 24
    }
  }, React.createElement(Label, null, "Ihre Nachricht"), React.createElement("textarea", {
    rows: 5,
    required: true,
    placeholder: "Was besch\xE4ftigt Sie? Wie k\xF6nnen wir helfen?",
    style: {
      width: '100%',
      marginTop: 8,
      padding: '14px 16px',
      border: '1px solid var(--baru-rule)',
      borderRadius: 12,
      fontFamily: 'inherit',
      fontSize: 15,
      lineHeight: 1.5,
      background: 'var(--baru-off)',
      resize: 'vertical',
      outline: 'none'
    },
    onFocus: function onFocus(e) {
      return e.currentTarget.style.borderColor = accent;
    },
    onBlur: function onBlur(e) {
      return e.currentTarget.style.borderColor = 'var(--baru-rule)';
    }
  })), React.createElement("div", {
    style: {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      flexWrap: 'wrap',
      gap: 16
    }
  }, React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      color: 'var(--baru-muted)'
    }
  }, "Wir behandeln Ihre Daten DSGVO-konform."), React.createElement("button", {
    type: "submit",
    style: {
      background: accent,
      color: '#fff',
      border: 'none',
      padding: '16px 28px',
      borderRadius: 999,
      fontSize: 15,
      fontWeight: 600,
      cursor: 'pointer',
      fontFamily: 'inherit'
    }
  }, "Nachricht senden \u2192")));
}
function Label(_ref96) {
  var children = _ref96.children;
  return React.createElement("div", {
    style: {
      fontFamily: "'JetBrains Mono', monospace",
      fontSize: 11,
      color: 'var(--baru-muted)',
      textTransform: 'uppercase',
      letterSpacing: '0.1em',
      fontWeight: 600
    }
  }, children);
}
function Field(_ref97) {
  var label = _ref97.label,
    _ref97$type = _ref97.type,
    type = _ref97$type === void 0 ? 'text' : _ref97$type,
    placeholder = _ref97.placeholder,
    required = _ref97.required;
  var _useStateContact5 = useStateContact(false),
    _useStateContact6 = _slicedToArray(_useStateContact5, 2),
    focus = _useStateContact6[0],
    setFocus = _useStateContact6[1];
  return React.createElement("div", null, React.createElement(Label, null, label), React.createElement("input", {
    type: type,
    placeholder: placeholder,
    required: required,
    onFocus: function onFocus() {
      return setFocus(true);
    },
    onBlur: function onBlur() {
      return setFocus(false);
    },
    style: {
      width: '100%',
      marginTop: 8,
      padding: '14px 16px',
      border: '1px solid ' + (focus ? 'var(--baru-ink)' : 'var(--baru-rule)'),
      borderRadius: 12,
      fontFamily: 'inherit',
      fontSize: 15,
      background: 'var(--baru-off)',
      outline: 'none',
      transition: 'border-color 0.15s'
    }
  }));
}
window.PageContact = PageContact;
var _React2 = React,
  useState = _React2.useState,
  useEffect = _React2.useEffect;
function App() {
  var _window$useTweaks = window.useTweaks(window.TWEAK_DEFAULTS),
    _window$useTweaks2 = _slicedToArray(_window$useTweaks, 2),
    tweaks = _window$useTweaks2[0],
    setTweak = _window$useTweaks2[1];
  var _useState = useState(function () {
      var h = window.location.hash.replace('#', '');
      return h && window.NAV_ITEMS.find(function (n) {
        return n.id === h;
      }) ? h : 'home';
    }),
    _useState2 = _slicedToArray(_useState, 2),
    page = _useState2[0],
    setPageRaw = _useState2[1];
  var setPage = function setPage(p) {
    setPageRaw(p);
    window.location.hash = p;
    window.scrollTo({
      top: 0,
      behavior: 'instant'
    });
  };
  useEffect(function () {
    var onHash = function onHash() {
      var h = window.location.hash.replace('#', '') || 'home';
      if (window.NAV_ITEMS.find(function (n) {
        return n.id === h;
      })) setPageRaw(h);
    };
    window.addEventListener('hashchange', onHash);
    return function () {
      return window.removeEventListener('hashchange', onHash);
    };
  }, []);
  var Page = {
    home: window.PageHome,
    it: window.PageIT,
    automation: window.PageAutomation,
    lwl: window.PageLWL,
    cloud: window.PageCloud,
    elektro: window.PageElektro,
    remote: window.PageRemote,
    about: window.PageAbout,
    contact: window.PageContact
  }[page] || window.PageHome;
  return React.createElement("div", {
    "data-screen-label": page
  }, React.createElement(window.Nav, {
    page: page,
    setPage: setPage,
    tweaks: tweaks
  }), React.createElement("main", null, React.createElement(Page, {
    setPage: setPage,
    tweaks: tweaks
  })), React.createElement(window.Footer, {
    setPage: setPage,
    tweaks: tweaks
  }));
}
ReactDOM.createRoot(document.getElementById('baru-react-root')).render(React.createElement(App, null));
})();