/* Mikroneedling (pid 15) – portiert aus microneedling/styles.css, gescoped auf .mn */
:root{
  --white: #ffffff;
  --ink: #2f2325;
  --taupe: #665253;
  --berry: #6e1d46;
  --berry-hover: #842a57;
  --berry-deep: #4d1733;
  --rose: #9c7c88;
  --brown: #c7aaa7;
  --blush: #f3e4de;
  --linen: #f3eeec;
  --veil: #faf7f8;
  --line: #e7d9d6;
  --display: "Corm", Georgia, serif;
  --body: "CeraPro", Arial, sans-serif;
  --head-height: 114px;
  --shell: 1160px;
  --page-pad: clamp(20px, 5vw, 68px);
  --section-space: clamp(88px, 9vw, 136px);
  --focus: 0 0 0 3px var(--white), 0 0 0 6px var(--berry);
}

*,
*::before,
*::after{
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-height) + 24px);
}

.mn{
  margin: 0;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.mn img,
.mn svg,
.mn video{
  display: block;
}

.mn img,
.mn video{
  max-width: 100%;
}

.mn a{
  color: inherit;
  touch-action: manipulation;
}

.mn a:focus-visible,
.mn button:focus-visible,
.mn summary:focus-visible{
  outline: none;
  box-shadow: var(--focus);
}

.mn h1,
.mn h2,
.mn h3,
.mn p,
.mn figure{
  margin-top: 0;
}

.mn h1,
.mn h2,
.mn h3{
  color: var(--ink);
  font-family: var(--display);
  font-weight: 400;
  text-wrap: balance;
}

.mn h2{
  margin-bottom: 26px;
  font-size: clamp(44px, 4.7vw, 68px);
  letter-spacing: -0.025em;
  line-height: 1.01;
}

.mn h3{
  margin-bottom: 10px;
  font-size: clamp(26px, 2.4vw, 34px);
  line-height: 1.08;
}

.mn p{
  color: var(--taupe);
  line-height: 1.72;
}

.mn strong{
  font-weight: 500;
}

.mn .content-shell{
  width: min(calc(100% - (2 * var(--page-pad))), var(--shell));
  margin-inline: auto;
}

.mn .section{
  padding-block: var(--section-space);
}

.mn .eyebrow{
  margin-bottom: 20px;
  color: var(--berry);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.24em;
  line-height: 1.55;
  text-transform: uppercase;
}

.mn .eyebrow--light{
  color: #efd8e2;
}

.mn .lead-copy{
  color: var(--ink);
  font-size: clamp(19px, 1.7vw, 22px);
  line-height: 1.58;
}

.mn .button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 53px;
  padding: 15px 25px;
  border: 1px solid var(--berry);
  background: transparent;
  color: var(--berry);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.13em;
  line-height: 1.45;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}

.mn .button--primary{
  background: var(--berry);
  color: var(--white);
}

.mn .button--primary:hover{
  border-color: var(--berry-hover);
  background: var(--berry-hover);
}

.mn .button--light{
  border-color: var(--white);
  background: var(--white);
  color: var(--berry);
}

.mn .button--light:hover{
  border-color: var(--blush);
  background: var(--blush);
}

.mn .button--ghost{
  border-color: rgba(255, 255, 255, 0.62);
  color: var(--white);
}

.mn .button--ghost:hover{
  border-color: var(--white);
  background: rgba(255, 255, 255, 0.1);
}

.mn .text-link{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding-block: 9px;
  border-bottom: 1px solid var(--line);
  color: var(--berry);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 180ms ease-out;
}

.mn .text-link:hover{
  border-color: var(--berry);
}

.mn .microneedling-hero{
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(460px, 0.97fr);
  min-height: min(790px, calc(100svh - var(--head-height)));
  background: var(--white);
}

.mn .microneedling-hero__copy{
  align-self: center;
  width: 100%;
  max-width: 700px;
  margin-left: auto;
  padding: clamp(64px, 7vw, 108px) clamp(34px, 5vw, 84px) clamp(64px, 7vw, 108px) var(--page-pad);
}

.mn .microneedling-hero__copy h1{
  margin-bottom: 31px;
  font-size: clamp(58px, 5.1vw, 82px);
  letter-spacing: -0.025em;
  line-height: 0.91;
}

.mn .microneedling-hero__copy h1 span,
.mn .microneedling-hero__copy h1 em{
  display: block;
}

.mn .microneedling-hero__copy h1 em{
  margin-top: 11px;
  color: var(--rose);
  font-weight: 400;
  line-height: 1.03;
}

.mn .microneedling-hero__lead{
  max-width: 53ch;
  margin-bottom: 31px;
}

