{"id":8220,"date":"2025-08-18T07:48:44","date_gmt":"2025-08-18T07:48:44","guid":{"rendered":"https:\/\/bscwebdesign.at\/blogs\/"},"modified":"2026-07-15T07:25:33","modified_gmt":"2026-07-15T07:25:33","slug":"blog","status":"publish","type":"page","link":"https:\/\/bscwebdesign.at\/en\/blog\/","title":{"rendered":"Blogs"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"8220\" class=\"elementor elementor-8220 elementor-2045\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ced81d5 e-con-full e-flex e-con e-parent\" data-id=\"ced81d5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e72fb5a elementor-widget elementor-widget-html\" data-id=\"e72fb5a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Sora:wght@100;200;300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\n<style>\n* {\n  font-family: 'Sora', sans-serif !important;\n}\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-aa56dd3 elementor-widget elementor-widget-html\" data-id=\"aa56dd3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     BSC WEBDESIGN \u2014 Blog Section\n     Shows English blog posts only\n     Without categories\n     ============================================================ -->\n\n<section class=\"blog-hero-section\">\n\n  <div class=\"blog-hero-grid-bg\"><\/div>\n\n  <div class=\"blog-hero-inner\">\n\n    <div class=\"blog-hero-header\">\n\n      <h2 class=\"blog-hero-heading\">\n        Our <span class=\"blog-hero-heading-accent\">Blog<\/span>\n      <\/h2>\n\n      <p class=\"blog-hero-sub\">\n        Web design, branding and insights to help move your business forward.\n      <\/p>\n\n    <\/div>\n\n\n    <div class=\"blog-hero-layout\" id=\"blogLayout\">\n\n      <div class=\"blog-hero-featured-wrap\">\n        <div class=\"blog-hero-skeleton blog-hero-skeleton--featured\"><\/div>\n      <\/div>\n\n\n      <div class=\"blog-hero-grid\">\n\n        <div class=\"blog-hero-skeleton blog-hero-skeleton--card\"><\/div>\n        <div class=\"blog-hero-skeleton blog-hero-skeleton--card\"><\/div>\n        <div class=\"blog-hero-skeleton blog-hero-skeleton--card\"><\/div>\n        <div class=\"blog-hero-skeleton blog-hero-skeleton--card\"><\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   RESET\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-section,\n.blog-hero-section *,\n.blog-hero-section *::before,\n.blog-hero-section *::after {\n  box-sizing: border-box;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SECTION\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-section {\n  position: relative;\n  background: #FDFDFD;\n  padding: 120px 0 80px;\n  overflow: hidden;\n  text-align: center;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   DOT GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-grid-bg {\n  position: absolute;\n  inset: 0;\n\n  background-image: radial-gradient(\n    circle,\n    #c8cbdc 1px,\n    transparent 1px\n  );\n\n  background-size: 28px 28px;\n  opacity: 0.38;\n  pointer-events: none;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   INNER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-inner {\n  position: relative;\n  max-width: 1180px;\n  margin: 0 auto;\n  padding: 0 40px;\n  width: 100%;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   HEADER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-header {\n  text-align: center;\n  margin-bottom: 52px;\n}\n\n.blog-hero-heading {\n  font-size: 60px;\n  font-weight: 900;\n  color: #0d0d0d;\n  line-height: 1.1;\n  margin: 0 0 10px;\n  letter-spacing: -0.02em;\n}\n\n.blog-hero-heading-accent {\n  color: #151DA5 !important;\n}\n\n.blog-hero-sub {\n  font-size: 18px;\n  color: #666;\n  margin: 0 auto;\n  line-height: 1.6;\n  max-width: 620px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   LAYOUT\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-layout {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 20px;\n  align-items: stretch;\n  text-align: left;\n}\n\n.blog-hero-featured-wrap {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.blog-hero-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 16px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   FEATURED CARD\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-featured {\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border:\n    1px solid rgba(21, 29, 165, 0.18);\n\n  border-radius: 16px;\n\n  overflow: hidden;\n\n  text-decoration: none;\n  color: inherit;\n\n  transition:\n    border-color 0.25s ease,\n    box-shadow 0.25s ease,\n    transform 0.25s ease;\n\n  box-shadow:\n    0 2px 12px rgba(21, 29, 165, 0.05);\n\n  height: 100%;\n}\n\n.blog-hero-featured:hover {\n  border-color: #151DA5;\n\n  box-shadow:\n    0 8px 32px rgba(21, 29, 165, 0.13);\n\n  transform: translateY(-4px);\n}\n\n.blog-hero-featured .blog-hero-img-wrap {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  overflow: hidden;\n\n  background:\n    rgba(21, 29, 165, 0.06);\n\n  flex-shrink: 0;\n}\n\n.blog-hero-featured .blog-hero-img-wrap img {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  display: block;\n\n  transition:\n    transform 0.4s ease;\n}\n\n.blog-hero-featured:hover .blog-hero-img-wrap img {\n  transform: scale(1.03);\n}\n\n.blog-hero-featured .blog-hero-body {\n  padding: 15px 17px 18px;\n\n  display: flex;\n  flex-direction: column;\n\n  flex: 1;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SMALL CARDS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-card {\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border:\n    1px solid rgba(21, 29, 165, 0.18);\n\n  border-radius: 14px;\n\n  overflow: hidden;\n\n  text-decoration: none;\n  color: inherit;\n\n  transition:\n    border-color 0.25s ease,\n    box-shadow 0.25s ease,\n    transform 0.25s ease;\n\n  box-shadow:\n    0 2px 12px rgba(21, 29, 165, 0.05);\n}\n\n.blog-hero-card:hover {\n  border-color: #151DA5;\n\n  box-shadow:\n    0 8px 26px rgba(21, 29, 165, 0.10);\n\n  transform: translateY(-4px);\n}\n\n.blog-hero-card .blog-hero-img-wrap {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n  overflow: hidden;\n\n  background:\n    rgba(21, 29, 165, 0.06);\n\n  flex-shrink: 0;\n}\n\n.blog-hero-card .blog-hero-img-wrap img {\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  display: block;\n\n  transition:\n    transform 0.4s ease;\n}\n\n.blog-hero-card:hover .blog-hero-img-wrap img {\n  transform: scale(1.03);\n}\n\n.blog-hero-card .blog-hero-body {\n  padding: 15px 17px 18px;\n\n  display: flex;\n  flex-direction: column;\n\n  flex: 1;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   META\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-meta {\n  display: flex;\n  align-items: center;\n  margin-bottom: 10px;\n}\n\n.blog-hero-date {\n  font-size: 14px;\n  color: #9ca3af;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TITLES\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-featured .blog-hero-title,\n.blog-hero-card .blog-hero-title {\n  font-size: 16px;\n  font-weight: 700;\n\n  color: #0d0d0d;\n\n  line-height: 1.4;\n  letter-spacing: -0.01em;\n\n  margin-bottom: 6px;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  overflow: hidden;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   EXCERPTS\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-featured .blog-hero-excerpt {\n  font-size: 14px;\n  color: #6b7280;\n\n  line-height: 1.65;\n\n  flex: 1;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  overflow: hidden;\n}\n\n.blog-hero-card .blog-hero-excerpt {\n  font-size: 14px;\n  color: #6b7280;\n\n  line-height: 1.65;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  overflow: hidden;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CTA\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-featured .blog-hero-cta {\n  margin-top: 16px;\n\n  display: inline-flex;\n  align-items: center;\n\n  gap: 6px;\n\n  font-size: 14px;\n  font-weight: 700;\n\n  color: #151DA5;\n\n  text-decoration: none;\n\n  letter-spacing: 0.01em;\n}\n\n.blog-hero-featured .blog-hero-cta svg {\n  width: 13px;\n  height: 13px;\n\n  transition:\n    transform 0.15s ease;\n}\n\n.blog-hero-featured:hover .blog-hero-cta svg {\n  transform: translateX(4px);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   PLACEHOLDER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blog-hero-img-placeholder {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n\n  background:\n    rgba(21, 29, 165, 0.06);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.blog-hero-img-placeholder svg {\n  opacity: 0.3;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SKELETON LOADING\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@keyframes blogHeroShimmer {\n\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n\n}\n\n.blog-hero-skeleton {\n  background: linear-gradient(\n    90deg,\n    #eff1f5 25%,\n    #e2e6f0 50%,\n    #eff1f5 75%\n  );\n\n  background-size: 200% 100%;\n\n  animation:\n    blogHeroShimmer 1.5s infinite;\n}\n\n.blog-hero-skeleton--featured {\n  border-radius: 16px;\n  min-height: 460px;\n  height: 100%;\n}\n\n.blog-hero-skeleton--card {\n  border-radius: 14px;\n  min-height: 200px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TABLET\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 900px) {\n\n  .blog-hero-section {\n    padding: 120px 0 80px;\n  }\n\n  .blog-hero-heading {\n    font-size: 40px;\n  }\n\n  .blog-hero-layout {\n    grid-template-columns: 1fr;\n  }\n\n  .blog-hero-skeleton--featured {\n    min-height: 340px;\n  }\n\n}\n\n\n@media (max-width: 768px) {\n\n  .blog-hero-section {\n    padding: 120px 0 80px;\n  }\n\n  .blog-hero-heading {\n    font-size: 40px;\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SMALL TABLET \/ MOBILE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 600px) {\n\n  .blog-hero-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .blog-hero-card:nth-child(n+3) {\n    display: none;\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 480px) {\n\n  .blog-hero-section {\n    padding: 120px 0 60px;\n  }\n\n  .blog-hero-heading {\n    font-size: 32px;\n  }\n\n  .blog-hero-sub {\n    font-size: 16px;\n  }\n\n  .blog-hero-inner {\n    padding: 0 20px;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const API =\n    'https:\/\/bscwebdesign.at\/wp-json\/wp\/v2\/posts?per_page=20&_embed&lang=en&orderby=date&order=desc';\n\n\n  function fmtDate(str) {\n\n    return new Date(str).toLocaleDateString(\n      'en-GB',\n      {\n        day: '2-digit',\n        month: 'short',\n        year: 'numeric'\n      }\n    );\n\n  }\n\n\n  function plain(html) {\n\n    return (html || '')\n      .replace(\/<[^>]*>\/g, '')\n      .trim();\n\n  }\n\n\n  function truncate(text, n) {\n\n    return text.length > n\n      ? text.slice(0, n).trimEnd() + '\\u2026'\n      : text;\n\n  }\n\n\n  function getImg(post) {\n\n    return (\n      post._embedded?.['wp:featuredmedia']?.[0]?.source_url\n      || null\n    );\n\n  }\n\n\n  function imgBlock(post) {\n\n    const src =\n      getImg(post);\n\n    const alt =\n      plain(post.title.rendered);\n\n\n    if (src) {\n\n      return `\n        <div class=\"blog-hero-img-wrap\">\n\n          <img decoding=\"async\"\n            src=\"${src}\"\n            alt=\"${alt}\"\n            loading=\"lazy\"\n          >\n\n        <\/div>\n      `;\n\n    }\n\n\n    return `\n      <div class=\"blog-hero-img-placeholder\">\n\n        <svg\n          width=\"40\"\n          height=\"40\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"#151DA5\"\n          stroke-width=\"1.2\"\n        >\n\n          <rect\n            x=\"3\"\n            y=\"3\"\n            width=\"18\"\n            height=\"18\"\n            rx=\"2\"\n          \/>\n\n          <path\n            d=\"M3 9l4-4 4 4 4-6 4 6\"\n          \/>\n\n          <circle\n            cx=\"8.5\"\n            cy=\"13.5\"\n            r=\"1.5\"\n          \/>\n\n        <\/svg>\n\n      <\/div>\n    `;\n\n  }\n\n\n  function arrow() {\n\n    return `\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n\n        <path\n          d=\"M5 12h14M12 5l7 7-7 7\"\n        \/>\n\n      <\/svg>\n    `;\n\n  }\n\n\n  function renderFeatured(post) {\n\n    const excerpt =\n      truncate(\n        plain(\n          post.excerpt?.rendered\n          || post.content?.rendered\n          || ''\n        ),\n        100\n      );\n\n\n    return `\n      <a\n        class=\"blog-hero-featured\"\n        href=\"${post.link}\"\n      >\n\n        ${imgBlock(post)}\n\n        <div class=\"blog-hero-body\">\n\n          <div class=\"blog-hero-meta\">\n\n            <span class=\"blog-hero-date\">\n              ${fmtDate(post.date)}\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"blog-hero-title\">\n            ${plain(post.title.rendered)}\n          <\/div>\n\n\n          <div class=\"blog-hero-excerpt\">\n            ${excerpt}\n          <\/div>\n\n\n          <span class=\"blog-hero-cta\">\n\n            Read more\n\n            ${arrow()}\n\n          <\/span>\n\n        <\/div>\n\n      <\/a>\n    `;\n\n  }\n\n\n  function renderCard(post) {\n\n    const excerpt =\n      truncate(\n        plain(\n          post.excerpt?.rendered\n          || post.content?.rendered\n          || ''\n        ),\n        100\n      );\n\n\n    return `\n      <a\n        class=\"blog-hero-card\"\n        href=\"${post.link}\"\n      >\n\n        ${imgBlock(post)}\n\n        <div class=\"blog-hero-body\">\n\n          <div class=\"blog-hero-meta\">\n\n            <span class=\"blog-hero-date\">\n              ${fmtDate(post.date)}\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"blog-hero-title\">\n            ${plain(post.title.rendered)}\n          <\/div>\n\n\n          <div class=\"blog-hero-excerpt\">\n            ${excerpt}\n          <\/div>\n\n        <\/div>\n\n      <\/a>\n    `;\n\n  }\n\n\n  fetch(API)\n\n    .then(function(response) {\n\n      if (!response.ok) {\n\n        throw new Error(\n          'HTTP error ' + response.status\n        );\n\n      }\n\n      return response.json();\n\n    })\n\n    .then(function(posts) {\n\n      if (!posts || !posts.length) {\n\n        console.warn(\n          'No English BSC blog posts found.'\n        );\n\n        return;\n\n      }\n\n\n      const englishPosts =\n        posts.slice(0, 5);\n\n\n      const [\n        featured,\n        ...rest\n      ] = englishPosts;\n\n\n      const cards =\n        rest\n          .slice(0, 4)\n          .map(renderCard)\n          .join('');\n\n\n      document\n        .getElementById('blogLayout')\n        .innerHTML = `\n\n          <div class=\"blog-hero-featured-wrap\">\n\n            ${renderFeatured(featured)}\n\n          <\/div>\n\n\n          <div class=\"blog-hero-grid\">\n\n            ${cards}\n\n          <\/div>\n\n        `;\n\n    })\n\n    .catch(function(error) {\n\n      console.warn(\n        'BSC English Blog fetch failed:',\n        error\n      );\n\n    });\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93e84d9 elementor-widget elementor-widget-html\" data-id=\"93e84d9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n     BSC WEBDESIGN \u2014 Blog Section 2\n     English post grid without categories\n     ============================================================ -->\n\n<section class=\"blogf\">\n\n  <div class=\"blogf__grid-bg\"><\/div>\n\n  <div class=\"blogf__inner\">\n\n    <div class=\"blogf__header\">\n      <h2 class=\"blogf__heading\">\n        All <span class=\"blogf__heading-accent\">Posts<\/span>\n      <\/h2>\n    <\/div>\n\n    <div class=\"blogf__grid\" id=\"blogfGrid\">\n\n      <div class=\"blogf__card blogf__card--skeleton\"><\/div>\n      <div class=\"blogf__card blogf__card--skeleton\"><\/div>\n      <div class=\"blogf__card blogf__card--skeleton\"><\/div>\n      <div class=\"blogf__card blogf__card--skeleton\"><\/div>\n      <div class=\"blogf__card blogf__card--skeleton\"><\/div>\n      <div class=\"blogf__card blogf__card--skeleton\"><\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n<style>\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   RESET\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf *,\n.blogf *::before,\n.blogf *::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SECTION\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf {\n  position: relative;\n  background: #FDFDFD;\n  padding: 80px 0 100px;\n  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\n  overflow: hidden;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   DOT GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__grid-bg {\n  position: absolute;\n  inset: 0;\n\n  background-image: radial-gradient(\n    circle,\n    #c8cbdc 1px,\n    transparent 1px\n  );\n\n  background-size: 28px 28px;\n  opacity: 0.38;\n  pointer-events: none;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   INNER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__inner {\n  position: relative;\n  max-width: 1180px;\n  margin: 0 auto;\n  padding: 0 40px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SECTION HEADER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__header {\n  margin-bottom: 40px;\n}\n\n.blogf__heading {\n  font-size: clamp(1.7rem, 3vw, 2.4rem);\n  font-weight: 800;\n  color: #0d0d0d;\n  line-height: 1.15;\n  letter-spacing: -0.025em;\n}\n\n.blogf__heading-accent {\n  color: #151DA5;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   GRID\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__grid {\n  display: grid;\n  grid-template-columns: repeat(3, 1fr);\n  gap: 20px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CARD\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__card {\n  display: flex;\n  flex-direction: column;\n\n  background: #ffffff;\n\n  border:\n    1px solid rgba(21, 29, 165, 0.18);\n\n  border-radius: 14px;\n\n  overflow: hidden;\n\n  text-decoration: none;\n  color: inherit;\n\n  transition:\n    border-color 0.22s ease,\n    transform 0.22s ease;\n}\n\n.blogf__card:hover {\n  border-color: #151DA5;\n  transform: translateY(-4px);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CARD IMAGE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__card .blogf__img-wrap {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n\n  overflow: hidden;\n\n  background:\n    rgba(21, 29, 165, 0.06);\n\n  flex-shrink: 0;\n}\n\n.blogf__card .blogf__img-wrap img {\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  display: block;\n\n  transition:\n    transform 0.4s ease;\n}\n\n.blogf__card:hover .blogf__img-wrap img {\n  transform: scale(1.03);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CARD BODY\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__card .blogf__body {\n  padding: 18px 20px 20px;\n\n  display: flex;\n  flex-direction: column;\n\n  flex: 1;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   DATE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__meta {\n  display: flex;\n  align-items: center;\n  margin-bottom: 10px;\n}\n\n.blogf__date {\n  font-size: 14px;\n  color: #9ca3af;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TITLE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__title {\n  font-size: 16px;\n  font-weight: 700;\n\n  color: #0d0d0d;\n\n  line-height: 1.4;\n  letter-spacing: -0.01em;\n\n  margin-bottom: 8px;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n\n  overflow: hidden;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   EXCERPT\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__excerpt {\n  font-size: 14px;\n  color: #6b7280;\n\n  line-height: 1.65;\n\n  flex: 1;\n\n  display: -webkit-box;\n  -webkit-line-clamp: 3;\n  -webkit-box-orient: vertical;\n\n  overflow: hidden;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CTA\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__cta {\n  margin-top: 16px;\n\n  display: inline-flex;\n  align-items: center;\n\n  gap: 5px;\n\n  font-size: 14px;\n  font-weight: 700;\n\n  color: #151DA5;\n\n  text-decoration: none;\n}\n\n.blogf__cta svg {\n  width: 12px;\n  height: 12px;\n\n  transition:\n    transform 0.15s ease;\n}\n\n.blogf__card:hover .blogf__cta svg {\n  transform: translateX(3px);\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   IMAGE PLACEHOLDER\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__img-placeholder {\n  width: 100%;\n  aspect-ratio: 16 \/ 9;\n\n  background:\n    rgba(21, 29, 165, 0.06);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.blogf__img-placeholder svg {\n  opacity: 0.3;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   SKELETON LOADING\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@keyframes blogfShimmer {\n\n  0% {\n    background-position: 200% 0;\n  }\n\n  100% {\n    background-position: -200% 0;\n  }\n\n}\n\n.blogf__card--skeleton {\n  border-radius: 14px;\n  min-height: 280px;\n\n  background: linear-gradient(\n    90deg,\n    #ebebeb 25%,\n    #dde2ec 50%,\n    #ebebeb 75%\n  );\n\n  background-size: 200% 100%;\n\n  animation:\n    blogfShimmer 1.5s infinite;\n\n  border: none;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   EMPTY STATE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n.blogf__empty {\n  grid-column: 1 \/ -1;\n\n  text-align: center;\n\n  padding: 60px 20px;\n\n  color: #9ca3af;\n\n  font-size: 15px;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   CARD FADE IN\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@keyframes blogfFadeIn {\n\n  from {\n    opacity: 0;\n    transform: translateY(12px);\n  }\n\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n\n}\n\n.blogf__card--visible {\n  animation:\n    blogfFadeIn 0.3s ease forwards;\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   TABLET\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 960px) {\n\n  .blogf__grid {\n    grid-template-columns: repeat(2, 1fr);\n  }\n\n}\n\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n   MOBILE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n\n@media (max-width: 600px) {\n\n  .blogf__grid {\n    grid-template-columns: 1fr;\n  }\n\n  .blogf {\n    padding: 56px 0 72px;\n  }\n\n  .blogf__header {\n    text-align: center;\n    margin-bottom: 40px;\n  }\n\n  .blogf__inner {\n    padding: 0 20px;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n(function () {\n\n  const POST_API =\n    'https:\/\/bscwebdesign.at\/wp-json\/wp\/v2\/posts?per_page=99&_embed&lang=en&orderby=date&order=desc';\n\n\n  function fmtDate(str) {\n\n    return new Date(str).toLocaleDateString(\n      'en-GB',\n      {\n        day: '2-digit',\n        month: 'short',\n        year: 'numeric'\n      }\n    );\n\n  }\n\n\n  function plain(html) {\n\n    return (html || '')\n      .replace(\/<[^>]*>\/g, '')\n      .trim();\n\n  }\n\n\n  function truncate(text, n) {\n\n    return text.length > n\n      ? text.slice(0, n).trimEnd() + '\\u2026'\n      : text;\n\n  }\n\n\n  function getImg(post) {\n\n    return (\n      post._embedded?.['wp:featuredmedia']?.[0]?.source_url\n      || null\n    );\n\n  }\n\n\n  function imgBlock(post) {\n\n    const src =\n      getImg(post);\n\n    const alt =\n      plain(post.title.rendered);\n\n\n    if (src) {\n\n      return `\n        <div class=\"blogf__img-wrap\">\n\n          <img decoding=\"async\"\n            src=\"${src}\"\n            alt=\"${alt}\"\n            loading=\"lazy\"\n          >\n\n        <\/div>\n      `;\n\n    }\n\n\n    return `\n      <div class=\"blogf__img-placeholder\">\n\n        <svg\n          width=\"36\"\n          height=\"36\"\n          viewBox=\"0 0 24 24\"\n          fill=\"none\"\n          stroke=\"#151DA5\"\n          stroke-width=\"1.2\"\n        >\n\n          <rect\n            x=\"3\"\n            y=\"3\"\n            width=\"18\"\n            height=\"18\"\n            rx=\"2\"\n          \/>\n\n          <path\n            d=\"M3 9l4-4 4 4 4-6 4 6\"\n          \/>\n\n          <circle\n            cx=\"8.5\"\n            cy=\"13.5\"\n            r=\"1.5\"\n          \/>\n\n        <\/svg>\n\n      <\/div>\n    `;\n\n  }\n\n\n  function arrow() {\n\n    return `\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2.5\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n      >\n        <path\n          d=\"M5 12h14M12 5l7 7-7 7\"\n        \/>\n      <\/svg>\n    `;\n\n  }\n\n\n  function renderCard(post, delay) {\n\n    const excerpt =\n      truncate(\n        plain(\n          post.excerpt?.rendered\n          || post.content?.rendered\n          || ''\n        ),\n        130\n      );\n\n\n    return `\n      <a\n        class=\"blogf__card blogf__card--visible\"\n        href=\"${post.link}\"\n        target=\"_blank\"\n        rel=\"noopener\"\n        style=\"animation-delay:${delay}ms\"\n      >\n\n        ${imgBlock(post)}\n\n        <div class=\"blogf__body\">\n\n          <div class=\"blogf__meta\">\n\n            <span class=\"blogf__date\">\n              ${fmtDate(post.date)}\n            <\/span>\n\n          <\/div>\n\n\n          <div class=\"blogf__title\">\n            ${plain(post.title.rendered)}\n          <\/div>\n\n\n          <div class=\"blogf__excerpt\">\n            ${excerpt}\n          <\/div>\n\n\n          <span class=\"blogf__cta\">\n            Read more\n            ${arrow()}\n          <\/span>\n\n        <\/div>\n\n      <\/a>\n    `;\n\n  }\n\n\n  function renderGrid(posts) {\n\n    const grid =\n      document.getElementById('blogfGrid');\n\n\n    if (!posts.length) {\n\n      grid.innerHTML = `\n        <div class=\"blogf__empty\">\n          No posts found.\n        <\/div>\n      `;\n\n      return;\n\n    }\n\n\n    grid.innerHTML =\n      posts\n        .map(\n          (post, index) =>\n            renderCard(\n              post,\n              index * 50\n            )\n        )\n        .join('');\n\n  }\n\n\n  fetch(POST_API)\n\n    .then(function(response) {\n\n      if (!response.ok) {\n\n        throw new Error(\n          'Post API error: ' + response.status\n        );\n\n      }\n\n      return response.json();\n\n    })\n\n    .then(function(posts) {\n\n      renderGrid(\n        posts || []\n      );\n\n    })\n\n    .catch(function(error) {\n\n      console.warn(\n        'BSC English Blog loading failed:',\n        error\n      );\n\n\n      document\n        .getElementById('blogfGrid')\n        .innerHTML = `\n          <div class=\"blogf__empty\">\n            The posts could not be loaded.\n          <\/div>\n        `;\n\n    });\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Blog Web design, branding and insights to help move your business forward. All Posts<\/p>\n","protected":false},"author":1,"featured_media":14102,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8220","page","type-page","status-publish","has-post-thumbnail","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Our Blog | BSC Webdesign Vienna<\/title>\n<meta name=\"description\" content=\"In the BSC Webdesign Vienna blog, you\u2019ll find tips on websites, SEO and online marketing. Clearly explained and easy to put into practice.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bscwebdesign.at\/en\/blog\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Our Blog | BSC Webdesign Vienna\" \/>\n<meta property=\"og:description\" content=\"In the BSC Webdesign Vienna blog, you\u2019ll find tips on websites, SEO and online marketing. Clearly explained and easy to put into practice.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bscwebdesign.at\/en\/blog\/\" \/>\n<meta property=\"og:site_name\" content=\"bscwebdesign.at\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-15T07:25:33+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign-webshop.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1000\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"16 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/\",\"name\":\"Our Blog | BSC Webdesign Vienna\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/BSC-Webdesign-webshop.webp\",\"datePublished\":\"2025-08-18T07:48:44+00:00\",\"dateModified\":\"2026-07-15T07:25:33+00:00\",\"description\":\"In the BSC Webdesign Vienna blog, you\u2019ll find tips on websites, SEO and online marketing. Clearly explained and easy to put into practice.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/#primaryimage\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/BSC-Webdesign-webshop.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/BSC-Webdesign-webshop.webp\",\"width\":1000,\"height\":1000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/blog\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blogs\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"name\":\"bscwebdesign.at\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#organization\",\"name\":\"bscwebdesign.at\",\"url\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"contentUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2025\\\/07\\\/bsc-logo-next.webp\",\"width\":2500,\"height\":1000,\"caption\":\"bscwebdesign.at\"},\"image\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Our Blog | BSC Webdesign Vienna","description":"In the BSC Webdesign Vienna blog, you\u2019ll find tips on websites, SEO and online marketing. Clearly explained and easy to put into practice.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bscwebdesign.at\/en\/blog\/","og_locale":"en_US","og_type":"article","og_title":"Our Blog | BSC Webdesign Vienna","og_description":"In the BSC Webdesign Vienna blog, you\u2019ll find tips on websites, SEO and online marketing. Clearly explained and easy to put into practice.","og_url":"https:\/\/bscwebdesign.at\/en\/blog\/","og_site_name":"bscwebdesign.at","article_modified_time":"2026-07-15T07:25:33+00:00","og_image":[{"width":1000,"height":1000,"url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign-webshop.webp","type":"image\/webp"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"16 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bscwebdesign.at\/en\/blog\/","url":"https:\/\/bscwebdesign.at\/en\/blog\/","name":"Our Blog | BSC Webdesign Vienna","isPartOf":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/#primaryimage"},"image":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/#primaryimage"},"thumbnailUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign-webshop.webp","datePublished":"2025-08-18T07:48:44+00:00","dateModified":"2026-07-15T07:25:33+00:00","description":"In the BSC Webdesign Vienna blog, you\u2019ll find tips on websites, SEO and online marketing. Clearly explained and easy to put into practice.","breadcrumb":{"@id":"https:\/\/bscwebdesign.at\/en\/blog\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bscwebdesign.at\/en\/blog\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bscwebdesign.at\/en\/blog\/#primaryimage","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign-webshop.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign-webshop.webp","width":1000,"height":1000},{"@type":"BreadcrumbList","@id":"https:\/\/bscwebdesign.at\/en\/blog\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bscwebdesign.at\/en\/"},{"@type":"ListItem","position":2,"name":"Blogs"}]},{"@type":"WebSite","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","name":"bscwebdesign.at","description":"","publisher":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/plum-ibex-319890.hostingersite.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#organization","name":"bscwebdesign.at","url":"https:\/\/plum-ibex-319890.hostingersite.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/","url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","contentUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/07\/bsc-logo-next.webp","width":2500,"height":1000,"caption":"bscwebdesign.at"},"image":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/8220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/comments?post=8220"}],"version-history":[{"count":43,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/8220\/revisions"}],"predecessor-version":[{"id":15442,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/8220\/revisions\/15442"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/media\/14102"}],"wp:attachment":[{"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/media?parent=8220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}