{"id":9172,"date":"2026-04-19T08:59:41","date_gmt":"2026-04-19T08:59:41","guid":{"rendered":"https:\/\/klio-store.com\/?page_id=9172"},"modified":"2026-08-27T06:13:53","modified_gmt":"2026-08-27T06:13:53","slug":"order-together","status":"publish","type":"page","link":"https:\/\/klio-store.com\/en\/gemeinsam-bestellen\/","title":{"rendered":"Order Together"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"9172\" class=\"elementor elementor-9172\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e118414 e-flex e-con-boxed e-con e-parent\" data-id=\"e118414\" 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-c1b5e23 elementor-widget elementor-widget-html\" data-id=\"c1b5e23\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!--\r\n  KLIO Protect Teaser \u2014 Elementor-ready (KLIO Design)\r\n  ===================================================\r\n  Einbau:\r\n  1) Neue Seite in Elementor \u2192 Sektion \u2192 HTML-Widget\r\n  2) Kompletten Inhalt unten ins HTML-Widget kopieren\r\n  3) F\u00fcr Zugriffsbeschr\u00e4nkung: zwei Shortcode-Widgets drumherum\r\n     [b2b-group-display group=\"DEIN-SLUG\"] \u2026 [\/b2b-group-display]\r\n\r\n  Anpassen im <script> unten:\r\n  - CURRENT_KG     = aktueller Counter-Stand (manuell pflegen)\r\n  - GOAL_KG        = n\u00e4chste Stufe\r\n  - SIMULATE_LIVE  = Produktion: false\r\n-->\r\n\r\n<style>\r\n.klio-teaser {\r\n  --kt-surface: #F3F2EE;\r\n  --kt-fill: #2C2C2A;\r\n  --kt-track: #E8E7E3;\r\n  --kt-first-stage: #BED3A2;\r\n  --kt-rule: rgba(0,0,0,0.08);\r\n  --kt-muted: rgba(0,0,0,0.55);\r\n  --kt-subtle: rgba(0,0,0,0.40);\r\n  font-family: inherit;\r\n  color: inherit;\r\n  line-height: 1.6;\r\n  max-width: 960px;\r\n  margin: 0 auto;\r\n  padding: 2rem 0;\r\n}\r\n.klio-teaser *, .klio-teaser *::before, .klio-teaser *::after { box-sizing: border-box; }\r\n\r\n\/* Hero *\/\r\n.klio-teaser .kt-hero { padding: 2rem 0 3rem; }\r\n.klio-teaser .kt-eyebrow {\r\n  font-size: 13px;\r\n  color: var(--kt-muted);\r\n  margin-bottom: 20px;\r\n  font-weight: 400;\r\n}\r\n.klio-teaser .kt-headline {\r\n  font-family: inherit;\r\n  font-size: clamp(36px, 5vw, 52px);\r\n  font-weight: 300;\r\n  line-height: 1.1;\r\n  letter-spacing: -0.01em;\r\n  margin: 0 0 20px;\r\n  color: inherit;\r\n}\r\n.klio-teaser .kt-headline strong { font-weight: 700; }\r\n.klio-teaser .kt-lead {\r\n  font-size: 17px;\r\n  color: var(--kt-muted);\r\n  max-width: 640px;\r\n  margin: 0;\r\n}\r\n\r\n\/* Counter *\/\r\n.klio-teaser .kt-counter {\r\n  background: var(--kt-surface);\r\n  padding: 2.25rem 2rem;\r\n  margin-bottom: 0.5rem;\r\n}\r\n.klio-teaser .kt-counter-head {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: space-between;\r\n  margin-bottom: 18px;\r\n  flex-wrap: wrap;\r\n  gap: 12px;\r\n}\r\n.klio-teaser .kt-counter-label {\r\n  font-size: 13px;\r\n  color: var(--kt-muted);\r\n  line-height: 1.4;\r\n}\r\n.klio-teaser .kt-counter-range {\r\n  display: block;\r\n  font-size: 12px;\r\n  color: var(--kt-subtle);\r\n  margin-top: 2px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.klio-teaser .kt-live {\r\n  font-size: 12px;\r\n  color: var(--kt-muted);\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 6px;\r\n  letter-spacing: 0.05em;\r\n}\r\n.klio-teaser .kt-pulse {\r\n  display: inline-block;\r\n  width: 6px;\r\n  height: 6px;\r\n  border-radius: 50%;\r\n  background: var(--kt-fill);\r\n  animation: ktPulse 1.8s ease-in-out infinite;\r\n}\r\n@keyframes ktPulse {\r\n  0%, 100% { opacity: 1; }\r\n  50% { opacity: 0.3; }\r\n}\r\n.klio-teaser .kt-counter-value {\r\n  display: flex;\r\n  align-items: baseline;\r\n  gap: 12px;\r\n  margin-bottom: 40px;\r\n  flex-wrap: wrap;\r\n}\r\n.klio-teaser .kt-counter-number {\r\n  font-size: clamp(56px, 9vw, 84px);\r\n  font-weight: 300;\r\n  line-height: 1;\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.025em;\r\n  color: inherit;\r\n}\r\n.klio-teaser .kt-counter-unit {\r\n  font-size: 24px;\r\n  font-weight: 300;\r\n  color: var(--kt-muted);\r\n}\r\n.klio-teaser .kt-counter-goal {\r\n  font-size: 13px;\r\n  color: var(--kt-subtle);\r\n  margin-left: auto;\r\n  align-self: center;\r\n}\r\n\r\n\/* Mehrstufen-Fortschrittsbalken *\/\r\n.klio-teaser .kt-stages {\r\n  position: relative;\r\n  margin-bottom: 8px;\r\n}\r\n.klio-teaser .kt-stages-rail {\r\n  height: 3px;\r\n  background: var(--kt-track);\r\n  position: relative;\r\n}\r\n.klio-teaser .kt-stages-fill {\r\n  position: absolute;\r\n  top: 0;\r\n  height: 100%;\r\n  width: 0%;\r\n}\r\n.klio-teaser .kt-fill-green {\r\n  left: 0;\r\n  background: var(--kt-first-stage);\r\n}\r\n.klio-teaser .kt-fill-dark {\r\n  background: var(--kt-fill);\r\n  \/* left wird per JS auf Position der ersten Stufe gesetzt *\/\r\n}\r\n.klio-teaser .kt-stage-tick {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  width: 11px;\r\n  height: 11px;\r\n  border-radius: 50%;\r\n  background: #fff;\r\n  border: 1.5px solid var(--kt-track);\r\n  transition: all 0.4s ease;\r\n  z-index: 2;\r\n}\r\n.klio-teaser .kt-stage-tick.is-reached {\r\n  background: var(--kt-fill);\r\n  border-color: var(--kt-fill);\r\n}\r\n.klio-teaser .kt-stage-tick.is-just-reached {\r\n  background: var(--kt-fill);\r\n  border-color: var(--kt-fill);\r\n  animation: ktTickPulse 2.2s ease-out infinite;\r\n}\r\n@keyframes ktTickPulse {\r\n  0% { box-shadow: 0 0 0 0 rgba(44, 44, 42, 0.45); }\r\n  70% { box-shadow: 0 0 0 14px rgba(44, 44, 42, 0); }\r\n  100% { box-shadow: 0 0 0 0 rgba(44, 44, 42, 0); }\r\n}\r\n\/* Mini-Feuerwerk beim gerade erreichten Marker *\/\r\n.klio-teaser .kt-sparks {\r\n  position: absolute;\r\n  top: 50%;\r\n  left: 50%;\r\n  width: 0;\r\n  height: 0;\r\n  pointer-events: none;\r\n}\r\n.klio-teaser .kt-spark {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 2px;\r\n  height: 5px;\r\n  margin-left: -1px;\r\n  transform-origin: center top;\r\n}\r\n.klio-teaser .kt-spark::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  background: var(--kt-fill);\r\n  animation: ktSparkBurst 950ms ease-out forwards;\r\n  animation-delay: var(--spark-delay, 0ms);\r\n}\r\n@keyframes ktSparkBurst {\r\n  0%   { transform: translateY(-4px); opacity: 0; }\r\n  15%  { transform: translateY(-7px); opacity: 1; }\r\n  100% { transform: translateY(-28px); opacity: 0; }\r\n}\r\n.klio-teaser .kt-stage-labels {\r\n  position: relative;\r\n  height: 46px;\r\n  margin-top: 14px;\r\n}\r\n.klio-teaser .kt-stage-label {\r\n  position: absolute;\r\n  transform: translateX(-50%);\r\n  text-align: center;\r\n  font-size: 12px;\r\n  color: var(--kt-subtle);\r\n  line-height: 1.35;\r\n  white-space: nowrap;\r\n}\r\n.klio-teaser .kt-stage-label.is-reached {\r\n  color: inherit;\r\n}\r\n.klio-teaser .kt-stage-label strong {\r\n  display: block;\r\n  font-weight: 500;\r\n  font-size: 13px;\r\n  color: inherit;\r\n  margin-bottom: 2px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.klio-teaser .kt-progress-meta {\r\n  display: flex;\r\n  justify-content: space-between;\r\n  font-size: 13px;\r\n  color: var(--kt-muted);\r\n  gap: 12px;\r\n  margin-top: 12px;\r\n}\r\n\r\n\/* Freigeschaltet-Banner \u2014 prominenter Moment *\/\r\n.klio-teaser .kt-unlocked {\r\n  background: #1A1A1A;\r\n  color: #fff;\r\n  padding: 2.5rem 2rem;\r\n  margin-top: 0.5rem;\r\n}\r\n.klio-teaser .kt-unlocked-eyebrow {\r\n  font-size: 12px;\r\n  color: rgba(255,255,255,0.55);\r\n  letter-spacing: 0.14em;\r\n  text-transform: uppercase;\r\n  margin-bottom: 24px;\r\n}\r\n.klio-teaser .kt-unlocked-row {\r\n  display: grid;\r\n  grid-template-columns: auto 1fr;\r\n  gap: 32px;\r\n  align-items: baseline;\r\n  padding: 14px 0;\r\n}\r\n.klio-teaser .kt-unlocked-row + .kt-unlocked-row {\r\n  border-top: 1px solid rgba(255,255,255,0.12);\r\n}\r\n.klio-teaser .kt-unlocked-value {\r\n  font-size: clamp(48px, 7vw, 72px);\r\n  font-weight: 300;\r\n  line-height: 1;\r\n  letter-spacing: -0.02em;\r\n  white-space: nowrap;\r\n}\r\n.klio-teaser .kt-unlocked-desc {\r\n  font-size: 16px;\r\n  color: rgba(255,255,255,0.75);\r\n  line-height: 1.4;\r\n}\r\n.klio-teaser .kt-unlocked-date {\r\n  font-size: 13px;\r\n  color: rgba(255,255,255,0.5);\r\n  margin-top: 4px;\r\n  letter-spacing: 0.02em;\r\n}\r\n@media (max-width: 560px) {\r\n  .klio-teaser .kt-unlocked { padding: 1.75rem 1.25rem; }\r\n  .klio-teaser .kt-unlocked-row {\r\n    grid-template-columns: 1fr;\r\n    gap: 8px;\r\n  }\r\n}\r\n\r\n\/* Section: label + content (KLIO-Muster) *\/\r\n.klio-teaser .kt-section {\r\n  display: grid;\r\n  grid-template-columns: 220px 1fr;\r\n  gap: 40px;\r\n  padding: 3rem 0;\r\n  border-top: 1px solid var(--kt-rule);\r\n}\r\n.klio-teaser .kt-section-label {\r\n  font-size: 17px;\r\n  font-weight: 400;\r\n  color: inherit;\r\n  margin: 0;\r\n  padding-top: 2px;\r\n}\r\n.klio-teaser .kt-section-body {\r\n  font-size: 16px;\r\n  color: var(--kt-muted);\r\n}\r\n.klio-teaser .kt-section-body p { margin: 0 0 1em; }\r\n.klio-teaser .kt-section-body p:last-child { margin-bottom: 0; }\r\n.klio-teaser .kt-section-body strong { color: inherit; font-weight: 500; }\r\n\r\n\/* Stufen *\/\r\n.klio-teaser .kt-tiers {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 32px;\r\n}\r\n.klio-teaser .kt-tier-label {\r\n  font-size: 12px;\r\n  color: var(--kt-subtle);\r\n  margin-bottom: 10px;\r\n}\r\n.klio-teaser .kt-tier.kt-active .kt-tier-label { color: inherit; }\r\n.klio-teaser .kt-tier-value {\r\n  font-size: 28px;\r\n  font-weight: 300;\r\n  line-height: 1.1;\r\n  margin-bottom: 6px;\r\n  font-variant-numeric: tabular-nums;\r\n  color: inherit;\r\n}\r\n.klio-teaser .kt-tier-desc {\r\n  font-size: 14px;\r\n  color: var(--kt-muted);\r\n  line-height: 1.45;\r\n}\r\n\r\n\/* Schritte *\/\r\n.klio-teaser .kt-steps {\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 32px;\r\n}\r\n.klio-teaser .kt-step-num {\r\n  font-size: 13px;\r\n  color: var(--kt-subtle);\r\n  margin-bottom: 12px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.klio-teaser .kt-step-title {\r\n  font-size: 16px;\r\n  font-weight: 500;\r\n  color: inherit;\r\n  margin-bottom: 6px;\r\n}\r\n.klio-teaser .kt-step-desc {\r\n  font-size: 14px;\r\n  color: var(--kt-muted);\r\n  line-height: 1.55;\r\n}\r\n\r\n\/* Belohnung *\/\r\n.klio-teaser .kt-reward-value {\r\n  font-size: 28px;\r\n  font-weight: 300;\r\n  line-height: 1.25;\r\n  color: inherit;\r\n  margin-bottom: 8px;\r\n}\r\n.klio-teaser .kt-reward-value strong { font-weight: 500; }\r\n.klio-teaser .kt-reward-note { font-size: 14px; color: var(--kt-muted); }\r\n\r\n\/* Responsive *\/\r\n@media (max-width: 720px) {\r\n  .klio-teaser { padding: 1rem 0; }\r\n  .klio-teaser .kt-hero { padding: 1rem 0 2rem; }\r\n  .klio-teaser .kt-counter { padding: 1.5rem 1.25rem; }\r\n  .klio-teaser .kt-section {\r\n    grid-template-columns: 1fr;\r\n    gap: 16px;\r\n    padding: 2rem 0;\r\n  }\r\n  .klio-teaser .kt-tiers,\r\n  .klio-teaser .kt-steps {\r\n    grid-template-columns: 1fr;\r\n    gap: 1.5rem;\r\n  }\r\n  .klio-teaser .kt-counter-goal { margin-left: 0; width: 100%; }\r\n}\r\n<\/style>\r\n\r\n<div class=\"klio-teaser\">\r\n\r\n  <section class=\"kt-hero\">\r\n    <div class=\"kt-eyebrow\">Exklusives Angebot f\u00fcr die Rabattgruppe \u201eMuseum\"<\/div>\r\n    <h1 class=\"kt-headline\">Gemeinsam bestellen. <strong>Gemeinsam g\u00fcnstiger.<\/strong><\/h1>\r\n    <p class=\"kt-lead\">Je mehr Protect alle Museen gemeinsam bestellen, desto g\u00fcnstiger wird es \u2014 automatisch, f\u00fcr alle.<\/p>\r\n  <\/section>\r\n\r\n  <section class=\"kt-counter\" aria-label=\"Gemeinsamer Bestellstand\">\r\n    <div class=\"kt-counter-head\">\r\n      <div class=\"kt-counter-label\">\r\n        Bestellungen der letzten 12 Monate\r\n        <span class=\"kt-counter-range\" id=\"klio-range\"><\/span>\r\n      <\/div>\r\n      <span class=\"kt-live\"><span class=\"kt-pulse\" aria-hidden=\"true\"><\/span>live<\/span>\r\n    <\/div>\r\n    <div class=\"kt-counter-value\">\r\n      <span id=\"klio-counter\" class=\"kt-counter-number\">0<\/span>\r\n      <span class=\"kt-counter-unit\">kg<\/span>\r\n    <\/div>\r\n    <div class=\"kt-stages\" role=\"progressbar\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"0\" id=\"klio-track\">\r\n      <div class=\"kt-stages-rail\">\r\n        <div class=\"kt-stages-fill kt-fill-green\" id=\"klio-fill-green\"><\/div>\r\n        <div class=\"kt-stages-fill kt-fill-dark\" id=\"klio-fill-dark\"><\/div>\r\n        <div id=\"klio-ticks\"><\/div>\r\n      <\/div>\r\n      <div class=\"kt-stage-labels\" id=\"klio-tick-labels\"><\/div>\r\n    <\/div>\r\n    <div class=\"kt-progress-meta\">\r\n      <span id=\"klio-pct\">0 % erreicht<\/span>\r\n      <span id=\"klio-rem\"><\/span>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"kt-unlocked\" id=\"klio-unlocked\" style=\"display:none;\" aria-label=\"Freigeschaltete Rabatte\"><\/section>\r\n\r\n  <section class=\"kt-section\">\r\n    <h2 class=\"kt-section-label\">Die Idee<\/h2>\r\n    <div class=\"kt-section-body\">\r\n      <p><strong>So viel Schutz wie n\u00f6tig. So wenig Kosten wie m\u00f6glich.<\/strong><\/p>\r\n      <p>Das Programm gilt exklusiv f\u00fcr die Kundengruppe Museum. Jede Bestellung aus dieser Gruppe z\u00e4hlt in einen gemeinsamen Topf. Erreicht die Gruppe gemeinsam eine Mengenschwelle, sinkt der Preis f\u00fcr alle Museumskunden \u2014 automatisch, bei der n\u00e4chsten Bestellung.<\/p>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"kt-section\">\r\n    <h2 class=\"kt-section-label\">N\u00e4chste Stufe<\/h2>\r\n    <div class=\"kt-section-body\">\r\n      <div class=\"kt-reward-value\">Bei 500 kg: <strong>\u22125 % auf alle Protect-Produkte.<\/strong><\/div>\r\n      <div class=\"kt-reward-note\">Global freigeschaltet \u2014 f\u00fcr jeden Museumskunden, sofort.<\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n  <section class=\"kt-section\">\r\n    <h2 class=\"kt-section-label\">So funktioniert's<\/h2>\r\n    <div class=\"kt-section-body\">\r\n      <div class=\"kt-steps\">\r\n        <div>\r\n          <div class=\"kt-step-num\">01<\/div>\r\n          <div class=\"kt-step-title\">Bestellen<\/div>\r\n          <div class=\"kt-step-desc\">Jede Protect-Bestellung eines Museums flie\u00dft in den gemeinsamen Z\u00e4hler.<\/div>\r\n        <\/div>\r\n        <div>\r\n          <div class=\"kt-step-num\">02<\/div>\r\n          <div class=\"kt-step-title\">Mitverfolgen<\/div>\r\n          <div class=\"kt-step-desc\">Alle Museumskunden sehen live, wie nah die n\u00e4chste Stufe r\u00fcckt.<\/div>\r\n        <\/div>\r\n        <div>\r\n          <div class=\"kt-step-num\">03<\/div>\r\n          <div class=\"kt-step-title\">Profitieren<\/div>\r\n          <div class=\"kt-step-desc\">Sobald die Schwelle f\u00e4llt, sinkt der Preis automatisch \u2014 f\u00fcr alle.<\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n  \/\/ ============================================================\r\n  \/\/ KONFIGURATION\r\n  \/\/ ============================================================\r\n\r\n  \/\/ 1) ALLE BESTELLUNGEN chronologisch (Datum im Format YYYY-MM-DD).\r\n  \/\/    Neue Bestellung = neue Zeile. Alte Eintr\u00e4ge bleiben stehen,\r\n  \/\/    sie fallen automatisch aus dem 12-Monats-Fenster.\r\n  var BESTELLUNGEN = [\r\n    { datum: '2025-05-15', kg: 30 },\r\n    { datum: '2025-07-02', kg: 22 },\r\n    { datum: '2025-08-20', kg: 28 },\r\n    { datum: '2025-10-08', kg: 25 },\r\n    { datum: '2025-11-15', kg: 18 },\r\n    { datum: '2026-01-10', kg: 32 },\r\n    { datum: '2026-02-22', kg: 26 },\r\n    { datum: '2026-04-05', kg: 24 },\r\n    { datum: '2026-04-15', kg: 20 },\r\n    { datum: '2026-05-07', kg: 23 },\r\n    { datum: '2026-06-24', kg: 113 },\r\n    { datum: '2026-08-26', kg: 26 },\r\n       { datum: '2026-08-27', kg: 200 }\r\n  ];\r\n\r\n  \/\/ 2) RABATTSTUFEN (aufsteigend)\r\n  var STUFEN = [\r\n    { schwelle: 500,  rabatt: '\u22125 %'  },\r\n    { schwelle: 1000, rabatt: '\u221210 %' },\r\n    { schwelle: 2000, rabatt: '\u221215 %' },\r\n    { schwelle: 3000, rabatt: '\u221220 %' }\r\n  ];\r\n\r\n  \/\/ 3) DAUERHAFT FREIGESCHALTETE STUFEN\r\n  \/\/    Wenn eine Stufe erreicht wurde: mit Datum hier eintragen.\r\n  \/\/    Dann zeigt der Marker \"erreicht\" und das dunkle Banner erscheint.\r\n  var FREIGESCHALTET = [\r\n    \/\/ { schwelle: 1000, rabatt: '\u22125 %', datum: '2026-10-15' }\r\n  ];\r\n\r\n  \/\/ ============================================================\r\n\r\n  var counter     = document.getElementById('klio-counter');\r\n  var greenFill   = document.getElementById('klio-fill-green');\r\n  var darkFill    = document.getElementById('klio-fill-dark');\r\n  var pctEl       = document.getElementById('klio-pct');\r\n  var remEl       = document.getElementById('klio-rem');\r\n  var track       = document.getElementById('klio-track');\r\n  var rangeEl     = document.getElementById('klio-range');\r\n  var ticksEl     = document.getElementById('klio-ticks');\r\n  var tickLabelsEl= document.getElementById('klio-tick-labels');\r\n  var unlockedEl  = document.getElementById('klio-unlocked');\r\n  if (!counter || !greenFill) return;\r\n\r\n  function fmt(n) { return n.toLocaleString('de-DE'); }\r\n  function fmtDate(d) {\r\n    return new Date(d).toLocaleDateString('de-DE', {\r\n      day: 'numeric', month: 'long', year: 'numeric'\r\n    });\r\n  }\r\n\r\n  \/\/ --- Rolling 12-Monats-Summe ---\r\n  var now       = new Date();\r\n  var windowMs  = 365 * 24 * 60 * 60 * 1000;\r\n  var cutoff    = now.getTime() - windowMs;\r\n  var rangeFrom = new Date(cutoff);\r\n  var current = 0;\r\n  for (var i = 0; i < BESTELLUNGEN.length; i++) {\r\n    var tt = new Date(BESTELLUNGEN[i].datum).getTime();\r\n    if (tt > cutoff && tt <= now.getTime()) current += BESTELLUNGEN[i].kg;\r\n  }\r\n\r\n  if (rangeEl) rangeEl.textContent = fmtDate(rangeFrom) + ' \u2013 ' + fmtDate(now);\r\n\r\n  \/\/ --- Stufen vorbereiten ---\r\n  var freigeschalteteSchwellen = FREIGESCHALTET.map(function (f) { return f.schwelle; });\r\n  var barMax = STUFEN[STUFEN.length - 1].schwelle;\r\n  var firstStagePct = (STUFEN[0].schwelle \/ barMax) * 100;\r\n\r\n  \/\/ Dunkle Fill-Position setzen (startet bei erster Stufen-Schwelle)\r\n  darkFill.style.left = firstStagePct + '%';\r\n\r\n  \/\/ N\u00e4chste noch nicht erreichte Stufe\r\n  var naechsteStufe = null;\r\n  for (var k = 0; k < STUFEN.length; k++) {\r\n    if (freigeschalteteSchwellen.indexOf(STUFEN[k].schwelle) === -1 && current < STUFEN[k].schwelle) {\r\n      naechsteStufe = STUFEN[k];\r\n      break;\r\n    }\r\n  }\r\n\r\n  \/\/ --- Marker (leer) rendern, Zust\u00e4nde f\u00fcr Crossing-Detection merken ---\r\n  var tickStates = [];\r\n  STUFEN.forEach(function (stufe) {\r\n    var pos = (stufe.schwelle \/ barMax) * 100;\r\n    var istFreigeschaltet = freigeschalteteSchwellen.indexOf(stufe.schwelle) !== -1;\r\n\r\n    var tickEl = document.createElement('div');\r\n    tickEl.className = 'kt-stage-tick';\r\n    tickEl.style.left = pos + '%';\r\n    ticksEl.appendChild(tickEl);\r\n\r\n    var labelEl = document.createElement('div');\r\n    labelEl.className = 'kt-stage-label';\r\n    labelEl.style.left = pos + '%';\r\n    labelEl.innerHTML = '<strong>' + fmt(stufe.schwelle) + ' kg<\/strong>' + stufe.rabatt;\r\n    tickLabelsEl.appendChild(labelEl);\r\n\r\n    tickStates.push({\r\n      schwelle: stufe.schwelle,\r\n      freigeschaltet: istFreigeschaltet,\r\n      fired: false,\r\n      tickEl: tickEl,\r\n      labelEl: labelEl\r\n    });\r\n  });\r\n\r\n  \/\/ --- Feuerwerk-Burst ausl\u00f6sen ---\r\n  function triggerStage(state) {\r\n    if (state.fired) return;\r\n    state.fired = true;\r\n\r\n    state.tickEl.classList.add(state.freigeschaltet ? 'is-reached' : 'is-just-reached');\r\n    state.labelEl.classList.add('is-reached');\r\n\r\n    var sparks = document.createElement('div');\r\n    sparks.className = 'kt-sparks';\r\n    var sparkCount = 12;\r\n    for (var j = 0; j < sparkCount; j++) {\r\n      var spark = document.createElement('div');\r\n      spark.className = 'kt-spark';\r\n      spark.style.transform = 'rotate(' + (360 \/ sparkCount * j) + 'deg)';\r\n      spark.style.setProperty('--spark-delay', Math.round(Math.random() * 40) + 'ms');\r\n      sparks.appendChild(spark);\r\n    }\r\n    state.tickEl.appendChild(sparks);\r\n\r\n    \/\/ Aufr\u00e4umen nach Animation\r\n    setTimeout(function () {\r\n      if (sparks.parentNode) sparks.parentNode.removeChild(sparks);\r\n    }, 1500);\r\n  }\r\n\r\n  \/\/ --- Counter-Text und Fill-Breiten aktualisieren ---\r\n  function update(val) {\r\n    counter.textContent = fmt(val);\r\n    var valPct = Math.min(val \/ barMax * 100, 100);\r\n\r\n    var greenPct = Math.min(valPct, firstStagePct);\r\n    greenFill.style.width = greenPct + '%';\r\n\r\n    var darkPct = Math.max(0, valPct - firstStagePct);\r\n    darkFill.style.width = darkPct + '%';\r\n\r\n    pctEl.textContent = 'Stand: ' + fmt(val) + ' kg';\r\n    if (naechsteStufe) {\r\n      remEl.textContent = 'noch ' + fmt(naechsteStufe.schwelle - val) + ' kg bis ' + naechsteStufe.rabatt;\r\n    } else {\r\n      remEl.textContent = 'Alle Stufen erreicht';\r\n    }\r\n    if (track) track.setAttribute('aria-valuenow', Math.round(valPct));\r\n  }\r\n\r\n  \/\/ --- Freigeschaltete Banner rendern ---\r\n  if (unlockedEl && FREIGESCHALTET.length > 0) {\r\n    var html = '<div class=\"kt-unlocked-eyebrow\">Dauerhaft freigeschaltet<\/div>';\r\n    FREIGESCHALTET.forEach(function (f) {\r\n      html +=\r\n        '<div class=\"kt-unlocked-row\">' +\r\n          '<div class=\"kt-unlocked-value\">' + f.rabatt + '<\/div>' +\r\n          '<div>' +\r\n            '<div class=\"kt-unlocked-desc\">Auf alle Protect-Produkte<\/div>' +\r\n            '<div class=\"kt-unlocked-date\">Erreicht am ' + fmtDate(f.datum) + '<\/div>' +\r\n          '<\/div>' +\r\n        '<\/div>';\r\n    });\r\n    unlockedEl.innerHTML = html;\r\n    unlockedEl.style.display = 'block';\r\n  }\r\n\r\n  \/\/ --- Hochz\u00e4hl-Animation mit Crossing-Detection ---\r\n  var duration = 2000;\r\n  var startTs = performance.now();\r\n  function animFrame(ts) {\r\n    var t = Math.min((ts - startTs) \/ duration, 1);\r\n    var eased = 1 - Math.pow(1 - t, 3);\r\n    var val = Math.round(current * eased);\r\n    update(val);\r\n\r\n    \/\/ Schwellen-\u00dcberschreitungen pr\u00fcfen und Feuerwerk ausl\u00f6sen\r\n    tickStates.forEach(function (state) {\r\n      if (!state.fired && val >= state.schwelle) {\r\n        triggerStage(state);\r\n      }\r\n    });\r\n\r\n    if (t < 1) requestAnimationFrame(animFrame);\r\n  }\r\n  requestAnimationFrame(animFrame);\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":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-9172","page","type-page","status-publish","hentry"],"_hostinger_reach_plugin_has_subscription_block":false,"_hostinger_reach_plugin_is_elementor":false,"_links":{"self":[{"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/pages\/9172","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/comments?post=9172"}],"version-history":[{"count":79,"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/pages\/9172\/revisions"}],"predecessor-version":[{"id":10162,"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/pages\/9172\/revisions\/10162"}],"wp:attachment":[{"href":"https:\/\/klio-store.com\/en\/wp-json\/wp\/v2\/media?parent=9172"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}