.mn .microneedling-hero__lead p{
  margin: 0 0 0.9em;
  font-size: 18px;
  line-height: 1.65;
}

.mn .microneedling-hero__lead p:last-child{
  margin-bottom: 0;
}

.mn .microneedling-hero__actions{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 26px;
}

.mn .microneedling-hero__note{
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 30px 0 0;
  color: var(--taupe);
  font-size: 12px;
  line-height: 1.5;
}

.mn .microneedling-hero__note strong{
  color: var(--berry);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.mn .microneedling-hero__media{
  position: relative;
  min-height: 620px;
  overflow: hidden;
  background: #e9e7ed;
}

.mn .microneedling-hero__media::after{
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 28%), linear-gradient(0deg, rgba(47, 35, 37, 0.08), transparent 45%);
  content: "";
  pointer-events: none;
}

.mn .microneedling-hero__media > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% center;
}

.mn .microneedling-hero__caption{
  position: absolute;
  z-index: 2;
  right: clamp(22px, 3vw, 42px);
  bottom: clamp(22px, 3vw, 42px);
  display: grid;
  max-width: 360px;
  margin: 0;
  padding: 20px 24px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.mn .microneedling-hero__caption span{
  margin-bottom: 7px;
  color: var(--berry);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.mn .microneedling-hero__caption strong{
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.12;
}

.mn .hero-facts{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  padding-right: max(var(--page-pad), calc(50% - 720px));
  padding-left: max(var(--page-pad), calc(50% - 720px));
  border-block: 1px solid var(--line);
  background: var(--white);
}

.mn .hero-fact{
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 112px;
  padding: 22px clamp(20px, 2.2vw, 34px);
  border-right: 1px solid var(--line);
}

.mn .hero-fact:first-child{
  padding-left: 0;
}

.mn .hero-fact:last-child{
  padding-right: 0;
  border-right: 0;
}

.mn .hero-fact strong,
.mn .hero-fact span{
  display: block;
}

.mn .hero-fact--duration strong{
  flex: none;
  color: var(--berry);
  font-family: var(--display);
  font-size: clamp(36px, 3.3vw, 48px);
  font-weight: 500;
  line-height: 1;
}

.mn .hero-fact--duration span{
  max-width: 100px;
  color: var(--taupe);
  font-size: 12px;
  line-height: 1.4;
}

.mn .hero-fact--goal{
  display: block;
}

.mn .hero-fact--goal strong,
.mn .hero-fact--goal span{
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(20px, 2vw, 27px);
  font-weight: 400;
  line-height: 1.08;
}

.mn .video-story{
  background: var(--veil);
}

.mn .video-story__heading{
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 42px clamp(54px, 8vw, 112px);
  align-items: end;
}

.mn .video-story__heading h2{
  margin-bottom: 0;
}

.mn .video-story__heading h2 em{
  color: var(--rose);
  font-weight: 350;
}

.mn .video-story__heading > p{
  max-width: 500px;
  margin: 0;
  font-size: 18px;
}

.mn .video-story__media{
  position: relative;
  height: clamp(420px, 55vw, 720px);
  margin: clamp(48px, 6vw, 78px) 0 0;
  overflow: hidden;
  background: #d8d4d5;
}

.mn .video-story__video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.mn .video-story__veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(77, 23, 51, 0.09));
  pointer-events: none;
}

.mn .video-story__media .video-control{
  right: 24px;
  bottom: 24px;
}

.mn .intro-grid{
  display: grid;
  grid-template-areas:
    "heading"
    "device"
    "copy";
  grid-template-columns: 1fr;
}

.mn .intro-heading{
  grid-area: heading;
  max-width: 1120px;
}

.mn .intro-heading h2{
  max-width: 1060px;
}

.mn .intro-heading h2 em{
  color: var(--rose);
  font-weight: 350;
}

.mn .intro-copy{
  display: grid;
  grid-area: copy;
  grid-template-columns: 1.12fr 1fr 1fr;
  gap: clamp(30px, 4vw, 64px);
}

.mn .intro-copy p{
  margin: 0;
}

.mn .intro-device{
  position: relative;
  grid-area: device;
  width: 100%;
  height: clamp(205px, 20vw, 270px);
  margin: clamp(42px, 5vw, 70px) 0 clamp(46px, 5.5vw, 76px);
  overflow: hidden;
  border-block: 1px solid var(--line);
}

.mn .intro-device-visual{
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}

.mn .intro-device-visual::before{
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: var(--line);
  content: "";
  pointer-events: none;
}

.mn .intro-device-image{
  position: relative;
  z-index: 1;
  width: clamp(205px, 21vw, 280px);
  height: auto;
  padding-inline: 22px;
  background: var(--white);
  object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(47, 35, 37, 0.13));
  transform: rotate(90deg);
}

