{"id":4957,"date":"2026-03-04T21:35:02","date_gmt":"2026-03-04T21:35:02","guid":{"rendered":"https:\/\/tadro.at\/?page_id=4957"},"modified":"2026-03-16T13:54:38","modified_gmt":"2026-03-16T13:54:38","slug":"produkte","status":"publish","type":"page","link":"https:\/\/tadro.at\/en\/produkte\/","title":{"rendered":"Produkte"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"4957\" class=\"elementor elementor-4957\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d025d70 e-flex e-con-boxed parallax_section_no qode_elementor_container_no e-con e-parent\" data-id=\"d025d70\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34420a9 elementor-widget elementor-widget-html\" data-id=\"34420a9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =======================\r\nTADRO PRODUCTS PAGE (ABOUT + CATALOG + FILTER + SEARCH)\r\nPaste into a Custom HTML block on the Products page\r\n======================= -->\r\n\r\n<section class=\"tadro-about\" aria-label=\"\u00dcber Tadro\">\r\n  <div class=\"tadro-about__inner\">\r\n\r\n    <!-- HERO IMAGE -->\r\n    <div class=\"tadro-about__hero\">\r\n      <img decoding=\"async\" src=\"https:\/\/tadro.at\/wp-content\/uploads\/2026\/03\/hero-about.png\" alt=\"Tadro Qualit\u00e4t\">\r\n    <\/div>\r\n\r\n    <h1 class=\"tadro-about__title\">Produkte<\/h1>\r\n\r\n    <p class=\"tadro-about__lead\">\r\n      TADRO ist eine \u00f6sterreichische Premium-Marke f\u00fcr Nahrungserg\u00e4nzungsmittel und funktionelle Gesundheitsl\u00f6sungen.\r\n    <\/p>\r\n\r\n    <p class=\"tadro-about__p\">\r\n      Wir arbeiten mit \u00c4rzt:innen, Pharmazeut:innen und Ern\u00e4hrungswissenschaftler:innen zusammen,\r\n      um moderne, alltagstaugliche Formulierungen zu schaffen.\r\n    <\/p>\r\n\r\n    <p class=\"tadro-about__p\">\r\n      Unsere Mission ist es, Produkte zu entwickeln, die wirksam, vertr\u00e4glich,\r\n      verst\u00e4ndlich und vertrauensw\u00fcrdig sind.\r\n    <\/p>\r\n\r\n    <div class=\"tadro-about__divider\"><\/div>\r\n\r\n    <!-- CATALOG HEADER -->\r\n    <section class=\"tadro-favs\" aria-label=\"Produkte \u2013 Katalog\">\r\n      <div class=\"tadro-favs__inner\">\r\n\r\n        <div class=\"tadro-favs__eyebrow\">Katalog<\/div>\r\n        <h2 class=\"tadro-favs__title\">Alle Produkte<\/h2>\r\n\r\n        <!-- FILTER BAR -->\r\n        <div class=\"tadro-filter\" role=\"search\">\r\n          <div class=\"tadro-filter__row\">\r\n            <div class=\"tadro-filter__field\">\r\n              <label class=\"tadro-filter__label\" for=\"tadroSearch\">Suche<\/label>\r\n              <input id=\"tadroSearch\" class=\"tadro-filter__input\" type=\"search\" placeholder=\"Produktname suchen\u2026\">\r\n            <\/div>\r\n\r\n            <div class=\"tadro-filter__field\">\r\n              <label class=\"tadro-filter__label\" for=\"tadroCategory\">Kategorie<\/label>\r\n              <select id=\"tadroCategory\" class=\"tadro-filter__select\">\r\n                <option value=\"\">Alle Kategorien<\/option>\r\n              <\/select>\r\n            <\/div>\r\n\r\n            <button id=\"tadroReset\" class=\"tadro-filter__btn\" type=\"button\">Zur\u00fccksetzen<\/button>\r\n          <\/div>\r\n\r\n          <div class=\"tadro-filter__meta\">\r\n            <span id=\"tadroCount\">\u2014<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- GRID -->\r\n        <div class=\"tadro-favs__grid\" id=\"tadroGrid\">\r\n          <div class=\"tadro-favs__status\" id=\"tadroStatus\">Lade Produkte\u2026<\/div>\r\n        <\/div>\r\n\r\n      <\/div>\r\n    <\/section>\r\n\r\n  <\/div>\r\n<\/section>\r\n\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Cinzel+Decorative:wght@400&display=swap');\r\n\r\n:root{\r\n  --tadro-bg:#f6f0e8;\r\n  --tadro-bg-2:#f1e7da;\r\n  --tadro-ink:#402d1d;\r\n  --tadro-gold:#d8c08a;\r\n}\r\n\r\n\/* ============== ABOUT (TOP) ============== *\/\r\n.tadro-about{\r\n  width:100vw;\r\n  margin-left:calc(50% - 50vw);\r\n  background:var(--tadro-bg);\r\n  padding:clamp(40px,6vw,90px) 0;\r\n}\r\n.tadro-about__inner{\r\n  width:min(1100px,92vw);\r\n  margin:0 auto;\r\n}\r\n.tadro-about__hero{ margin-bottom:30px; }\r\n.tadro-about__hero img{\r\n  width:100%;\r\n  height:400px;\r\n  object-fit:cover;\r\n  border-radius:8px;\r\n}\r\n.tadro-about__title{\r\n  font-family:'Cinzel Decorative',serif;\r\n  font-size:clamp(34px,4vw,64px);\r\n  letter-spacing:.16em;\r\n  color:var(--tadro-ink);\r\n  margin:0 0 20px;\r\n}\r\n.tadro-about__lead,\r\n.tadro-about__p{\r\n  font-family:'Cinzel Decorative',serif;\r\n  color:rgba(64,45,29,.88);\r\n  line-height:1.95;\r\n  font-size:15px;\r\n  margin:0 0 14px;\r\n  max-width: 980px;\r\n}\r\n.tadro-about__divider{\r\n  height:1px;\r\n  background:linear-gradient(90deg,transparent,var(--tadro-gold),transparent);\r\n  margin:30px 0;\r\n}\r\n\r\n\/* ============== PRODUCTS SECTION ============== *\/\r\n.tadro-favs{\r\n  background: var(--tadro-bg-2);\r\n  border-radius: 14px;\r\n  padding: clamp(42px, 5vw, 80px) 0;\r\n  box-shadow: 0 18px 50px rgba(0,0,0,.06);\r\n}\r\n.tadro-favs__inner{\r\n  width: min(1100px, 92vw);\r\n  margin: 0 auto;\r\n  text-align: center;\r\n}\r\n.tadro-favs__eyebrow{\r\n  font-family: 'Cinzel Decorative', serif;\r\n  font-weight: 400;\r\n  letter-spacing: .18em;\r\n  color: rgba(64,45,29,0.55);\r\n  margin: 0 0 10px;\r\n  font-size: 16px;\r\n  text-transform: none !important;\r\n}\r\n.tadro-favs__title{\r\n  font-family: 'Cinzel Decorative', serif;\r\n  font-weight: 400;\r\n  letter-spacing: .16em;\r\n  color: var(--tadro-ink);\r\n  margin: 0 0 clamp(18px, 2.5vw, 34px);\r\n  font-size: clamp(28px, 3.1vw, 58px);\r\n  text-transform: none !important;\r\n}\r\n\r\n\/* Filter bar *\/\r\n.tadro-filter{\r\n  width: min(860px, 100%);\r\n  margin: 0 auto clamp(26px, 3vw, 40px);\r\n  text-align: left;\r\n  background: rgba(255,255,255,.42);\r\n  border: 1px solid rgba(64,45,29,.12);\r\n  border-radius: 14px;\r\n  padding: 18px;\r\n  box-shadow: 0 10px 30px rgba(0,0,0,.04);\r\n}\r\n.tadro-filter__row{\r\n  display: grid;\r\n  grid-template-columns: 1.4fr 1fr auto;\r\n  gap: 14px;\r\n  align-items: end;\r\n}\r\n.tadro-filter__field{ display:flex; flex-direction:column; gap:6px; }\r\n.tadro-filter__label{\r\n  font-family: 'Cinzel Decorative', serif;\r\n  letter-spacing: .12em;\r\n  color: rgba(64,45,29,0.75);\r\n  font-size: 12px;\r\n}\r\n.tadro-filter__input,\r\n.tadro-filter__select{\r\n  font-family: 'Cinzel Decorative', serif;\r\n  letter-spacing: .06em;\r\n  color: var(--tadro-ink);\r\n  background: rgba(255,255,255,.62);\r\n  border: 1px solid rgba(64,45,29,.18);\r\n  border-radius: 12px;\r\n  padding: 13px 14px;\r\n  outline: none;\r\n}\r\n.tadro-filter__input:focus,\r\n.tadro-filter__select:focus{\r\n  border-color: rgba(216,192,138,.95);\r\n  box-shadow: 0 0 0 3px rgba(216,192,138,.25);\r\n}\r\n.tadro-filter__btn{\r\n  font-family: 'Cinzel Decorative', serif;\r\n  letter-spacing: .10em;\r\n  color: var(--tadro-ink);\r\n  background: rgba(255,255,255,.62);\r\n  border: 1px solid rgba(64,45,29,.18);\r\n  border-radius: 999px;\r\n  padding: 12px 18px;\r\n  cursor: pointer;\r\n  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;\r\n}\r\n.tadro-filter__btn:hover{\r\n  transform: translateY(-1px);\r\n  border-color: rgba(216,192,138,.95);\r\n  box-shadow: 0 10px 20px rgba(0,0,0,.06);\r\n}\r\n.tadro-filter__meta{\r\n  margin-top: 10px;\r\n  font-family: 'Cinzel Decorative', serif;\r\n  letter-spacing: .08em;\r\n  color: rgba(64,45,29,.62);\r\n  font-size: 12px;\r\n}\r\n\r\n\/* \u2705 GRID: 3 PRODUCTS PER ROW (desktop) *\/\r\n.tadro-favs__grid{\r\n  width: 100%;\r\n  margin: 0 auto;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, minmax(0, 1fr));\r\n  gap: clamp(26px, 2.6vw, 46px);\r\n  align-items: end;\r\n  justify-items: center;\r\n}\r\n.tadro-favs__item{\r\n  width: 100%;\r\n  max-width: 320px;\r\n  text-align: center;\r\n}\r\n.tadro-favs__link{\r\n  display: inline-block;\r\n  text-decoration: none;\r\n}\r\n.tadro-favs__img{\r\n  width: clamp(190px, 15vw, 245px);\r\n  height: auto;\r\n  display: block;\r\n  margin: 0 auto 18px;\r\n  background: transparent !important;\r\n  box-shadow: none !important;\r\n  border: 0 !important;\r\n  filter: drop-shadow(0 18px 28px rgba(0,0,0,0.14));\r\n  transition: transform .18s ease, filter .18s ease;\r\n}\r\n.tadro-favs__link:hover .tadro-favs__img{\r\n  transform: translateY(-4px);\r\n  filter: drop-shadow(0 22px 34px rgba(0,0,0,0.18));\r\n}\r\n.tadro-favs__name{\r\n  font-family: 'Cinzel Decorative', serif;\r\n  font-weight: 400;\r\n  letter-spacing: .12em;\r\n  text-transform: uppercase;\r\n  color: rgba(64,45,29,0.85);\r\n  font-size: 16px;\r\n  line-height: 1.35;\r\n  margin: 0;\r\n}\r\n.tadro-favs__status{\r\n  grid-column: 1 \/ -1;\r\n  color: rgba(64,45,29,0.7);\r\n  font-family: 'Cinzel Decorative', serif;\r\n  letter-spacing: .08em;\r\n  padding: 10px 0;\r\n  text-align: center;\r\n}\r\n\r\n\/* ============== RESPONSIVE ============== *\/\r\n@media (max-width: 1024px){\r\n  .tadro-favs__grid{\r\n    grid-template-columns: repeat(2, minmax(0, 1fr));\r\n  }\r\n  .tadro-filter__row{\r\n    grid-template-columns: 1fr 1fr;\r\n  }\r\n  #tadroReset{\r\n    grid-column: 1 \/ -1;\r\n    justify-self: start;\r\n  }\r\n  .tadro-about__hero img{\r\n    height: 300px;\r\n  }\r\n}\r\n\r\n@media (max-width: 767px){\r\n  .tadro-favs__grid{\r\n    grid-template-columns: 1fr;\r\n  }\r\n  .tadro-filter__row{\r\n    grid-template-columns: 1fr;\r\n  }\r\n  .tadro-favs__img{\r\n    width: 235px;\r\n  }\r\n  .tadro-about__hero img{\r\n    height:260px;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<script>\r\n(async function(){\r\n  const grid = document.getElementById(\"tadroGrid\");\r\n  const statusEl = document.getElementById(\"tadroStatus\");\r\n  const searchEl = document.getElementById(\"tadroSearch\");\r\n  const categoryEl = document.getElementById(\"tadroCategory\");\r\n  const resetEl = document.getElementById(\"tadroReset\");\r\n  const countEl = document.getElementById(\"tadroCount\");\r\n  if(!grid || !statusEl || !searchEl || !categoryEl || !resetEl || !countEl) return;\r\n\r\n  const PER_PAGE = 100;\r\n  const MAX_PAGES = 5;\r\n\r\n  let allProducts = [];\r\n\r\n  function cleanText(html){\r\n    return String(html || \"\").replace(\/<[^>]*>\/g, \"\").trim();\r\n  }\r\n  function getImg(p){\r\n    return (p.images && p.images[0] && p.images[0].src) ? p.images[0].src : \"\";\r\n  }\r\n\r\n  \/\/ Build candidate base paths from current URL\r\n  function buildCandidateBases(){\r\n    const path = window.location.pathname.replace(\/\\\/+$\/, \"\");\r\n    const parts = path.split(\"\/\").filter(Boolean);\r\n\r\n    \/\/ Try: \"\" (root), then progressively shorter prefixes from the current path\r\n    const candidates = new Set();\r\n    candidates.add(\"\"); \/\/ root install\r\n\r\n    \/\/ Example: \/demo\/tadro\/produkte -> tries \/demo\/tadro, \/demo\r\n    if(parts.length >= 2) candidates.add(\"\/\" + parts.slice(0,2).join(\"\/\"));\r\n    if(parts.length >= 1) candidates.add(\"\/\" + parts.slice(0,1).join(\"\/\"));\r\n\r\n    \/\/ also try full first 3 segments if you have deeper installs\r\n    if(parts.length >= 3) candidates.add(\"\/\" + parts.slice(0,3).join(\"\/\"));\r\n\r\n    return Array.from(candidates);\r\n  }\r\n\r\n  async function probeBase(base){\r\n    const url = `${base}\/wp-json\/wc\/store\/v1\/products?per_page=1`;\r\n    const res = await fetch(url, { credentials: \"same-origin\" });\r\n    if(!res.ok) return null;\r\n    const data = await res.json();\r\n    return Array.isArray(data) ? base : null;\r\n  }\r\n\r\n  async function detectBase(){\r\n    const bases = buildCandidateBases();\r\n    for(const base of bases){\r\n      try{\r\n        const ok = await probeBase(base);\r\n        if(ok !== null) return ok;\r\n      } catch(e){}\r\n    }\r\n    return null;\r\n  }\r\n\r\n  async function fetchProductsPage(base, page){\r\n    const url = `${base}\/wp-json\/wc\/store\/v1\/products?per_page=${PER_PAGE}&page=${page}&orderby=menu_order&order=asc`;\r\n    const res = await fetch(url, { credentials: \"same-origin\" });\r\n    if(!res.ok) throw new Error(`HTTP ${res.status} fetching products`);\r\n    return await res.json();\r\n  }\r\n\r\n  function populateCategoryDropdown(products){\r\n    const map = new Map();\r\n    for(const p of products){\r\n      for(const c of (p.categories || [])){\r\n        const slug = String(c.slug || \"\").trim();\r\n        const name = cleanText(c.name);\r\n        if(slug && !map.has(slug)) map.set(slug, name);\r\n      }\r\n    }\r\n    const cats = Array.from(map.entries()).sort((a,b)=>a[1].localeCompare(b[1], \"de\"));\r\n    categoryEl.innerHTML =\r\n      `<option value=\"\">Alle Kategorien<\/option>` +\r\n      cats.map(([slug,name]) => `<option value=\"${slug}\">${name}<\/option>`).join(\"\");\r\n  }\r\n\r\n  function matchesFilters(p){\r\n    const q = searchEl.value.trim().toLowerCase();\r\n    const selectedCat = categoryEl.value.trim().toLowerCase();\r\n\r\n    const name = cleanText(p.name).toLowerCase();\r\n    const shortDesc = cleanText(p.short_description).toLowerCase();\r\n    const desc = cleanText(p.description).toLowerCase();\r\n\r\n    const textMatch = !q || name.includes(q) || shortDesc.includes(q) || desc.includes(q);\r\n\r\n    let catMatch = true;\r\n    if(selectedCat){\r\n      catMatch = (p.categories || []).some(c => String(c.slug || \"\").toLowerCase() === selectedCat);\r\n    }\r\n    return textMatch && catMatch;\r\n  }\r\n\r\n  function render(){\r\n    const filtered = allProducts.filter(matchesFilters);\r\n    countEl.textContent = `${filtered.length} Produkt(e) gefunden`;\r\n\r\n    if(filtered.length === 0){\r\n      grid.innerHTML = `<div class=\"tadro-favs__status\">Keine Produkte gefunden.<\/div>`;\r\n      return;\r\n    }\r\n\r\n    grid.innerHTML = filtered.map(p => {\r\n      const name = cleanText(p.name);\r\n      const link = p.permalink || \"#\";\r\n      const img = getImg(p);\r\n      return `\r\n        <div class=\"tadro-favs__item\">\r\n          <a class=\"tadro-favs__link\" href=\"${link}\">\r\n            ${img ? `<img decoding=\"async\" class=\"tadro-favs__img\" src=\"${img}\" alt=\"${name}\" loading=\"lazy\">` : \"\"}\r\n            <p class=\"tadro-favs__name\">${name}<\/p>\r\n          <\/a>\r\n        <\/div>\r\n      `;\r\n    }).join(\"\");\r\n  }\r\n\r\n  function debounce(fn, wait){\r\n    let t; return (...args) => { clearTimeout(t); t = setTimeout(()=>fn(...args), wait); };\r\n  }\r\n  const rerender = debounce(render, 150);\r\n\r\n  searchEl.addEventListener(\"input\", rerender);\r\n  categoryEl.addEventListener(\"change\", render);\r\n  resetEl.addEventListener(\"click\", () => {\r\n    searchEl.value = \"\";\r\n    categoryEl.value = \"\";\r\n    render();\r\n  });\r\n\r\n  try{\r\n    statusEl.textContent = \"Lade Produkte\u2026\";\r\n\r\n    const BASE = await detectBase();\r\n    if(BASE === null){\r\n      throw new Error(\"Store API not reachable. wp-json might be blocked or base path unknown.\");\r\n    }\r\n\r\n    let loaded = [];\r\n    for(let page=1; page<=MAX_PAGES; page++){\r\n      const items = await fetchProductsPage(BASE, page);\r\n      if(!Array.isArray(items) || items.length === 0) break;\r\n      loaded = loaded.concat(items);\r\n      if(items.length < PER_PAGE) break;\r\n    }\r\n\r\n    allProducts = loaded;\r\n\r\n    if(allProducts.length === 0){\r\n      grid.innerHTML = `<div class=\"tadro-favs__status\">Keine Produkte gefunden.<\/div>`;\r\n      countEl.textContent = `0 Produkt(e) gefunden`;\r\n      return;\r\n    }\r\n\r\n    populateCategoryDropdown(allProducts);\r\n    render();\r\n\r\n  }catch(e){\r\n    console.error(\"Tadro Products error:\", e);\r\n    grid.innerHTML = `<div class=\"tadro-favs__status\">Fehler beim Laden der Produkte.<\/div>`;\r\n    countEl.textContent = `\u2014`;\r\n  }\r\n})();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Produkte TADRO ist eine \u00f6sterreichische Premium-Marke f\u00fcr Nahrungserg\u00e4nzungsmittel und funktionelle Gesundheitsl\u00f6sungen. Wir arbeiten mit \u00c4rzt:innen, Pharmazeut:innen und Ern\u00e4hrungswissenschaftler:innen zusammen, um moderne, alltagstaugliche Formulierungen zu schaffen. Unsere Mission ist es, Produkte zu entwickeln, die wirksam, vertr\u00e4glich, verst\u00e4ndlich und vertrauensw\u00fcrdig sind. Katalog Alle Produkte Suche Kategorie Alle Kategorien Zur\u00fccksetzen \u2014 Lade Produkte\u2026<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-4957","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/pages\/4957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/comments?post=4957"}],"version-history":[{"count":22,"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/pages\/4957\/revisions"}],"predecessor-version":[{"id":5345,"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/pages\/4957\/revisions\/5345"}],"wp:attachment":[{"href":"https:\/\/tadro.at\/en\/wp-json\/wp\/v2\/media?parent=4957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}