<?php
/**
 * Domain to Twitter handle list
 * @var array $twitterHandles
 */
$twitterHandles = array(
  "24heures" => "@24heuresch",
  "bazonline" => "@bazonline",
  "bernerzeitung" => "@bernerzeitung",
  "berneroberlaender" => "@bernerzeitung",
  "langenthalertagblatt" => "@bernerzeitung",
  "thunertagblatt" => "@bernerzeitung",
  "derbund" => "@derbund",
  "landbote" => "@landbote",
  "lematin" => "@lematinch",
  "tagesanzeiger" => "@tagesanzeiger",
  "tdg" => "@tdgch",
  "zuonline" => "@zunterland",
  "zsz" => "@zszonline"
);

$servername = $_SERVER['SERVER_NAME'];

// Take server name apart
$serverNameArray = explode('.', $servername);

// Use individual parts, starting from the end of the string:
$tld = array_pop($serverNameArray);
$domain = array_pop($serverNameArray);

// Construct the new main domain
/** @var string $homeUrl */
$homeUrl = "https://www." . $domain . "." . $tld . "/";

// Twitter handle to use
$twitterHandle = $twitterHandles[$domain];

// Site name
$siteName = $domain . "." . $tld;
?>
<!doctype html>

<html lang="de">
<head>
  <meta charset="utf-8">
  <title>Diese Apps machen Sie fitter</title>

  

  

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="robots" content="index,follow">
  <meta name="description" itemprop="description"
        content="Digitales Apps können den Alltag von Sportlern erleichtern – sei es für die Navigation in den Bergen, beim Kalorienzählen oder beim Workout. Eine kleine Auswahl nützlicher Programme.">
  <meta name="author" content="Tages-Anzeiger">
  <meta name="keywords" content="Interaktiv, Visualisierung">
  <meta name="news_keywords"
    content="Interaktiv, Visualisierung">
  <meta name="publisher" content="Tamedia AG">
  <meta name="copyright" content="2019 Tamedia AG">
  <meta name="last-modified" itemprop="datePublished" content="2019-11-21T14:54:57.806Z">
  <meta name="date" content="2019-11-21T14:54:57.806Z">

  <link rel="canonical" href="<?= $homeUrl ?>27557873">

  <!-- Open Graph Metadata -->
  <meta property="og:title"
        content="Diese Apps machen Sie fitter">
  <meta property="og:description"
        content="Digitales Apps können den Alltag von Sportlern erleichtern – sei es für die Navigation in den Bergen, beim Kalorienzählen oder beim Workout. Eine kleine Auswahl nützlicher Programme.">
  <meta property="og:image"
        content="http://interaktiv.tagesanzeiger.ch/2019/sport-apps/teaser.jpg">
  <meta property="og:url"
        content="<?= $homeUrl ?>27557873">
  <meta property="og:locale"
        content="de_CH">
  <meta property="og:site_name"
        content="<?= $siteName ?>">
  <meta property="og:type" content="article">
  <!-- /Open Graph Metadata -->

  <!-- JSON-LD Schema -->
  <script type="application/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "url": "<?= $homeUrl ?>27557873",
      "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "<?= $homeUrl ?>27557873"
      },
      "headline": "Diese Apps machen Sie fitter",
      "thumbnailUrl": "http://interaktiv.tagesanzeiger.ch/2019/sport-apps/teaser.jpg",
      "image": {
        "@type": "ImageObject",
        "url": "http://interaktiv.tagesanzeiger.ch/2019/sport-apps/teaser.jpg"
      },
      "author": ["Tages-Anzeiger"],
      "creator": ["Tages-Anzeiger"],
      "dateModified": "2019-11-21T14:54:57.806Z",
      "datePublished": "2019-11-21T14:54:57.806Z",
      "keywords": ["interaktiv","visualisierung"],
      "publisher": {
        "@type": "Organization",
        "name": "Tamedia AG",
        "url": "https://www.tamedia.ch",
        "logo": {
          "@type": "ImageObject",
          "url": "https://www.tamedia.ch/assets/images/4/share-default-5f77c994.png"
        }
      },
      "description": "Digitales Apps können den Alltag von Sportlern erleichtern – sei es für die Navigation in den Bergen, beim Kalorienzählen oder beim Workout. Eine kleine Auswahl nützlicher Programme.",
      "isAccessibleForFree": "False",
      "articleSection": "interactives"
    }
  </script>
  <!-- /JSON-LD Schema -->

  <!-- Twitter Metadata -->
  <meta property="twitter:card"
        content="summary_large_image">
  <meta property="twitter:site"
        content="<?= $twitterHandle ?>">
  <meta property="twitter:creator"
        content="@ta_interaktiv">
  <meta property="twitter:title"
        content="Diese Apps machen Sie fitter">
  <meta property="twitter:description"
        content="Digitales Apps können den Alltag von Sportlern erleichtern – sei es für die Navigation in den Bergen, beim Kalorienzählen oder beim Workout. Eine kleine Auswahl nützlicher Programme.">
  <meta property="twitter:image:src"
        content="http://interaktiv.tagesanzeiger.ch/2019/sport-apps/teaser.jpg">
  <!-- /Twitter Metadata -->

  <meta name="viewport"
        content="width=device-width, initial-scale=1.0">

  <!-- Javascript Polyfill for legacy browsers -->
  <script
    src="https://polyfill.io/v3/polyfill.min.js?features=default,fetch,Array.prototype.findIndex,Array.prototype.find,Array.prototype.includes,IntersectionObserver,Object.entries,Object.values,Intl.~locale.de-CH,Intl.~locale.fr-CH">
  </script>

  
  <style>
    /*!
 * # Semantic UI 2.1.8 - Dimmer
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2015 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

    /*******************************
                Dimmer
    *******************************/

    .ui.dimmer {
      display: none;
      position: absolute;
      top: 0em !important;
      left: 0em !important;
      width: 100%;
      height: 100%;
      text-align: center;
      vertical-align: middle;
      background-color: rgba(0, 0, 0, 0.85);
      opacity: 0;
      line-height: 1;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
      -webkit-animation-duration: 0.5s;
      animation-duration: 0.5s;
      -webkit-transition: background-color 0.5s linear;
      transition: background-color 0.5s linear;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      will-change: opacity;
      z-index: 1000;
    }

    /* Loose Coupling */
    .ui.segment > .ui.dimmer {
      border-radius: inherit !important;
    }

    /*******************************
               Variations
    *******************************/

    /*--------------
          Page
    ---------------*/

    .ui.page.dimmer {
      position: fixed;
      -webkit-transform-style: '';
      transform-style: '';
      -webkit-perspective: 2000px;
      perspective: 2000px;
      -webkit-transform-origin: center center;
      transform-origin: center center;
    }

    body.dimmable > .dimmer {
      position: fixed;
    }

    /*--------------
        Blurring
    ---------------*/

    .blurring.dimmable > :not(.dimmer) {
      -webkit-filter: blur(0px) grayscale(0);
      filter: blur(0px) grayscale(0);
      -webkit-transition: 800ms filter ease;
      transition: 800ms filter ease;
    }

    .blurring.dimmed.dimmable > :not(.dimmer) {
      -webkit-filter: blur(5px) grayscale(0.7);
      filter: blur(5px) grayscale(0.7);
    }

    /* Dimmer Color */
    .blurring.dimmable > .dimmer {
      background-color: rgba(0, 0, 0, 0.6);
    }

    .blurring.dimmable > .inverted.dimmer {
      background-color: rgba(255, 255, 255, 0.6);
    }

    /*--------------
        Aligned
    ---------------*/

    .ui.dimmer > .top.aligned.content > * {
      vertical-align: top;
    }

    .ui.dimmer > .bottom.aligned.content > * {
      vertical-align: bottom;
    }

    /*--------------
        Inverted
    ---------------*/

    .ui.inverted.dimmer {
      background-color: rgba(255, 255, 255, 0.85);
    }

    .ui.inverted.dimmer > .content > * {
      color: #FFFFFF;
    }

    /*******************************
             Theme Overrides
    *******************************/

    /*******************************
            User Overrides
    *******************************/

    /*!
     * # Semantic UI 2.2.0 - Loader
     * http://github.com/semantic-org/semantic-ui/
     *
     *
     * Released under the MIT license
     * http://opensource.org/licenses/MIT
     *
     */

    /*******************************
                Loader
    *******************************/

    /* Standard Size */
    .ui.loader {
      display: none;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: 0px;
      text-align: center;
      z-index: 1000;
      -webkit-transform: translateX(-50%) translateY(-50%);
      transform: translateX(-50%) translateY(-50%);
    }

    /* Static Shape */
    .ui.loader:before {
      position: absolute;
      content: '';
      top: 0%;
      left: 50%;
      width: 100%;
      height: 100%;
      border-radius: 500rem;
      border: 0.2em solid rgba(0, 0, 0, 0.1);
    }

    /* Active Shape */
    .ui.loader:after {
      position: absolute;
      content: '';
      top: 0%;
      left: 50%;
      width: 100%;
      height: 100%;
      -webkit-animation: loader 0.6s linear;
      animation: loader 0.6s linear;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
      border-radius: 500rem;
      border-color: #767676 transparent transparent;
      border-style: solid;
      border-width: 0.2em;
      box-shadow: 0px 0px 0px 1px transparent;
    }

    /* Active Animation */
    @-webkit-keyframes loader {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    @keyframes loader {
      from {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
      }
      to {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
      }
    }

    .ui.loader:before,
    .ui.loader:after {
      width: 2rem;
      height: 2rem;
      margin: 0em 0em 0em -1rem;
    }

    .ui.huge.loader:before,
    .ui.huge.loader:after {
      width: 3.625rem;
      height: 3.625rem;
      margin: 0em 0em 0em -1.8125rem;
    }

    /*-------------------
          Coupling
    --------------------*/

    /* Show inside active dimmer */
    .ui.dimmer .loader {
      display: block;
    }

    /* Black Dimmer */
    .ui.dimmer .ui.loader {
      color: rgba(255, 255, 255, 0.9);
    }

    .ui.dimmer .ui.loader:before {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .ui.dimmer .ui.loader:after {
      border-color: #FFFFFF transparent transparent;
    }

    /* White Dimmer (Inverted) */
    .ui.inverted.dimmer .ui.loader {
      color: rgba(0, 0, 0, 0.87);
    }

    .ui.inverted.dimmer .ui.loader:before {
      border-color: rgba(0, 0, 0, 0.1);
    }

    .ui.inverted.dimmer .ui.loader:after {
      border-color: #767676 transparent transparent;
    }

    /*******************************
                States
    *******************************/

    .ui.loader.active,
    .ui.loader.visible {
      display: block;
    }

    .ui.loader.disabled,
    .ui.loader.hidden {
      display: none;
    }

    /*******************************
                Variations
    *******************************/

    /*-------------------
            Sizes
    --------------------*/

    .ui.inverted.dimmer .ui.loader,
    .ui.loader {
      width: 2rem;
      height: 2rem;
      font-size: 1em;
    }

    .ui.inverted.dimmer .ui.huge.loader,
    .ui.huge.loader {
      width: 3.625rem;
      height: 3.625rem;
      font-size: 1.4375em;
    }

    /*-------------------
           Inverted
    --------------------*/

    .ui.inverted.loader {
      color: rgba(255, 255, 255, 0.9);
    }

    .ui.inverted.loader:before {
      border-color: rgba(255, 255, 255, 0.15);
    }

    .ui.inverted.loader:after {
      border-top-color: #FFFFFF;
    }

  </style>
  

  
    <!-- Use Dimension Watcher -->
    <script src="https://files.newsnetz.ch/scripts/dimension_watcher.js"></script>
    <script src="https://interaktiv.tagesanzeiger.ch/static/iFrameSizeBroadcaster.min.js"></script>
  <style>
    body {
      max-width: 100vw;
    }
  </style>
  

  
    <!-- Use Autofit Script -->
    <script src="https://www.20min.ch/2010/JS/iframeAutofit.js"></script>
  

  <script>
    window.project = {
      buildTimestamp: 1574348087.687,
      version: "0.21.1",
    }
  </script>
<link href="assets/main.8026d54d.css" rel="stylesheet"></head>

<body>
<div id="app">
  
  <div class="ui active  page dimmer">
    <div class="ui huge loader">
    </div>
  </div>
  
</div>

<div id="paywall_container"></div>
<!-- /#paywall_container -->




<script type="text/javascript" src="assets/main.8026d54d.js"></script></body>
</html>