.mn .intro-certification-seal{
  width: clamp(132px, 12vw, 172px);
  margin-top: 34px;
}

.mn .intro-certification-seal img{
  width: 100%;
  height: auto;
  filter: drop-shadow(0 14px 24px rgba(47, 35, 37, 0.15));
}

.mn .mechanism-section{
  overflow: hidden;
  background: var(--berry-deep);
}

.mn .mechanism-intro{
  display: grid;
  grid-template-columns: 1fr 0.84fr;
  gap: 38px 90px;
  align-items: end;
}

.mn .mechanism-intro .eyebrow{
  grid-column: 1 / -1;
  margin-bottom: -12px;
}

.mn .mechanism-intro h2{
  margin-bottom: 0;
  color: var(--white);
}

.mn .mechanism-intro h2 em{
  color: var(--brown);
  font-weight: 350;
}

.mn .mechanism-intro > p:last-child{
  max-width: 520px;
  margin: 0;
  color: #eadfe3;
  font-size: 18px;
}

.mn .regeneration-track{
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: clamp(70px, 8vw, 104px) 0 0;
  padding: 0;
  list-style: none;
}

.mn .regeneration-track::before{
  position: absolute;
  top: 19px;
  right: 16%;
  left: 16%;
  height: 1px;
  background: rgba(255, 255, 255, 0.27);
  content: "";
}

.mn .regeneration-track li{
  position: relative;
  padding: 68px clamp(24px, 3.5vw, 52px) 10px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.mn .regeneration-track li:first-child{
  border-left: 0;
}

.mn .regeneration-track li::before{
  position: absolute;
  z-index: 1;
  top: 12px;
  left: 50%;
  width: 15px;
  height: 15px;
  border: 4px solid var(--berry-deep);
  border-radius: 50%;
  background: var(--brown);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.46);
  content: "";
  transform: translateX(-50%);
}

