<!doctype html>
<html lang="de-CH" class="no-js tmpl tmpl--fw cms-p-8">
 <head>
  <meta charset="UTF-8">
  <title>Home | backslash – artists of new media</title>
  <meta name="description" content="Ihre Schweizer Webagentur mit barrierefreiem Webdesign für eGovernment (Kantone, Städte und Gemeinden), KMU und Verbände. Einfaches CMS (Content Management System) mit GOViS und intellio.">
  <link href="/public/templates/47/6041-normalize_6321-basics_6185-application_6264-layout.css" type="text/css" rel="stylesheet" media="Screen">
  <link href="/public/cssfont/1/font.css" type="text/css" rel="stylesheet" media="Print,Screen">
  <script type="text/plain" data-css-cookiecategory="font"><link href="https://use.typekit.net/bom4whk.css" type="text/css" rel="stylesheet" media="Print,Screen" ></script>
  <link rel="stylesheet" href="/static/css/font-awesome7/7.0.1/fontawesome-regular.css" type="text/css" media="Print,Screen">
  <link href="/public/templates/47/6042-print.css" type="text/css" rel="stylesheet" media="Print">
  <link rel="stylesheet" href="/static/js/global/swiper/8.4.4/swiper-bundle.min.css" type="text/css">
  <link href="/static/css/femodules/confirmation_prompt.min.css?ver=1.8.113" type="text/css" rel="stylesheet">
  <script src="/static/js/global/jquery/jquery-3.7.1.min.js"></script>
  <script src="/static/js/global/helper/helper.min.js?v=0.3.3"></script>
  <script src="/static/js/global/font-awesome/FAIconLoader.min.js"></script>
  <script src="/static/js/global/font-awesome/7.2.0/js/fontawesome.min.js"></script>
  <script src="/static/js/global/localstorage/1.0.1/localstorage.min.js"></script>
  <script src="/static/js/global/swiper/8.4.4/swiper-bundle.min.js"></script>
  <script src="/static/js/global/helper/validator/validator.umd.js?0.0.7"></script>
  <script src="/static/js/femodules/messenger/subscribe.min.js?ver=1.8.113"></script>
  <script src="/static/js/global/helper/util/cffp.min.js"></script>
  <script src="/static/js/handlebars/handlebars-v4.7.9.min.js"></script>
  <script src="/static/js/global/a11y-dialog/8.1.4/a11y-dialog.min.js"></script>
  <script src="/static/js/global/helper/libs/timer/GovisTimerManager.min.js?v=0.0.0"></script>
  <script src="/static/js/femodules/core/a11yDialog.min.js?ver=1.8.113"></script>
  <script src="/static/js/femodules/user/sessionnotification.min.js?ver=1.8.113"></script>
  <script src="/static/js/global/altcha/3.0.2/main/altcha.min.js" type="module"></script>
  <script src="/static/js/global/helper/libs/formSetValues/FormSetValues.min.js?v=0.0.0" type="module"></script>
  <script src="/static/js/global/helper/rule/rule.umd.js?0.0.3" type="module"></script>
  <script src="/static/js/global/helper/menu/entireAjax.min.js?v=0.0.5"></script>
  <script src="/static/js/global/markjs/9.0.0/mark.min.js"></script>
  <script src="/static/js/femodules/search/search.min.js?ver=1.8.113"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="apple-mobile-web-app-title" content="backslash AG">
  <meta name="theme-color" content="#262626">
  <link rel="apple-touch-icon" href="/public/upload/assets/1525/touch-icon--orange.png">
  <link rel="icon" sizes="192x192" href="/public/upload/assets/1525/touch-icon--orange.png">
  <script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "url": "https://www.backslash.ch",
  "logo": "https://www.backslash.ch/public/upload/assets/1525/touch-icon--orange.png"
}
</script>
  <script type="application/ld+json">
{
    "@context": "https://schema.org",
    "@type": "WebSite",
    "url": "https://www.backslash.ch/",
    "potentialAction": {
    "@type": "SearchAction",
    "target": {
        "@type": "EntryPoint",
        "urlTemplate": "https://www.backslash.ch/services/suchresultate.html/14?searchParams.query={search_term_string}"
    },
    "query-input": "required name=search_term_string"
    }
}
</script>
  <meta name="twitter:card" content="summary_large_image">
  <meta property="twitter:title" content="Home | backslash AG">
  <meta property="og:type" content="article">
  <meta property="og:title" content="Home | backslash AG">
  <meta property="twitter:description" content="Das digitale Zuhause für Schweizer Kantone, Städte, Gemeinden, Schulen und gemeindenahe Institutionen.">
  <meta property="og:description" content="Das digitale Zuhause für Schweizer Kantone, Städte, Gemeinden, Schulen und gemeindenahe Institutionen.">
  <meta property="og:url" content="https://www.backslash.ch/">
  <meta property="twitter:url" content="https://www.backslash.ch/">
  <link rel="canonical" href="https://www.backslash.ch/">
  <style>
    /* Panoramabild */
    .pano__background {
        position: absolute;
        z-index: -2;
        left: 0;
        top: 0;
        width: 100%;
        height: clamp(450px, 50vw, 960px);
        /* 960/1920 */
        background: linear-gradient(180deg, #DCEEF1 60%, #FFFFFF 100%);
    }
    .pano__img-container {
        position: relative;
        z-index: -1;
    }
    .pano__img {
        position: absolute;
    }
    .pano__img--city {
        right: min(-5%, calc((100vw - 100%) / -2));
        height: clamp(270px, 40.625vw, 900px);
        /* 780/1920 */
        height: clamp(270px, 46.875vw, 900px);
        /* 780/1920 */
        width: 110%;
        transform: translateY(-66%);
        background-position: right bottom;
        background-size: contain;
        background-repeat: no-repeat;
        background-image: url(/public/upload/assets/6132/Illustration%20Tag.webp?fp=1764838645506);
    }
    .pano__img--cloud {
        top: 10%;
        height: 7.69230769%;
        /* 60/780 */
        width: 100%;
        background-image: url(/public/upload/assets/6133/Wolke.webp?fp=1764139088164);
        background-size: contain;
        background-repeat: no-repeat;
        animation: cloud 60s infinite linear;
        animation-delay: 10s;
        opacity: 0;
    }
    .pano__img--cloud:nth-child(odd) {
        top: 0%;
        animation: cloud 40s infinite linear;
        animation-delay: 0;
    }

    @keyframes cloud {
        0% {
            opacity: 0;
            background-position: 50%;
        }
        25% {
            opacity: 1;
        }
        100% {
            opacity: 1;
            background-position: calc(100% + clamp(250px, 26.04166667vw, 500px));
        }
    }

    .pano__img--star {
        display: none;
        position: absolute;
        z-index: -1;
        width: 0.15em;
        height: 0.15em;
        background: #AFF5FD;
        border-radius: 50%;
        box-shadow: 0 0 4px 0px rgba(141, 242, 255, 0.5);
    }
    .pano__img--star:nth-child(odd) {
        width: 0.05em;
        height: 0.05em;
    }
    .pano__img--moon {
        top: 10%;
        right: 40%;
        width: min(2.23958333vw, 43px);
        height: min(2.23958333vw, 43px)
            /* 43/1920 */
        ;
        background-color: #fff7c2;
        opacity: 0.8;
        border-radius: 50%;
        box-shadow: 0 0 102px 53px rgba(253 255 180/ 0.4);
    }
    .cms-p-8 .main__header {
      max-width: min(100%, 800px);
      margin-block-end: 10em;
    }
    /* Dark mode */
    @media (prefers-color-scheme: dark) {

        :root:not([data-user-color-scheme]) {

            .main__lead {
                text-shadow: 0px 0px 3px var(--bg-color), 0px 0px 6px var(--bg-color);
            }
            .pano__background {
                background: linear-gradient(180deg, #212225 60%, var(--bg-color) 100%);
            }
            .pano__img--city {
                background-image: url(/public/upload/assets/6131/Illustration%20Nacht.webp?fp=1764921877955);
            }
            .pano__img--cloud {
                display: none
            }
            .pano__img--star {
                display: block
            }
            .pano__img--moon {
                background-color: #D5F2DD;
                box-shadow: 0 0 102px 53px rgba(213 242 221/ 0.4);
            }
        }
    }

    [data-user-color-scheme="dark"] .main__lead {
        text-shadow: 0px 0px 3px var(--bg-color), 0px 0px 6px var(--bg-color);
    }
    [data-user-color-scheme="dark"] .pano__background {
        background: linear-gradient(180deg, #212225 60%, var(--bg-color) 100%);
    }
    [data-user-color-scheme="dark"] .pano__img--city {
        background-image: url(/public/upload/assets/6131/Illustration%20Nacht.webp?fp=1764921877955);
    }
    [data-user-color-scheme="dark"] .pano__img--cloud {
        display: none
    }
    [data-user-color-scheme="dark"] .pano__img--star {
        display: block
    }
    [data-user-color-scheme="dark"] .pano__img--moon {
        background-color: #D5F2DD;
        box-shadow: 0 0 102px 53px rgba(213 242 221/ 0.4);
    }
</style>
  <link rel="alternate" type="application/rss+xml" title="RSS" href="https://www.backslash.ch/route/rss-rss-getRss/entitylist/245%2C137%2C120%2C134%2C52%2C491%2C161%2C124%2C140%2C255%2C258%2C288%2C48%2C292%2C244%2C298%2C237%2C170%2C109%2C329%2C383%2C302%2C53%2C108%2C261%2C416%2C14%2C299%2C177%2C378%2C230%2C338%2C374%2C305%2C147%2C99%2C66%2C303%2C59%2C398%2C212%2C114%2C478%2C251%2C34%2C339%2C280%2C38%2C432%2C476%2C256%2C490%2C49%2C364%2C384%2C358%2C25%2C56%2C346%2C223%2C92%2C448%2C207%2C50%2C377%2C82%2C312%2C306%2C372%2C96%2C349%2C180%2C297%2C173%2C69%2C418%2C296%2C87%2C112%2C228%2C234%2C442%2C354%2C488%2C248%2C100%2C326%2C345%2C18%2C276%2C132%2C40%2C468%2C42%2C385%2C187%2C369%2C489%2C287%2C151%2C190%2C451%2C270%2C443%2C176%2C413%2C22%2C20%2C201%2C249%2C168%2C314%2C459%2C467%2C83%2C73%2C128%2C127%2C469%2C438%2C396%2C311%2C165%2C221%2C279%2C197%2C232%2C470%2C192%2C110%2C308%2C80%2C431%2C43%2C215%2C155%2C62%2C166%2C272%2C427%2C421%2C335%2C397%2C275%2C27%2C428%2C196%2C236%2C250%2C117%2C460%2C162%2C167%2C341%2C198%2C26%2C130%2C419%2C274%2C405%2C184%2C78%2C483%2C382%2C307%2C193%2C149%2C353%2C71%2C239%2C289%2C36%2C84%2C111%2C139%2C183%2C54%2C65%2C367%2C74%2C320%2C393%2C403%2C440%2C333%2C202%2C412%2C45%2C266%2C158%2C368%2C282%2C420%2C481%2C185%2C172%2C246%2C217%2C318%2C394%2C39%2C13%2C269%2C310%2C365%2C399%2C361%2C146%2C381%2C93%2C91%2C224%2C169%2C259%2C30%2C160%2C395%2C119%2C347%2C454%2C392%2C331%2C61%2C1%2C257%2C464%2C422%2C229%2C436%2C107%2C452%2C426%2C7%2C414%2C389%2C6%2C70%2C19%2C390%2C35%2C240%2C10%2C323%2C33%2C95%2C316%2C444%2C122%2C404%2C474%2C387%2C290%2C253%2C380%2C344%2C29%2C115%2C243%2C425%2C178%2C482%2C293%2C32%2C348%2C148%2C379%2C350%2C227%2C16%2C363%2C264%2C194%2C486%2C216%2C319%2C174%2C493%2C352%2C88%2C402%2C156%2C417%2C294%2C286%2C356%2C309%2C430%2C182%2C450%2C278%2C375%2C75%2C277%2C12%2C233%2C225%2C5%2C281%2C434%2C72%2C235%2C284%2C101%2C291%2C317%2C51%2C203%2C37%2C424%2C366%2C400%2C105%2C188%2C113%2C150%2C471%2C121%2C11%2C213%2C411%2C446%2C98%2C44%2C189%2C116%2C247%2C477%2C475%2C89%2C204%2C480%2C343%2C219%2C106%2C351%2C123%2C94%2C41%2C328%2C423%2C336%2C9%2C386%2C175%2C77%2C330%2C131%2C407%2C81%2C118%2C409%2C28%2C179%2C31%2C268%2C238%2C332%2C142%2C90%2C473%2C455%2C159%2C300%2C445%2C141%2C406%2C461%2C388%2C410%2C68%2C391%2C63%2C252%2C371%2C214%2C126%2C340%2C46%2C327%2C152%2C324%2C447%2C465%2C321%2C373%2C283%2C453%2C322%2C181%2C145%2C226%2C57%2C2%2C456%2C362%2C271%2C463%2C359%2C199%2C144%2C484%2C457%2C429%2C15%2C209%2C401%2C23%2C60%2C138%2C220%2C449%2C97%2C104%2C254%2C24%2C153%2C408%2C186%2C191%2C206%2C265%2C435%2C342%2C17%2C301%2C267%2C458%2C325%2C171%2C195%2C376%2C47%2C437%2C102%2C58%2C242%2C103%2C21%2C129%2C55%2C360%2C304%2C218%2C208%2C262%2C357%2C466%2C154%2C485%2C337%2C133%2C222%2C76%2C285%2C355%2C439%2C315%2C67%2C200%2C135%2C86%2C472%2C334%2C85%2C231%2C205%2C136%2C370%2C241%2C479%2C492%2C263%2C210%2C157%2C260%2C295%2C441%2C164%2C79%2C163%2C462%2C433%2C211%2C143%2C415%2C487%2C64%2C125%2C313%2C273/entitytype/229/lang/1">
  <style>a.altcha-logo[aria-hidden="true"]{display: none;}</style>
  <link rel="stylesheet" href="/static/js/global/c-consent/3.1.0/c-consent.css" type="text/css">
  <script src="/static/js/global/c-consent/3.1.0/c-consent.umd.js"></script>
 </head>
 <body id="cms-p-8">
  <div id="cc-root-wrapper"></div>
  <h1 class="visuallyhidden">Navigieren in backslash AG</h1>
  <nav class="skiplinks" aria-labelledby="skiplinks__title">
   <h2 class="skiplinks__title visuallyhidden" id="skiplinks__title">Skiplinks</h2>
   <ul class="skiplinks__lst">
    <li><a class="skiplinks__link" accesskey="0" href="/" title="[CTRL + ALT + 0]">Home</a></li>
    <li><a class="skiplinks__link" accesskey="1" href="#mainnav" title="[CTRL + ALT + 1]">Navigation</a></li>
    <li><a class="skiplinks__link" accesskey="2" href="#main" title="[CTRL + ALT + 2]">Inhalt</a></li>
    <li><a class="skiplinks__link" accesskey="3" href="#searchform__input" title="[CTRL + ALT + 3]">Suche</a></li>
    <li><a class="skiplinks__link" accesskey="4" href="/sitemap#main" title="[CTRL + ALT + 4]">Sitemap</a></li>
   </ul>
  </nav>
  <div class="outer-wrapper">
   <header class="header" id="header">
    <div class="header__wrapper wrapper">
     <div class="logo">
      <svg class="logo__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255 197" width="255" height="197">
       <title>backslash – artist of new media</title>
       <g class="bs-logo__claim">
        <path d="M232.43,192.63a2.17,2.17,0,0,1-.49,1.65,2.8,2.8,0,0,1-2.14.64c-1.51,0-2.19-.52-2.19-1.63s.7-1.7,2.14-1.7h2.68Zm1.4,3.38v-6.5c0-2.08-1.26-3.18-3.83-3.18a3.7,3.7,0,0,0-3.38,1.41l.95.88a2.51,2.51,0,0,1,2.41-1.09c1.75,0,2.45.7,2.45,2.1v.91h-2.88c-2.14,0-3.3,1.09-3.3,2.77a2.73,2.73,0,0,0,.72,1.94,4.42,4.42,0,0,0,5.46-.15V196Zm-13.26-13.85H219v1.58h1.57Zm-.1,4.28h-1.4V196h1.4Zm-9.31,4.79c0,1.86-.31,3.65-2.39,3.65s-2.42-1.79-2.42-3.65.33-3.66,2.42-3.66,2.39,1.79,2.39,3.66m1.4,4.78V182.16h-1.4v5.39a3.08,3.08,0,0,0-2.71-1.22,3.36,3.36,0,0,0-2.33.83c-1,1-1.17,2.57-1.17,4.07s.2,3.09,1.17,4.06a3.36,3.36,0,0,0,2.33.83,3.1,3.1,0,0,0,2.73-1.26V196Zm-14.49-5.47H193a4.14,4.14,0,0,1,.29-1.59,2.46,2.46,0,0,1,4.48,0,4.14,4.14,0,0,1,.29,1.59m1.4,1.05V191c0-2.84-1.46-4.62-3.93-4.62s-3.92,1.8-3.92,4.9c0,3.38,1.65,4.89,4.17,4.89a4.37,4.37,0,0,0,3.5-1.47l-.95-.84a3.13,3.13,0,0,1-2.5,1.09c-1.84,0-2.83-1.21-2.83-3.31ZM185.72,196v-6.13a3.55,3.55,0,0,0-1-2.66,3.5,3.5,0,0,0-2.47-.89,3.66,3.66,0,0,0-3.15,1.59,3.14,3.14,0,0,0-2.93-1.59,3.49,3.49,0,0,0-2.71,1.16v-1.05H172V196h1.39v-5.89a2.26,2.26,0,0,1,2.39-2.55,2.23,2.23,0,0,1,2.36,2.55V196h1.4v-6a2.23,2.23,0,0,1,2.39-2.39c1.44,0,2.35.85,2.35,2.55V196Zm-27.49-9.57h-1.52l-2.18,7.68L152,186.44H150.8l-2.51,7.68-2.19-7.68h-1.52l3,9.57h1.3l2.5-7.43,2.5,7.43h1.31Zm-19.41,4.1h-5a3.8,3.8,0,0,1,.29-1.59,2.45,2.45,0,0,1,4.47,0,4.14,4.14,0,0,1,.29,1.59m1.4,1.05V191c0-2.84-1.46-4.62-3.92-4.62s-3.93,1.8-3.93,4.9c0,3.38,1.65,4.89,4.18,4.89a4.4,4.4,0,0,0,3.5-1.47l-1-.84a3.15,3.15,0,0,1-2.51,1.09c-1.83,0-2.82-1.21-2.82-3.31ZM126.47,196v-6.13a3.52,3.52,0,0,0-1-2.66,3.36,3.36,0,0,0-2.45-.89,3.43,3.43,0,0,0-2.68,1.16v-1.05H119V196h1.4v-5.89a2.37,2.37,0,1,1,4.73,0V196Zm-21.71-8.44V186.5h-2v-1.77c0-.88.39-1.4,1.28-1.4h.76v-1.21h-1a2.33,2.33,0,0,0-2.43,2.57v1.81h-1.23v1.07h1.23V196h1.4v-8.44ZM93.6,191.23a4.17,4.17,0,0,1-.76,3,2.45,2.45,0,0,1-1.75.7,2.38,2.38,0,0,1-1.73-.7,6,6,0,0,1,0-5.91,2.38,2.38,0,0,1,1.73-.7,2.45,2.45,0,0,1,1.75.7,4.18,4.18,0,0,1,.76,3m1.4,0a5.16,5.16,0,0,0-1.17-3.82,4,4,0,0,0-5.48,0,6.8,6.8,0,0,0,0,7.63,4,4,0,0,0,5.48,0A5.15,5.15,0,0,0,95,191.23m-21.9,2c0-1.79-1.14-2.43-2.81-2.59l-1.54-.13c-1.21-.1-1.67-.59-1.67-1.4,0-1,.74-1.58,2.14-1.58a4.08,4.08,0,0,1,2.55.76l.91-.92a5.47,5.47,0,0,0-3.44-1c-2,0-3.52,1-3.52,2.79,0,1.58,1,2.42,2.85,2.57l1.58.14c1.11.09,1.59.56,1.59,1.4,0,1.13-1,1.69-2.54,1.69a3.91,3.91,0,0,1-3-1.11l-.93.94a5.27,5.27,0,0,0,3.93,1.37c2.31,0,3.88-1.06,3.88-2.91M60.41,196V194.8h-.74c-.9,0-1.31-.52-1.31-1.4v-5.83h2V186.5h-2v-3H57v3H55.76v1.07H57v5.87A2.34,2.34,0,0,0,59.41,196Zm-9.24-2.8c0-1.79-1.15-2.43-2.82-2.59l-1.54-.13c-1.2-.1-1.67-.59-1.67-1.4,0-1,.74-1.58,2.14-1.58a4,4,0,0,1,2.55.76l.91-.92a5.45,5.45,0,0,0-3.44-1c-2,0-3.52,1-3.52,2.79,0,1.58,1,2.42,2.86,2.57l1.57.14c1.11.09,1.6.56,1.6,1.4,0,1.13-1,1.69-2.55,1.69a3.88,3.88,0,0,1-3-1.11l-.94.94a5.28,5.28,0,0,0,3.93,1.37c2.32,0,3.89-1.06,3.89-2.91M37.83,182.16H36.26v1.58h1.57Zm-.1,4.28h-1.4V196h1.4ZM30.54,196V194.8H29.8c-.9,0-1.3-.52-1.3-1.4v-5.83h2V186.5h-2v-3H27.1v3H25.89v1.07H27.1v5.87A2.35,2.35,0,0,0,29.55,196ZM22,187.22a2.94,2.94,0,0,0-2.29-.89,3.22,3.22,0,0,0-2.69,1.28v-1.17h-1.4V196h1.4v-5.88a2.34,2.34,0,0,1,2.3-2.56,2,2,0,0,1,1.65.7ZM7.85,192.63a2.21,2.21,0,0,1-.49,1.65,2.8,2.8,0,0,1-2.14.64c-1.52,0-2.2-.52-2.2-1.63s.7-1.7,2.14-1.7H7.85ZM9.25,196v-6.5c0-2.08-1.27-3.18-3.83-3.18A3.73,3.73,0,0,0,2,187.74l1,.88a2.52,2.52,0,0,1,2.42-1.09c1.75,0,2.45.7,2.45,2.1v.91H5c-2.14,0-3.3,1.09-3.3,2.77a2.77,2.77,0,0,0,.71,1.94,3.42,3.42,0,0,0,2.71.87,3.38,3.38,0,0,0,2.76-1V196Z" />
       </g>
       <g class="bs-logo__box">
        <rect class="bs-logo__brandcolor" x="85" width="170" height="107" /> <rect class="bs-logo__txt-bg" x="85" y="111" width="170" height="35" />
        <g class="bs-logo__txt">
         <polygon points="231.83 137.32 231.83 121.11 229.37 121.11 229.37 128.03 222.79 128.03 222.79 121.11 220.33 121.11 220.33 137.32 222.79 137.32 222.79 130.24 229.37 130.24 229.37 137.32 231.83 137.32" /> <path d="M215.42,132.7a4.24,4.24,0,0,0-1.32-3.33,5.42,5.42,0,0,0-3-1.21l-1.85-.27a3.62,3.62,0,0,1-1.82-.75,1.94,1.94,0,0,1-.62-1.5c0-1.44,1.05-2.53,3-2.53a4.74,4.74,0,0,1,3.53,1.25l1.57-1.55a6.74,6.74,0,0,0-5-1.84c-3.38,0-5.42,1.93-5.42,4.76a4,4,0,0,0,1.18,3.09,5.44,5.44,0,0,0,3.07,1.3l1.92.27a2.79,2.79,0,0,1,1.77.69,2.15,2.15,0,0,1,.64,1.69c0,1.57-1.23,2.48-3.35,2.48a5.32,5.32,0,0,1-4.14-1.55l-1.64,1.62a7.33,7.33,0,0,0,5.74,2.13c3.39,0,5.83-1.77,5.83-4.75" /> <path d="M195.06,121.11h-2l-6,16.21h2.62l1.12-3.26h6.4l1.12,3.26H201ZM191.6,132l2.53-7.2,2.46,7.2Z" /> <polygon points="183.99 137.32 183.99 135.11 176.17 135.11 176.17 121.11 173.72 121.11 173.72 137.32 183.99 137.32" /> <path d="M168.74,132.7a4.24,4.24,0,0,0-1.32-3.33,5.42,5.42,0,0,0-3-1.21l-1.84-.27a3.62,3.62,0,0,1-1.83-.75,1.93,1.93,0,0,1-.61-1.5c0-1.44,1-2.53,3-2.53a4.74,4.74,0,0,1,3.53,1.25l1.57-1.55a6.74,6.74,0,0,0-5-1.84c-3.38,0-5.42,1.93-5.42,4.76a4,4,0,0,0,1.18,3.09,5.44,5.44,0,0,0,3.08,1.3l1.91.27a2.82,2.82,0,0,1,1.78.69,2.19,2.19,0,0,1,.64,1.69c0,1.57-1.24,2.48-3.36,2.48a5.32,5.32,0,0,1-4.14-1.55l-1.64,1.62a7.34,7.34,0,0,0,5.74,2.13c3.4,0,5.83-1.77,5.83-4.75" /> <polygon points="153.98 137.32 148.17 127.46 153.43 121.11 150.42 121.11 143.79 129.26 143.79 121.11 141.34 121.11 141.34 137.32 143.79 137.32 143.79 132.6 146.53 129.32 151.08 137.32 153.98 137.32" /> <path d="M136.32,135.55l-1.64-1.67a3.68,3.68,0,0,1-2.89,1.37,3.21,3.21,0,0,1-2.39-1c-.8-.86-1-1.8-1-5.06s.16-4.19,1-5.06a3.21,3.21,0,0,1,2.39-1,3.68,3.68,0,0,1,2.89,1.37l1.64-1.66a6.23,6.23,0,0,0-8.79-.19c-1.59,1.6-1.57,3.4-1.57,6.52s0,4.93,1.57,6.52a5.89,5.89,0,0,0,4.26,1.72,6,6,0,0,0,4.53-1.9" /> <path d="M116.87,121.11h-2l-6,16.21h2.62l1.12-3.26h6.4l1.12,3.26h2.62ZM113.41,132l2.53-7.2,2.46,7.2Z" /> <path d="M103.16,129a3.66,3.66,0,0,0,2.18-3.44c0-2.73-1.89-4.43-4.9-4.43h-6.3v16.21h6.56c2.87,0,4.89-1.59,4.89-4.58A3.87,3.87,0,0,0,103.16,129Zm-6.57-5.67h3.65c1.57,0,2.65.82,2.65,2.33s-1.08,2.32-2.65,2.32H96.59Zm3.88,11.8H96.59v-4.94h3.88a2.48,2.48,0,1,1,0,4.94Z" />
        </g>
       </g>
      </svg>
     </div>
     <div class="header__navblock" id="header__navblock">
      <nav class="metanav" aria-labelledby="metanav__title">
       <h2 class="metanav__title visuallyhidden" id="metanav__title">Metanavigation</h2>
       <ul class="metanav__lst reset">
        <li class="metanav__item metanav__item--news"><a href="https://www.backslash.ch/agentur/aktuelles/news.html/48" class="metanav__link"><span class="metanav__marker">News</span></a></li>
        <li class="metanav__item metanav__item--contact"><a href="https://www.backslash.ch/agentur/agentur/kontakt.html/46" class="metanav__link"><span class="metanav__marker">Kontakt</span></a></li>
        <li class="metanav__item metanav__item--jobs"><a href="https://www.backslash.ch/agentur/aktuelles/jobs.html/47" class="metanav__link"><span class="metanav__marker">Jobs</span></a></li>
        <li class="metanav__item metanav__item--support"><a href="https://www.backslash.ch/angebot/dienstleistungen/support.html/29" class="metanav__link"> <i class="fa-regular fa-user-headset metanav__icon"></i> <span class="metanav__marker">Support</span></a></li>
        <li class="metanav__item metanav__item--search">
         <form method="post" role="search" class="searchform" action="https://www.backslash.ch/services/suchresultate.html/14">
          <input type="hidden" id="search-params-834" name="searchParams.entity" value="all"> <label class="searchform__label visuallyhidden" for="searchform__input">Suchbegriff</label> <input class="searchform__input" type="search" id="searchform__input" name="searchParams.query" value="" placeholder="Suchbegriff" required maxlength="255">
          <button class="searchform__submit" type="submit"><i class="fa-regular fa-magnifying-glass"></i><span class="visuallyhidden">Suche starten</span></button>
          <input type="hidden" id="exact-match-834" name="searchParams.exactMatch" value="false">
         </form>
        </li>
        <li class="metanav__item metanav__item--themeswitch">
         <div class="user-toggle">
          <div role="status" class="visuallyhidden js-mode-status"></div>
          <button class="toggle-button js-mode-toggle"><span class="toggle-button__text js-mode-toggle-text visuallyhidden">Enable dark mode</span> <span class="toggle-button__icon" aria-hidden="true"></span></button>
         </div>
        </li>
       </ul>
      </nav>
      <nav id="mainnav" class="mainnav js-mainnav" aria-labelledby="mainnav__title">
       <h2 class="mainnav__title visuallyhidden" id="mainnav__title">Hauptnavigation</h2>
       <ul class="mainnav__lst mainnav__lst--level1 reset">
        <li class="mainnav__item js-mainnav__dropdown--9 folder item-9" data-govis-a11y_dropdown-container=".js-mainnav__dropdown--9" data-govis-a11y_dropdown-button=".js-mainnav__btn--9" data-govis-a11y_dropdown-list=".js-mainnav__megadropdown--9"><a href="https://www.backslash.ch/angebot.html/9" class="js-mainnav__btn--9"><span class="mainnav__marker">Angebot</span></a>
         <div class="mainnav__megadropdown js-mainnav__megadropdown--9">
          <ul class="mainnav__lst mainnav__lst--level2">
           <li class="mainnav__item mainnav__item--subtitle folder item-15"><a href="https://www.backslash.ch/angebot/produkte.html/15">Produkte</a>
            <ul class="mainnav__lst mainnav__lst--level3">
             <li class="mainnav__item page item-17"><a href="https://www.backslash.ch/angebot/produkte/e-government-loesung-govis.html/17">E-Government-Lösung GOViS</a></li>
             <li class="mainnav__item page item-19"><a href="https://www.backslash.ch/angebot/produkte/module.html/19">Module</a></li>
             <li class="mainnav__item page item-58"><a href="https://www.backslash.ch/angebot/produkte/fachloesungen.html/58">Fachlösungen</a></li>
             <li class="mainnav__item page item-72"><a href="https://www.backslash.ch/angebot/produkte/gemeinde-app.html/72">Gemeinde-App</a></li>
             <li class="mainnav__item page item-21"><a href="https://www.backslash.ch/angebot/produkte/extranet.html/21">Extranet</a></li>
             <li class="mainnav__item page item-20"><a href="https://www.backslash.ch/angebot/produkte/intranet.html/20">Intranet</a></li>
             <li class="mainnav__item page item-18"><a href="https://www.backslash.ch/angebot/produkte/cms-intellio.html/18">CMS intellio</a></li>
            </ul></li>
           <li class="mainnav__item mainnav__item--subtitle folder item-16"><a href="https://www.backslash.ch/angebot/dienstleistungen.html/16">Dienstleistungen</a>
            <ul class="mainnav__lst mainnav__lst--level3">
             <li class="mainnav__item page item-28"><a href="https://www.backslash.ch/angebot/dienstleistungen/barrierefreiheit.html/28">Barrierefreiheit</a></li>
             <li class="mainnav__item page item-22"><a href="https://www.backslash.ch/angebot/dienstleistungen/beratung.html/22">Beratung</a></li>
             <li class="mainnav__item page item-62"><a href="https://www.backslash.ch/angebot/dienstleistungen/icons-illustrationen.html/62">Icons / Illustrationen</a></li>
             <li class="mainnav__item page item-61"><a href="https://www.backslash.ch/angebot/dienstleistungen/logo-design.html/61">Logo-Design</a></li>
             <li class="mainnav__item page item-23"><a href="https://www.backslash.ch/angebot/dienstleistungen/online-marketing.html/23">Online-Marketing</a></li>
             <li class="mainnav__item page item-24"><a href="https://www.backslash.ch/angebot/dienstleistungen/responsive-webdesign.html/24">Responsive Webdesign</a></li>
             <li class="mainnav__item page item-30"><a href="https://www.backslash.ch/angebot/dienstleistungen/schulungen.html/30">Schulungen</a></li>
             <li class="mainnav__item page item-26"><a href="https://www.backslash.ch/angebot/dienstleistungen/softwareentwicklung.html/26">Softwareentwicklung</a></li>
             <li class="mainnav__item page item-29"><a href="https://www.backslash.ch/angebot/dienstleistungen/support.html/29">Support</a></li>
            </ul></li>
           <li class="mainnav__item mainnav__item--subtitle mainnav__item--cta cta-block"><span class="mainnav__item__nolink">Get in Touch</span>
            <div class="cta-block__wrapper">
             <p class="cta-block__txt">Wir freuen uns, Sie kennenzulernen! <a href="tel:+41527235840">052&nbsp;723&nbsp;58&nbsp;40</a></p>
             <ul class="cta-block__btn-lst reset">
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/praesentationstermin-buchen.html/80">Präsentationstermin buchen</a></li>
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/offerte-anfordern.html/81">Offerte anfordern</a></li>
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/kontakt.html/46">Kontaktanfrage</a></li>
             </ul>
             <div class="cta-block__support">
              <i class="fal fa-user-headset fa-fw"></i>
              <p class="cta-block__txt cta-block__txt--xs">Brauchen Sie technische Unterstützung?
               <br>
               Für von uns geschulte Kunden steht unser Support kostenlos zur Verfügung.
               <br>
               Melden Sie sich unter: <a class="no-icon" href="tel:+41527235888">052&nbsp;723&nbsp;58&nbsp;88</a></p>
             </div>
            </div></li>
          </ul>
         </div></li>
        <li class="mainnav__item js-mainnav__dropdown--10 folder item-10" data-govis-a11y_dropdown-container=".js-mainnav__dropdown--10" data-govis-a11y_dropdown-button=".js-mainnav__btn--10" data-govis-a11y_dropdown-list=".js-mainnav__megadropdown--10"><a href="https://www.backslash.ch/referenzen.html/10" class="js-mainnav__btn--10"><span class="mainnav__marker">Referenzen</span></a>
         <div class="mainnav__megadropdown js-mainnav__megadropdown--10">
          <ul class="mainnav__lst mainnav__lst--level2">
           <li class="mainnav__item mainnav__item--subtitle folder item-32"><a href="https://www.backslash.ch/referenzen/branchen.html/32">Branchen</a>
            <ul class="mainnav__lst mainnav__lst--level3">
             <li class="mainnav__item page item-34"><a href="https://www.backslash.ch/referenzen/branchen/kantone.html/34">Kantone</a></li>
             <li class="mainnav__item page item-35"><a href="https://www.backslash.ch/referenzen/branchen/staedte-und-gemeinden.html/35">Städte und Gemeinden</a></li>
             <li class="mainnav__item page item-36"><a href="https://www.backslash.ch/referenzen/branchen/schulen.html/36">Schulen</a></li>
             <li class="mainnav__item page item-65"><a href="https://www.backslash.ch/referenzen/branchen/gemeindenahe-institutionen.html/65">Gemeindenahe Institutionen</a></li>
             <li class="mainnav__item page item-66"><a href="https://www.backslash.ch/referenzen/branchen/gesundheit.html/66">Gesundheit</a></li>
             <li class="mainnav__item page item-67"><a href="https://www.backslash.ch/referenzen/branchen/verbaende-vereine.html/67">Verbände &amp; Vereine</a></li>
             <li class="mainnav__item page item-68"><a href="https://www.backslash.ch/referenzen/branchen/kmu-industrie.html/68">KMU &amp; Industrie</a></li>
             <li class="mainnav__item page item-69"><a href="https://www.backslash.ch/referenzen/branchen/diverse.html/69">Diverse</a></li>
            </ul></li>
           <li class="mainnav__item mainnav__item--subtitle page item-33"><span class="mainnav__item__nolink">Kundenaussagen</span>
            <div class="testimonials testimonials--mainnav js-testimonials--mainnav"></div></li>
           <li class="mainnav__item mainnav__item--subtitle mainnav__item--cta cta-block"><span class="mainnav__item__nolink">Get in Touch</span>
            <div class="cta-block__wrapper">
             <p class="cta-block__txt">Wir freuen uns, Sie kennenzulernen! <a href="tel:+41527235840">052&nbsp;723&nbsp;58&nbsp;40</a></p>
             <ul class="cta-block__btn-lst reset">
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/praesentationstermin-buchen.html/80">Präsentationstermin buchen</a></li>
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/offerte-anfordern.html/81">Offerte anfordern</a></li>
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/kontakt.html/46">Kontaktanfrage</a></li>
             </ul>
             <div class="cta-block__support">
              <i class="fal fa-user-headset fa-fw"></i>
              <p class="cta-block__txt cta-block__txt--xs">Brauchen Sie technische Unterstützung?
               <br>
               Für von uns geschulte Kunden steht unser Support kostenlos zur Verfügung.
               <br>
               Melden Sie sich unter: <a class="no-icon" href="tel:+41527235888">052&nbsp;723&nbsp;58&nbsp;88</a></p>
             </div>
            </div></li>
          </ul>
         </div></li>
        <li class="mainnav__item js-mainnav__dropdown--11 folder item-11" data-govis-a11y_dropdown-container=".js-mainnav__dropdown--11" data-govis-a11y_dropdown-button=".js-mainnav__btn--11" data-govis-a11y_dropdown-list=".js-mainnav__megadropdown--11"><a href="https://www.backslash.ch/agentur.html/11" class="js-mainnav__btn--11"><span class="mainnav__marker">Agentur</span></a>
         <div class="mainnav__megadropdown js-mainnav__megadropdown--11">
          <ul class="mainnav__lst mainnav__lst--level2">
           <li class="mainnav__item mainnav__item--subtitle folder item-37"><a href="https://www.backslash.ch/agentur/agentur.html/37">Agentur</a>
            <ul class="mainnav__lst mainnav__lst--level3">
             <li class="mainnav__item page item-38"><a href="https://www.backslash.ch/agentur/agentur/portraet-vision.html/38">Porträt / Vision</a></li>
             <li class="mainnav__item page item-39"><a href="https://www.backslash.ch/agentur/agentur/team.html/39">Team</a></li>
             <li class="mainnav__item page item-41"><a href="https://www.backslash.ch/agentur/agentur/geschichte.html/41">Geschichte</a></li>
             <li class="mainnav__item page item-43"><a href="https://www.backslash.ch/agentur/agentur/partner.html/43">Partner</a></li>
             <li class="mainnav__item page item-44"><a href="https://www.backslash.ch/agentur/agentur/mitgliedschaften.html/44">Mitgliedschaften</a></li>
             <li class="mainnav__item page item-45"><a href="https://www.backslash.ch/agentur/agentur/standort.html/45">Standort</a></li>
             <li class="mainnav__item page item-46"><a href="https://www.backslash.ch/agentur/agentur/kontakt.html/46">Kontakt</a></li>
            </ul></li>
           <li class="mainnav__item mainnav__item--subtitle folder item-78"><a href="https://www.backslash.ch/agentur/aktuelles.html/78">Aktuelles</a>
            <ul class="mainnav__lst mainnav__lst--level3">
             <li class="mainnav__item page item-48"><a href="https://www.backslash.ch/agentur/aktuelles/news.html/48">News</a></li>
             <li class="mainnav__item page item-47"><a href="https://www.backslash.ch/agentur/aktuelles/jobs.html/47">Jobs</a></li>
             <li class="mainnav__item page item-106"><a href="https://www.backslash.ch/agentur/aktuelles/lehrstellen.html/106">Lehrstellen</a></li>
            </ul></li>
           <li class="mainnav__item mainnav__item--subtitle mainnav__item--cta cta-block"><span class="mainnav__item__nolink">Get in Touch</span>
            <div class="cta-block__wrapper">
             <p class="cta-block__txt">Wir freuen uns, Sie kennenzulernen! <a href="tel:+41527235840">052&nbsp;723&nbsp;58&nbsp;40</a></p>
             <ul class="cta-block__btn-lst reset">
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/praesentationstermin-buchen.html/80">Präsentationstermin buchen</a></li>
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/offerte-anfordern.html/81">Offerte anfordern</a></li>
              <li><a class="btn btn--cta" href="https://www.backslash.ch/agentur/agentur/kontakt.html/46">Kontaktanfrage</a></li>
             </ul>
             <div class="cta-block__support">
              <i class="fal fa-user-headset fa-fw"></i>
              <p class="cta-block__txt cta-block__txt--xs">Brauchen Sie technische Unterstützung?
               <br>
               Für von uns geschulte Kunden steht unser Support kostenlos zur Verfügung.
               <br>
               Melden Sie sich unter: <a class="no-icon" href="tel:+41527235888">052&nbsp;723&nbsp;58&nbsp;88</a></p>
             </div>
            </div></li>
          </ul>
         </div></li>
       </ul>
       <script>
$(document).ready(function(){
    $.ajax({ 
        url: '/route/cms-index-renderAjaxBlock/id/8/processOutputContent/true/blockId/518',
        type: 'post',
        success: function(data, status) {
            if(!$.isPlainObject(data)){
                data = JSON.parse(data);
            }
            if(data.success){
                $('.js-testimonials--mainnav').html(data.content);
            }
        }
    });
});
</script>
      </nav>
     </div>
     <div class="header__mobilenav" id="header__mobilenav">
      <nav class="mobilenav js-mobilenav" id="mobilenav" aria-labelledby="mobilenav__title">
       <h2 class="visuallyhidden" id="mobilenav__title">Hauptnavigation</h2>
       <button class="hamburger hamburger--elastic js-hamburger" type="button" aria-controls="header__navblock"><span class="hamburger-box"> <span class="hamburger-inner"></span> </span> <span class="hamburger-label">Menu</span></button>
       <div class="mobilenav__container">
        <div class="mobilenav__inner">
         <div class="mobilenav__wrapper wrapper">
          <div class="mobilenav__search">
           <form method="post" role="search" class="searchform searchform--mobilenav" action="https://www.backslash.ch/services/suchresultate.html/14">
            <input type="hidden" id="search-params-859" name="searchParams.entity" value="all"> <label class="searchform__label visuallyhidden" for="searchform__input--mobilenav">Suchbegriff</label> <input class="searchform__input" type="search" id="searchform__input--mobilenav" name="searchParams.query" value="" placeholder="Suchbegriff" required maxlength="255">
            <button class="searchform__submit" type="submit"><i class="fa-regular fa-magnifying-glass"></i><span class="visuallyhidden">Suche starten</span></button>
            <input type="hidden" id="exact-match-859" name="searchParams.exactMatch" value="false">
           </form>
          </div>
          <script>
        ((state) => {
            const conf = {
                data: {
                    pageId: '8'
                },
                urls: {
                    load: '/route/cms-index-renderAjaxBlock/blockId/860/ignore_wrapped_content/true'
                },
                animateDuration: 200,
                spinnerDelay: 250,
                classes: {
                    active: 'active',
                    block: 'mobilenav-block-860',
                    container: 'ajax-menu--860',
                    controller: 'js-govis-menu-node-controller',
                    parentNodeItem: 'govis-menu-parent-node-item',
                    nodeItem: 'govis-menu-node-item',
                    jsIndicator: 'js-indicator',
                    header: 'js-mobilenav-current-pagetitle',
                    loading: 'loading'
                },
                translations: {
                    loading: '<div class="loading" aria-hidden="true"><svg class="icon icon-spinner js-spinner"><use xlink:href="/img/menu/symbol-defs.svg#icon-spinner12"></use></svg></div>',
                    loading_error: '<div class="error">Es ist ein Fehler aufgetreten.</div>'
                }
            };
            if (state !== 'loading') {
                window.govis.module.menu.entireAjax.init(conf);
            } else {
                window.addEventListener('DOMContentLoaded', () => window.govis.module.menu.entireAjax.init(conf));
            }
        })(document.readyState);
    </script>
          <div class="mobilenav-block mobilenav-block-860" id="responsivenav__toc">
           <div class="mobilenav-box ajax-menu ajax-menu--860 active">
            <ul class="govis-menu-node govis-menu-node--level-1" role="list">
             <li class="govis-menu-node-item item-9 folder" id="item-9">
              <button type="button" aria-expanded="false" tabindex="-1" class="visuallyhidden js-govis-menu-node-controller">Angebot</button>
              <a href="javascript:;" class="js-govis-menu-node-controller" tabindex="-1" aria-hidden="true">Angebot</a>
              <button type="button" aria-hidden="true" class="js-govis-menu-node-controller govis-menu-node-controller collapsed">
               <svg aria-hidden="true" class="icon icon-angle-right js-indicator">
                <use xlink:href="/img/menu/symbol-defs.svg#icon-angle-right"></use>
               </svg>
               <span class="visuallyhidden">Navigationsebene «Angebot» öffnen</span>
              </button>
             </li>
             <li class="govis-menu-node-item item-10 folder" id="item-10">
              <button type="button" aria-expanded="false" tabindex="-1" class="visuallyhidden js-govis-menu-node-controller">Referenzen</button>
              <a href="javascript:;" class="js-govis-menu-node-controller" tabindex="-1" aria-hidden="true">Referenzen</a>
              <button type="button" aria-hidden="true" class="js-govis-menu-node-controller govis-menu-node-controller collapsed">
               <svg aria-hidden="true" class="icon icon-angle-right js-indicator">
                <use xlink:href="/img/menu/symbol-defs.svg#icon-angle-right"></use>
               </svg>
               <span class="visuallyhidden">Navigationsebene «Referenzen» öffnen</span>
              </button>
             </li>
             <li class="govis-menu-node-item item-11 folder" id="item-11">
              <button type="button" aria-expanded="false" tabindex="-1" class="visuallyhidden js-govis-menu-node-controller">Agentur</button>
              <a href="javascript:;" class="js-govis-menu-node-controller" tabindex="-1" aria-hidden="true">Agentur</a>
              <button type="button" aria-hidden="true" class="js-govis-menu-node-controller govis-menu-node-controller collapsed">
               <svg aria-hidden="true" class="icon icon-angle-right js-indicator">
                <use xlink:href="/img/menu/symbol-defs.svg#icon-angle-right"></use>
               </svg>
               <span class="visuallyhidden">Navigationsebene «Agentur» öffnen</span>
              </button>
             </li>
            </ul>
           </div>
           <div class="mobilenav-box ajax-menu ajax-menu--860"></div>
          </div>
          <ul class="mobilenav__staticlinklist">
           <li class="mobilenav__staticlinklist__item"><a href="https://www.backslash.ch/agentur/aktuelles/news.html/48">News</a></li>
           <li class="mobilenav__staticlinklist__item"><a href="https://www.backslash.ch/agentur/aktuelles/jobs.html/47">Jobs</a></li>
           <li class="mobilenav__staticlinklist__item mobilenav__staticlinklist__item--contact"><a href="https://www.backslash.ch/agentur/agentur/kontakt.html/46">Get in Touch</a></li>
          </ul>
         </div>
         <div class="mobilenav__container__gradient-top"></div>
         <div class="mobilenav__container__gradient-bottom"></div>
        </div>
       </div>
      </nav>
     </div>
    </div>
   </header>
   <main class="main" id="main" aria-labelledby="main__title">
    <div class="main__wrapper wrapper">
     <div class="main__header">
      <h1 class="main__title content-maintitle" id="main__title">Hier sind Sie richtig!</h1>
      <p class="main__lead">Das digitale Zuhause für Schweizer Kantone, Städte, Gemeinden, Schulen und gemeindenahe Institutionen.</p>
     </div>
     <div class="main__content">
      <div class="pano js-pano">
       <div class="pano__background"></div>
       <div class="pano__img-container">
        <div class="pano__img pano__img--city">
         <div class="pano__img pano__img--moon"></div>
         <div class="pano__img pano__img--cloud"></div>
         <div class="pano__img pano__img--cloud"></div>
         <canvas id="boids"></canvas>
        </div>
       </div>
      </div>
      <script>
    const container = document.querySelector('.pano__img--city');
    const starsCount = 30;

    function getRandomArbitrary(min, max) {
        return Math.random() * (max - min) + min;
    }

    for (i = 0; i < starsCount; i++) {
        const star = document.createElement('span');
        star.classList.add('pano__img--star');

        star.style.top = getRandomArbitrary(-25, 15) + '%';
        star.style.left = getRandomArbitrary(-5, 100) + '%';

        container.prepend(star);
    }

$(function(){

  // Canvas size
  let width = 0;
  let height = 0;

  // Boid flock parameters
  let NUM_BOIDS = 6;
  let BOID_SIZE = 3;
  let TURN_FACTOR = 0.2;
  let TURN_PADDING = -20;
  let VISUAL_RANGE = 55;
  let PROTECTED_RANGE = 10;
  let CENTERING_FACTOR = 0.0002;  // Reduziert - weniger Zusammenhalten
  let AVOID_FACTOR = 0.1;
  let MATCHING_FACTOR = 0.001;  // Stark reduziert - mehr individuelle Bewegung
  let MAX_SPEED = 1.2;
  let MIN_SPEED = 0.8;


  let mouseX = 0;
  let mouseY = 0;
  const TARGET_RANGE = 50;

  // let delta = 1/60;

  const ctx = document.getElementById("boids").getContext("2d");
  const canvas = document.getElementById("boids");

  class Boid {

    constructor(x, y, vx, vy) {
      this.x = x;
      this.y = y;
      this.vx = vx;
      this.vy = vy;
      this.vdelta = 0;
      this.isAnimating = false;
    }

    draw(ctx) {

      const angle = Math.atan2(this.vy, this.vx);

      // get dot product vector to find the current angle the bird is facing
      // relative to the y up vector
      let velVec = normalizeVector([this.vx, this.vy]);
      let vdot = dotProduct([0,1],[velVec[0],velVec[1]]);
      vdot = Math.abs(vdot); // make it alawys positive as we only need down and up

      // if facing up or down animate y scaling of bird so it looks like flapping wings
      let scaleY = 1;
      if(vdot >= 0.55) {
        if(this.isAnimating){
          if(this.vdelta < 20) {
            if(this.vdelta < 10) {
                // fake animate closing wings
                scaleY = lerp(1,0, this.vdelta / 10);
            } else {
                // fake animate wings going up
                scaleY = lerp(0,1, (this.vdelta - 10) / 10);
            }
            this.vdelta++;
          } else {
            this.isAnimating = false;
            this.vdelta = 0;
          }

        } else {
          this.isAnimating = true;
        }

      } 

      // let vdot2 = Math.cos(angle / vdot);
      // console.log(vdot2);
      // const direction = Math.cos(angle) * 2;


      ctx.save();

        ctx.translate(this.x, this.y);
        ctx.rotate(angle);
        if(vdot < 0.55) {
          // Weniger flach - minimum bei 0.4 statt 0
          const scaleFactor = 0.1 + (vdot * 0.6);
          ctx.scale( 1, scaleFactor);
        } else {
          // console.log(scaleY);
          ctx.scale( 1, scaleY);
        }
        ctx.translate(-this.x, -this.y);

        ctx.beginPath();
        ctx.moveTo(this.x + BOID_SIZE * 2, this.y);
        ctx.lineTo(this.x - BOID_SIZE * 1, this.y + BOID_SIZE/3);
        ctx.lineTo(this.x - BOID_SIZE * 1, this.y - BOID_SIZE/3);

        ctx.lineTo(this.x + BOID_SIZE * 2, this.y);

        ctx.lineTo(this.x + BOID_SIZE/3 , this.y - BOID_SIZE * 3);
        ctx.lineTo(this.x + BOID_SIZE/2, this.y);
        ctx.lineTo(this.x + BOID_SIZE/3, this.y + BOID_SIZE * 3);

        ctx.fillStyle = "#223";
        ctx.fill();

      ctx.restore();
      
      ctx.setTransform(1, 0, 0, 1, 0, 0);
    }
  }



  var flock = [];

  const spawn = () => {
    for (var i = 0; i < NUM_BOIDS; i++) {
      var posX = Math.floor(Math.random() * width);
      var posY = Math.floor(Math.random() * height/2);
      // console.log(posX,posY);
      flock.push(new Boid(posX, posY, getRandomArbitrary(-1,1), getRandomArbitrary(-1,1)));
    }
  };
      

  function flockUpdate() {

      
    // console.log("update");
    for (const boid of flock) {
      let xAverage = 0;
      let yAverage = 0;
      let vxAverage = 0;
      let vyAverage = 0;
      let neighboringBoids = 0;
      let closeDx = 0;
      let closeDy = 0;

      // Calculate behavior determining metrics
      for (const otherboid of flock) {
        if (boid === otherboid) continue;
        const dx = boid.x - otherboid.x;
        const dy = boid.y - otherboid.y;
        if (Math.abs(dx) < VISUAL_RANGE && Math.abs(dy) < VISUAL_RANGE) {
          const squaredDistance = dx ** 2 + dy ** 2;
          if (squaredDistance < PROTECTED_RANGE ** 2) {
            closeDx += boid.x - otherboid.x;
            closeDy += boid.y - otherboid.y;
          } else if (squaredDistance < VISUAL_RANGE ** 2) {
            xAverage += otherboid.x;
            yAverage += otherboid.y;
            vxAverage += otherboid.vx;
            vyAverage += otherboid.vy;
            neighboringBoids += 1;
          }
        }
      }

      if (neighboringBoids > 0) {
        vxAverage = vxAverage / neighboringBoids;
        vyAverage = vyAverage / neighboringBoids;
        xAverage = xAverage / neighboringBoids;
        yAverage = yAverage / neighboringBoids;

        // Alignment
        boid.vx += (vxAverage - boid.vx) * MATCHING_FACTOR;
        boid.vy += (vyAverage - boid.vy) * MATCHING_FACTOR;

        // Cohesion
        boid.vx += (xAverage - boid.x) * CENTERING_FACTOR;
        boid.vy += (yAverage - boid.y) * CENTERING_FACTOR;
      }

      // Separation
      boid.vx += closeDx * AVOID_FACTOR;
      boid.vy += closeDy * AVOID_FACTOR;

      // Avoid screen edges
      if (boid.y - TURN_PADDING < 50) {
        boid.vy += TURN_FACTOR;
      }
      if (boid.x + TURN_PADDING > width) {
        // boid.vx -= TURN_FACTOR;
        boid.x -= width;
      }
      if (boid.x - TURN_PADDING < 0) {
        // boid.vx += TURN_FACTOR;
        boid.x += width;
      }
      if (boid.y + TURN_PADDING > height/3) {
        boid.vy -= TURN_FACTOR;
      }
      /*
      // close to the cursor?
      var targetDistance = vectorMagnitude([boid.x - mouseX, boid.y - mouseY]);
      if(targetDistance < TARGET_RANGE) {
        // var facingAngle = Math.atan2(boid.y - mouseY, boid.x - mouseX);

        // var targetVec = [boid.x - mouseX, boid.y - mouseY];
        var force = Math.abs(targetDistance - TARGET_RANGE) / TARGET_RANGE; 
        var targetVec = [boid.x - mouseX, boid.y - mouseY];
        targetVec = multiplyVectorScalar(targetVec, force * 0.1);
        // console.log(targetVec);
        var forceVec = addVectors([boid.vx, boid.vy], targetVec);
        // var forceVec = multiplyVectorScalar([boid.vx, boid.vy], [boid.x - mouseX, boid.y - mouseY]);
        boid.vx = forceVec[0];
        boid.vy = forceVec[1];
      }
        */

      // WIND - sanft wechselnd
      const time = Date.now() * 0.0005;
      const windX = 0.01 + Math.sin(time) * 0.015;
      const windY = Math.sin(time * 0.7) * 0.005;
      var boidForceVec = addVectors([boid.vx, boid.vy], [windX, windY]);
      boid.vx = boidForceVec[0];
      boid.vy = boidForceVec[1];

      // Bound speed
      // const speed = Math.sqrt(boid.vx ** 2 + boid.vy ** 2);
      const speed = Math.hypot(boid.vx,boid.vy);
      if (speed > MAX_SPEED) {
        boid.vx = (boid.vx / speed) * MAX_SPEED;
        boid.vy = (boid.vy / speed) * MAX_SPEED;
      } else if (speed < MIN_SPEED) {
        boid.vx = (boid.vx / speed) * MIN_SPEED;
        boid.vy = (boid.vy / speed) * MIN_SPEED;
      }


     // console.log(boid.vx, boid.vy);
      // Update positions
      boid.x += boid.vx;
      boid.y += boid.vy;
    }

    // Draw boids in new positions
    
    ctx.clearRect(0, 0, width, height);
    for (const boid of flock) {
      boid.draw(ctx);
    }

    window.requestAnimationFrame(flockUpdate);
  }


  // Helpers
  // ==============================
  
  // faster esm5 squareroot function
  Math.hypot = Math.hypot || function(x, y){ return Math.sqrt(x*x + y*y) }

  // interpolate function for animation
  const lerp = (x, y, a) => x * (1 - a) + y * a;
  const clamp = (a, min = 0, max = 1) => Math.min(max, Math.max(min, a));
  const invlerp = (x, y, a) => clamp((a - x) / (y - x));
  const range = (x1, y1, x2, y2, a) => lerp(x2, y2, invlerp(x1, y1, a));


  function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
  }

  // Magnitude (length) of a vector
  function vectorMagnitude(vec) {
    return Math.sqrt(vec.reduce((sum, value) => sum + value ** 2, 0));
  }

  function addVectors(vec1, vec2) {
    if (vec1.length !== vec2.length) {
      throw new Error("Vector dimensions must match");
    }
    return vec1.map((value, index) => value + vec2[index]);
  }

  function multiplyVectors(vec1, vec2) {
    if (vec1.length !== vec2.length) {
      throw new Error("Vector dimensions must match");
    }
    return vec1.map((value, index) => value * vec2[index]);
  }

  // Scalar multiplication of a vector
  function multiplyVectorScalar(vec, scalar) {
    return vec.map(value => value * scalar);
  }

  // Normalize a vector (convert to unit vector)
  function normalizeVector(vec) {
    const magnitude = vectorMagnitude(vec);
    if (magnitude === 0) {
      throw new Error("Cannot normalize a zero vector");
    }
    return multiplyVectorScalar(vec, 1 / magnitude);
  }

  // Dot product of two vectors
  function dotProduct(vec1, vec2) {
    if (vec1.length !== vec2.length) {
      throw new Error("Vector dimensions must match");
    }
    return vec1.reduce((sum, value, index) => sum + value * vec2[index], 0);
  }

  // window.onload = () => {
    // Make sure the canvas always fills the whole window

  width = $(".pano__img--city").width();
  height = $(".pano__img--city").height();
  console.log(width, height);
  ctx.canvas.width = width;
  ctx.canvas.height = height;

  const resizeCanvas = () => {
    width = $(".pano__img--city").width();
    height = $(".pano__img--city").height();
    ctx.canvas.width = width;
    ctx.canvas.height = height;
    BOID_SIZE = 3 / (1/(width/2500));
    //MIN_SPEED *= BOID_SIZE
    //MAX_SPEED *= BOID_SIZE
  };

  resizeCanvas();
  window.addEventListener("resize", resizeCanvas);
  // canvas.addEventListener("mousemove", handleMouseMove);

  spawn();
  window.requestAnimationFrame(flockUpdate);
  // };

  // function handleMouseMove(event) {

  //   // const rect = canvas.getBoundingClientRect();
  //   // mouseX = event.clientX - rect.left;
  //   // mouseY = event.clientY - rect.top;
  //   // console.log(mouseX)
  //   // ctx.clearRect(0, 0, canvas.width, canvas.height);
  //   // ctx.fillText(`Mouse X: ${mouseX}`, 10, 20);
  //   // ctx.fillText(`Mouse Y: ${mouseY}`, 10, 40);
  // }


});
</script>
      <section class="section section--home section--news lay__fw" aria-labelledby="section__title-news">
       <div class="wrapper">
        <h2 class="section__title" id="section__title-news">Was gibt's
         <br>
         Neues?</h2>
       </div>
       <div class="mod-wrapper mod-news mod-news--listview">
        <ul class="news-nav mod-nav reset ">
         <li class="news-rss-link"><a href="https://www.backslash.ch/route/rss-rss-getRss/entitylist/245%2C137%2C120%2C134%2C52%2C491%2C161%2C124%2C140%2C255%2C258%2C288%2C48%2C292%2C244%2C298%2C237%2C170%2C109%2C329%2C383%2C302%2C53%2C108%2C261%2C416%2C14%2C299%2C177%2C378%2C230%2C338%2C374%2C305%2C147%2C99%2C66%2C303%2C59%2C398%2C212%2C114%2C478%2C251%2C34%2C339%2C280%2C38%2C432%2C476%2C256%2C490%2C49%2C364%2C384%2C358%2C25%2C56%2C346%2C223%2C92%2C448%2C207%2C50%2C377%2C82%2C312%2C306%2C372%2C96%2C349%2C180%2C297%2C173%2C69%2C418%2C296%2C87%2C112%2C228%2C234%2C442%2C354%2C488%2C248%2C100%2C326%2C345%2C18%2C276%2C132%2C40%2C468%2C42%2C385%2C187%2C369%2C489%2C287%2C151%2C190%2C451%2C270%2C443%2C176%2C413%2C22%2C20%2C201%2C249%2C168%2C314%2C459%2C467%2C83%2C73%2C128%2C127%2C469%2C438%2C396%2C311%2C165%2C221%2C279%2C197%2C232%2C470%2C192%2C110%2C308%2C80%2C431%2C43%2C215%2C155%2C62%2C166%2C272%2C427%2C421%2C335%2C397%2C275%2C27%2C428%2C196%2C236%2C250%2C117%2C460%2C162%2C167%2C341%2C198%2C26%2C130%2C419%2C274%2C405%2C184%2C78%2C483%2C382%2C307%2C193%2C149%2C353%2C71%2C239%2C289%2C36%2C84%2C111%2C139%2C183%2C54%2C65%2C367%2C74%2C320%2C393%2C403%2C440%2C333%2C202%2C412%2C45%2C266%2C158%2C368%2C282%2C420%2C481%2C185%2C172%2C246%2C217%2C318%2C394%2C39%2C13%2C269%2C310%2C365%2C399%2C361%2C146%2C381%2C93%2C91%2C224%2C169%2C259%2C30%2C160%2C395%2C119%2C347%2C454%2C392%2C331%2C61%2C1%2C257%2C464%2C422%2C229%2C436%2C107%2C452%2C426%2C7%2C414%2C389%2C6%2C70%2C19%2C390%2C35%2C240%2C10%2C323%2C33%2C95%2C316%2C444%2C122%2C404%2C474%2C387%2C290%2C253%2C380%2C344%2C29%2C115%2C243%2C425%2C178%2C482%2C293%2C32%2C348%2C148%2C379%2C350%2C227%2C16%2C363%2C264%2C194%2C486%2C216%2C319%2C174%2C493%2C352%2C88%2C402%2C156%2C417%2C294%2C286%2C356%2C309%2C430%2C182%2C450%2C278%2C375%2C75%2C277%2C12%2C233%2C225%2C5%2C281%2C434%2C72%2C235%2C284%2C101%2C291%2C317%2C51%2C203%2C37%2C424%2C366%2C400%2C105%2C188%2C113%2C150%2C471%2C121%2C11%2C213%2C411%2C446%2C98%2C44%2C189%2C116%2C247%2C477%2C475%2C89%2C204%2C480%2C343%2C219%2C106%2C351%2C123%2C94%2C41%2C328%2C423%2C336%2C9%2C386%2C175%2C77%2C330%2C131%2C407%2C81%2C118%2C409%2C28%2C179%2C31%2C268%2C238%2C332%2C142%2C90%2C473%2C455%2C159%2C300%2C445%2C141%2C406%2C461%2C388%2C410%2C68%2C391%2C63%2C252%2C371%2C214%2C126%2C340%2C46%2C327%2C152%2C324%2C447%2C465%2C321%2C373%2C283%2C453%2C322%2C181%2C145%2C226%2C57%2C2%2C456%2C362%2C271%2C463%2C359%2C199%2C144%2C484%2C457%2C429%2C15%2C209%2C401%2C23%2C60%2C138%2C220%2C449%2C97%2C104%2C254%2C24%2C153%2C408%2C186%2C191%2C206%2C265%2C435%2C342%2C17%2C301%2C267%2C458%2C325%2C171%2C195%2C376%2C47%2C437%2C102%2C58%2C242%2C103%2C21%2C129%2C55%2C360%2C304%2C218%2C208%2C262%2C357%2C466%2C154%2C485%2C337%2C133%2C222%2C76%2C285%2C355%2C439%2C315%2C67%2C200%2C135%2C86%2C472%2C334%2C85%2C231%2C205%2C136%2C370%2C241%2C479%2C492%2C263%2C210%2C157%2C260%2C295%2C441%2C164%2C79%2C163%2C462%2C433%2C211%2C143%2C415%2C487%2C64%2C125%2C313%2C273/entitytype/229/lang/1" target="_blank" rel="noopener"><i class="fa fa-rss fa-fw" aria-hidden="true"></i> RSS</a></li>
        </ul>
        <ul class="mod-lst mod-news-lst news-lst reset news-lst--order-by-top">
         <li class="mod-entry link-expanded ken-burns-animation mod-entry--istop">
          <h2 class="mod-entry-title news-title"><span class="mod-entry-highlight">Highlight</span><span class="visuallyhidden">: </span> <a href="https://www.backslash.ch/agentur/aktuelles/news.html/49/news/1039">Erfolgreiche ISO 27001 Rezertifizierung</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">News</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-03-26 08:35">26. März 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1039" alt="" loading="lazy" width="2820" height="1410" srcset="https://www.backslash.ch/public/upload/assets/6301/rendition/img_xlarge.jpg?fp=1774510759199 2820w, https://www.backslash.ch/public/upload/assets/6301/rendition/img_hd.jpg?fp=1774510754111 1920w, https://www.backslash.ch/public/upload/assets/6301/rendition/img_large.jpg?fp=1774510755471 1410w, https://www.backslash.ch/public/upload/assets/6301/rendition/img_medium.jpg?fp=1774510756411 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6301/rendition/img_xlarge.jpg?fp=1774510759199">
          </figure>
          <ul class="taglist">
           <li class="unternehmen">Unternehmen</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1070">Gemeinde Schlatt mit neuem Auftritt</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">Schlatt</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-06-01 09:01">1. Juni 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1070" alt="" loading="lazy" width="2820" height="1410" srcset="https://www.backslash.ch/public/upload/assets/6330/rendition/img_xlarge.jpg?fp=1779883814780 2820w, https://www.backslash.ch/public/upload/assets/6330/rendition/img_hd.jpg?fp=1779883808448 1920w, https://www.backslash.ch/public/upload/assets/6330/rendition/img_large.jpg?fp=1779883810284 1410w, https://www.backslash.ch/public/upload/assets/6330/rendition/img_medium.jpg?fp=1779883811572 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6330/rendition/img_xlarge.jpg?fp=1779883814780">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="egovernment">eGovernment</li>
           <li class="gemeinde">Gemeinde / Stadt</li>
           <li class="govis">GOViS</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/agentur/aktuelles/news.html/49/news/1068">Im Juni treten wir in die Pedale</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">News</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-05-28 06:50">28. Mai 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1068" alt="" loading="lazy" width="2820" height="1410" srcset="https://www.backslash.ch/public/upload/assets/6331/rendition/img_xlarge.jpg?fp=1779943812202 2820w, https://www.backslash.ch/public/upload/assets/6331/rendition/img_hd.jpg?fp=1779943806075 1920w, https://www.backslash.ch/public/upload/assets/6331/rendition/img_large.jpg?fp=1779943807687 1410w, https://www.backslash.ch/public/upload/assets/6331/rendition/img_medium.jpg?fp=1779943808887 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6331/rendition/img_xlarge.jpg?fp=1779943812202">
          </figure>
          <ul class="taglist">
           <li class="team">Team</li>
           <li class="unternehmen">Unternehmen</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1063">Neue Website der Feuerwehr Romanshorn ist online</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">Feuerwehr Romanshorn</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-05-21 08:26">21. Mai 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1063" alt="" loading="lazy" width="3840" height="1920" srcset="https://www.backslash.ch/public/upload/assets/6328/rendition/img_4k.jpg?fp=1779353487712 3840w, https://www.backslash.ch/public/upload/assets/6328/rendition/img_xlarge.jpg?fp=1779353505012 2820w, https://www.backslash.ch/public/upload/assets/6328/rendition/img_hd.jpg?fp=1779353493432 1920w, https://www.backslash.ch/public/upload/assets/6328/rendition/img_large.jpg?fp=1779353490296 1410w, https://www.backslash.ch/public/upload/assets/6328/rendition/img_medium.jpg?fp=1779353471389 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6328/rendition/img_xlarge.jpg?fp=1779353505012">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="gemeindenahe-institution">Gemeindenahe Institution</li>
           <li class="govis">GOViS</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1061">Neue Website der Gemeinde Hunzenschwil ist online</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">Hunzenschwil</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-05-08 09:48">8. Mai 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1061" alt="" loading="lazy" width="3840" height="1920" srcset="https://www.backslash.ch/public/upload/assets/6323/rendition/img_4k.jpg?fp=1777986134080 3840w, https://www.backslash.ch/public/upload/assets/6323/rendition/img_xlarge.jpg?fp=1777986169043 2820w, https://www.backslash.ch/public/upload/assets/6323/rendition/img_hd.jpg?fp=1777986148303 1920w, https://www.backslash.ch/public/upload/assets/6323/rendition/img_large.jpg?fp=1777986137520 1410w, https://www.backslash.ch/public/upload/assets/6323/rendition/img_medium.jpg?fp=1777986126260 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6323/rendition/img_xlarge.jpg?fp=1777986169043">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="egovernment">eGovernment</li>
           <li class="gemeinde">Gemeinde / Stadt</li>
           <li class="govis">GOViS</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1055">Neue Website der Schule Nürensdorf ist online</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">Schule Nürensdorf</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-04-29 09:06">29. April 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1055" alt="" loading="lazy" width="3840" height="1920" srcset="https://www.backslash.ch/public/upload/assets/6322/rendition/img_4k.jpg?fp=1777445846405 3840w, https://www.backslash.ch/public/upload/assets/6322/rendition/img_xlarge.jpg?fp=1777445873341 2820w, https://www.backslash.ch/public/upload/assets/6322/rendition/img_hd.jpg?fp=1777445853065 1920w, https://www.backslash.ch/public/upload/assets/6322/rendition/img_large.jpg?fp=1777445855733 1410w, https://www.backslash.ch/public/upload/assets/6322/rendition/img_medium.jpg?fp=1777445857721 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6322/rendition/img_xlarge.jpg?fp=1777445873341">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="govis">GOViS</li>
           <li class="schule">Schule</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1052">Frauenfeld: IG Gewerbe Ost mit neuer Website</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">IG Gewerbe Ost</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-04-20 07:29">20. April 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1052" alt="" loading="lazy" width="3840" height="1920" srcset="https://www.backslash.ch/public/upload/assets/6304/rendition/img_4k.jpg?fp=1776150334820 3840w, https://www.backslash.ch/public/upload/assets/6304/rendition/img_xlarge.jpg?fp=1776150348708 2820w, https://www.backslash.ch/public/upload/assets/6304/rendition/img_hd.jpg?fp=1776150338240 1920w, https://www.backslash.ch/public/upload/assets/6304/rendition/img_large.jpg?fp=1776150341112 1410w, https://www.backslash.ch/public/upload/assets/6304/rendition/img_medium.jpg?fp=1776150343392 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6304/rendition/img_xlarge.jpg?fp=1776150348708">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="intellio">Intellio</li>
           <li class="verband">Verband / Verein</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1050">Stadt Biel digitalisiert Bestellprozess für BSG-Tageskarten</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">Biel-Bienne</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-04-07 13:02">7. April 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1050" alt="" loading="lazy" width="3840" height="1920" srcset="https://www.backslash.ch/public/upload/assets/6303/rendition/img_4k.jpg?fp=1774602473251 3840w, https://www.backslash.ch/public/upload/assets/6303/rendition/img_xlarge.jpg?fp=1774602497186 2820w, https://www.backslash.ch/public/upload/assets/6303/rendition/img_hd.jpg?fp=1774602476775 1920w, https://www.backslash.ch/public/upload/assets/6303/rendition/img_large.jpg?fp=1774602479087 1410w, https://www.backslash.ch/public/upload/assets/6303/rendition/img_medium.jpg?fp=1774602482986 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6303/rendition/img_xlarge.jpg?fp=1774602497186">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="egovernment">eGovernment</li>
           <li class="gemeinde">Gemeinde / Stadt</li>
           <li class="govis">GOViS</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1037">Neue Website der Schule Neuenhof ist online</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">Schule Neuenhof</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-03-25 09:51">25. März 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1037" alt="" loading="lazy" width="3840" height="1920" srcset="https://www.backslash.ch/public/upload/assets/6298/rendition/img_4k.jpg?fp=1774431033057 3840w, https://www.backslash.ch/public/upload/assets/6298/rendition/img_xlarge.jpg?fp=1774431083736 2820w, https://www.backslash.ch/public/upload/assets/6298/rendition/img_hd.jpg?fp=1774431051480 1920w, https://www.backslash.ch/public/upload/assets/6298/rendition/img_large.jpg?fp=1774431039713 1410w, https://www.backslash.ch/public/upload/assets/6298/rendition/img_medium.jpg?fp=1774431022253 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6298/rendition/img_xlarge.jpg?fp=1774431083736">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="govis">GOViS</li>
           <li class="schule">Schule</li>
          </ul>
         </li>
         <li class="mod-entry link-expanded ken-burns-animation">
          <h2 class="mod-entry-title news-title"><a href="https://www.backslash.ch/referenzen/projekt.html/57/news/1034">Neue Website der Primarschule Rümlang ist online</a></h2>
          <div class="mod-entry-meta">
           <p class="mod-entry-meta__category">Primarschule Rümlang</p>
           <span class="mod-entry-meta__divider">|</span>
           <p class="mod-entry-meta__date nmt"><time datetime="2026-02-25 09:48">25. Februar 2026</time></p>
          </div>
          <figure>
           <img class="grid__img trans-hero" style="--name: trans-hero-1034" alt="" loading="lazy" width="3840" height="1920" srcset="https://www.backslash.ch/public/upload/assets/6287/rendition/img_4k.jpg?fp=1772005659497 3840w, https://www.backslash.ch/public/upload/assets/6287/rendition/img_xlarge.jpg?fp=1772005682044 2820w, https://www.backslash.ch/public/upload/assets/6287/rendition/img_hd.jpg?fp=1772005665597 1920w, https://www.backslash.ch/public/upload/assets/6287/rendition/img_large.jpg?fp=1772005662337 1410w, https://www.backslash.ch/public/upload/assets/6287/rendition/img_medium.jpg?fp=1772005642653 690w" sizes="
			(min-width: 1567px) 720px,
			(min-width: 850px) 62vw,
			50vw
        " src="https://www.backslash.ch/public/upload/assets/6287/rendition/img_xlarge.jpg?fp=1772005682044">
          </figure>
          <ul class="taglist">
           <li class="a11y">Accessibility</li>
           <li class="extranet">Extranet</li>
           <li class="govis">GOViS</li>
           <li class="schule">Schule</li>
          </ul>
         </li>
        </ul>
       </div>
       <div class="wrapper furtherlink">
        <a class="btn btn--section" href="https://www.backslash.ch/agentur/aktuelles/news.html/48">Alle Newsmeldungen</a>
       </div>
      </section>
      <section class="section section--home section--clients client-overview lay__fw lay__clipped lay__clipped--right lay__clipped--strong" aria-labelledby="client-overview__title">
       <div class="wrapper">
        <h2 class="client-overview__title section__title" id="client-overview__title">Unsere Kunden</h2>
        <ul class="client-overview__lst reset">
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/kantone.html/34">Kantone 
           <svg class="client-overview__icon" height="30" viewBox="0 0 40 30" width="40" xmlns="http://www.w3.org/2000/svg">
            <path d="m39 1v17.44c0 5.82-4.74 10.56-10.57 10.56h-.87c-5.82 0-10.56-4.74-10.56-10.56v-17.44zm1-1h-24v18.44c0 6.38 5.18 11.56 11.56 11.56h.87c6.38 0 11.57-5.18 11.57-11.56z" fill="currentColor" /><path d="m39.5.5-22.5 22" fill="none" stroke="currentColor" stroke-miterlimit="10" />
           </svg> </a></li>
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/staedte-und-gemeinden.html/35">Städte &amp; Gemeinden 
           <svg class="client-overview__icon" height="30" viewBox="0 0 40 30" width="40" xmlns="http://www.w3.org/2000/svg">
            <g fill="currentColor">
             <path d="m39 1v17.44c0 5.82-4.74 10.56-10.57 10.56h-.87c-5.82 0-10.56-4.74-10.56-10.56v-17.44zm1-1h-24v18.44c0 6.38 5.18 11.56 11.56 11.56h.87c6.38 0 11.57-5.18 11.57-11.56z" /><path d="m28 9.39 1.17 3.78.16.51.51.16 3.78 1.17-3.78 1.17-.51.16-.16.51-1.17 3.78-1.17-3.78-.16-.51-.51-.16-3.78-1.17 3.78-1.17.51-.16.16-.51zm0-3.39-2.12 6.88-6.88 2.12 6.88 2.12 2.12 6.88 2.12-6.88 6.88-2.12-6.88-2.12z" />
            </g>
           </svg> </a></li>
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/schulen.html/36">Schulen 
           <svg class="client-overview__icon" height="30" viewBox="0 0 40 30" width="40" xmlns="http://www.w3.org/2000/svg">
            <g fill="currentColor">
             <path d="m36.17 3c.46 0 .83.37.83.83v24.34c0 .46-.37.83-.83.83h-16.34c-.46 0-.83-.37-.83-.83v-24.34c0-.46.37-.83.83-.83h16.35m0-1h-16.35c-1.01 0-1.83.82-1.83 1.83v24.34c0 1.01.82 1.83 1.83 1.83h16.35c1.01 0 1.83-.82 1.83-1.83v-24.34c0-1.01-.82-1.83-1.83-1.83z" />
             <g fill="none" stroke="currentColor" stroke-miterlimit="10">
              <path d="m18.53 27.71h-.34c-.94 0-1.69-.76-1.69-1.69v-20c0-.94.76-1.69 1.69-1.69h.34" /><path d="m37.5 27.71h.34c.94 0 1.69-.76 1.69-1.69v-20c0-.94-.76-1.69-1.69-1.69h-.34" /><path d="m34.59 2.5v8.98c0 1.1-.9 2-2 2h-3.59" /><path d="m26.09 13.48h-2.59c-1.1 0-2-.9-2-2v-8.98" />
             </g>
             <path d="m28.97 11.68v2.58h-1.97v-2.58zm.42-1h-2.81c-.32 0-.58.26-.58.58v3.42c0 .32.26.58.58.58h2.81c.32 0 .58-.26.58-.58v-3.42c0-.32-.26-.58-.58-.58z" />
             <g fill="none" stroke="currentColor" stroke-miterlimit="10">
              <rect height="8" rx=".54" width="15" x="20.5" y="19.5" /><path d="m30.5 3v-1.88c0-.35.28-.62.62-.62h3.75c.35 0 .62.28.62.62v1.88" /><path d="m20.5 3v-1.88c0-.35.28-.62.62-.62h3.75c.35 0 .62.28.62.62v1.88" />
             </g>
            </g>
           </svg> </a></li>
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/gemeindenahe-institutionen.html/65">Gemeindenahe Institutionen 
           <svg class="client-overview__icon" height="30" viewBox="0 0 40 30" width="40" xmlns="http://www.w3.org/2000/svg">
            <g fill="currentColor">
             <path d="m20 20.72v8.78h9.5v-10h10v-9h-10v-10h-9.5v8.03" fill="none" stroke="currentColor" stroke-miterlimit="10" /><path d="m27 11.23c-.71 0-1.08-.33-1.4-.62-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.74.21-1.03.48c-.32.29-.69.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48v-.55c.71 0 1.08.33 1.4.62.3.27.53.48 1.03.48s.74-.21 1.03-.48c.32-.29.69-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48z" /><path d="m27 12.87c-.71 0-1.08-.33-1.4-.62-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.74.21-1.03.48c-.32.29-.69.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48v-.55c.71 0 1.08.33 1.4.62.3.27.53.48 1.03.48s.74-.21 1.03-.48c.32-.29.69-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48z" /><path d="m27 14.52c-.71 0-1.08-.33-1.4-.62-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.74.21-1.03.48c-.32.29-.69.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48v-.55c.71 0 1.08.33 1.4.62.3.27.53.48 1.03.48s.74-.21 1.03-.48c.32-.29.69-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48z" /><path d="m27 16.16c-.71 0-1.08-.33-1.4-.62-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.74.21-1.03.48c-.32.29-.69.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48v-.55c.71 0 1.08.33 1.4.62.3.27.53.48 1.03.48s.74-.21 1.03-.48c.32-.29.69-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48z" /><path d="m27 17.81c-.71 0-1.08-.33-1.4-.62-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.74.21-1.03.48c-.32.29-.69.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48v-.55c.71 0 1.08.33 1.4.62.3.27.53.48 1.03.48s.74-.21 1.03-.48c.32-.29.69-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48z" /><path d="m27 19.46c-.71 0-1.08-.33-1.4-.62-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.73.21-1.03.48c-.32.29-.68.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48s-.74.21-1.03.48c-.32.29-.69.62-1.4.62s-1.08-.33-1.4-.62c-.3-.27-.53-.48-1.03-.48v-.55c.71 0 1.08.33 1.4.62.3.27.53.48 1.03.48s.74-.21 1.03-.48c.32-.29.69-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48s.73-.21 1.03-.48c.32-.29.68-.62 1.4-.62s1.08.33 1.4.62c.3.27.53.48 1.03.48z" />
            </g>
           </svg></a></li>
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/gesundheit.html/66">Gesundheit 
           <svg class="client-overview__icon" xmlns="http://www.w3.org/2000/svg" width="40" height="30" viewBox="0 0 40 30">
            <path d="M35.37,15.09c-1.4,0-2.69,.64-3.54,1.71-.85-1.07-2.14-1.71-3.54-1.71-2.44,0-4.51,2.17-4.51,4.75,.02,1.55,.81,3.24,2.44,5.16h-1.92c-1.12,0-2.3-.68-2.3-1.95V14.14c4.42-.49,7.87-4.18,7.99-8.69h.01V1h-2.54c-.1-.56-.57-1-1.17-1-.67,0-1.21,.54-1.21,1.21V3.79c0,.67,.54,1.21,1.21,1.21,.59,0,1.06-.44,1.17-1h1.54v1.22c0,4.4-3.59,7.99-8.01,7.99s-7.99-3.58-7.99-7.99v-1.22h1.54c.1,.56,.57,1,1.17,1,.67,0,1.21-.54,1.21-1.21V1.21c0-.67-.54-1.21-1.21-1.21-.59,0-1.06,.44-1.17,1h-2.54V5.45h.01c.13,4.85,4.1,8.75,8.98,8.75,0,0,0,0,.01,0v8.85c0,1.65,1.45,2.95,3.3,2.95h2.83c1.15,1.21,2.61,2.5,4.39,3.89l.31,.24,.31-.24c5.24-4.1,7.7-7.3,7.74-10.05h0c0-2.58-2.06-4.75-4.51-4.75ZM26.5,3.79c0,.23-.42,.23-.42,0V1.21c0-.11,.09-.21,.21-.21s.21,.09,.21,.21V3.79Zm1-.79v-1h1.5v1h-1.5ZM15.5,1.21c0-.11,.09-.21,.21-.21s.21,.09,.21,.21V3.79c0,.23-.42,.23-.42,0V1.21Zm-2.5,.79h1.5v1h-1.5v-1ZM31.83,28.86c-1.28-1.01-2.36-1.96-3.28-2.86h.62c1.69,0,3-1.06,3.27-2.54,.77-.33,1.31-1.09,1.31-1.98,0-1.19-.96-2.15-2.15-2.15s-2.15,.96-2.15,2.15c0,1.11,.84,2.01,1.92,2.13-.3,.83-1.13,1.39-2.2,1.39h-1.61c-1.84-1.99-2.75-3.7-2.77-5.17,0-1.99,1.64-3.74,3.51-3.74,1.3,0,2.48,.71,3.09,1.86l.44,.83,.44-.83c.61-1.14,1.8-1.86,3.1-1.86,.92,0,1.79,.4,2.47,1.13,.66,.71,1.04,1.67,1.04,2.61-.04,2.34-2.34,5.3-7.04,9.03Zm-.24-6.23c-.63,0-1.15-.52-1.15-1.15s.52-1.15,1.15-1.15,1.15,.52,1.15,1.15-.52,1.15-1.15,1.15Z" fill="currentColor" />
           </svg> </a></li>
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/verbaende-vereine.html/67">Verbände &amp; Vereine 
           <svg class="client-overview__icon" height="30" viewBox="0 0 40 30" width="40" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" stroke="currentColor">
             <g stroke-miterlimit="10">
              <path d="m9.48.41h3.6c.33 0 .6.27.6.6v13.22c0 .33-.27.6-.6.6h-3.6z" transform="matrix(.70710678 .70710678 -.70710678 .70710678 8.78 -5.96)" /><path d="m8.4 13.78 3.11 5.48c.19.31.42.59.68.85l8.32 8.32c.7.7 1.84.7 2.55 0 .7-.7.7-1.84 0-2.55l-5.95-5.95" />
              <g stroke-linecap="round">
               <path d="m17.11 19.94 7.22 7.22c.7.7 1.84.7 2.55 0 .7-.7.7-1.84 0-2.55l-7.22-7.22" /><path d="m23.05 15.69 6.37 6.37c.7.7 1.84.7 2.55 0 .7-.7.7-1.84 0-2.55l-4.88-4.88" /><path d="m19.65 17.39 8.07 8.07c.7.7 1.84.7 2.55 0 .7-.7.7-1.84 0-2.55l-7.22-7.22" />
              </g>
              <path d="m30.29.37h3.61c.33 0 .6.27.6.6v13.25c0 .33-.27.6-.6.6h-3.61z" transform="matrix(-.70710678 .70710678 -.70710678 -.70710678 60.68 -9.94)" />
             </g>
             <path d="m26.44 4.62-1.53 1.53c-.39.39-.89.63-1.44.69l-2.57.29c-.27.03-.53.15-.72.35l-5.88 5.88c-.3.3-.2.81.19.98l.66.28c.91.39 1.96.19 2.65-.51l2.68-2.68s3.19 3.62 7.24-.43" stroke-linecap="round" stroke-linejoin="round" />
            </g>
           </svg> </a></li>
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/kmu-industrie.html/68">KMU &amp; Industrie 
           <svg class="client-overview__icon" height="30" viewBox="0 0 40 30" width="40" xmlns="http://www.w3.org/2000/svg">
            <g fill="none" stroke="currentColor" stroke-miterlimit="10">
             <path d="m19.68 29.5h-6.28l.95-22.74c.01-.26.22-.46.48-.46h3.42c.26 0 .47.2.48.46z" /><path d="m14.12 8.5h4.84" /><path d="m14.12 10.5h4.84" /><path d="m19.2 17.17 6.04-3.45c.32-.18.72.05.72.42v3.03l6.04-3.45c.32-.18.72.05.72.42v3.03l6.04-3.45c.32-.18.72.05.72.42v15.36h-19.56" /><path d="m21.5 20.5h2v3h-2z" /><path d="m27.5 20.5h2v3h-2z" /><path d="m33.5 20.5h2v3h-2z" /><path d="m22 .5c-.65 0-1.2.42-1.41 1h-2.59c-.83 0-1.5.67-1.5 1.5v1h3.5c.65 0 1.2-.42 1.41-1h2.59c.83 0 1.5-.67 1.5-1.5v-1z" />
            </g>
           </svg> </a></li>
         <li class="client-overview__item"><a href="https://www.backslash.ch/referenzen/branchen/diverse.html/69">Diverse 
           <svg class="client-overview__icon" height="30" viewBox="0 0 40 30" width="40" xmlns="http://www.w3.org/2000/svg">
            <path d="m34 1.44 4.61 4.75-4.61 4.75-1.03-1.06 1.03-1.14 1.6-1.78-2.39.11c-4.13.19-7.31 3.6-7.4 7.96.09 4.32 3.27 7.73 7.4 7.92l2.39.11-1.6-1.78-1.03-1.14 1.03-1.06 4.61 4.75-4.61 4.75-1.01-1.04 1.12-1.16 1.43-1.48-2.05-.21-.15-.02h-.04s-.04 0-.04 0c-3.03-.09-5.74-1.64-7.44-4.24l-.84-1.28-.84 1.28c-1.7 2.61-4.41 4.16-7.44 4.24h-.04s-.04 0-.04 0l-.15.02-2.05.21 1.43 1.48 1.12 1.16-1.01 1.04-4.61-4.75 4.61-4.75 1.03 1.06-1.03 1.14-1.6 1.78 2.39-.11c4.13-.19 7.31-3.6 7.4-7.96-.09-4.32-3.27-7.73-7.4-7.92l-2.39-.11 1.6 1.78 1.03 1.14-1.03 1.06-4.61-4.75 4.65-4.75 1.01 1.04-1.12 1.16-1.43 1.48 2.05.21.15.02h.04s.04 0 .04 0c3.03.09 5.74 1.64 7.44 4.24l.84 1.28.84-1.28c1.7-2.61 4.41-4.16 7.44-4.24h.04s.04 0 .04 0l.15-.02 2.05-.21-1.43-1.48-1.12-1.16 1.01-1.04m0-1.44-2.4 2.47 1.8 1.86-.15.02c-3.46.1-6.45 1.94-8.25 4.7-1.8-2.76-4.79-4.6-8.25-4.7l-.15-.02 1.8-1.86-2.4-2.47-6 6.19 6 6.19 2.4-2.47-1.65-1.84c3.61.17 6.37 3.2 6.44 6.94-.08 3.74-2.84 6.77-6.44 6.94l1.65-1.84-2.4-2.47-6 6.19 6 6.19 2.4-2.47-1.8-1.86.15-.02c3.46-.1 6.45-1.94 8.25-4.7 1.8 2.76 4.79 4.6 8.25 4.7l.15.02-1.8 1.86 2.4 2.47 6-6.19-6-6.19-2.4 2.47 1.65 1.84c-3.61-.17-6.37-3.2-6.44-6.94.08-3.74 2.84-6.77 6.44-6.94l-1.65 1.84 2.4 2.47 6-6.19-6.04-6.19z" fill="currentColor" />
           </svg> </a></li>
        </ul>
       </div>
      </section>
      <section class="section section--home section--projects projects-overview" aria-labelledby="projects-overview__title">
       <h2 class="projects-overview__title section__title" id="projects-overview__title">Projekte in Arbeit</h2>
       <p>Ein Auszug aktueller Kundenprojekte in Arbeit.</p>
       <div class="swiper-container swiper-container--fw">
        <div class="projects swiper swiper--projects ">
         <div class="projects__lst projects__lst--multi swiper-wrapper swiper-wrapper--projects">
          <div class="swiper-slide card card--project card--nolink">
           <div class="card__header">
            <h3 class="card__title nmb">Gemeinde Höri</h3>
            <p class="card__desc">im Kanton Zürich</p>
           </div>
           <div class="card__img-container">
            <figure>
             <img src="https://www.backslash.ch/public/upload/assets/6289/rendition/projectimg_medium.jpg?fp=1772002679367" alt="" loading="lazy" width="1640" height="922" srcset="https://www.backslash.ch/public/upload/assets/6289/rendition/projectimg_large.jpg?fp=1772002677995 1640w, https://www.backslash.ch/public/upload/assets/6289/rendition/projectimg_medium.jpg?fp=1772002679367 820w" sizes="
			(min-width: 1367px) 820px,
        	(min-width: 769px) 60vw,
			100vw
        ">
            </figure>
           </div>
           <figure class="card__logo">
            <img src="https://www.backslash.ch/public/upload/assets/6291/logo-ho%CC%88ri.jpg?fp=1772003235767" alt="Gemeinde Höri" loading="lazy">
           </figure>
          </div>
          <div class="swiper-slide card card--project card--nolink">
           <div class="card__header">
            <h3 class="card__title nmb">Gemeinde Münchwilen</h3>
            <p class="card__desc">im Kanton Aargau</p>
           </div>
           <div class="card__img-container">
            <figure>
             <img src="https://www.backslash.ch/public/upload/assets/6288/rendition/projectimg_medium.jpg?fp=1772002667583" alt="" loading="lazy" width="1640" height="922" srcset="https://www.backslash.ch/public/upload/assets/6288/rendition/projectimg_large.jpg?fp=1772002664351 1640w, https://www.backslash.ch/public/upload/assets/6288/rendition/projectimg_medium.jpg?fp=1772002667583 820w" sizes="
			(min-width: 1367px) 820px,
        	(min-width: 769px) 60vw,
			100vw
        ">
            </figure>
           </div>
           <figure class="card__logo">
            <img src="https://www.backslash.ch/public/upload/assets/6293/logo-mu%CC%88nchwilen-ag.png?fp=1772003278970" alt="Gemeinde Münchwilen" loading="lazy">
           </figure>
          </div>
          <div class="swiper-slide card card--project card--nolink">
           <div class="card__header">
            <h3 class="card__title nmb">Gemeinde Hunzenschwil</h3>
            <p class="card__desc">im Kanton Aargau</p>
           </div>
           <div class="card__img-container">
            <figure>
             <img src="https://www.backslash.ch/public/upload/assets/5997/rendition/projectimg_medium.jpg?fp=1755496685691" alt="" loading="lazy" width="1640" height="922" srcset="https://www.backslash.ch/public/upload/assets/5997/rendition/projectimg_large.jpg?fp=1755496684479 1640w, https://www.backslash.ch/public/upload/assets/5997/rendition/projectimg_medium.jpg?fp=1755496685691 820w" sizes="
			(min-width: 1367px) 820px,
        	(min-width: 769px) 60vw,
			100vw
        ">
            </figure>
           </div>
           <figure class="card__logo">
            <img src="https://www.backslash.ch/public/upload/assets/6003/logo_hunzenschwil.png?fp=1755497495799" alt="Gemeinde Hunzenschwil" loading="lazy">
           </figure>
          </div>
          <div class="swiper-slide card card--project card--nolink">
           <div class="card__header">
            <h3 class="card__title nmb">Gemeinde Hedingen</h3>
            <p class="card__desc">im Kanton Zürich</p>
           </div>
           <div class="card__img-container">
            <figure>
             <img src="https://www.backslash.ch/public/upload/assets/5996/rendition/projectimg_medium.jpg?fp=1755496655256" alt="" loading="lazy" width="1640" height="922" srcset="https://www.backslash.ch/public/upload/assets/5996/rendition/projectimg_large.jpg?fp=1755496654016 1640w, https://www.backslash.ch/public/upload/assets/5996/rendition/projectimg_medium.jpg?fp=1755496655256 820w" sizes="
			(min-width: 1367px) 820px,
        	(min-width: 769px) 60vw,
			100vw
        ">
            </figure>
           </div>
           <figure class="card__logo">
            <img src="https://www.backslash.ch/public/upload/assets/6004/Logo-hedingen.png?fp=1755497612840" alt="Gemeinde Hedingen" loading="lazy">
           </figure>
          </div>
          <div class="swiper-slide card card--project card--nolink">
           <div class="card__header">
            <h3 class="card__title nmb">Gemeinde Schatt</h3>
            <p class="card__desc">im Kanton Thurgau</p>
           </div>
           <div class="card__img-container">
            <figure>
             <img src="https://www.backslash.ch/public/upload/assets/6290/rendition/projectimg_medium.jpg?fp=1772002715722" alt="" loading="lazy" width="1640" height="922" srcset="https://www.backslash.ch/public/upload/assets/6290/rendition/projectimg_large.jpg?fp=1772002714326 1640w, https://www.backslash.ch/public/upload/assets/6290/rendition/projectimg_medium.jpg?fp=1772002715722 820w" sizes="
			(min-width: 1367px) 820px,
        	(min-width: 769px) 60vw,
			100vw
        ">
            </figure>
           </div>
           <figure class="card__logo">
            <img src="https://www.backslash.ch/public/upload/assets/6292/schlatt.png?fp=1772003261623" alt="Gemeinde Schatt" loading="lazy">
           </figure>
          </div>
         </div>
        </div>
        <div class="swiper-button-prev swiper-button-prev--projects swiper-button--projects"></div>
        <div class="swiper-button-next swiper-button-next--projects swiper-button--projects"></div>
        <div class="swiper-pagination"></div>
        <script>
                $(function() {
                    const carousel = $('.swiper-wrapper--projects');
                    const hasMultipleCells = carousel.find('.swiper-slide').length > 1;
                    if (hasMultipleCells) {
                        const swiper = new Swiper('.swiper--projects', {
                            direction: 'horizontal',
                            slidesPerView: 'auto',
                            spaceBetween: 30,
                            speed: 800,
                            centeredSlides: true,
                            scrollbar: {
                                draggable: true,
                            },
                            loop: true,
                            autoplay: {
                                delay: 8000
                            },
                            pagination: {
                                el: '.swiper-pagination'
                              },
                            navigation: {
                                nextEl: '.swiper-button-next--projects',
                                prevEl: '.swiper-button-prev--projects',
                            },
                        });
                        swiper.on('slideChangeTransitionStart touchStart', function () {
                            $('.swiper-button--projects').addClass('swiper-button--invisible');
                        });
                        swiper.on('slideChangeTransitionEnd touchEnd', function () {
                            $('.swiper-button--projects').removeClass('swiper-button--invisible');
                        });
                    }
                });
        	</script>
       </div>
      </section>
     </div>
     <section class="main__action main__action--blog-subscribe lay__fw">
      <div class="blog-subscribe">
       <div class="blog-subscribe__txt">
        <h2 id="newsletter-subscribtion" class="section__title">Newsletter</h2>
        <p class="lead">Abonnieren Sie noch heute unseren Newsletter und bleiben Sie stets auf dem Laufenden.</p>
        <form class="form-builder messenger" method="post" id="messenger-subscribe-form" action="https://www.backslash.ch/route/messenger-subscription-savemember/backPageId/8/cbtoken/cbdata63DE1EB8E3736FE2ABC90663714E581E" data-lang-code="de">
         <input type="hidden" name="formfield3657486951" class="cffp_mm" value=""> <input type="hidden" name="formfield1118223692" class="cffp_kp" value="">
         <script>
    if (window.govis && window.govis.util && window.govis.util.cffp) {
        window.govis.util.cffp.init();
    }
</script>
         <input type="hidden" name="formfield9046270113" value="1780774810480"> <span style="display:none" aria-hidden="true"> <label for="cffp_ef">Bitte füllen Sie das folgende Feld nicht aus!</label> <input type="text" name="formfield9991015654" id="cffp_ef" value="" tabindex="-1"> </span>
         <script id="js-session-notification-template" type="text/x-handlebars-template">
    <div
    class="dialog-container js-confirm-dialog"
    aria-hidden="true"
    aria-labelledby="form-builder-confirm-dialog-title"
    aria-describedby="form-builder-confirm-dialog-description"
>
    <div class="dialog-overlay" data-a11y-dialog-hide></div>
    <div class="dialog-content" role="document">
        <button
            data-a11y-dialog-hide
            class="dialog-close js-dialog-close"
            aria-label="schliessen"
        >
            &times;
        </button>

        <h1 id="form-builder-confirm-dialog-title">Achtung</h1>

        <p id="form-builder-confirm-dialog-description" class="js-dialog-description"></p>

        <div class="form-builder-btn form-builder-btn-group">
            <button type="button" class="btn js-dialog-confirm" name="confirm">bestätigen</button>
            <button type="button" class="btn btn--secondary js-dialog-close" name="cancel" >abbrechen</button>
        </div>
    </div>
</div>
</script>
         <script>
((currentScript)=>{
window.helperJs.executeScript({
    executeFn: function() {
        window.govis.module.user.sessionnotification.init({
            notificationOffset: parseInt('165', 10),
            timeout: parseInt('180', 10),
            texts: {
                enlarge: {
                    description: 'Ihre Sitzung läuft in 15 Minuten ab. Benötigen Sie mehr Zeit?',
                    confirm: 'Ja, bitte',
                    cancel: 'Nein danke'
                },
                expire: {
                    description: 'Ihre Sitzung ist abgelaufen. Sie müssen die Seite neu laden.',
                    confirm: 'Neu laden',
                    cancel: 'Nein danke'
                }
            },
            currentScript: currentScript
        });
    },
    resources: [{
        alias: 'master',
        type: 'css',
        path: 'femodules/confirmation_prompt.css',
        isLoadedFn: () => document.querySelector("link[href*='css/femodules/confirmation_prompt.css']")
    }, {
        alias: 'lib',
        name: 'handlebars',
        isLoadedFn: () => window.Handlebars
    }, {
        alias: 'master',
        type: 'js',
        path: 'femodules/user/sessionnotification.js',
        modulePath: 'govis.module.user.sessionnotification'
    },{
        alias: 'master',
        type: 'js',
        path: 'femodules/core/a11yDialog.js',
        modulePath: 'govis.module.core.a11yDialog'
    }, {
        alias: 'lib',
        name: 'govistimermanager',
        isLoadedFn: () => window.GovisTimerManager
    }, {
        alias: 'lib',
        name: 'a11y-dialog',
        isLoadedFn: () => window.A11yDialog
    }]
});
})(document.currentScript);
</script>
         <fieldset class="messenger__memberinfo">
          <legend>Kontaktdaten</legend> <input type="hidden" name="subscription.member.id" value="">
          <p class="clearfix required js-component-wrapper-subscription-member-email"><label for="subscription-member-email">E-Mail <em aria-hidden="true" title="Pflichtfeld" class="messenger-required-hint">*</em></label> <input type="email" name="subscription.member.email" id="subscription-member-email" required class="required"></p>
         </fieldset>
         <div style="display:none;">
          <fieldset class="messenger__subscription">
           <legend>News</legend>
           <p class="messenger__subscriptioninfo"><span class="messenger__subscriptioninfo--cat-desc">Markieren Sie die Rubriken, die Sie abonnieren möchten. 
             <br></span> <span class="messenger__subscriptioninfo--sendafterpublishhint">Wenn Sie Beiträge direkt nach deren Erscheinen erhalten möchten, wählen Sie bitte die Versandart <b>«sofort»</b>. Andernfalls wählen Sie <b>«gesammelt»</b> und erhalten die Beiträge in Form einer Zusammenfassung.</span></p>
           <div class="table-responsive">
            <table class="subscription-opt-lst" aria-label="Abo pro Rubrik aktivieren">
             <thead>
              <tr>
               <th scope="col" class="col-subscription-title">Rubrik</th>
               <th scope="col" class="col-subscription-html nobr">Abo aktiv</th>
               <th scope="col" class="col-subscription-delivery">Versand</th>
              </tr>
             </thead>
             <tbody>
              <tr>
               <th scope="row" class="col-subscription-title">News<input type="hidden" name="subscription.config.229.1.id" value="0"></th>
               <td class="col-subscription-html"><input type="checkbox" class="js-deliverytype-selector" data-dv-id="229.1" id="subscription.config.229.1.html" name="subscription.config.229.1.html" value="1" checked> <label for="subscription.config.229.1.html" class="invis">E-Mail-Abo für Rubrik «{1}»HTML</label></td>
               <td class="col-subscription-delivery">
                <ul class="reset">
                 <li><label for="subscription-config-229-1-sendafterpublish"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-enabled" id="subscription-config-229-1-sendafterpublish" value="1" name="subscription.config.229.1.sendafterpublish" checked> <span aria-hidden="true">&nbsp;sofort</span> </label></li>
                 <li><label for="subscription-config-229-1-sendafterpublish_off"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-disabled" id="subscription-config-229-1-sendafterpublish_off" value="0" name="subscription.config.229.1.sendafterpublish"> <span aria-hidden="true">&nbsp;gesammelt</span> </label></li>
                </ul>
               </td>
              </tr>
              <tr>
               <th scope="row" class="col-subscription-title">Jobs<input type="hidden" name="subscription.config.229.8.id" value="0"></th>
               <td class="col-subscription-html"><input type="checkbox" class="js-deliverytype-selector" data-dv-id="229.8" id="subscription.config.229.8.html" name="subscription.config.229.8.html" value="1" checked> <label for="subscription.config.229.8.html" class="invis">E-Mail-Abo für Rubrik «{1}»HTML</label></td>
               <td class="col-subscription-delivery">
                <ul class="reset">
                 <li><label for="subscription-config-229-8-sendafterpublish"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-enabled" id="subscription-config-229-8-sendafterpublish" value="1" name="subscription.config.229.8.sendafterpublish" checked> <span aria-hidden="true">&nbsp;sofort</span> </label></li>
                 <li><label for="subscription-config-229-8-sendafterpublish_off"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-disabled" id="subscription-config-229-8-sendafterpublish_off" value="0" name="subscription.config.229.8.sendafterpublish"> <span aria-hidden="true">&nbsp;gesammelt</span> </label></li>
                </ul>
               </td>
              </tr>
              <tr>
               <th scope="row" class="col-subscription-title">Blog<input type="hidden" name="subscription.config.229.2.id" value="0"></th>
               <td class="col-subscription-html"><input type="checkbox" class="js-deliverytype-selector" data-dv-id="229.2" id="subscription.config.229.2.html" name="subscription.config.229.2.html" value="1" checked> <label for="subscription.config.229.2.html" class="invis">E-Mail-Abo für Rubrik «{1}»HTML</label></td>
               <td class="col-subscription-delivery">
                <ul class="reset">
                 <li><label for="subscription-config-229-2-sendafterpublish"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-enabled" id="subscription-config-229-2-sendafterpublish" value="1" name="subscription.config.229.2.sendafterpublish" checked> <span aria-hidden="true">&nbsp;sofort</span> </label></li>
                 <li><label for="subscription-config-229-2-sendafterpublish_off"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-disabled" id="subscription-config-229-2-sendafterpublish_off" value="0" name="subscription.config.229.2.sendafterpublish"> <span aria-hidden="true">&nbsp;gesammelt</span> </label></li>
                </ul>
               </td>
              </tr>
              <tr>
               <th scope="row" class="col-subscription-title">Kundenprojekte<input type="hidden" name="subscription.config.229.3.id" value="0"></th>
               <td class="col-subscription-html"><input type="checkbox" class="js-deliverytype-selector" data-dv-id="229.3" id="subscription.config.229.3.html" name="subscription.config.229.3.html" value="1" checked> <label for="subscription.config.229.3.html" class="invis">E-Mail-Abo für Rubrik «{1}»HTML</label></td>
               <td class="col-subscription-delivery">
                <ul class="reset">
                 <li><label for="subscription-config-229-3-sendafterpublish"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-enabled" id="subscription-config-229-3-sendafterpublish" value="1" name="subscription.config.229.3.sendafterpublish" checked> <span aria-hidden="true">&nbsp;sofort</span> </label></li>
                 <li><label for="subscription-config-229-3-sendafterpublish_off"> <input type="radio" class="js-sendafterpublish js-sendafterpublish-disabled" id="subscription-config-229-3-sendafterpublish_off" value="0" name="subscription.config.229.3.sendafterpublish"> <span aria-hidden="true">&nbsp;gesammelt</span> </label></li>
                </ul>
               </td>
              </tr>
             </tbody>
            </table>
           </div>
          </fieldset>
         </div>
         <div>
          <fieldset class="js-timeperiod-config">
           <legend>Intervall des gesammelten Versandes</legend>
           <div class="clearfix messenger-daytime required js-component-wrapper-subscription-crontime-time">
            <label for="subscription-crontime-time">Senden um<em aria-hidden="true" title="Pflichtfeld" class="messenger-required-hint">*</em></label> <input type="time" value="18:00" id="subscription-crontime-time" name="subscription.crontime.time" required class="required" pattern="^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$">
           </div>
           <div class="clearfix form-option-lst-show-title required">
            <p class="form-option-lst-title">Häufigkeit<em aria-hidden="true" title="Pflichtfeld" class="messenger-required-hint">*</em></p>
            <div class="form-option-lst">
             <ul class="reset js-period-selector">
              <li><label for="daily"> <input data-crontime="true" type="radio" name="subscription.crontime.period" id="daily" value="daily"> &nbsp;Täglich </label></li>
              <li><label for="weekly"> <input data-crontime="true" type="radio" name="subscription.crontime.period" id="weekly" value="weekly" checked> &nbsp;Wöchentlich </label></li>
              <li><label for="monthly"> <input data-crontime="true" type="radio" name="subscription.crontime.period" id="monthly" value="monthly"> &nbsp;Monatlich </label></li>
             </ul>
            </div>
           </div>
           <div class="clearfix time-period-weekly required last js-component-wrapper-weekly-period">
            <label for="weekly-period">Wochentag(e)<em aria-hidden="true" title="Pflichtfeld" class="messenger-required-hint">*</em></label> <select id="weekly-period" name="subscription.crontime.weekly_period" multiple> <option value="2">Montag</option> <option value="3">Dienstag</option> <option value="4">Mittwoch</option> <option value="5">Donnerstag</option> <option value="6" selected>Freitag</option> <option value="7">Samstag</option> <option value="1">Sonntag</option> </select>
           </div>
           <div class="clearfix time-period-monthly required last js-component-wrapper-monthly-period">
            <label for="monthly-period">Tag(e) im Monat<em aria-hidden="true" title="Pflichtfeld" class="messenger-required-hint">*</em></label> <select id="monthly-period" name="subscription.crontime.monthly_period" multiple> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select>
           </div>
          </fieldset>
         </div>
         <div id="subscription-member-captcha-group" style="display:none;">
          <div class="clearfix required">
           <altcha-widget id="subscription-member-captcha" auto="off" challenge="https://www.backslash.ch/route/core-captcha-altchaChallenge" configuration="{&quot;minDuration&quot;: 1000}" display="standard" language="de" name="altcha" type="switch" workers="4"></altcha-widget>
          </div>
          <script>
        window.helperJs.executeScript({
            executeFn: function () {
                
                window.helperJs.optionalByRuleValidator({
                    id: 'subscription-member-captcha',
                    type: 'altcha'
                }, [{"calculate":[],"conditions":[{"condition":"or","module":"condition","conditions":[{"module":"operator","type":"equal","conf":{"block_condition_id":"3","type":"custom","value":"","case_insensitive":0,"invalid_block":false,"field_data":{"fieldname":"subscription.member.email","id":"subscription-member-email","type":"email","title":"E-Mail"}}},{"module":"operator","type":"contains","conf":{"block_condition_id":"1","type":"custom","value":".ch","case_insensitive":0,"invalid_block":false,"field_data":{"fieldname":"subscription.member.email","id":"subscription-member-email","type":"email","title":"E-Mail"}}}]}],"action":"optionalbyrule","conf":{"block_condition_id":4,"invalid_block":false,"field_data":{"fieldname":"subscription.member.captcha","id":"subscription-member-captcha","type":"captcha","title":"messengermember.captcha"}}}]);
                
            },
            resources: [{
                alias: 'lib',
                name: 'validator',
                isLoadedFn: () => globalThis.Validator
            },{
                alias: 'lib',
                name: 'altcha',
                isLoadedFn: () => globalThis.$altcha
            },]
        });
    </script>
         </div>
         <button type="submit" class="btn" name="subscribe">Abonnieren</button>
        </form>
       </div>
       <div class="blog-subscribe__img">
        <img src="/public/upload/assets/6043/illustration--newsletter.svg?fp=1764058026817" alt="Illustration Newsletter" width="323" height="271">
       </div>
      </div>
     </section>
    </div>
   </main>
   <nav class="breadcrumb mod-wrapper mod-breadcrumb" aria-labelledby="breadcrumb__title">
    <div class="breadcrumb__wrapper wrapper">
     <h2 class="breadcrumb__title visuallyhidden" id="breadcrumb__title">Breadcrumb</h2>
     <ul itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb__lst js-breadcrumb__lst-224">
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem" class="breadcrumb__item"><span itemprop="name">Home</span>
       <meta itemprop="position" content="1"></li>
     </ul>
    </div>
   </nav>
   <footer class="footer" aria-labelledby="footer__title">
    <h1 class="footer__title visuallyhidden" id="footer__title">Footer</h1>
    <div class="footer__wrapper wrapper">
     <div class="footer__contact">
      <h2 class="footer__subtitle">Kontakt</h2>
      <p>backslash AG
       <br>
       Zürcherstrasse 300
       <br>
       8500 Frauenfeld</p>
      <p><a href="tel:+41527235840" title="Hauptnummer backslash AG anrufen"><span class="visuallyhidden">Tel. </span>+41&nbsp;52&nbsp;723&nbsp;58&nbsp;40</a></p>
      <p><a href="https://www.backslash.ch/route/cms-index-redirectEmailLink/email/bWFpbHRvJTNBaW5mbyU0MGJhY2tzbGFzaCUyRWNo" target="_blank" data-email-link="bWFpbHRvJTNBaW5mbyU0MGJhY2tzbGFzaCUyRWNo" rel="nofollow noopener">info<span class="none" data-nosnippet aria-hidden="true">NULL</span>@backslash.ch</a></p>
     </div>
     <div class="footer__services">
      <h2 class="footer__subtitle">Mehr zu unseren</h2>
      <ul class="footer__link-lst reset">
       <li><a href="https://www.backslash.ch/angebot/produkte.html/15">Produkten</a></li>
       <li><a href="https://www.backslash.ch/angebot/dienstleistungen.html/16">Dienstleistungen</a></li>
       <li><a href="https://www.backslash.ch/referenzen/branchen.html/32">Referenzen</a></li>
       <li><a href="https://www.backslash.ch/agentur/aktuelles/news.html/48">News-Meldungen</a></li>
       <li><a href="https://www.backslash.ch/agentur/agentur/team.html/39">Mitarbeitenden</a></li>
       <li><a href="https://www.backslash.ch/angebot/dienstleistungen/support.html/29">Support-Leistungen</a></li>
       <li><a href="https://www.backslash.ch/agentur/agentur/kontakt.html/46">Kontaktmöglichkeiten</a></li>
      </ul>
     </div>
     <div class="footer__sm">
      <h2 class="footer__subtitle">ISO zertifiziert</h2>
      <img class="footer__iso-logo" src="/public/upload/assets/5730/attesta-iso-label_27001-weiss.png" alt="Anerkannte Zertifizierungsstelle ISO 27001" width="224" height="224">
      <h2 class="footer__subtitle">Social Media</h2>
      <ul class="footer__link-lst footer__link-lst--row reset">
       <li><a href="https://bsky.app/profile/backslashag.bsky.social" target="_blank" rel="noopener"><i class="fa-brands fa-bluesky fa-fw"></i><span class="visuallyhidden"> Bluesky</span></a></li>
       <li><a href="https://www.facebook.com/backslashag" target="_blank" rel="noopener"><i class="fab fa-facebook fa-fw"></i><span class="visuallyhidden"> Facebook</span></a></li>
       <li><a href="https://twitter.com/backslashag" target="_blank" rel="noopener"><i class="fab fa-x-twitter fa-fw"></i><span class="visuallyhidden"> X aka. Twitter</span></a></li>
       <li><a href="https://www.instagram.com/backslash_ag/" target="_blank" rel="noopener"><i class="fab fa-instagram fa-fw"></i><span class="visuallyhidden"> Instagram</span></a></li>
      </ul>
     </div>
     <div class="footer__copyright">
      <h2 class="footer__subtitle">Impressum &amp; Disclaimer</h2>
      <ul class="footer__link-lst reset">
       <li><a href="https://www.backslash.ch/services/impressum.html/52">Impressum</a></li>
       <li><a href="https://www.backslash.ch/services/datenschutz.html/53">Datenschutz</a></li>
       <li><a href="javascript:;" onclick="window.CookieConsent.showPreferences();">Cookie-Einstellungen</a></li>
      </ul>
      <p>Website powered by <a href="http://www.govis.ch" target="blank">GOViS</a></p>
      <p class="footer__copyright-text">© 2026 by backslash</p>
     </div>
    </div>
   </footer>
  </div>
  <script>
    globalThis.govis.module.search.highlight.highlightByAnchor(
        'main',
        'mark',
        'highlight'
    );
</script>
  <script>window.addEventListener('load', function() {
    const el = document.querySelector('[data-markjs]');
    if (el) {
        el.style.outline = 'none';
        el.setAttribute('tabindex', '0');
        window.addEventListener('scrollend',()=>el.focus(),{once:true});
        el.scrollIntoView({behavior: 'smooth'});
        el.dispatchEvent(new CustomEvent('govisElementScrollIntoView',{detail:{},bubbles:true}));
    }
});</script>
  <a href="https://www.backslash.ch/route/core-hp/page/8" class="no-icon" aria-hidden="true" tabindex="-1"><!-- open positions --></a>
  <script type="text/plain" data-category="analytics">
(()=>{
    const init = () => {
        window._paq = window._paq || [];
        /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
        window._paq.push(["setDocumentTitle", document.domain + "/" + document.title]);window._paq.push(['trackPageView']);
        window._paq.push(['enableLinkTracking']);
        window._paq.push(['rememberConsentGiven']);

        const u="https://stat-backslash.backslash.ch/matomo.";
        window._paq.push(['setTrackerUrl', u+'php']);
        window._paq.push(['setSiteId', '90']);
        window._paq.push(['setSecureCookie', true]);
        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
        g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'js'; s.parentNode.insertBefore(g,s);
    };
    document.readyState !== 'loading' ? init() : document.addEventListener('DOMContentLoaded', init);
})();
</script>
  <script src="/public/templates/47/1771-theme-switch_4654-custom-backslash.js"></script>
  <script>
(()=>{"use strict";function e(e,t){for(let o=0;o<t.length;o++)e.setAttribute(t[o].name,t[o].value)}var t,o,n;n=(o=(t=globalThis.govis||(globalThis.govis={})).module||(t.module={})).cookieconsent||(o.cookieconsent={}),Object.assign(n,{init:(t,o)=>{window.addEventListener("load",(()=>{if(window.self!==window.top)return;const o=(null==t?void 0:t.cometOptionalButtons)||{};delete t.cometOptionalButtons;const n=()=>globalThis.CookieConsent,s=e=>{let{blockId:t}=e;return document.querySelector(`.js-thirdparty-service-${t}`)},r=()=>globalThis.govisCookieConsentServices||{},i=e=>{(e=>{for(let t=e.length-1;t>=0;t--)s(e[t])||e.splice(t,1)})(e),e.forEach((e=>s(e).removeAttribute("hidden")))},c=()=>{Object.entries(r()).forEach((e=>{let[t,o]=e;return i(o)}))};c();const l=(t,o)=>{const n=t.querySelector("#js-thirdparty-service--content"),s=t.querySelector(".js-thirdparty-service-notification-block");s.innerHTML=n&&n.textContent||"";for(let t=0;t<o.length;t++){const n=document.createElement("script");e(n,o[t].attributes),n.textContent=o[t].textContent,s.appendChild(n)}},a=()=>{const e=globalThis.CookieConsent.getUserPreferences().acceptedCategories,t=document.querySelectorAll("[data-css-cookiecategory]");for(let o=t.length-1;o>=0;o--){const n=t[o];if(e.includes(n.dataset.cssCookiecategory)){const e=document.createElement("div");e.innerHTML=n.innerHTML,document.head.appendChild(e.querySelector("link")),n.remove()}}Object.entries(r()).forEach((e=>{let[t,o]=e;i(o);const r=n();for(let e=o.length-1;e>=0;e--)r.acceptedService(o[e].service,t)&&(l(s(o[e]),o[e].scripts||[]),o.splice(e,1))}))};t.onModalShow=function(e){let{modalName:t}=e;var n,s;const r="consentModal"==t?"cm":"preferencesModal"==t?"pm":"",i=o[t]||{};for(let e in i)null===(s=null===(n=document.querySelector(`.${r}-wrapper [data-role="${e}"]`))||void 0===n?void 0:n.classList)||void 0===s||s.add(`${r}__btn--secondary`)},t.onChange=a,t.onConsent=a,n().run(t),document.addEventListener("govisProcessCookieConsent",(()=>{c();const e=n(),t=e.getConfig();e.reset(),e.run(t)}))})),o>0&&setTimeout(globalThis.CookieConsent.show,o)}})})();
globalThis.govis.module.cookieconsent.init({
    root: '#cc-root-wrapper',
    cometOptionalButtons: {
        consentModal: {
            
            necessary: 1,
        },preferencesModal: {
            
            
        },},
    disablePageInteraction: false,
    hideFromBots: true,
    cookie: {
        name: 'cc_cookie',
        expiresAfterDays: (acceptType) => {
            return 182;
        }
    },
    autoClearCookies: true,
    revision: 1202508121108,
    guiOptions: {
    consentModal: {
        layout: 'bar inline',
            position: 'bottom '.trim(),
            flipButtons: false,
            equalWeightButtons: true},
        preferencesModal: {
        layout: 'box',
            position: '',
            flipButtons: false,
            equalWeightButtons: true}
    },
    categories: {necessary: {
                enabled: true,
                readOnly: true},font: {
                enabled: false,
                readOnly: false},analytics: {
                enabled: false,
                readOnly: false,
                autoClear: {
                    cookies: [{name: /_pk.*/}]
                }},thirdpartycontent: {
                enabled: false,
                readOnly: false,
                services: {general: {
                        label: 'Externe Inhalte'
                    },gmaps: {
                        label: 'Karten von Google Maps'
                    },vimeo: {
                        label: 'vimeo Videos'
                    },youtube: {
                        label: 'Youtube Videos'
                    }}}},
    language: {
        default: 'de',
        translations: {
            de: {
                consentModal: {
                    title: "Datenschutzeinstellungen",
                        description: "Wir verwenden Cookies und andere Technologien auf unserer Website. Einige von ihnen sind essenziell, während andere uns helfen, diese Website und Ihre Erfahrung zu verbessern. Personenbezogene Daten können verarbeitet werden (z. B. IP-Adressen), z. B. für personalisierte Anzeigen und Inhalte oder Anzeigen- und Inhaltsmessung. Weitere Informationen über die Verwendung Ihrer Daten finden Sie in unserer Datenschutzerklärung. Sie können Ihre Auswahl jederzeit unter Einstellungen widerrufen oder anpassen."
                        ,acceptAllBtn: 'Alle akzeptieren',acceptNecessaryBtn: 'Nur notwendige akzeptieren',showPreferencesBtn: 'Einstellungen',footer: `<a href="https://www.backslash.ch/services/datenschutz.html/53">Datenschutz</a>
                            <a href="https://www.backslash.ch/services/impressum.html/52">Impressum</a>`
                },
                preferencesModal: {
                    title: "Cookie-Einstellungen",
                        savePreferencesBtn: 'Einstellungen speichern',
                        acceptAllBtn: 'Alle akzeptieren',
                        acceptNecessaryBtn: 'Alle ablehnen',
                        closeIconLabel: 'Fenster schliessen',
                    sections: [
                        
                        {
                                title: 'Notwendige Cookies',
                                description: 'Diese\x20Cookies\x20sind\x20f\xFCr\x20das\x20ordnungsgem\xE4sse\x20Funktionieren\x20dieser\x20Website\x20unerl\xE4sslich.\x20Ohne\x20diese\x20Cookies\x20w\xFCrde\x20die\x20Website\x20nicht\x20richtig\x20funktionieren.',
                                linkedCategory: 'necessary'},{
                                title: 'Webschriften',
                                description: 'Wir\x20verwenden\x20spezielle\x20Schriftarten,\x20deren\x20Aufrufe\x20zwecks\x20\xDCberpr\xFCfung\x20der\x20Einhaltung\x20von\x20Lizenzbestimmungen\x20von\x20externen\x20Anbietern\x20aufgezeichnet\x20werden.',
                                linkedCategory: 'font'},{
                                title: 'Leistungs- und Analyse-Cookies',
                                description: 'Statistik\x2DCookies\x20helfen\x20Webseiten\x2DBesitzern\x20zu\x20verstehen,\x20wie\x20Besucher\x20mit\x20Webseiten\x20interagieren,\x20indem\x20Informationen\x20anonym\x20gesammelt\x20und\x20gemeldet\x20werden.',
                                linkedCategory: 'analytics'},{
                                title: 'Inhalt von externen Quellen',
                                description: 'Auf\x20dieser\x20Webseite\x20werden\x20Inhalte\x20von\x20externen\x20Seiten\x20eingebunden.\x20Dies\x20k\xF6nnen\x20Videos,\x20Karten,\x20Beitr\xE4ge\x20aus\x20Social\x20Media,\x20Veranstaltungskalender,\x20Stellenangebote,\x20usw.\x20sein.\x20In\x20der\x20Regel\x20verwenden\x20diese\x20Dienste\x20Tracking\x2DFunktionen\x20mit\x20Cookies.',
                                linkedCategory: 'thirdpartycontent',
                                cookieTable: {
                                    headers: {
                                        name: "Cookie",
                                        service: "Anbieter",
                                        description: "Beschreibung"
                                    },
                                    body: [{
                                        name: "im_general",
                                        service: "Externe Inhalte",
                                        description: "Auf\x20dieser\x20Webseite\x20werden\x20Inhalte\x20von\x20anderen\x20Anbietern\x20verwendet.\x20Eine\x20Auflistung\x20der\x20Dienste\x20finden\x20Sie\x20in\x20unserer\x20Datenschutzerkl\xE4rung."
                                    },{
                                        name: "im_gmaps",
                                        service: "Karten von Google Maps",
                                        description: "Auf\x20dieser\x20Webseite\x20werden\x20Karten\x20von\x20Google\x20Maps\x20ver\xF6ffentlicht.\x20Informationen\x20zur\x20Verarbeitung\x20von\x20Daten\x20finden\x20Sie\x20unter\x20https\x3A\x2F\x2Fpolicies.google.com\x2Fprivacy"
                                    },{
                                        name: "im_vimeo",
                                        service: "vimeo Videos",
                                        description: "Auf\x20dieser\x20Webseite\x20werden\x20Inhalte\x20der\x20Video\x2DPlattform\x20vimeo.com\x20ver\xF6ffentlicht.\x20Informationen\x20zur\x20Verarbeitung\x20von\x20Daten\x20finden\x20Sie\x20unter\x20https\x3A\x2F\x2Fvimeo.com\x2Fprivacy"
                                    },{
                                        name: "im_youtube",
                                        service: "Youtube Videos",
                                        description: "Auf\x20dieser\x20Webseite\x20werden\x20Inhalte\x20der\x20Video\x2DPlattform\x20youtube.com\x20ver\xF6ffentlicht.\x20Informationen\x20zur\x20Verarbeitung\x20von\x20Daten\x20finden\x20Sie\x20unter\x20https\x3A\x2F\x2Fpolicies.google.com\x2Fprivacy"
                                    }]
                                }}
                    ]
                }
            }
        }
    }
});
</script>
 </body>
</html>