{"id":48633,"date":"2026-06-02T09:15:05","date_gmt":"2026-06-02T09:15:05","guid":{"rendered":"https:\/\/www.cnshining.com\/?page_id=48633"},"modified":"2026-06-02T09:25:24","modified_gmt":"2026-06-02T09:25:24","slug":"durchmesserrechner-fur-metalldosen","status":"publish","type":"page","link":"https:\/\/www.cnshining.com\/de\/verpackungswerkzeugzentrum\/durchmesserrechner-fur-metalldosen","title":{"rendered":"Durchmesserrechner f\u00fcr Metalldosen"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"48633\" class=\"elementor elementor-48633\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1e4ac71a e-flex e-con-boxed e-con e-parent\" data-id=\"1e4ac71a\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d7ae074 elementor-icon-list--layout-inline elementor-align-center elementor-list-item-link-full_width elementor-widget elementor-widget-icon-list\" data-id=\"d7ae074\" data-element_type=\"widget\" data-widget_type=\"icon-list.default\">\n\t\t\t\t\t\t\t<ul class=\"elementor-icon-list-items elementor-inline-items\">\n\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/de\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-icon\">\n\t\t\t\t\t\t\t<svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-home\" viewbox=\"0 0 576 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M280.37 148.26L96 300.11V464a16 16 0 0 0 16 16l112.06-.29a16 16 0 0 0 15.92-16V368a16 16 0 0 1 16-16h64a16 16 0 0 1 16 16v95.64a16 16 0 0 0 16 16.05L464 480a16 16 0 0 0 16-16V300L295.67 148.26a12.19 12.19 0 0 0-15.3 0zM571.6 251.47L488 182.56V44.05a12 12 0 0 0-12-12h-56a12 12 0 0 0-12 12v72.61L318.47 43a48 48 0 0 0-61 0L4.34 251.47a12 12 0 0 0-1.6 16.9l25.5 31A12 12 0 0 0 45.15 301l235.22-193.74a12.19 12.19 0 0 1 15.3 0L530.9 301a12 12 0 0 0 16.9-1.6l25.5-31a12 12 0 0 0-1.7-16.93z\"><\/path><\/svg>\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Heim \/<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t\t\t<li class=\"elementor-icon-list-item elementor-inline-item\">\n\t\t\t\t\t\t\t\t\t\t\t<a href=\"https:\/\/www.cnshining.com\/de\/verpackungswerkzeugzentrum\/\" target=\"_blank\">\n\n\t\t\t\t\t\t\t\t\t\t\t<span class=\"elementor-icon-list-text\">Verpackungswerkzeugzentrum<\/span>\n\t\t\t\t\t\t\t\t\t\t\t<\/a>\n\t\t\t\t\t\t\t\t\t<\/li>\n\t\t\t\t\t\t<\/ul>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2b4f7e93 e-flex e-con-boxed e-con e-parent\" data-id=\"2b4f7e93\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-c6722f3 e-con-full e-flex e-con e-child\" data-id=\"c6722f3\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-35015ca elementor-widget elementor-widget-html\" data-id=\"35015ca\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<section class=\"sp-mct-simple\" data-sp-mct-simple>\r\n  <style>\r\n    .sp-mct-simple {\r\n      --sp-bg: #f5f7fb;\r\n      --sp-panel: #ffffff;\r\n      --sp-text: #152033;\r\n      --sp-muted: #5f708c;\r\n      --sp-line: #d8e2ef;\r\n      --sp-blue: #1363df;\r\n      --sp-blue-dark: #082a5e;\r\n      --sp-soft-blue: #edf4ff;\r\n      --sp-silver: #eef3fa;\r\n      --sp-warning: #fff8eb;\r\n      --sp-warning-line: #f4c36a;\r\n      --sp-good: #0f8a5f;\r\n      --sp-shadow: 0 20px 48px rgba(8, 42, 94, .08);\r\n      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Arial, sans-serif;\r\n      color: var(--sp-text);\r\n      max-width: 1180px;\r\n      margin: 28px auto;\r\n      line-height: 1.55;\r\n      box-sizing: border-box;\r\n    }\r\n\r\n    .sp-mct-simple *,\r\n    .sp-mct-simple *::before,\r\n    .sp-mct-simple *::after { box-sizing: border-box; }\r\n\r\n    .sp-mct-shell {\r\n      background: linear-gradient(180deg, #fbfcfe 0%, var(--sp-bg) 100%);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 30px;\r\n      padding: clamp(24px, 5vw, 56px);\r\n      box-shadow: 0 12px 30px rgba(15, 36, 74, .04);\r\n    }\r\n\r\n    .sp-mct-hero {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) minmax(380px, .98fr);\r\n      gap: clamp(28px, 5vw, 56px);\r\n      align-items: center;\r\n    }\r\n\r\n    .sp-mct-eyebrow {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin: 0 0 18px;\r\n      padding: 8px 14px;\r\n      border: 1px solid #bcd0f1;\r\n      border-radius: 999px;\r\n      background: #fff;\r\n      color: var(--sp-blue);\r\n      font-size: 13px;\r\n      font-weight: 800;\r\n      letter-spacing: .02em;\r\n      text-transform: uppercase;\r\n    }\r\n\r\n    .sp-mct-eyebrow::before {\r\n      content: \"\";\r\n      width: 9px;\r\n      height: 9px;\r\n      border-radius: 50%;\r\n      background: var(--sp-blue);\r\n      box-shadow: 0 0 0 5px rgba(19, 99, 223, .12);\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    .sp-mct-title {\r\n      margin: 0 0 18px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(38px, 5vw, 58px);\r\n      line-height: .98;\r\n      letter-spacing: -.05em;\r\n\r\n    }\r\n\r\n    .sp-mct-copy {\r\n      margin: 0 0 28px;\r\n      max-width: 680px;\r\n      color: var(--sp-muted);\r\n      font-size: clamp(16px, 2vw, 18px);\r\n    }\r\n\r\n    .sp-mct-feature-row {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, minmax(0, 1fr));\r\n      gap: 14px;\r\n    }\r\n\r\n    .sp-mct-feature {\r\n      min-height: 112px;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 16px;\r\n    }\r\n\r\n    .sp-mct-feature strong {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.25;\r\n      letter-spacing: -.02em;\r\n    }\r\n\r\n    .sp-mct-feature span {\r\n      display: block;\r\n      color: var(--sp-muted);\r\n      font-size: 13px;\r\n    }\r\n\r\n\r\n\r\n    .sp-mct-principle {\r\n      max-width: 560px;\r\n      margin-top: 22px;\r\n      border: 1px solid rgba(19, 99, 223, .18);\r\n      border-radius: 20px;\r\n      background: rgba(255, 255, 255, .78);\r\n      padding: 18px;\r\n      box-shadow: 0 12px 30px rgba(22, 32, 51, .035);\r\n    }\r\n\r\n    .sp-mct-principle-title {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      margin: 0 0 12px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 18px;\r\n      line-height: 1.2;\r\n      font-weight: 900;\r\n      letter-spacing: -.02em;\r\n    }\r\n\r\n    .sp-mct-principle-title::before {\r\n      content: \"\";\r\n      width: 9px;\r\n      height: 9px;\r\n      border-radius: 50%;\r\n      background: var(--sp-blue);\r\n      box-shadow: 0 0 0 5px rgba(19, 99, 223, .10);\r\n      flex: 0 0 auto;\r\n    }\r\n\r\n    .sp-mct-principle-list {\r\n      display: grid;\r\n      gap: 10px;\r\n      margin: 0;\r\n      padding: 0;\r\n      list-style: none;\r\n    }\r\n\r\n    .sp-mct-principle-list li {\r\n      margin: 0;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    .sp-mct-principle-list strong {\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n    }\r\n\r\n    .sp-mct-principle-example {\r\n      margin-top: 13px;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      background: var(--sp-soft-blue);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 14px;\r\n      font-weight: 800;\r\n      line-height: 1.45;\r\n    }\r\n\r\n    .sp-mct-card {\r\n      position: relative;\r\n      width: 100%;\r\n      overflow: hidden;\r\n      background: var(--sp-panel);\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 24px;\r\n      box-shadow: var(--sp-shadow);\r\n      padding: clamp(22px, 3vw, 30px);\r\n    }\r\n\r\n    .sp-mct-card::before {\r\n      content: \"\";\r\n      position: absolute;\r\n      inset: 0 0 auto;\r\n      height: 5px;\r\n      background: linear-gradient(90deg, var(--sp-blue), var(--sp-blue-dark));\r\n    }\r\n\r\n    .sp-mct-card-title {\r\n      margin: 0;\r\n      color: var(--sp-blue-dark);\r\n      font-size: 25px;\r\n      line-height: 1.1;\r\n      letter-spacing: -.03em;\r\n    }\r\n\r\n    .sp-mct-card-subtitle {\r\n      margin: 8px 0 18px;\r\n      color: var(--sp-muted);\r\n      font-size: 14px;\r\n    }\r\n\r\n    .sp-mct-field-grid {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 14px;\r\n    }\r\n\r\n    .sp-mct-field {\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px;\r\n      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;\r\n    }\r\n\r\n    .sp-mct-field.is-active,\r\n    .sp-mct-field:focus-within {\r\n      border-color: rgba(19, 99, 223, .58);\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .10);\r\n      transform: translateY(-1px);\r\n    }\r\n\r\n    .sp-mct-label {\r\n      display: block;\r\n      margin-bottom: 8px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      text-transform: uppercase;\r\n      letter-spacing: .055em;\r\n    }\r\n\r\n    .sp-mct-input-row {\r\n      display: grid;\r\n      grid-template-columns: minmax(0, 1fr) auto;\r\n      gap: 12px;\r\n      align-items: center;\r\n    }\r\n\r\n    .sp-mct-field input {\r\n      width: 100%;\r\n      min-width: 0;\r\n      border: 0 !important;\r\n      outline: 0 !important;\r\n      box-shadow: none !important;\r\n      background: transparent !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 2px 0 !important;\r\n      margin: 0 !important;\r\n      line-height: 1.1;\r\n      font-size: clamp(24px, 4vw, 38px);\r\n      font-weight: 900;\r\n      letter-spacing: -.04em;\r\n      appearance: textfield;\r\n      -webkit-appearance: none;\r\n      border-radius: 0;\r\n    }\r\n\r\n    .sp-mct-field input::-webkit-outer-spin-button,\r\n    .sp-mct-field input::-webkit-inner-spin-button {\r\n      -webkit-appearance: none;\r\n      margin: 0;\r\n    }\r\n\r\n    .sp-mct-unit {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      min-width: 78px;\r\n      padding: 9px 12px;\r\n      border-radius: 999px;\r\n      background: var(--sp-silver);\r\n      color: var(--sp-blue);\r\n      font-size: 14px;\r\n      font-weight: 900;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-results {\r\n      display: grid;\r\n      grid-template-columns: 1fr;\r\n      gap: 12px;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .sp-mct-result {\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n      padding: 14px;\r\n    }\r\n\r\n    .sp-mct-result span {\r\n      display: block;\r\n      margin-bottom: 6px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      text-transform: uppercase;\r\n      letter-spacing: .05em;\r\n    }\r\n\r\n    .sp-mct-result strong {\r\n      display: block;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(21px, 3vw, 30px);\r\n      line-height: 1.08;\r\n      letter-spacing: -.04em;\r\n    }\r\n\r\n    .sp-mct-result em {\r\n      display: block;\r\n      margin-top: 6px;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-style: normal;\r\n    }\r\n\r\n    .sp-mct-warning {\r\n      margin-top: 14px;\r\n      padding: 14px 15px;\r\n      border: 1px solid var(--sp-warning-line);\r\n      border-radius: 16px;\r\n      background: var(--sp-warning);\r\n      color: #6a4a12;\r\n      font-size: 13px;\r\n    }\r\n\r\n    .sp-mct-actions {\r\n      display: grid;\r\n      grid-template-columns: 1fr 1fr 1fr;\r\n      gap: 10px;\r\n      margin-top: 16px;\r\n    }\r\n\r\n    .sp-mct-btn,\r\n    .sp-mct-chip {\r\n      cursor: pointer;\r\n      appearance: none;\r\n      -webkit-appearance: none;\r\n      font-family: inherit;\r\n    }\r\n\r\n    .sp-mct-btn {\r\n      border: 1px solid var(--sp-line) !important;\r\n      border-radius: 13px !important;\r\n      background: #fff !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 12px 14px !important;\r\n      font-size: 14px !important;\r\n      font-weight: 800 !important;\r\n      line-height: 1.2 !important;\r\n      text-align: center !important;\r\n      transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;\r\n    }\r\n\r\n    .sp-mct-btn:hover,\r\n    .sp-mct-btn:focus-visible {\r\n      transform: translateY(-1px);\r\n      border-color: rgba(19, 99, 223, .4) !important;\r\n      background: #f7fbff !important;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .05);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-mct-btn-primary {\r\n      border-color: transparent !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      color: #fff !important;\r\n      box-shadow: 0 12px 28px rgba(19, 99, 223, .18);\r\n    }\r\n\r\n    .sp-mct-btn-primary:hover,\r\n    .sp-mct-btn-primary:focus-visible {\r\n      background: linear-gradient(135deg, var(--sp-blue-dark), var(--sp-blue)) !important;\r\n      color: #fff !important;\r\n    }\r\n\r\n    .sp-mct-section { margin-top: 38px; }\r\n\r\n    .sp-mct-section h3 {\r\n      margin: 0 0 10px;\r\n      color: var(--sp-blue-dark);\r\n      font-size: clamp(24px, 3vw, 34px);\r\n      line-height: 1.15;\r\n      letter-spacing: -.04em;\r\n    }\r\n\r\n    .sp-mct-section p {\r\n      max-width: 900px;\r\n      margin: 0 0 18px;\r\n      color: var(--sp-muted);\r\n      font-size: 16px;\r\n    }\r\n\r\n    .sp-mct-quick-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(6, minmax(0, 1fr));\r\n      gap: 12px;\r\n    }\r\n\r\n    .sp-mct-chip {\r\n      width: 100%;\r\n      min-height: 88px;\r\n      border: 1px solid var(--sp-line) !important;\r\n      border-radius: 18px !important;\r\n      background: #fff !important;\r\n      color: var(--sp-blue-dark) !important;\r\n      padding: 14px 15px !important;\r\n      text-align: left !important;\r\n      overflow: hidden;\r\n      box-shadow: 0 10px 24px rgba(22, 32, 51, .04);\r\n      transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;\r\n    }\r\n\r\n    .sp-mct-chip:hover,\r\n    .sp-mct-chip:focus-visible {\r\n      transform: translateY(-2px);\r\n      border-color: rgba(19, 99, 223, .42) !important;\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .10);\r\n      outline: none;\r\n    }\r\n\r\n    .sp-mct-chip.is-active {\r\n      border-color: transparent !important;\r\n      background: linear-gradient(135deg, var(--sp-blue), var(--sp-blue-dark)) !important;\r\n      box-shadow: 0 14px 34px rgba(19, 99, 223, .20);\r\n      color: #fff !important;\r\n    }\r\n\r\n    .sp-mct-chip strong {\r\n      display: block;\r\n      color: currentColor !important;\r\n      -webkit-text-fill-color: currentColor !important;\r\n      font-size: 18px;\r\n      line-height: 1.2;\r\n      letter-spacing: -.02em;\r\n      word-break: break-word;\r\n    }\r\n\r\n    .sp-mct-chip span {\r\n      display: block;\r\n      margin-top: 6px;\r\n      color: var(--sp-muted) !important;\r\n      -webkit-text-fill-color: var(--sp-muted) !important;\r\n      font-size: 12px;\r\n      line-height: 1.35;\r\n      word-break: break-word;\r\n    }\r\n\r\n    .sp-mct-chip.is-active span {\r\n      color: rgba(255, 255, 255, .86) !important;\r\n      -webkit-text-fill-color: rgba(255, 255, 255, .86) !important;\r\n    }\r\n\r\n    .sp-mct-panel {\r\n      background: #fff;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 28px;\r\n      padding: clamp(18px, 2.6vw, 28px);\r\n      box-shadow: 0 14px 34px rgba(22, 32, 51, .05);\r\n    }\r\n\r\n    .sp-mct-table-wrap {\r\n      overflow-x: auto;\r\n      border: 1px solid var(--sp-line);\r\n      border-radius: 18px;\r\n      background: #fff;\r\n    }\r\n\r\n    .sp-mct-table {\r\n      width: 100%;\r\n      min-width: 680px;\r\n      border-collapse: collapse;\r\n    }\r\n\r\n    .sp-mct-table th,\r\n    .sp-mct-table td {\r\n      padding: 13px 15px;\r\n      border-bottom: 1px solid var(--sp-line);\r\n      text-align: left;\r\n      font-size: 14px;\r\n      vertical-align: top;\r\n    }\r\n\r\n    .sp-mct-table th {\r\n      background: #f1f5fb;\r\n      color: var(--sp-muted);\r\n      font-size: 12px;\r\n      font-weight: 900;\r\n      text-transform: uppercase;\r\n      letter-spacing: .05em;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-table tr:last-child td { border-bottom: 0; }\r\n\r\n    .sp-mct-table code {\r\n      display: inline-block;\r\n      padding: 3px 7px;\r\n      border-radius: 999px;\r\n      background: var(--sp-soft-blue);\r\n      color: var(--sp-blue-dark);\r\n      font-weight: 900;\r\n      font-size: 13px;\r\n    }\r\n\r\n    .sp-mct-badge {\r\n      display: inline-flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n      padding: 4px 8px;\r\n      border-radius: 999px;\r\n      background: var(--sp-silver);\r\n      color: var(--sp-blue-dark);\r\n      font-size: 12px;\r\n      font-weight: 850;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .sp-mct-badge.is-good {\r\n      background: #eaf8f2;\r\n      color: var(--sp-good);\r\n    }\r\n\r\n    .sp-mct-toast {\r\n      position: fixed;\r\n      right: 20px;\r\n      bottom: 20px;\r\n      z-index: 99999;\r\n      transform: translateY(18px);\r\n      opacity: 0;\r\n      pointer-events: none;\r\n      background: #082a5e;\r\n      color: #fff;\r\n      padding: 12px 14px;\r\n      border-radius: 14px;\r\n      box-shadow: 0 18px 50px rgba(8, 42, 94, .22);\r\n      transition: opacity .18s ease, transform .18s ease;\r\n      font-weight: 800;\r\n      font-size: 14px;\r\n    }\r\n\r\n    .sp-mct-toast.is-visible {\r\n      opacity: 1;\r\n      transform: translateY(0);\r\n    }\r\n\r\n    @media (max-width: 1080px) {\r\n      .sp-mct-quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 920px) {\r\n      .sp-mct-hero { grid-template-columns: 1fr; }\r\n      .sp-mct-feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }\r\n      .sp-mct-quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }\r\n    }\r\n\r\n    @media (max-width: 720px) {\r\n      .sp-mct-actions,\r\n      .sp-mct-results { grid-template-columns: 1fr; }\r\n      .sp-mct-title { font-size: 38px; }\r\n    }\r\n\r\n    @media (max-width: 620px) {\r\n      .sp-mct-shell { padding: 22px 16px; }\r\n      .sp-mct-feature-row,\r\n      .sp-mct-quick-grid { grid-template-columns: 1fr; }\r\n      .sp-mct-btn { width: 100%; }\r\n      .sp-mct-unit { min-width: 70px; }\r\n    }\r\n\r\n    .sp-mct-simple .sp-mct-chip,\r\n    .sp-mct-simple .sp-mct-chip strong,\r\n    .sp-mct-simple .sp-mct-chip span,\r\n    .sp-mct-simple .sp-mct-unit,\r\n    .sp-mct-simple .sp-mct-table td { text-transform: none !important; }\r\n  <\/style>\r\n\r\n  <div class=\"sp-mct-shell\">\r\n    <div class=\"sp-mct-hero\">\r\n      <div class=\"sp-mct-intro\">\r\n        <span class=\"sp-mct-eyebrow\">Shining Packaging Werkzeugeinheit<\/span>\r\n        <h2 class=\"sp-mct-title\">Durchmesserrechner f\u00fcr Metalldosen<\/h2>\r\n        <p class=\"sp-mct-copy\">\r\n          Geben Sie einen Code, einen Dezimalwert in Zoll oder einen Millimeterwert ein. Die Felder f\u00fcr Code, Zoll und Millimeter werden in Echtzeit aktualisiert.\r\n        <\/p>\r\n\r\n        <div class=\"sp-mct-principle\" aria-label=\"Berechnungsprinzip\">\r\n          <h3 class=\"sp-mct-principle-title\">Berechnungsprinzip<\/h3>\r\n          <ul class=\"sp-mct-principle-list\">\r\n            <li><strong>Code:<\/strong> Die erste Ziffer gibt den Wert in ganzen Zoll an; die letzten beiden Ziffern geben die Sechzehntel eines Zolls an.<\/li>\r\n            <li><strong>Zoll:<\/strong> Der Code wird in einen Dezimalwert in Zoll umgerechnet.<\/li>\r\n            <li><strong>Millimeter:<\/strong> Der Dezimalwert in Zoll wird in Millimeter umgerechnet.<\/li>\r\n          <\/ul>\r\n          <div class=\"sp-mct-principle-example\">Beispiel: 202 \u2192 2 + 2\/16 Zoll \u2192 2,125 Zoll \u2192 53,97 mm<\/div>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"sp-mct-card\" aria-labelledby=\"sp-mct-title\">\r\n        <h3 id=\"sp-mct-title\" class=\"sp-mct-card-title\">Code \/ Zoll \/ mm Eingabe<\/h3>\r\n        <p class=\"sp-mct-card-subtitle\">Geben Sie etwas in ein beliebiges Feld ein \u2013 die anderen Felder werden automatisch aktualisiert.<\/p>\r\n\r\n        <div class=\"sp-mct-field-grid\">\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"code\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-code-input\">Code<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-code-input\" data-code-input type=\"text\" inputmode=\"text\" autocomplete=\"off\" placeholder=\"202, 211 oder 300\" aria-label=\"Gr\u00f6\u00dfencode\">\r\n              <span class=\"sp-mct-unit\">Code<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"inch\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-inch-input\">Zoll<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-inch-input\" data-inch-input type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"2.125\" aria-label=\"Dezimalzoll\">\r\n              <span class=\"sp-mct-unit\">In<\/span>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"sp-mct-field\" data-field-wrap=\"mm\">\r\n            <label class=\"sp-mct-label\" for=\"sp-mct-mm-input\">Millimeter<\/label>\r\n            <div class=\"sp-mct-input-row\">\r\n              <input id=\"sp-mct-mm-input\" data-mm-input type=\"text\" inputmode=\"decimal\" autocomplete=\"off\" placeholder=\"53.98\" aria-label=\"Millimeter\">\r\n              <span class=\"sp-mct-unit\">mm<\/span>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"sp-mct-results\" aria-label=\"Suchergebnisse\">\r\n          <div class=\"sp-mct-result\">\r\n            <span>Gemeinsame mm-Referenz<\/span>\r\n            <strong data-practical-mm>\u2014<\/strong>\r\n          <\/div>\r\n        <\/div>\r\n<div class=\"sp-mct-warning\">\r\n          Die mm-Eingabe verwendet den Nennwert zur Synchronisierung. G\u00e4ngige mm-Referenzwerte k\u00f6nnen vom Nennwert abweichen. Best\u00e4tigen Sie die endg\u00fcltigen Ma\u00dfe anhand der Lieferantenzeichnung, bevor Sie Produktion, Werkzeugbau oder Abf\u00fcllanlage einrichten.\r\n        <\/div>\r\n\r\n        <div class=\"sp-mct-actions\">\r\n          <button class=\"sp-mct-btn sp-mct-btn-primary\" type=\"button\" data-copy-all>Ergebnisse kopieren<\/button>\r\n          <button class=\"sp-mct-btn\" type=\"button\" data-reset>Auf 202 zur\u00fccksetzen<\/button>\r\n          <button class=\"sp-mct-btn\" type=\"button\" data-clear>Klar<\/button>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-section\">\r\n    <h3>Schnellumrechnungstabelle<\/h3>\r\n    <p>Klicken Sie auf einen Code, um dessen Werte zu laden.<\/p>\r\n    <div class=\"sp-mct-quick-grid\" data-quick-grid><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-section\">\r\n    <div class=\"sp-mct-panel\">\r\n      <h3>Dosen-Dimensionsumrechnungstabelle<\/h3>\r\n\r\n      <div class=\"sp-mct-table-wrap\">\r\n        <table class=\"sp-mct-table\">\r\n          <thead>\r\n            <tr>\r\n              <th>Code<\/th>\r\n              <th>Zoll<\/th>\r\n              <th>mm<\/th>\r\n              <th>Gemeinsame mm-Referenz<\/th>\r\n            <\/tr>\r\n          <\/thead>\r\n          <tbody data-chart-body><\/tbody>\r\n        <\/table>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"sp-mct-toast\" data-toast role=\"status\" aria-live=\"polite\">Kopiert<\/div>\r\n\r\n  <script>\r\n    (function () {\r\n      const root = document.currentScript.closest('[data-sp-mct-simple]');\r\n      if (!root || root.dataset.spMctSimpleReady === 'true') return;\r\n      root.dataset.spMctSimpleReady = 'true';\r\n\r\n      const commonReferences = {\r\n        '112': '45 mm',\r\n        '115': '49 mm',\r\n        '200': '50\u201350.8 mm',\r\n        '202': '52 \/ 52.4\u201352.5 \/ 53.3\u201353.4 mm',\r\n        '204': '57.4 mm',\r\n        '205': '57 mm',\r\n        '206': '60.3 mm',\r\n        '209': '65.1 mm',\r\n        '211': '65 \/ 66.1\u201366.2 mm',\r\n        '214': '70 mm',\r\n        '215': '74.6 mm',\r\n        '300': '73 \/ 76.2 mm',\r\n        '301': '77.8 mm',\r\n        '303': '81.0 mm',\r\n        '307': '87.3 mm',\r\n        '315': '100.0 mm',\r\n        '401': '104.8 mm',\r\n        '404': '111.1 mm',\r\n        '502': '132.6 mm',\r\n        '603': '159.5 mm'\r\n      };\r\n\r\n      const tableCodes = [\r\n        '112', '115', '200', '202', '204', '205', '206', '209', '211', '214', '215',\r\n        '300', '301', '303', '307', '315', '401', '404', '502', '603'\r\n      ];\r\n\r\n      const quickItems = [\r\n        '112', '115', '200', '202', '204', '205', '206', '209', '211', '214', '215',\r\n        '300', '301', '303', '307', '315', '401', '404', '502', '603'\r\n      ];\r\n\r\n      const codeInput = root.querySelector('[data-code-input]');\r\n      const inchInput = root.querySelector('[data-inch-input]');\r\n      const mmInput = root.querySelector('[data-mm-input]');\r\n      const practicalMm = root.querySelector('[data-practical-mm]');\r\n      const quickGrid = root.querySelector('[data-quick-grid]');\r\n      const chartBody = root.querySelector('[data-chart-body]');\r\n      const toast = root.querySelector('[data-toast]');\r\n\r\n      let activeChip = null;\r\n      let toastTimer = null;\r\n      let isSyncing = false;\r\n\r\n      function cleanCode(value) {\r\n        return String(value || '')\r\n          .trim()\r\n          .replace(\/[\u00d7\uff0a*]\/g, 'x')\r\n          .replace(\/\\s+\/g, ' ')\r\n          .toUpperCase();\r\n      }\r\n\r\n      function parseUserNumber(value) {\r\n        const cleaned = String(value || '').replace(\/,\/g, '').trim();\r\n        if (cleaned === '' || cleaned === '-' || cleaned === '.' || cleaned === '-.') return NaN;\r\n        return Number(cleaned);\r\n      }\r\n\r\n      function parseSingleCode(value) {\r\n        const match = String(value || '').trim().match(\/^(\\d)(\\d{2})$\/);\r\n        if (!match) return null;\r\n        const inchesWhole = Number(match[1]);\r\n        const sixteenths = Number(match[2]);\r\n        if (!Number.isFinite(inchesWhole) || !Number.isFinite(sixteenths) || sixteenths > 15) return null;\r\n        const inches = inchesWhole + sixteenths \/ 16;\r\n        return {\r\n          code: match[1] + match[2],\r\n          inches: inches,\r\n          mm: inches * 25.4\r\n        };\r\n      }\r\n\r\n      function parseCodeInput(value) {\r\n        const cleaned = cleanCode(value);\r\n        if (!cleaned) return null;\r\n        const match = cleaned.match(\/\\d{3}\/);\r\n        if (!match) return null;\r\n        const diameter = parseSingleCode(match[0]);\r\n        if (!diameter) return null;\r\n        return { raw: cleaned, diameter: diameter };\r\n      }\r\n\r\n      function codeFromInches(inches) {\r\n        if (!Number.isFinite(inches) || inches < 0) return null;\r\n        let whole = Math.floor(inches);\r\n        let sixteenths = Math.round((inches - whole) * 16);\r\n        if (sixteenths >= 16) {\r\n          whole += 1;\r\n          sixteenths = 0;\r\n        }\r\n        if (whole < 0 || whole > 9) return null;\r\n        const code = String(whole) + String(sixteenths).padStart(2, '0');\r\n        return parseSingleCode(code);\r\n      }\r\n\r\n      function formatNumber(value, decimals) {\r\n        if (!Number.isFinite(value)) return '';\r\n        return value.toFixed(decimals).replace(\/\\.?0+$\/, '') || '0';\r\n      }\r\n\r\n      function getCommon(code) {\r\n        return commonReferences[code] || '\u2014';\r\n      }\r\n\r\n      function setFieldActive(name) {\r\n        root.querySelectorAll('[data-field-wrap]').forEach(function (field) {\r\n          field.classList.toggle('is-active', field.getAttribute('data-field-wrap') === name);\r\n        });\r\n      }\r\n\r\n      function setActiveChip(button) {\r\n        if (activeChip) activeChip.classList.remove('is-active');\r\n        activeChip = button || null;\r\n        if (activeChip) activeChip.classList.add('is-active');\r\n      }\r\n      function setEmptyState(message) {\r\n        practicalMm.textContent = '\u2014';\r\n      }\r\n      function renderResult(parsed, sourceLabel) {\r\n        const code = parsed.diameter.code;\r\n        const common = getCommon(code);\r\n        practicalMm.textContent = common;\r\n      }\r\n\r\n      function syncFromCode() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('code');\r\n        const parsed = parseCodeInput(codeInput.value);\r\n        if (!parsed) {\r\n          inchInput.value = '';\r\n          mmInput.value = '';\r\n          setEmptyState('Enter a valid 3-digit code such as <strong>202<\/strong>, <strong>211<\/strong>, or <strong>300<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        inchInput.value = formatNumber(parsed.diameter.inches, 4);\r\n        mmInput.value = formatNumber(parsed.diameter.mm, 2);\r\n        renderResult(parsed, 'Code input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function syncFromInch() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('inch');\r\n        const inches = parseUserNumber(inchInput.value);\r\n        if (!Number.isFinite(inches)) {\r\n          codeInput.value = '';\r\n          mmInput.value = '';\r\n          setEmptyState('Enter a decimal inch value such as <strong>2.125<\/strong> or <strong>3.0625<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        const parsedCode = codeFromInches(inches);\r\n        if (!parsedCode) {\r\n          codeInput.value = '';\r\n          mmInput.value = formatNumber(inches * 25.4, 2);\r\n          setEmptyState('The inch value is outside the supported 3-digit code range.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        codeInput.value = parsedCode.code;\r\n        mmInput.value = formatNumber(inches * 25.4, 2);\r\n        renderResult({ raw: parsedCode.code, diameter: parsedCode }, 'Inch input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function syncFromMm() {\r\n        if (isSyncing) return;\r\n        isSyncing = true;\r\n        setFieldActive('mm');\r\n        const mm = parseUserNumber(mmInput.value);\r\n        if (!Number.isFinite(mm)) {\r\n          codeInput.value = '';\r\n          inchInput.value = '';\r\n          setEmptyState('Enter a millimeter value such as <strong>52<\/strong>, <strong>65<\/strong>, or <strong>77.8<\/strong>.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        const inches = mm \/ 25.4;\r\n        const parsedCode = codeFromInches(inches);\r\n        if (!parsedCode) {\r\n          codeInput.value = '';\r\n          inchInput.value = formatNumber(inches, 4);\r\n          setEmptyState('The mm value is outside the supported 3-digit code range.');\r\n          isSyncing = false;\r\n          return;\r\n        }\r\n        codeInput.value = parsedCode.code;\r\n        inchInput.value = formatNumber(inches, 4);\r\n        renderResult({ raw: parsedCode.code, diameter: parsedCode }, 'mm input');\r\n        isSyncing = false;\r\n      }\r\n\r\n      function renderQuickValues() {\r\n        quickGrid.innerHTML = '';\r\n        quickItems.forEach(function (item) {\r\n          const parsed = parseCodeInput(item);\r\n          const code = parsed ? parsed.diameter.code : item;\r\n          const button = document.createElement('button');\r\n          button.type = 'button';\r\n          button.className = 'sp-mct-chip';\r\n          if (parsed) {\r\n            button.innerHTML = '<strong>' + item + '<\/strong><span>' + formatNumber(parsed.diameter.inches, 4) + ' in \u00b7 ' + formatNumber(parsed.diameter.mm, 2) + ' mm<\/span>';\r\n          } else {\r\n            button.innerHTML = '<strong>' + item + '<\/strong><span>' + getCommon(code) + '<\/span>';\r\n          }\r\n          button.addEventListener('click', function () {\r\n            codeInput.value = item;\r\n            setActiveChip(button);\r\n            syncFromCode();\r\n            const card = root.querySelector('.sp-mct-card');\r\n            if (card) card.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n          });\r\n          quickGrid.appendChild(button);\r\n        });\r\n      }\r\n\r\n      function renderTable() {\r\n        chartBody.innerHTML = '';\r\n        tableCodes.forEach(function (code) {\r\n          const parsed = parseSingleCode(code);\r\n          if (!parsed) return;\r\n          const row = document.createElement('tr');\r\n          const common = getCommon(code);\r\n          row.innerHTML =\r\n            '<td><code>' + code + '<\/code><\/td>' +\r\n            '<td>' + formatNumber(parsed.inches, 4) + ' in<\/td>' +\r\n            '<td>' + formatNumber(parsed.mm, 2) + ' mm<\/td>' +\r\n            '<td><strong>' + common + '<\/strong><\/td>';\r\n          chartBody.appendChild(row);\r\n        });\r\n      }\r\n\r\n      function showToast(message) {\r\n        if (!toast) return;\r\n        toast.textContent = message;\r\n        toast.classList.add('is-visible');\r\n        clearTimeout(toastTimer);\r\n        toastTimer = setTimeout(function () {\r\n          toast.classList.remove('is-visible');\r\n        }, 1400);\r\n      }\r\n\r\n      async function copyResults() {\r\n        const parsed = parseCodeInput(codeInput.value);\r\n        const inchValue = parseUserNumber(inchInput.value);\r\n        const mmValue = parseUserNumber(mmInput.value);\r\n        if (!parsed || !Number.isFinite(inchValue) || !Number.isFinite(mmValue)) {\r\n          showToast('Nothing to copy');\r\n          return;\r\n        }\r\n        const code = parsed.diameter.code;\r\n        const lines = [\r\n          'Metal Can \/ Tin Code Values',\r\n          'Code: ' + codeInput.value,\r\n          'Inches: ' + formatNumber(inchValue, 4) + ' in',\r\n          'mm: ' + formatNumber(mmValue, 2) + ' mm',\r\n          'Common mm reference: ' + getCommon(code)\r\n        ];\r\n\r\n        try {\r\n          await navigator.clipboard.writeText(lines.join('\\n'));\r\n          showToast('Results copied');\r\n        } catch (error) {\r\n          showToast('Copy failed');\r\n        }\r\n      }\r\n\r\n      function resetTool() {\r\n        codeInput.value = '202';\r\n        const target = Array.from(quickGrid.querySelectorAll('.sp-mct-chip')).find(function (button) {\r\n          return button.querySelector('strong') && button.querySelector('strong').textContent === '202';\r\n        });\r\n        setActiveChip(target || null);\r\n        syncFromCode();\r\n      }\r\n\r\n      function clearTool() {\r\n        isSyncing = true;\r\n        codeInput.value = '';\r\n        inchInput.value = '';\r\n        mmInput.value = '';\r\n        isSyncing = false;\r\n        setActiveChip(null);\r\n        setFieldActive('');\r\n        setEmptyState();\r\n        codeInput.focus();\r\n      }\r\n\r\n      codeInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromCode();\r\n      });\r\n      inchInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromInch();\r\n      });\r\n      mmInput.addEventListener('input', function () {\r\n        setActiveChip(null);\r\n        syncFromMm();\r\n      });\r\n      root.querySelector('[data-copy-all]').addEventListener('click', copyResults);\r\n      root.querySelector('[data-reset]').addEventListener('click', resetTool);\r\n      root.querySelector('[data-clear]').addEventListener('click', clearTool);\r\n\r\n      renderQuickValues();\r\n      renderTable();\r\n      resetTool();\r\n    })();\r\n  <\/script>\r\n\r\n  <script type=\"application\/ld+json\">{\n    \"@context\": \"https:\\\/\\\/schema.org\",\n    \"@type\": \"WebApplication\",\n    \"name\": \"Metal Can and Tin Code Inch Millimeter Input Tool\",\n    \"applicationCategory\": \"CalculatorApplication\",\n    \"operatingSystem\": \"Any\",\n    \"description\": \"A metal container size code tool where code, decimal inch, and millimeter fields are all editable inputs.\",\n    \"offers\": {\n        \"@type\": \"Offer\",\n        \"price\": \"0\",\n        \"priceCurrency\": \"USD\"\n    }\n}<\/script>\r\n<\/section>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Startseite \/ Verpackungswerkzeugzentrum Shining Packaging Werkzeug Metalldosen-Durchmesserrechner Geben Sie einen Code, einen Dezimalwert in Zoll oder einen Millimeterwert ein. Die Felder f\u00fcr Code, Zoll und Millimeter werden in Echtzeit aktualisiert. Berechnungsprinzip Code: Die erste Ziffer ist der ganze Zollwert; die letzten beiden Ziffern sind Sechzehntel Zoll. Zoll: die [\u2026]<\/p>","protected":false},"author":1,"featured_media":0,"parent":48526,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-48633","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/pages\/48633","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/comments?post=48633"}],"version-history":[{"count":0,"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/pages\/48633\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/pages\/48526"}],"wp:attachment":[{"href":"https:\/\/www.cnshining.com\/de\/wp-json\/wp\/v2\/media?parent=48633"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}