.mn .track-index{
  display: block;
  margin-bottom: 13px;
  color: var(--brown);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.mn .regeneration-track strong{
  display: block;
  margin-bottom: 14px;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(29px, 2.7vw, 39px);
  font-weight: 400;
  line-height: 1;
}

.mn .regeneration-track p{
  margin-bottom: 0;
  color: #e5d8de;
  font-size: 15px;
}

.mn .source-note{
  margin: 58px 0 0;
  padding-top: 23px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  color: #d7c5cc;
  font-size: 12px;
}

.mn .source-note a{
  color: var(--white);
  text-underline-offset: 4px;
}

.mn .suitability-section{
  background: var(--blush);
}

.mn .suitability-grid{
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(390px, 0.72fr);
  gap: clamp(70px, 10vw, 150px);
  align-items: center;
}

.mn .suitability-copy p:last-child{
  margin-bottom: 0;
}

.mn .skin-goals{
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(110, 29, 70, 0.22);
  list-style: none;
}

.mn .skin-goals li{
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 18px;
  align-items: center;
  min-height: 78px;
  border-bottom: 1px solid rgba(110, 29, 70, 0.22);
}

.mn .skin-goals span{
  color: var(--berry);
  font-size: 10px;
  letter-spacing: 0.18em;
}

.mn .skin-goals strong{
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(22px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.13;
}

.mn .process-section{
  background: var(--white);
}

.mn .section-intro--split{
  display: grid;
  grid-template-columns: 1.1fr 0.7fr;
  gap: clamp(55px, 9vw, 130px);
  align-items: end;
}

.mn .section-intro--split h2{
  margin-bottom: 0;
}

.mn .section-intro--split > p{
  margin: 0 0 6px;
  font-size: 18px;
}

.mn .process-list{
  margin: clamp(68px, 8vw, 104px) 0 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.mn .process-list li{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 18px;
  padding: 29px 0 30px;
  border-bottom: 1px solid var(--line);
}

.mn .process-list li > span{
  padding-top: 7px;
  color: var(--berry);
  font-size: 10px;
  letter-spacing: 0.2em;
}

.mn .process-list li > div{
  display: grid;
  grid-template-columns: minmax(250px, 0.75fr) minmax(300px, 1fr);
  gap: 50px;
  align-items: start;
}

.mn .process-list h3,
.mn .process-list p{
  margin: 0;
}

.mn .process-list p{
  padding-top: 4px;
}

.mn .formula-divider{
  padding-block: clamp(34px, 4vw, 54px);
  border-block: 1px solid rgba(110, 29, 70, 0.13);
  background: var(--blush);
}

.mn .formula-divider-products{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 3vw, 32px);
  width: min(100%, 940px);
  margin-inline: auto;
}

.mn .formula-divider-products figure{
  display: grid;
  place-items: center;
  overflow: hidden;
  min-width: 0;
  min-height: clamp(120px, 12vw, 164px);
  margin-bottom: 0;
  padding: 12px 18px;
  border: 1px solid rgba(110, 29, 70, 0.11);
  background: rgba(255, 255, 255, 0.72);
}

.mn .formula-divider-products img{
  width: 165%;
  max-width: none;
  height: clamp(84px, 8vw, 112px);
  object-fit: contain;
}

.mn .aftercare-section{
  background: var(--linen);
}

.mn .aftercare-grid{
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 65px clamp(65px, 9vw, 130px);
}

.mn .aftercare-heading > p:last-of-type{
  max-width: 520px;
  margin-bottom: 0;
}

.mn .aftercare-kit{
  margin: 48px 0 0;
  border: 1px solid var(--line);
  background: var(--white);
}

.mn .aftercare-kit-visual{
  position: relative;
  aspect-ratio: 1.08;
  overflow: hidden;
  background: var(--blush);
}

.mn .aftercare-kit-visual img{
  position: absolute;
  right: -5%;
  bottom: -8%;
  width: 110%;
  max-width: none;
  height: auto;
}

.mn .aftercare-kit figcaption{
  padding: 27px 29px 30px;
}

.mn .aftercare-kit figcaption > span{
  display: block;
  margin-bottom: 10px;
  color: var(--berry);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

.mn .aftercare-kit figcaption > strong{
  display: block;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(27px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.05;
}

.mn .aftercare-kit figcaption p{
  margin-bottom: 0;
  color: var(--taupe);
  font-size: 14px;
  line-height: 1.65;
}

.mn .aftercare-details{
  border-top: 1px solid var(--line);
}

.mn .aftercare-details article{
  padding: 31px 0 33px;
  border-bottom: 1px solid var(--line);
}

.mn .aftercare-details article > span{
  display: block;
  margin-bottom: 12px;
  color: var(--berry);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.mn .aftercare-details h3{
  font-size: clamp(28px, 2.5vw, 37px);
}

.mn .aftercare-details p{
  margin-bottom: 0;
}

.mn .reaction-note{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: 58px;
  align-items: center;
  margin-top: 13px;
  padding: clamp(36px, 5vw, 62px);
  background: var(--white);
}

.mn .reaction-note h3,
.mn .reaction-note p{
  margin-bottom: 0;
}

.mn .reaction-note > p{
  padding-left: 58px;
  border-left: 1px solid var(--line);
}

.mn .safety-section{
  background: var(--white);
}

.mn .safety-grid{
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: clamp(70px, 10vw, 145px);
}

.mn .safety-content ul{
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
  list-style: none;
}

.mn .safety-content li{
  position: relative;
  padding: 18px 12px 18px 34px;
  border-bottom: 1px solid var(--line);
  color: var(--taupe);
  line-height: 1.5;
}

.mn .safety-content li::before{
  position: absolute;
  top: 26px;
  left: 5px;
  width: 10px;
  height: 1px;
  background: var(--berry);
  content: "";
}

.mn .safety-note{
  margin: 25px 0 0;
  color: var(--rose);
  font-size: 13px;
  line-height: 1.6;
}

.mn .distance-note{
  margin: 26px 0 0;
  padding: 19px 21px;
  border-left: 2px solid var(--berry);
  background: var(--linen);
  color: var(--taupe);
  font-size: 14px;
  line-height: 1.62;
}

.mn .distance-note strong{
  color: var(--ink);
}

.mn .faq-section{
  background: var(--veil);
}

.mn .faq-grid{
  display: grid;
  grid-template-columns: 0.76fr 1.24fr;
  gap: clamp(70px, 10vw, 150px);
}

.mn .faq-heading{
  align-self: start;
  position: sticky;
  top: calc(var(--head-height) + 40px);
}

.mn .faq-list{
  border-top: 1px solid var(--line);
}

.mn .faq-list details{
  border-bottom: 1px solid var(--line);
}

.mn .faq-list summary{
  position: relative;
  padding: 27px 54px 27px 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(24px, 2.2vw, 31px);
  line-height: 1.16;
  list-style: none;
  cursor: pointer;
}

.mn .faq-list summary::-webkit-details-marker{
  display: none;
}

.mn .faq-list summary span,
.mn .faq-list summary span::after{
  position: absolute;
  top: 50%;
  right: 4px;
  width: 18px;
  height: 1px;
  background: var(--berry);
  content: "";
  transition: transform 180ms ease-out;
}

.mn .faq-list summary span::after{
  inset: 0;
  transform: rotate(90deg);
}

.mn .faq-list details[open] summary span::after{
  transform: rotate(0deg);
}

.mn .faq-list details > div{
  max-width: 690px;
  padding: 0 54px 28px 0;
}

.mn .faq-list details p{
  margin-bottom: 0;
}

.mn .decision-section{
  padding-block: clamp(88px, 9vw, 136px);
  background: var(--berry);
}

.mn .decision-grid{
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(65px, 10vw, 148px);
  align-items: start;
}

.mn .decision-section h2{
  margin-bottom: 0;
  color: var(--white);
}

.mn .decision-section h2 em{
  color: var(--brown);
  font-weight: 350;
}

.mn .decision-section p{
  color: #eadde3;
}

.mn .decision-lead{
  margin-bottom: 19px;
  color: var(--white) !important;
  font-family: var(--display);
  font-size: clamp(27px, 2.5vw, 36px);
  line-height: 1.22;
}

.mn .decision-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-top: 31px;
}

.mn .trust-line{
  margin: 26px 0 0;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
}

@media (max-width: 1040px) {
  :root{
    --head-height: 92px;
  }

  

  

  

  

  .mn .suitability-grid,
.mn .aftercare-grid,
.mn .safety-grid,
.mn .faq-grid,
.mn .decision-grid{
    gap: 64px;
  }

  .mn .microneedling-hero{
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.9fr);
  }

  .mn .microneedling-hero__copy h1{
    font-size: clamp(55px, 7vw, 77px);
  }

  .mn .hero-facts{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mn .hero-fact:nth-child(2){
    border-right: 0;
  }

  .mn .hero-fact:nth-child(-n + 2){
    border-bottom: 1px solid var(--line);
  }

  .mn .hero-fact:nth-child(3){
    padding-left: 0;
  }

  .mn .intro-copy{
    gap: 34px;
  }
}

@media (max-width: 860px) {
  

  

  

  

  

  .mn .microneedling-hero{
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .mn .microneedling-hero__copy{
    max-width: none;
    margin: 0;
    padding-right: var(--page-pad);
  }

  .mn .microneedling-hero__copy h1{
    max-width: 14ch;
    font-size: clamp(56px, 10vw, 82px);
  }

  .mn .microneedling-hero__media{
    min-height: 540px;
  }

  .mn .microneedling-hero__media > img{
    object-position: 40% center;
  }

  .mn .mechanism-intro,
.mn .suitability-grid,
.mn .section-intro--split,
.mn .aftercare-grid,
.mn .safety-grid,
.mn .faq-grid,
.mn .decision-grid{
    grid-template-columns: 1fr;
  }

  .mn .video-story__heading{
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .mn .intro-copy{
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .mn .intro-device{
    height: 220px;
  }

  .mn .mechanism-intro .eyebrow{
    grid-column: auto;
    margin-bottom: -4px;
  }

  .mn .mechanism-intro > p:last-child{
    max-width: 640px;
  }

  .mn .suitability-grid{
    gap: 48px;
  }

  .mn .section-intro--split{
    gap: 30px;
  }

  .mn .process-list li{
    grid-template-columns: 70px 1fr;
  }

  .mn .process-list li > div{
    grid-template-columns: 0.9fr 1.1fr;
    gap: 30px;
  }

  .mn .aftercare-grid,
.mn .safety-grid,
.mn .faq-grid,
.mn .decision-grid{
    gap: 48px;
  }

  .mn .reaction-note{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .mn .reaction-note > p{
    padding: 26px 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .mn .faq-heading{
    position: static;
  }

  

  

  
}

@media (max-width: 620px) {
  :root{
    --head-height: 81px;
    --section-space: 78px;
  }

  

  

  .mn .microneedling-hero__copy{
    padding-block: 56px 50px;
  }

  .mn .microneedling-hero__copy h1{
    font-size: clamp(50px, 15vw, 68px);
  }

  .mn .microneedling-hero__lead p{
    font-size: 17px;
  }

  .mn .microneedling-hero__actions{
    align-items: stretch;
    flex-direction: column;
  }

  .mn .microneedling-hero__actions .button,
.mn .microneedling-hero__actions .text-link{
    width: 100%;
  }

  .mn .microneedling-hero__actions .text-link{
    justify-content: space-between;
  }

  .mn .microneedling-hero__note{
    display: grid;
  }

  .mn .microneedling-hero__media{
    min-height: 420px;
  }

  .mn .microneedling-hero__media > img{
    object-position: 38% center;
  }

  .mn .microneedling-hero__caption{
    right: 16px;
    bottom: 16px;
    left: 16px;
    max-width: none;
    padding: 16px 18px;
  }

  .mn .hero-facts{
    grid-template-columns: 1fr;
  }

  .mn .hero-fact,
.mn .hero-fact:first-child,
.mn .hero-fact:nth-child(3),
.mn .hero-fact:last-child{
    min-height: 84px;
    padding: 17px 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .mn .hero-fact:last-child{
    border-bottom: 0;
  }

  .mn .hero-fact--duration strong{
    width: 84px;
    font-size: 38px;
  }

  

  .mn .video-story__media .video-control{
    right: 14px;
    bottom: 14px;
  }

  

  .mn .decision-actions{
    align-items: stretch;
    flex-direction: column;
  }

  .mn .decision-actions .button{
    width: 100%;
  }

  .mn .video-story__heading > p{
    font-size: 17px;
  }

  .mn .video-story__media{
    height: clamp(285px, 68vw, 390px);
    margin-top: 42px;
  }

  .mn .intro-device{
    height: 180px;
    margin-block: 38px 44px;
  }

  .mn .intro-device-image{
    width: 170px;
    padding-inline: 16px;
  }

  .mn .regeneration-track{
    grid-template-columns: 1fr;
    margin-top: 58px;
  }

  .mn .regeneration-track::before{
    top: 18px;
    bottom: 20px;
    left: 6px;
    width: 1px;
    height: auto;
  }

  .mn .regeneration-track li,
.mn .regeneration-track li:first-child{
    padding: 0 0 42px 48px;
    border-left: 0;
  }

  .mn .regeneration-track li::before{
    top: 2px;
    left: 6px;
  }

  .mn .regeneration-track li:last-child{
    padding-bottom: 0;
  }

  .mn .source-note{
    margin-top: 45px;
  }

  .mn .process-list li{
    grid-template-columns: 43px 1fr;
    gap: 8px;
  }

  .mn .process-list li > div{
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .mn .process-list p{
    padding-top: 0;
  }

  .mn .formula-divider{
    padding-block: 24px;
  }

  .mn .formula-divider-products{
    gap: 7px;
  }

  .mn .formula-divider-products figure{
    min-height: 84px;
    padding: 7px;
  }

  .mn .formula-divider-products img{
    width: 190%;
    height: 68px;
  }

  .mn .reaction-note{
    padding: 31px 25px;
  }

  .mn .faq-list summary{
    padding-right: 38px;
    font-size: 24px;
  }

  .mn .faq-list details > div{
    padding-right: 20px;
  }

  

  

  

  
}

@media (prefers-reduced-motion: reduce) {
  html{
    scroll-behavior: auto;
  }

  *,
*::before,
*::after{
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  
}

/* Die globale Site-Regel `section{padding:takt 0 takt}` (website.css) trifft auch
   unsere Draft-<section>s und spritzt dem Hero 144/64px Innenabstand ein → Weissraum
   ueber dem Bild und vor dem Fakten-Banner. Neutralisieren; die Draft-Klassen
   (.section, .decision-section, .microneedling-hero) bringen ihre eigenen Abstaende mit. */
.mn > section{padding-top:0;padding-bottom:0}

/* Fixierten Site-Header freistellen (Hero startet unter dem Kopf).
   min-height MIT 790px-Deckel wie .hero auf /hautanalyse – sonst wird der Hero
   so hoch wie das Fenster und der Inhalt bekommt oben/unten Weissraum. */
.mn .microneedling-hero{margin-top:var(--kopf-unten,114px);min-height:min(790px, calc(100svh - var(--kopf-unten,114px)))}
@media (max-width:860px){.mn .microneedling-hero{min-height:0}}

/* ===== Hero an Hautanalyse (pid 37) angleichen ===== */
/* Parallax-Einblendung: Text (links) bewegt sich vor dem Bild – identische Keyframes/Timing wie .hero auf /hautanalyse */
@keyframes mn-hero-text-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes mn-hero-image-in{from{opacity:0;transform:scale(1.025)}to{opacity:1;transform:none}}
.mn .microneedling-hero__copy{animation:mn-hero-text-in 650ms cubic-bezier(.22,1,.36,1) both}
.mn .microneedling-hero__media{animation:mn-hero-image-in 800ms cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){
  .mn .microneedling-hero__copy,.mn .microneedling-hero__media{animation:none}
}
/* Fakten-Banner bündig an den Hero und Inhalt auf Container-Breite (1160px, nicht breiter als der Hero-Content) – wie .trust-strip auf /hautanalyse */
.mn .microneedling-hero + .hero-facts{margin-top:0}
.mn .hero-facts{padding-left:max(var(--page-pad),calc(50% - 580px));padding-right:max(var(--page-pad),calc(50% - 580px))}

/* ===== Hero: Bild fuellt den Monitor + Sticky-Parallax wie .hero auf /hautanalyse ===== */
/* Das aus body geerbte overflow-x:hidden wuerde position:sticky brechen -> clip (bricht sticky nicht) */
.mn{overflow-x:clip}
/* Bild absolut fuellend -> passt sich immer an Spalte/Monitor an */
.mn .microneedling-hero__media > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Ab Desktop: Bildspalte bleibt stehen (sticky), waehrend der Text daneben scrollt – bis der Hero endet */
@media (min-width:992px){
  .mn .microneedling-hero__media{position:sticky;top:var(--kopf-unten,114px);align-self:start;height:calc(100svh - var(--kopf-unten,114px))}
}
/* Overlay als lesbares Berry-Band am unteren Bildrand (wie .hero-angebot auf /hautanalyse) */
.mn .microneedling-hero__caption{left:0;right:0;bottom:0;max-width:none;margin:0;padding:20px clamp(22px,3vw,40px);background:var(--berry);backdrop-filter:none;-webkit-backdrop-filter:none;z-index:3}
.mn .microneedling-hero__caption span{margin-bottom:7px;color:rgba(255,255,255,.82);font-size:11px;letter-spacing:.16em}
.mn .microneedling-hero__caption strong{color:#fff}

/* Fakten-Zahl "45–60": Cormorant nutzt sonst Mediaevalziffern (Ober-/Unterlaengen -> "springen"). Versalziffern erzwingen. */
.mn .hero-fact--duration strong{font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"tnum" 1}

/* Goal-Fakten waren display:block -> oben-buendig (mehr Luft unten). Vertikal zentrieren, Text weiter linksbuendig. */
.mn .hero-fact--goal{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}

/* Goal-Fakten: Zeilen enger zusammen (2-zeilige Werte standen zu weit auseinander) */
.mn .hero-fact--goal strong,.mn .hero-fact--goal span{line-height:0.8}

/* ===== H2 in unser Designsystem (war zu gross) – Werte aus website.css h2 ===== */
.mn h2{font-size:clamp(28px,3.4vw,38px);line-height:1.2;letter-spacing:-.005em;font-weight:500}

/* ===== Intro: Zertifizierungs-Logo + SkinPeeler-Pen nebeneinander, direkt unter der Ueberschrift ===== */
.mn .intro-grid{display:block}
.mn .intro-heading{max-width:none;margin-bottom:0}
.mn .intro-badge-pen{display:flex;align-items:center;gap:clamp(20px,3vw,48px);margin:clamp(22px,3vw,34px) 0 clamp(40px,5vw,64px)}
/* Logo behaelt seine Groesse (schrumpft nicht) */
.mn .intro-badge-pen .intro-certification-seal{margin:0;flex:0 0 clamp(128px,13vw,160px);width:clamp(128px,13vw,160px)}
.mn .intro-badge-pen .intro-certification-seal img{width:100%;height:auto}
/* Pen fuellt die restliche Contentbreite; Hoehe folgt der Breite (aspect-ratio der rotierten Bounding-Box).
   Pen um 270deg (=90deg horizontal +180deg) gedreht -> Spitze zeigt in die andere Richtung.
   Bild absolut zentriert, Hoehe=100cqw (= Containerbreite) via Container-Query. */
.mn .intro-pen{position:relative;flex:1 1 auto;min-width:0;margin:0;aspect-ratio:2713 / 609;container-type:inline-size}
.mn .intro-pen img{position:absolute;top:50%;left:50%;height:100cqw;width:auto;transform:translate(-50%,-50%) rotate(270deg);filter:drop-shadow(0 14px 20px rgba(47,35,37,.13))}
@media (max-width:560px){
  .mn .intro-badge-pen{flex-direction:column;align-items:flex-start;gap:22px}
  .mn .intro-pen{width:100%;flex:none}
}

/* ===== Intro-Section: Feinschliff ===== */
/* Hintergrund leinen (Wunsch) */
.mn .intro-section{background:var(--leinen)}
/* Nachfolgenden Abstand verkleinern (war section-space ~136px) */
.mn .intro-section.section{padding-top:clamp(60px,7vw,100px);padding-bottom:clamp(44px,5vw,72px)}

/* Lead = Design-System-Lead (identisch zu .dermo-copy .lead-copy), nicht die Draft-Version */
.mn .lead-copy{font-family:var(--body);font-size:clamp(18px,1.5vw,20px);font-style:normal;line-height:1.65;color:var(--kastanie);max-width:52ch}

/* Textspalte: Lead prominent ueber volle Breite, darunter Fliesstext 2-spaltig, 17px Standard */
.mn .intro-copy{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,36px) clamp(30px,4vw,60px);align-items:start}
.mn .intro-copy .lead-copy{grid-column:1 / -1;margin:0 0 4px}
.mn .intro-copy p:not(.lead-copy){font-size:17px;line-height:1.72;color:var(--taupe);margin:0;overflow-wrap:break-word;text-wrap:pretty}
@media (max-width:640px){.mn .intro-copy{grid-template-columns:1fr;gap:18px}}

/* ===== Korrektur Lead: unser .lead (kursiv 18px), Intro-Copy wieder 3-spaltig ===== */
.mn .lead-copy{font-family:var(--body);font-size:18px;font-style:italic;line-height:1.6;color:var(--kastanie);max-width:46ch}
.mn .intro-copy{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:clamp(24px,3vw,48px);align-items:start}
.mn .intro-copy .lead-copy{grid-column:auto;max-width:none;margin:0}
.mn .intro-copy p:not(.lead-copy){font-size:17px;line-height:1.72;color:var(--taupe);margin:0;overflow-wrap:break-word;text-wrap:pretty}
@media (max-width:820px){.mn .intro-copy{grid-template-columns:1fr;gap:18px}.mn .intro-copy .lead-copy{max-width:52ch}}

/* ===== FAQ-Liste wie /hautanalyse (Design-System .faq-list) ===== */
.mn .faq-grid{grid-template-columns:minmax(0,0.78fr) minmax(0,1.22fr);gap:clamp(50px,9vw,120px);align-items:start}
.mn .faq-list{border-top:1px solid #B9A492}
.mn .faq-list details{border-bottom:1px solid #B9A492}
.mn .faq-list summary{padding:24px 48px 24px 0;font-family:var(--display);font-size:24px;font-weight:500;line-height:1.25;color:var(--kastanie)}
.mn .faq-list summary span,.mn .faq-list summary span::after{right:8px;width:20px;background:var(--berry)}

/* ===== H2 auf Landingpage-Designsystem (.lp h2 wie /erstbehandlung), war zu klein ===== */
.mn h2{font-size:clamp(34px,4.5vw,54px);line-height:1.06;font-weight:400;letter-spacing:-.01em}

/* FAQ-Kopf: schmale H2 + Lead wie /erstbehandlung */
.mn .faq-heading h2{max-width:13ch;margin:0 0 20px}
.mn .faq-heading-lead{margin:0;font-size:18px;line-height:1.6;color:var(--taupe)}

/* ===== Kontakt-Band (Berry) 1:1 wie /erstbehandlung .contact-el ===== */
.mn .contact-band{background:var(--berry);color:var(--white);padding-block:80px}
.mn .contact-grid{display:grid;width:min(100%,var(--shell));margin-inline:auto;padding-inline:var(--page-pad);grid-template-columns:minmax(0,1.1fr) minmax(300px,0.7fr);gap:clamp(50px,9vw,130px);align-items:center}
.mn .contact-el .eyebrow,.mn .contact-el > div > p{color:rgba(255,255,255,.83)}
.mn .contact-el .eyebrow{margin:0 0 24px;font-weight:500;font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.mn .contact-el > div > p:not(.eyebrow){margin:0;font-size:17px;line-height:1.7}
.mn .contact-el h2{color:var(--white);font-family:var(--display);font-weight:500;font-size:clamp(28px,3.4vw,38px);line-height:1.2;letter-spacing:-.005em;max-width:20ch;margin:0 0 22px}
.mn .contact-el .button{min-height:50px;padding:15px 24px;border:1px solid rgba(255,255,255,.7);background:transparent;color:var(--white);text-transform:uppercase;letter-spacing:.11em;font-size:13px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.mn .contact-el .button--light{border-color:var(--white);background:var(--white);color:var(--berry)}
.mn .contact-el .button:hover{background:rgba(255,255,255,.12)}
.mn .contact-el .button--light:hover{background:var(--blush);border-color:var(--blush);color:var(--berry)}
.mn .contact-actions{display:grid;grid-template-columns:1fr;gap:12px}
.mn .contact-actions small{margin-top:6px;color:rgba(255,255,255,.76);font-size:11px;line-height:1.55;text-align:center}
@media(max-width:820px){.mn .contact-grid{grid-template-columns:1fr;gap:34px}}

/* mechanism-Section: oberer Abstand minimal reduzieren + Text rechts 17px */
.mn .mechanism-section{padding-top:clamp(72px,7vw,104px)}
.mn .mechanism-intro > p:last-child{font-size:17px}

/* Fussnote wie /kosmetikerin-klaudia-heidrich: heller Hinweis, Oberlinie, 13px Taupe */
.mn .fussnote{border-top:1px solid var(--linie,#e9d9d6);margin:clamp(48px,5.5vw,72px) 0 22px;padding:22px max(var(--page-pad),calc(50% - var(--shell)/2)) 0}
.mn .fussnote p{margin:0;font-family:var(--body);font-size:13px;line-height:1.65;color:var(--taupe);max-width:none}