{"id":3973,"date":"2025-07-14T11:43:26","date_gmt":"2025-07-14T11:43:26","guid":{"rendered":"https:\/\/bscwebdesign.at\/references\/"},"modified":"2026-07-15T06:52:42","modified_gmt":"2026-07-15T06:52:42","slug":"references","status":"publish","type":"page","link":"https:\/\/bscwebdesign.at\/en\/references\/","title":{"rendered":"References"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3973\" class=\"elementor elementor-3973 elementor-48\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d2eae48 e-con-full e-flex e-con e-parent\" data-id=\"d2eae48\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b02235e elementor-widget elementor-widget-html\" data-id=\"b02235e\" 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-1aa2c35 elementor-widget elementor-widget-html\" data-id=\"1aa2c35\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- REFERENCES HERO -->\n<section class=\"ref-hero-section\">\n\n  <div class=\"ref-hero-grid-bg\"><\/div>\n\n  <div class=\"ref-hero-inner\">\n\n    <h1 class=\"ref-hero-heading\">\n      More than just<br>\n      <span class=\"ref-hero-accent\">good-looking websites<\/span>\n    <\/h1>\n\n    <p class=\"ref-hero-sub\">\n      We create digital experiences that think ahead, build trust and bring in new customers.\n    <\/p>\n\n    <div class=\"ref-hero-stats\">\n\n      <div class=\"ref-hero-stat\">\n        <span class=\"ref-hero-stat-num\">Avg. 4 weeks<\/span>\n        <span class=\"ref-hero-stat-label\">to launch<\/span>\n      <\/div>\n\n      <div class=\"ref-hero-stat-sep\"><\/div>\n\n      <div class=\"ref-hero-stat\">\n        <span class=\"ref-hero-stat-num\">100%<\/span>\n        <span class=\"ref-hero-stat-label\">personal<\/span>\n      <\/div>\n\n      <div class=\"ref-hero-stat-sep\"><\/div>\n\n      <div class=\"ref-hero-stat\">\n        <span class=\"ref-hero-stat-num\">&lt; 24h<\/span>\n        <span class=\"ref-hero-stat-label\">response time<\/span>\n      <\/div>\n\n      <div class=\"ref-hero-stat-sep\"><\/div>\n\n      <div class=\"ref-hero-stat\">\n        <span class=\"ref-hero-stat-num\">4.9 \u2605<\/span>\n        <span class=\"ref-hero-stat-label\">on Google<\/span>\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   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.ref-hero-section {\n  position: relative;\n  background: #FDFDFD;\n  padding: 120px 0 40px;\n  overflow: hidden;\n  text-align: center;\n  display: flex;\n  align-items: center;\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.ref-hero-grid-bg {\n  position: absolute;\n  inset: 0;\n\n  background-image:\n    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.ref-hero-inner {\n  position: relative;\n  max-width: 1000px;\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   HEADING\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.ref-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.ref-hero-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   SUBLINE\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.ref-hero-sub {\n  font-size: 18px;\n  color: #666;\n  margin: 0 auto 40px;\n  line-height: 1.6;\n  max-width: 600px;\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   STATS\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.ref-hero-stats {\n  display: inline-flex;\n  align-items: center;\n\n  background: #fff;\n\n  border:\n    0.5px solid\n    rgba(21, 29, 165, 0.45);\n\n  border-radius: 16px;\n\n  padding: 0 8px;\n\n  box-shadow:\n    0 2px 12px\n    rgba(21, 29, 165, 0.05);\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   STAT\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.ref-hero-stat {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  gap: 4px;\n\n  padding: 22px 32px;\n}\n\n.ref-hero-stat-num {\n  font-size: 18px;\n  font-weight: 700;\n\n  color: #0d0d0d;\n\n  letter-spacing: -0.01em;\n  line-height: 1;\n}\n\n.ref-hero-stat-label {\n  font-size: 14px;\n  color: #888;\n  font-weight: 500;\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   SEPARATORS\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.ref-hero-stat-sep {\n  width: 1px;\n  height: 36px;\n\n  background:\n    rgba(21, 29, 165, 0.14);\n\n  flex-shrink: 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   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  .ref-hero-section {\n    padding: 120px 0 40px;\n  }\n\n  .ref-hero-heading {\n    font-size: 40px;\n  }\n\n  .ref-hero-stat {\n    padding: 18px 20px;\n  }\n\n}\n\n\n@media (max-width: 768px) {\n\n  .ref-hero-section {\n    padding: 120px 0 40px;\n  }\n\n  .ref-hero-heading {\n    font-size: 40px;\n  }\n\n  .ref-hero-stat {\n    padding: 18px 20px;\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  .ref-hero-section {\n    padding: 120px 0 40px;\n  }\n\n  .ref-hero-heading {\n    font-size: 32px;\n  }\n\n  .ref-hero-sub {\n    font-size: 16px;\n    margin-bottom: 40px;\n  }\n\n  .ref-hero-inner {\n    padding: 0 20px;\n  }\n\n  .ref-hero-stats {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n\n    padding: 0;\n\n    width: 100%;\n  }\n\n  .ref-hero-stat {\n    padding: 18px 16px;\n  }\n\n  .ref-hero-stat:nth-child(1) {\n    border-bottom:\n      1px solid\n      rgba(21, 29, 165, 0.12);\n\n    border-right:\n      1px solid\n      rgba(21, 29, 165, 0.12);\n  }\n\n  .ref-hero-stat:nth-child(3) {\n    border-bottom:\n      1px solid\n      rgba(21, 29, 165, 0.12);\n  }\n\n  .ref-hero-stat:nth-child(5) {\n    border-right:\n      1px solid\n      rgba(21, 29, 165, 0.12);\n  }\n\n  .ref-hero-stat-sep {\n    display: none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3cb0803 elementor-widget elementor-widget-html\" data-id=\"3cb0803\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- REFERENCES GRID -->\n<section class=\"ref-grid-section\">\n\n  <div class=\"ref-grid-inner\">\n\n    <div class=\"ref-grid-header\">\n      <h2 class=\"ref-grid-heading\">\n        Selected <span>Projects<\/span>.\n      <\/h2>\n    <\/div>\n\n    <div class=\"ref-masonry\">\n\n      <!-- Column 1 -->\n      <div class=\"ref-col\">\n\n        <!-- Buzz Babes \u2014 LARGE -->\n        <div class=\"ref-card\" style=\"--img-h: 707px\">\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Buzz-Babes-Referenz-BSC-Webdesign-scaled-1.webp\" alt=\"Buzz Babes\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Music<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Website<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                Buzz Babes Girls Collective\n              <\/h3>\n\n              <a href=\"https:\/\/buzzbabes.com\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- Testimonial: Lisa-Marie Audic -->\n        <div class=\"ref-testi\">\n\n          <div class=\"ref-testi-stars\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n          <\/div>\n\n          <p class=\"ref-testi-quote\">\n            \"You feel well looked after from the very beginning. A super friendly and highly competent team, fast and professional implementation and a great feel for individual requirements. Fair prices and a collaboration that is genuinely enjoyable.\"\n          <\/p>\n\n          <div class=\"ref-testi-author\">\n\n            <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Buzz-Babes-head.webp\" alt=\"Lisa-Marie Audic\" class=\"ref-testi-avatar\"\/>\n\n            <div class=\"ref-testi-meta\">\n              <strong>Lisa-Marie Audic<\/strong>\n              <span>Buzz Babes Girls Collective<\/span>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n\n        <!-- Schwarzenberger Coaching \u2014 SMALL -->\n        <div class=\"ref-card\" style=\"--img-h: 298px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Schwarzenberger-Consulting-Desktop-scaled-1.webp\" alt=\"Schwarzenberger Coaching\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Coaching<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Website<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                Schwarzenberger Coaching\n              <\/h3>\n\n              <a href=\"https:\/\/www.schwarzenberger-coaching.at\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- MEDI.CO \u2014 MEDIUM -->\n        <div class=\"ref-card\" style=\"--img-h: 530px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/MEDICO-Referenz-BSC-Webdesign.webp\" alt=\"MEDI.CO Fach\u00e4rzte\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Healthcare<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Website<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                MEDI.CO Fach\u00e4rzte\n              <\/h3>\n\n              <a href=\"https:\/\/medico-working.at\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- Testimonial: Dr. Ferdinand Aglas -->\n        <div class=\"ref-testi\">\n\n          <div class=\"ref-testi-stars\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n          <\/div>\n\n          <p class=\"ref-testi-quote\">\n            \"Our website, Google Maps presence and ongoing support are handled professionally and reliably. We especially appreciate the fast response times, with changes usually completed on the same day. We feel very well supported and can confidently recommend BSC Webdesign.\"\n          <\/p>\n\n          <div class=\"ref-testi-author\">\n\n            <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Ferdinand-Aglas-Headshot.webp\" alt=\"Dr. Ferdinand Aglas\" class=\"ref-testi-avatar\"\/>\n\n            <div class=\"ref-testi-meta\">\n              <strong>Dr. Ferdinand Aglas<\/strong>\n              <span>MEDI.CO Fach\u00e4rzte<\/span>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n\n        <!-- Weingut PAX \u2014 LARGE -->\n        <div class=\"ref-card\" style=\"--img-h: 707px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Weingut-PAX-Referenz-BSC-Webdesign-scaled-1.webp\" alt=\"Weingut PAX\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Retail<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Online Shop<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                Weingut PAX\n              <\/h3>\n\n              <a href=\"https:\/\/weingut-pax.at\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- Ahevita \u2014 SMALL -->\n        <div class=\"ref-card\" style=\"--img-h: 298px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Ahevita-Referenz-BSC-Webdesign.webp\" alt=\"Ahevita\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Healthcare<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Website<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                Ahevita\n              <\/h3>\n\n              <a href=\"https:\/\/ahevita.com\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n\n      <!-- Column 2 -->\n      <div class=\"ref-col\">\n\n        <!-- Testimonial: Caroline Schwarzenberger -->\n        <div class=\"ref-testi\">\n\n          <div class=\"ref-testi-stars\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n          <\/div>\n\n          <p class=\"ref-testi-quote\">\n            \"You feel understood from the very beginning. Tobias, Paul and Aaron think ahead, are reliable and make the whole collaboration straightforward. Exactly how you want working together to feel.\"\n          <\/p>\n\n          <div class=\"ref-testi-author\">\n\n            <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Schwarzenberger-Consulting-Head.webp\" alt=\"Caroline Schwarzenberger\" class=\"ref-testi-avatar\"\/>\n\n            <div class=\"ref-testi-meta\">\n              <strong>Caroline Schwarzenberger<\/strong>\n              <span>Schwarzenberger Consulting<\/span>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n\n        <!-- Vereno \u2014 SMALL -->\n        <div class=\"ref-card\" style=\"--img-h: 298px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Vereno-Wein.webp\" alt=\"Vereno Weinhandel\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Retail<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Online Shop<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                Vereno Weinhandel\n              <\/h3>\n\n              <a href=\"https:\/\/vereno-wein.at\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- TWOBUILD \u2014 LARGE -->\n        <div class=\"ref-card\" style=\"--img-h: 707px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Twobuild-Referenz-BSC-Webdesign-scaled-1.webp\" alt=\"TWOBUILD\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Construction<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Website<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                TWOBUILD\n              <\/h3>\n\n              <a href=\"https:\/\/www.twobuild.cc\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- Testimonial: Dr. Lukas Karamat -->\n        <div class=\"ref-testi\">\n\n          <div class=\"ref-testi-stars\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n          <\/div>\n\n          <p class=\"ref-testi-quote\">\n            \"Super friendly team, excellent advice and fast implementation! I can highly recommend BSC Webdesign. Thank you so much and all the best!\"\n          <\/p>\n\n          <div class=\"ref-testi-author\">\n\n            <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Lukas-Karamat-head.webp\" alt=\"Dr. Lukas Karamat\" class=\"ref-testi-avatar\"\/>\n\n            <div class=\"ref-testi-meta\">\n              <strong>Dr. Lukas Karamat<\/strong>\n              <span>Dr. Karamat<\/span>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n\n        <!-- Dr. Uzel \u2014 MEDIUM -->\n        <div class=\"ref-card\" style=\"--img-h: 530px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Dr-Uzel-Referenz-BSC-Webdesign.webp\" alt=\"Dr. Robert Uzel\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Healthcare<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Website<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                Dr. Robert Uzel\n              <\/h3>\n\n              <a href=\"https:\/\/kardiologe-salzburg.com\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- Dr. Karamat \u2014 LARGE -->\n        <div class=\"ref-card\" style=\"--img-h: 707px\">\n\n          <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Dr-Karamat-Referenz-BSC-Webdesign-scaled-1.webp\" alt=\"Dr. Karamat\" loading=\"lazy\"\/>\n\n          <div class=\"ref-card-overlay\">\n            <div class=\"ref-card-overlay-inner\">\n\n              <div class=\"ref-card-tags\">\n                <span class=\"ref-card-tag\">Healthcare<\/span>\n                <span class=\"ref-card-tag ref-card-tag--service\">Website<\/span>\n              <\/div>\n\n              <h3 class=\"ref-card-name\">\n                Dr. Karamat\n              <\/h3>\n\n              <a href=\"https:\/\/drkaramat.at\/\" class=\"ref-card-link\" target=\"_blank\" rel=\"noopener\">\n                View project\n\n                <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\">\n                  <path d=\"M2 7h10M8 3l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n                <\/svg>\n              <\/a>\n\n            <\/div>\n          <\/div>\n        <\/div>\n\n\n        <!-- Testimonial: Petra Maria Paulhart -->\n        <div class=\"ref-testi\">\n\n          <div class=\"ref-testi-stars\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"#f5a623\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n          <\/div>\n\n          <p class=\"ref-testi-quote\">\n            \"I am incredibly happy with the result. The team really took the time to understand my individual needs and always managed to meet my expectations. I can recommend BSC to anyone looking for friendly, authentic and modern advice and implementation in web design. Thank you so much!\"\n          <\/p>\n\n          <div class=\"ref-testi-author\">\n\n            <img decoding=\"async\" src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Petra-Maria-Paulhart-head.webp\" alt=\"Petra Maria Paulhart\" class=\"ref-testi-avatar\"\/>\n\n            <div class=\"ref-testi-meta\">\n              <strong>Petra Maria Paulhart<\/strong>\n              <span>Ahevita<\/span>\n            <\/div>\n\n          <\/div>\n        <\/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   HEADING\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.ref-grid-heading span {\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   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.ref-grid-section {\n  background: #FDFDFD;\n  padding: 68px 0 88px;\n  position: relative;\n  overflow: hidden;\n}\n\n.ref-grid-section::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n\n  background-image:\n    radial-gradient(\n      circle,\n      #c8cbdc 1px,\n      transparent 1px\n    );\n\n  background-size: 28px 28px;\n  opacity: 0.3;\n  pointer-events: none;\n}\n\n.ref-grid-inner {\n  position: relative;\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 48px;\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.ref-grid-header {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 20px;\n\n  margin-bottom: 40px;\n\n  flex-wrap: wrap;\n}\n\n.ref-grid-heading {\n  font-size: clamp(2rem, 3.5vw, 3rem);\n  text-align: center;\n  font-weight: 900;\n\n  color: #0d0d0d;\n\n  line-height: 1.2;\n  margin: 0;\n\n  letter-spacing: -0.02em;\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   MASONRY\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.ref-masonry {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n  align-items: start;\n}\n\n.ref-col {\n  display: flex;\n  flex-direction: column;\n  gap: 24px;\n}\n\n.ref-col:nth-child(2) {\n  margin-top: 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   IMAGE 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.ref-card {\n  border-radius: 14px;\n  overflow: hidden;\n\n  position: relative;\n\n  cursor: pointer;\n\n  border: 0.5px solid #eaecf2;\n\n  background: #fff;\n\n  box-shadow:\n    0 2px 12px\n    rgba(0, 0, 0, 0.05);\n\n  transition:\n    box-shadow 0.3s,\n    transform 0.3s;\n}\n\n.ref-card:hover {\n  box-shadow:\n    0 12px 40px\n    rgba(21, 29, 165, 0.13);\n\n  transform:\n    translateY(-3px);\n}\n\n.ref-card img {\n  width: 100%;\n  height: var(--img-h);\n\n  object-fit: cover;\n  object-position: top center;\n\n  display: block;\n\n  transition:\n    transform 0.5s\n    cubic-bezier(\n      0.25,\n      0.46,\n      0.45,\n      0.94\n    );\n}\n\n.ref-card:hover img {\n  transform: scale(1.04);\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   OVERLAY\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.ref-card-overlay {\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      to top,\n      rgba(13, 13, 13, 0.88) 0%,\n      rgba(13, 13, 13, 0.28) 50%,\n      transparent 100%\n    );\n\n  opacity: 0;\n\n  transition:\n    opacity 0.3s ease;\n\n  display: flex;\n  align-items: flex-end;\n}\n\n.ref-card:hover .ref-card-overlay {\n  opacity: 1;\n}\n\n.ref-card-overlay-inner {\n  padding: 28px;\n  width: 100%;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 8px;\n\n  transform:\n    translateY(8px);\n\n  transition:\n    transform 0.3s ease;\n}\n\n.ref-card:hover .ref-card-overlay-inner {\n  transform:\n    translateY(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   TAGS\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.ref-card-tags {\n  display: flex;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.ref-card-tag {\n  font-size: 10px;\n  font-weight: 700;\n\n  letter-spacing: 0.08em;\n\n  text-transform: uppercase;\n\n  padding: 3px 10px;\n\n  border-radius: 20px;\n\n  background:\n    rgba(255, 255, 255, 0.15);\n\n  color:\n    rgba(255, 255, 255, 0.85);\n\n  border:\n    1px solid\n    rgba(255, 255, 255, 0.2);\n\n  backdrop-filter: blur(4px);\n}\n\n.ref-card-tag--service {\n  background:\n    rgba(21, 29, 165, 0.78);\n\n  border-color:\n    rgba(255, 255, 255, 0.22);\n\n  color: #fff;\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   PROJECT NAME\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.ref-card-name {\n  font-size: 18px;\n  font-weight: 800;\n\n  color: #fff;\n\n  margin: 0;\n\n  letter-spacing: -0.01em;\n\n  line-height: 1.2;\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   PROJECT LINK\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.ref-card-link {\n  display: inline-flex;\n  align-items: center;\n\n  gap: 6px;\n\n  font-size: 16px;\n  font-weight: 600;\n\n  color:\n    rgba(255, 255, 255, 0.78);\n\n  text-decoration: none;\n\n  transition:\n    gap 0.2s,\n    color 0.2s;\n}\n\n.ref-card-link:hover {\n  gap: 10px;\n  color: #fff;\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   TESTIMONIAL 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.ref-testi {\n  background: #fff;\n\n  border:\n    0.5px solid\n    rgba(21, 29, 165, 0.14);\n\n  border-radius: 14px;\n\n  padding: 28px;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 16px;\n\n  box-shadow:\n    0 2px 12px\n    rgba(0, 0, 0, 0.04);\n\n  position: relative;\n}\n\n.ref-testi::before {\n  content: '\\201C';\n\n  position: absolute;\n\n  top: 16px;\n  right: 24px;\n\n  font-size: 72px;\n  line-height: 1;\n\n  color:\n    rgba(21, 29, 165, 0.07);\n\n  font-family:\n    Georgia,\n    serif;\n\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   STARS\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.ref-testi-stars {\n  display: flex;\n  gap: 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   QUOTE\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.ref-testi-quote {\n  font-size: 16px;\n  line-height: 1.75;\n\n  color: #3a3a4a;\n\n  margin: 0;\n\n  font-style: italic;\n\n  position: relative;\n  z-index: 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   AUTHOR\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.ref-testi-author {\n  display: flex;\n  align-items: center;\n\n  gap: 12px;\n\n  padding-top: 10px;\n}\n\n.ref-testi-avatar {\n  width: 44px;\n  height: 44px;\n\n  border-radius: 50%;\n\n  object-fit: cover;\n  object-position: top center;\n\n  flex-shrink: 0;\n\n  border:\n    2px solid\n    rgba(21, 29, 165, 0.10);\n}\n\n.ref-testi-meta {\n  display: flex;\n  flex-direction: column;\n\n  gap: 2px;\n}\n\n.ref-testi-meta strong {\n  font-size: 16px;\n  font-weight: 700;\n\n  color: #0d0d0d;\n\n  line-height: 1.2;\n}\n\n.ref-testi-meta span {\n  font-size: 14px;\n  color: #151DA5;\n  font-weight: 600;\n\n  letter-spacing: 0.04em;\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: 640px) {\n\n  .ref-grid-section {\n    padding: 64px 0;\n  }\n\n  .ref-grid-inner {\n    padding: 0 16px;\n  }\n\n  .ref-masonry {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n\n  .ref-col {\n    gap: 16px;\n  }\n\n  .ref-col:nth-child(2) {\n    margin-top: 0;\n  }\n\n  .ref-card img {\n    height:\n      calc(\n        var(--img-h) * 0.65\n      ) !important;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-7b9133a elementor-widget elementor-widget-html\" data-id=\"7b9133a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- CASE STUDY SPOTLIGHT -->\n<section class=\"cs-section\">\n  <div class=\"cs-inner\">\n\n    <div class=\"cs-header\">\n      <h2 class=\"cs-heading\">\n        Projects that made a <span>real difference<\/span>.\n      <\/h2>\n\n      <p class=\"cs-sub\">\n        Two real-world examples of how we think and what that approach can achieve.\n      <\/p>\n    <\/div>\n\n\n    <!-- \u2500\u2500 CASE 1: MEDI.CO \u2500\u2500 -->\n    <div class=\"cs-card\">\n\n      <div class=\"cs-card-header\">\n        <div class=\"cs-card-client\">\n          Dr. Aglas \/ Medi.co \u00b7 Salzburg\n        <\/div>\n\n        <h3 class=\"cs-card-title\">\n          Clarity builds trust.<br>\n          Trust drives growth.\n        <\/h3>\n      <\/div>\n\n\n      <div class=\"cs-card-body\">\n\n        <!-- Left: Accordion -->\n        <div class=\"cs-content\">\n\n          <div class=\"case-accordion\">\n\n            <div class=\"case-acc-item\">\n\n              <button\n                class=\"case-acc-trigger\"\n                aria-expanded=\"false\"\n              >\n                <span>Starting point<\/span>\n\n                <svg\n                  class=\"case-acc-icon\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 18 18\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M4 7l5 5 5-5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.8\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n              <\/button>\n\n              <div class=\"case-acc-body\">\n                <p>\n                  Dr. Aglas' existing website was outdated both technically and visually.\n                  It lacked clear positioning and a structure that could support future growth.\n                  At the same time, the vision for a modern medical centre with multiple\n                  independent physicians was beginning to take shape.\n                <\/p>\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"case-acc-item\">\n\n              <button\n                class=\"case-acc-trigger\"\n                aria-expanded=\"false\"\n              >\n                <span>Our approach<\/span>\n\n                <svg\n                  class=\"case-acc-icon\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 18 18\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M4 7l5 5 5-5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.8\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n              <\/button>\n\n              <div class=\"case-acc-body\">\n                <p>\n                  We repositioned the brand as a modern medical centre and gave the website\n                  a clear strategic direction. The new site was designed to be intuitive,\n                  structured and reassuring. Instead of an overloaded design, the focus is\n                  on clarity, professionalism and easy navigation.\n                <\/p>\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"case-acc-item case-acc-item--open\">\n\n              <button\n                class=\"case-acc-trigger\"\n                aria-expanded=\"true\"\n              >\n                <span>The result<\/span>\n\n                <svg\n                  class=\"case-acc-icon\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 18 18\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M4 7l5 5 5-5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.8\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n              <\/button>\n\n              <div class=\"case-acc-body\">\n                <p>\n                  Within one year, the centre grew to six physicians.\n                  The website strengthens the centre's professional image, builds trust\n                  and actively supports the continued growth of the location.\n                <\/p>\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n\n        <!-- Right: Slider -->\n        <div class=\"case-visual\">\n\n          <div\n            class=\"case-slider\"\n            id=\"caseSlider1\"\n          >\n\n            <div class=\"case-slider-after\">\n              <img decoding=\"async\"\n                src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign-MEDICO-after.webp\"\n                alt=\"Website after the redesign\"\n                draggable=\"false\"\n              \/>\n            <\/div>\n\n            <div\n              class=\"case-slider-before\"\n              id=\"caseSliderBefore1\"\n            >\n              <img decoding=\"async\"\n                src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign_Aglas-before-1.webp\"\n                alt=\"Website before the redesign\"\n                draggable=\"false\"\n              \/>\n            <\/div>\n\n            <div class=\"case-slider-label case-slider-label--before\">\n              Before\n            <\/div>\n\n            <div class=\"case-slider-label case-slider-label--after\">\n              After\n            <\/div>\n\n            <div\n              class=\"case-slider-handle\"\n              id=\"caseSliderHandle1\"\n            >\n\n              <div class=\"case-slider-line\"><\/div>\n\n              <div class=\"case-slider-btn\">\n\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M7 4l-4 6 4 6M13 4l4 6-4 6\"\n                    stroke=\"white\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n\n              <\/div>\n\n              <div class=\"case-slider-line\"><\/div>\n\n            <\/div>\n\n          <\/div>\n\n          <p class=\"case-slider-hint\">\n            \u2190 Drag to compare \u2192\n          <\/p>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- \u2500\u2500 CASE 2: WEINGUT PAX \u2500\u2500 -->\n    <div class=\"cs-card\">\n\n      <div class=\"cs-card-header\">\n\n        <div class=\"cs-card-client\">\n          Weingut PAX \u00b7 Lower Austria\n        <\/div>\n\n        <h3 class=\"cs-card-title\">\n          From the vineyard to the web.<br>\n          As professional as the wine itself.\n        <\/h3>\n\n      <\/div>\n\n\n      <div class=\"cs-card-body cs-card-body--flipped\">\n\n        <!-- Slider -->\n        <div class=\"case-visual\">\n\n          <div\n            class=\"case-slider\"\n            id=\"caseSlider2\"\n          >\n\n            <div class=\"case-slider-after\">\n              <img decoding=\"async\"\n                src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Pax-after-scaled-1.png\"\n                alt=\"Weingut PAX after the redesign\"\n                draggable=\"false\"\n              \/>\n            <\/div>\n\n            <div\n              class=\"case-slider-before\"\n              id=\"caseSliderBefore2\"\n            >\n              <img decoding=\"async\"\n                src=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/Pax-before-scaled-1.png\"\n                alt=\"Weingut PAX before the redesign\"\n                draggable=\"false\"\n              \/>\n            <\/div>\n\n            <div class=\"case-slider-label case-slider-label--before\">\n              Before\n            <\/div>\n\n            <div class=\"case-slider-label case-slider-label--after\">\n              After\n            <\/div>\n\n            <div\n              class=\"case-slider-handle\"\n              id=\"caseSliderHandle2\"\n            >\n\n              <div class=\"case-slider-line\"><\/div>\n\n              <div class=\"case-slider-btn\">\n\n                <svg\n                  width=\"20\"\n                  height=\"20\"\n                  viewBox=\"0 0 20 20\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M7 4l-4 6 4 6M13 4l4 6-4 6\"\n                    stroke=\"white\"\n                    stroke-width=\"2\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n\n              <\/div>\n\n              <div class=\"case-slider-line\"><\/div>\n\n            <\/div>\n\n          <\/div>\n\n          <p class=\"case-slider-hint\">\n            \u2190 Drag to compare \u2192\n          <\/p>\n\n        <\/div>\n\n\n        <!-- Accordion -->\n        <div class=\"cs-content\">\n\n          <div class=\"case-accordion\">\n\n            <div class=\"case-acc-item\">\n\n              <button\n                class=\"case-acc-trigger\"\n                aria-expanded=\"false\"\n              >\n                <span>Starting point<\/span>\n\n                <svg\n                  class=\"case-acc-icon\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 18 18\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M4 7l5 5 5-5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.8\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n              <\/button>\n\n              <div class=\"case-acc-body\">\n                <p>\n                  Verena and Franz had a website that did not reflect the quality of their wines.\n                  The products were visible, but customers could not buy them online.\n                  Interested visitors had to enquire instead of placing an order.\n                  In an industry where first impressions matter, valuable potential was being lost.\n                <\/p>\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"case-acc-item\">\n\n              <button\n                class=\"case-acc-trigger\"\n                aria-expanded=\"false\"\n              >\n                <span>Our approach<\/span>\n\n                <svg\n                  class=\"case-acc-icon\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 18 18\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M4 7l5 5 5-5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.8\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n              <\/button>\n\n              <div class=\"case-acc-body\">\n                <p>\n                  We did not simply build a new shop. We first took the time to understand\n                  the business, its target audience and its positioning. The result is an\n                  online shop that brings the quality of the wines to life digitally.\n                  A clear structure, a simple ordering process and a presence that builds trust.\n                <\/p>\n              <\/div>\n\n            <\/div>\n\n\n            <div class=\"case-acc-item case-acc-item--open\">\n\n              <button\n                class=\"case-acc-trigger\"\n                aria-expanded=\"true\"\n              >\n                <span>The result<\/span>\n\n                <svg\n                  class=\"case-acc-icon\"\n                  width=\"18\"\n                  height=\"18\"\n                  viewBox=\"0 0 18 18\"\n                  fill=\"none\"\n                >\n                  <path\n                    d=\"M4 7l5 5 5-5\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.8\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  \/>\n                <\/svg>\n              <\/button>\n\n              <div class=\"case-acc-body\">\n                <p>\n                  A digital presence that stands out in the industry.\n                  Customers can now order directly, easily and at any time.\n                  The website reflects the winery's commitment to quality\n                  and brings that standard to life online.\n                <\/p>\n              <\/div>\n\n            <\/div>\n\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\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   HEADING\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.cs-heading span {\n  color: #151DA5;\n}\n\n.cs-card-title {\n  font-size: 18px !important;\n  font-weight: 600 !important;\n  line-height: 1.15 !important;\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   BUTTON 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.case-acc-trigger {\n  -webkit-tap-highlight-color: transparent;\n  outline: none;\n}\n\n.case-acc-trigger:focus,\n.case-acc-trigger:active,\n.case-acc-trigger:focus-visible {\n  outline: none !important;\n  box-shadow: none !important;\n}\n\n.case-acc-item:not(.case-acc-item--open) .case-acc-trigger,\n.case-acc-item:not(.case-acc-item--open) .case-acc-trigger:hover,\n.case-acc-item:not(.case-acc-item--open) .case-acc-trigger:focus,\n.case-acc-item:not(.case-acc-item--open) .case-acc-trigger:active,\n.case-acc-item:not(.case-acc-item--open) .case-acc-trigger:focus-visible {\n  background: #fafbff !important;\n  color: #0d0d0d !important;\n}\n\n.case-acc-item--open .case-acc-trigger,\n.case-acc-item--open .case-acc-trigger:hover,\n.case-acc-item--open .case-acc-trigger:focus,\n.case-acc-item--open .case-acc-trigger:active,\n.case-acc-item--open .case-acc-trigger:focus-visible {\n  background: rgba(21, 29, 165, 0.08) !important;\n  color: #151DA5 !important;\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.cs-section {\n  background: #FDFDFD;\n  padding: 88px 0;\n  position: relative;\n  overflow: hidden;\n}\n\n.cs-section::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n\n  background-image:\n    radial-gradient(\n      circle,\n      #c8cbdc 1px,\n      transparent 1px\n    );\n\n  background-size: 28px 28px;\n  opacity: 0.3;\n  pointer-events: none;\n}\n\n.cs-inner {\n  position: relative;\n  max-width: 1160px;\n  margin: 0 auto;\n  padding: 0 48px;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 56px;\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.cs-header {\n  text-align: center;\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  gap: 16px;\n}\n\n.cs-heading {\n  font-size: clamp(1.8rem, 3vw, 2.6rem);\n  font-weight: 900;\n\n  color: #0d0d0d;\n\n  line-height: 1.2;\n  margin: 0;\n\n  letter-spacing: -0.02em;\n}\n\n.cs-sub {\n  font-size: 16px;\n  color: #666;\n\n  margin: 0;\n\n  max-width: 520px;\n  line-height: 1.6;\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.cs-card {\n  background: #fff;\n\n  border:\n    1px solid\n    #eaecf2;\n\n  border-radius: 20px;\n\n  overflow: hidden;\n\n  box-shadow:\n    0 4px 32px\n    rgba(21, 29, 165, 0.06);\n}\n\n.cs-card-header {\n  padding: 24px 32px;\n\n  border-bottom:\n    1px solid\n    #eaecf2;\n\n  background:\n    rgba(21, 29, 165, 0.025);\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 6px;\n}\n\n.cs-card-client {\n  font-size: 14px;\n  font-weight: 700;\n\n  letter-spacing: 0.1em;\n\n  color: #151DA5;\n}\n\n.cs-card-title {\n  font-size:\n    clamp(\n      1.1rem,\n      2vw,\n      1.35rem\n    );\n\n  font-weight: 800;\n\n  color: #0d0d0d;\n\n  margin: 0;\n\n  letter-spacing: -0.02em;\n\n  line-height: 1.25;\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   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.cs-card-body {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n}\n\n.cs-card-body--flipped {\n  direction: rtl;\n}\n\n.cs-card-body--flipped > * {\n  direction: ltr;\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   CONTENT SIDE\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.cs-content {\n  padding: 32px;\n\n  display: flex;\n  flex-direction: column;\n\n  gap: 24px;\n\n  justify-content: center;\n\n  border-right:\n    1px solid\n    #eaecf2;\n}\n\n.cs-card-body--flipped .cs-content {\n  border-right: none;\n\n  border-left:\n    1px solid\n    #eaecf2;\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   ACCORDION\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.case-accordion {\n  display: flex;\n  flex-direction: column;\n\n  border-radius: 12px;\n\n  overflow: hidden;\n\n  border:\n    1px solid\n    #eaecf2;\n\n  background: #fff;\n}\n\n.case-acc-item {\n  border-bottom:\n    1px solid\n    #eaecf2;\n}\n\n.case-acc-item:last-child {\n  border-bottom: none;\n}\n\n.case-acc-trigger {\n  width: 100%;\n\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: 14px 18px;\n\n  background: #fafbff;\n\n  border: none;\n\n  cursor: pointer;\n\n  font-size: 16px;\n  font-weight: 700;\n\n  color: #0d0d0d;\n\n  text-align: left;\n\n  transition:\n    background 0.2s,\n    color 0.2s;\n\n  font-family: inherit;\n}\n\n.case-acc-trigger:hover {\n  background:\n    rgba(21, 29, 165, 0.05);\n\n  color: #0d0d0d;\n}\n\n.case-acc-item--open .case-acc-trigger {\n  background:\n    rgba(21, 29, 165, 0.08);\n\n  color: #151DA5;\n\n  border-left:\n    3px solid\n    #151DA5;\n}\n\n.case-acc-icon {\n  flex-shrink: 0;\n\n  color: #999;\n\n  transition:\n    transform 0.25s,\n    color 0.25s;\n}\n\n.case-acc-item--open .case-acc-icon {\n  transform:\n    rotate(180deg);\n\n  color: #151DA5;\n}\n\n.case-acc-body {\n  max-height: 0;\n\n  overflow: hidden;\n\n  transition:\n    max-height 0.35s ease,\n    padding 0.25s ease;\n\n  padding:\n    0 18px;\n\n  background: #fff;\n}\n\n.case-acc-item--open .case-acc-body {\n  max-height: 600px;\n\n  padding:\n    14px 18px;\n}\n\n.case-acc-body p {\n  font-size: 16px;\n  line-height: 1.75;\n\n  color: #555;\n\n  margin: 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   VISUAL SIDE\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.case-visual {\n  display: flex;\n  flex-direction: column;\n\n  align-items: center;\n\n  gap: 10px;\n\n  padding: 32px;\n\n  background: #f4f5f9;\n\n  justify-content: center;\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   SLIDER\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.case-slider {\n  position: relative;\n\n  width: 100%;\n\n  border-radius: 12px;\n\n  overflow: hidden;\n\n  box-shadow:\n    0 8px 40px\n    rgba(21, 29, 165, 0.14),\n    0 2px 8px\n    rgba(0, 0, 0, 0.08);\n\n  cursor: col-resize;\n\n  user-select: none;\n\n  border:\n    1px solid\n    #e4e6f2;\n\n  aspect-ratio: 16 \/ 10;\n}\n\n.case-slider-after {\n  position: absolute;\n  inset: 0;\n}\n\n.case-slider-after img {\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: top;\n\n  display: block;\n}\n\n.case-slider-before {\n  position: absolute;\n  inset: 0;\n\n  clip-path:\n    inset(\n      0 50% 0 0\n    );\n}\n\n.case-slider-before img {\n  width: 100%;\n  height: 100%;\n\n  object-fit: cover;\n  object-position: top;\n\n  display: block;\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   SLIDER LABELS\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.case-slider-label {\n  position: absolute;\n\n  top: 12px;\n\n  font-size: 10px;\n  font-weight: 700;\n\n  letter-spacing: 0.08em;\n\n  padding:\n    4px 10px;\n\n  border-radius: 20px;\n\n  pointer-events: none;\n\n  z-index: 4;\n\n  backdrop-filter:\n    blur(4px);\n}\n\n.case-slider-label--before {\n  left: 12px;\n\n  background:\n    rgba(\n      255,\n      255,\n      255,\n      0.92\n    );\n\n  color: #444;\n\n  border:\n    1px solid\n    rgba(\n      0,\n      0,\n      0,\n      0.08\n    );\n}\n\n.case-slider-label--after {\n  right: 12px;\n\n  background:\n    #151DA5;\n\n  color: #fff;\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   SLIDER HANDLE\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.case-slider-handle {\n  position: absolute;\n\n  top: 0;\n  bottom: 0;\n  left: 50%;\n\n  transform:\n    translateX(-50%);\n\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  z-index: 5;\n\n  pointer-events: none;\n}\n\n.case-slider-line {\n  flex: 1;\n\n  width: 2px;\n\n  background:\n    rgba(\n      255,\n      255,\n      255,\n      0.9\n    );\n\n  box-shadow:\n    0 0 8px\n    rgba(\n      0,\n      0,\n      0,\n      0.2\n    );\n}\n\n.case-slider-btn {\n  width: 40px;\n  height: 40px;\n\n  background:\n    #151DA5;\n\n  border-radius:\n    50%;\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  box-shadow:\n    0 4px 16px\n    rgba(21, 29, 165, 0.40),\n    0 0 0 3px\n    rgba(255, 255, 255, 0.9);\n\n  flex-shrink: 0;\n\n  transition:\n    transform 0.15s;\n}\n\n.case-slider:hover .case-slider-btn {\n  transform:\n    scale(1.08);\n\n  background:\n    #151DA5;\n}\n\n.case-slider-hint {\n  font-size: 12px;\n\n  color: #aaa;\n\n  font-weight: 500;\n\n  letter-spacing: 0.03em;\n\n  margin: 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   PRIMARY BUTTON\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.cs-section .btn-primary {\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n\n  gap: 8px;\n\n  padding:\n    13px 24px;\n\n  border-radius: 6px;\n\n  background:\n    #151DA5;\n\n  color:\n    #fff !important;\n\n  font-size: 14px;\n\n  font-weight: 600;\n\n  text-decoration: none;\n\n  overflow: hidden;\n\n  transition:\n    transform 0.2s ease,\n    box-shadow 0.2s ease;\n\n  box-shadow:\n    0 4px 18px\n    rgba(21, 29, 165, 0.28);\n\n  white-space: nowrap;\n\n  align-self:\n    flex-start;\n}\n\n.cs-section .btn-primary__text,\n.cs-section .btn-primary__icon {\n  color:\n    #fff !important;\n\n  position: relative;\n\n  z-index: 1;\n}\n\n.cs-section .btn-primary__shine {\n  position: absolute;\n  inset: 0;\n\n  background:\n    linear-gradient(\n      105deg,\n      transparent 30%,\n      rgba(\n        255,\n        255,\n        255,\n        0.22\n      ) 50%,\n      transparent 70%\n    );\n\n  transform:\n    translateX(-100%);\n\n  z-index: 0;\n}\n\n.cs-section .btn-primary:hover {\n  background:\n    #151DA5;\n\n  transform:\n    translateY(-2px);\n\n  box-shadow:\n    0 8px 28px\n    rgba(21, 29, 165, 0.40);\n\n  color:\n    #fff !important;\n}\n\n.cs-section .btn-primary:hover .btn-primary__shine {\n  transform:\n    translateX(200%);\n\n  transition:\n    transform 0.55s ease;\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   RESPONSIVE\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  .cs-card-body,\n  .cs-card-body--flipped {\n    grid-template-columns: 1fr;\n    direction: ltr;\n  }\n\n  .cs-content {\n    border-right:\n      none !important;\n\n    border-left:\n      none !important;\n\n    border-top:\n      1px solid\n      #eaecf2;\n\n    order: 2;\n  }\n\n  .case-visual {\n    order: 1;\n  }\n\n}\n\n\n@media (max-width: 640px) {\n\n  .cs-section {\n    padding:\n      64px 0;\n  }\n\n  .cs-inner {\n    padding:\n      0 20px;\n\n    gap: 36px;\n  }\n\n  .cs-card-header {\n    padding: 20px;\n  }\n\n  .cs-content {\n    padding:\n      24px 20px;\n  }\n\n  .case-visual {\n    padding:\n      24px 20px;\n  }\n\n}\n\n<\/style>\n\n\n<script>\n\n\/* Accordion shared across both case studies *\/\n\ndocument\n  .querySelectorAll('.case-acc-trigger')\n  .forEach(trigger => {\n\n    trigger.addEventListener(\n      'click',\n      () => {\n\n        const item =\n          trigger.closest('.case-acc-item');\n\n        const accordion =\n          item.closest('.case-accordion');\n\n        const isOpen =\n          item.classList.contains(\n            'case-acc-item--open'\n          );\n\n\n        accordion\n          .querySelectorAll('.case-acc-item')\n          .forEach(i => {\n\n            i.classList.remove(\n              'case-acc-item--open'\n            );\n\n            i\n              .querySelector('.case-acc-trigger')\n              .setAttribute(\n                'aria-expanded',\n                'false'\n              );\n\n          });\n\n\n        if (!isOpen) {\n\n          item.classList.add(\n            'case-acc-item--open'\n          );\n\n          trigger.setAttribute(\n            'aria-expanded',\n            'true'\n          );\n\n        }\n\n      }\n    );\n\n  });\n\n\n\/* Slider factory *\/\n\nfunction initSlider(\n  sliderId,\n  beforeId,\n  handleId\n) {\n\n  const slider =\n    document.getElementById(sliderId);\n\n  const before =\n    document.getElementById(beforeId);\n\n  const handle =\n    document.getElementById(handleId);\n\n\n  if (\n    !slider ||\n    !before ||\n    !handle\n  ) {\n    return;\n  }\n\n\n  let isDragging = false;\n\n\n  function setPosition(x) {\n\n    const rect =\n      slider.getBoundingClientRect();\n\n    let pct =\n      (x - rect.left) \/\n      rect.width;\n\n\n    pct =\n      Math.min(\n        Math.max(\n          pct,\n          0.02\n        ),\n        0.98\n      );\n\n\n    before.style.clipPath =\n      `inset(0 ${(100 - pct * 100).toFixed(2)}% 0 0)`;\n\n\n    handle.style.left =\n      (pct * 100).toFixed(2) +\n      '%';\n\n  }\n\n\n  slider.addEventListener(\n    'mousedown',\n    e => {\n\n      isDragging = true;\n\n      setPosition(\n        e.clientX\n      );\n\n      e.preventDefault();\n\n    }\n  );\n\n\n  window.addEventListener(\n    'mousemove',\n    e => {\n\n      if (isDragging) {\n\n        setPosition(\n          e.clientX\n        );\n\n      }\n\n    }\n  );\n\n\n  window.addEventListener(\n    'mouseup',\n    () => {\n\n      isDragging = false;\n\n    }\n  );\n\n\n  slider.addEventListener(\n    'touchstart',\n    e => {\n\n      isDragging = true;\n\n      setPosition(\n        e.touches[0].clientX\n      );\n\n      e.preventDefault();\n\n    },\n    {\n      passive: false\n    }\n  );\n\n\n  window.addEventListener(\n    'touchmove',\n    e => {\n\n      if (isDragging) {\n\n        setPosition(\n          e.touches[0].clientX\n        );\n\n      }\n\n    },\n    {\n      passive: true\n    }\n  );\n\n\n  window.addEventListener(\n    'touchend',\n    () => {\n\n      isDragging = false;\n\n    }\n  );\n\n}\n\n\ninitSlider(\n  'caseSlider1',\n  'caseSliderBefore1',\n  'caseSliderHandle1'\n);\n\ninitSlider(\n  'caseSlider2',\n  'caseSliderBefore2',\n  'caseSliderHandle2'\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>More than just good-looking websites We create digital experiences that think ahead, build trust and bring in new customers. Avg. 4 weeks to launch 100% personal &lt; 24h response time 4.9 \u2605 on Google Selected Projects. Music Website Buzz Babes Girls Collective View project &#8220;You feel well looked after from the very beginning. A super [&hellip;]<\/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-3973","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>References &amp; Projects | BSC Webdesign Vienna<\/title>\n<meta name=\"description\" content=\"Discover selected BSC Webdesign projects, from professional websites and online shops to custom digital solutions.\" \/>\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\/references\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"References &amp; Projects | BSC Webdesign Vienna\" \/>\n<meta property=\"og:description\" content=\"Discover selected BSC Webdesign projects, from professional websites and online shops to custom digital solutions.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bscwebdesign.at\/en\/references\/\" \/>\n<meta property=\"og:site_name\" content=\"bscwebdesign.at\" \/>\n<meta property=\"article:modified_time\" content=\"2026-07-15T06:52:42+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Ahevita-Neu-neu-1024x640.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=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/references\\\/\",\"url\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/references\\\/\",\"name\":\"References & Projects | BSC Webdesign Vienna\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/plum-ibex-319890.hostingersite.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/references\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/references\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/bscwebdesign.at\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/BSC-Webdesign-webshop.webp\",\"datePublished\":\"2025-07-14T11:43:26+00:00\",\"dateModified\":\"2026-07-15T06:52:42+00:00\",\"description\":\"Discover selected BSC Webdesign projects, from professional websites and online shops to custom digital solutions.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/references\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/references\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/references\\\/#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\\\/references\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/bscwebdesign.at\\\/en\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"References\"}]},{\"@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":"References & Projects | BSC Webdesign Vienna","description":"Discover selected BSC Webdesign projects, from professional websites and online shops to custom digital solutions.","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\/references\/","og_locale":"en_US","og_type":"article","og_title":"References & Projects | BSC Webdesign Vienna","og_description":"Discover selected BSC Webdesign projects, from professional websites and online shops to custom digital solutions.","og_url":"https:\/\/bscwebdesign.at\/en\/references\/","og_site_name":"bscwebdesign.at","article_modified_time":"2026-07-15T06:52:42+00:00","og_image":[{"url":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2025\/08\/Ahevita-Neu-neu-1024x640.webp","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bscwebdesign.at\/en\/references\/","url":"https:\/\/bscwebdesign.at\/en\/references\/","name":"References & Projects | BSC Webdesign Vienna","isPartOf":{"@id":"https:\/\/plum-ibex-319890.hostingersite.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/bscwebdesign.at\/en\/references\/#primaryimage"},"image":{"@id":"https:\/\/bscwebdesign.at\/en\/references\/#primaryimage"},"thumbnailUrl":"https:\/\/bscwebdesign.at\/wp-content\/uploads\/2026\/04\/BSC-Webdesign-webshop.webp","datePublished":"2025-07-14T11:43:26+00:00","dateModified":"2026-07-15T06:52:42+00:00","description":"Discover selected BSC Webdesign projects, from professional websites and online shops to custom digital solutions.","breadcrumb":{"@id":"https:\/\/bscwebdesign.at\/en\/references\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bscwebdesign.at\/en\/references\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bscwebdesign.at\/en\/references\/#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\/references\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bscwebdesign.at\/en\/"},{"@type":"ListItem","position":2,"name":"References"}]},{"@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\/3973","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=3973"}],"version-history":[{"count":36,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/3973\/revisions"}],"predecessor-version":[{"id":15049,"href":"https:\/\/bscwebdesign.at\/en\/wp-json\/wp\/v2\/pages\/3973\/revisions\/15049"}],"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=3973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}