{"product_id":"landlerliebi","title":"CD «Ländlerliebi»","description":"\u003cp\u003e\u003cmeta charset=\"utf-8\"\u003e\u003cspan\u003eDer dritte und neuste Tonträger von Niklaus Hess, erschienen 2021, präsentiert \u003c\/span\u003e18 lüpfige Tänze aus eigener Feder. Mit viel Herzblut und musikalischer Spielfreude laden die 18 Eigenkompositionen zum Zuhören, Mitschunkeln und Tanzen ein.\u003c\/p\u003e\n\n\u003cdiv id=\"cd-player\"\u003e\n  \u003cbutton class=\"cd-toggle\" type=\"button\" aria-expanded=\"false\" aria-controls=\"cd-content\"\u003e\n    \u003cspan class=\"cd-heading\"\u003e\n      \u003cspan class=\"cd-title\"\u003e🎵 Hörproben\u003c\/span\u003e\n      \u003cspan class=\"cd-description\"\u003e\n        Höre in die Titel der CD hinein.\n      \u003c\/span\u003e\n    \u003c\/span\u003e\n\n    \u003csvg class=\"cd-chevron\" viewbox=\"0 0 24 24\" width=\"16\" height=\"16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"\u003e\n      \u003cpath d=\"m6 9 6 6 6-6\"\u003e\u003c\/path\u003e\n    \u003c\/svg\u003e\n  \u003c\/button\u003e\n\n  \u003cdiv id=\"cd-content\" class=\"cd-content\" hidden\u003e\n    \u003cdiv class=\"cd-tracks\"\u003e\u003c\/div\u003e\n  \u003c\/div\u003e\n\u003c\/div\u003e\n\n\u003cstyle\u003e\n\/* Äussere Box – neutrales Hellgrau *\/\n#cd-player {\n  font-family: inherit;\n  display: block !important;\n  height: auto !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  margin: 8px 0 !important;\n  padding: 10px 12px !important;\n  background: #F7F7F7;\n  border: 1px solid #E5E5E5;\n  border-radius: 12px;\n  color: #292929;\n}\n\n#cd-player * {\n  box-sizing: border-box;\n}\n\n\/* Aufklappbarer Titel *\/\n#cd-player .cd-toggle {\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex !important;\n  flex-direction: row !important;\n  align-items: center !important;\n  justify-content: space-between !important;\n  gap: 10px !important;\n  width: 100% !important;\n  height: auto !important;\n  min-height: 0 !important;\n  max-height: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: 0 !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  box-shadow: none !important;\n  color: inherit !important;\n  text-align: left !important;\n  cursor: pointer;\n  text-transform: none !important;\n  letter-spacing: normal !important;\n  line-height: normal !important;\n}\n\n\/* Titel und Beschreibung *\/\n#cd-player .cd-heading {\n  display: flex !important;\n  flex-direction: column !important;\n  align-items: flex-start !important;\n  justify-content: center !important;\n  gap: 2px !important;\n  width: auto !important;\n  min-width: 0;\n  height: auto !important;\n  min-height: 0 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n\/* Titel fett *\/\n#cd-player .cd-title {\n  display: block !important;\n  font-size: 16px !important;\n  font-weight: 700 !important;\n  line-height: 1.2 !important;\n  letter-spacing: 0 !important;\n  text-transform: none !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n#cd-player .cd-description {\n  display: block !important;\n  font-size: 12px !important;\n  font-weight: 400 !important;\n  line-height: 1.3 !important;\n  color: #777777 !important;\n  margin: 0 !important;\n  padding: 0 !important;\n}\n\n\/* Aufklapp-Pfeil *\/\n#cd-player .cd-chevron {\n  display: block !important;\n  flex: 0 0 16px !important;\n  width: 16px !important;\n  height: 16px !important;\n  min-width: 16px !important;\n  min-height: 16px !important;\n  margin: 0 !important;\n  padding: 0 !important;\n  transition: transform 0.25s ease;\n}\n\n#cd-player .cd-toggle[aria-expanded=\"true\"] .cd-chevron {\n  transform: rotate(180deg);\n}\n\n\/* Aufgeklappter Inhalt *\/\n#cd-player .cd-content {\n  padding-top: 12px;\n}\n\n#cd-player .cd-content[hidden] {\n  display: none !important;\n}\n\n\/* Einzelne Hörproben *\/\n#cd-player .track {\n  background: #FFFFFF;\n  border: 1px solid #EAEAEA;\n  border-radius: 9px;\n  padding: 10px 12px;\n  margin-bottom: 7px;\n}\n\n#cd-player .track:last-child {\n  margin-bottom: 0;\n}\n\n#cd-player .track-title {\n  font-size: 14px;\n  font-weight: 600;\n  line-height: 1.35;\n  margin-bottom: 7px;\n}\n\n\/* Audio-Player – neutrales Grau *\/\n#cd-player .player-bar {\n  display: flex !important;\n  flex-direction: row !important;\n  align-items: center !important;\n  gap: 11px;\n  height: 36px;\n  min-height: 36px;\n  padding: 0 12px;\n  background: #F0F0F0;\n  border-radius: 999px;\n}\n\n\/* Play-Button *\/\n#cd-player .play {\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex !important;\n  align-items: center !important;\n  justify-content: center !important;\n  position: static !important;\n  transform: none !important;\n  flex: 0 0 20px;\n  width: 20px;\n  height: 20px;\n  min-width: 20px;\n  min-height: 20px;\n  margin: 0 !important;\n  padding: 0 !important;\n  border: none !important;\n  border-radius: 0 !important;\n  background: transparent !important;\n  box-shadow: none !important;\n  line-height: 1 !important;\n  color: #292929;\n  cursor: pointer;\n}\n\n#cd-player .play:hover {\n  opacity: 0.6;\n}\n\n\/* Play- und Pause-Icons *\/\n#cd-player .play svg {\n  display: block !important;\n  position: static !important;\n  width: 16px;\n  height: 16px;\n  min-width: 16px;\n  min-height: 16px;\n  margin: 0 !important;\n  padding: 0 !important;\n  transform: none !important;\n  fill: currentColor;\n}\n\n\/* Zeitanzeige *\/\n#cd-player .time {\n  font-size: 11px;\n  font-weight: 400;\n  color: #444444;\n  white-space: nowrap;\n  font-variant-numeric: tabular-nums;\n  flex-shrink: 0;\n}\n\n#cd-player .separator {\n  color: #AAAAAA;\n  margin: 0 3px;\n}\n\n\/* Fortschrittsbalken *\/\n#cd-player .progress {\n  -webkit-appearance: none;\n  appearance: none;\n  flex: 1;\n  width: 100%;\n  min-width: 0;\n  height: 3px;\n  margin: 0;\n  padding: 0;\n  border: none;\n  border-radius: 10px;\n  outline: none;\n  cursor: pointer;\n  background: linear-gradient(\n    to right,\n    #292929 0%,\n    #292929 var(--progress, 0%),\n    #C9C9C9 var(--progress, 0%),\n    #C9C9C9 100%\n  );\n}\n\n#cd-player .progress::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  appearance: none;\n  width: 9px;\n  height: 9px;\n  border-radius: 50%;\n  background: #292929;\n  opacity: 0;\n}\n\n#cd-player .progress:hover::-webkit-slider-thumb,\n#cd-player .progress:focus-visible::-webkit-slider-thumb {\n  opacity: 1;\n}\n\n#cd-player .progress::-moz-range-thumb {\n  width: 9px;\n  height: 9px;\n  border: none;\n  border-radius: 50%;\n  background: #292929;\n}\n\n#cd-player audio {\n  display: none !important;\n}\n\n\/* Tastaturbedienung *\/\n#cd-player .play:focus-visible,\n#cd-player .progress:focus-visible,\n#cd-player .cd-toggle:focus-visible {\n  outline: 2px solid #777777;\n  outline-offset: 3px;\n}\n\n\/* Mobile *\/\n@media (max-width: 600px) {\n  #cd-player {\n    padding: 9px 11px !important;\n    border-radius: 11px;\n  }\n\n  #cd-player .cd-title {\n    font-size: 15px !important;\n    font-weight: 700 !important;\n  }\n\n  #cd-player .cd-description {\n    font-size: 11px !important;\n  }\n\n  #cd-player .cd-content {\n    padding-top: 11px;\n  }\n\n  #cd-player .track {\n    padding: 9px 10px;\n    margin-bottom: 6px;\n  }\n\n  #cd-player .track-title {\n    font-size: 12px;\n    margin-bottom: 6px;\n  }\n\n  #cd-player .player-bar {\n    height: 34px;\n    min-height: 34px;\n    padding: 0 11px;\n    gap: 9px;\n  }\n\n  #cd-player .play svg {\n    width: 15px;\n    height: 15px;\n    min-width: 15px;\n    min-height: 15px;\n  }\n}\n\u003c\/style\u003e\n\n\u003cscript\u003e\n(function () {\n  var root = document.getElementById('cd-player');\n\n  if (!root || root.dataset.ready) return;\n  root.dataset.ready = '1';\n\n  var toggle = root.querySelector('.cd-toggle');\n  var content = root.querySelector('.cd-content');\n  var container = root.querySelector('.cd-tracks');\n  var previewLimit = 30;\n\n  \/* Alle 18 Hörproben in der richtigen Reihenfolge *\/\n  var songs = [\n    [\n      'Ländlerliebi',\n      '01-Niklaus-Hess-Laendlerliebi-1.mp3',\n      '1791811567'\n    ],\n    [\n      'Schwyzerglück',\n      '02-Niklaus-Hess-Schwyzerglueck-1.mp3',\n      '1791811567'\n    ],\n    [\n      'Äntlibuecher Fletzete',\n      '03-Niklaus-Hess-Aentlibuecher-Fletzete.mp3',\n      '1791811566'\n    ],\n    [\n      'Wunderprächtig',\n      '04-Niklaus-Hess-Wunderpraechtig.mp3',\n      '1791811567'\n    ],\n    [\n      'Franz im Eurofieber',\n      '05-Niklaus-Hess-Franz-im-Eurofieber.mp3',\n      '1791811566'\n    ],\n    [\n      'Jugendtraum',\n      '06-Niklaus-Hess-Jugendtraum.mp3',\n      '1791811566'\n    ],\n    [\n      'Toggenburg retour',\n      '07-Niklaus-Hess-Toggenburg-retour.mp3',\n      '1791811567'\n    ],\n    [\n      'Chilbiländler',\n      '08-Niklaus-Hess-Chilbilaendler.mp3',\n      '1791811567'\n    ],\n    [\n      'I guete Händ',\n      '09-Niklaus-Hess-I-guete-Haend.mp3',\n      '1791811566'\n    ],\n    [\n      'Am Badwannaeraennae',\n      '10-Niklaus-Hess-Am-Badwannaeraennae.mp3',\n      '1791811566'\n    ],\n    [\n      'Halbsoschlimm',\n      '11-Niklaus-Hess-Halbsoschlimm.mp3',\n      '1791811567'\n    ],\n    [\n      'The Rusch Brothers',\n      '12-Niklaus-Hess-The-Rusch-Brothers.mp3',\n      '1791811567'\n    ],\n    [\n      's Friedensliecht',\n      '13-Niklaus-Hess-S-Friedensliecht.mp3',\n      '1791811567'\n    ],\n    [\n      'Heiweh-Stümpäli',\n      '14-Niklaus-Hess-Heiweh-Stuempaeli.mp3',\n      '1791811567'\n    ],\n    [\n      'Zum Müttertag',\n      '15-Niklaus-Hess-Zum-Muettertag.mp3',\n      '1791811567'\n    ],\n    [\n      'De Rigibähndler',\n      '16-Niklaus-Hess-De-Rigibaehndler.mp3',\n      '1791811567'\n    ],\n    [\n      'Gladae',\n      '17-Niklaus-Hess-Gladae.mp3',\n      '1791811567'\n    ],\n    [\n      'Umbruch',\n      '18-Niklaus-Hess-Umbruch.mp3',\n      '1791811567'\n    ]\n  ];\n\n  var baseUrl =\n    'https:\/\/cdn.shopify.com\/s\/files\/1\/1069\/6628\/6673\/files\/';\n\n  var playIcon =\n    '\u003csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\"\u003e' +\n    '\u003cpath d=\"M8 5.5a1 1 0 0 1 1.5-.86l10 6.5' +\n    'a1 1 0 0 1 0 1.72l-10 6.5' +\n    'A1 1 0 0 1 8 18.5z\"\/\u003e' +\n    '\u003c\/svg\u003e';\n\n  var pauseIcon =\n    '\u003csvg viewBox=\"0 0 24 24\" aria-hidden=\"true\"\u003e' +\n    '\u003crect x=\"6\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"\/\u003e' +\n    '\u003crect x=\"14\" y=\"4\" width=\"4\" height=\"16\" rx=\"1\"\/\u003e' +\n    '\u003c\/svg\u003e';\n\n  \/* Player für jeden Titel erstellen *\/\n  songs.forEach(function (song, index) {\n    var track = document.createElement('div');\n    track.className = 'track';\n\n    var number = String(index + 1).padStart(2, '0');\n\n    var title = document.createElement('div');\n    title.className = 'track-title';\n    title.textContent = number + ' · ' + song[0];\n\n    var player = document.createElement('div');\n    player.className = 'player-bar';\n\n    var button = document.createElement('button');\n    button.type = 'button';\n    button.className = 'play';\n    button.innerHTML = playIcon;\n    button.setAttribute(\n      'aria-label',\n      song[0] + ' abspielen'\n    );\n\n    var time = document.createElement('span');\n    time.className = 'time';\n\n    var current = document.createElement('span');\n    current.className = 'current';\n    current.textContent = '0:00';\n\n    var separator = document.createElement('span');\n    separator.className = 'separator';\n    separator.textContent = '\/';\n\n    var duration = document.createElement('span');\n    duration.className = 'duration';\n    duration.textContent = '0:30';\n\n    time.appendChild(current);\n    time.appendChild(separator);\n    time.appendChild(duration);\n\n    var bar = document.createElement('input');\n    bar.type = 'range';\n    bar.className = 'progress';\n    bar.min = '0';\n    bar.max = '100';\n    bar.value = '0';\n    bar.step = '0.1';\n    bar.setAttribute(\n      'aria-label',\n      'Fortschritt: ' + song[0]\n    );\n\n    var audio = document.createElement('audio');\n    audio.preload = 'metadata';\n    audio.src = baseUrl + song[1] + '?v=' + song[2];\n\n    player.appendChild(button);\n    player.appendChild(time);\n    player.appendChild(bar);\n\n    track.appendChild(title);\n    track.appendChild(player);\n    track.appendChild(audio);\n\n    container.appendChild(track);\n  });\n\n  var tracks = Array.from(\n    root.querySelectorAll('.track')\n  );\n\n  function formatTime(value) {\n    if (!Number.isFinite(value)) return '0:00';\n\n    var seconds = Math.floor(value);\n\n    return Math.floor(seconds \/ 60) + ':' +\n      String(seconds % 60).padStart(2, '0');\n  }\n\n  \/* Box öffnen und schliessen *\/\n  toggle.addEventListener('click', function () {\n    var isOpen =\n      toggle.getAttribute('aria-expanded') === 'true';\n\n    toggle.setAttribute(\n      'aria-expanded',\n      String(!isOpen)\n    );\n\n    content.hidden = isOpen;\n\n    if (isOpen) {\n      tracks.forEach(function (track) {\n        track.querySelector('audio').pause();\n      });\n    }\n  });\n\n  \/* Audio-Player steuern *\/\n  tracks.forEach(function (track) {\n    var audio = track.querySelector('audio');\n    var button = track.querySelector('.play');\n    var bar = track.querySelector('.progress');\n    var current = track.querySelector('.current');\n    var duration = track.querySelector('.duration');\n    var titleText =\n      track.querySelector('.track-title').textContent.trim();\n\n    var maxDuration = previewLimit;\n\n    function updateProgress() {\n      var position = Math.min(\n        audio.currentTime || 0,\n        maxDuration\n      );\n\n      var percent = maxDuration \u003e 0\n        ? position \/ maxDuration * 100\n        : 0;\n\n      bar.value = percent;\n      bar.style.setProperty(\n        '--progress',\n        percent + '%'\n      );\n\n      current.textContent = formatTime(position);\n    }\n\n    function updateDuration() {\n      maxDuration =\n        Number.isFinite(audio.duration) \u0026\u0026\n        audio.duration \u003e 0\n          ? Math.min(audio.duration, previewLimit)\n          : previewLimit;\n\n      duration.textContent = formatTime(maxDuration);\n      updateProgress();\n    }\n\n    button.addEventListener('click', function () {\n      if (audio.paused) {\n        tracks.forEach(function (other) {\n          if (other !== track) {\n            other.querySelector('audio').pause();\n          }\n        });\n\n        if (audio.currentTime \u003e= maxDuration) {\n          audio.currentTime = 0;\n        }\n\n        var result = audio.play();\n\n        if (result \u0026\u0026\n            typeof result.catch === 'function') {\n          result.catch(function () {\n            button.innerHTML = playIcon;\n            button.setAttribute(\n              'aria-label',\n              titleText + ' abspielen'\n            );\n          });\n        }\n      } else {\n        audio.pause();\n      }\n    });\n\n    audio.addEventListener('play', function () {\n      tracks.forEach(function (other) {\n        if (other !== track) {\n          other.querySelector('audio').pause();\n        }\n      });\n\n      button.innerHTML = pauseIcon;\n      button.setAttribute(\n        'aria-label',\n        titleText + ' pausieren'\n      );\n    });\n\n    audio.addEventListener('pause', function () {\n      button.innerHTML = playIcon;\n      button.setAttribute(\n        'aria-label',\n        titleText + ' abspielen'\n      );\n    });\n\n    audio.addEventListener(\n      'loadedmetadata',\n      updateDuration\n    );\n\n    audio.addEventListener(\n      'durationchange',\n      updateDuration\n    );\n\n    audio.addEventListener('timeupdate', function () {\n      if (audio.currentTime \u003e= maxDuration) {\n        audio.pause();\n        audio.currentTime = maxDuration;\n      }\n\n      updateProgress();\n    });\n\n    audio.addEventListener('ended', function () {\n      audio.currentTime = 0;\n      updateProgress();\n    });\n\n    bar.addEventListener('input', function () {\n      if (maxDuration \u003e 0) {\n        audio.currentTime = Math.min(\n          Number(bar.value) \/ 100 * maxDuration,\n          maxDuration\n        );\n\n        updateProgress();\n      }\n    });\n\n    updateProgress();\n  });\n})();\n\u003c\/script\u003e","brand":"LAEMU","offers":[{"title":"Default Title","offer_id":55074382676305,"sku":null,"price":27.5,"currency_code":"CHF","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1069\/6628\/6673\/files\/Landlerliebi_Cover.jpg?v=1790322367","url":"https:\/\/shop.laemu.ch\/products\/landlerliebi","provider":"LAEMU","version":"1.0","type":"link"}