{"id":23916,"date":"2026-08-31T13:33:12","date_gmt":"2026-08-31T11:33:12","guid":{"rendered":"https:\/\/kraut-zone.de\/laden\/?page_id=23916"},"modified":"2026-08-31T14:03:10","modified_gmt":"2026-08-31T12:03:10","slug":"aboberater","status":"publish","type":"page","link":"https:\/\/kraut-zone.de\/laden\/aboberater\/","title":{"rendered":"Aboberater"},"content":{"rendered":"\n<!-- ==========================================\n     KRAUTZONE ABO-BERATER\n     FRAGE 1 + HEFTLESER + NETZLESER + GEMISCHT\n=========================================== -->\n\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Oswald:wght@400;500;600;700&display=swap');\n\n#kz-abo-root {\n  --kz-black: #171717;\n  --kz-white: #ffffff;\n  --kz-grey: #6d6a64;\n  --kz-light-grey: #eeeeee;\n\n  width: 100%;\n  font-family: Arial, Helvetica, sans-serif;\n  color: var(--kz-black);\n  background: var(--kz-white);\n  box-sizing: border-box;\n}\n\n#kz-abo-root *,\n#kz-abo-root *::before,\n#kz-abo-root *::after {\n  box-sizing: border-box;\n}\n\n#kz-abo-root .kz-wrap {\n  width: 100%;\n  padding: clamp(24px, 5vw, 48px);\n  background: #ffffff;\n  border: 1px solid var(--kz-black);\n}\n\n#kz-abo-root .kz-kicker {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 20px;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.14em;\n  text-transform: uppercase;\n}\n\n#kz-abo-root .kz-kicker::before {\n  content: \"\";\n  display: block;\n  width: 34px;\n  height: 4px;\n  background: var(--kz-black);\n}\n\n#kz-abo-root .kz-progress-row {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  margin-bottom: 32px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n}\n\n#kz-abo-root .kz-progress {\n  flex: 1;\n  height: 3px;\n  background: var(--kz-light-grey);\n  overflow: hidden;\n}\n\n#kz-abo-root .kz-progress-bar {\n  display: block;\n  width: 33.333%;\n  height: 100%;\n  background: var(--kz-black);\n  transition: width 0.35s ease;\n}\n\n#kz-abo-root .kz-title {\n  max-width: 760px;\n  margin: 0;\n  font-family: \"Oswald\", Arial, sans-serif;\n  font-size: clamp(42px, 7vw, 72px);\n  font-weight: 600;\n  line-height: 1.05;\n  letter-spacing: -0.02em;\n  color: var(--kz-black);\n  text-transform: none;\n}\n\n#kz-abo-root .kz-lead {\n  max-width: 680px;\n  margin: 20px 0 36px;\n  font-size: 16px;\n  line-height: 1.55;\n  color: var(--kz-grey);\n}\n\n#kz-abo-root .kz-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  border-top: 1px solid var(--kz-black);\n  border-left: 1px solid var(--kz-black);\n}\n\n#kz-abo-root .kz-grid-two {\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n}\n\n#kz-abo-root .kz-card {\n  appearance: none;\n  -webkit-appearance: none;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  min-width: 0;\n  min-height: 290px;\n  padding: 26px;\n  margin: 0;\n  border: 0;\n  border-right: 1px solid var(--kz-black);\n  border-bottom: 1px solid var(--kz-black);\n  border-radius: 0;\n  background: #ffffff;\n  color: var(--kz-black);\n  text-align: left;\n  font: inherit;\n  cursor: pointer;\n  transition:\n    background-color 0.2s ease,\n    color 0.2s ease;\n}\n\n#kz-abo-root .kz-card:hover {\n  background: var(--kz-black);\n  color: var(--kz-white);\n}\n\n#kz-abo-root .kz-card:focus-visible {\n  background: var(--kz-black);\n  color: var(--kz-white);\n  outline: 3px solid var(--kz-black);\n  outline-offset: 3px;\n}\n\n#kz-abo-root .kz-number {\n  margin-bottom: 16px;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1.3;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n  opacity: 0.6;\n}\n\n#kz-abo-root .kz-type {\n  margin: 0 0 14px;\n  font-family: \"Oswald\", Arial, sans-serif;\n  font-size: clamp(28px, 3.5vw, 40px);\n  font-weight: 500;\n  line-height: 1.1;\n  letter-spacing: -0.01em;\n  text-transform: none;\n}\n\n#kz-abo-root .kz-copy {\n  max-width: 320px;\n  font-size: 16px;\n  line-height: 1.5;\n  opacity: 0.78;\n}\n\n#kz-abo-root .kz-action {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 20px;\n  width: 100%;\n  margin-top: 34px;\n  padding-top: 16px;\n  border-top: 1px solid currentColor;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n#kz-abo-root .kz-arrow {\n  flex: 0 0 auto;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 24px;\n  font-weight: 400;\n  line-height: 1;\n}\n\n#kz-abo-root .kz-back {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 24px;\n  padding: 0;\n  border: 0;\n  background: transparent;\n  color: var(--kz-black);\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  cursor: pointer;\n}\n\n#kz-abo-root .kz-back:hover {\n  text-decoration: underline;\n}\n\n#kz-abo-root .kz-back-arrow {\n  font-size: 18px;\n  line-height: 1;\n}\n\n#kz-abo-root .kz-result {\n  width: 100%;\n}\n\n#kz-abo-root .kz-result-box {\n  display: grid;\n  grid-template-columns:\n    minmax(0, 1fr)\n    minmax(260px, 380px);\n  gap: clamp(28px, 5vw, 60px);\n  align-items: center;\n  margin-top: 30px;\n  padding: clamp(24px, 4vw, 36px);\n  border: 1px solid var(--kz-black);\n  background: #ffffff;\n}\n\n#kz-abo-root .kz-result-content {\n  min-width: 0;\n}\n\n#kz-abo-root .kz-result-label {\n  margin-bottom: 10px;\n  font-size: 11px;\n  font-weight: 700;\n  letter-spacing: 0.12em;\n  text-transform: uppercase;\n}\n\n#kz-abo-root .kz-result-title {\n  margin: 0 0 14px;\n  font-family: \"Oswald\", Arial, sans-serif;\n  font-size: clamp(34px, 5vw, 52px);\n  font-weight: 500;\n  line-height: 1.05;\n}\n\n#kz-abo-root .kz-result-text {\n  max-width: 650px;\n  margin: 0;\n  font-size: 17px;\n  line-height: 1.6;\n  color: var(--kz-grey);\n}\n\n#kz-abo-root .kz-discount {\n  margin-top: 22px;\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  font-weight: 400;\n  line-height: 1.5;\n  color: var(--kz-black);\n}\n\n#kz-abo-root .kz-discount strong {\n  font-family: Arial, Helvetica, sans-serif;\n  font-size: 16px;\n  font-weight: 700;\n}\n\n#kz-abo-root .kz-result-image {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 0;\n}\n\n#kz-abo-root .kz-result-image img {\n  display: block;\n  width: 100%;\n  max-width: 340px;\n  height: auto;\n  margin: 0 auto;\n}\n\n#kz-abo-root .kz-cta {\n  display: inline-flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 26px;\n  margin-top: 26px;\n  padding: 16px 20px;\n  border: 1px solid var(--kz-black);\n  background: var(--kz-black);\n  color: var(--kz-white);\n  font-size: 12px;\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  text-decoration: none;\n  transition:\n    background-color 0.2s ease,\n    color 0.2s ease;\n}\n\n#kz-abo-root .kz-cta:hover {\n  background: #ffffff;\n  color: var(--kz-black);\n}\n\n@media (max-width: 850px) {\n\n  #kz-abo-root .kz-grid,\n  #kz-abo-root .kz-grid-two {\n    grid-template-columns: 1fr;\n  }\n\n  #kz-abo-root .kz-card {\n    min-height: 220px;\n  }\n\n  #kz-abo-root .kz-result-box {\n    grid-template-columns:\n      minmax(0, 1fr)\n      minmax(220px, 320px);\n    gap: 28px;\n  }\n\n  #kz-abo-root .kz-result-image img {\n    max-width: 280px;\n  }\n\n}\n\n@media (max-width: 650px) {\n\n  #kz-abo-root .kz-wrap {\n    padding: 24px 18px;\n  }\n\n  #kz-abo-root .kz-title {\n    font-size: 44px;\n    line-height: 1.05;\n  }\n\n  #kz-abo-root .kz-lead {\n    margin-bottom: 28px;\n    font-size: 15px;\n  }\n\n  #kz-abo-root .kz-card {\n    min-height: 210px;\n    padding: 24px;\n  }\n\n  #kz-abo-root .kz-type {\n    font-size: 34px;\n  }\n\n  #kz-abo-root .kz-result-box {\n    grid-template-columns: 1fr;\n    gap: 30px;\n    padding: 22px;\n  }\n\n  #kz-abo-root .kz-result-image {\n    order: 1;\n  }\n\n  #kz-abo-root .kz-result-content {\n    order: 2;\n  }\n\n  #kz-abo-root .kz-result-image img {\n    max-width: 250px;\n  }\n\n}\n\n@media (prefers-reduced-motion: reduce) {\n\n  #kz-abo-root .kz-card,\n  #kz-abo-root .kz-progress-bar,\n  #kz-abo-root .kz-cta {\n    transition: none;\n  }\n\n}\n<\/style>\n\n\n<div id=\"kz-abo-root\">\n\n  <section class=\"kz-wrap\">\n\n    <div\n      class=\"kz-kicker\"\n      id=\"kz-kicker\"\n    >\n      Abo-Berater \u00b7 Lesetyp\n    <\/div>\n\n    <div class=\"kz-progress-row\">\n\n      <span id=\"kz-question-number\">\n        Frage 01\n      <\/span>\n\n      <div\n        class=\"kz-progress\"\n        role=\"progressbar\"\n        aria-label=\"Fortschritt\"\n        aria-valuemin=\"0\"\n        aria-valuemax=\"100\"\n        aria-valuenow=\"33\"\n        id=\"kz-progress\"\n      >\n        <span\n          class=\"kz-progress-bar\"\n          id=\"kz-progress-bar\"\n        ><\/span>\n      <\/div>\n\n      <span>\n        03\n      <\/span>\n\n    <\/div>\n\n    <div\n      id=\"kz-content\"\n      aria-live=\"polite\"\n    ><\/div>\n\n  <\/section>\n\n<\/div>\n\n\n<script>\n(function () {\n\n  const root =\n    document.getElementById(\n      \"kz-abo-root\"\n    );\n\n  if (!root) {\n    return;\n  }\n\n\n  const content =\n    document.getElementById(\n      \"kz-content\"\n    );\n\n  const kicker =\n    document.getElementById(\n      \"kz-kicker\"\n    );\n\n  const questionNumber =\n    document.getElementById(\n      \"kz-question-number\"\n    );\n\n  const progress =\n    document.getElementById(\n      \"kz-progress\"\n    );\n\n  const progressBar =\n    document.getElementById(\n      \"kz-progress-bar\"\n    );\n\n\n  let answers = {\n    lesetyp: null,\n    heftformat: null,\n    netzabo: null,\n    gemischtabo: null\n  };\n\n\n  function setProgress(\n    question,\n    percent\n  ) {\n\n    questionNumber.textContent =\n      \"Frage 0\" + question;\n\n    progressBar.style.width =\n      percent + \"%\";\n\n    progress.setAttribute(\n      \"aria-valuenow\",\n      percent\n    );\n\n  }\n\n\n  \/* ========================================\n     FRAGE 1\n  ======================================== *\/\n\n  function showQuestion1() {\n\n    setProgress(\n      1,\n      33.333\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Lesetyp\";\n\n\n    content.innerHTML = `\n\n      <h2 class=\"kz-title\">\n        Welcher Typ bist du?\n      <\/h2>\n\n      <p class=\"kz-lead\">\n        Wie m\u00f6chtest du deine KRAUTZONE\n        am liebsten lesen?\n      <\/p>\n\n      <div\n        class=\"kz-grid\"\n        role=\"group\"\n        aria-label=\"Lesetyp ausw\u00e4hlen\"\n      >\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"heftleser\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              01 \/ Heft\n            <\/div>\n\n            <div class=\"kz-type\">\n              Heftleser\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will die zweimonatliche\n              KRAUTZONE lesen.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"netzleser\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              02 \/ Netz\n            <\/div>\n\n            <div class=\"kz-type\">\n              Netzleser\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will die t\u00e4glichen Artikel\n              im Netz lesen.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"gemischt\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              03 \/ Alles\n            <\/div>\n\n            <div class=\"kz-type\">\n              Gemischt\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will einfach alles von der\n              KRAUTZONE lesen.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n      <\/div>\n    `;\n\n\n    content\n      .querySelectorAll(\n        \".kz-card\"\n      )\n      .forEach(\n        function (card) {\n\n          card.addEventListener(\n            \"click\",\n            function () {\n\n              const choice =\n                card.dataset.choice;\n\n              answers.lesetyp =\n                choice;\n\n\n              if (\n                choice === \"heftleser\"\n              ) {\n\n                showHeftleserQuestion();\n\n              }\n\n\n              if (\n                choice === \"netzleser\"\n              ) {\n\n                showNetzleserQuestion();\n\n              }\n\n\n              if (\n                choice === \"gemischt\"\n              ) {\n\n                showGemischtQuestion();\n\n              }\n\n            }\n          );\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     FRAGE 2 \u2013 HEFTLESER\n  ======================================== *\/\n\n  function showHeftleserQuestion() {\n\n    setProgress(\n      2,\n      66.666\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Heftleser\";\n\n\n    content.innerHTML = `\n\n      <h2 class=\"kz-title\">\n        Wie m\u00f6chtest du das Heft lesen?\n      <\/h2>\n\n      <p class=\"kz-lead\">\n        Gedruckt, digital oder am liebsten\n        beides?\n      <\/p>\n\n      <div\n        class=\"kz-grid\"\n        role=\"group\"\n        aria-label=\"Heftformat ausw\u00e4hlen\"\n      >\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"traditionalist\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              01 \/ Print\n            <\/div>\n\n            <div class=\"kz-type\">\n              Traditionalist\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will ein gedrucktes Magazin\n              in den H\u00e4nden halten.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"modernist\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              02 \/ Digital\n            <\/div>\n\n            <div class=\"kz-type\">\n              Modernist\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich lese lieber am PC\n              oder Tablet.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"gemischt\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              03 \/ Print + Digital\n            <\/div>\n\n            <div class=\"kz-type\">\n              Gemischt\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will etwas Gedrucktes haben,\n              aber auch am PC\/Tablet\n              nachlesen k\u00f6nnen.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n      <\/div>\n\n\n      <button\n        type=\"button\"\n        class=\"kz-back\"\n        id=\"kz-back-question1\"\n      >\n\n        <span\n          class=\"kz-back-arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2190\n        <\/span>\n\n        <span>\n          Zur\u00fcck\n        <\/span>\n\n      <\/button>\n    `;\n\n\n    content\n      .querySelectorAll(\n        \".kz-card\"\n      )\n      .forEach(\n        function (card) {\n\n          card.addEventListener(\n            \"click\",\n            function () {\n\n              answers.heftformat =\n                card.dataset.choice;\n\n\n              if (\n                card.dataset.choice ===\n                \"traditionalist\"\n              ) {\n\n                showNormalResult();\n                return;\n\n              }\n\n\n              if (\n                card.dataset.choice ===\n                \"modernist\"\n              ) {\n\n                showDigitalResult();\n                return;\n\n              }\n\n\n              if (\n                card.dataset.choice ===\n                \"gemischt\"\n              ) {\n\n                showKaiserResult(\n                  \"heftleser\"\n                );\n\n                return;\n\n              }\n\n            }\n          );\n\n        }\n      );\n\n\n    document\n      .getElementById(\n        \"kz-back-question1\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          answers.heftformat =\n            null;\n\n          showQuestion1();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     FRAGE 2 \u2013 NETZLESER\n  ======================================== *\/\n\n  function showNetzleserQuestion() {\n\n    setProgress(\n      2,\n      66.666\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Netzleser\";\n\n\n    content.innerHTML = `\n\n      <h2 class=\"kz-title\">\n        Wie m\u00f6chtest du einsteigen?\n      <\/h2>\n\n      <p class=\"kz-lead\">\n        Lieber flexibel ausprobieren\n        oder direkt mit einem Jahresabo sparen?\n      <\/p>\n\n      <div\n        class=\"kz-grid kz-grid-two\"\n        role=\"group\"\n        aria-label=\"Netzabo ausw\u00e4hlen\"\n      >\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"antester\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              01 \/ Flexibel\n            <\/div>\n\n            <div class=\"kz-type\">\n              Antester\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will erstmal reinschnuppern\n              und ein flexibles Abo.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"sparfuchs\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              02 \/ Jahresabo\n            <\/div>\n\n            <div class=\"kz-type\">\n              Sparfuchs\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will ein Jahresabo\n              und dabei deutlich sparen.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n      <\/div>\n\n\n      <button\n        type=\"button\"\n        class=\"kz-back\"\n        id=\"kz-back-netz-question1\"\n      >\n\n        <span\n          class=\"kz-back-arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2190\n        <\/span>\n\n        <span>\n          Zur\u00fcck\n        <\/span>\n\n      <\/button>\n    `;\n\n\n    content\n      .querySelectorAll(\n        \".kz-card\"\n      )\n      .forEach(\n        function (card) {\n\n          card.addEventListener(\n            \"click\",\n            function () {\n\n              answers.netzabo =\n                card.dataset.choice;\n\n\n              if (\n                card.dataset.choice ===\n                \"antester\"\n              ) {\n\n                showPlusMonthlyResult();\n                return;\n\n              }\n\n\n              if (\n                card.dataset.choice ===\n                \"sparfuchs\"\n              ) {\n\n                showPlusYearlyResult();\n                return;\n\n              }\n\n            }\n          );\n\n        }\n      );\n\n\n    document\n      .getElementById(\n        \"kz-back-netz-question1\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          answers.netzabo =\n            null;\n\n          showQuestion1();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     FRAGE 2 \u2013 GEMISCHT\n  ======================================== *\/\n\n  function showGemischtQuestion() {\n\n    setProgress(\n      2,\n      66.666\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Gemischt\";\n\n\n    content.innerHTML = `\n\n      <h2 class=\"kz-title\">\n        Wie m\u00f6chtest du alles lesen?\n      <\/h2>\n\n      <p class=\"kz-lead\">\n        Gedrucktes Heft plus Netz\n        oder digital plus Netz?\n      <\/p>\n\n      <div\n        class=\"kz-grid kz-grid-two\"\n        role=\"group\"\n        aria-label=\"Kombi-Abo ausw\u00e4hlen\"\n      >\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"kaiser\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              01 \/ Print + Netz\n            <\/div>\n\n            <div class=\"kz-type\">\n              Kaiser\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will die gedruckte KRAUTZONE lesen,\n              keinen Netzartikel verpassen und eure\n              Arbeit unterst\u00fctzen!\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-card\"\n          data-choice=\"kombileser\"\n        >\n\n          <div>\n\n            <div class=\"kz-number\">\n              02 \/ Digital + Netz\n            <\/div>\n\n            <div class=\"kz-type\">\n              Kombi-Leser\n            <\/div>\n\n            <div class=\"kz-copy\">\n              Ich will die KRAUTZONE digital lesen\n              und keinen Netzartikel verpassen.\n            <\/div>\n\n          <\/div>\n\n          <div class=\"kz-action\">\n\n            <span>\n              Das bin ich\n            <\/span>\n\n            <span\n              class=\"kz-arrow\"\n              aria-hidden=\"true\"\n            >\n              \u2192\n            <\/span>\n\n          <\/div>\n\n        <\/button>\n\n      <\/div>\n\n\n      <button\n        type=\"button\"\n        class=\"kz-back\"\n        id=\"kz-back-gemischt-question1\"\n      >\n\n        <span\n          class=\"kz-back-arrow\"\n          aria-hidden=\"true\"\n        >\n          \u2190\n        <\/span>\n\n        <span>\n          Zur\u00fcck\n        <\/span>\n\n      <\/button>\n    `;\n\n\n    content\n      .querySelectorAll(\n        \".kz-card\"\n      )\n      .forEach(\n        function (card) {\n\n          card.addEventListener(\n            \"click\",\n            function () {\n\n              answers.gemischtabo =\n                card.dataset.choice;\n\n\n              if (\n                card.dataset.choice ===\n                \"kaiser\"\n              ) {\n\n                showKaiserResult(\n                  \"gemischt\"\n                );\n\n                return;\n\n              }\n\n\n              if (\n                card.dataset.choice ===\n                \"kombileser\"\n              ) {\n\n                showDigitalPlusResult();\n                return;\n\n              }\n\n            }\n          );\n\n        }\n      );\n\n\n    document\n      .getElementById(\n        \"kz-back-gemischt-question1\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          answers.gemischtabo =\n            null;\n\n          showQuestion1();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     PLUS MONATLICH\n  ======================================== *\/\n\n  function showPlusMonthlyResult() {\n\n    setProgress(\n      3,\n      100\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Empfehlung\";\n\n\n    content.innerHTML = `\n\n      <div class=\"kz-result\">\n\n        <h2 class=\"kz-title\">\n          Dann haben wir das passende Abo f\u00fcr dich\n        <\/h2>\n\n        <div class=\"kz-result-box\">\n\n          <div class=\"kz-result-content\">\n\n            <div class=\"kz-result-label\">\n              Unsere Empfehlung\n            <\/div>\n\n            <h3 class=\"kz-result-title\">\n              KRAUTZONE Plus monatlich\n            <\/h3>\n\n            <p class=\"kz-result-text\">\n              Und mit dem Rabattcode\n              <strong>Plus5<\/strong>\n              den ersten Monat kostenlos lesen.\n            <\/p>\n\n            <p class=\"kz-discount\">\n              Rabattcode:\n              <strong>Plus5<\/strong>\n            <\/p>\n\n            <a\n              class=\"kz-cta\"\n              href=\"https:\/\/kraut-zone.de\/laden\/produkt\/krautzone-plus-2\/\"\n            >\n\n              <span>\n                Plus (monatlich)\n              <\/span>\n\n              <span\n                class=\"kz-arrow\"\n                aria-hidden=\"true\"\n              >\n                \u2192\n              <\/span>\n\n            <\/a>\n\n          <\/div>\n\n          <div class=\"kz-result-image\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/kraut-zone.de\/laden\/wp-content\/uploads\/sites\/2\/2026\/04\/Vorlage-Plus-1.png\"\n              alt=\"KRAUTZONE Plus monatlich\"\n              loading=\"lazy\"\n            >\n\n          <\/div>\n\n        <\/div>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-back\"\n          id=\"kz-back-plus-monthly\"\n        >\n\n          <span\n            class=\"kz-back-arrow\"\n            aria-hidden=\"true\"\n          >\n            \u2190\n          <\/span>\n\n          <span>\n            Zur\u00fcck\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n    `;\n\n\n    document\n      .getElementById(\n        \"kz-back-plus-monthly\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          showNetzleserQuestion();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     PLUS J\u00c4HRLICH\n  ======================================== *\/\n\n  function showPlusYearlyResult() {\n\n    setProgress(\n      3,\n      100\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Empfehlung\";\n\n\n    content.innerHTML = `\n\n      <div class=\"kz-result\">\n\n        <h2 class=\"kz-title\">\n          Dann haben wir das passende Abo f\u00fcr dich\n        <\/h2>\n\n        <div class=\"kz-result-box\">\n\n          <div class=\"kz-result-content\">\n\n            <div class=\"kz-result-label\">\n              Unsere Empfehlung\n            <\/div>\n\n            <h3 class=\"kz-result-title\">\n              KRAUTZONE Plus j\u00e4hrlich\n            <\/h3>\n\n            <p class=\"kz-result-text\">\n              Und mit dem Rabattcode\n              <strong>Plus5<\/strong>\n              im ersten Jahr 5 Euro sparen.\n            <\/p>\n\n            <p class=\"kz-discount\">\n              Rabattcode:\n              <strong>Plus5<\/strong>\n            <\/p>\n\n            <a\n              class=\"kz-cta\"\n              href=\"https:\/\/kraut-zone.de\/laden\/produkt\/krautzone-plus-2\/\"\n            >\n\n              <span>\n                Plus (j\u00e4hrlich)\n              <\/span>\n\n              <span\n                class=\"kz-arrow\"\n                aria-hidden=\"true\"\n              >\n                \u2192\n              <\/span>\n\n            <\/a>\n\n          <\/div>\n\n          <div class=\"kz-result-image\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/kraut-zone.de\/laden\/wp-content\/uploads\/sites\/2\/2026\/04\/Vorlage-Plus_jaehrlich-4.png\"\n              alt=\"KRAUTZONE Plus j\u00e4hrlich\"\n              loading=\"lazy\"\n            >\n\n          <\/div>\n\n        <\/div>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-back\"\n          id=\"kz-back-plus-yearly\"\n        >\n\n          <span\n            class=\"kz-back-arrow\"\n            aria-hidden=\"true\"\n          >\n            \u2190\n          <\/span>\n\n          <span>\n            Zur\u00fcck\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n    `;\n\n\n    document\n      .getElementById(\n        \"kz-back-plus-yearly\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          showNetzleserQuestion();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     DIGITAL PLUS\n  ======================================== *\/\n\n  function showDigitalPlusResult() {\n\n    setProgress(\n      3,\n      100\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Empfehlung\";\n\n\n    content.innerHTML = `\n\n      <div class=\"kz-result\">\n\n        <h2 class=\"kz-title\">\n          Dann haben wir das passende Abo f\u00fcr dich\n        <\/h2>\n\n        <div class=\"kz-result-box\">\n\n          <div class=\"kz-result-content\">\n\n            <div class=\"kz-result-label\">\n              Unsere Empfehlung\n            <\/div>\n\n            <h3 class=\"kz-result-title\">\n              Digital Plus\n            <\/h3>\n\n            <p class=\"kz-result-text\">\n              Und mit dem Rabattcode\n              <strong>Kombi10<\/strong>\n              geben wir dir 10 Euro Erm\u00e4\u00dfigung\n              auf das erste Jahr KRAUTZONE.\n            <\/p>\n\n            <p class=\"kz-discount\">\n              Rabattcode:\n              <strong>Kombi10<\/strong>\n            <\/p>\n\n            <a\n              class=\"kz-cta\"\n              href=\"https:\/\/kraut-zone.de\/laden\/produkt\/krautzone-kombiabo\/\"\n            >\n\n              <span>\n                Digital Plus\n              <\/span>\n\n              <span\n                class=\"kz-arrow\"\n                aria-hidden=\"true\"\n              >\n                \u2192\n              <\/span>\n\n            <\/a>\n\n          <\/div>\n\n          <div class=\"kz-result-image\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/kraut-zone.de\/laden\/wp-content\/uploads\/sites\/2\/2026\/08\/Vorlage-Kombi1.png\"\n              alt=\"KRAUTZONE Digital Plus\"\n              loading=\"lazy\"\n            >\n\n          <\/div>\n\n        <\/div>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-back\"\n          id=\"kz-back-digital-plus\"\n        >\n\n          <span\n            class=\"kz-back-arrow\"\n            aria-hidden=\"true\"\n          >\n            \u2190\n          <\/span>\n\n          <span>\n            Zur\u00fcck\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n    `;\n\n\n    document\n      .getElementById(\n        \"kz-back-digital-plus\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          showGemischtQuestion();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     NORMALABO\n  ======================================== *\/\n\n  function showNormalResult() {\n\n    setProgress(\n      3,\n      100\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Empfehlung\";\n\n\n    content.innerHTML = `\n\n      <div class=\"kz-result\">\n\n        <h2 class=\"kz-title\">\n          Dann haben wir das passende Abo f\u00fcr dich\n        <\/h2>\n\n        <div class=\"kz-result-box\">\n\n          <div class=\"kz-result-content\">\n\n            <div class=\"kz-result-label\">\n              Unsere Empfehlung\n            <\/div>\n\n            <h3 class=\"kz-result-title\">\n              Normalabo\n            <\/h3>\n\n            <p class=\"kz-result-text\">\n              Und mit dem Rabattcode\n              <strong>Print5<\/strong>\n              geben wir dir 5 Euro Erm\u00e4\u00dfigung\n              auf das erste Jahr KRAUTZONE.\n            <\/p>\n\n            <p class=\"kz-discount\">\n              Rabattcode:\n              <strong>Print5<\/strong>\n            <\/p>\n\n            <a\n              class=\"kz-cta\"\n              href=\"https:\/\/kraut-zone.de\/laden\/produkt\/normalabo\/\"\n            >\n\n              <span>\n                Normalabo\n              <\/span>\n\n              <span\n                class=\"kz-arrow\"\n                aria-hidden=\"true\"\n              >\n                \u2192\n              <\/span>\n\n            <\/a>\n\n          <\/div>\n\n          <div class=\"kz-result-image\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/kraut-zone.de\/laden\/wp-content\/uploads\/sites\/2\/2026\/08\/Normalabo-Teaser1.png\"\n              alt=\"KRAUTZONE Normalabo\"\n              loading=\"lazy\"\n            >\n\n          <\/div>\n\n        <\/div>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-back\"\n          id=\"kz-back-normal\"\n        >\n\n          <span\n            class=\"kz-back-arrow\"\n            aria-hidden=\"true\"\n          >\n            \u2190\n          <\/span>\n\n          <span>\n            Zur\u00fcck\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n    `;\n\n\n    document\n      .getElementById(\n        \"kz-back-normal\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          showHeftleserQuestion();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     DIGITALABO\n  ======================================== *\/\n\n  function showDigitalResult() {\n\n    setProgress(\n      3,\n      100\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Empfehlung\";\n\n\n    content.innerHTML = `\n\n      <div class=\"kz-result\">\n\n        <h2 class=\"kz-title\">\n          Dann haben wir das passende Abo f\u00fcr dich\n        <\/h2>\n\n        <div class=\"kz-result-box\">\n\n          <div class=\"kz-result-content\">\n\n            <div class=\"kz-result-label\">\n              Unsere Empfehlung\n            <\/div>\n\n            <h3 class=\"kz-result-title\">\n              Digitalabo\n            <\/h3>\n\n            <p class=\"kz-result-text\">\n              Und mit dem Rabattcode\n              <strong>Digital5<\/strong>\n              geben wir dir 5 Euro Erm\u00e4\u00dfigung\n              auf das erste Jahr KRAUTZONE.\n            <\/p>\n\n            <p class=\"kz-discount\">\n              Rabattcode:\n              <strong>Digital5<\/strong>\n            <\/p>\n\n            <a\n              class=\"kz-cta\"\n              href=\"https:\/\/kraut-zone.de\/laden\/produkt\/elektronisches-abo-pdf\/\"\n            >\n\n              <span>\n                Digitalabo\n              <\/span>\n\n              <span\n                class=\"kz-arrow\"\n                aria-hidden=\"true\"\n              >\n                \u2192\n              <\/span>\n\n            <\/a>\n\n          <\/div>\n\n          <div class=\"kz-result-image\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/kraut-zone.de\/laden\/wp-content\/uploads\/sites\/2\/2020\/11\/Vorlage-Digital.png\"\n              alt=\"KRAUTZONE Digitalabo\"\n              loading=\"lazy\"\n            >\n\n          <\/div>\n\n        <\/div>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-back\"\n          id=\"kz-back-digital\"\n        >\n\n          <span\n            class=\"kz-back-arrow\"\n            aria-hidden=\"true\"\n          >\n            \u2190\n          <\/span>\n\n          <span>\n            Zur\u00fcck\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n    `;\n\n\n    document\n      .getElementById(\n        \"kz-back-digital\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          showHeftleserQuestion();\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     KAISERABO\n  ======================================== *\/\n\n  function showKaiserResult(\n    source\n  ) {\n\n    setProgress(\n      3,\n      100\n    );\n\n    kicker.textContent =\n      \"Abo-Berater \u00b7 Empfehlung\";\n\n\n    content.innerHTML = `\n\n      <div class=\"kz-result\">\n\n        <h2 class=\"kz-title\">\n          Dann haben wir das passende Abo f\u00fcr dich\n        <\/h2>\n\n        <div class=\"kz-result-box\">\n\n          <div class=\"kz-result-content\">\n\n            <div class=\"kz-result-label\">\n              Unsere Empfehlung\n            <\/div>\n\n            <h3 class=\"kz-result-title\">\n              Kaiserabo\n            <\/h3>\n\n            <p class=\"kz-result-text\">\n              Und mit dem Rabattcode\n              <strong>Kaiser10<\/strong>\n              geben wir dir 10 Euro Erm\u00e4\u00dfigung\n              auf das erste Jahr KRAUTZONE.\n            <\/p>\n\n            <p class=\"kz-discount\">\n              Rabattcode:\n              <strong>Kaiser10<\/strong>\n            <\/p>\n\n            <a\n              class=\"kz-cta\"\n              href=\"https:\/\/kraut-zone.de\/laden\/produkt\/kaiserabo\/\"\n            >\n\n              <span>\n                Kaiserabo\n              <\/span>\n\n              <span\n                class=\"kz-arrow\"\n                aria-hidden=\"true\"\n              >\n                \u2192\n              <\/span>\n\n            <\/a>\n\n          <\/div>\n\n          <div class=\"kz-result-image\">\n\n            <img decoding=\"async\"\n              src=\"https:\/\/kraut-zone.de\/laden\/wp-content\/uploads\/sites\/2\/2025\/09\/Kaiser_teaser1.png\"\n              alt=\"KRAUTZONE Kaiserabo\"\n              loading=\"lazy\"\n            >\n\n          <\/div>\n\n        <\/div>\n\n\n        <button\n          type=\"button\"\n          class=\"kz-back\"\n          id=\"kz-back-kaiser\"\n        >\n\n          <span\n            class=\"kz-back-arrow\"\n            aria-hidden=\"true\"\n          >\n            \u2190\n          <\/span>\n\n          <span>\n            Zur\u00fcck\n          <\/span>\n\n        <\/button>\n\n      <\/div>\n    `;\n\n\n    document\n      .getElementById(\n        \"kz-back-kaiser\"\n      )\n      .addEventListener(\n        \"click\",\n        function () {\n\n          if (\n            source === \"gemischt\"\n          ) {\n\n            showGemischtQuestion();\n\n          } else {\n\n            showHeftleserQuestion();\n\n          }\n\n        }\n      );\n\n  }\n\n\n  \/* ========================================\n     START\n  ======================================== *\/\n\n  showQuestion1();\n\n})();\n<\/script>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Abo-Berater \u00b7 Lesetyp Frage 01 03<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-23916","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/pages\/23916","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/comments?post=23916"}],"version-history":[{"count":2,"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/pages\/23916\/revisions"}],"predecessor-version":[{"id":23944,"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/pages\/23916\/revisions\/23944"}],"wp:attachment":[{"href":"https:\/\/kraut-zone.de\/laden\/wp-json\/wp\/v2\/media?parent=23916"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}