{"id":1254,"date":"2026-08-31T08:56:44","date_gmt":"2026-08-31T00:56:44","guid":{"rendered":"https:\/\/normanpetermann.com\/startseite\/"},"modified":"2026-09-30T12:11:10","modified_gmt":"2026-09-30T04:11:10","slug":"startseite","status":"publish","type":"page","link":"https:\/\/normanpetermann.com\/de\/","title":{"rendered":"Startseite"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"1254\" class=\"elementor elementor-1254 elementor-6\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b21e212 e-con e-atomic-element e-flexbox-base e-default-div e-7c4f7fd \" data-id=\"b21e212\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b21e212\" data-e-type=\"e-flexbox\" data-id=\"b21e212\">\n    \t\t<div class=\"elementor-element elementor-element-0baaebc elementor-widget elementor-widget-html\" data-id=\"0baaebc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     HERO 01 \u2014 FULL HEIGHT \/ MINIMAL PERFORMANCE\n========================================================= -->\n\n<section class=\"np-hero\" id=\"top\">\n\n  <!-- FULL HERO IMAGE -->\n  <div class=\"np-hero__media\">\n\n    <picture>\n\n      <!-- MOBILE HERO -->\n      <source media=\"(max-width: 767px)\" srcset=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-performance-portrait-hero-mobil.jpg\" width=\"1440\" height=\"1800\">\n\n      <!-- DESKTOP \/ TABLET HERO -->\n      <img fetchpriority=\"high\" class=\"np-hero__image\" src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/08\/norman-petermann-performance-portrait-hero-full.jpg\" alt=\"Norman Petermann \u2013 Running Performance\" width=\"2560\" height=\"1440\" fetchpriority=\"high\" decoding=\"async\">\n\n    <\/source><\/picture>\n\n  <\/div>\n\n\n  <!-- ATMOSPHERE -->\n  <div class=\"np-hero__overlay\"><\/div>\n  <div class=\"np-hero__glow\"><\/div>\n  <div class=\"np-hero__grid\"><\/div>\n  <div class=\"np-hero__vignette\"><\/div>\n\n\n  <!-- CONTENT -->\n  <div class=\"np-hero__inner\">\n\n    <div class=\"np-hero__content\">\n\n\n      <!-- NAME -->\n      <div class=\"np-hero__eyebrow\">\n\n        <span class=\"np-hero__dot\"><\/span>\n\n        <span>\n NORMAN PETERMANN\n        <\/span>\n\n      <\/div>\n\n\n      <!-- HEADLINE -->\n      <h1 class=\"np-hero__headline\">\n\n         <span class=\"np-hero__headline-solid\">\nGEFORMT\nDURCH\n<\/span>\n\n<span class=\"np-hero__headline-outline\">\nKONSEQUENZ.<br\/><\/span> \n\n      <\/h1>\n\n\n      <!-- DISCIPLINES -->\n      <div class=\"np-hero__subline\">\n\n        <span>RUNNING<\/span>\n<i>\u00b7<\/i>\n\n<span>PERFORMANCE<\/span>\n<i>\u00b7<\/i>\n\n<span>MINDSET<\/span>\n\n      <\/div>\n\n\n      <!-- ACTIONS -->\n      <div class=\"np-hero__actions\">\n\n\n        <!-- PRIMARY -->\n        <a href=\"#start\" class=\"np-btn np-btn--primary\">\n\n          <span>\n KOSTENLOS STARTEN\n          <\/span>\n\n          <span class=\"np-btn__arrow\" aria-hidden=\"true\"><\/span>\n\n        <\/a>\n\n\n        <!-- SECONDARY -->\n        <a href=\"\/method\/\" class=\"np-btn np-btn--secondary\">\n\n          <span>\n METHODE ENTDECKEN\n          <\/span>\n\n        <\/a>\n\n\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-hero,\n.np-hero * {\n  box-sizing: border-box;\n}\n\n\n.np-hero {\n  --black: #080A0C;\n  --graphite: #14181C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position: relative;\n\n  width: 100vw;\n\n  height: 100vh;\n  min-height: 100svh;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n\n  isolation: isolate;\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.np-hero__media {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 0;\n\n  overflow: hidden;\n}\n\n\n.np-hero__media picture {\n  display: block;\n\n  width: 100%;\n  height: 100%;\n}\n\n\n.np-hero__image {\n  position: absolute;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  max-width: none;\n\n  display: block;\n\n  object-fit: cover;\n\n  object-position:\n    50% 50%;\n\n  \/*\n   * DIE BISHER STARKE BILDPOSITION\n   * BLEIBT BEWUSST ERHALTEN\n   *\/\n\n  transform:\n    translateX(3.2%)\n    scale(1.03);\n\n  transform-origin:\n    center center;\n}\n\n\n\/* =========================================================\n   IMAGE BLEND\n========================================================= *\/\n\n.np-hero__overlay {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  pointer-events: none;\n\n  background:\n\n    linear-gradient(\n      90deg,\n\n      rgba(8,10,12,0.995) 0%,\n      rgba(8,10,12,0.98) 10%,\n      rgba(8,10,12,0.92) 21%,\n      rgba(8,10,12,0.79) 33%,\n      rgba(8,10,12,0.58) 43%,\n      rgba(8,10,12,0.34) 52%,\n      rgba(8,10,12,0.14) 61%,\n      rgba(8,10,12,0.04) 71%,\n      rgba(8,10,12,0.00) 83%\n    ),\n\n    linear-gradient(\n      180deg,\n\n      rgba(8,10,12,0.18) 0%,\n      rgba(8,10,12,0.02) 26%,\n      rgba(8,10,12,0.00) 58%,\n      rgba(8,10,12,0.08) 75%,\n      rgba(8,10,12,0.42) 100%\n    );\n}\n\n\n\/* =========================================================\n   SUBTLE COBALT ATMOSPHERE\n========================================================= *\/\n\n.np-hero__glow {\n  position: absolute;\n\n  z-index: 2;\n\n  width:\n    min(42vw, 700px);\n\n  height:\n    min(42vw, 700px);\n\n  left: 27%;\n  top: 38%;\n\n  transform:\n    translate(-50%, -50%);\n\n  border-radius:\n    50%;\n\n  background:\n    rgba(65,105,255,0.045);\n\n  filter:\n    blur(135px);\n\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   SUBTLE GRID\n========================================================= *\/\n\n.np-hero__grid {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 2;\n\n  opacity: 0.09;\n\n  pointer-events: none;\n\n  background-image:\n\n    linear-gradient(\n      rgba(255,255,255,0.028) 1px,\n      transparent 1px\n    ),\n\n    linear-gradient(\n      90deg,\n      rgba(255,255,255,0.028) 1px,\n      transparent 1px\n    );\n\n  background-size:\n    72px 72px;\n\n  -webkit-mask-image:\n    linear-gradient(\n      90deg,\n      rgba(0,0,0,0.55) 0%,\n      rgba(0,0,0,0.28) 35%,\n      transparent 64%\n    );\n\n  mask-image:\n    linear-gradient(\n      90deg,\n      rgba(0,0,0,0.55) 0%,\n      rgba(0,0,0,0.28) 35%,\n      transparent 64%\n    );\n}\n\n\n\/* =========================================================\n   VIGNETTE\n========================================================= *\/\n\n.np-hero__vignette {\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 3;\n\n  pointer-events: none;\n\n  box-shadow:\n    inset 0 0 145px\n    rgba(0,0,0,0.24);\n}\n\n\n\/* =========================================================\n   FULL HEIGHT INNER\n========================================================= *\/\n\n.np-hero__inner {\n  position: relative;\n\n  z-index: 5;\n\n  width:\n    min(100%, 1600px);\n\n  height: 100%;\n  min-height: 100svh;\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(105px, 11vh, 155px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(80px, 9vh, 110px);\n\n  display: flex;\n\n  align-items: center;\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.np-hero__content {\n  position: relative;\n\n  z-index: 6;\n\n  width:\n    min(54%, 820px);\n}\n\n\n\/* =========================================================\n   NAME\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-hero__eyebrow {\n  display: flex;\n\n  align-items: center;\n\n  gap: 10px;\n\n  margin-bottom:\n    clamp(24px, 2.8vw, 40px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size: 11px;\n\n  font-weight: 500;\n\n  line-height: 1.3;\n\n  letter-spacing:\n    0.14em;\n\n  color:\n    var(--grey);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-hero__dot {\n  width: 7px;\n  height: 7px;\n\n  flex:\n    0 0 7px;\n\n  border-radius:\n    50%;\n\n  background:\n    var(--blue);\n\n  box-shadow:\n    0 0 15px\n    rgba(65,105,255,0.90);\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-hero__headline {\n  width: 100%;\n\n  max-width:\n    820px;\n\n  margin: 0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(58px, 6.7vw, 118px);\n\n  font-weight: 800;\n\n  line-height: 0.91;\n\n  letter-spacing:\n    -0.047em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-hero__headline-solid {\n  display: block;\n\n  color:\n    var(--white);\n}\n\n\n.np-hero__headline-outline {\n  display: block;\n\n  margin-top:\n    0.04em;\n\n  color:\n    transparent;\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.55);\n}\n\n\n\/* =========================================================\n   DISCIPLINES\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-hero__subline {\n  display: flex;\n\n  align-items: center;\n\n  flex-wrap: wrap;\n\n  gap: 8px;\n\n  margin:\n    clamp(28px, 3.4vw, 44px)\n    0\n    0;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    clamp(10px, 0.82vw, 13px);\n\n  font-weight: 500;\n\n  line-height: 1.3;\n\n  letter-spacing:\n    0.16em;\n\n  color:\n    var(--grey);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-hero__subline i {\n  margin:\n    0 3px;\n\n  color:\n    var(--blue);\n\n  font-style:\n    normal;\n}\n\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n.np-hero__actions {\n  display: flex;\n\n  align-items: center;\n\n  flex-wrap: wrap;\n\n  gap: 12px;\n\n  margin-top:\n    clamp(32px, 3.8vw, 48px);\n}\n\n\n\/* =========================================================\n   BUTTON BASE\n========================================================= *\/\n\n.np-btn {\n  min-height:\n    52px;\n\n  padding:\n    0 22px;\n\n  display:\n    inline-flex;\n\n  align-items: center;\n\n  justify-content: center;\n\n  gap: 28px;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size: 12px;\n\n  font-weight: 600;\n\n  line-height: 1;\n\n  letter-spacing:\n    0.05em;\n\n  text-decoration:\n    none;\n\n  transition:\n    color .25s ease,\n    background-color .25s ease,\n    border-color .25s ease;\n}\n\n\n\/* =========================================================\n   PRIMARY\n========================================================= *\/\n\n.np-btn--primary {\n  color:\n    #FFFFFF;\n\n  background:\n    var(--blue);\n\n  border:\n    1px solid var(--blue);\n}\n\n\n\/* =========================================================\n   SECONDARY\n========================================================= *\/\n\n.np-btn--secondary {\n  color:\n    var(--white);\n\n  background:\n    rgba(8,10,12,0.28);\n\n  border:\n    1px solid rgba(242,241,237,0.20);\n\n  backdrop-filter:\n    blur(6px);\n\n  -webkit-backdrop-filter:\n    blur(6px);\n}\n\n\n\/* =========================================================\n   CLEAN CSS ARROW\n   NO EMOJI\n========================================================= *\/\n\n.np-btn__arrow {\n  position: relative;\n\n  width: 12px;\n  height: 12px;\n\n  flex:\n    0 0 12px;\n}\n\n\n.np-btn__arrow::before {\n  content: \"\";\n\n  position: absolute;\n\n  width: 10px;\n  height: 1px;\n\n  left: 0;\n  top: 7px;\n\n  background:\n    currentColor;\n\n  transform:\n    rotate(-45deg);\n\n  transform-origin:\n    center;\n}\n\n\n.np-btn__arrow::after {\n  content: \"\";\n\n  position: absolute;\n\n  width: 6px;\n  height: 6px;\n\n  top: 0;\n  right: 0;\n\n  border-top:\n    1px solid currentColor;\n\n  border-right:\n    1px solid currentColor;\n}\n\n\n\/* =========================================================\n   HOVER\n   NO MOVEMENT\n========================================================= *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  .np-btn--primary:hover {\n    background:\n      #5277FF;\n\n    border-color:\n      #5277FF;\n  }\n\n\n  .np-btn--secondary:hover {\n    border-color:\n      rgba(242,241,237,0.42);\n  }\n\n}\n\n\n\/* =========================================================\n   MEDIUM DESKTOP\n========================================================= *\/\n\n@media (max-width: 1280px) {\n\n  .np-hero__content {\n    width:\n      min(56%, 760px);\n  }\n\n\n  .np-hero__headline {\n    max-width:\n      760px;\n\n    font-size:\n      clamp(56px, 6.9vw, 102px);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  .np-hero__inner {\n    padding-left:\n      32px;\n\n    padding-right:\n      32px;\n  }\n\n\n  .np-hero__image {\n    object-position:\n      53% 50%;\n\n    transform:\n      translateX(1.5%)\n      scale(1.02);\n  }\n\n\n  .np-hero__content {\n    width:\n      min(60%, 610px);\n  }\n\n\n  .np-hero__headline {\n    font-size:\n      clamp(52px, 7.6vw, 78px);\n  }\n\n\n  .np-hero__overlay {\n    background:\n\n      linear-gradient(\n        90deg,\n\n        rgba(8,10,12,0.99) 0%,\n        rgba(8,10,12,0.96) 18%,\n        rgba(8,10,12,0.84) 34%,\n        rgba(8,10,12,0.61) 48%,\n        rgba(8,10,12,0.31) 62%,\n        rgba(8,10,12,0.08) 78%,\n        transparent 100%\n      ),\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0.22) 0%,\n        transparent 34%,\n        rgba(8,10,12,0.34) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   OWN IMAGE \/ FULL HERO INTEGRATION\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  \/* -------------------------------------------------------\n     CLOSED MOBILE MENU \u2014 IMAGE 15PX LOWER\n     OPEN MENU RETURNS TO THE EXISTING IMAGE POSITION\n  ------------------------------------------------------- *\/\n\n  .np-hero {\n    --np-mobile-image-extra-y: 15px;\n  }\n\n\n  body:has(.site-header .elementor-menu-toggle[aria-expanded=\"true\"]) .np-hero,\n  body:has(.site-header .elementor-menu-toggle.elementor-active) .np-hero,\n  body:has(.site-header .e-n-menu-toggle[aria-expanded=\"true\"]) .np-hero,\n  body:has(.site-header .e-n-menu-toggle.e-active) .np-hero {\n    --np-mobile-image-extra-y: 0px;\n  }\n\n\n  \/* -------------------------------------------------------\n     HERO HEIGHT\n  ------------------------------------------------------- *\/\n\n  .np-hero {\n    height:\n      100svh;\n\n    min-height:\n      100svh;\n  }\n\n\n  \/* -------------------------------------------------------\n     IMAGE\n  ------------------------------------------------------- *\/\n\n  .np-hero__media {\n    position:\n      absolute;\n\n    inset:\n      0;\n\n    width:\n      100%;\n\n    height:\n      100%;\n  }\n\n\n  .np-hero__media picture {\n    position:\n      absolute;\n\n    inset:\n      0;\n\n    display:\n      block;\n\n    width:\n      100%;\n\n    height:\n      100%;\n  }\n\n\n  .np-hero__image {\n    position:\n      absolute;\n\n    inset:\n      0;\n\n    width:\n      100%;\n\n    height:\n      100%;\n\n    max-width:\n      none;\n\n    display:\n      block;\n\n    object-fit:\n      cover;\n\n    object-position:\n      64% 39%;\n\n    transform:\n      translateY(calc(3% + var(--np-mobile-image-extra-y)))\n      scale(1.10);\n\n    transform-origin:\n      center center;\n  }\n\n\n  \/* -------------------------------------------------------\n     MOBILE IMAGE INTEGRATION\n  ------------------------------------------------------- *\/\n\n  .np-hero__overlay {\n    background:\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0.06) 0%,\n\n        rgba(8,10,12,0.02) 24%,\n\n        rgba(8,10,12,0.02) 42%,\n\n        rgba(8,10,12,0.06) 52%,\n\n        rgba(8,10,12,0.14) 62%,\n\n        rgba(8,10,12,0.28) 72%,\n\n        rgba(8,10,12,0.48) 81%,\n\n        rgba(8,10,12,0.72) 89%,\n\n        rgba(8,10,12,0.92) 96%,\n\n        rgba(8,10,12,1.00) 100%\n      ),\n\n      linear-gradient(\n        90deg,\n\n        rgba(8,10,12,0.50) 0%,\n\n        rgba(8,10,12,0.34) 24%,\n\n        rgba(8,10,12,0.18) 48%,\n\n        rgba(8,10,12,0.07) 68%,\n\n        rgba(8,10,12,0.015) 84%,\n\n        rgba(8,10,12,0.00) 100%\n      );\n  }\n\n\n  \/* -------------------------------------------------------\n     MOBILE ATMOSPHERE\n  ------------------------------------------------------- *\/\n\n  .np-hero__grid {\n    display:\n      none;\n  }\n\n\n  .np-hero__glow {\n    display:\n      none;\n  }\n\n\n  .np-hero__vignette {\n    box-shadow:\n\n      inset 0 0 58px\n      rgba(0,0,0,0.14);\n  }\n\n\n  \/* -------------------------------------------------------\n     CONTENT POSITION\n  ------------------------------------------------------- *\/\n\n  .np-hero__inner {\n    height:\n      100%;\n\n    min-height:\n      100svh;\n\n    margin:\n      0 auto;\n\n    padding:\n\n      57svh\n\n      20px\n\n      38px;\n\n    display:\n      flex;\n\n    align-items:\n      flex-start;\n  }\n\n\n  .np-hero__content {\n    width:\n      100%;\n\n    max-width:\n      none;\n  }\n\n\n  \/* -------------------------------------------------------\n     NAME\n     NEW MOBILE READABILITY STANDARD\n  ------------------------------------------------------- *\/\n\n  .np-hero__eyebrow {\n    gap:\n      9px;\n\n    margin-bottom:\n      18px;\n\n    font-size:\n      9px;\n\n    line-height:\n      1.25;\n\n    letter-spacing:\n      0.145em;\n  }\n\n\n  .np-hero__dot {\n    width:\n      6px;\n\n    height:\n      6px;\n\n    flex:\n      0 0 6px;\n\n    box-shadow:\n      0 0 12px\n      rgba(65,105,255,0.78);\n  }\n\n\n  \/* -------------------------------------------------------\n     HEADLINE\n  ------------------------------------------------------- *\/\n\n  .np-hero__headline {\n    width:\n      100%;\n\n    max-width:\n      100%;\n\n    margin:\n      0;\n\n    font-size:\n      clamp(44px, 12vw, 56px);\n\n    line-height:\n      0.92;\n\n    letter-spacing:\n      -0.052em;\n  }\n\n\n  .np-hero__headline-outline {\n    margin-top:\n      0.05em;\n\n    -webkit-text-stroke:\n      1px rgba(242,241,237,0.60);\n  }\n\n\n  \/* -------------------------------------------------------\n     DISCIPLINES\n     NEW MOBILE READABILITY STANDARD\n  ------------------------------------------------------- *\/\n\n  .np-hero__subline {\n    max-width:\n      none;\n\n    margin-top:\n      21px;\n\n    gap:\n      7px;\n\n    font-size:\n      9px;\n\n    line-height:\n      1.4;\n\n    letter-spacing:\n      0.145em;\n  }\n\n\n  .np-hero__subline i {\n    margin:\n      0 2px;\n  }\n\n\n  \/* -------------------------------------------------------\n     ACTIONS\n  ------------------------------------------------------- *\/\n\n  .np-hero__actions {\n    margin-top:\n      24px;\n  }\n\n\n  .np-btn {\n    min-height:\n      50px;\n\n    padding:\n      0 19px;\n\n    gap:\n      25px;\n\n    font-size:\n      10px;\n  }\n\n\n  .np-btn--secondary {\n    display:\n      none;\n  }\n\n}\n\n\n\/* =========================================================\n   VERY SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-hero {\n    height:\n      auto;\n\n    min-height:\n      100svh;\n  }\n\n\n  .np-hero__inner {\n    height:\n      auto;\n\n    min-height:\n      100svh;\n\n    padding:\n\n      54svh\n\n      20px\n\n      36px;\n  }\n\n\n  .np-hero__image {\n    object-position:\n      64% 39%;\n\n    transform:\n      translateY(calc(3% + var(--np-mobile-image-extra-y)))\n      scale(1.09);\n  }\n\n\n  .np-hero__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-hero__headline {\n    font-size:\n      clamp(41px, 11.6vw, 50px);\n  }\n\n\n  .np-hero__subline {\n    font-size:\n      8.5px;\n\n    letter-spacing:\n      0.13em;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8ea8130 e-con e-atomic-element e-flexbox-base e-default-div e-9831d65 \" data-id=\"8ea8130\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8ea8130\" data-e-type=\"e-flexbox\" data-id=\"8ea8130\">\n    \t\t<div class=\"elementor-element elementor-element-1f7e4fd elementor-widget elementor-widget-html\" data-id=\"1f7e4fd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 02 \u2014 THE METHOD\n     FULL BLEED \/ CROSS-BROWSER SEAMLESS\n========================================================= -->\n\n<section class=\"np-method\" id=\"method\" aria-labelledby=\"np-method-title\">\n\n  <div class=\"np-method__inner\">\n\n\n    <!-- =====================================================\n         CONTENT\n    ====================================================== -->\n\n    <div class=\"np-method__content\">\n\n\n      <!-- EYEBROW -->\n\n      <div class=\"np-method__eyebrow\">\n DIE METHODE \/ 02\n      <\/div>\n\n\n      <!-- HEADLINE -->\n\n      <h2 class=\"np-method__headline\" id=\"np-method-title\">\n\n         <span>\nPERFORMANCE\n<\/span>\n\n<span>\nIST KEIN MOMENT.\n<\/span>\n\n<span class=\"np-method__outline\">\nSIE WIRD ERARBEITET.\n<\/span> \n\n      <\/h2>\n\n\n      <!-- STATEMENT -->\n\n      <div class=\"np-method__statement\">\n\n        <strong>\n Konsequenz vor Intensit\u00e4t.\n        <\/strong>\n\n        <span>\n Struktur vor Motivation.\n        <\/span>\n\n      <\/div>\n\n\n      <!-- COPY -->\n\n      <p class=\"np-method__copy\">\n Performance entsteht nicht an einem perfekten Tag.<br> Sie entsteht durch das, was du immer wieder tust.\n      <\/p>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         VISUAL\n    ====================================================== -->\n\n    <figure class=\"np-method__visual\">\n\n      <picture class=\"np-method__picture\">\n\n        <source media=\"(max-width: 767px)\" srcset=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-hero-race-start-line-mobil.jpg-01.jpg\">\n\n        <img loading=\"lazy\" src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/08\/norman-petermann-hero-race-start-line.jpg\" alt=\"Norman Petermann mit L\u00e4ufern auf der Laufbahn\" width=\"1280\" height=\"1024\" loading=\"lazy\" decoding=\"async\">\n\n      <\/source><\/picture>\n\n    <\/figure>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-method,\n.np-method * {\n  box-sizing: border-box;\n}\n\n\n.np-method {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position: relative;\n\n  width: 100vw;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n}\n\n\n\/* =========================================================\n   LAYOUT\n========================================================= *\/\n\n.np-method__inner {\n  width: 100%;\n\n  margin: 0;\n\n  padding:\n    clamp(110px, 9vw, 150px)\n    0\n    clamp(110px, 9vw, 150px)\n    clamp(28px, 4.2vw, 68px);\n\n  display: grid;\n\n  grid-template-columns:\n    minmax(0, 0.78fr)\n    minmax(0, 1.22fr);\n\n  gap:\n    clamp(64px, 6vw, 110px);\n\n  align-items:\n    center;\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.np-method__content {\n  position: relative;\n\n  z-index: 2;\n\n  width: 100%;\n\n  max-width:\n    610px;\n}\n\n\n\/* =========================================================\n   EYEBROW\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-method__eyebrow {\n  margin-bottom:\n    clamp(28px, 2.8vw, 40px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.72);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-method__headline {\n  margin: 0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(48px, 4.8vw, 82px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.94;\n\n  letter-spacing:\n    -0.045em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-method__headline > span {\n  display:\n    block;\n}\n\n\n\/* =========================================================\n   OUTLINE\n========================================================= *\/\n\n.np-method__outline {\n  margin-top:\n    0.06em;\n\n  color:\n    rgba(8,10,12,0);\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.52);\n}\n\n\n\/* =========================================================\n   STATEMENT\n========================================================= *\/\n\n.np-method__statement {\n  margin-top:\n    clamp(38px, 3.5vw, 52px);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(17px, 1.2vw, 20px);\n\n  line-height:\n    1.5;\n}\n\n\n.np-method__statement strong,\n.np-method__statement span {\n  display:\n    block;\n}\n\n\n.np-method__statement strong {\n  font-weight:\n    600;\n\n  color:\n    rgba(242,241,237,0.96);\n}\n\n\n.np-method__statement span {\n  margin-top:\n    3px;\n\n  font-weight:\n    500;\n\n  color:\n    rgba(242,241,237,0.54);\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.np-method__copy {\n  max-width:\n    430px;\n\n  margin:\n    clamp(26px, 2.5vw, 34px)\n    0\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 1vw, 16px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.7;\n\n  color:\n    rgba(242,241,237,0.52);\n}\n\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n.np-method__visual {\n  position: relative;\n\n  width: 100%;\n\n  margin: 0;\n\n  aspect-ratio:\n    1.34 \/ 1;\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n}\n\n\n.np-method__picture {\n  display: block;\n\n  width: 100%;\n\n  height: 100%;\n}\n\n\n\/* =========================================================\n   IMAGE\n   DESKTOP ABSOLUT UNVER\u00c4NDERT\n========================================================= *\/\n\n.np-method__visual img {\n  position: absolute;\n\n  top: 50%;\n\n  right: 0;\n\n  width: 108%;\n\n  height: 108%;\n\n  max-width:\n    none;\n\n  display:\n    block;\n\n  transform:\n    translateY(-50%);\n\n  object-fit:\n    cover;\n\n  object-position:\n    center center;\n}\n\n\n\/* =========================================================\n   MAIN IMAGE BLEND\n   DESKTOP UNVER\u00c4NDERT\n========================================================= *\/\n\n.np-method__visual::before {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  pointer-events:\n    none;\n\n  background:\n\n    linear-gradient(\n      90deg,\n\n      rgba(8,10,12,0.97) 0%,\n\n      rgba(8,10,12,0.90) 4%,\n\n      rgba(8,10,12,0.78) 8%,\n\n      rgba(8,10,12,0.63) 12%,\n\n      rgba(8,10,12,0.47) 16%,\n\n      rgba(8,10,12,0.33) 20%,\n\n      rgba(8,10,12,0.22) 24%,\n\n      rgba(8,10,12,0.13) 28%,\n\n      rgba(8,10,12,0.07) 32%,\n\n      rgba(8,10,12,0.035) 36%,\n\n      rgba(8,10,12,0.015) 40%,\n\n      rgba(8,10,12,0.005) 44%,\n\n      rgba(8,10,12,0) 48%,\n\n      rgba(8,10,12,0) 100%\n    ),\n\n    linear-gradient(\n      180deg,\n\n      rgba(8,10,12,0.84) 0%,\n\n      rgba(8,10,12,0.60) 4%,\n\n      rgba(8,10,12,0.36) 8%,\n\n      rgba(8,10,12,0.19) 12%,\n\n      rgba(8,10,12,0.09) 17%,\n\n      rgba(8,10,12,0.035) 22%,\n\n      rgba(8,10,12,0.010) 27%,\n\n      rgba(8,10,12,0) 32%,\n\n      rgba(8,10,12,0) 68%,\n\n      rgba(8,10,12,0.025) 73%,\n\n      rgba(8,10,12,0.07) 78%,\n\n      rgba(8,10,12,0.14) 83%,\n\n      rgba(8,10,12,0.25) 88%,\n\n      rgba(8,10,12,0.40) 93%,\n\n      rgba(8,10,12,0.59) 97%,\n\n      rgba(8,10,12,0.76) 100%\n    );\n}\n\n\n\/* =========================================================\n   FINAL BOTTOM FEATHER\n   DESKTOP UNVER\u00c4NDERT\n========================================================= *\/\n\n.np-method__visual::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  z-index: 1;\n\n  pointer-events:\n    none;\n\n  background:\n\n    linear-gradient(\n      180deg,\n\n      rgba(8,10,12,0) 0%,\n\n      rgba(8,10,12,0) 70%,\n\n      rgba(8,10,12,0.015) 74%,\n\n      rgba(8,10,12,0.04) 78%,\n\n      rgba(8,10,12,0.08) 82%,\n\n      rgba(8,10,12,0.15) 86%,\n\n      rgba(8,10,12,0.25) 90%,\n\n      rgba(8,10,12,0.39) 93%,\n\n      rgba(8,10,12,0.56) 96%,\n\n      rgba(8,10,12,0.73) 98%,\n\n      rgba(8,10,12,0.88) 99%,\n\n      rgba(8,10,12,1) 100%\n    );\n}\n\n\n\/* =========================================================\n   TABLET\n   UNVER\u00c4NDERT\n========================================================= *\/\n\n@media (max-width: 980px) {\n\n  .np-method__inner {\n    padding:\n      90px\n      28px;\n\n    grid-template-columns:\n      1fr;\n\n    gap:\n      56px;\n  }\n\n\n  .np-method__content {\n    max-width:\n      680px;\n  }\n\n\n  .np-method__headline {\n    font-size:\n      clamp(48px, 8vw, 72px);\n  }\n\n\n  .np-method__visual {\n    width:\n      min(100%, 760px);\n\n    aspect-ratio:\n      1.28 \/ 1;\n  }\n\n\n  .np-method__visual img {\n    width:\n      106%;\n\n    height:\n      106%;\n  }\n\n\n  .np-method__visual::after {\n    background:\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0) 0%,\n\n        rgba(8,10,12,0) 70%,\n\n        rgba(8,10,12,0.02) 75%,\n\n        rgba(8,10,12,0.06) 80%,\n\n        rgba(8,10,12,0.13) 85%,\n\n        rgba(8,10,12,0.25) 89%,\n\n        rgba(8,10,12,0.42) 93%,\n\n        rgba(8,10,12,0.61) 96%,\n\n        rgba(8,10,12,0.80) 98%,\n\n        rgba(8,10,12,1) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET OPTIMIZATION\n   768 \u2014 1024PX\n========================================================= *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  .np-method__inner {\n    padding:\n      78px\n      28px\n      76px;\n\n    grid-template-columns:\n      1fr;\n\n    gap:\n      20px;\n  }\n\n\n  .np-method__content {\n    max-width:\n      680px;\n  }\n\n\n  .np-method__headline {\n    font-size:\n      clamp(48px, 8vw, 72px);\n  }\n\n\n  .np-method__visual {\n    width:\n      100vw;\n\n    max-width:\n      none;\n\n    margin:\n      0;\n\n    aspect-ratio:\n      1.28 \/ 1;\n\n    transform:\n      translateX(-28px);\n  }\n\n\n  .np-method__visual img {\n    width:\n      106%;\n\n    height:\n      106%;\n  }\n\n\n  .np-method__visual::before {\n    background:\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,1.00) 0%,\n\n        rgba(8,10,12,0.995) 4%,\n\n        rgba(8,10,12,0.98) 8%,\n\n        rgba(8,10,12,0.94) 12%,\n\n        rgba(8,10,12,0.86) 16%,\n\n        rgba(8,10,12,0.74) 20%,\n\n        rgba(8,10,12,0.59) 24%,\n\n        rgba(8,10,12,0.43) 28%,\n\n        rgba(8,10,12,0.29) 32%,\n\n        rgba(8,10,12,0.18) 36%,\n\n        rgba(8,10,12,0.10) 40%,\n\n        rgba(8,10,12,0.05) 44%,\n\n        rgba(8,10,12,0.018) 48%,\n\n        rgba(8,10,12,0.005) 52%,\n\n        rgba(8,10,12,0) 56%,\n\n        rgba(8,10,12,0) 100%\n      );\n  }\n\n\n  .np-method__visual::after {\n    background:\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0) 0%,\n\n        rgba(8,10,12,0) 70%,\n\n        rgba(8,10,12,0.02) 75%,\n\n        rgba(8,10,12,0.06) 80%,\n\n        rgba(8,10,12,0.13) 85%,\n\n        rgba(8,10,12,0.25) 89%,\n\n        rgba(8,10,12,0.42) 93%,\n\n        rgba(8,10,12,0.61) 96%,\n\n        rgba(8,10,12,0.80) 98%,\n\n        rgba(8,10,12,1) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  \/*\n   * MOBILE ANCHOR OFFSET\n   *\n   * Goal:\n   * THE METHOD \/ 02 begins reliably below the fixed header.\n   *\/\n\n  #method {\n    scroll-margin-top:\n      164px;\n  }\n\n\n  .np-method__inner {\n    padding:\n      76px\n      20px\n      86px;\n\n    gap:\n      28px;\n  }\n\n\n  \/* =======================================================\n     EYEBROW\n     NEW MOBILE READABILITY STANDARD\n  ======================================================== *\/\n\n  .np-method__eyebrow {\n    margin-bottom:\n      22px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-method__headline {\n    font-size:\n      clamp(40px, 11.5vw, 56px);\n\n    line-height:\n      0.96;\n  }\n\n\n  .np-method__statement {\n    margin-top:\n      32px;\n\n    font-size:\n      16px;\n  }\n\n\n  .np-method__copy {\n    max-width:\n      350px;\n\n    margin-top:\n      24px;\n\n    font-size:\n      14px;\n  }\n\n\n  \/* =======================================================\n     MOBILE VISUAL\n  ======================================================== *\/\n\n  .np-method__visual {\n    position:\n      relative;\n\n    width:\n      100vw;\n\n    max-width:\n      none;\n\n    height:\n      clamp(390px, 45vh, 530px);\n\n    margin:\n      0;\n\n    aspect-ratio:\n      auto;\n\n    overflow:\n      hidden;\n\n    background:\n      var(--black);\n\n    transform:\n      translateX(-20px);\n  }\n\n\n  \/* =======================================================\n     MOBILE PICTURE\n  ======================================================== *\/\n\n  .np-method__picture {\n    position:\n      absolute;\n\n    inset:\n      0;\n\n    display:\n      block;\n\n    width:\n      100%;\n\n    height:\n      100%;\n\n    overflow:\n      hidden;\n  }\n\n\n  \/* =======================================================\n     MOBILE IMAGE\n  ======================================================== *\/\n\n  .np-method__visual img {\n    position:\n      absolute;\n\n    top:\n      auto;\n\n    right:\n      auto;\n\n    bottom:\n      0;\n\n    left:\n      0;\n\n    width:\n      100%;\n\n    height:\n      auto;\n\n    max-width:\n      none;\n\n    display:\n      block;\n\n    transform:\n      none;\n\n    object-fit:\n      initial;\n\n    object-position:\n      initial;\n  }\n\n\n  \/* =======================================================\n     MOBILE TOP BLEND\n  ======================================================== *\/\n\n  .np-method__visual::before {\n    background:\n      linear-gradient(\n        180deg,\n        rgba(8,10,12,1.00) 0%,\n        rgba(8,10,12,0.99) 2%,\n        rgba(8,10,12,0.96) 4%,\n        rgba(8,10,12,0.90) 7%,\n        rgba(8,10,12,0.80) 10%,\n        rgba(8,10,12,0.64) 13%,\n        rgba(8,10,12,0.46) 16%,\n        rgba(8,10,12,0.28) 19%,\n        rgba(8,10,12,0.14) 22%,\n        rgba(8,10,12,0.06) 25%,\n        rgba(8,10,12,0.015) 28%,\n        rgba(8,10,12,0) 31%,\n        rgba(8,10,12,0) 100%\n      );\n  }\n\n\n  \/* =======================================================\n     MOBILE BOTTOM FEATHER\n  ======================================================== *\/\n\n  .np-method__visual::after {\n    background:\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0) 0%,\n\n        rgba(8,10,12,0) 72%,\n\n        rgba(8,10,12,0.015) 77%,\n\n        rgba(8,10,12,0.04) 81%,\n\n        rgba(8,10,12,0.08) 85%,\n\n        rgba(8,10,12,0.15) 89%,\n\n        rgba(8,10,12,0.25) 92%,\n\n        rgba(8,10,12,0.39) 95%,\n\n        rgba(8,10,12,0.56) 97%,\n\n        rgba(8,10,12,0.72) 98.5%,\n\n        rgba(8,10,12,0.88) 99.3%,\n\n        rgba(8,10,12,1.00) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-method__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-method__headline {\n    font-size:\n      clamp(37px, 11vw, 48px);\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-f7e3354 e-con e-atomic-element e-flexbox-base e-default-div e-2015fdc \" data-id=\"f7e3354\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"f7e3354\" data-e-type=\"e-flexbox\" data-id=\"f7e3354\">\n    \t\t<div class=\"elementor-element elementor-element-da91025 elementor-widget elementor-widget-html\" data-id=\"da91025\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 03 \u2014 THE SYSTEM\n     EDITORIAL \/ QUIET POWER\n     WITH SECTION NAVIGATION\n========================================================= -->\n\n<section class=\"np-system\" id=\"the-system\" aria-labelledby=\"np-system-title\">\n\n  <div class=\"np-system__inner\">\n\n\n    <!-- =====================================================\n         HEADER\n    ====================================================== -->\n\n    <header class=\"np-system__header\">\n\n      <div class=\"np-system__eyebrow\">\n DAS SYSTEM \/ 03\n      <\/div>\n\n\n      <h2 class=\"np-system__headline\" id=\"np-system-title\">\n\n        <span>\n DREI ELEMENTE.\n        <\/span>\n\n        <span class=\"np-system__outline\">\n EIN SYSTEM.\n        <\/span>\n\n      <\/h2>\n\n\n      <p class=\"np-system__intro\">\n Nichts funktioniert f\u00fcr sich allein.\n Running, k\u00f6rperliche Performance und Mindset bauen aufeinander auf.\n      <\/p>\n\n    <\/header>\n\n\n\n    <!-- =====================================================\n         THREE ELEMENTS\n    ====================================================== -->\n\n    <div class=\"np-system__elements\">\n\n\n      <!-- RUNNING -->\n\n      <div class=\"np-system__element np-system__element--left\">\n\n        <a class=\"np-system__link\" href=\"#running\" aria-label=\"Go to Running\">\n\n          <h3>\n RUNNING\n          <\/h3>\n\n          <div class=\"np-system__meta\">\n\n            <span class=\"np-system__dot\"><\/span>\n\n            <span>\n TEMPO \u00b7 AUSDAUER \u00b7 STRUKTUR\n            <\/span>\n\n          <\/div>\n\n        <\/a>\n\n      <\/div>\n\n\n\n      <!-- PERFORMANCE -->\n\n      <div class=\"np-system__element np-system__element--center\">\n\n        <a class=\"np-system__link\" href=\"#performance\" aria-label=\"Go to Performance\">\n\n          <h3>\n PERFORMANCE\n          <\/h3>\n\n          <div class=\"np-system__meta\">\n\n            <span class=\"np-system__dot\"><\/span>\n\n            <span>\n TRAINING \u00b7 REGENERATION \u00b7 ERN\u00c4HRUNG\n            <\/span>\n\n          <\/div>\n\n        <\/a>\n\n      <\/div>\n\n\n\n      <!-- MINDSET -->\n\n      <div class=\"np-system__element np-system__element--right\">\n\n        <a class=\"np-system__link\" href=\"#mindset\" aria-label=\"Go to Mindset\">\n\n          <h3>\n MINDSET\n          <\/h3>\n\n          <div class=\"np-system__meta\">\n\n            <span class=\"np-system__dot\"><\/span>\n\n            <span>\n DISZIPLIN \u00b7 FOKUS \u00b7 KONSEQUENZ\n            <\/span>\n\n          <\/div>\n\n        <\/a>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-system,\n.np-system * {\n  box-sizing: border-box;\n}\n\n\n.np-system {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  background: var(--black);\n\n  color: var(--white);\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-system__inner {\n  width: min(100%, 1500px);\n\n  margin: 0 auto;\n\n  padding:\n\n    clamp(140px, 11vw, 190px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(150px, 12vw, 205px);\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.np-system__header {\n  width: min(100%, 1080px);\n}\n\n\n\/* =========================================================\n   EYEBROW\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-system__eyebrow {\n  margin-bottom:\n    clamp(32px, 3vw, 44px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size: 11px;\n\n  font-weight: 500;\n\n  line-height: 1;\n\n  letter-spacing: 0.16em;\n\n  color:\n    rgba(140,148,156,0.68);\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-system__headline {\n  margin: 0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(56px, 6.4vw, 104px);\n\n  font-weight: 700;\n\n  line-height: 0.92;\n\n  letter-spacing: -0.05em;\n\n  text-transform: uppercase;\n}\n\n\n.np-system__headline > span {\n  display: block;\n}\n\n\n.np-system__outline {\n  margin-top: 0.06em;\n\n  color: rgba(8,10,12,0);\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.52);\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.np-system__intro {\n  width: min(100%, 590px);\n\n  margin:\n\n    clamp(32px, 3vw, 44px)\n\n    0\n\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 1.05vw, 16px);\n\n  font-weight: 400;\n\n  line-height: 1.75;\n\n  color:\n    rgba(242,241,237,0.52);\n}\n\n\n\/* =========================================================\n   ELEMENT STAGE\n========================================================= *\/\n\n.np-system__elements {\n  width: 100%;\n\n  max-width: 1320px;\n\n  margin:\n\n    clamp(105px, 9vw, 150px)\n\n    auto\n\n    0;\n\n  display: flex;\n\n  flex-direction: column;\n\n  gap:\n    clamp(58px, 5.5vw, 88px);\n}\n\n\n\/* =========================================================\n   ELEMENT\n========================================================= *\/\n\n.np-system__element {\n  width: fit-content;\n\n  max-width: 100%;\n\n  opacity: 0;\n\n  transform:\n    translateY(22px);\n\n  transition:\n\n    opacity\n    0.8s\n    ease,\n\n    transform\n    0.8s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n\/* =========================================================\n   POSITIONING\n========================================================= *\/\n\n.np-system__element--left {\n  align-self: flex-start;\n\n  text-align: left;\n}\n\n\n.np-system__element--center {\n  align-self: center;\n\n  text-align: center;\n}\n\n\n.np-system__element--right {\n  align-self: flex-end;\n\n  text-align: right;\n}\n\n\n\/* =========================================================\n   LINK\n========================================================= *\/\n\n.np-system__link {\n  display: inline-block;\n\n  max-width: 100%;\n\n  color: inherit;\n\n  text-decoration: none;\n\n  outline: none;\n}\n\n\n\/* =========================================================\n   ELEMENT TITLE\n========================================================= *\/\n\n.np-system__element h3 {\n  margin: 0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(64px, 8.2vw, 128px);\n\n  font-weight: 700;\n\n  line-height: 0.9;\n\n  letter-spacing: -0.055em;\n\n  color:\n    rgba(242,241,237,0.96);\n\n  text-transform: uppercase;\n\n  transform:\n    scale(1);\n\n  transform-origin:\n    center center;\n\n  transition:\n\n    color\n    0.32s\n    ease,\n\n    transform\n    0.38s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n\/* =========================================================\n   META\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-system__meta {\n  margin-top:\n    clamp(17px, 1.6vw, 24px);\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap: 11px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size: 11px;\n\n  font-weight: 500;\n\n  line-height: 1.5;\n\n  letter-spacing: 0.15em;\n\n  color:\n    rgba(140,148,156,0.68);\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   BLUE BRAND DOT\n========================================================= *\/\n\n.np-system__dot {\n  flex: 0 0 auto;\n\n  width: 4px;\n\n  height: 4px;\n\n  border-radius: 50%;\n\n  background: var(--blue);\n}\n\n\n\/* =========================================================\n   HOVER\n   VERY SUBTLE \u2014 TITLE ONLY\n========================================================= *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  .np-system__link:hover h3 {\n    color: var(--white);\n\n    transform:\n      scale(1.025);\n  }\n\n}\n\n\n\/* =========================================================\n   KEYBOARD FOCUS\n========================================================= *\/\n\n.np-system__link:focus-visible h3 {\n  color: var(--white);\n}\n\n\n\/* =========================================================\n   ONE-TIME REVEAL\n========================================================= *\/\n\n.np-system.is-visible\n.np-system__element {\n  opacity: 1;\n\n  transform:\n    translateY(0);\n}\n\n\n.np-system.is-visible\n.np-system__element:nth-child(1) {\n  transition-delay: 0.08s;\n}\n\n\n.np-system.is-visible\n.np-system__element:nth-child(2) {\n  transition-delay: 0.22s;\n}\n\n\n.np-system.is-visible\n.np-system__element:nth-child(3) {\n  transition-delay: 0.36s;\n}\n\n\n\/* =========================================================\n   TABLET\n   768 \u2014 1024PX\n========================================================= *\/\n\n@media (min-width: 768px) and (max-width: 1024px) {\n\n  .np-system__inner {\n    padding:\n\n      105px\n\n      28px\n\n      125px;\n  }\n\n\n  .np-system__headline {\n    font-size:\n      clamp(52px, 7.8vw, 78px);\n  }\n\n\n  .np-system__elements {\n    margin-top: 82px;\n\n    gap: 58px;\n  }\n\n\n  .np-system__element h3 {\n    font-size:\n      clamp(52px, 8.4vw, 82px);\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  #the-system {\n    scroll-margin-top:\n      148px;\n  }\n\n\n  .np-system__inner {\n    padding:\n\n      92px\n\n      20px\n\n      110px;\n  }\n\n\n  \/* =======================================================\n     EYEBROW\n     NEW MOBILE READABILITY STANDARD\n  ======================================================== *\/\n\n  .np-system__eyebrow {\n    margin-bottom: 28px;\n\n    font-size: 9px;\n  }\n\n\n  .np-system__headline {\n    font-size:\n      clamp(40px, 11vw, 56px);\n  }\n\n\n  .np-system__intro {\n    margin-top: 28px;\n\n    max-width: 420px;\n\n    font-size: 14px;\n\n    line-height: 1.7;\n  }\n\n\n  .np-system__elements {\n    margin-top: 72px;\n\n    gap: 52px;\n  }\n\n\n  \/*\n   * Mobile:\n   * clean vertical rhythm\n   *\/\n\n  .np-system__element,\n  .np-system__element--left,\n  .np-system__element--center,\n  .np-system__element--right {\n    width: 100%;\n\n    align-self: stretch;\n\n    text-align: left;\n  }\n\n\n  .np-system__link {\n    width: 100%;\n  }\n\n\n  .np-system__element h3 {\n    font-size:\n      clamp(42px, 11.2vw, 58px);\n\n    line-height: 0.94;\n  }\n\n\n  \/* =======================================================\n     META\n     NEW MOBILE READABILITY STANDARD\n  ======================================================== *\/\n\n  .np-system__meta {\n    margin-top: 14px;\n\n    gap: 9px;\n\n    font-size: 9.5px;\n\n    letter-spacing: 0.13em;\n  }\n\n\n  .np-system__dot {\n    width: 3px;\n\n    height: 3px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-system__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-system__headline {\n    font-size:\n      clamp(38px, 10.8vw, 48px);\n  }\n\n\n  .np-system__element h3 {\n    font-size:\n      clamp(39px, 10.8vw, 50px);\n  }\n\n\n  .np-system__meta {\n    font-size: 9px;\n\n    letter-spacing: 0.11em;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-system__element {\n    opacity: 1;\n\n    transform: none;\n\n    transition: none;\n  }\n\n\n  .np-system__element h3 {\n    transform: none;\n\n    transition: none;\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\ndocument.addEventListener(\n  \"DOMContentLoaded\",\n  function () {\n\n    const section =\n      document.querySelector(\n        \"#the-system\"\n      );\n\n\n    if (!section) return;\n\n\n    const observer =\n      new IntersectionObserver(\n\n        function (entries) {\n\n          entries.forEach(\n            function (entry) {\n\n              if (\n                entry.isIntersecting\n              ) {\n\n                section.classList.add(\n                  \"is-visible\"\n                );\n\n\n                observer.disconnect();\n\n              }\n\n            }\n          );\n\n        },\n\n        {\n          threshold: 0.20\n        }\n\n      );\n\n\n    observer.observe(\n      section\n    );\n\n  }\n);\n\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9d57d55 e-con e-atomic-element e-flexbox-base e-default-div e-4b9f3ab \" data-id=\"9d57d55\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9d57d55\" data-e-type=\"e-flexbox\" data-id=\"9d57d55\">\n    \t\t<div class=\"elementor-element elementor-element-200236b elementor-widget elementor-widget-html\" data-id=\"200236b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 04 \u2014 RUNNING\n     CINEMATIC \/ FULL BLEED \/ SEAMLESS\n========================================================= -->\n\n<section class=\"np-running\" id=\"running\" aria-labelledby=\"np-running-title\">\n\n  <!-- =====================================================\n       BACKGROUND IMAGE\n  ====================================================== -->\n\n  <div class=\"np-running__media\">\n\n    <picture class=\"np-running__picture\">\n\n      <!-- MOBILE -->\n      <source media=\"(max-width: 767px)\" srcset=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-runner-stadium.jpg\">\n\n      <!-- DESKTOP \/ TABLET -->\n      <img loading=\"lazy\" src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/08\/ratw-runner-stadium.jpg\" alt=\"Norman Petermann l\u00e4uft nachts auf der Laufbahn\" width=\"1448\" height=\"1086\" loading=\"lazy\" decoding=\"async\">\n\n    <\/source><\/picture>\n\n  <\/div>\n\n\n  <!-- =====================================================\n       CONTENT\n  ====================================================== -->\n\n  <div class=\"np-running__inner\">\n\n    <div class=\"np-running__content\">\n\n\n      <!-- EYEBROW -->\n\n      <div class=\"np-running__eyebrow\">\n RUNNING \/ 04\n      <\/div>\n\n\n      <!-- HEADLINE -->\n\n      <h2 class=\"np-running__headline\" id=\"np-running-title\">\n\n         <span>\nDIE ARBEIT\n<\/span>\n\n<span>\n\n<\/span>\n\n<span class=\"np-running__outline\">\nZ\u00c4HLT\n<\/span> \n\n      <\/h2>\n\n\n      <!-- STATEMENT -->\n\n      <div class=\"np-running__statement\">\n\n        <strong>\n Tempo wird erarbeitet.\n        <\/strong>\n\n        <span>\n Struktur macht Leistung wiederholbar.\n        <\/span>\n\n      <\/div>\n\n\n      <!-- COPY -->\n\n      <p class=\"np-running__copy\">\n Vorbereitung wird messbar.\n Einheit f\u00fcr Einheit. Wiederholung f\u00fcr Wiederholung. Kilometer f\u00fcr Kilometer. \n      <\/p>\n\n\n      <!-- LINK -->\n\n      <a class=\"np-running__link\" href=\"\/running\/\">\n\n        <span>\n RUNNING\n        <\/span>\n\n        <span class=\"np-running__arrow\" aria-hidden=\"true\"><\/span>\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-running,\n.np-running * {\n  box-sizing: border-box;\n}\n\n\n.np-running {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position: relative;\n\n  width: 100vw;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  min-height:\n    clamp(760px, 88vh, 940px);\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n\n  scroll-margin-top:\n    24px;\n}\n\n\n\/* =========================================================\n   FULL-BLEED IMAGE\n========================================================= *\/\n\n.np-running__media {\n  position: absolute;\n\n  inset: 0;\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n}\n\n\n.np-running__picture {\n  display: block;\n\n  width: 100%;\n\n  height: 100%;\n}\n\n\n.np-running__media img {\n  width: 100%;\n\n  height: 100%;\n\n  max-width: none;\n\n  display: block;\n\n  object-fit: cover;\n\n  \/*\n   * DESKTOP POSITION\n   * UNVER\u00c4NDERT\n   *\/\n\n  object-position:\n    67% center;\n}\n\n\n\/* =========================================================\n   IMAGE INTEGRATION\n   DESKTOP UNVER\u00c4NDERT\n========================================================= *\/\n\n.np-running__media::after {\n  content: \"\";\n\n  position: absolute;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n\n    \/* -----------------------------------------------------\n       LEFT \u2192 IMAGE\n    ----------------------------------------------------- *\/\n\n    linear-gradient(\n      90deg,\n\n      rgba(8,10,12,1) 0%,\n\n      rgba(8,10,12,0.995) 14%,\n\n      rgba(8,10,12,0.97) 24%,\n\n      rgba(8,10,12,0.91) 32%,\n\n      rgba(8,10,12,0.81) 39%,\n\n      rgba(8,10,12,0.67) 46%,\n\n      rgba(8,10,12,0.51) 53%,\n\n      rgba(8,10,12,0.35) 60%,\n\n      rgba(8,10,12,0.21) 67%,\n\n      rgba(8,10,12,0.11) 73%,\n\n      rgba(8,10,12,0.045) 78%,\n\n      rgba(8,10,12,0.015) 82%,\n\n      rgba(8,10,12,0) 86%,\n\n      rgba(8,10,12,0) 100%\n    ),\n\n\n    \/* -----------------------------------------------------\n       TOP + BOTTOM\n    ----------------------------------------------------- *\/\n\n    linear-gradient(\n      180deg,\n\n      rgba(8,10,12,0.84) 0%,\n\n      rgba(8,10,12,0.63) 4%,\n\n      rgba(8,10,12,0.40) 8%,\n\n      rgba(8,10,12,0.23) 12%,\n\n      rgba(8,10,12,0.12) 17%,\n\n      rgba(8,10,12,0.055) 22%,\n\n      rgba(8,10,12,0.018) 27%,\n\n      rgba(8,10,12,0) 32%,\n\n      rgba(8,10,12,0) 65%,\n\n      rgba(8,10,12,0.025) 70%,\n\n      rgba(8,10,12,0.07) 75%,\n\n      rgba(8,10,12,0.15) 80%,\n\n      rgba(8,10,12,0.27) 85%,\n\n      rgba(8,10,12,0.43) 90%,\n\n      rgba(8,10,12,0.63) 95%,\n\n      rgba(8,10,12,0.82) 98%,\n\n      rgba(8,10,12,0.94) 100%\n    );\n}\n\n\n\/* =========================================================\n   INNER\n   DESKTOP UNVER\u00c4NDERT\n========================================================= *\/\n\n.np-running__inner {\n  position: relative;\n\n  z-index: 1;\n\n  width:\n    min(100%, 1600px);\n\n  min-height:\n    clamp(760px, 88vh, 940px);\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(105px, 10vh, 145px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(105px, 10vh, 145px);\n\n  display: flex;\n\n  align-items: center;\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.np-running__content {\n  width:\n    min(48%, 650px);\n}\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.np-running__eyebrow {\n  margin-bottom:\n    clamp(28px, 2.8vw, 40px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.72);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-running__headline {\n  margin: 0;\n\n  max-width:\n    680px;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(58px, 6vw, 102px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.90;\n\n  letter-spacing:\n    -0.048em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-running__headline > span {\n  display: block;\n}\n\n\n.np-running__outline {\n  margin-top:\n    0.06em;\n\n  color:\n    rgba(8,10,12,0);\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.55);\n}\n\n\n\/* =========================================================\n   STATEMENT\n========================================================= *\/\n\n.np-running__statement {\n  margin-top:\n    clamp(38px, 3.7vw, 52px);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(17px, 1.2vw, 20px);\n\n  line-height:\n    1.5;\n}\n\n\n.np-running__statement strong,\n.np-running__statement span {\n  display: block;\n}\n\n\n.np-running__statement strong {\n  font-weight:\n    600;\n\n  color:\n    rgba(242,241,237,0.96);\n}\n\n\n.np-running__statement span {\n  margin-top:\n    2px;\n\n  font-weight:\n    500;\n\n  color:\n    rgba(242,241,237,0.56);\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.np-running__copy {\n  max-width:\n    440px;\n\n  margin:\n\n    clamp(24px, 2.4vw, 32px)\n\n    0\n\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 1vw, 16px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.72;\n\n  color:\n    rgba(242,241,237,0.54);\n}\n\n\n\/* =========================================================\n   LINK\n========================================================= *\/\n\n.np-running__link {\n  position: relative;\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap:\n    14px;\n\n  margin-top:\n    clamp(30px, 3vw, 40px);\n\n  padding-bottom:\n    7px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    rgba(242,241,237,0.82);\n\n  text-decoration:\n    none;\n\n  text-transform:\n    uppercase;\n\n  transition:\n    color 0.25s ease;\n}\n\n\n\/* =========================================================\n   LINK UNDERLINE\n========================================================= *\/\n\n.np-running__link::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n\n  bottom: 0;\n\n  width: 100%;\n\n  height: 1px;\n\n  background:\n    rgba(242,241,237,0.20);\n\n  transition:\n    background 0.25s ease;\n}\n\n\n\/* =========================================================\n   CSS ARROW\n========================================================= *\/\n\n.np-running__arrow {\n  position: relative;\n\n  width:\n    17px;\n\n  height:\n    10px;\n\n  flex:\n    0 0 17px;\n\n  transition:\n\n    transform\n    0.32s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n.np-running__arrow::before {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n\n  top: 50%;\n\n  width:\n    15px;\n\n  height:\n    1px;\n\n  background:\n    var(--blue);\n\n  transform:\n    translateY(-50%);\n}\n\n\n.np-running__arrow::after {\n  content: \"\";\n\n  position: absolute;\n\n  right: 0;\n\n  top: 50%;\n\n  width:\n    6px;\n\n  height:\n    6px;\n\n  border-top:\n    1px solid var(--blue);\n\n  border-right:\n    1px solid var(--blue);\n\n  transform:\n    translateY(-50%)\n    rotate(45deg);\n}\n\n\n\/* =========================================================\n   SUBTLE HOVER\n========================================================= *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  .np-running__link:hover {\n    color:\n      var(--white);\n  }\n\n\n  .np-running__link:hover::after {\n    background:\n      rgba(242,241,237,0.46);\n  }\n\n\n  .np-running__link:hover\n  .np-running__arrow {\n    transform:\n      translateX(4px);\n  }\n\n}\n\n\n\/* =========================================================\n   KEYBOARD FOCUS\n========================================================= *\/\n\n.np-running__link:focus-visible {\n  outline:\n    1px solid rgba(65,105,255,0.72);\n\n  outline-offset:\n    7px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1000px) {\n\n  .np-running__media img {\n    object-position:\n      65% center;\n  }\n\n\n  .np-running__content {\n    width:\n      55%;\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET PORTRAIT\n========================================================= *\/\n\n@media (max-width: 850px) {\n\n  .np-running {\n    min-height:\n      760px;\n  }\n\n\n  .np-running__inner {\n    min-height:\n      760px;\n\n    padding:\n\n      90px\n\n      28px\n\n      100px;\n\n    align-items:\n      flex-end;\n  }\n\n\n  .np-running__content {\n    width:\n      100%;\n\n    max-width:\n      660px;\n  }\n\n\n  .np-running__media img {\n    object-position:\n      60% center;\n  }\n\n\n  .np-running__media::after {\n    background:\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0.56) 0%,\n\n        rgba(8,10,12,0.30) 7%,\n\n        rgba(8,10,12,0.13) 15%,\n\n        rgba(8,10,12,0.045) 23%,\n\n        rgba(8,10,12,0.01) 30%,\n\n        rgba(8,10,12,0) 36%,\n\n        rgba(8,10,12,0.05) 48%,\n\n        rgba(8,10,12,0.18) 57%,\n\n        rgba(8,10,12,0.40) 66%,\n\n        rgba(8,10,12,0.65) 75%,\n\n        rgba(8,10,12,0.84) 84%,\n\n        rgba(8,10,12,0.95) 92%,\n\n        rgba(8,10,12,1) 100%\n      ),\n\n      linear-gradient(\n        90deg,\n\n        rgba(8,10,12,0.52) 0%,\n\n        rgba(8,10,12,0.28) 34%,\n\n        rgba(8,10,12,0.12) 58%,\n\n        rgba(8,10,12,0.035) 78%,\n\n        rgba(8,10,12,0) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   DEDICATED PORTRAIT IMAGE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-running {\n    min-height:\n      720px;\n  }\n\n\n  .np-running__inner {\n    min-height:\n      720px;\n\n    padding:\n\n      72px\n\n      20px\n\n      78px;\n\n    align-items:\n      flex-end;\n  }\n\n\n  .np-running__eyebrow {\n    margin-bottom:\n      22px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-running__headline {\n    font-size:\n      clamp(44px, 12.5vw, 60px);\n\n    line-height:\n      0.92;\n  }\n\n\n  .np-running__statement {\n    margin-top:\n      31px;\n\n    font-size:\n      16px;\n  }\n\n\n  .np-running__copy {\n    max-width:\n      350px;\n\n    margin-top:\n      23px;\n\n    font-size:\n      14px;\n  }\n\n\n  .np-running__link {\n    margin-top:\n      27px;\n\n    font-size:\n      9.5px;\n  }\n\n\n  \/* =======================================================\n     MOBILE IMAGE\n     Dedicated 1080 \u00d7 1614 portrait asset\n  ======================================================== *\/\n\n  .np-running__media img {\n    width:\n      100%;\n\n    height:\n      100%;\n\n    object-fit:\n      cover;\n\n    object-position:\n      55% 48%;\n  }\n\n\n  \/* =======================================================\n     MOBILE IMAGE INTEGRATION\n\n     ONLY CHANGE:\n     The lower black transition begins slightly earlier,\n     so statement, copy and CTA sit on a calmer surface.\n  ======================================================== *\/\n\n  .np-running__media::after {\n    background:\n\n      \/* ---------------------------------------------------\n         VERTICAL\n         BLACK TRANSITION MOVED SLIGHTLY UP\n      --------------------------------------------------- *\/\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0.24) 0%,\n\n        rgba(8,10,12,0.10) 8%,\n\n        rgba(8,10,12,0.035) 16%,\n\n        rgba(8,10,12,0.008) 24%,\n\n        rgba(8,10,12,0) 31%,\n\n        rgba(8,10,12,0) 39%,\n\n        rgba(8,10,12,0.025) 44%,\n\n        rgba(8,10,12,0.07) 49%,\n\n        rgba(8,10,12,0.14) 54%,\n\n        rgba(8,10,12,0.24) 59%,\n\n        rgba(8,10,12,0.37) 64%,\n\n        rgba(8,10,12,0.52) 69%,\n\n        rgba(8,10,12,0.67) 75%,\n\n        rgba(8,10,12,0.79) 81%,\n\n        rgba(8,10,12,0.88) 87%,\n\n        rgba(8,10,12,0.94) 92%,\n\n        rgba(8,10,12,0.98) 96%,\n\n        rgba(8,10,12,0.995) 99%,\n\n        rgba(8,10,12,1) 100%\n      ),\n\n\n      \/* ---------------------------------------------------\n         SUBTLE LEFT TEXT SUPPORT\n         UNVER\u00c4NDERT\n      --------------------------------------------------- *\/\n\n      linear-gradient(\n        90deg,\n\n        rgba(8,10,12,0.40) 0%,\n\n        rgba(8,10,12,0.26) 26%,\n\n        rgba(8,10,12,0.13) 50%,\n\n        rgba(8,10,12,0.045) 70%,\n\n        rgba(8,10,12,0.01) 86%,\n\n        rgba(8,10,12,0) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-running__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-running__link {\n    font-size:\n      9px;\n  }\n\n\n  .np-running__headline {\n    font-size:\n      clamp(40px, 12vw, 52px);\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-running__link,\n  .np-running__link::after,\n  .np-running__arrow {\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-8b54d8c e-con e-atomic-element e-flexbox-base e-default-div e-d4c3cf7 \" data-id=\"8b54d8c\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"8b54d8c\" data-e-type=\"e-flexbox\" data-id=\"8b54d8c\">\n    \t\t<div class=\"elementor-element elementor-element-ba60240 elementor-widget elementor-widget-html\" data-id=\"ba60240\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 05 \u2014 PERFORMANCE\n     EDITORIAL PORTRAIT \/ FULL-STAGE \/ QUIET POWER\n========================================================= -->\n\n<section class=\"np-performance\" id=\"performance\" aria-labelledby=\"np-performance-title\">\n\n\n  <!-- =====================================================\n       PORTRAIT\n  ====================================================== -->\n\n  <figure class=\"np-performance__visual\">\n\n    <img loading=\"lazy\" src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-portrait-transparent-02.png\" alt=\"Norman Petermann\" width=\"750\" height=\"1000\" loading=\"lazy\" decoding=\"async\">\n\n  <\/figure>\n\n\n\n  <!-- =====================================================\n       CONTENT\n  ====================================================== -->\n\n  <div class=\"np-performance__inner\">\n\n    <div class=\"np-performance__content\">\n\n\n      <!-- EYEBROW -->\n\n      <div class=\"np-performance__eyebrow\">\n PERFORMANCE \/ 05\n      <\/div>\n\n\n      <!-- HEADLINE -->\n\n      <h2 class=\"np-performance__headline\" id=\"np-performance-title\">\n\n         <span>\nTRAINING\n<\/span>\n\n<span>\nIST NUR\n<\/span>\n\n<span class=\"np-performance__outline\">\nEIN TEIL DAVON.\n<\/span> \n\n      <\/h2>\n\n\n      <!-- STATEMENT -->\n\n      <div class=\"np-performance__statement\">\n\n        <strong>\n Trainiere gezielt.\n        <\/strong>\n\n        <span>\n Regeneriere genauso konsequent.\n        <\/span>\n\n      <\/div>\n\n\n      <!-- COPY -->\n\n      <p class=\"np-performance__copy\">\n Performance entsteht nicht allein im Training.\n Es ist das Zusammenspiel aus Vorbereitung, Training und Regeneration, das langfristig den Unterschied macht.\n      <\/p>\n\n\n      <!-- LINK -->\n\n      <a class=\"np-performance__link\" href=\"\/performance\/\">\n\n        <span>\n PERFORMANCE\n        <\/span>\n\n        <span class=\"np-performance__arrow\" aria-hidden=\"true\"><\/span>\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-performance,\n.np-performance * {\n  box-sizing: border-box;\n}\n\n\n.np-performance {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position: relative;\n\n  width: 100%;\n\n  min-height: 100vh;\n  min-height: 100svh;\n\n  overflow: hidden;\n\n  background: var(--black);\n  color: var(--white);\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-performance__inner {\n  position: relative;\n  z-index: 2;\n\n  width: min(100%, 1500px);\n\n  min-height: 100vh;\n  min-height: 100svh;\n\n  margin: 0 auto;\n\n  padding:\n    clamp(130px, 12vh, 190px)\n    clamp(28px, 4.2vw, 68px)\n    clamp(130px, 12vh, 190px);\n\n  display: flex;\n  align-items: center;\n\n  \/*\n   * IMPORTANT:\n   * The full-width content layer must not block\n   * mouse interaction with the portrait behind it.\n   *\/\n  pointer-events: none;\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.np-performance__content {\n  position: relative;\n  z-index: 3;\n\n  width: min(48%, 650px);\n\n  \/*\n   * Restore interaction for content and link.\n   *\/\n  pointer-events: auto;\n}\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.np-performance__eyebrow {\n  margin-bottom: clamp(30px, 2.8vw, 40px);\n\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 11px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.15em;\n\n  color: rgba(140,148,156,0.72);\n\n  text-transform: uppercase;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-performance__headline {\n  margin: 0;\n\n  max-width: 700px;\n\n  font-family: \"Archivo\", sans-serif;\n  font-size: clamp(56px, 5.8vw, 98px);\n  font-weight: 800;\n  line-height: 0.91;\n  letter-spacing: -0.049em;\n\n  text-transform: uppercase;\n}\n\n\n.np-performance__headline > span {\n  display: block;\n}\n\n\n.np-performance__outline {\n  margin-top: 0.055em;\n\n  color: rgba(8,10,12,0);\n\n  -webkit-text-stroke: 1px rgba(242,241,237,0.54);\n}\n\n\n\/* =========================================================\n   STATEMENT\n========================================================= *\/\n\n.np-performance__statement {\n  margin-top: clamp(39px, 3.7vw, 52px);\n\n  font-family: \"Archivo\", sans-serif;\n  font-size: clamp(17px, 1.2vw, 20px);\n  font-weight: 500;\n  line-height: 1.5;\n}\n\n\n.np-performance__statement strong,\n.np-performance__statement span {\n  display: block;\n}\n\n\n.np-performance__statement strong {\n  font-weight: 600;\n  color: rgba(242,241,237,0.96);\n}\n\n\n.np-performance__statement span {\n  margin-top: 3px;\n  color: rgba(242,241,237,0.54);\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.np-performance__copy {\n  width: min(100%, 455px);\n\n  margin:\n    clamp(25px, 2.4vw, 33px)\n    0\n    0;\n\n  font-family: \"Inter\", sans-serif;\n  font-size: clamp(14px, 1vw, 16px);\n  font-weight: 400;\n  line-height: 1.74;\n\n  color: rgba(242,241,237,0.52);\n}\n\n\n\/* =========================================================\n   LINK\n========================================================= *\/\n\n.np-performance__link {\n  position: relative;\n\n  display: inline-flex;\n  align-items: center;\n  gap: 14px;\n\n  margin-top: clamp(32px, 3vw, 42px);\n\n  padding-bottom: 8px;\n\n  font-family: \"IBM Plex Mono\", monospace;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 1;\n  letter-spacing: 0.12em;\n\n  color: rgba(242,241,237,0.82);\n\n  text-decoration: none;\n  text-transform: uppercase;\n\n  transition: color 0.25s ease;\n}\n\n\n\/* =========================================================\n   LINK UNDERLINE\n========================================================= *\/\n\n.np-performance__link::after {\n  content: \"\";\n\n  position: absolute;\n  left: 0;\n  bottom: 0;\n\n  width: 100%;\n  height: 1px;\n\n  background: rgba(242,241,237,0.20);\n\n  transition: background 0.25s ease;\n}\n\n\n\/* =========================================================\n   CSS ARROW\n========================================================= *\/\n\n.np-performance__arrow {\n  position: relative;\n\n  width: 17px;\n  height: 10px;\n  flex: 0 0 17px;\n\n  transition:\n    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n.np-performance__arrow::before {\n  content: \"\";\n\n  position: absolute;\n  left: 0;\n  top: 50%;\n\n  width: 15px;\n  height: 1px;\n\n  background: var(--blue);\n\n  transform: translateY(-50%);\n}\n\n\n.np-performance__arrow::after {\n  content: \"\";\n\n  position: absolute;\n  right: 0;\n  top: 50%;\n\n  width: 6px;\n  height: 6px;\n\n  border-top: 1px solid var(--blue);\n  border-right: 1px solid var(--blue);\n\n  transform:\n    translateY(-50%)\n    rotate(45deg);\n}\n\n\n\/* =========================================================\n   LINK HOVER\n========================================================= *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  .np-performance__link:hover {\n    color: var(--white);\n  }\n\n\n  .np-performance__link:hover::after {\n    background: rgba(242,241,237,0.46);\n  }\n\n\n  .np-performance__link:hover\n  .np-performance__arrow {\n    transform: translateX(4px);\n  }\n\n}\n\n\n\/* =========================================================\n   KEYBOARD FOCUS\n========================================================= *\/\n\n.np-performance__link:focus-visible {\n  outline: 1px solid rgba(65,105,255,0.72);\n  outline-offset: 7px;\n}\n\n\n\/* =========================================================\n   VISUAL\n========================================================= *\/\n\n.np-performance__visual {\n  position: absolute;\n  z-index: 1;\n\n  top: 0;\n  right: 0;\n  bottom: 0;\n\n  width: min(59vw, 940px);\n\n  margin: 0;\n\n  overflow: hidden;\n\n  background: var(--black);\n\n  \/*\n   * Portrait area is now interactive.\n   *\/\n  pointer-events: auto;\n}\n\n\n\/* =========================================================\n   QUIET LIGHT BEHIND PORTRAIT\n========================================================= *\/\n\n.np-performance__visual::before {\n  content: \"\";\n\n  position: absolute;\n  z-index: 0;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n    radial-gradient(\n      ellipse at 70% 47%,\n      rgba(242,241,237,0.055) 0%,\n      rgba(242,241,237,0.032) 21%,\n      rgba(8,10,12,0.012) 45%,\n      rgba(8,10,12,0) 68%\n    );\n}\n\n\n\/* =========================================================\n   PORTRAIT\n========================================================= *\/\n\n.np-performance__visual img {\n  position: absolute;\n  z-index: 1;\n\n  right: clamp(24px, 4vw, 74px);\n  bottom: -1px;\n\n  width: auto;\n  height: min(88%, 900px);\n\n  max-width: none;\n\n  display: block;\n\n  object-fit: contain;\n  object-position: right bottom;\n\n  transition:\n    transform 0.45s ease,\n    filter 0.45s ease;\n}\n\n\n\/* =========================================================\n   IMAGE-ONLY HOVER\n\n   Same principle as original version.\n   Slightly calmer.\n========================================================= *\/\n\n@media\n  (min-width: 901px)\n  and (hover: hover)\n  and (pointer: fine) {\n\n  .np-performance__visual img:hover {\n    transform:\n      scale(1.015);\n\n    filter:\n      saturate(1.04)\n      contrast(1.03);\n  }\n\n}\n\n\n\/* =========================================================\n   PORTRAIT INTEGRATION\n========================================================= *\/\n\n.np-performance__visual::after {\n  content: \"\";\n\n  position: absolute;\n  z-index: 2;\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    \/* -----------------------------------------------------\n       LEFT \u2192 PORTRAIT\n    ----------------------------------------------------- *\/\n\n    linear-gradient(\n      90deg,\n\n      rgba(8,10,12,1) 0%,\n      rgba(8,10,12,0.98) 8%,\n      rgba(8,10,12,0.88) 16%,\n      rgba(8,10,12,0.67) 24%,\n      rgba(8,10,12,0.42) 31%,\n      rgba(8,10,12,0.21) 38%,\n      rgba(8,10,12,0.08) 44%,\n      rgba(8,10,12,0.025) 49%,\n      rgba(8,10,12,0) 54%,\n      rgba(8,10,12,0) 100%\n    ),\n\n    \/* -----------------------------------------------------\n       BOTTOM FEATHER\n       extended for a calmer full-stage ending\n    ----------------------------------------------------- *\/\n\n    linear-gradient(\n      0deg,\n\n      rgba(8,10,12,1) 0%,\n      rgba(8,10,12,0.94) 4%,\n      rgba(8,10,12,0.79) 9%,\n      rgba(8,10,12,0.58) 15%,\n      rgba(8,10,12,0.37) 21%,\n      rgba(8,10,12,0.19) 27%,\n      rgba(8,10,12,0.075) 33%,\n      rgba(8,10,12,0.022) 38%,\n      rgba(8,10,12,0.005) 42%,\n      rgba(8,10,12,0) 46%,\n      rgba(8,10,12,0) 100%\n    );\n}\n\n\n\/* =========================================================\n   TABLET LANDSCAPE\n========================================================= *\/\n\n@media (max-width: 1100px) {\n\n  .np-performance__content {\n    width: min(53%, 620px);\n  }\n\n\n  .np-performance__visual {\n    width: 57%;\n  }\n\n\n  .np-performance__visual img {\n    right: 10px;\n    height: min(86%, 840px);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET PORTRAIT\n   UNVER\u00c4NDERT\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .np-performance {\n    min-height: auto;\n  }\n\n\n  .np-performance__inner {\n    min-height: auto;\n\n    padding:\n      48px\n      28px\n      34px;\n\n    display: block;\n  }\n\n\n  .np-performance__content {\n    width: 100%;\n    max-width: 680px;\n  }\n\n\n  .np-performance__headline {\n    font-size: clamp(50px, 8vw, 74px);\n  }\n\n\n  .np-performance__visual {\n    position: relative;\n\n    top: auto;\n    right: auto;\n    bottom: auto;\n\n    width: calc(100% + 56px);\n    height: clamp(650px, 82vw, 820px);\n\n    margin:\n      clamp(56px, 7vw, 74px)\n      -28px\n      0;\n  }\n\n\n  .np-performance__visual::before {\n    background:\n      radial-gradient(\n        ellipse at 50% 48%,\n        rgba(242,241,237,0.055) 0%,\n        rgba(242,241,237,0.030) 22%,\n        rgba(8,10,12,0.01) 48%,\n        rgba(8,10,12,0) 70%\n      );\n  }\n\n\n  .np-performance__visual img {\n    right: 50%;\n    bottom: -1px;\n\n    height: 100%;\n\n    transform: translateX(50%);\n  }\n\n\n  .np-performance__visual::after {\n    background:\n\n      linear-gradient(\n        90deg,\n        rgba(8,10,12,0.30) 0%,\n        rgba(8,10,12,0.10) 12%,\n        rgba(8,10,12,0.02) 22%,\n        rgba(8,10,12,0) 32%,\n        rgba(8,10,12,0) 68%,\n        rgba(8,10,12,0.02) 78%,\n        rgba(8,10,12,0.10) 88%,\n        rgba(8,10,12,0.30) 100%\n      ),\n\n      linear-gradient(\n        0deg,\n        rgba(8,10,12,1) 0%,\n        rgba(8,10,12,0.90) 5%,\n        rgba(8,10,12,0.68) 10%,\n        rgba(8,10,12,0.44) 16%,\n        rgba(8,10,12,0.24) 22%,\n        rgba(8,10,12,0.10) 28%,\n        rgba(8,10,12,0.03) 34%,\n        rgba(8,10,12,0.008) 39%,\n        rgba(8,10,12,0) 44%,\n        rgba(8,10,12,0) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   RECOMPOSED AS ONE CONTINUOUS STAGE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-performance {\n    scroll-margin-top: 76px;\n  }\n\n\n  .np-performance__visual {\n    width:\n      calc(100% + 40px);\n\n    height:\n      clamp(520px, 132vw, 640px);\n\n    margin:\n      0\n      -20px\n      0;\n  }\n\n\n  .np-performance__visual img {\n    right:\n      auto;\n\n    left:\n      50%;\n\n    width:\n      min(94vw, 470px);\n\n    height:\n      auto;\n\n    max-height:\n      100%;\n\n    transform:\n      translateX(-50%);\n  }\n\n\n  .np-performance__visual::before {\n    background:\n      radial-gradient(\n        ellipse at 50% 40%,\n        rgba(242,241,237,0.050) 0%,\n        rgba(242,241,237,0.028) 20%,\n        rgba(8,10,12,0.010) 45%,\n        rgba(8,10,12,0) 68%\n      );\n  }\n\n\n  .np-performance__visual::after {\n    background:\n\n      linear-gradient(\n        90deg,\n\n        rgba(8,10,12,0.14) 0%,\n        rgba(8,10,12,0.05) 10%,\n        rgba(8,10,12,0.012) 18%,\n        rgba(8,10,12,0) 27%,\n\n        rgba(8,10,12,0) 73%,\n\n        rgba(8,10,12,0.012) 82%,\n        rgba(8,10,12,0.05) 90%,\n        rgba(8,10,12,0.14) 100%\n      ),\n\n      linear-gradient(\n        0deg,\n\n        rgba(8,10,12,1.00) 0%,\n        rgba(8,10,12,0.97) 5%,\n        rgba(8,10,12,0.88) 10%,\n        rgba(8,10,12,0.74) 15%,\n        rgba(8,10,12,0.57) 20%,\n        rgba(8,10,12,0.40) 25%,\n        rgba(8,10,12,0.25) 30%,\n        rgba(8,10,12,0.14) 35%,\n        rgba(8,10,12,0.065) 39%,\n        rgba(8,10,12,0.025) 43%,\n        rgba(8,10,12,0.007) 47%,\n        rgba(8,10,12,0) 50%,\n        rgba(8,10,12,0) 100%\n      );\n  }\n\n\n  \/*\n   * ONLY FINAL CHANGE:\n   * Content block moved 12px further upward.\n   *\/\n\n  .np-performance__inner {\n    min-height:\n      auto;\n\n    padding:\n      0\n      20px\n      82px;\n\n    margin-top:\n      -70px;\n\n    display:\n      block;\n  }\n\n\n  .np-performance__content {\n    width:\n      100%;\n\n    max-width:\n      100%;\n  }\n\n\n  .np-performance__eyebrow {\n    margin-bottom:\n      24px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-performance__headline {\n    font-size:\n      clamp(40px, 11.5vw, 56px);\n\n    line-height:\n      0.93;\n  }\n\n\n  .np-performance__statement {\n    margin-top:\n      32px;\n\n    font-size:\n      16px;\n  }\n\n\n  .np-performance__copy {\n    max-width:\n      365px;\n\n    margin-top:\n      23px;\n\n    font-size:\n      14px;\n\n    line-height:\n      1.7;\n  }\n\n\n  .np-performance__link {\n    margin-top:\n      29px;\n\n    font-size:\n      9.5px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-performance__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-performance__link {\n    font-size:\n      9px;\n  }\n\n\n  .np-performance__headline {\n    font-size:\n      clamp(37px, 11vw, 48px);\n  }\n\n\n  .np-performance__visual {\n    height:\n      clamp(490px, 128vw, 570px);\n  }\n\n\n  .np-performance__inner {\n    margin-top:\n      -64px;\n\n    padding-bottom:\n      76px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-performance__link,\n  .np-performance__link::after,\n  .np-performance__arrow,\n  .np-performance__visual img {\n    transition: none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-9292386 e-con e-atomic-element e-flexbox-base e-default-div e-6a508d5 \" data-id=\"9292386\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"9292386\" data-e-type=\"e-flexbox\" data-id=\"9292386\">\n    \t\t<div class=\"elementor-element elementor-element-d3fcbdb elementor-widget elementor-widget-html\" data-id=\"d3fcbdb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 06 \u2014 MINDSET\n     CINEMATIC \/ FULL-STAGE \/ QUIET POWER\n     TRUE FULL BLEED\n========================================================= -->\n\n<section class=\"np-mindset\" id=\"mindset\" aria-labelledby=\"np-mindset-title\">\n\n\n  <!-- =====================================================\n       BACKGROUND IMAGE\n  ====================================================== -->\n\n  <picture>\n\n    <source media=\"(max-width: 767px)\" srcset=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/08\/norman-petermann-night-track-running.jpg\">\n\n    <img class=\"np-mindset__image\" src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/08\/norman-petermann-night-track-running-dark-full.jpg\" alt=\"Norman Petermann l\u00e4uft nachts auf der Laufbahn\" loading=\"lazy\" decoding=\"async\">\n\n  <\/source><\/picture>\n\n\n\n  <!-- =====================================================\n       CONTENT\n  ====================================================== -->\n\n  <div class=\"np-mindset__inner\">\n\n    <div class=\"np-mindset__content\">\n\n\n      <!-- EYEBROW -->\n\n      <div class=\"np-mindset__eyebrow\">\n MINDSET \/ 06\n      <\/div>\n\n\n      <!-- HEADLINE -->\n\n      <h2 class=\"np-mindset__headline\" id=\"np-mindset-title\">\n\n         <span>\nDER STANDARD\n<\/span>\n\n<span>\nVER\u00c4NDERT SICH\n<\/span>\n\n<span class=\"np-mindset__outline\">\nNICHT.\n<\/span> \n\n      <\/h2>\n\n\n      <!-- STATEMENT -->\n\n      <div class=\"np-mindset__statement\">\n\n        <strong>\n Motivation kommt und geht.\n        <\/strong>\n\n        <span>\n Der Standard bleibt.\n        <\/span>\n\n      <\/div>\n\n\n      <!-- COPY -->\n\n      <p class=\"np-mindset__copy\">\n Mindset sorgt daf\u00fcr, dass du konsequent bleibst,<br\/>auch wenn sich Bedingungen, Motivation und Ergebnisse ver\u00e4ndern.\n      <\/p>\n\n\n      <!-- LINK -->\n\n      <a class=\"np-mindset__link\" href=\"\/mindset\/\">\n\n        <span>\n MINDSET\n        <\/span>\n\n        <span class=\"np-mindset__arrow\" aria-hidden=\"true\"><\/span>\n\n      <\/a>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-mindset,\n.np-mindset * {\n  box-sizing: border-box;\n}\n\n\n.np-mindset {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position: relative;\n\n  width: 100vw;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  min-height: 100vh;\n  min-height: 100svh;\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n}\n\n\n\/* =========================================================\n   BACKGROUND IMAGE\n========================================================= *\/\n\n.np-mindset__image {\n  position: absolute;\n\n  z-index: 0;\n\n  inset: 0;\n\n  width: 100%;\n  height: 100%;\n\n  max-width: none;\n\n  display: block;\n\n  object-fit: cover;\n\n  object-position:\n    68% center;\n}\n\n\n\/* =========================================================\n   IMAGE INTEGRATION\n========================================================= *\/\n\n.np-mindset::after {\n  content: \"\";\n\n  position: absolute;\n\n  z-index: 1;\n\n  inset: 0;\n\n  pointer-events: none;\n\n  background:\n\n    linear-gradient(\n      90deg,\n\n      rgba(8,10,12,1) 0%,\n      rgba(8,10,12,0.995) 14%,\n      rgba(8,10,12,0.97) 24%,\n      rgba(8,10,12,0.90) 33%,\n      rgba(8,10,12,0.78) 41%,\n      rgba(8,10,12,0.62) 49%,\n      rgba(8,10,12,0.46) 57%,\n      rgba(8,10,12,0.30) 64%,\n      rgba(8,10,12,0.17) 71%,\n      rgba(8,10,12,0.08) 77%,\n      rgba(8,10,12,0.03) 82%,\n      rgba(8,10,12,0.01) 87%,\n      rgba(8,10,12,0) 91%,\n      rgba(8,10,12,0) 100%\n    ),\n\n    linear-gradient(\n      180deg,\n\n      rgba(8,10,12,0.82) 0%,\n      rgba(8,10,12,0.61) 4%,\n      rgba(8,10,12,0.39) 8%,\n      rgba(8,10,12,0.22) 13%,\n      rgba(8,10,12,0.11) 18%,\n      rgba(8,10,12,0.045) 23%,\n      rgba(8,10,12,0.012) 28%,\n      rgba(8,10,12,0) 33%,\n      rgba(8,10,12,0) 64%,\n      rgba(8,10,12,0.025) 69%,\n      rgba(8,10,12,0.07) 74%,\n      rgba(8,10,12,0.15) 79%,\n      rgba(8,10,12,0.27) 84%,\n      rgba(8,10,12,0.43) 89%,\n      rgba(8,10,12,0.62) 94%,\n      rgba(8,10,12,0.80) 97%,\n      rgba(8,10,12,0.94) 100%\n    );\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-mindset__inner {\n  position: relative;\n\n  z-index: 2;\n\n  width:\n    min(100%, 1500px);\n\n  min-height: 100vh;\n  min-height: 100svh;\n\n  margin:\n    0 auto;\n\n  padding:\n    clamp(130px, 12vh, 190px)\n    clamp(28px, 4.2vw, 68px)\n    clamp(130px, 12vh, 190px);\n\n  display: flex;\n\n  align-items: center;\n}\n\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.np-mindset__content {\n  width:\n    min(52%, 720px);\n}\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.np-mindset__eyebrow {\n  margin-bottom:\n    clamp(30px, 2.8vw, 40px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size: 11px;\n\n  font-weight: 500;\n\n  line-height: 1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.72);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-mindset__headline {\n  margin: 0;\n\n  max-width:\n    760px;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(60px, 6.2vw, 108px);\n\n  font-weight: 800;\n\n  line-height:\n    0.90;\n\n  letter-spacing:\n    -0.05em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-mindset__headline > span {\n  display: block;\n}\n\n\n\/* =========================================================\n   OUTLINE\n========================================================= *\/\n\n.np-mindset__outline {\n  margin-top:\n    0.055em;\n\n  color:\n    rgba(8,10,12,0);\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.55);\n}\n\n\n\/* =========================================================\n   STATEMENT\n========================================================= *\/\n\n.np-mindset__statement {\n  margin-top:\n    clamp(38px, 3.8vw, 52px);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(17px, 1.2vw, 20px);\n\n  line-height:\n    1.5;\n}\n\n\n.np-mindset__statement strong,\n.np-mindset__statement span {\n  display: block;\n}\n\n\n.np-mindset__statement strong {\n  font-weight: 600;\n\n  color:\n    rgba(242,241,237,0.96);\n}\n\n\n.np-mindset__statement span {\n  margin-top: 3px;\n\n  font-weight: 500;\n\n  color:\n    rgba(242,241,237,0.52);\n}\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.np-mindset__copy {\n  max-width:\n    445px;\n\n  margin:\n    clamp(24px, 2.4vw, 32px)\n    0\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 1vw, 16px);\n\n  font-weight: 400;\n\n  line-height:\n    1.72;\n\n  color:\n    rgba(242,241,237,0.54);\n}\n\n\n\/* =========================================================\n   LINK\n========================================================= *\/\n\n.np-mindset__link {\n  position: relative;\n\n  display: inline-flex;\n\n  align-items: center;\n\n  gap:\n    14px;\n\n  margin-top:\n    clamp(30px, 3vw, 40px);\n\n  padding-bottom:\n    8px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    rgba(242,241,237,0.82);\n\n  text-decoration:\n    none;\n\n  text-transform:\n    uppercase;\n\n  transition:\n    color 0.25s ease;\n}\n\n\n\/* =========================================================\n   LINK UNDERLINE\n========================================================= *\/\n\n.np-mindset__link::after {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n\n  bottom: 0;\n\n  width:\n    100%;\n\n  height:\n    1px;\n\n  background:\n    rgba(242,241,237,0.20);\n\n  transition:\n    background 0.25s ease;\n}\n\n\n\/* =========================================================\n   CSS ARROW\n========================================================= *\/\n\n.np-mindset__arrow {\n  position: relative;\n\n  width:\n    17px;\n\n  height:\n    10px;\n\n  flex:\n    0 0 17px;\n\n  transition:\n    transform\n    0.32s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n.np-mindset__arrow::before {\n  content: \"\";\n\n  position: absolute;\n\n  left: 0;\n\n  top: 50%;\n\n  width:\n    15px;\n\n  height:\n    1px;\n\n  background:\n    var(--blue);\n\n  transform:\n    translateY(-50%);\n}\n\n\n.np-mindset__arrow::after {\n  content: \"\";\n\n  position: absolute;\n\n  right: 0;\n\n  top: 50%;\n\n  width:\n    6px;\n\n  height:\n    6px;\n\n  border-top:\n    1px solid var(--blue);\n\n  border-right:\n    1px solid var(--blue);\n\n  transform:\n    translateY(-50%)\n    rotate(45deg);\n}\n\n\n\/* =========================================================\n   LINK HOVER\n========================================================= *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  .np-mindset__link:hover {\n    color:\n      var(--white);\n  }\n\n\n  .np-mindset__link:hover::after {\n    background:\n      rgba(242,241,237,0.46);\n  }\n\n\n  .np-mindset__link:hover\n  .np-mindset__arrow {\n    transform:\n      translateX(4px);\n  }\n\n}\n\n\n\/* =========================================================\n   KEYBOARD FOCUS\n========================================================= *\/\n\n.np-mindset__link:focus-visible {\n  outline:\n    1px solid rgba(65,105,255,0.72);\n\n  outline-offset:\n    7px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1000px) {\n\n  .np-mindset__content {\n    width:\n      60%;\n  }\n\n\n  .np-mindset__image {\n    object-position:\n      64% center;\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET \u2014 FULL-STAGE INTEGRATION\n   768 \u2014 1000PX\n========================================================= *\/\n\n@media (min-width: 768px) and (max-width: 1000px) {\n\n  .np-mindset__inner {\n    padding:\n      108px\n      28px\n      112px;\n  }\n\n\n  .np-mindset__content {\n    width:\n      min(64%, 640px);\n\n    transform:\n      translateY(-24px);\n  }\n\n\n  .np-mindset__headline {\n    font-size:\n      clamp(52px, 7.4vw, 76px);\n  }\n\n\n  .np-mindset__image {\n    object-position:\n      66% center;\n\n    transform:\n      scale(1.035);\n\n    transform-origin:\n      center center;\n  }\n\n\n  .np-mindset::after {\n    background:\n\n      linear-gradient(\n        90deg,\n\n        rgba(8,10,12,1.00) 0%,\n        rgba(8,10,12,0.995) 12%,\n        rgba(8,10,12,0.96) 23%,\n        rgba(8,10,12,0.86) 34%,\n        rgba(8,10,12,0.70) 45%,\n        rgba(8,10,12,0.52) 56%,\n        rgba(8,10,12,0.34) 66%,\n        rgba(8,10,12,0.19) 75%,\n        rgba(8,10,12,0.09) 82%,\n        rgba(8,10,12,0.035) 88%,\n        rgba(8,10,12,0.010) 93%,\n        rgba(8,10,12,0) 97%,\n        rgba(8,10,12,0) 100%\n      ),\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0.90) 0%,\n        rgba(8,10,12,0.70) 5%,\n        rgba(8,10,12,0.47) 10%,\n        rgba(8,10,12,0.27) 16%,\n        rgba(8,10,12,0.13) 22%,\n        rgba(8,10,12,0.055) 28%,\n        rgba(8,10,12,0.015) 34%,\n        rgba(8,10,12,0) 39%,\n        rgba(8,10,12,0) 48%,\n        rgba(8,10,12,0.025) 54%,\n        rgba(8,10,12,0.075) 60%,\n        rgba(8,10,12,0.16) 66%,\n        rgba(8,10,12,0.29) 72%,\n        rgba(8,10,12,0.46) 78%,\n        rgba(8,10,12,0.64) 84%,\n        rgba(8,10,12,0.80) 90%,\n        rgba(8,10,12,0.92) 95%,\n        rgba(8,10,12,0.98) 98%,\n        rgba(8,10,12,1.00) 100%\n      );\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-mindset {\n    min-height:\n      100svh;\n\n    scroll-margin-top:\n      70px;\n  }\n\n\n  .np-mindset__image {\n    object-position:\n      calc(50% + 16px) center;\n\n    transform:\n      scale(1.04);\n\n    transform-origin:\n      center center;\n  }\n\n\n  .np-mindset::after {\n    background:\n\n      linear-gradient(\n        180deg,\n\n        rgba(8,10,12,0.64) 0%,\n        rgba(8,10,12,0.37) 7%,\n        rgba(8,10,12,0.18) 15%,\n        rgba(8,10,12,0.07) 23%,\n        rgba(8,10,12,0.025) 30%,\n        rgba(8,10,12,0.02) 39%,\n        rgba(8,10,12,0.11) 48%,\n        rgba(8,10,12,0.30) 58%,\n        rgba(8,10,12,0.57) 68%,\n        rgba(8,10,12,0.79) 78%,\n        rgba(8,10,12,0.92) 88%,\n        rgba(8,10,12,0.98) 95%,\n        rgba(8,10,12,1) 100%\n      ),\n\n      linear-gradient(\n        90deg,\n\n        rgba(8,10,12,0.74) 0%,\n        rgba(8,10,12,0.52) 30%,\n        rgba(8,10,12,0.30) 52%,\n        rgba(8,10,12,0.13) 72%,\n        rgba(8,10,12,0.04) 88%,\n        rgba(8,10,12,0) 100%\n      );\n  }\n\n\n  .np-mindset__inner {\n    min-height:\n      100svh;\n\n    padding:\n      86px\n      20px\n      86px;\n\n    align-items:\n      flex-end;\n  }\n\n\n  .np-mindset__content {\n    width:\n      100%;\n\n    max-width:\n      560px;\n  }\n\n\n  .np-mindset__eyebrow {\n    margin-bottom:\n      24px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-mindset__headline {\n    font-size:\n      clamp(44px, 12.5vw, 60px);\n\n    line-height:\n      0.92;\n  }\n\n\n  .np-mindset__statement {\n    margin-top:\n      30px;\n\n    font-size:\n      16px;\n  }\n\n\n  .np-mindset__copy {\n    max-width:\n      350px;\n\n    margin-top:\n      22px;\n\n    font-size:\n      14px;\n  }\n\n\n  .np-mindset__link {\n    margin-top:\n      27px;\n\n    font-size:\n      9.5px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-mindset__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-mindset__link {\n    font-size:\n      9px;\n  }\n\n\n  .np-mindset__headline {\n    font-size:\n      clamp(40px, 12vw, 52px);\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-mindset__link,\n  .np-mindset__link::after,\n  .np-mindset__arrow {\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-572f7ca e-con e-atomic-element e-flexbox-base e-default-div e-8ef28e9 \" data-id=\"572f7ca\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"572f7ca\" data-e-type=\"e-flexbox\" data-id=\"572f7ca\">\n    \t\t<div class=\"elementor-element elementor-element-dabe01b elementor-widget elementor-widget-html\" data-id=\"dabe01b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 07 \u2014 REAL PERFORMANCE\n     QUIET POWER \/ PERFORMANCE PROOF\n========================================================= -->\n\n<section class=\"np-proof\" id=\"real-performance\" aria-labelledby=\"np-proof-title\">\n\n  <div class=\"np-proof__inner\">\n\n\n    <!-- =====================================================\n         HEADER\n    ====================================================== -->\n\n    <header class=\"np-proof__header\">\n\n      <div class=\"np-proof__eyebrow\">\n ECHTE PERFORMANCE \/ 07\n      <\/div>\n\n\n      <p class=\"np-proof__lead\">\n DURCH DIE ARBEIT GEFORMT.\n      <\/p>\n\n\n      <h2 class=\"np-proof__headline\" id=\"np-proof-title\">\n DURCH ZAHLEN BELEGT.\n      <\/h2>\n\n    <\/header>\n\n\n\n    <!-- =====================================================\n         PERFORMANCE VALUES\n    ====================================================== -->\n\n    <div class=\"np-proof__stats\">\n\n\n      <!-- 5 KM -->\n\n      <div class=\"np-proof__stat\">\n\n         <strong>\n16:09\n<\/strong>\n\n<span class=\"np-proof__distance\">\n5 KM\n<\/span>\n\n<span class=\"np-proof__label\">\nPERS\u00d6NLICHE BESTZEIT\n<\/span> \n\n      <\/div>\n\n\n\n      <!-- 10 KM -->\n\n      <div class=\"np-proof__stat\">\n\n         <strong>\n33:27\n<\/strong>\n\n<span class=\"np-proof__distance\">\n10 KM\n<\/span>\n\n<span class=\"np-proof__label\">\nPERS\u00d6NLICHE BESTZEIT\n<\/span> \n\n      <\/div>\n\n\n\n      <!-- 1 KM -->\n\n      <div class=\"np-proof__stat\">\n\n         <strong>\n2:42\n<\/strong>\n\n<span class=\"np-proof__distance\">\n1 KM\n<\/span>\n\n<span class=\"np-proof__label\">\nSCHNELLSTER SPLIT\n<\/span> \n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-proof,\n.np-proof * {\n  box-sizing: border-box;\n}\n\n\n.np-proof {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  background: var(--black);\n\n  color: var(--white);\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-proof__inner {\n  width:\n    min(100%, 1500px);\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(145px, 12vw, 205px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(155px, 12vw, 215px);\n}\n\n\n\/* =========================================================\n   HEADER\n========================================================= *\/\n\n.np-proof__header {\n  width:\n    min(100%, 1120px);\n\n  margin:\n    0 auto;\n\n  text-align:\n    center;\n}\n\n\n\/* =========================================================\n   EYEBROW\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-proof__eyebrow {\n  margin-bottom:\n    clamp(34px, 3vw, 46px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.16em;\n\n  color:\n    rgba(140,148,156,0.68);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   FIRST LINE\n========================================================= *\/\n\n.np-proof__lead {\n  margin:\n    0\n    0\n    clamp(12px, 1.2vw, 18px);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(28px, 3.1vw, 50px);\n\n  font-weight:\n    500;\n\n  line-height:\n    1.08;\n\n  letter-spacing:\n    -0.035em;\n\n  color:\n    rgba(242,241,237,0.58);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   MAIN HEADLINE\n========================================================= *\/\n\n.np-proof__headline {\n  margin:\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(48px, 5.3vw, 88px);\n\n  font-weight:\n    700;\n\n  line-height:\n    0.98;\n\n  letter-spacing:\n    -0.047em;\n\n  color:\n    var(--white);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   PERFORMANCE VALUES\n========================================================= *\/\n\n.np-proof__stats {\n  width:\n    100%;\n\n  max-width:\n    1320px;\n\n  margin:\n\n    clamp(100px, 8.5vw, 140px)\n\n    auto\n\n    0;\n\n  display:\n    grid;\n\n  grid-template-columns:\n    repeat(3, 1fr);\n}\n\n\n\/* =========================================================\n   STAT\n========================================================= *\/\n\n.np-proof__stat {\n  position:\n    relative;\n\n  min-height:\n    180px;\n\n  padding:\n\n    10px\n\n    clamp(30px, 4vw, 64px);\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  text-align:\n    center;\n\n  opacity:\n    0;\n\n  transform:\n    translateY(18px);\n\n  transition:\n\n    opacity\n    0.75s\n    ease,\n\n    transform\n    0.75s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n\/* =========================================================\n   SEPARATORS\n========================================================= *\/\n\n.np-proof__stat + .np-proof__stat {\n  border-left:\n    1px solid rgba(242,241,237,0.11);\n}\n\n\n\/* =========================================================\n   VALUE\n========================================================= *\/\n\n.np-proof__stat strong {\n  display:\n    block;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(48px, 5vw, 74px);\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    -0.045em;\n\n  color:\n    var(--white);\n\n  transform:\n    scale(1);\n\n  transform-origin:\n    center center;\n\n  transition:\n\n    transform\n    0.38s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n\/* =========================================================\n   DISTANCE\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-proof__distance {\n  display:\n    block;\n\n  margin-top:\n    18px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.17em;\n\n  color:\n    rgba(242,241,237,0.76);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   LABEL\n========================================================= *\/\n\n.np-proof__label {\n  display:\n    block;\n\n  margin-top:\n    9px;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    11px;\n\n  font-weight:\n    400;\n\n  line-height:\n    1.4;\n\n  letter-spacing:\n    0.08em;\n\n  color:\n    rgba(140,148,156,0.62);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   TIME HOVER\n   ONLY THE VALUE MOVES\n========================================================= *\/\n\n@media (hover: hover) and (pointer: fine) {\n\n  .np-proof__stat:hover strong {\n    transform:\n      scale(1.032);\n  }\n\n}\n\n\n\/* =========================================================\n   ONE-TIME REVEAL\n========================================================= *\/\n\n.np-proof.is-visible\n.np-proof__stat {\n  opacity:\n    1;\n\n  transform:\n    translateY(0);\n}\n\n\n.np-proof.is-visible\n.np-proof__stat:nth-child(1) {\n  transition-delay:\n    0.10s;\n}\n\n\n.np-proof.is-visible\n.np-proof__stat:nth-child(2) {\n  transition-delay:\n    0.24s;\n}\n\n\n.np-proof.is-visible\n.np-proof__stat:nth-child(3) {\n  transition-delay:\n    0.38s;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .np-proof__inner {\n    padding:\n\n      115px\n\n      28px\n\n      135px;\n  }\n\n\n  .np-proof__stats {\n    margin-top:\n      85px;\n  }\n\n\n  .np-proof__stat {\n    padding-left:\n      24px;\n\n    padding-right:\n      24px;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-proof__inner {\n    padding:\n\n      92px\n\n      20px\n\n      110px;\n  }\n\n\n  .np-proof__eyebrow {\n    margin-bottom:\n      28px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-proof__lead {\n    font-size:\n      clamp(23px, 6.8vw, 31px);\n  }\n\n\n  .np-proof__headline {\n    font-size:\n      clamp(38px, 10.5vw, 52px);\n  }\n\n\n  .np-proof__stats {\n    margin-top:\n      70px;\n\n    grid-template-columns:\n      1fr;\n  }\n\n\n  .np-proof__stat {\n    min-height:\n      170px;\n\n    padding:\n\n      32px\n\n      0;\n  }\n\n\n  .np-proof__stat + .np-proof__stat {\n    border-left:\n      0;\n\n    border-top:\n      1px solid rgba(242,241,237,0.11);\n  }\n\n\n  .np-proof__stat strong {\n    font-size:\n      clamp(50px, 14vw, 66px);\n  }\n\n\n  .np-proof__distance {\n    margin-top:\n      15px;\n\n    font-size:\n      9.5px;\n  }\n\n\n  .np-proof__label {\n    font-size:\n      10px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-proof__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-proof__distance {\n    font-size:\n      9px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-proof__stat {\n    opacity:\n      1;\n\n    transform:\n      none;\n\n    transition:\n      none;\n  }\n\n\n  .np-proof__stat strong {\n    transform:\n      none;\n\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\ndocument.addEventListener(\n  \"DOMContentLoaded\",\n  function () {\n\n    const section =\n      document.querySelector(\n        \"#real-performance\"\n      );\n\n\n    if (!section) return;\n\n\n    const observer =\n      new IntersectionObserver(\n\n        function (entries) {\n\n          entries.forEach(\n            function (entry) {\n\n              if (\n                entry.isIntersecting\n              ) {\n\n                section.classList.add(\n                  \"is-visible\"\n                );\n\n\n                observer.disconnect();\n\n              }\n\n            }\n          );\n\n        },\n\n        {\n          threshold:\n            0.25\n        }\n\n      );\n\n\n    observer.observe(\n      section\n    );\n\n  }\n);\n\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\n<\/div>\n<div class=\"elementor-element elementor-element-b8abc13 e-con e-atomic-element e-flexbox-base e-default-div e-a07816b \" data-id=\"b8abc13\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"b8abc13\" data-e-type=\"e-flexbox\" data-id=\"b8abc13\">\n    \t\t<div class=\"elementor-element elementor-element-8028465 elementor-widget elementor-widget-html\" data-id=\"8028465\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 08 \u2014 COMMUNITY \/ REAL WORLD\n     2 \u00d7 3 IMAGE SETS\n     PERSISTENT ACTIVE IMAGE\n========================================================= -->\n\n<section class=\"np-community\" id=\"community\" aria-labelledby=\"np-community-title\">\n\n\n  <!-- =====================================================\n       INTRO\n  ====================================================== -->\n\n  <div class=\"np-community__inner\">\n\n    <div class=\"np-community__intro\">\n\n\n      <!-- EYEBROW -->\n\n      <div class=\"np-community__eyebrow\">\n COMMUNITY \/ ECHTE WELT \/ 08\n      <\/div>\n\n\n      <!-- HEADLINE -->\n\n      <h2 class=\"np-community__headline\" id=\"np-community-title\">\n\n        <span>\n IM STILLEN AUFGEBAUT.\n        <\/span>\n\n        <span class=\"np-community__outline\">\n DRAUSSEN BEW\u00c4HRT.\n        <\/span>\n\n      <\/h2>\n\n\n      <!-- STATEMENT -->\n\n      <div class=\"np-community__statement\">\n\n        <strong>\n Training ist individuell.\n        <\/strong>\n\n        <span>\n Performance zeigt sich, wenn das, was du aufgebaut hast, drau\u00dfen Bestand hat.\n        <\/span>\n\n      <\/div>\n\n\n    <\/div>\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       IMAGE STAGE\n  ====================================================== -->\n\n  <div class=\"np-community__stage\">\n\n\n    <!-- ===================================================\n         IMAGE SET 01\n         EXISTING SET\n    ==================================================== -->\n\n    <div class=\"np-community__gallery np-community__gallery--set-1\" data-gallery-set=\"0\">\n\n\n      <!-- LEFT \u2014 RUNNING -->\n\n      <figure class=\"np-community__panel                np-community__panel--left\" tabindex=\"0\">\n\n        <img src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/08\/ratw-runner-stadium.jpg\" alt=\"Norman Petermann l\u00e4uft nachts auf der Laufbahn\" loading=\"lazy\" decoding=\"async\">\n\n      <\/figure>\n\n\n\n      <!-- CENTER \u2014 PORTRAIT \/ DEFAULT -->\n\n      <figure class=\"np-community__panel                np-community__panel--center\" tabindex=\"0\">\n\n        <img src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/08\/norman-petermann-performance-portrait-full-hero-scaled.jpg\" alt=\"Norman Petermann nach einem n\u00e4chtlichen Lauf\" loading=\"lazy\" decoding=\"async\">\n\n      <\/figure>\n\n\n\n      <!-- RIGHT \u2014 CURVE \/ COMMUNITY -->\n\n      <figure class=\"np-community__panel                np-community__panel--right\" tabindex=\"0\">\n\n        <img src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-running-night-curve_-scaled.jpg\" alt=\"L\u00e4ufer in der Kurve bei Nacht\" loading=\"lazy\" decoding=\"async\">\n\n      <\/figure>\n\n\n    <\/div>\n\n\n\n    <!-- ===================================================\n         IMAGE SET 02\n         NEW SET\n    ==================================================== -->\n\n    <div class=\"np-community__gallery              np-community__gallery--set-2\" data-gallery-set=\"1\" hidden=\"\">\n\n\n      <!-- LEFT \u2014 PALM LIGHTS -->\n\n      <figure class=\"np-community__panel                np-community__panel--left\" tabindex=\"0\">\n\n        <img src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-night-race-palmlights-wide.jpg\" alt=\"Norman Petermann bei einem Nachtrennen unter beleuchteten Palmen\" loading=\"lazy\" decoding=\"async\">\n\n      <\/figure>\n\n\n\n      <!-- CENTER \u2014 DARK ROAD \/ DEFAULT -->\n\n      <figure class=\"np-community__panel                np-community__panel--center\" tabindex=\"0\">\n\n        <img src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-night-race-two-runners-wide.jpg\" alt=\"Norman Petermann l\u00e4uft nachts auf einer dunklen Stra\u00dfe\" loading=\"lazy\" decoding=\"async\">\n\n      <\/figure>\n\n\n\n      <!-- RIGHT \u2014 TWO RUNNERS -->\n\n      <figure class=\"np-community__panel                np-community__panel--right\" tabindex=\"0\">\n\n        <img src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-night-run-dark-road-wide.jpg\" alt=\"Norman Petermann mit einem weiteren L\u00e4ufer bei einem Nachtrennen\" loading=\"lazy\" decoding=\"async\">\n\n      <\/figure>\n\n\n    <\/div>\n\n\n\n    <!-- ===================================================\n         GALLERY NAVIGATION\n    ==================================================== -->\n\n    <div class=\"np-community__gallery-nav\" aria-label=\"Community image gallery navigation\">\n\n\n      <!-- SET INDICATORS -->\n\n      <div class=\"np-community__gallery-dots\" aria-label=\"Image sets\">\n\n        <button class=\"np-community__gallery-dot                  np-community__gallery-dot--active\" type=\"button\" data-gallery-index=\"0\" aria-label=\"Show image set 1\" aria-current=\"true\"><\/button>\n\n\n        <button class=\"np-community__gallery-dot\" type=\"button\" data-gallery-index=\"1\" aria-label=\"Show image set 2\" aria-current=\"false\"><\/button>\n\n      <\/div>\n\n\n\n      <!-- TABLET \/ MOBILE \u2014 IMAGE INDICATORS -->\n\n      <div class=\"np-community__touch-dots\" aria-label=\"Images\">\n\n        <button class=\"np-community__touch-dot                  np-community__touch-dot--active\" type=\"button\" data-touch-index=\"0\" aria-label=\"Show image 1\" aria-current=\"true\"><\/button>\n\n\n        <button class=\"np-community__touch-dot\" type=\"button\" data-touch-index=\"1\" aria-label=\"Show image 2\" aria-current=\"false\"><\/button>\n\n\n        <button class=\"np-community__touch-dot\" type=\"button\" data-touch-index=\"2\" aria-label=\"Show image 3\" aria-current=\"false\"><\/button>\n\n\n        <button class=\"np-community__touch-dot\" type=\"button\" data-touch-index=\"3\" aria-label=\"Show image 4\" aria-current=\"false\"><\/button>\n\n\n        <button class=\"np-community__touch-dot\" type=\"button\" data-touch-index=\"4\" aria-label=\"Show image 5\" aria-current=\"false\"><\/button>\n\n\n        <button class=\"np-community__touch-dot\" type=\"button\" data-touch-index=\"5\" aria-label=\"Show image 6\" aria-current=\"false\"><\/button>\n\n      <\/div>\n\n\n\n      <!-- ARROWS -->\n\n      <div class=\"np-community__gallery-buttons\">\n\n\n        <!-- PREVIOUS -->\n\n        <button class=\"np-community__gallery-button                  np-community__gallery-button--prev\" type=\"button\" aria-label=\"Previous image set\" disabled>\n\n          <span class=\"np-community__gallery-button-arrow                    np-community__gallery-button-arrow--left\" aria-hidden=\"true\"><\/span>\n\n        <\/button>\n\n\n\n        <!-- NEXT -->\n\n        <button class=\"np-community__gallery-button                  np-community__gallery-button--next\" type=\"button\" aria-label=\"Next image set\">\n\n          <span class=\"np-community__gallery-button-arrow                    np-community__gallery-button-arrow--right\" aria-hidden=\"true\"><\/span>\n\n        <\/button>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n  <\/div>\n\n\n\n  <!-- =====================================================\n       CLOSING\n  ====================================================== -->\n\n  <div class=\"np-community__inner            np-community__inner--closing\">\n\n    <div class=\"np-community__closing\">\n\n\n      <!-- COPY -->\n\n      <p class=\"np-community__copy\">\n\n        <span>\n Jeder l\u00e4uft seine eigenen Kilometer.\n        <\/span>\n\n        <span>\n Die Erfahrung musst du nicht allein machen.\n        <\/span>\n\n      <\/p>\n\n\n    <\/div>\n\n  <\/div>\n\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-community,\n.np-community * {\n  box-sizing: border-box;\n}\n\n\n.np-community {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position: relative;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n}\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-community__inner {\n  width:\n    min(100%, 1500px);\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(145px, 11vw, 195px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    0;\n}\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.np-community__intro {\n  width:\n    100%;\n\n  max-width:\n    1120px;\n}\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.np-community__eyebrow {\n  margin-bottom:\n    clamp(34px, 3vw, 44px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.72);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-community__headline {\n  width:\n    100%;\n\n  max-width:\n    1180px;\n\n  margin:\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(58px, 6.3vw, 108px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.90;\n\n  letter-spacing:\n    -0.052em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-community__headline > span {\n  display:\n    block;\n}\n\n\n\/* =========================================================\n   OUTLINE\n========================================================= *\/\n\n.np-community__outline {\n  margin-top:\n    0.055em;\n\n  color:\n    transparent;\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.55);\n}\n\n\n\/* =========================================================\n   STATEMENT\n========================================================= *\/\n\n.np-community__statement {\n  max-width:\n    650px;\n\n  margin-top:\n    clamp(40px, 4vw, 56px);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(17px, 1.2vw, 20px);\n\n  font-weight:\n    500;\n\n  line-height:\n    1.55;\n}\n\n\n.np-community__statement strong,\n.np-community__statement span {\n  display:\n    block;\n}\n\n\n.np-community__statement strong {\n  font-weight:\n    600;\n\n  color:\n    rgba(242,241,237,0.96);\n}\n\n\n.np-community__statement span {\n  margin-top:\n    4px;\n\n  color:\n    rgba(242,241,237,0.52);\n}\n\n\n\/* =========================================================\n   STAGE\n========================================================= *\/\n\n.np-community__stage {\n  width:\n    100%;\n\n  margin-top:\n    clamp(95px, 8vw, 135px);\n\n  overflow:\n    hidden;\n}\n\n\n\/* =========================================================\n   GALLERY\n========================================================= *\/\n\n.np-community__gallery {\n  width:\n    min(\n      calc(\n        100% - clamp(56px, 8.4vw, 136px)\n      ),\n      1364px\n    );\n\n  height:\n    clamp(520px, 42vw, 720px);\n\n  margin:\n    0 auto;\n\n  display:\n    flex;\n\n  gap:\n    0;\n\n  overflow:\n    hidden;\n\n  background:\n    var(--black);\n}\n\n\n\/* =========================================================\n   HIDDEN SET\n========================================================= *\/\n\n.np-community__gallery[hidden] {\n  display:\n    none !important;\n}\n\n\n\/* =========================================================\n   PANEL\n========================================================= *\/\n\n.np-community__panel {\n  position:\n    relative;\n\n  min-width:\n    0;\n\n  height:\n    100%;\n\n  margin:\n    0;\n\n  flex:\n    1 1 0;\n\n  overflow:\n    hidden;\n\n  outline:\n    none;\n\n  cursor:\n    default;\n\n  transition:\n\n    flex-grow\n    0.68s\n    cubic-bezier(0.22, 1, 0.36, 1),\n\n    flex-basis\n    0.68s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n\/* =========================================================\n   DEFAULT WIDTHS\n   CENTER IMAGE IS WIDER\n========================================================= *\/\n\n.np-community__panel--left,\n.np-community__panel--right {\n  flex-grow:\n    0.90;\n}\n\n\n.np-community__panel--center {\n  flex-grow:\n    1.42;\n}\n\n\n\/* =========================================================\n   IMAGE\n========================================================= *\/\n\n.np-community__panel img {\n  position:\n    absolute;\n\n  top:\n    50%;\n\n  left:\n    50%;\n\n  display:\n    block;\n\n  width:\n    min(76vw, 980px);\n\n  max-width:\n    none;\n\n  height:\n    100%;\n\n  object-fit:\n    cover;\n\n  transform:\n    translate(-50%, -50%);\n\n  transition:\n    none;\n\n  user-select:\n    none;\n\n  pointer-events:\n    none;\n}\n\n\n\/* =========================================================\n   INDIVIDUAL IMAGE POSITIONING\n   SET 01\n========================================================= *\/\n\n.np-community__gallery--set-1\n.np-community__panel--left img {\n  object-position:\n    50% 42%;\n}\n\n\n.np-community__gallery--set-1\n.np-community__panel--center img {\n  object-position:\n    55% 48%;\n}\n\n\n.np-community__gallery--set-1\n.np-community__panel--right img {\n  object-position:\n    59% center;\n}\n\n\n\/* =========================================================\n   INDIVIDUAL IMAGE POSITIONING\n   SET 02\n========================================================= *\/\n\n.np-community__gallery--set-2\n.np-community__panel img {\n  object-position:\n    50% 50%;\n}\n\n\n\/* =========================================================\n   QUIET IMAGE OVERLAY\n========================================================= *\/\n\n.np-community__panel::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  inset:\n    0;\n\n  z-index:\n    2;\n\n  pointer-events:\n    none;\n\n  background:\n\n    linear-gradient(\n      180deg,\n\n      rgba(8,10,12,0.12) 0%,\n      rgba(8,10,12,0.00) 26%,\n      rgba(8,10,12,0.00) 70%,\n      rgba(8,10,12,0.46) 100%\n    );\n}\n\n\n\/* =========================================================\n   DESKTOP \u2014 PERSISTENT ACTIVE PANEL\n========================================================= *\/\n\n@media\n  (min-width: 901px)\n  and (hover: hover)\n  and (pointer: fine) {\n\n  .np-community__gallery--locked\n  .np-community__panel {\n    flex-grow:\n      0.72;\n  }\n\n\n  .np-community__gallery--locked\n  .np-community__panel--active {\n    flex-grow:\n      2;\n  }\n\n}\n\n\n\/* =========================================================\n   KEYBOARD FOCUS\n========================================================= *\/\n\n.np-community__panel:focus-visible {\n  outline:\n    1px solid rgba(65,105,255,0.82);\n\n  outline-offset:\n    -1px;\n}\n\n\n\/* =========================================================\n   GALLERY NAVIGATION\n========================================================= *\/\n\n.np-community__gallery-nav {\n  width:\n    min(\n      calc(\n        100% - clamp(56px, 8.4vw, 136px)\n      ),\n      1364px\n    );\n\n  margin:\n\n    clamp(34px, 3vw, 46px)\n\n    auto\n\n    0;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap:\n    clamp(24px, 2.5vw, 34px);\n}\n\n\n\/* =========================================================\n   GALLERY DOTS \/ POSITION LINES\n========================================================= *\/\n\n.np-community__gallery-dots {\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  gap:\n    10px;\n}\n\n\n.np-community__gallery-dot {\n  position:\n    relative;\n\n  width:\n    48px;\n\n  height:\n    20px;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  border:\n    0;\n\n  background:\n    transparent;\n\n  cursor:\n    pointer;\n}\n\n\n.np-community__gallery-dot::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  top:\n    50%;\n\n  left:\n    0;\n\n  width:\n    100%;\n\n  height:\n    1px;\n\n  background:\n    rgba(242,241,237,0.24);\n\n  transform:\n    translateY(-50%);\n\n  transition:\n    background 0.25s ease;\n}\n\n\n.np-community__gallery-dot--active::before {\n  background:\n    rgba(242,241,237,0.92);\n}\n\n\n\/* =========================================================\n   TABLET \/ MOBILE IMAGE INDICATORS\n========================================================= *\/\n\n.np-community__touch-dots {\n  display:\n    none;\n}\n\n\n.np-community__touch-dot {\n  position:\n    relative;\n\n  width:\n    38px;\n\n  height:\n    20px;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  border:\n    0;\n\n  background:\n    transparent;\n\n  cursor:\n    pointer;\n}\n\n\n.np-community__touch-dot::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  top:\n    50%;\n\n  left:\n    0;\n\n  width:\n    100%;\n\n  height:\n    1px;\n\n  background:\n    rgba(242,241,237,0.24);\n\n  transform:\n    translateY(-50%);\n\n  transition:\n    background 0.25s ease;\n}\n\n\n.np-community__touch-dot--active::before {\n  background:\n    rgba(242,241,237,0.92);\n}\n\n\n\/* =========================================================\n   GALLERY BUTTONS\n========================================================= *\/\n\n.np-community__gallery-buttons {\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  gap:\n    10px;\n}\n\n\n.np-community__gallery-button {\n  position:\n    relative;\n\n  width:\n    48px;\n\n  height:\n    48px;\n\n  margin:\n    0;\n\n  padding:\n    0;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  border:\n    1px solid rgba(242,241,237,0.08);\n\n  background:\n    rgba(242,241,237,0.08);\n\n  cursor:\n    pointer;\n\n  transition:\n\n    background\n    0.25s\n    ease,\n\n    border-color\n    0.25s\n    ease,\n\n    opacity\n    0.25s\n    ease;\n}\n\n\n\/* =========================================================\n   GALLERY BUTTON ARROW\n========================================================= *\/\n\n.np-community__gallery-button-arrow {\n  position:\n    relative;\n\n  width:\n    10px;\n\n  height:\n    10px;\n\n  border-top:\n    1px solid rgba(242,241,237,0.92);\n\n  border-right:\n    1px solid rgba(242,241,237,0.92);\n}\n\n\n.np-community__gallery-button-arrow--right {\n  transform:\n    rotate(45deg);\n}\n\n\n.np-community__gallery-button-arrow--left {\n  transform:\n    rotate(-135deg);\n}\n\n\n\/* =========================================================\n   GALLERY BUTTON STATES\n========================================================= *\/\n\n.np-community__gallery-button:disabled {\n  opacity:\n    0.26;\n\n  cursor:\n    default;\n}\n\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-community__gallery-button:not(:disabled):hover {\n    background:\n      rgba(242,241,237,0.13);\n\n    border-color:\n      rgba(242,241,237,0.14);\n  }\n\n\n  .np-community__gallery-dot:not(\n    .np-community__gallery-dot--active\n  ):hover::before {\n    background:\n      rgba(242,241,237,0.48);\n  }\n\n}\n\n\n\/* =========================================================\n   GALLERY CONTROL FOCUS\n========================================================= *\/\n\n.np-community__gallery-button:focus-visible,\n.np-community__gallery-dot:focus-visible,\n.np-community__touch-dot:focus-visible {\n  outline:\n    1px solid rgba(65,105,255,0.72);\n\n  outline-offset:\n    4px;\n}\n\n\n\/* =========================================================\n   GALLERY CONTROLS\n   PREVENT GLOBAL THEME \/ BUTTON ACCENT OVERRIDES\n========================================================= *\/\n\n.np-community__gallery-button,\n.np-community__gallery-button:focus,\n.np-community__gallery-button:active {\n  -webkit-appearance:\n    none !important;\n\n  appearance:\n    none !important;\n\n  background:\n    rgba(242,241,237,0.08) !important;\n\n  border-color:\n    rgba(242,241,237,0.08) !important;\n\n  color:\n    inherit !important;\n\n  box-shadow:\n    none !important;\n}\n\n\n.np-community__gallery-button:disabled,\n.np-community__gallery-button:disabled:hover,\n.np-community__gallery-button:disabled:focus,\n.np-community__gallery-button:disabled:active {\n  background:\n    rgba(242,241,237,0.08) !important;\n\n  border-color:\n    rgba(242,241,237,0.08) !important;\n\n  box-shadow:\n    none !important;\n}\n\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-community__gallery-button:not(:disabled):hover {\n    background:\n      rgba(242,241,237,0.13) !important;\n\n    border-color:\n      rgba(242,241,237,0.14) !important;\n  }\n\n}\n\n\n.np-community__gallery-dot,\n.np-community__gallery-dot:hover,\n.np-community__gallery-dot:focus,\n.np-community__gallery-dot:active {\n  -webkit-appearance:\n    none !important;\n\n  appearance:\n    none !important;\n\n  background:\n    transparent !important;\n\n  border-color:\n    transparent !important;\n\n  box-shadow:\n    none !important;\n}\n\n\n.np-community__gallery-dot::before {\n  background:\n    rgba(242,241,237,0.24) !important;\n}\n\n\n.np-community__gallery-dot--active::before {\n  background:\n    rgba(242,241,237,0.92) !important;\n}\n\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-community__gallery-dot:not(\n    .np-community__gallery-dot--active\n  ):hover::before {\n    background:\n      rgba(242,241,237,0.48) !important;\n  }\n\n}\n\n\n.np-community__touch-dot,\n.np-community__touch-dot:hover,\n.np-community__touch-dot:focus,\n.np-community__touch-dot:active {\n  -webkit-appearance:\n    none !important;\n\n  appearance:\n    none !important;\n\n  background:\n    transparent !important;\n\n  border-color:\n    transparent !important;\n\n  box-shadow:\n    none !important;\n}\n\n\n.np-community__touch-dot::before {\n  background:\n    rgba(242,241,237,0.24) !important;\n}\n\n\n.np-community__touch-dot--active::before {\n  background:\n    rgba(242,241,237,0.92) !important;\n}\n\n\n\/* =========================================================\n   CLOSING INNER\n========================================================= *\/\n\n.np-community__inner--closing {\n  padding-top:\n    0;\n\n  padding-bottom:\n    clamp(155px, 11vw, 210px);\n}\n\n\n\/* =========================================================\n   CLOSING\n========================================================= *\/\n\n.np-community__closing {\n  width:\n    min(100%, 650px);\n\n  margin:\n\n    clamp(100px, 8vw, 140px)\n\n    0\n\n    0\n\n    auto;\n}\n\n\n\/* =========================================================\n   CLOSING COPY\n========================================================= *\/\n\n.np-community__copy {\n  margin:\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(25px, 2.15vw, 36px);\n\n  font-weight:\n    600;\n\n  line-height:\n    1.17;\n\n  letter-spacing:\n    -0.035em;\n}\n\n\n.np-community__copy span {\n  display:\n    block;\n}\n\n\n.np-community__copy span:first-child {\n  color:\n    rgba(242,241,237,0.78);\n}\n\n\n.np-community__copy span:last-child {\n  margin-top:\n    3px;\n\n  color:\n    rgba(242,241,237,0.48);\n}\n\n\n\/* =========================================================\n   LINK\n========================================================= *\/\n\n.np-community__link {\n  position:\n    relative;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  gap:\n    15px;\n\n  margin-top:\n    clamp(34px, 3vw, 44px);\n\n  padding-bottom:\n    8px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    rgba(242,241,237,0.82);\n\n  text-decoration:\n    none;\n\n  text-transform:\n    uppercase;\n\n  transition:\n    color 0.25s ease;\n}\n\n\n\/* =========================================================\n   LINK LINE\n========================================================= *\/\n\n.np-community__link::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  left:\n    0;\n\n  bottom:\n    0;\n\n  width:\n    100%;\n\n  height:\n    1px;\n\n  background:\n    rgba(242,241,237,0.20);\n\n  transition:\n    background 0.25s ease;\n}\n\n\n\/* =========================================================\n   CSS ARROW\n========================================================= *\/\n\n.np-community__arrow {\n  position:\n    relative;\n\n  width:\n    17px;\n\n  height:\n    10px;\n\n  flex:\n    0 0 17px;\n\n  transition:\n\n    transform\n    0.32s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n.np-community__arrow::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  left:\n    0;\n\n  top:\n    50%;\n\n  width:\n    15px;\n\n  height:\n    1px;\n\n  background:\n    var(--blue);\n\n  transform:\n    translateY(-50%);\n}\n\n\n.np-community__arrow::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  right:\n    0;\n\n  top:\n    50%;\n\n  width:\n    6px;\n\n  height:\n    6px;\n\n  border-top:\n    1px solid var(--blue);\n\n  border-right:\n    1px solid var(--blue);\n\n  transform:\n\n    translateY(-50%)\n\n    rotate(45deg);\n}\n\n\n\/* =========================================================\n   LINK HOVER\n========================================================= *\/\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-community__link:hover {\n    color:\n      var(--white);\n  }\n\n\n  .np-community__link:hover::after {\n    background:\n      rgba(242,241,237,0.46);\n  }\n\n\n  .np-community__link:hover\n  .np-community__arrow {\n    transform:\n      translateX(4px);\n  }\n\n}\n\n\n\/* =========================================================\n   LINK FOCUS\n========================================================= *\/\n\n.np-community__link:focus-visible {\n  outline:\n    1px solid rgba(65,105,255,0.72);\n\n  outline-offset:\n    7px;\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1100px) {\n\n  .np-community__gallery {\n    width:\n      calc(100% - 56px);\n\n    height:\n      clamp(480px, 55vw, 650px);\n  }\n\n\n  .np-community__gallery-nav {\n    width:\n      calc(100% - 56px);\n  }\n\n}\n\n\n\/* =========================================================\n   TABLET \/ MOBILE TOUCH\n   CONTINUOUS 6-IMAGE INFINITE CAROUSEL\n========================================================= *\/\n\n@media (max-width: 900px) {\n\n  .np-community {\n    overflow:\n      hidden;\n  }\n\n\n  .np-community__inner {\n    padding:\n\n      120px\n\n      28px\n\n      0;\n  }\n\n\n  .np-community__stage {\n    margin-top:\n      82px;\n\n    overflow:\n      visible;\n  }\n\n\n  .np-community__gallery {\n    width:\n      100%;\n\n    height:\n      auto;\n\n    margin:\n      0;\n\n    padding:\n\n      0\n\n      28px\n\n      14px;\n\n    display:\n      flex;\n\n    gap:\n      0;\n\n    overflow-x:\n      auto;\n\n    overflow-y:\n      hidden;\n\n    scroll-snap-type:\n      x mandatory;\n\n    scroll-padding-left:\n      28px;\n\n    -webkit-overflow-scrolling:\n      touch;\n\n    scrollbar-width:\n      none;\n  }\n\n\n  .np-community__gallery::-webkit-scrollbar {\n    display:\n      none;\n  }\n\n\n  .np-community__gallery-dots,\n  .np-community__gallery-buttons {\n    display:\n      none;\n  }\n\n\n  .np-community__touch-dots {\n    display:\n      flex;\n\n    align-items:\n      center;\n\n    justify-content:\n      center;\n\n    gap:\n      8px;\n  }\n\n\n  .np-community__panel,\n  .np-community__panel--left,\n  .np-community__panel--center,\n  .np-community__panel--right {\n    width:\n      min(78vw, 610px);\n\n    min-width:\n      min(78vw, 610px);\n\n    height:\n      clamp(520px, 75vw, 690px);\n\n    flex:\n      0 0 min(78vw, 610px);\n\n    scroll-snap-align:\n      start;\n  }\n\n\n  .np-community__panel img {\n    width:\n      100%;\n\n    max-width:\n      100%;\n\n    height:\n      100%;\n\n    left:\n      0;\n\n    top:\n      0;\n\n    transform:\n      none;\n\n    object-fit:\n      cover;\n  }\n\n\n  .np-community__panel--from-set-2 img {\n    object-position:\n      50% center !important;\n  }\n\n\n  .np-community__gallery-nav {\n    width:\n      100%;\n\n    margin-top:\n      28px;\n\n    padding:\n\n      0\n\n      28px;\n\n    justify-content:\n      center;\n  }\n\n\n  .np-community__inner--closing {\n    padding:\n\n      0\n\n      28px\n\n      145px;\n  }\n\n\n  .np-community__closing {\n    margin-top:\n      90px;\n  }\n\n\n  \/* =====================================================\n     TOUCH CAROUSEL ENGINE\n     TRANSFORM-BASED \u2014 NO NATIVE HORIZONTAL SCROLL\n  ====================================================== *\/\n\n  .np-community__gallery {\n    display:\n      block;\n\n    overflow-x:\n      hidden;\n\n    overflow-y:\n      hidden;\n\n    scroll-snap-type:\n      none;\n\n    touch-action:\n      pan-y;\n\n    overscroll-behavior-x:\n      contain;\n\n    -webkit-overflow-scrolling:\n      auto;\n\n    user-select:\n      none;\n  }\n\n\n  .np-community__touch-track {\n    display:\n      flex;\n\n    width:\n      max-content;\n\n    gap:\n      0;\n\n    transform:\n      translate3d(0, 0, 0);\n\n    will-change:\n      transform;\n\n    backface-visibility:\n      hidden;\n\n    -webkit-backface-visibility:\n      hidden;\n  }\n\n\n  .np-community__touch-track\n  .np-community__panel {\n    scroll-snap-align:\n      none;\n\n    scroll-snap-stop:\n      normal;\n  }\n\n\n}\n\n\n\/* =========================================================\n   MOBILE\n   CINEMATIC FULL-BLEED FILMSTRIP\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-community__inner {\n    padding:\n\n      92px\n\n      20px\n\n      0;\n  }\n\n\n  .np-community__eyebrow {\n    margin-bottom:\n      26px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-community__headline {\n    font-size:\n      clamp(42px, 11.6vw, 58px);\n\n    line-height:\n      0.93;\n  }\n\n\n  .np-community__statement {\n    margin-top:\n      32px;\n\n    font-size:\n      16px;\n  }\n\n\n  .np-community__stage {\n    margin-top:\n      58px;\n  }\n\n\n  .np-community__gallery {\n    width:\n      100vw;\n\n    max-width:\n      none;\n\n    margin-left:\n      calc(50% - 50vw);\n\n    margin-right:\n      calc(50% - 50vw);\n\n    padding:\n\n      0\n\n      0\n\n      12px;\n\n    gap:\n      0;\n\n    scroll-padding-left:\n      0;\n  }\n\n\n  .np-community__panel,\n  .np-community__panel--left,\n  .np-community__panel--center,\n  .np-community__panel--right {\n    width:\n      92vw;\n\n    min-width:\n      92vw;\n\n    height:\n      clamp(500px, 128vw, 650px);\n\n    flex:\n      0 0 92vw;\n\n    scroll-snap-align:\n      start;\n\n    scroll-snap-stop:\n      always;\n  }\n\n\n  .np-community__gallery--set-1\n  .np-community__panel--left img {\n    object-position:\n      50% 40%;\n  }\n\n\n  .np-community__gallery--set-1\n  .np-community__panel--center img {\n    object-position:\n      54% center;\n  }\n\n\n  .np-community__gallery--set-1\n  .np-community__panel--right img {\n    object-position:\n      61% center;\n  }\n\n\n  .np-community__gallery--set-2\n  .np-community__panel img {\n    object-position:\n      50% center;\n  }\n\n\n  .np-community__gallery-nav {\n    margin-top:\n      24px;\n\n    padding:\n\n      0\n\n      20px;\n\n    gap:\n      20px;\n  }\n\n\n  .np-community__gallery-dot {\n    width:\n      38px;\n  }\n\n\n  .np-community__touch-dot {\n    width:\n      34px;\n  }\n\n\n  .np-community__gallery-button {\n    width:\n      44px;\n\n    height:\n      44px;\n  }\n\n\n  .np-community__inner--closing {\n    padding:\n\n      0\n\n      20px\n\n      110px;\n  }\n\n\n  .np-community__closing {\n    margin-top:\n      72px;\n  }\n\n\n  .np-community__copy {\n    font-size:\n      clamp(22px, 6.4vw, 29px);\n  }\n\n\n  .np-community__link {\n    margin-top:\n      30px;\n\n    font-size:\n      9.5px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-community__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-community__link {\n    font-size:\n      9px;\n  }\n\n\n  .np-community__headline {\n    font-size:\n      clamp(39px, 11vw, 50px);\n  }\n\n\n  .np-community__panel,\n  .np-community__panel--left,\n  .np-community__panel--center,\n  .np-community__panel--right {\n    width:\n      92vw;\n\n    min-width:\n      92vw;\n\n    height:\n      clamp(470px, 132vw, 590px);\n\n    flex-basis:\n      92vw;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-community__panel,\n  .np-community__gallery-button,\n  .np-community__gallery-dot::before,\n  .np-community__touch-dot::before,\n  .np-community__link,\n  .np-community__link::after,\n  .np-community__arrow {\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\n\n\n\n<script>\n\ndocument.addEventListener(\n  \"DOMContentLoaded\",\n  function () {\n\n\n    \/* =====================================================\n       COMMUNITY SECTIONS\n    ====================================================== *\/\n\n    const sections =\n      document.querySelectorAll(\n        \".np-community\"\n      );\n\n\n    sections.forEach(\n      function (section) {\n\n\n        \/* =================================================\n           ALL IMAGE SETS\n        ================================================== *\/\n\n        const galleries =\n          Array.from(\n            section.querySelectorAll(\n              \".np-community__gallery\"\n            )\n          );\n\n\n        if (!galleries.length) {\n          return;\n        }\n\n\n\n        \/* =================================================\n           ORIGINAL PANELS\n           STORED ONCE FOR CLEAN DESKTOP RESTORE\n        ================================================== *\/\n\n        const originalPanels =\n          galleries.map(\n            function (gallery) {\n\n              return Array.from(\n                gallery.querySelectorAll(\n                  \".np-community__panel\"\n                )\n              );\n\n            }\n          );\n\n\n        const allOriginalPanels =\n          originalPanels.flat();\n\n\n\n        \/* =================================================\n           DESKTOP \u2014 PERSISTENT ACTIVE IMAGE\n           ORIGINAL LOGIC UNCHANGED\n        ================================================== *\/\n\n        galleries.forEach(\n          function (gallery) {\n\n            const panels =\n              gallery.querySelectorAll(\n                \".np-community__panel\"\n              );\n\n\n            if (!panels.length) {\n              return;\n            }\n\n\n\n            \/* =============================================\n               SET ACTIVE PANEL\n            ============================================== *\/\n\n            function setActivePanel(panel) {\n\n              panels.forEach(\n                function (item) {\n\n                  item.classList.remove(\n                    \"np-community__panel--active\"\n                  );\n\n                }\n              );\n\n\n              panel.classList.add(\n                \"np-community__panel--active\"\n              );\n\n\n              gallery.classList.add(\n                \"np-community__gallery--locked\"\n              );\n\n            }\n\n\n\n            \/* =============================================\n               DESKTOP HOVER\n            ============================================== *\/\n\n            panels.forEach(\n              function (panel) {\n\n                panel.addEventListener(\n                  \"mouseenter\",\n                  function () {\n\n                    if (\n                      window.matchMedia(\n                        \"(min-width: 901px) and (hover: hover) and (pointer: fine)\"\n                      ).matches\n                    ) {\n\n                      setActivePanel(panel);\n\n                    }\n\n                  }\n                );\n\n\n\n                \/* =========================================\n                   KEYBOARD\n                ========================================== *\/\n\n                panel.addEventListener(\n                  \"focus\",\n                  function () {\n\n                    if (\n                      window.matchMedia(\n                        \"(min-width: 901px)\"\n                      ).matches\n                    ) {\n\n                      setActivePanel(panel);\n\n                    }\n\n                  }\n                );\n\n              }\n            );\n\n          }\n        );\n\n\n\n        \/* =================================================\n           NAVIGATION ELEMENTS\n        ================================================== *\/\n\n        const dots =\n          section.querySelectorAll(\n            \".np-community__gallery-dot\"\n          );\n\n\n        const touchDots =\n          section.querySelectorAll(\n            \".np-community__touch-dot\"\n          );\n\n\n        const previousButton =\n          section.querySelector(\n            \".np-community__gallery-button--prev\"\n          );\n\n\n        const nextButton =\n          section.querySelector(\n            \".np-community__gallery-button--next\"\n          );\n\n\n        const touchQuery =\n          window.matchMedia(\n            \"(max-width: 900px)\"\n          );\n\n\n        let currentGalleryIndex =\n          0;\n\n\n        let touchModeActive =\n          false;\n\n\n        let touchTrack =\n          null;\n\n\n        let physicalIndex =\n          2;\n\n\n        let activeRealIndex =\n          0;\n\n\n        let currentTranslate =\n          0;\n\n\n        let resizeFrame =\n          null;\n\n\n        const leadCloneCount =\n          2;\n\n\n        const realCount =\n          allOriginalPanels.length;\n\n\n\n        \/* =================================================\n           DESKTOP \u2014 SHOW IMAGE SET\n           ORIGINAL VISUAL BEHAVIOUR UNCHANGED\n        ================================================== *\/\n\n        function showGallery(index) {\n\n          if (\n            touchQuery.matches\n          ) {\n            return;\n          }\n\n\n          if (\n            index < 0 ||\n            index >= galleries.length\n          ) {\n            return;\n          }\n\n\n          currentGalleryIndex =\n            index;\n\n\n\n          \/* ===============================================\n             GALLERIES\n          ================================================ *\/\n\n          galleries.forEach(\n            function (gallery, galleryIndex) {\n\n              if (\n                galleryIndex ===\n                currentGalleryIndex\n              ) {\n\n                gallery.removeAttribute(\n                  \"hidden\"\n                );\n\n\n                gallery.setAttribute(\n                  \"aria-hidden\",\n                  \"false\"\n                );\n\n              } else {\n\n                gallery.setAttribute(\n                  \"hidden\",\n                  \"\"\n                );\n\n\n                gallery.setAttribute(\n                  \"aria-hidden\",\n                  \"true\"\n                );\n\n              }\n\n            }\n          );\n\n\n\n          \/* ===============================================\n             DOTS\n          ================================================ *\/\n\n          dots.forEach(\n            function (dot, dotIndex) {\n\n              const isActive =\n                dotIndex ===\n                currentGalleryIndex;\n\n\n              dot.classList.toggle(\n                \"np-community__gallery-dot--active\",\n                isActive\n              );\n\n\n              dot.setAttribute(\n                \"aria-current\",\n                isActive\n                  ? \"true\"\n                  : \"false\"\n              );\n\n            }\n          );\n\n\n\n          \/* ===============================================\n             BUTTON STATES\n          ================================================ *\/\n\n          if (previousButton) {\n\n            previousButton.disabled =\n              currentGalleryIndex === 0;\n\n          }\n\n\n          if (nextButton) {\n\n            nextButton.disabled =\n              currentGalleryIndex ===\n              galleries.length - 1;\n\n          }\n\n        }\n\n\n\n        \/* =================================================\n           DESKTOP DOT NAVIGATION\n        ================================================== *\/\n\n        dots.forEach(\n          function (dot) {\n\n            dot.addEventListener(\n              \"click\",\n              function () {\n\n                const index =\n                  Number(\n                    dot.getAttribute(\n                      \"data-gallery-index\"\n                    )\n                  );\n\n\n                showGallery(index);\n\n              }\n            );\n\n          }\n        );\n\n\n\n        \/* =================================================\n           DESKTOP PREVIOUS\n        ================================================== *\/\n\n        if (previousButton) {\n\n          previousButton.addEventListener(\n            \"click\",\n            function () {\n\n              showGallery(\n                currentGalleryIndex - 1\n              );\n\n            }\n          );\n\n        }\n\n\n\n        \/* =================================================\n           DESKTOP NEXT\n        ================================================== *\/\n\n        if (nextButton) {\n\n          nextButton.addEventListener(\n            \"click\",\n            function () {\n\n              showGallery(\n                currentGalleryIndex + 1\n              );\n\n            }\n          );\n\n        }\n\n\n\n        \/* =================================================\n           TOUCH DOTS\n        ================================================== *\/\n\n        function updateTouchDots(index) {\n\n          activeRealIndex =\n            ((index % realCount) + realCount) % realCount;\n\n\n          touchDots.forEach(\n            function (dot, dotIndex) {\n\n              const isActive =\n                dotIndex ===\n                activeRealIndex;\n\n\n              dot.classList.toggle(\n                \"np-community__touch-dot--active\",\n                isActive\n              );\n\n\n              dot.setAttribute(\n                \"aria-current\",\n                isActive\n                  ? \"true\"\n                  : \"false\"\n              );\n\n            }\n          );\n\n        }\n\n\n\n        \/* =================================================\n           TRANSFORM CAROUSEL HELPERS\n        ================================================== *\/\n\n        function getSlideWidth() {\n\n          if (\n            !touchTrack\n          ) {\n            return 0;\n          }\n\n\n          const panel =\n            touchTrack.querySelector(\n              \".np-community__panel\"\n            );\n\n\n          if (!panel) {\n            return 0;\n          }\n\n\n          return panel\n            .getBoundingClientRect()\n            .width;\n\n        }\n\n\n        function getRealIndexFromPhysical(index) {\n\n          return (\n            (\n              index -\n              leadCloneCount\n            ) %\n            realCount +\n            realCount\n          ) %\n          realCount;\n\n        }\n\n\n        function getTranslateForPhysical(index) {\n\n          const slideWidth =\n            getSlideWidth();\n\n\n          return -1 *\n            index *\n            slideWidth;\n\n        }\n\n\n        function setTrackTransition(\n          enabled,\n          duration\n        ) {\n\n          if (!touchTrack) {\n            return;\n          }\n\n\n          if (!enabled) {\n\n            touchTrack.style.transition =\n              \"none\";\n\n            return;\n\n          }\n\n\n          touchTrack.style.transition =\n            \"transform \" +\n            duration +\n            \"ms cubic-bezier(0.25, 0.80, 0.25, 1)\";\n\n        }\n\n\n        function setTrackTranslate(value) {\n\n          if (!touchTrack) {\n            return;\n          }\n\n\n          currentTranslate =\n            value;\n\n\n          touchTrack.style.transform =\n            \"translate3d(\" +\n            value +\n            \"px, 0, 0)\";\n\n        }\n\n\n        function getRenderedTranslate() {\n\n          if (!touchTrack) {\n            return currentTranslate;\n          }\n\n\n          const transform =\n            window\n              .getComputedStyle(touchTrack)\n              .transform;\n\n\n          if (\n            !transform ||\n            transform === \"none\"\n          ) {\n            return currentTranslate;\n          }\n\n\n          try {\n\n            const matrix =\n              new DOMMatrixReadOnly(\n                transform\n              );\n\n\n            return matrix.m41;\n\n          } catch (error) {\n\n            const values =\n              transform\n                .replace(\n                  \/^matrix(3d)?\\(\/,\n                  \"\"\n                )\n                .replace(\n                  \/\\)$\/,\n                  \"\"\n                )\n                .split(\",\")\n                .map(Number);\n\n\n            if (\n              transform.indexOf(\n                \"matrix3d\"\n              ) === 0\n            ) {\n\n              return values[12] || 0;\n\n            }\n\n\n            return values[4] || 0;\n\n          }\n\n        }\n\n\n        function jumpToPhysical(index) {\n\n          physicalIndex =\n            index;\n\n\n          setTrackTransition(\n            false,\n            0\n          );\n\n\n          setTrackTranslate(\n            getTranslateForPhysical(\n              physicalIndex\n            )\n          );\n\n\n          updateTouchDots(\n            getRealIndexFromPhysical(\n              physicalIndex\n            )\n          );\n\n        }\n\n\n        function animateToPhysical(\n          index,\n          fromTranslate\n        ) {\n\n          if (!touchTrack) {\n            return;\n          }\n\n\n          const slideWidth =\n            getSlideWidth();\n\n\n          if (!slideWidth) {\n            return;\n          }\n\n\n          physicalIndex =\n            index;\n\n\n          const targetTranslate =\n            getTranslateForPhysical(\n              physicalIndex\n            );\n\n\n          const startTranslate =\n            typeof fromTranslate ===\n            \"number\"\n              ? fromTranslate\n              : currentTranslate;\n\n\n          const distance =\n            Math.abs(\n              targetTranslate -\n              startTranslate\n            );\n\n\n          const distanceInSlides =\n            distance \/\n            slideWidth;\n\n\n          const duration =\n            Math.round(\n              Math.min(\n                680,\n                Math.max(\n                  500,\n                  500 +\n                  distanceInSlides *\n                  95\n                )\n              )\n            );\n\n\n          updateTouchDots(\n            getRealIndexFromPhysical(\n              physicalIndex\n            )\n          );\n\n\n          if (\n            Math.abs(\n              targetTranslate -\n              startTranslate\n            ) < 0.5\n          ) {\n\n            jumpToPhysical(\n              physicalIndex\n            );\n\n            return;\n\n          }\n\n\n          setTrackTransition(\n            true,\n            duration\n          );\n\n\n          setTrackTranslate(\n            targetTranslate\n          );\n\n        }\n\n\n        function normalizeLoopPosition() {\n\n          if (!touchTrack) {\n            return;\n          }\n\n\n          const firstRealPhysical =\n            leadCloneCount;\n\n\n          const firstTrailingClone =\n            leadCloneCount +\n            realCount;\n\n\n          let normalizedIndex =\n            physicalIndex;\n\n\n          if (\n            physicalIndex <\n            firstRealPhysical\n          ) {\n\n            normalizedIndex =\n              physicalIndex +\n              realCount;\n\n          } else if (\n            physicalIndex >=\n            firstTrailingClone\n          ) {\n\n            normalizedIndex =\n              physicalIndex -\n              realCount;\n\n          }\n\n\n          if (\n            normalizedIndex !==\n            physicalIndex\n          ) {\n\n            \/*\n             * IMPORTANT:\n             * The clone state and the real state are\n             * pixel-identical. The index remap therefore\n             * happens with transition disabled and is not\n             * visible to the user.\n             *\/\n\n            physicalIndex =\n              normalizedIndex;\n\n\n            setTrackTransition(\n              false,\n              0\n            );\n\n\n            setTrackTranslate(\n              getTranslateForPhysical(\n                physicalIndex\n              )\n            );\n\n\n            updateTouchDots(\n              getRealIndexFromPhysical(\n                physicalIndex\n              )\n            );\n\n          }\n\n        }\n\n\n\n        \/* =================================================\n           POINTER \/ SWIPE ENGINE\n           PREMIUM CONTROLLED DRAG + SOFT SETTLE\n        ================================================== *\/\n\n        const drag = {\n          active: false,\n          pointerId: null,\n          mode: null,\n          startX: 0,\n          startY: 0,\n          startTime: 0,\n          startTranslate: 0,\n          startPhysicalIndex: 2,\n          lastX: 0,\n          lastTime: 0,\n          velocityX: 0\n        };\n\n\n        function resetDrag() {\n\n          drag.active =\n            false;\n\n          drag.pointerId =\n            null;\n\n          drag.mode =\n            null;\n\n          drag.velocityX =\n            0;\n\n        }\n\n\n        function handlePointerDown(event) {\n\n          if (\n            !touchModeActive ||\n            !touchTrack\n          ) {\n            return;\n          }\n\n\n          if (\n            event.pointerType ===\n            \"mouse\" &&\n            event.button !== 0\n          ) {\n            return;\n          }\n\n\n          const renderedTranslate =\n            getRenderedTranslate();\n\n\n          setTrackTransition(\n            false,\n            0\n          );\n\n\n          setTrackTranslate(\n            renderedTranslate\n          );\n\n\n          const slideWidth =\n            getSlideWidth();\n\n\n          drag.active =\n            true;\n\n          drag.pointerId =\n            event.pointerId;\n\n          drag.mode =\n            null;\n\n          drag.startX =\n            event.clientX;\n\n          drag.startY =\n            event.clientY;\n\n          drag.startTime =\n            performance.now();\n\n          drag.startTranslate =\n            renderedTranslate;\n\n          drag.startPhysicalIndex =\n            slideWidth\n              ? Math.round(\n                  -renderedTranslate \/\n                  slideWidth\n                )\n              : physicalIndex;\n\n          drag.lastX =\n            event.clientX;\n\n          drag.lastTime =\n            drag.startTime;\n\n          drag.velocityX =\n            0;\n\n        }\n\n\n        function handlePointerMove(event) {\n\n          if (\n            !drag.active ||\n            event.pointerId !==\n            drag.pointerId ||\n            !touchTrack\n          ) {\n            return;\n          }\n\n\n          const deltaX =\n            event.clientX -\n            drag.startX;\n\n\n          const deltaY =\n            event.clientY -\n            drag.startY;\n\n\n          if (\n            drag.mode === null &&\n            Math.max(\n              Math.abs(deltaX),\n              Math.abs(deltaY)\n            ) >= 6\n          ) {\n\n            drag.mode =\n              Math.abs(deltaX) >\n              Math.abs(deltaY)\n                ? \"x\"\n                : \"y\";\n\n\n            if (\n              drag.mode === \"x\" &&\n              galleries[0].setPointerCapture\n            ) {\n\n              try {\n\n                galleries[0].setPointerCapture(\n                  event.pointerId\n                );\n\n              } catch (error) {\n                \/* no-op *\/\n              }\n\n            }\n\n          }\n\n\n          if (\n            drag.mode !== \"x\"\n          ) {\n            return;\n          }\n\n\n          if (\n            event.cancelable\n          ) {\n            event.preventDefault();\n          }\n\n\n          const now =\n            performance.now();\n\n\n          const elapsed =\n            Math.max(\n              1,\n              now -\n              drag.lastTime\n            );\n\n\n          const instantaneousVelocity =\n            (\n              event.clientX -\n              drag.lastX\n            ) \/\n            elapsed;\n\n\n          drag.velocityX =\n            drag.velocityX *\n            0.72 +\n            instantaneousVelocity *\n            0.28;\n\n\n          drag.lastX =\n            event.clientX;\n\n          drag.lastTime =\n            now;\n\n\n          \/*\n           * PREMIUM DRAG FEEL\n           *\n           * The track deliberately follows the finger\n           * a little more slowly than 1:1. This gives the\n           * carousel more visual weight and prevents small\n           * hand movements from feeling nervous.\n           *\/\n\n          const dragResistance =\n            0.82;\n\n\n          const nextTranslate =\n            drag.startTranslate +\n            deltaX *\n            dragResistance;\n\n\n          setTrackTranslate(\n            nextTranslate\n          );\n\n\n          const slideWidth =\n            getSlideWidth();\n\n\n          if (slideWidth) {\n\n            const nearestPhysical =\n              Math.round(\n                -nextTranslate \/\n                slideWidth\n              );\n\n\n            updateTouchDots(\n              getRealIndexFromPhysical(\n                nearestPhysical\n              )\n            );\n\n          }\n\n        }\n\n\n        function finishPointerGesture(\n          event,\n          cancelled\n        ) {\n\n          if (\n            !drag.active ||\n            (\n              typeof event.pointerId ===\n              \"number\" &&\n              event.pointerId !==\n              drag.pointerId\n            )\n          ) {\n            return;\n          }\n\n\n          const slideWidth =\n            getSlideWidth();\n\n\n          if (!slideWidth) {\n\n            resetDrag();\n\n            return;\n\n          }\n\n\n          if (\n            drag.mode !== \"x\"\n          ) {\n\n            physicalIndex =\n              drag.startPhysicalIndex;\n\n\n            setTrackTransition(\n              false,\n              0\n            );\n\n\n            setTrackTranslate(\n              getTranslateForPhysical(\n                physicalIndex\n              )\n            );\n\n\n            resetDrag();\n\n            return;\n\n          }\n\n\n          const endX =\n            typeof event.clientX ===\n            \"number\"\n              ? event.clientX\n              : drag.lastX;\n\n\n          const deltaX =\n            endX -\n            drag.startX;\n\n\n          const totalTime =\n            Math.max(\n              1,\n              performance.now() -\n              drag.startTime\n            );\n\n\n          const averageVelocity =\n            deltaX \/\n            totalTime;\n\n\n          const velocity =\n            Math.abs(\n              drag.velocityX\n            ) >\n            Math.abs(\n              averageVelocity\n            )\n              ? drag.velocityX\n              : averageVelocity;\n\n\n          const threshold =\n            Math.min(\n              96,\n              slideWidth *\n              0.23\n            );\n\n\n          const velocityThreshold =\n            0.66;\n\n\n          let targetPhysical =\n            drag.startPhysicalIndex;\n\n\n          if (!cancelled) {\n\n            if (\n              Math.abs(deltaX) >=\n              threshold\n            ) {\n\n              targetPhysical +=\n                deltaX < 0\n                  ? 1\n                  : -1;\n\n            } else if (\n              Math.abs(velocity) >=\n              velocityThreshold\n            ) {\n\n              targetPhysical +=\n                velocity < 0\n                  ? 1\n                  : -1;\n\n            } else {\n\n              \/*\n               * No deliberate slide change: return calmly\n               * to the slide from which the gesture began.\n               *\/\n\n              targetPhysical =\n                drag.startPhysicalIndex;\n\n            }\n\n          }\n\n\n          const maxPhysicalIndex =\n            leadCloneCount +\n            realCount +\n            1;\n\n\n          targetPhysical =\n            Math.max(\n              0,\n              Math.min(\n                maxPhysicalIndex,\n                targetPhysical\n              )\n            );\n\n\n          const fromTranslate =\n            currentTranslate;\n\n\n          resetDrag();\n\n\n          animateToPhysical(\n            targetPhysical,\n            fromTranslate\n          );\n\n        }\n\n\n        function handlePointerUp(event) {\n\n          finishPointerGesture(\n            event,\n            false\n          );\n\n        }\n\n\n        function handlePointerCancel(event) {\n\n          finishPointerGesture(\n            event,\n            true\n          );\n\n        }\n\n\n        function handleTrackTransitionEnd(event) {\n\n          if (\n            !touchModeActive ||\n            !touchTrack ||\n            event.target !==\n            touchTrack ||\n            event.propertyName !==\n            \"transform\"\n          ) {\n            return;\n          }\n\n\n          normalizeLoopPosition();\n\n        }\n\n\n\n        \/* =================================================\n           TOUCH DOT NAVIGATION\n           SHORTEST CYCLIC PATH\n        ================================================== *\/\n\n        touchDots.forEach(\n          function (dot) {\n\n            dot.addEventListener(\n              \"click\",\n              function () {\n\n                if (\n                  !touchModeActive ||\n                  !touchTrack\n                ) {\n                  return;\n                }\n\n\n                const targetRealIndex =\n                  Number(\n                    dot.getAttribute(\n                      \"data-touch-index\"\n                    )\n                  );\n\n\n                let difference =\n                  targetRealIndex -\n                  activeRealIndex;\n\n\n                if (\n                  difference >\n                  realCount \/ 2\n                ) {\n\n                  difference -=\n                    realCount;\n\n                } else if (\n                  difference <\n                  -realCount \/ 2\n                ) {\n\n                  difference +=\n                    realCount;\n\n                }\n\n\n                if (difference === 0) {\n                  return;\n                }\n\n\n                const targetPhysical =\n                  physicalIndex +\n                  difference;\n\n\n                animateToPhysical(\n                  targetPhysical,\n                  getRenderedTranslate()\n                );\n\n              }\n            );\n\n          }\n        );\n\n\n\n        \/* =================================================\n           BUILD TABLET \/ MOBILE\n           TRANSFORM-BASED INFINITE CAROUSEL\n\n           PHYSICAL ORDER:\n\n           0 = CLONE IMAGE 5\n           1 = CLONE IMAGE 6\n\n           2 = IMAGE 1\n           3 = IMAGE 2\n           4 = IMAGE 3\n           5 = IMAGE 4\n           6 = IMAGE 5\n           7 = IMAGE 6\n\n           8 = CLONE IMAGE 1\n           9 = CLONE IMAGE 2\n        ================================================== *\/\n\n        function buildTouchCarousel() {\n\n          if (touchModeActive) {\n            return;\n          }\n\n\n          touchModeActive =\n            true;\n\n\n          const viewport =\n            galleries[0];\n\n\n\n          \/* ===============================================\n             CREATE TRACK\n          ================================================ *\/\n\n          touchTrack =\n            document.createElement(\n              \"div\"\n            );\n\n\n          touchTrack.className =\n            \"np-community__touch-track\";\n\n\n\n          \/* ===============================================\n             MOVE ALL SIX REAL PANELS INTO TRACK\n          ================================================ *\/\n\n          originalPanels.forEach(\n            function (panels, setIndex) {\n\n              panels.forEach(\n                function (panel, panelIndex) {\n\n                  panel.classList.remove(\n                    \"np-community__panel--clone\"\n                  );\n\n\n                  panel.removeAttribute(\n                    \"aria-hidden\"\n                  );\n\n\n                  if (\n                    setIndex === 1\n                  ) {\n\n                    panel.classList.add(\n                      \"np-community__panel--from-set-2\"\n                    );\n\n                  }\n\n\n                  panel.dataset.touchIndex =\n                    String(\n                      setIndex * 3 +\n                      panelIndex\n                    );\n\n\n                  touchTrack.appendChild(\n                    panel\n                  );\n\n                }\n              );\n\n            }\n          );\n\n\n\n          \/* ===============================================\n             CREATE TWO IDENTICAL LOOP SLIDES\n             ON EACH SIDE\n          ================================================ *\/\n\n          const cloneBeforeImage5 =\n            allOriginalPanels[\n              realCount - 2\n            ].cloneNode(true);\n\n\n          const cloneBeforeImage6 =\n            allOriginalPanels[\n              realCount - 1\n            ].cloneNode(true);\n\n\n          const cloneAfterImage1 =\n            allOriginalPanels[0]\n              .cloneNode(true);\n\n\n          const cloneAfterImage2 =\n            allOriginalPanels[1]\n              .cloneNode(true);\n\n\n          const loopClones = [\n            cloneBeforeImage5,\n            cloneBeforeImage6,\n            cloneAfterImage1,\n            cloneAfterImage2\n          ];\n\n\n          loopClones.forEach(\n            function (clone) {\n\n              clone.classList.add(\n                \"np-community__panel--clone\"\n              );\n\n\n              clone.setAttribute(\n                \"aria-hidden\",\n                \"true\"\n              );\n\n\n              clone.setAttribute(\n                \"tabindex\",\n                \"-1\"\n              );\n\n\n              const cloneImage =\n                clone.querySelector(\n                  \"img\"\n                );\n\n\n              if (cloneImage) {\n\n                cloneImage.setAttribute(\n                  \"loading\",\n                  \"eager\"\n                );\n\n              }\n\n            }\n          );\n\n\n\n          \/* ===============================================\n             LEADING CLONES\n          ================================================ *\/\n\n          touchTrack.insertBefore(\n            cloneBeforeImage6,\n            touchTrack.firstChild\n          );\n\n\n          touchTrack.insertBefore(\n            cloneBeforeImage5,\n            touchTrack.firstChild\n          );\n\n\n\n          \/* ===============================================\n             TRAILING CLONES\n          ================================================ *\/\n\n          touchTrack.appendChild(\n            cloneAfterImage1\n          );\n\n\n          touchTrack.appendChild(\n            cloneAfterImage2\n          );\n\n\n\n          \/* ===============================================\n             ADD TRACK TO VIEWPORT\n          ================================================ *\/\n\n          viewport.appendChild(\n            touchTrack\n          );\n\n\n          viewport.removeAttribute(\n            \"hidden\"\n          );\n\n\n          viewport.setAttribute(\n            \"aria-hidden\",\n            \"false\"\n          );\n\n\n          galleries\n            .slice(1)\n            .forEach(\n              function (gallery) {\n\n                gallery.setAttribute(\n                  \"hidden\",\n                  \"\"\n                );\n\n\n                gallery.setAttribute(\n                  \"aria-hidden\",\n                  \"true\"\n                );\n\n              }\n            );\n\n\n\n          \/* ===============================================\n             SWIPE LISTENERS\n          ================================================ *\/\n\n          viewport.addEventListener(\n            \"pointerdown\",\n            handlePointerDown\n          );\n\n\n          viewport.addEventListener(\n            \"pointermove\",\n            handlePointerMove,\n            {\n              passive: false\n            }\n          );\n\n\n          viewport.addEventListener(\n            \"pointerup\",\n            handlePointerUp\n          );\n\n\n          viewport.addEventListener(\n            \"pointercancel\",\n            handlePointerCancel\n          );\n\n\n          touchTrack.addEventListener(\n            \"transitionend\",\n            handleTrackTransitionEnd\n          );\n\n\n\n          \/* ===============================================\n             START ON REAL IMAGE 1\n             TWO LEADING CLONES = PHYSICAL INDEX 2\n          ================================================ *\/\n\n          physicalIndex =\n            2;\n\n\n          activeRealIndex =\n            0;\n\n\n          updateTouchDots(0);\n\n\n          requestAnimationFrame(\n            function () {\n\n              requestAnimationFrame(\n                function () {\n\n                  jumpToPhysical(2);\n\n                }\n              );\n\n            }\n          );\n\n        }\n\n\n\n        \/* =================================================\n           RESTORE ORIGINAL DESKTOP 2 \u00d7 3 STRUCTURE\n        ================================================== *\/\n\n        function restoreDesktopCarousel() {\n\n          if (!touchModeActive) {\n\n            showGallery(\n              currentGalleryIndex\n            );\n\n            return;\n\n          }\n\n\n          touchModeActive =\n            false;\n\n\n          resetDrag();\n\n\n          const viewport =\n            galleries[0];\n\n\n          viewport.removeEventListener(\n            \"pointerdown\",\n            handlePointerDown\n          );\n\n\n          viewport.removeEventListener(\n            \"pointermove\",\n            handlePointerMove\n          );\n\n\n          viewport.removeEventListener(\n            \"pointerup\",\n            handlePointerUp\n          );\n\n\n          viewport.removeEventListener(\n            \"pointercancel\",\n            handlePointerCancel\n          );\n\n\n          if (touchTrack) {\n\n            touchTrack.removeEventListener(\n              \"transitionend\",\n              handleTrackTransitionEnd\n            );\n\n\n            touchTrack.querySelectorAll(\n              \".np-community__panel--clone\"\n            ).forEach(\n              function (clone) {\n\n                clone.remove();\n\n              }\n            );\n\n          }\n\n\n\n          \/* ===============================================\n             RETURN REAL PANELS TO ORIGINAL SETS\n          ================================================ *\/\n\n          originalPanels.forEach(\n            function (panels, setIndex) {\n\n              panels.forEach(\n                function (panel) {\n\n                  panel.classList.remove(\n                    \"np-community__panel--from-set-2\"\n                  );\n\n\n                  delete panel.dataset.touchIndex;\n\n\n                  galleries[\n                    setIndex\n                  ].appendChild(\n                    panel\n                  );\n\n                }\n              );\n\n            }\n          );\n\n\n          if (\n            touchTrack &&\n            touchTrack.parentNode\n          ) {\n\n            touchTrack.remove();\n\n          }\n\n\n          touchTrack =\n            null;\n\n\n          currentTranslate =\n            0;\n\n\n          physicalIndex =\n            2;\n\n\n          activeRealIndex =\n            0;\n\n\n          showGallery(\n            currentGalleryIndex\n          );\n\n        }\n\n\n\n        \/* =================================================\n           RESIZE \/ ORIENTATION\n           KEEP CURRENT IMAGE PERFECTLY ALIGNED\n        ================================================== *\/\n\n        function handleResponsiveResize() {\n\n          if (\n            !touchModeActive ||\n            !touchTrack\n          ) {\n            return;\n          }\n\n\n          if (resizeFrame) {\n\n            cancelAnimationFrame(\n              resizeFrame\n            );\n\n          }\n\n\n          resizeFrame =\n            requestAnimationFrame(\n              function () {\n\n                resetDrag();\n\n\n                physicalIndex =\n                  leadCloneCount +\n                  activeRealIndex;\n\n\n                setTrackTransition(\n                  false,\n                  0\n                );\n\n\n                setTrackTranslate(\n                  getTranslateForPhysical(\n                    physicalIndex\n                  )\n                );\n\n\n                resizeFrame =\n                  null;\n\n              }\n            );\n\n        }\n\n\n        window.addEventListener(\n          \"resize\",\n          handleResponsiveResize,\n          {\n            passive: true\n          }\n        );\n\n\n        window.addEventListener(\n          \"orientationchange\",\n          handleResponsiveResize,\n          {\n            passive: true\n          }\n        );\n\n\n\n        \/* =================================================\n           RESPONSIVE MODE\n        ================================================== *\/\n\n        function syncGalleryMode() {\n\n          if (\n            touchQuery.matches\n          ) {\n\n            buildTouchCarousel();\n\n          } else {\n\n            restoreDesktopCarousel();\n\n          }\n\n        }\n\n\n        if (\n          typeof touchQuery.addEventListener ===\n          \"function\"\n        ) {\n\n          touchQuery.addEventListener(\n            \"change\",\n            syncGalleryMode\n          );\n\n        } else {\n\n          touchQuery.addListener(\n            syncGalleryMode\n          );\n\n        }\n\n\n\n        \/* =================================================\n           INITIAL STATE\n        ================================================== *\/\n\n        showGallery(0);\n\n\n        syncGalleryMode();\n\n\n      }\n    );\n\n  }\n);\n\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-a6475c6 e-con e-atomic-element e-flexbox-base e-default-div e-8a4b417 \" data-id=\"a6475c6\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"a6475c6\" data-e-type=\"e-flexbox\" data-id=\"a6475c6\">\n    \t\t<div class=\"elementor-element elementor-element-63fabbd elementor-widget elementor-widget-html\" data-id=\"63fabbd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 09 \u2014 START HERE\n     THE PERFORMANCE BASELINE\n     FREE PERSONALIZED ASSESSMENT\n========================================================= -->\n\n<section class=\"np-baseline\" id=\"start\" aria-labelledby=\"np-baseline-title\">\n\n  <div class=\"np-baseline__inner\">\n\n\n    <!-- =====================================================\n         LEFT \u2014 POSITIONING\n    ====================================================== -->\n\n    <div class=\"np-baseline__intro\">\n\n\n      <!-- EYEBROW -->\n\n      <div class=\"np-baseline__eyebrow\">\n HIER STARTEN \/ KOSTENLOSER PERFORMANCE-CHECK \/ 09\n      <\/div>\n\n\n      <!-- PRODUCT -->\n\n      <div class=\"np-baseline__product-row\">\n\n        <div class=\"np-baseline__product\">\n THE PERFORMANCE BASELINE\n        <\/div>\n\n        <span class=\"np-baseline__free\">\n KOSTENLOS\n        <\/span>\n\n      <\/div>\n\n\n      <!-- HEADLINE -->\n\n      <h2 class=\"np-baseline__headline\" id=\"np-baseline-title\">\n\n         <span>\nFINDE HERAUS,\n<\/span>\n\n<span class=\"np-baseline__outline\">\nWO DU STEHST.\n<\/span> \n\n      <\/h2>\n\n\n      <!-- COPY -->\n\n      <p class=\"np-baseline__copy\">\n Ein gezielter Performance-Check,<br\/>der aus deinen Antworten eine pers\u00f6nliche Baseline erstellt \u2014\nund zeigt, was dich bereits unterst\u00fctzt, was dich\nbremst und wo du als N\u00e4chstes ansetzen solltest.\n      <\/p>\n\n\n      <!-- META -->\n\n      <div class=\"np-baseline__meta\">\n\n        <span>\n 5 MIN\n        <\/span>\n\n        <i><\/i>\n\n        <span>\n PERSONALISIERT\n        <\/span>\n\n        <i><\/i>\n\n        <span>\n KOSTENLOS\n        <\/span>\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         RIGHT \u2014 PERSONALIZED OUTPUT\n    ====================================================== -->\n\n    <div class=\"np-baseline__result\">\n\n\n      <!-- RESULT INTRO -->\n\n      <div class=\"np-baseline__result-head\">\n\n        <span class=\"np-baseline__result-label\">\n DEINE PERSONALISIERTE BASELINE\n        <\/span>\n\n        <h3>\n IN WENIGEN MINUTEN\nWEISST DU:\n        <\/h3>\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           OUTCOME 01\n      ==================================================== -->\n\n      <div class=\"np-baseline__outcome\">\n\n        <span class=\"np-baseline__outcome-number\">\n  01\n        <\/span>\n\n        <div class=\"np-baseline__outcome-content\">\n\n           <strong>\nDEIN ST\u00c4RKSTER BEREICH\n<\/strong>\n\n<span>\nWas deine Performance bereits unterst\u00fctzt.\n<\/span> \n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           OUTCOME 02\n      ==================================================== -->\n\n      <div class=\"np-baseline__outcome\">\n\n        <span class=\"np-baseline__outcome-number\">\n  02\n        <\/span>\n\n        <div class=\"np-baseline__outcome-content\">\n\n           <strong>\nDEIN GR\u00d6SSTER ENGPASS\n<\/strong>\n\n\n<span>Was dich aktuell am st\u00e4rksten bremst \u2013<br\/>und welcher zweite Faktor das zus\u00e4tzlich verst\u00e4rkt.<\/span> \n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           OUTCOME 03\n      ==================================================== -->\n\n      <div class=\"np-baseline__outcome\">\n\n        <span class=\"np-baseline__outcome-number\">\n  03\n        <\/span>\n\n        <div class=\"np-baseline__outcome-content\">\n\n           <strong>\nDEINE EINSCH\u00c4TZUNG\n<\/strong>\n\n\n<span>Wo das, was du selbst vermutest, von dem abweicht, <br\/>was deine Antworten tats\u00e4chlich zeigen.\n<\/span> \n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           OUTCOME 04\n      ==================================================== -->\n\n      <div class=\"np-baseline__outcome\">\n\n        <span class=\"np-baseline__outcome-number\">\n  04\n        <\/span>\n\n        <div class=\"np-baseline__outcome-content\">\n\n           <strong>\nDEIN N\u00c4CHSTER SCHWERPUNKT\n<\/strong>\n\n<span>\nWo du am sinnvollsten ansetzt \u2014\nmit einer klaren Ma\u00dfnahme f\u00fcr die n\u00e4chsten 7 Tage.\n<\/span> \n\n        <\/div>\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           CTA\n      ==================================================== -->\n\n      <a class=\"np-baseline__cta\" href=\"https:\/\/normanpetermann.com\/de\/norman-petermann-performance-baseline\/\">\n\n        <span>\n ERSTELLE DEINE BASELINE\n        <\/span>\n\n        <span class=\"np-baseline__arrow\" aria-hidden=\"true\"><\/span>\n\n      <\/a>\n\n\n      <!-- SUPPORT LINE -->\n\n      <p class=\"np-baseline__note\">\n Keine Standardbewertung. Keine Standardempfehlungen.<br\/>Ein klarer Ausgangspunkt, eine konkrete Ma\u00dfnahme f\u00fcr die n\u00e4chsten 7 Tage \u2013<br\/>und eine klare Priorit\u00e4t: was jetzt z\u00e4hlt und was noch warten kann. \n      <\/p>\n\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-baseline,\n.np-baseline * {\n  box-sizing: border-box;\n}\n\n\n.np-baseline {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position: relative;\n\n  width: 100%;\n\n  overflow: hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n}\n\n\n\/* =========================================================\n   INNER\n   LEFT BLOCK NOW VERTICALLY CENTERED\n   AGAINST THE RIGHT RESULT BLOCK\n========================================================= *\/\n\n.np-baseline__inner {\n  width:\n    min(100%, 1500px);\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(150px, 11vw, 205px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(160px, 12vw, 220px);\n\n  display:\n    grid;\n\n  grid-template-columns:\n    minmax(0, 0.93fr)\n    minmax(0, 1.07fr);\n\n  gap:\n    clamp(90px, 8vw, 150px);\n\n  align-items:\n    center;\n}\n\n\n\/* =========================================================\n   LEFT\n========================================================= *\/\n\n.np-baseline__intro {\n  width:\n    100%;\n\n  max-width:\n    670px;\n}\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.np-baseline__eyebrow {\n  margin-bottom:\n    clamp(30px, 2.8vw, 40px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.76);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   PRODUCT ROW\n========================================================= *\/\n\n.np-baseline__product-row {\n  margin-bottom:\n    clamp(24px, 2.3vw, 32px);\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  flex-wrap:\n    wrap;\n\n  gap:\n    12px;\n}\n\n\n\/* =========================================================\n   PRODUCT NAME\n========================================================= *\/\n\n.np-baseline__product {\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.14em;\n\n  color:\n    rgba(242,241,237,0.58);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   FREE BADGE\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-baseline__free {\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  min-height:\n    22px;\n\n  padding:\n\n    0\n\n    8px;\n\n  border:\n    1px solid rgba(65,105,255,0.58);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    9px;\n\n  font-weight:\n    600;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.13em;\n\n  color:\n    var(--blue);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-baseline__headline {\n  margin:\n    0;\n\n  max-width:\n    720px;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(60px, 6vw, 104px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.90;\n\n  letter-spacing:\n    -0.052em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-baseline__headline > span {\n  display:\n    block;\n}\n\n\n\/* =========================================================\n   OUTLINE\n========================================================= *\/\n\n.np-baseline__outline {\n  margin-top:\n    0.055em;\n\n  color:\n    rgba(8,10,12,0);\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.55);\n}\n\n\n\/* =========================================================\n   INTRO COPY\n========================================================= *\/\n\n.np-baseline__copy {\n  width:\n    min(100%, 540px);\n\n  margin:\n\n    clamp(38px, 3.6vw, 50px)\n\n    0\n\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 1vw, 16px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.75;\n\n  color:\n    rgba(242,241,237,0.56);\n}\n\n\n\/* =========================================================\n   META\n   NEW READABILITY STANDARD\n========================================================= *\/\n\n.np-baseline__meta {\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  flex-wrap:\n    wrap;\n\n  gap:\n    11px;\n\n  margin-top:\n    clamp(30px, 3vw, 40px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.14em;\n\n  color:\n    rgba(140,148,156,0.76);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-baseline__meta i {\n  width:\n    3px;\n\n  height:\n    3px;\n\n  flex:\n    0 0 3px;\n\n  border-radius:\n    50%;\n\n  background:\n    var(--blue);\n}\n\n\n\/* =========================================================\n   RIGHT \u2014 PERSONALIZED RESULT\n========================================================= *\/\n\n.np-baseline__result {\n  position:\n    relative;\n\n  width:\n    100%;\n\n  max-width:\n    710px;\n\n  margin-left:\n    auto;\n\n  padding:\n\n    clamp(34px, 3.2vw, 46px)\n\n    clamp(30px, 3vw, 44px)\n\n    clamp(34px, 3.2vw, 46px);\n\n  border:\n    1px solid rgba(242,241,237,0.10);\n\n  background:\n    rgba(242,241,237,0.018);\n}\n\n\n\/* =========================================================\n   RESULT HEADER\n========================================================= *\/\n\n.np-baseline__result-head {\n  padding-bottom:\n    clamp(38px, 3.8vw, 52px);\n\n  border-bottom:\n    1px solid rgba(242,241,237,0.14);\n}\n\n\n\/* =========================================================\n   RESULT LABEL\n========================================================= *\/\n\n.np-baseline__result-label {\n  position:\n    relative;\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  gap:\n    10px;\n\n  margin-bottom:\n    clamp(22px, 2.1vw, 30px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.14em;\n\n  color:\n    rgba(140,148,156,0.76);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-baseline__result-label::before {\n  content:\n    \"\";\n\n  width:\n    4px;\n\n  height:\n    4px;\n\n  flex:\n    0 0 4px;\n\n  border-radius:\n    50%;\n\n  background:\n    var(--blue);\n}\n\n\n\/* =========================================================\n   RESULT TITLE\n========================================================= *\/\n\n.np-baseline__result-head h3 {\n  max-width:\n    610px;\n\n  margin:\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(30px, 2.7vw, 44px);\n\n  font-weight:\n    600;\n\n  line-height:\n    1.04;\n\n  letter-spacing:\n    -0.04em;\n\n  color:\n    rgba(242,241,237,0.94);\n\n  text-transform:\n    uppercase;\n}\n\n\n\/* =========================================================\n   OUTCOME\n========================================================= *\/\n\n.np-baseline__outcome {\n  min-height:\n    126px;\n\n  padding:\n\n    clamp(27px, 2.6vw, 36px)\n\n    0;\n\n  display:\n    grid;\n\n  grid-template-columns:\n    48px\n    minmax(0, 1fr);\n\n  gap:\n    clamp(18px, 2vw, 28px);\n\n  align-items:\n    start;\n\n  border-bottom:\n    1px solid rgba(242,241,237,0.11);\n}\n\n\n\/* =========================================================\n   OUTCOME NUMBER\n========================================================= *\/\n\n.np-baseline__outcome-number {\n  padding-top:\n    3px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    rgba(140,148,156,0.58);\n}\n\n\n\/* =========================================================\n   OUTCOME CONTENT\n========================================================= *\/\n\n.np-baseline__outcome-content strong,\n.np-baseline__outcome-content span {\n  display:\n    block;\n}\n\n\n.np-baseline__outcome-content strong {\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(18px, 1.45vw, 23px);\n\n  font-weight:\n    600;\n\n  line-height:\n    1.15;\n\n  letter-spacing:\n    -0.025em;\n\n  color:\n    rgba(242,241,237,0.94);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-baseline__outcome-content span {\n  max-width:\n    500px;\n\n  margin-top:\n    9px;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(13px, 0.95vw, 15px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.55;\n\n  color:\n    rgba(242,241,237,0.48);\n}\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.np-baseline__cta {\n  width:\n    100%;\n\n  min-height:\n    82px;\n\n  margin-top:\n    clamp(42px, 4vw, 58px);\n\n  padding:\n\n    0\n\n    clamp(24px, 2.4vw, 34px);\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    space-between;\n\n  gap:\n    20px;\n\n  border:\n    1px solid rgba(242,241,237,0.22);\n\n  background:\n    rgba(242,241,237,0.96);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    600;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    var(--black);\n\n  text-decoration:\n    none;\n\n  text-transform:\n    uppercase;\n\n  transition:\n\n    background\n    0.28s\n    ease,\n\n    border-color\n    0.28s\n    ease,\n\n    color\n    0.28s\n    ease;\n}\n\n\n\/* =========================================================\n   CTA ARROW\n========================================================= *\/\n\n.np-baseline__arrow {\n  position:\n    relative;\n\n  width:\n    22px;\n\n  height:\n    12px;\n\n  flex:\n    0 0 22px;\n\n  color:\n    var(--black);\n\n  transition:\n\n    transform\n    0.32s\n    cubic-bezier(0.22, 1, 0.36, 1),\n\n    color\n    0.28s\n    ease;\n}\n\n\n.np-baseline__arrow::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  left:\n    0;\n\n  top:\n    50%;\n\n  width:\n    20px;\n\n  height:\n    1px;\n\n  background:\n    currentColor;\n\n  transform:\n    translateY(-50%);\n}\n\n\n.np-baseline__arrow::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  right:\n    0;\n\n  top:\n    50%;\n\n  width:\n    7px;\n\n  height:\n    7px;\n\n  border-top:\n    1px solid currentColor;\n\n  border-right:\n    1px solid currentColor;\n\n  transform:\n\n    translateY(-50%)\n\n    rotate(45deg);\n}\n\n\n\/* =========================================================\n   CTA HOVER\n   WHITE \u2192 COBALT BLUE\n========================================================= *\/\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-baseline__cta:hover {\n    background:\n      var(--blue);\n\n    border-color:\n      var(--blue);\n\n    color:\n      #FFFFFF;\n  }\n\n\n  .np-baseline__cta:hover\n  .np-baseline__arrow {\n    color:\n      #FFFFFF;\n\n    transform:\n      translateX(5px);\n  }\n\n}\n\n\n\/* =========================================================\n   FOCUS\n========================================================= *\/\n\n.np-baseline__cta:focus-visible {\n  outline:\n    2px solid rgba(65,105,255,0.80);\n\n  outline-offset:\n    5px;\n}\n\n\n\/* =========================================================\n   NOTE\n========================================================= *\/\n\n.np-baseline__note {\n  max-width:\n    540px;\n\n  margin:\n\n    clamp(22px, 2vw, 28px)\n\n    0\n\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    12px;\n\n  font-weight:\n    400;\n\n  line-height:\n    1.65;\n\n  color:\n    rgba(140,148,156,0.62);\n}\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1000px) {\n\n  .np-baseline__inner {\n    padding:\n\n      120px\n\n      28px\n\n      145px;\n\n    grid-template-columns:\n      1fr;\n\n    gap:\n      90px;\n  }\n\n\n  .np-baseline__intro {\n    max-width:\n      720px;\n  }\n\n\n  .np-baseline__result {\n    max-width:\n      760px;\n\n    margin:\n      0;\n  }\n\n}\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-baseline {\n    scroll-margin-top:\n      148px;\n  }\n\n\n  .np-baseline__inner {\n    padding:\n\n      92px\n\n      20px\n\n      110px;\n\n    gap:\n      68px;\n  }\n\n\n  .np-baseline__eyebrow {\n    margin-bottom:\n      24px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-baseline__product-row {\n    margin-bottom:\n      20px;\n\n    gap:\n      10px;\n  }\n\n\n  .np-baseline__product {\n    font-size:\n      9px;\n  }\n\n\n  .np-baseline__free {\n    min-height:\n      21px;\n\n    padding:\n\n      0\n\n      7px;\n\n    font-size:\n      8.5px;\n  }\n\n\n  .np-baseline__headline {\n    font-size:\n      clamp(42px, 11.5vw, 58px);\n\n    line-height:\n      0.93;\n  }\n\n\n  .np-baseline__copy {\n    max-width:\n      390px;\n\n    margin-top:\n      28px;\n\n    font-size:\n      14px;\n  }\n\n\n  .np-baseline__meta {\n    margin-top:\n      26px;\n\n    font-size:\n      9px;\n  }\n\n\n  \/* =======================================================\n     MOBILE RESULT PANEL\n  ======================================================== *\/\n\n  .np-baseline__result {\n    max-width:\n      none;\n\n    padding:\n\n      28px\n\n      20px\n\n      30px;\n  }\n\n\n  .np-baseline__result-head {\n    padding-bottom:\n      30px;\n  }\n\n\n  .np-baseline__result-label {\n    margin-bottom:\n      19px;\n\n    gap:\n      8px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-baseline__result-label::before {\n    width:\n      3px;\n\n    height:\n      3px;\n\n    flex-basis:\n      3px;\n  }\n\n\n  .np-baseline__result-head h3 {\n    font-size:\n      clamp(27px, 7.6vw, 36px);\n  }\n\n\n  .np-baseline__outcome {\n    min-height:\n      0;\n\n    padding:\n\n      25px\n\n      0;\n\n    grid-template-columns:\n      35px\n      1fr;\n\n    gap:\n      15px;\n  }\n\n\n  .np-baseline__outcome-number {\n    font-size:\n      9px;\n  }\n\n\n  .np-baseline__outcome-content strong {\n    font-size:\n      18px;\n  }\n\n\n  .np-baseline__outcome-content span {\n    margin-top:\n      7px;\n\n    font-size:\n      13px;\n  }\n\n\n  .np-baseline__cta {\n    min-height:\n      72px;\n\n    margin-top:\n      38px;\n\n    padding:\n\n      0\n\n      20px;\n\n    font-size:\n      10.5px;\n  }\n\n\n  .np-baseline__note {\n    margin-top:\n      19px;\n\n    font-size:\n      11px;\n  }\n\n}\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-baseline__headline {\n    font-size:\n      clamp(39px, 11vw, 50px);\n  }\n\n\n  .np-baseline__result-head h3 {\n    font-size:\n      clamp(25px, 7.2vw, 32px);\n  }\n\n\n  .np-baseline__outcome-content strong {\n    font-size:\n      17px;\n  }\n\n\n  .np-baseline__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-baseline__product {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-baseline__free {\n    font-size:\n      8px;\n  }\n\n\n  .np-baseline__meta {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-baseline__result-label {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-baseline__cta {\n    font-size:\n      10px;\n  }\n\n}\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-baseline__cta,\n  .np-baseline__arrow {\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-16d1b21 e-con e-atomic-element e-flexbox-base e-default-div e-ecd8f88 \" data-id=\"16d1b21\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"16d1b21\" data-e-type=\"e-flexbox\" data-id=\"16d1b21\">\n    \t\t<div class=\"elementor-element elementor-element-c714c9a elementor-widget elementor-widget-html\" data-id=\"c714c9a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 10 \u2014 NEXT STEP \/ BUILD\n     THE PERFORMANCE FOUNDATION\n     IMAGE-FREE EDITORIAL SYSTEM\n========================================================= -->\n\n<section class=\"np-program\" id=\"program\" aria-labelledby=\"np-program-title\">\n\n  <div class=\"np-program__inner\">\n\n\n    <!-- =====================================================\n         LEFT \u2014 POSITIONING\n    ====================================================== -->\n\n    <div class=\"np-program__intro\">\n\n      <div class=\"np-program__intro-line\">\n\n\n        <!-- EYEBROW -->\n\n        <div class=\"np-program__eyebrow\">\n N\u00c4CHSTER SCHRITT \/ NACH DEINER BASELINE \/ 10\n        <\/div>\n\n\n\n        <!-- HEADLINE -->\n\n        <h2 class=\"np-program__headline\" id=\"np-program-title\">\n\n           <span>\nERG\u00c4NZE,\n<\/span>\n\n<span class=\"np-program__outline\">\nWAS NOCH FEHLT.\n<\/span> \n\n        <\/h2>\n\n\n\n        <!-- STATEMENT -->\n\n        <div class=\"np-program__statement\">\n\n           <strong>\nDeine Baseline zeigt dir, wo du ansetzen solltest.\n<\/strong>\n\n\n<span>The Performance Foundation hilft dir,<br\/>genau dort weiterzubauen \u2013 und den richtigen Schwerpunkt<br\/>konsequent in die Praxis umzusetzen.\n<\/span> \n\n        <\/div>\n\n\n      <\/div>\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         RIGHT \u2014 PRODUCT\n    ====================================================== -->\n\n    <div class=\"np-program__content\">\n\n      <div class=\"np-program__product\">\n\n\n        <!-- =================================================\n             PRODUCT TOP\n        ================================================== -->\n\n        <div class=\"np-program__product-top\">\n\n           <span class=\"np-program__product-label\">\nSCHRITT 02 \/ AUFBAU\n<\/span>\n\n<span class=\"np-program__product-meta\">\nDIGITALES PROGRAMM \/ $29\n<\/span> \n\n        <\/div>\n\n\n\n        <!-- =================================================\n             PRODUCT TITLE\n        ================================================== -->\n\n        <h3 class=\"np-program__product-title\">\n\n           <span>\nTHE PERFORMANCE\n<\/span>\n\n<span>\nFOUNDATION\n<\/span> \n\n        <\/h3>\n\n\n\n        <!-- =================================================\n             PRODUCT COPY\n        ================================================== -->\n\n        <p class=\"np-program__product-copy\">\n Ein strukturiertes Performance-System, das direkt\nauf deiner Baseline aufbaut. Du startest mit dem Bereich,\nder deine Leistung aktuell am st\u00e4rksten begrenzt \u2013\nund entwickelst Schritt f\u00fcr Schritt die Gewohnheiten,\nStandards und Grundlagen f\u00fcr nachhaltigen Fortschritt. \n        <\/p>\n\n\n\n        <!-- =================================================\n             SYSTEM\n        ================================================== -->\n\n        <div class=\"np-program__system\">\n\n\n          <!-- 01 -->\n\n          <div class=\"np-program__step\">\n\n            <span class=\"np-program__step-number\">\n  01\n            <\/span>\n\n            <div class=\"np-program__step-content\">\n\n               <strong>\nSTARTE DORT, WO ES Z\u00c4HLT\n<\/strong>\n\n<span>\nBeginne mit der Grundlage, die f\u00fcr deine aktuelle\nPerformance den gr\u00f6\u00dften Unterschied macht.\n<\/span> \n\n            <\/div>\n\n          <\/div>\n\n\n\n          <!-- 02 -->\n\n          <div class=\"np-program__step\">\n\n            <span class=\"np-program__step-number\">\n  02\n            <\/span>\n\n            <div class=\"np-program__step-content\">\n\n               <strong>\nBAUE DIE GRUNDLAGEN AUF\n<\/strong>\n\n<span>\nEntwickle die Struktur, Gewohnheiten und Standards,\ndie nachhaltigen Fortschritt m\u00f6glich machen.\n<\/span> \n\n            <\/div>\n\n          <\/div>\n\n\n\n          <!-- 03 -->\n\n          <div class=\"np-program__step\">\n\n            <span class=\"np-program__step-number\">\n  03\n            <\/span>\n\n            <div class=\"np-program__step-content\">\n\n               <strong>\nVON DER ERKENNTNIS ZUR UMSETZUNG\n<\/strong>\n\n\n<span>Bleib nicht bei der Erkenntnis stehen.<br\/>Setze gezielt das um, was jetzt Priorit\u00e4t hat.\n<\/span> \n\n            <\/div>\n\n          <\/div>\n\n\n        <\/div>\n\n\n\n        <!-- =================================================\n             PRODUCT FOOT\n        ================================================== -->\n\n        <div class=\"np-program__product-foot\">\n\n\n          <!-- PRICE -->\n\n          <div class=\"np-program__price\">\n\n             <span class=\"np-program__price-label\">\nEINMALZAHLUNG\n<\/span>\n\n<strong>\n$29\n<\/strong> \n\n          <\/div>\n\n\n\n          <!-- CTA -->\n\n          <a class=\"np-program__cta\" href=\"\/performance-foundation\/\">\n\n            <span>\n BAUE DEINE GRUNDLAGE AUF\n            <\/span>\n\n            <span class=\"np-program__arrow\" aria-hidden=\"true\"><\/span>\n\n          <\/a>\n\n\n        <\/div>\n\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-program,\n.np-program * {\n  box-sizing:\n    border-box;\n}\n\n\n.np-program {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position:\n    relative;\n\n  width:\n    100vw;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  overflow:\n    hidden;\n\n  color:\n    var(--white);\n\n  isolation:\n    isolate;\n\n  background:\n\n    radial-gradient(\n      ellipse 72% 62% at 7% 37%,\n\n      rgba(65,105,255,0.052) 0%,\n      rgba(65,105,255,0.026) 28%,\n      rgba(65,105,255,0.010) 48%,\n      rgba(65,105,255,0.000) 72%\n    ),\n\n    linear-gradient(\n      180deg,\n\n      #080A0C 0%,\n      #090B0E 47%,\n      #080A0C 100%\n    );\n}\n\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-program__inner {\n  position:\n    relative;\n\n  z-index:\n    2;\n\n  width:\n    min(100%, 1500px);\n\n  min-height:\n    100vh;\n\n  min-height:\n    100svh;\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(155px, 10vw, 200px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(160px, 11vw, 215px);\n\n  display:\n    grid;\n\n  grid-template-columns:\n    minmax(0, 0.92fr)\n    minmax(0, 1.08fr);\n\n  gap:\n    clamp(90px, 8vw, 145px);\n\n  align-items:\n    center;\n}\n\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.np-program__intro {\n  width:\n    100%;\n\n  max-width:\n    680px;\n}\n\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.np-program__intro-line {\n  position:\n    relative;\n}\n\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.np-program__eyebrow {\n  margin-bottom:\n    clamp(34px, 3vw, 46px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.74);\n\n  text-transform:\n    uppercase;\n}\n\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-program__headline {\n  width:\n    100%;\n\n  max-width:\n    760px;\n\n  margin:\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(64px, 6vw, 106px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.90;\n\n  letter-spacing:\n    -0.052em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-program__headline > span {\n  display:\n    block;\n}\n\n\n\n\/* =========================================================\n   OUTLINE\n========================================================= *\/\n\n.np-program__outline {\n  margin-top:\n    0.055em;\n\n  color:\n    transparent;\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.56);\n}\n\n\n\n\/* =========================================================\n   STATEMENT\n========================================================= *\/\n\n.np-program__statement {\n  width:\n    min(100%, 555px);\n\n  margin-top:\n    clamp(42px, 4vw, 56px);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(17px, 1.2vw, 20px);\n\n  line-height:\n    1.55;\n}\n\n\n.np-program__statement strong,\n.np-program__statement span {\n  display:\n    block;\n}\n\n\n.np-program__statement strong {\n  font-weight:\n    600;\n\n  color:\n    rgba(242,241,237,0.95);\n}\n\n\n.np-program__statement span {\n  max-width:\n    535px;\n\n  margin-top:\n    6px;\n\n  font-weight:\n    500;\n\n  color:\n    rgba(242,241,237,0.49);\n}\n\n\n\n\/* =========================================================\n   RIGHT CONTENT\n========================================================= *\/\n\n.np-program__content {\n  width:\n    100%;\n\n  max-width:\n    710px;\n\n  margin-left:\n    auto;\n}\n\n\n\n\/* =========================================================\n   PRODUCT\n========================================================= *\/\n\n.np-program__product {\n  width:\n    100%;\n}\n\n\n\n\/* =========================================================\n   PRODUCT TOP\n   CLEAN \u2014 NO TOP \/ BOTTOM DIVIDERS\n========================================================= *\/\n\n.np-program__product-top {\n  width:\n    100%;\n\n  padding:\n\n    24px\n\n    0\n\n    clamp(27px, 2.5vw, 34px);\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    space-between;\n\n  gap:\n    24px;\n}\n\n\n\n\/* =========================================================\n   PRODUCT MICROCOPY\n========================================================= *\/\n\n.np-program__product-label,\n.np-program__product-meta {\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.14em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-program__product-label {\n  color:\n    rgba(242,241,237,0.76);\n}\n\n\n.np-program__product-meta {\n  color:\n    rgba(140,148,156,0.60);\n}\n\n\n\n\/* =========================================================\n   PRODUCT TITLE\n========================================================= *\/\n\n.np-program__product-title {\n  margin:\n\n    clamp(36px, 3.2vw, 46px)\n\n    0\n\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(40px, 3.5vw, 58px);\n\n  font-weight:\n    650;\n\n  line-height:\n    0.97;\n\n  letter-spacing:\n    -0.043em;\n\n  color:\n    rgba(242,241,237,0.95);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-program__product-title span {\n  display:\n    block;\n}\n\n\n\n\/* =========================================================\n   PRODUCT COPY\n========================================================= *\/\n\n.np-program__product-copy {\n  width:\n    min(100%, 555px);\n\n  margin:\n\n    clamp(28px, 2.5vw, 36px)\n\n    0\n\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 0.95vw, 16px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.72;\n\n  color:\n    rgba(242,241,237,0.47);\n}\n\n\n\n\/* =========================================================\n   SYSTEM\n========================================================= *\/\n\n.np-program__system {\n  width:\n    100%;\n\n  margin-top:\n    clamp(44px, 4vw, 58px);\n\n  border-top:\n    1px solid rgba(242,241,237,0.11);\n}\n\n\n\n\/* =========================================================\n   STEP\n========================================================= *\/\n\n.np-program__step {\n  width:\n    100%;\n\n  min-height:\n    102px;\n\n  padding:\n\n    clamp(24px, 2.3vw, 31px)\n\n    0;\n\n  display:\n    grid;\n\n  grid-template-columns:\n    44px\n    minmax(0, 1fr);\n\n  gap:\n    20px;\n\n  align-items:\n    start;\n\n  border-bottom:\n    1px solid rgba(242,241,237,0.11);\n}\n\n\n\n\/* =========================================================\n   STEP NUMBER\n========================================================= *\/\n\n.np-program__step-number {\n  padding-top:\n    3px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    rgba(140,148,156,0.50);\n}\n\n\n\n\/* =========================================================\n   STEP CONTENT\n========================================================= *\/\n\n.np-program__step-content strong,\n.np-program__step-content span {\n  display:\n    block;\n}\n\n\n.np-program__step-content strong {\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(17px, 1.3vw, 21px);\n\n  font-weight:\n    600;\n\n  line-height:\n    1.1;\n\n  letter-spacing:\n    -0.022em;\n\n  color:\n    rgba(242,241,237,0.91);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-program__step-content span {\n  max-width:\n    500px;\n\n  margin-top:\n    8px;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(12px, 0.9vw, 14px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.5;\n\n  color:\n    rgba(242,241,237,0.41);\n}\n\n\n\n\/* =========================================================\n   PRODUCT FOOT\n========================================================= *\/\n\n.np-program__product-foot {\n  width:\n    100%;\n\n  margin-top:\n    clamp(42px, 3.8vw, 56px);\n\n  display:\n    flex;\n\n  align-items:\n    flex-end;\n\n  justify-content:\n    space-between;\n\n  gap:\n    32px;\n}\n\n\n\n\/* =========================================================\n   PRICE\n========================================================= *\/\n\n.np-program__price {\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  align-items:\n    flex-start;\n\n  gap:\n    8px;\n}\n\n\n.np-program__price-label {\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.14em;\n\n  color:\n    rgba(140,148,156,0.60);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-program__price strong {\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(31px, 2.6vw, 42px);\n\n  font-weight:\n    650;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    -0.04em;\n\n  color:\n    rgba(242,241,237,0.95);\n}\n\n\n\n\/* =========================================================\n   CTA\n========================================================= *\/\n\n.np-program__cta {\n  position:\n    relative;\n\n  min-height:\n    58px;\n\n  padding:\n    0 23px;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap:\n    24px;\n\n  border:\n    1px solid var(--blue);\n\n  background:\n    var(--blue);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    #FFFFFF;\n\n  text-decoration:\n    none;\n\n  text-transform:\n    uppercase;\n\n  transition:\n\n    background\n    0.25s\n    ease,\n\n    border-color\n    0.25s\n    ease,\n\n    color\n    0.25s\n    ease;\n}\n\n\n\n\/* =========================================================\n   CTA ARROW\n========================================================= *\/\n\n.np-program__arrow {\n  position:\n    relative;\n\n  width:\n    18px;\n\n  height:\n    10px;\n\n  flex:\n    0 0 18px;\n\n  transition:\n\n    transform\n    0.32s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n.np-program__arrow::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  left:\n    0;\n\n  top:\n    50%;\n\n  width:\n    16px;\n\n  height:\n    1px;\n\n  background:\n    #FFFFFF;\n\n  transform:\n    translateY(-50%);\n}\n\n\n.np-program__arrow::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  right:\n    0;\n\n  top:\n    50%;\n\n  width:\n    6px;\n\n  height:\n    6px;\n\n  border-top:\n    1px solid #FFFFFF;\n\n  border-right:\n    1px solid #FFFFFF;\n\n  transform:\n\n    translateY(-50%)\n\n    rotate(45deg);\n}\n\n\n\n\/* =========================================================\n   CTA HOVER\n========================================================= *\/\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-program__cta:hover {\n    background:\n      #5A7CFF;\n\n    border-color:\n      #5A7CFF;\n\n    color:\n      #FFFFFF;\n  }\n\n\n  .np-program__cta:hover\n  .np-program__arrow {\n    transform:\n      translateX(4px);\n  }\n\n}\n\n\n\n\/* =========================================================\n   FOCUS\n========================================================= *\/\n\n.np-program__cta:focus-visible {\n  outline:\n    2px solid rgba(90,124,255,0.92);\n\n  outline-offset:\n    5px;\n}\n\n\n\n\/* =========================================================\n   LARGE \/ MEDIUM DESKTOP\n========================================================= *\/\n\n@media (max-width: 1200px) {\n\n  .np-program__inner {\n    grid-template-columns:\n      minmax(0, 0.90fr)\n      minmax(0, 1.10fr);\n\n    gap:\n      72px;\n  }\n\n\n  .np-program__headline {\n    font-size:\n      clamp(56px, 5.7vw, 88px);\n  }\n\n\n  .np-program__product-title {\n    font-size:\n      clamp(38px, 3.4vw, 52px);\n  }\n\n}\n\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1000px) {\n\n  .np-program {\n    background:\n\n      radial-gradient(\n        ellipse 92% 48% at 12% 18%,\n\n        rgba(65,105,255,0.048) 0%,\n        rgba(65,105,255,0.020) 34%,\n        rgba(65,105,255,0.000) 74%\n      ),\n\n      linear-gradient(\n        180deg,\n\n        #080A0C 0%,\n        #090B0E 46%,\n        #080A0C 100%\n      );\n  }\n\n\n  .np-program__inner {\n    min-height:\n      0;\n\n    padding:\n\n      120px\n\n      28px\n\n      145px;\n\n    grid-template-columns:\n      1fr;\n\n    gap:\n      92px;\n  }\n\n\n  .np-program__intro {\n    max-width:\n      720px;\n  }\n\n\n  .np-program__headline {\n    max-width:\n      760px;\n\n    font-size:\n      clamp(52px, 8vw, 78px);\n  }\n\n\n  .np-program__statement {\n    max-width:\n      590px;\n  }\n\n\n  .np-program__content {\n    max-width:\n      760px;\n\n    margin:\n      0;\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n   SEAMLESS \/ NO VISIBLE SECTION EDGE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-program {\n    background:\n      #080A0C;\n  }\n\n\n  .np-program__inner {\n    padding:\n\n      92px\n\n      20px\n\n      110px;\n\n    gap:\n      72px;\n  }\n\n\n  .np-program__eyebrow {\n    margin-bottom:\n      26px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-program__headline {\n    font-size:\n      clamp(42px, 11.4vw, 58px);\n\n    line-height:\n      0.93;\n  }\n\n\n  .np-program__statement {\n    margin-top:\n      32px;\n\n    font-size:\n      16px;\n  }\n\n\n  .np-program__product-top {\n    padding:\n\n      22px\n\n      0\n\n      24px;\n\n    align-items:\n      flex-start;\n\n    flex-direction:\n      column;\n\n    gap:\n      9px;\n  }\n\n\n  .np-program__product-label,\n  .np-program__product-meta {\n    font-size:\n      9px;\n  }\n\n\n  .np-program__product-title {\n    margin-top:\n      30px;\n\n    font-size:\n      clamp(32px, 8.8vw, 44px);\n  }\n\n\n  .np-program__product-copy {\n    margin-top:\n      22px;\n\n    font-size:\n      14px;\n  }\n\n\n  .np-program__system {\n    margin-top:\n      38px;\n  }\n\n\n  .np-program__step {\n    min-height:\n      0;\n\n    padding:\n      24px 0;\n\n    grid-template-columns:\n      34px\n      minmax(0, 1fr);\n\n    gap:\n      14px;\n  }\n\n\n  .np-program__step-number {\n    font-size:\n      9px;\n  }\n\n\n  .np-program__step-content strong {\n    font-size:\n      17px;\n  }\n\n\n  .np-program__step-content span {\n    font-size:\n      13px;\n  }\n\n\n  .np-program__product-foot {\n    margin-top:\n      36px;\n\n    flex-direction:\n      column;\n\n    align-items:\n      stretch;\n\n    gap:\n      28px;\n  }\n\n\n  .np-program__price-label {\n    font-size:\n      9px;\n  }\n\n\n  .np-program__price strong {\n    font-size:\n      34px;\n  }\n\n\n  .np-program__cta {\n    width:\n      100%;\n\n    min-height:\n      62px;\n\n    justify-content:\n      space-between;\n\n    padding:\n      0 20px;\n\n    font-size:\n      10.5px;\n  }\n\n}\n\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-program__headline {\n    font-size:\n      clamp(39px, 11vw, 50px);\n  }\n\n\n  .np-program__product-title {\n    font-size:\n      clamp(30px, 8.5vw, 40px);\n  }\n\n\n  .np-program__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-program__product-label,\n  .np-program__product-meta {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-program__step-number {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-program__price-label {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-program__cta {\n    font-size:\n      10px;\n  }\n\n}\n\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-program__cta,\n  .np-program__arrow {\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-edb108a e-con e-atomic-element e-flexbox-base e-default-div e-a926a32 \" data-id=\"edb108a\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"edb108a\" data-e-type=\"e-flexbox\" data-id=\"edb108a\">\n    \t\t<div class=\"elementor-element elementor-element-0343fee elementor-widget elementor-widget-html\" data-id=\"0343fee\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 11 \u2014 ABOUT\n     EDITORIAL \/ PERSONAL \/ QUIET CONFIDENCE\n========================================================= -->\n\n<section class=\"np-about\" id=\"about\" aria-labelledby=\"np-about-title\">\n\n  <div class=\"np-about__inner\">\n\n\n    <!-- =====================================================\n         TOP\n    ====================================================== -->\n\n    <div class=\"np-about__top\">\n\n\n      <!-- ===================================================\n           LEFT \/ MAIN STATEMENT\n      ==================================================== -->\n\n      <div class=\"np-about__intro\">\n\n\n        <!-- EYEBROW -->\n\n        <div class=\"np-about__eyebrow\">\n \u00dcBER MICH \/ NORMAN PETERMANN \/ 11\n        <\/div>\n\n\n\n        <!-- HEADLINE -->\n\n        <h2 class=\"np-about__headline\" id=\"np-about-title\">\n\n           <span>\nGEFORMT DURCH\n<\/span>\n\n<span class=\"np-about__outline\">\nDIE ARBEIT.\n<\/span> \n\n        <\/h2>\n\n\n      <\/div>\n\n\n\n      <!-- ===================================================\n           RIGHT \/ ABOUT COPY\n      ==================================================== -->\n\n      <div class=\"np-about__copy-block\">\n\n\n        <div class=\"np-about__label\">\n DER MENSCH HINTER DEM SYSTEM\n        <\/div>\n\n\n        <p class=\"np-about__lead\">\n Ich glaube, dass echte Performance durch Best\u00e4ndigkeit,\nStruktur und Standards entsteht, die auch dann tragen,<br\/>wenn die Motivation nachl\u00e4sst.\n        <\/p>\n\n\n        <p class=\"np-about__copy\">\n Mein Ansatz basiert auf eigener Erfahrung \u2013 auf Training,\nTesten und Anpassen, bis sich zeigt, was langfristig wirklich funktioniert.<br\/>Dabei geht es nicht nur ums Laufen. Krafttraining, Regeneration,\nErn\u00e4hrung, Disziplin und Mindset geh\u00f6ren genauso dazu.  \n        <\/p>\n\n\n        <p class=\"np-about__copy\">\n Das Ziel ist nicht Perfektion. Es geht darum,\nein System zu schaffen, das dich dauerhaft voranbringt. \n        <\/p>\n\n\n\n        <!-- =================================================\n             SIGNATURE\n        ================================================== -->\n\n        <div class=\"np-about__signature\">\n\n          <img loading=\"lazy\" src=\"https:\/\/normanpetermann.com\/wp-content\/uploads\/2026\/09\/norman-petermann-signature.png\" alt=\"Unterschrift von Norman Petermann\" width=\"2172\" height=\"724\" loading=\"lazy\" decoding=\"async\">\n\n        <\/div>\n\n\n\n        <!-- LINK -->\n\n        <a class=\"np-about__link\" href=\"\/about\/\">\n\n          <span>\n MEHR \u00dcBER MICH\n          <\/span>\n\n          <span class=\"np-about__arrow\" aria-hidden=\"true\"><\/span>\n\n        <\/a>\n\n\n      <\/div>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         BOTTOM NAME\n    ====================================================== -->\n\n    <div class=\"np-about__name\" aria-hidden=\"true\">\n\n       <span>\nNORMAN\n<\/span>\n\n<span>\nPETERMANN\n<\/span> \n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-about,\n.np-about * {\n  box-sizing:\n    border-box;\n}\n\n\n.np-about {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position:\n    relative;\n\n  width:\n    100vw;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  overflow:\n    hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n}\n\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-about__inner {\n  position:\n    relative;\n\n  width:\n    min(100%, 1600px);\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(145px, 10vw, 190px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(70px, 5vw, 90px);\n}\n\n\n\n\/* =========================================================\n   TOP\n========================================================= *\/\n\n.np-about__top {\n  width:\n    100%;\n\n  display:\n    grid;\n\n  grid-template-columns:\n    minmax(0, 1.12fr)\n    minmax(340px, 0.72fr);\n\n  gap:\n    clamp(80px, 9vw, 160px);\n\n  align-items:\n    start;\n}\n\n\n\n\/* =========================================================\n   INTRO\n========================================================= *\/\n\n.np-about__intro {\n  width:\n    100%;\n}\n\n\n\n\/* =========================================================\n   EYEBROW\n========================================================= *\/\n\n.np-about__eyebrow {\n  margin-bottom:\n    clamp(34px, 3vw, 46px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.72);\n\n  text-transform:\n    uppercase;\n}\n\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-about__headline {\n  margin:\n    0;\n\n  max-width:\n    880px;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(68px, 7.5vw, 132px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.87;\n\n  letter-spacing:\n    -0.055em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-about__headline > span {\n  display:\n    block;\n}\n\n\n\n\/* =========================================================\n   OUTLINE\n========================================================= *\/\n\n.np-about__outline {\n  margin-top:\n    0.055em;\n\n  color:\n    transparent;\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.54);\n}\n\n\n\n\/* =========================================================\n   COPY BLOCK\n========================================================= *\/\n\n.np-about__copy-block {\n  width:\n    100%;\n\n  max-width:\n    520px;\n\n  margin-top:\n    clamp(78px, 8vw, 125px);\n}\n\n\n\n\/* =========================================================\n   COPY LABEL\n   LARGER FOR READABILITY\n========================================================= *\/\n\n.np-about__label {\n  margin-bottom:\n    clamp(28px, 2.4vw, 36px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.14em;\n\n  color:\n    rgba(140,148,156,0.58);\n\n  text-transform:\n    uppercase;\n}\n\n\n\n\/* =========================================================\n   LEAD\n========================================================= *\/\n\n.np-about__lead {\n  margin:\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(20px, 1.55vw, 26px);\n\n  font-weight:\n    500;\n\n  line-height:\n    1.48;\n\n  letter-spacing:\n    -0.02em;\n\n  color:\n    rgba(242,241,237,0.92);\n}\n\n\n\n\/* =========================================================\n   BODY COPY\n========================================================= *\/\n\n.np-about__copy {\n  margin:\n\n    clamp(28px, 2.6vw, 36px)\n\n    0\n\n    0;\n\n  max-width:\n    480px;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 0.95vw, 16px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.78;\n\n  color:\n    rgba(242,241,237,0.48);\n}\n\n\n\n\/* =========================================================\n   SIGNATURE\n========================================================= *\/\n\n.np-about__signature {\n  width:\n    clamp(220px, 17vw, 300px);\n\n  margin-top:\n    clamp(30px, 2.8vw, 40px);\n\n  line-height:\n    0;\n\n  user-select:\n    none;\n\n  pointer-events:\n    none;\n}\n\n\n.np-about__signature img {\n  display:\n    block;\n\n  width:\n    100%;\n\n  height:\n    auto;\n\n  max-width:\n    none;\n\n  opacity:\n    0.84;\n\n  user-select:\n    none;\n}\n\n\n\n\/* =========================================================\n   LINK\n   LARGER FOR READABILITY\n========================================================= *\/\n\n.np-about__link {\n  position:\n    relative;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  gap:\n    14px;\n\n  margin-top:\n    clamp(34px, 3vw, 42px);\n\n  padding-bottom:\n    8px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  color:\n    rgba(242,241,237,0.82);\n\n  text-decoration:\n    none;\n\n  text-transform:\n    uppercase;\n\n  transition:\n    color 0.25s ease;\n}\n\n\n\n\/* =========================================================\n   LINK UNDERLINE\n========================================================= *\/\n\n.np-about__link::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  left:\n    0;\n\n  bottom:\n    0;\n\n  width:\n    100%;\n\n  height:\n    1px;\n\n  background:\n    rgba(242,241,237,0.20);\n\n  transition:\n    background 0.25s ease;\n}\n\n\n\n\/* =========================================================\n   CSS ARROW\n========================================================= *\/\n\n.np-about__arrow {\n  position:\n    relative;\n\n  width:\n    17px;\n\n  height:\n    10px;\n\n  flex:\n    0 0 17px;\n\n  transition:\n\n    transform\n    0.32s\n    cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n\n.np-about__arrow::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  left:\n    0;\n\n  top:\n    50%;\n\n  width:\n    15px;\n\n  height:\n    1px;\n\n  background:\n    var(--blue);\n\n  transform:\n    translateY(-50%);\n}\n\n\n.np-about__arrow::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  right:\n    0;\n\n  top:\n    50%;\n\n  width:\n    6px;\n\n  height:\n    6px;\n\n  border-top:\n    1px solid var(--blue);\n\n  border-right:\n    1px solid var(--blue);\n\n  transform:\n\n    translateY(-50%)\n\n    rotate(45deg);\n}\n\n\n\n\/* =========================================================\n   LINK HOVER\n========================================================= *\/\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-about__link:hover {\n    color:\n      var(--white);\n  }\n\n\n  .np-about__link:hover::after {\n    background:\n      rgba(242,241,237,0.46);\n  }\n\n\n  .np-about__link:hover\n  .np-about__arrow {\n    transform:\n      translateX(4px);\n  }\n\n}\n\n\n\n\/* =========================================================\n   FOCUS\n========================================================= *\/\n\n.np-about__link:focus-visible {\n  outline:\n    1px solid rgba(65,105,255,0.72);\n\n  outline-offset:\n    7px;\n}\n\n\n\n\/* =========================================================\n   LARGE NAME\n   DESKTOP UNCHANGED\n========================================================= *\/\n\n.np-about__name {\n  width:\n    100%;\n\n  margin-top:\n    clamp(120px, 11vw, 180px);\n\n  padding-top:\n    clamp(34px, 3vw, 46px);\n\n  border-top:\n    1px solid rgba(242,241,237,0.10);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(78px, 11.2vw, 190px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.76;\n\n  letter-spacing:\n    -0.065em;\n\n  color:\n    rgba(242,241,237,0.035);\n\n  text-transform:\n    uppercase;\n\n  white-space:\n    nowrap;\n\n  user-select:\n    none;\n\n  pointer-events:\n    none;\n}\n\n\n.np-about__name span {\n  display:\n    block;\n}\n\n\n.np-about__name span:last-child {\n  margin-left:\n    0.31em;\n}\n\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (max-width: 1000px) {\n\n  .np-about__inner {\n    padding:\n\n      120px\n\n      28px\n\n      72px;\n  }\n\n\n  .np-about__top {\n    grid-template-columns:\n      1fr;\n\n    gap:\n      0;\n  }\n\n\n  .np-about__headline {\n    max-width:\n      800px;\n\n    font-size:\n      clamp(62px, 9.5vw, 94px);\n  }\n\n\n  .np-about__copy-block {\n    max-width:\n      600px;\n\n    margin-top:\n      82px;\n  }\n\n\n  .np-about__signature {\n    width:\n      270px;\n  }\n\n\n  .np-about__name {\n    margin-top:\n      120px;\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-about__inner {\n    padding:\n\n      92px\n\n      20px\n\n      54px;\n  }\n\n\n  .np-about__eyebrow {\n    margin-bottom:\n      27px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-about__headline {\n    font-size:\n      clamp(44px, 13vw, 62px);\n\n    line-height:\n      0.91;\n  }\n\n\n  .np-about__copy-block {\n    margin-top:\n      64px;\n  }\n\n\n  \/* =======================================================\n     COPY LABEL\n     LARGER FOR READABILITY\n  ======================================================== *\/\n\n  .np-about__label {\n    margin-bottom:\n      25px;\n\n    font-size:\n      9.5px;\n  }\n\n\n  .np-about__lead {\n    font-size:\n      clamp(19px, 5.3vw, 23px);\n  }\n\n\n  .np-about__copy {\n    margin-top:\n      26px;\n\n    font-size:\n      14px;\n  }\n\n\n  .np-about__signature {\n    width:\n      min(68vw, 240px);\n\n    margin-top:\n      30px;\n  }\n\n\n  \/* =======================================================\n     LINK\n     LARGER FOR READABILITY\n  ======================================================== *\/\n\n  .np-about__link {\n    margin-top:\n      32px;\n\n    font-size:\n      9.5px;\n  }\n\n\n  \/* =======================================================\n     LARGE NAME\n     MOBILE OPTIMIZATION\n  ======================================================== *\/\n\n  .np-about__name {\n    margin-top:\n      90px;\n\n    padding-top:\n      28px;\n\n    font-size:\n      clamp(48px, 13.5vw, 66px);\n\n    line-height:\n      0.80;\n\n    letter-spacing:\n      -0.055em;\n\n    color:\n      rgba(242,241,237,0.055);\n  }\n\n\n  .np-about__name span:last-child {\n    margin-left:\n      0;\n  }\n\n}\n\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-about__headline {\n    font-size:\n      clamp(41px, 12.5vw, 54px);\n  }\n\n\n  .np-about__signature {\n    width:\n      min(72vw, 220px);\n  }\n\n\n  .np-about__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-about__label {\n    font-size:\n      9px;\n  }\n\n\n  .np-about__link {\n    font-size:\n      9px;\n  }\n\n\n  .np-about__name {\n    font-size:\n      clamp(44px, 13vw, 57px);\n  }\n\n}\n\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-about__link,\n  .np-about__link::after,\n  .np-about__arrow {\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-3cc5b68 e-con e-atomic-element e-flexbox-base e-default-div e-edeb546 \" data-id=\"3cc5b68\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3cc5b68\" data-e-type=\"e-flexbox\" data-id=\"3cc5b68\">\n    \t\t<div class=\"elementor-element elementor-element-0f6c4b6 elementor-widget elementor-widget-html\" data-id=\"0f6c4b6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =========================================================\n     NORMAN PETERMANN\n     SECTION 12 \u2014 FINAL CTA\n     CLEAR \/ QUIET \/ DECISIVE\n========================================================= -->\n\n<section class=\"np-final\" id=\"final\" aria-labelledby=\"np-final-title\">\n\n  <div class=\"np-final__inner\">\n\n\n    <!-- =====================================================\n         EYEBROW\n    ====================================================== -->\n\n    <div class=\"np-final__eyebrow\">\n DEIN N\u00c4CHSTER SCHRITT \/ 12\n    <\/div>\n\n\n\n    <!-- =====================================================\n         HEADLINE\n    ====================================================== -->\n\n    <h2 class=\"np-final__headline\" id=\"np-final-title\">\n\n       <span>\nJETZT\n<\/span>\n\n<span class=\"np-final__outline\">\nAUFBAUEN.\n<\/span> \n\n    <\/h2>\n\n\n\n    <!-- =====================================================\n         STATEMENT\n    ====================================================== -->\n\n    <div class=\"np-final__statement\">\n\n      <strong>\n Finde heraus, wo du stehst.\n      <\/strong>\n\n      <span>\n Dann baue gezielt das auf, was als N\u00e4chstes z\u00e4hlt.\n      <\/span>\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         COPY\n    ====================================================== -->\n\n    <p class=\"np-final__copy\">\n Starte mit deiner kostenlosen, personalisierten Performance Baseline\nund finde heraus, was dich bereits unterst\u00fctzt, was dich aktuell bremst\nund worauf du dich als N\u00e4chstes konzentrieren solltest.\n    <\/p>\n\n\n\n    <!-- =====================================================\n         META\n    ====================================================== -->\n\n    <div class=\"np-final__meta\">\n\n      <span>\n 5 MIN\n      <\/span>\n\n      <i aria-hidden=\"true\"><\/i>\n\n      <span>\n PERSONALISIERT\n      <\/span>\n\n      <i aria-hidden=\"true\"><\/i>\n\n      <span>\n KOSTENLOS\n      <\/span>\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         ACTIONS\n    ====================================================== -->\n\n    <div class=\"np-final__actions\">\n\n\n      <!-- PRIMARY -->\n\n      <a class=\"np-final__cta np-final__cta--primary\" href=\"https:\/\/normanpetermann.com\/de\/norman-petermann-performance-baseline\/\">\n\n        <span>\n KOSTENLOS STARTEN\n        <\/span>\n\n        <span class=\"np-final__arrow np-final__arrow--primary\" aria-hidden=\"true\"><\/span>\n\n      <\/a>\n\n\n\n      <!-- SECONDARY -->\n\n      <a class=\"np-final__cta np-final__cta--secondary\" href=\"\/#method\">\n\n        <span>\n METHODE ENTDECKEN\n        <\/span>\n\n        <span class=\"np-final__arrow\" aria-hidden=\"true\"><\/span>\n\n      <\/a>\n\n\n    <\/div>\n\n\n\n    <!-- =====================================================\n         CLOSING\n    ====================================================== -->\n\n    <div class=\"np-final__closing\">\n\n      <span class=\"np-final__closing-dot\"><\/span>\n\n      <span>\n RUNNING \u00b7 PERFORMANCE \u00b7 MINDSET\n      <\/span>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/section>\n\n\n\n<style>\n\n\/* =========================================================\n   BASE\n========================================================= *\/\n\n.np-final,\n.np-final * {\n  box-sizing:\n    border-box;\n}\n\n\n.np-final {\n  --black: #080A0C;\n  --white: #F2F1ED;\n  --grey: #8C949C;\n  --blue: #4169FF;\n\n  position:\n    relative;\n\n  width:\n    100vw;\n\n  margin-left:\n    calc(50% - 50vw);\n\n  min-height:\n    100vh;\n\n  min-height:\n    100svh;\n\n  overflow:\n    hidden;\n\n  background:\n    var(--black);\n\n  color:\n    var(--white);\n}\n\n\n\n\/* =========================================================\n   VERY SUBTLE SECTION SEPARATION\n========================================================= *\/\n\n.np-final::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  top:\n    0;\n\n  left:\n    50%;\n\n  width:\n    calc(100% - clamp(56px, 8.4vw, 136px));\n\n  height:\n    1px;\n\n  background:\n    rgba(242,241,237,0.10);\n\n  transform:\n    translateX(-50%);\n\n  pointer-events:\n    none;\n}\n\n\n\n\/* =========================================================\n   INNER\n========================================================= *\/\n\n.np-final__inner {\n  position:\n    relative;\n\n  width:\n    min(100%, 1600px);\n\n  min-height:\n    100vh;\n\n  min-height:\n    100svh;\n\n  margin:\n    0 auto;\n\n  padding:\n\n    clamp(130px, 12vh, 190px)\n\n    clamp(28px, 4.2vw, 68px)\n\n    clamp(70px, 7vh, 105px);\n\n  display:\n    flex;\n\n  flex-direction:\n    column;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  text-align:\n    center;\n}\n\n\n\n\/* =========================================================\n   EYEBROW\n   LARGER FOR READABILITY\n========================================================= *\/\n\n.np-final__eyebrow {\n  margin-bottom:\n    clamp(36px, 3.2vw, 48px);\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.15em;\n\n  color:\n    rgba(140,148,156,0.68);\n\n  text-transform:\n    uppercase;\n}\n\n\n\n\/* =========================================================\n   HEADLINE\n========================================================= *\/\n\n.np-final__headline {\n  width:\n    100%;\n\n  max-width:\n    1200px;\n\n  margin:\n    0;\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(82px, 10.2vw, 178px);\n\n  font-weight:\n    800;\n\n  line-height:\n    0.80;\n\n  letter-spacing:\n    -0.065em;\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-final__headline > span {\n  display:\n    block;\n}\n\n\n\n\/* =========================================================\n   OUTLINE\n========================================================= *\/\n\n.np-final__outline {\n  margin-top:\n    0.06em;\n\n  color:\n    transparent;\n\n  -webkit-text-stroke:\n    1px rgba(242,241,237,0.54);\n}\n\n\n\n\/* =========================================================\n   STATEMENT\n========================================================= *\/\n\n.np-final__statement {\n  margin-top:\n    clamp(52px, 5vw, 72px);\n\n  font-family:\n    \"Archivo\",\n    sans-serif;\n\n  font-size:\n    clamp(19px, 1.4vw, 23px);\n\n  line-height:\n    1.5;\n}\n\n\n.np-final__statement strong,\n.np-final__statement span {\n  display:\n    block;\n}\n\n\n.np-final__statement strong {\n  font-weight:\n    600;\n\n  color:\n    rgba(242,241,237,0.94);\n}\n\n\n.np-final__statement span {\n  margin-top:\n    3px;\n\n  font-weight:\n    500;\n\n  color:\n    rgba(242,241,237,0.50);\n}\n\n\n\n\/* =========================================================\n   COPY\n========================================================= *\/\n\n.np-final__copy {\n  width:\n    min(100%, 560px);\n\n  margin:\n\n    clamp(25px, 2.5vw, 34px)\n\n    auto\n\n    0;\n\n  font-family:\n    \"Inter\",\n    sans-serif;\n\n  font-size:\n    clamp(14px, 0.95vw, 16px);\n\n  font-weight:\n    400;\n\n  line-height:\n    1.75;\n\n  color:\n    rgba(242,241,237,0.46);\n}\n\n\n\n\/* =========================================================\n   META\n   LARGER FOR READABILITY\n========================================================= *\/\n\n.np-final__meta {\n  margin-top:\n    clamp(30px, 2.8vw, 38px);\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  flex-wrap:\n    wrap;\n\n  gap:\n    12px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.13em;\n\n  color:\n    rgba(140,148,156,0.64);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-final__meta i {\n  display:\n    block;\n\n  width:\n    4px;\n\n  height:\n    4px;\n\n  border-radius:\n    50%;\n\n  background:\n    var(--blue);\n\n  opacity:\n    0.82;\n}\n\n\n\n\/* =========================================================\n   ACTIONS\n========================================================= *\/\n\n.np-final__actions {\n  margin-top:\n    clamp(48px, 4.5vw, 64px);\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap:\n    14px;\n\n  flex-wrap:\n    wrap;\n}\n\n\n\n\/* =========================================================\n   CTA BASE\n   LARGER FOR READABILITY\n========================================================= *\/\n\n.np-final__cta {\n  min-height:\n    62px;\n\n  padding:\n    0 25px;\n\n  display:\n    inline-flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap:\n    26px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    11px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.12em;\n\n  text-decoration:\n    none;\n\n  text-transform:\n    uppercase;\n\n  transition:\n\n    background\n    0.25s\n    ease,\n\n    border-color\n    0.25s\n    ease,\n\n    color\n    0.25s\n    ease;\n}\n\n\n\n\/* =========================================================\n   PRIMARY CTA\n   WHITE DEFAULT \/ COBALT HOVER\n========================================================= *\/\n\n.np-final__cta--primary {\n  min-width:\n    190px;\n\n  border:\n    1px solid var(--white);\n\n  background:\n    var(--white);\n\n  color:\n    var(--black);\n}\n\n\n\n\/* =========================================================\n   SECONDARY CTA\n========================================================= *\/\n\n.np-final__cta--secondary {\n  min-width:\n    220px;\n\n  border:\n    1px solid rgba(242,241,237,0.20);\n\n  background:\n    rgba(242,241,237,0.025);\n\n  color:\n    rgba(242,241,237,0.76);\n}\n\n\n\n\/* =========================================================\n   ARROW\n========================================================= *\/\n\n.np-final__arrow {\n  position:\n    relative;\n\n  width:\n    18px;\n\n  height:\n    10px;\n\n  flex:\n    0 0 18px;\n\n  color:\n    var(--blue);\n\n  transition:\n\n    transform\n    0.32s\n    cubic-bezier(0.22, 1, 0.36, 1),\n\n    color\n    0.25s\n    ease;\n}\n\n\n.np-final__arrow::before {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  left:\n    0;\n\n  top:\n    50%;\n\n  width:\n    16px;\n\n  height:\n    1px;\n\n  background:\n    currentColor;\n\n  transform:\n    translateY(-50%);\n}\n\n\n.np-final__arrow::after {\n  content:\n    \"\";\n\n  position:\n    absolute;\n\n  right:\n    0;\n\n  top:\n    50%;\n\n  width:\n    6px;\n\n  height:\n    6px;\n\n  border-top:\n    1px solid currentColor;\n\n  border-right:\n    1px solid currentColor;\n\n  transform:\n\n    translateY(-50%)\n\n    rotate(45deg);\n}\n\n\n\n\/* =========================================================\n   PRIMARY ARROW\n========================================================= *\/\n\n.np-final__arrow--primary {\n  color:\n    var(--blue);\n}\n\n\n\n\/* =========================================================\n   HOVER\n========================================================= *\/\n\n@media\n  (hover: hover)\n  and (pointer: fine) {\n\n  .np-final__cta--primary:hover {\n    background:\n      var(--blue);\n\n    border-color:\n      var(--blue);\n\n    color:\n      #FFFFFF;\n  }\n\n\n  .np-final__cta--primary:hover\n  .np-final__arrow--primary {\n    color:\n      #FFFFFF;\n  }\n\n\n  .np-final__cta--secondary:hover {\n    background:\n      rgba(242,241,237,0.07);\n\n    border-color:\n      rgba(242,241,237,0.42);\n\n    color:\n      var(--white);\n  }\n\n\n  .np-final__cta:hover\n  .np-final__arrow {\n    transform:\n      translateX(4px);\n  }\n\n}\n\n\n\n\/* =========================================================\n   FOCUS\n========================================================= *\/\n\n.np-final__cta:focus-visible {\n  outline:\n    1px solid rgba(65,105,255,0.76);\n\n  outline-offset:\n    6px;\n}\n\n\n\n\/* =========================================================\n   CLOSING\n   LARGER FOR READABILITY\n========================================================= *\/\n\n.np-final__closing {\n  position:\n    absolute;\n\n  left:\n    clamp(28px, 4.2vw, 68px);\n\n  right:\n    clamp(28px, 4.2vw, 68px);\n\n  bottom:\n    clamp(34px, 3vw, 48px);\n\n  display:\n    flex;\n\n  align-items:\n    center;\n\n  justify-content:\n    center;\n\n  gap:\n    10px;\n\n  font-family:\n    \"IBM Plex Mono\",\n    monospace;\n\n  font-size:\n    10px;\n\n  font-weight:\n    500;\n\n  line-height:\n    1;\n\n  letter-spacing:\n    0.14em;\n\n  color:\n    rgba(140,148,156,0.48);\n\n  text-transform:\n    uppercase;\n}\n\n\n.np-final__closing-dot {\n  width:\n    5px;\n\n  height:\n    5px;\n\n  border-radius:\n    50%;\n\n  background:\n    var(--blue);\n\n  opacity:\n    0.84;\n}\n\n\n\n\/* =========================================================\n   DESKTOP\n   MORE BREATHING ROOM AT THE BOTTOM\n========================================================= *\/\n\n@media (min-width: 1001px) {\n\n  .np-final__inner {\n    padding-bottom:\n      clamp(115px, 9vh, 145px);\n  }\n\n\n  .np-final__closing {\n    bottom:\n      clamp(44px, 3.5vw, 60px);\n  }\n\n}\n\n\n\n\/* =========================================================\n   TABLET\n========================================================= *\/\n\n@media (min-width: 768px) and (max-width: 1000px) {\n\n  .np-final__inner {\n    padding:\n\n      125px\n\n      28px\n\n      100px;\n  }\n\n\n  .np-final__headline {\n    font-size:\n      clamp(74px, 13vw, 124px);\n  }\n\n\n  .np-final__actions {\n    flex-wrap:\n      nowrap;\n  }\n\n}\n\n\n\n\/* =========================================================\n   MOBILE\n========================================================= *\/\n\n@media (max-width: 767px) {\n\n  .np-final {\n    min-height:\n      100svh;\n  }\n\n\n  .np-final::before {\n    width:\n      calc(100% - 40px);\n  }\n\n\n  .np-final__inner {\n    min-height:\n      100svh;\n\n    padding:\n\n      100px\n\n      20px\n\n      105px;\n  }\n\n\n  \/* =======================================================\n     EYEBROW\n     LARGER FOR READABILITY\n  ======================================================== *\/\n\n  .np-final__eyebrow {\n    margin-bottom:\n      30px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-final__headline {\n    font-size:\n      clamp(58px, 17vw, 82px);\n\n    line-height:\n      0.84;\n  }\n\n\n  .np-final__statement {\n    margin-top:\n      43px;\n\n    font-size:\n      18px;\n  }\n\n\n  .np-final__copy {\n    max-width:\n      390px;\n\n    margin-top:\n      23px;\n\n    font-size:\n      14px;\n  }\n\n\n  \/* =======================================================\n     META\n     LARGER FOR READABILITY\n  ======================================================== *\/\n\n  .np-final__meta {\n    margin-top:\n      27px;\n\n    gap:\n      9px;\n\n    font-size:\n      9px;\n  }\n\n\n  .np-final__meta i {\n    width:\n      3px;\n\n    height:\n      3px;\n  }\n\n\n  .np-final__actions {\n    width:\n      100%;\n\n    max-width:\n      390px;\n\n    margin-top:\n      42px;\n\n    flex-direction:\n      column;\n\n    align-items:\n      stretch;\n\n    gap:\n      12px;\n  }\n\n\n  \/* =======================================================\n     CTA\n     LARGER FOR READABILITY\n  ======================================================== *\/\n\n  .np-final__cta {\n    width:\n      100%;\n\n    min-width:\n      0;\n\n    min-height:\n      61px;\n\n    padding:\n      0 20px;\n\n    justify-content:\n      space-between;\n\n    font-size:\n      10.5px;\n  }\n\n\n  \/* =======================================================\n     CLOSING\n     LARGER FOR READABILITY\n  ======================================================== *\/\n\n  .np-final__closing {\n    left:\n      20px;\n\n    right:\n      20px;\n\n    bottom:\n      33px;\n\n    font-size:\n      9px;\n  }\n\n}\n\n\n\n\/* =========================================================\n   SMALL MOBILE\n========================================================= *\/\n\n@media (max-width: 420px) {\n\n  .np-final__headline {\n    font-size:\n      clamp(53px, 16vw, 70px);\n  }\n\n\n  .np-final__eyebrow {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-final__meta {\n    font-size:\n      8.5px;\n  }\n\n\n  .np-final__cta {\n    font-size:\n      10px;\n  }\n\n\n  .np-final__closing {\n    font-size:\n      8.5px;\n\n    letter-spacing:\n      0.11em;\n  }\n\n}\n\n\n\n\/* =========================================================\n   REDUCED MOTION\n========================================================= *\/\n\n@media (prefers-reduced-motion: reduce) {\n\n  .np-final__cta,\n  .np-final__arrow {\n    transition:\n      none;\n  }\n\n}\n\n<\/style>\t\t\t\t<\/div>\n\t\t\n<\/div>\n<div class=\"elementor-element elementor-element-13ea0ba e-con e-atomic-element e-flexbox-base e-default-div e-a0cba4f \" data-id=\"13ea0ba\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"13ea0ba\" data-e-type=\"e-flexbox\" data-id=\"13ea0ba\">\n    \n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>NORMAN PETERMANN GEFORMT DURCH KONSEQUENZ. RUNNING \u00b7 PERFORMANCE \u00b7 MINDSET KOSTENLOS STARTEN METHODE ENTDECKEN DIE METHODE \/ 02 PERFORMANCE IST KEIN MOMENT. SIE WIRD ERARBEITET. Konsequenz vor Intensit\u00e4t. Struktur vor Motivation. Performance entsteht nicht an einem perfekten Tag. Sie entsteht durch das, was du immer wieder tust. DAS SYSTEM \/ 03 DREI ELEMENTE. EIN SYSTEM. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-1254","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/pages\/1254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/comments?post=1254"}],"version-history":[{"count":33,"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/pages\/1254\/revisions"}],"predecessor-version":[{"id":1301,"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/pages\/1254\/revisions\/1301"}],"wp:attachment":[{"href":"https:\/\/normanpetermann.com\/de\/wp-json\/wp\/v2\/media?parent=1254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}