/*
Theme Name: Men Mansion Advertorial
Theme URI: https://menmansion.com
Description: Papier-Modus der Marke Men Mansion. Child Theme von Hello Elementor mit den Advertorial-Tokens aus dem Zeitungspapier-Styleguide.
Author: Men Mansion
Template: hello-elementor
Version: 1.2.0
Text Domain: hello-elementor-mm
*/

/* ===== Tokens - pixelgenau aus dem Advertorial-Styleguide ===== */

:root {
  --mm-paper:        #efede6;
  --mm-paper-header: #eeede6;
  --mm-paper-rule:   #e3dfd6;
  --mm-panel:        #e9e6de;
  --mm-red:          #a4392f;
  --mm-sf-rule:      #33322f;
  --mm-ink:          #191919;
  --mm-body:         #232321;
  --mm-kicker:       #6f6b63;
  --mm-gold:         #8a7733;
  --mm-underline:    #af9841;
  --mm-btn-bg:       #191919;
  --mm-btn-fg:       #fafaf8;
  --mm-radius:       0px;
  --mm-container:    1180px;
  --mm-measure:      40ch;
  --mm-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --mm-sans: "Figtree", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* ===== Grundsatz ===== */

html { -webkit-text-size-adjust: 100%; }

body.mm-advertorial {
  background: var(--mm-paper);
  color: var(--mm-body);
  font-family: var(--mm-sans);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.mm-advertorial *,
.mm-advertorial *::before,
.mm-advertorial *::after { border-radius: var(--mm-radius) !important; box-shadow: none !important; }

.mm-advertorial img { display: block; max-width: 100%; height: auto; }

.mm-advertorial .e-con,
.mm-advertorial .e-con-inner { background: transparent; }

.mm-advertorial .elementor-widget > *:first-child { margin-top: 0; }
.mm-advertorial .elementor-widget > *:last-child { margin-bottom: 0; }

/* ===== Raster ===== */

.mm-advertorial .mm-wrap > .e-con-inner {
  max-width: var(--mm-container);
  margin-inline: auto;
  padding-inline: 28px;
}

.mm-advertorial .mm-wrap { --width: 100%; padding-block: 0; }
.mm-advertorial .mm-col { width: 100%; min-width: 0; padding: 0; align-self: start; }

/* Zeitungsspalte. Elementor setzt max-width:100% mit (0,4,0) auf jedes
   Widget im Container - deshalb hier hart. */
body.mm-advertorial .mm-measure.elementor-widget,
body.mm-advertorial .mm-lede.elementor-widget { max-width: var(--mm-measure) !important; }
body.mm-advertorial .mm-pullquote.elementor-widget { max-width: 30ch !important; }
body.mm-advertorial .mm-note.elementor-widget { max-width: 66ch !important; }
body.mm-advertorial .mm-caption.elementor-widget { max-width: 58ch !important; }

.mm-advertorial .mm-measure p,
.mm-advertorial .mm-measure ul,
.mm-advertorial .mm-measure ol { max-width: var(--mm-measure); }

.mm-advertorial .mm-measure p { margin: 0; }
.mm-advertorial .mm-measure p + p { margin-top: 0.95em; }

/* ===== Vertrauenszeile ===== */

.mm-advertorial .mm-trustbar .elementor-star-rating__wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.mm-advertorial .mm-trustbar .elementor-star-rating i {
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--mm-underline);
}

.mm-advertorial .mm-trustbar .elementor-star-rating__title {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
}

/* ===== Satz ===== */

.mm-advertorial h1,
.mm-advertorial h2,
.mm-advertorial h3 {
  font-family: var(--mm-display);
  color: var(--mm-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}

.mm-advertorial .mm-h1 .elementor-heading-title {
  font-size: clamp(31px, 2.75vw, 41px);
  line-height: 1.08;
  padding-bottom: 0.06em;
}

.mm-advertorial .mm-h2 .elementor-heading-title {
  font-size: clamp(28px, 2.9vw, 42px);
  line-height: 1.12;
  padding-bottom: 0.05em;
  max-width: 24ch;
}

.mm-advertorial .mm-h3 .elementor-heading-title {
  font-size: 11px;
  font-family: var(--mm-sans);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
  border-top: 1px solid var(--mm-paper-rule);
  padding-top: 14px;
}

.mm-advertorial .elementor-heading-title em,
.mm-advertorial .mm-gold { font-style: italic; color: var(--mm-gold); }
/* Die Bruecke ist ein Textwidget, keine Ueberschrift - die Regel oben greift dort nicht. */
.mm-advertorial .mm-bridge em { font-style: italic; color: var(--mm-gold); }

.mm-advertorial .mm-lede {
  font-size: 20px;
  line-height: 1.5;
  color: var(--mm-body);
}

.mm-advertorial .mm-byline,
.mm-advertorial .mm-byline p {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
  margin: 0;
}

.mm-advertorial .mm-dropcap p:first-of-type::first-letter {
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: 4em;
  line-height: 0.82;
  float: left;
  margin: 0.06em 0.09em 0 0;
  color: var(--mm-ink);
}

.mm-advertorial .mm-pullquote {
  border-top: 1px solid var(--mm-paper-rule);
  border-bottom: 1px solid var(--mm-paper-rule);
  padding-block: 20px;
  font-family: var(--mm-display);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.22;
  color: var(--mm-ink);
}

.mm-advertorial .mm-pullquote p { margin: 0; }

.mm-advertorial .mm-note {
  border-top: 1px solid var(--mm-paper-rule);
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-kicker);
}

.mm-advertorial .mm-note p { margin: 0; }

.mm-advertorial .mm-caption {
  padding-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--mm-kicker);
}

.mm-advertorial .mm-caption p { margin: 0; }

.mm-advertorial a { color: inherit; }

.mm-advertorial .mm-measure a,
.mm-advertorial .mm-lede a {
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-color: var(--mm-underline);
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}

/* ===== Hero ===== */

.mm-advertorial .mm-hero > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: 56px;
  align-items: start;
}

body.mm-advertorial .mm-hero > .e-con-inner > .mm-col.e-con { max-width: 100%; width: 100%; }

/* ===== Zweispaltiger Angebotsblock ===== */

.mm-advertorial .mm-split > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 56px;
  align-items: center;
}

body.mm-advertorial .mm-split > .e-con-inner > .mm-col.e-con { max-width: 100%; width: 100%; }

/* ===== Aktionen ===== */

.mm-advertorial .mm-cta .elementor-button {
  background: var(--mm-btn-bg);
  color: var(--mm-btn-fg);
  font-family: var(--mm-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 21px 40px;
  border: 0;
  fill: var(--mm-btn-fg);
  transition: background-color .2s cubic-bezier(.4,0,.2,1);
}

.mm-advertorial .mm-cta .elementor-button:hover,
.mm-advertorial .mm-cta .elementor-button:focus { background: var(--mm-body); color: var(--mm-btn-fg); }

.mm-advertorial .mm-cta .elementor-button:active { transform: scale(.985); }

.mm-advertorial .mm-cta .elementor-button:focus-visible {
  outline: 2px solid var(--mm-gold);
  outline-offset: 2px;
}

.mm-advertorial .mm-actions,
.mm-advertorial .mm-actions > .e-con-inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  width: 100%;
}

.mm-advertorial .mm-seclink,
.mm-advertorial .mm-seclink p { font-size: 15px; color: var(--mm-ink); margin: 0; }

.mm-advertorial .mm-seclink a {
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-color: var(--mm-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

/* ===== Bilder ===== */

.mm-advertorial .mm-figure img { width: 100%; max-height: 720px; object-fit: cover; }
.mm-advertorial .mm-split .mm-figure img { max-height: none; object-fit: initial; }

/* Das Hochformat im Hero wird beschnitten, sonst schiebt es den
   Anriss aus dem ersten Bildschirm. */
.mm-advertorial .mm-hero-figure img {
  width: 100%;
  max-height: 470px;
  object-fit: cover;
  object-position: 50% 26%;
}

.mm-advertorial .mm-duo,
.mm-advertorial .mm-duo > .e-con-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  width: 100%;
}

.mm-advertorial .mm-duo .elementor-widget { max-width: none; }
.mm-advertorial .mm-duo .mm-figure img { max-height: none; object-fit: initial; }
.mm-advertorial .mm-duo img { width: 100%; }

/* ===== Fakten als natives Icon-List-Widget ===== */

.mm-advertorial .mm-facts { max-width: 66ch; }
.mm-advertorial .mm-facts .elementor-icon-list-items { display: block; }

.mm-advertorial .mm-facts .elementor-icon-list-item {
  border-top: 1px solid var(--mm-paper-rule);
  padding: 13px 0;
  display: block;
  font-size: 16px;
  line-height: 1.45;
  color: var(--mm-body);
}

.mm-advertorial .mm-facts .elementor-icon-list-item:last-child {
  border-bottom: 1px solid var(--mm-paper-rule);
}

.mm-advertorial .mm-facts .elementor-icon-list-icon { display: none; }
.mm-advertorial .mm-facts .elementor-icon-list-text { padding: 0; color: var(--mm-body); }

.mm-advertorial .mm-facts b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
  margin-bottom: 3px;
}

/* ===== Haarlinien-Tabelle ===== */

/* Breite Inhalte scrollen in sich selbst, nie die Seite. */
.mm-advertorial .mm-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mm-advertorial .mm-table { width: 100%; min-width: 420px; border-collapse: collapse; }

.mm-advertorial .mm-table th,
.mm-advertorial .mm-table td {
  border-top: 1px solid var(--mm-paper-rule);
  padding: 15px 24px 15px 0;
  text-align: left;
  vertical-align: top;
  font-size: 16px;
  line-height: 1.45;
}

.mm-advertorial .mm-table thead th {
  border-top: 0;
  border-bottom: 1px solid var(--mm-ink);
  padding-bottom: 11px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
}

.mm-advertorial .mm-table tbody th { font-weight: 400; color: var(--mm-kicker); width: 26%; }
.mm-advertorial .mm-table td:last-child { color: var(--mm-ink); font-weight: 500; }

/* ===== Preis und Vertrauen ===== */

.mm-advertorial .mm-price .elementor-heading-title {
  font-size: clamp(34px, 3.4vw, 48px);
  line-height: 1;
}

.mm-advertorial .mm-price-meta,
.mm-advertorial .mm-price-meta p {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
  margin: 0;
}

.mm-advertorial .mm-trust,
.mm-advertorial .mm-trust p {
  border-top: 1px solid var(--mm-paper-rule);
  padding-top: 14px;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--mm-kicker);
  margin: 0;
}

.mm-advertorial .mm-trust p { border-top: 0; padding-top: 0; }

.mm-advertorial .mm-rating .elementor-star-rating i { font-size: 15px; letter-spacing: 2px; }
.mm-advertorial .mm-rating .elementor-star-rating__wrapper {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
.mm-advertorial .mm-rating .elementor-star-rating__title {
  font-size: 14px;
  color: var(--mm-kicker);
  letter-spacing: 0.04em;
  margin: 0;
}

/* ===== FAQ ===== */

.mm-advertorial .mm-faq .elementor-accordion { max-width: 70ch; }

.mm-advertorial .mm-faq .elementor-accordion-item {
  border: 0;
  border-top: 1px solid var(--mm-paper-rule);
}

.mm-advertorial .mm-faq .elementor-accordion-item:last-child {
  border-bottom: 1px solid var(--mm-paper-rule);
}

.mm-advertorial .mm-faq .elementor-tab-title {
  background: transparent;
  border: 0;
  padding: 19px 0;
  display: flex;
  align-items: baseline;
  gap: 24px;
  font-family: var(--mm-sans);
  font-weight: 700;
  font-size: clamp(17px, 1.35vw, 19px);
  letter-spacing: -0.005em;
  line-height: 1.3;
  color: var(--mm-ink);
}

.mm-advertorial .mm-faq .elementor-accordion-title { order: 1; flex: 1 1 auto; color: var(--mm-ink); text-decoration: none; }
.mm-advertorial .mm-faq .elementor-tab-title.elementor-active,
.mm-advertorial .mm-faq .elementor-tab-title.elementor-active .elementor-accordion-title { color: var(--mm-gold); }

.mm-advertorial .mm-faq .elementor-accordion-icon {
  order: 2;
  flex: 0 0 13px;
  width: 13px;
  margin: 0;
  font-size: 13px;
  color: var(--mm-kicker);
  align-self: center;
}

.mm-advertorial .mm-faq .elementor-accordion-icon svg {
  width: 13px !important;
  height: 13px;
  display: block;
  fill: currentColor;
}

.mm-advertorial .mm-faq .elementor-accordion-icon-opened { display: none; }
.mm-advertorial .mm-faq .elementor-active .elementor-accordion-icon-closed { display: none; }
.mm-advertorial .mm-faq .elementor-active .elementor-accordion-icon-opened { display: block; }

.mm-advertorial .mm-faq .elementor-tab-content {
  background: transparent;
  border: 0;
  padding: 0 0 22px 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--mm-body);
}

/* ===== Fuss ===== */

.mm-advertorial .mm-footer {
  border-top: 1px solid var(--mm-paper-rule);
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  padding-top: 26px;
  width: 100%;
}

.mm-advertorial .mm-footer .elementor-widget { width: auto; max-width: none; }

.mm-advertorial .mm-foot-item,
.mm-advertorial .mm-foot-item p {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
  margin: 0;
}

.mm-advertorial .mm-foot-item a { color: var(--mm-kicker); text-decoration: none; }
.mm-advertorial .mm-foot-item a:hover { color: var(--mm-gold); }

/* ===== Mobil ===== */

@media (max-width: 1024px) {
  .mm-advertorial .mm-hero > .e-con-inner,
  .mm-advertorial .mm-split > .e-con-inner { grid-template-columns: 1fr; gap: 36px; }
  .mm-advertorial .mm-h2 .elementor-heading-title { max-width: 100%; }
}

@media (max-width: 767px) {
  body.mm-advertorial { font-size: 17px; }

  .mm-advertorial .mm-wrap > .e-con-inner { padding-inline: 20px; }

  .mm-advertorial .mm-h1 .elementor-heading-title { font-size: 30px; line-height: 1.12; }
  .mm-advertorial .mm-h2 .elementor-heading-title { font-size: 25px; }
  .mm-advertorial .mm-lede { font-size: 18px; }
  .mm-advertorial .mm-eyebrow,
  .mm-advertorial .mm-eyebrow p { font-size: 10px; letter-spacing: 0.1em; }
  .mm-advertorial .mm-pullquote { font-size: 21px; }

  .mm-advertorial .mm-kicker,
  .mm-advertorial .mm-footer { flex-direction: column; align-items: flex-start; gap: 6px; }

  body.mm-advertorial .mm-measure.elementor-widget,
  body.mm-advertorial .mm-lede.elementor-widget,
  body.mm-advertorial .mm-pullquote.elementor-widget,
  body.mm-advertorial .mm-note.elementor-widget,
  body.mm-advertorial .mm-caption.elementor-widget { max-width: 100% !important; }

  .mm-advertorial .mm-measure p { max-width: 100%; }

  .mm-advertorial .mm-duo,
  .mm-advertorial .mm-duo > .e-con-inner { grid-template-columns: 1fr; }

  .mm-advertorial .mm-figure img { max-height: none; object-fit: initial; }

  .mm-advertorial .mm-cta .elementor-button { display: block; text-align: center; padding: 20px 26px; }
  .mm-advertorial .mm-actions,
  .mm-advertorial .mm-actions > .e-con-inner { gap: 18px; }

  .mm-advertorial .mm-dropcap p:first-of-type::first-letter { font-size: 3.3em; }

  .mm-advertorial .mm-table th,
  .mm-advertorial .mm-table td { font-size: 15px; padding-right: 14px; }
  .mm-advertorial .mm-table tbody th { width: 40%; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-advertorial * { transition: none !important; animation: none !important; }
}

/* ===== Mobil: randlose Bilder und dichter Satz ===== */

@media (max-width: 767px) {
  body.mm-advertorial { font-size: 17px; line-height: 1.5; }

  .mm-advertorial .mm-hero > .e-con-inner { gap: 26px; }

  .mm-advertorial .mm-wrap > .e-con-inner { padding-inline: 22px; }

  /* Bilder laufen bis an den Bildschirmrand - das ist der Zeitungseffekt
     auf dem Telefon, sonst schwimmt alles in einer schmalen Spalte. */
  body.mm-advertorial { overflow-x: hidden; }

  body.mm-advertorial .mm-figure.elementor-widget,
  body.mm-advertorial .mm-duo {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: 50%;
    transform: translateX(-50%);
  }

  body.mm-advertorial .mm-duo .mm-figure.elementor-widget {
    width: 100%;
    max-width: 100% !important;
    margin-left: 0;
    transform: none;
  }

  .mm-advertorial .mm-figure img { width: 100%; }

  .mm-advertorial .mm-caption { padding-inline: 0; }

  .mm-advertorial .mm-h1 .elementor-heading-title { font-size: 33px; line-height: 1.1; }
  .mm-advertorial .mm-h2 .elementor-heading-title { font-size: 26px; line-height: 1.14; }
  .mm-advertorial .mm-lede { font-size: 18px; line-height: 1.45; }
  .mm-advertorial .mm-pullquote { font-size: 21px; padding-block: 18px; }
  .mm-advertorial .mm-price .elementor-heading-title { font-size: 34px; }

  .mm-advertorial .mm-trustbar .elementor-star-rating__title { font-size: 10px; }
}

/* ===== Container-Abstaende ===== */

/* Elementor gibt jedem Container 20px Luecke zwischen den Kindern. Die
   addiert sich zu jedem Abstandhalter und blaeht die Seite auf. Hier aus,
   die Abstaende steuern ausschliesslich die Abstandhalter-Widgets. */
.mm-advertorial .e-con {
  --gap: 0px; --row-gap: 0px; --column-gap: 0px;
  --padding-block-start: 0px; --padding-block-end: 0px;
  --padding-inline-start: 0px; --padding-inline-end: 0px;
}

/* Die wenigen Reihen, die eine Luecke brauchen, bekommen sie zurueck. */
.mm-advertorial .mm-actions { --gap: 28px; --row-gap: 18px; --column-gap: 28px; }
.mm-advertorial .mm-footer { --gap: 20px; --row-gap: 8px; --column-gap: 20px; }
.mm-advertorial .mm-hero > .e-con-inner,
.mm-advertorial .mm-split > .e-con-inner { --gap: 0px; }

/* ===== Auszeichnungszeile ueber der Headline ===== */

.mm-advertorial .mm-eyebrow,
.mm-advertorial .mm-eyebrow p {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mm-gold);
  margin: 0;
}

/* ===== Inhaltsstoffe als Medaillons ===== */

.mm-advertorial .mm-ingredients,
.mm-advertorial .mm-ingredients > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.mm-advertorial .mm-ing.elementor-widget { max-width: none; }
.mm-advertorial .mm-ing .elementor-image-box-wrapper { text-align: left; }

.mm-advertorial .mm-ing .elementor-image-box-img {
  width: 100% !important;
  margin: 0 0 12px 0 !important;
  display: block;
}

/* Squalan und Bergamotte liegen im Hochformat, alle anderen quadratisch.
   Fester Zuschnitt haelt die Kacheln auf einer Hoehe. */
.mm-advertorial .mm-ing .elementor-image-box-img img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.mm-advertorial .mm-ing .elementor-image-box-title {
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mm-ink);
  margin: 0 0 5px 0;
}

.mm-advertorial .mm-ing .elementor-image-box-description {
  font-size: 13px;
  line-height: 1.45;
  color: var(--mm-kicker);
  margin: 0;
}

/* ===== Dermatest-Siegel ===== */

.mm-advertorial .mm-seal,
.mm-advertorial .mm-seal > .e-con-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.mm-advertorial .mm-seal .elementor-widget { width: auto; max-width: none; }
.mm-advertorial .mm-seal-img img { width: 104px; height: auto; }

.mm-advertorial .mm-seal-text,
.mm-advertorial .mm-seal-text p {
  font-size: 13px;
  line-height: 1.5;
  color: var(--mm-kicker);
  margin: 0;
}

.mm-advertorial .mm-seal-text strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-ink);
  margin-bottom: 4px;
}

.mm-advertorial .mm-seal-text a {
  color: var(--mm-ink);
  text-decoration: underline;
  text-decoration-color: var(--mm-underline);
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}

/* ===== Vergleichstabelle mit Produktbildern ===== */

.mm-advertorial .mm-vs { width: 100%; min-width: 560px; border-collapse: collapse; }

.mm-advertorial .mm-vs thead th {
  border: 0;
  border-bottom: 1px solid var(--mm-ink);
  padding: 0 0 16px 0;
  vertical-align: bottom;
  text-align: center;
}

.mm-advertorial .mm-vs thead th.mm-vs-lead {
  text-align: left;
  width: 46%;
}

.mm-advertorial .mm-vs-lead span {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
  margin-bottom: 6px;
}

.mm-advertorial .mm-vs-lead strong {
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--mm-ink);
}

.mm-advertorial .mm-vs thead img {
  width: 92px;
  height: auto;
  margin: 0 auto 10px;
  display: block;
}

.mm-advertorial .mm-vs thead th b {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
}

.mm-advertorial .mm-vs thead th.mm-vs-us b { color: var(--mm-gold); }

.mm-advertorial .mm-vs tbody th {
  border-top: 1px solid var(--mm-paper-rule);
  padding: 17px 26px 17px 0;
  text-align: left;
  vertical-align: middle;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--mm-kicker);
}

.mm-advertorial .mm-vs tbody td {
  border-top: 1px solid var(--mm-paper-rule);
  padding: 17px 16px;
  text-align: center;
  vertical-align: middle;
  font-size: 15px;
  line-height: 1.4;
  color: var(--mm-body);
}

/* Die eigene Spalte wird durch Haarlinien markiert, nicht durch Flaeche. */
.mm-advertorial .mm-vs .mm-vs-us {
  border-left: 1px solid var(--mm-paper-rule);
  border-right: 1px solid var(--mm-paper-rule);
  color: var(--mm-ink);
  font-weight: 500;
}

.mm-advertorial .mm-vs tbody tr:last-child .mm-vs-us { border-bottom: 1px solid var(--mm-paper-rule); }
.mm-advertorial .mm-vs tbody tr:last-child th,
.mm-advertorial .mm-vs tbody tr:last-child td { border-bottom: 1px solid var(--mm-paper-rule); }

@media (max-width: 767px) {
  .mm-advertorial .mm-vs { min-width: 520px; }
  .mm-advertorial .mm-vs thead img { width: 62px; }
  .mm-advertorial .mm-vs-lead strong { font-size: 18px; }
  .mm-advertorial .mm-vs tbody th,
  .mm-advertorial .mm-vs tbody td { font-size: 14px; padding-block: 14px; }
  .mm-advertorial .mm-vs tbody th { padding-right: 16px; }

  .mm-advertorial .mm-ingredients,
  .mm-advertorial .mm-ingredients > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

  .mm-advertorial .mm-seal,
  .mm-advertorial .mm-seal > .e-con-inner { gap: 16px; }
  .mm-advertorial .mm-seal-img img { width: 84px; }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .mm-advertorial .mm-ingredients,
  .mm-advertorial .mm-ingredients > .e-con-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===== Mobil, Nachtrag =====
   Steht bewusst am Dateiende: die Basisregeln oben wurden spaeter
   ergaenzt und wuerden einen frueheren Media-Block sonst schlagen. */

@media (max-width: 767px) {
  .mm-advertorial .mm-eyebrow,
  .mm-advertorial .mm-eyebrow p {
    font-size: 10px;
    letter-spacing: 0.1em;
  }

  .mm-advertorial .mm-hero-figure img {
    aspect-ratio: 1 / 1;
    max-height: none;
    object-fit: cover;
    object-position: 50% 20%;
  }

  .mm-advertorial .mm-ing .elementor-image-box-title { font-size: 16px; }
  .mm-advertorial .mm-ing .elementor-image-box-description { font-size: 12px; }
}

@media (max-width: 767px) {
  /* Sterne und Text nebeneinander brechen auf dem Telefon um.
     column-reverse haelt die Sterne oben, den Text darunter. */
  .mm-advertorial .mm-rating .elementor-star-rating__wrapper {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }

  .mm-advertorial .mm-rating .elementor-star-rating { white-space: nowrap; }

  .mm-advertorial .mm-trustbar .elementor-star-rating__wrapper {
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 6px;
  }
}

/* ===== Querschnitt-Grafik ===== */

.mm-advertorial .mm-diagram svg { width: 100%; height: auto; display: block; }
.mm-advertorial .mm-diagram { max-width: none; }

@media (max-width: 767px) {
  /* Die Grafik braucht Breite. Auf dem Telefon laeuft sie randlos
     und scrollt in sich, statt auf Briefmarkengroesse zu schrumpfen. */
  body.mm-advertorial .mm-diagram.elementor-widget {
    width: 100vw;
    max-width: 100vw !important;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow-x: auto;
  }
  .mm-advertorial .mm-diagram svg { min-width: 620px; padding-inline: 22px; }
}

/* ===== Nachtrag: Hochformat im Fliesstext, Fettung ===== */

/* Das Portraet von Felix ist hoch. Ohne eigene Kappung frisst es
   einen ganzen Bildschirm; die Landschaftsbilder bleiben unberuehrt. */
.mm-advertorial .mm-figure-portrait img {
  max-height: 480px;
  object-fit: cover;
  object-position: 50% 26%;
}

.mm-advertorial .mm-measure strong {
  font-weight: 600;
  color: var(--mm-ink);
}

@media (max-width: 767px) {
  .mm-advertorial .mm-figure-portrait img {
    aspect-ratio: 4 / 5;
    max-height: none;
    object-fit: cover;
    object-position: 50% 24%;
  }
}

/* ===== Nachtrag: neue Bildformate ===== */

/* Lucas und Felix liegen jetzt im Querformat vor. Kein Beschnitt
   mehr noetig - die Bilder duerfen in ihrem eigenen Verhaeltnis stehen. */
body.mm-advertorial .mm-hero-figure img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: initial;
  aspect-ratio: auto;
}

@media (max-width: 767px) {
  body.mm-advertorial .mm-hero-figure img {
    aspect-ratio: auto;
    max-height: none;
    object-fit: initial;
  }
}

/* ===== Advertorial 2: Negativliste, USP-Reihe, Nutzenraster ===== */

/* Negativ gerahmte Punkte im Hero. Ein Kreuz in Papiergrau, nie in Rot -
   die Palette kennt keine Warnfarbe und braucht auch keine. */
.mm-advertorial .mm-negatives .elementor-icon-list-items { display: block; }

.mm-advertorial .mm-negatives .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-top: 1px solid var(--mm-paper-rule);
  padding: 13px 0;
  font-size: 16px;
  line-height: 1.45;
  color: var(--mm-body);
}

.mm-advertorial .mm-negatives .elementor-icon-list-icon {
  flex: 0 0 13px;
  width: 13px;
  margin: 0;
  font-size: 13px;
  padding-top: 5px;
  color: var(--mm-kicker);
}

.mm-advertorial .mm-negatives .elementor-icon-list-icon svg {
  width: 19px !important;
  height: 19px;
  fill: currentColor;
  display: block;
}

.mm-advertorial .mm-negatives .elementor-icon-list-text { padding: 0; color: inherit; }

/* Drei Versprechen quer, wie die Vertrauensreihe der Vorlage. */
.mm-advertorial .mm-usp,
.mm-advertorial .mm-usp > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
}

/* Vier Gruende, warum Rindertalg - eine Zeile, vier Spalten. */
.mm-advertorial .mm-why,
.mm-advertorial .mm-why > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
}

.mm-advertorial .mm-box.elementor-widget { max-width: none; }
.mm-advertorial .mm-box .elementor-icon-box-wrapper { text-align: left; }

.mm-advertorial .mm-box .elementor-icon {
  font-size: 22px;
  color: var(--mm-gold);
  padding: 0;
  border: 0;
  background: none;
}

.mm-advertorial .mm-box .elementor-icon svg {
  width: 22px !important;
  height: 22px;
  fill: currentColor;
}

.mm-advertorial .mm-box .elementor-icon-box-title {
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mm-ink);
  margin: 0 0 6px 0;
}

.mm-advertorial .mm-box .elementor-icon-box-description {
  font-size: 14px;
  line-height: 1.45;
  color: var(--mm-kicker);
  margin: 0;
}

/* Die USP-Reihe steht zwischen zwei Haarlinien wie ein Zeitungskopf. */
.mm-advertorial .mm-usp-rail > .e-con-inner {
  border-top: 1px solid var(--mm-paper-rule);
  border-bottom: 1px solid var(--mm-paper-rule);
  padding-block: 32px;
}

@media (max-width: 1024px) {
  .mm-advertorial .mm-why,
  .mm-advertorial .mm-why > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .mm-advertorial .mm-usp,
  .mm-advertorial .mm-usp > .e-con-inner { grid-template-columns: 1fr; gap: 22px; }
  .mm-advertorial .mm-why,
  .mm-advertorial .mm-why > .e-con-inner { grid-template-columns: 1fr; gap: 24px; }
  .mm-advertorial .mm-usp-rail > .e-con-inner { padding-block: 24px; }
  .mm-advertorial .mm-box .elementor-icon-box-title { font-size: 17px; }
  .mm-advertorial .mm-negatives .elementor-icon-list-item { font-size: 15px; }
}

/* Laengere Headline des zweiten Advertorials: auf dem Telefon eine
   Spur kleiner, sonst stehen fuenf Zeilen vor dem ersten Satz. */
@media (max-width: 767px) {
  .mm-advertorial .mm-h1-lang .elementor-heading-title { font-size: 28px; line-height: 1.14; }
}

/* ===== Nutzenblock mit Gold-Haken ===== */

/* Der einzige Ort mit eigener Flaeche. Ein Papierton tiefer, damit die
   Antwort auf die Problemliste optisch nach vorne kommt. */
.mm-advertorial .mm-benefit-panel > .e-con-inner {
  background: var(--mm-panel);
  padding: 34px 38px;
}

.mm-advertorial .mm-benefits .elementor-icon-list-items { display: block; }

.mm-advertorial .mm-benefits .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid rgba(25, 25, 25, 0.09);
  font-size: 17px;
  line-height: 1.45;
  color: var(--mm-ink);
}

.mm-advertorial .mm-benefits .elementor-icon-list-icon {
  flex: 0 0 19px;
  width: 19px;
  margin: 0;
  font-size: 19px;
  padding-top: 3px;
  color: var(--mm-gold);
}

.mm-advertorial .mm-benefits .elementor-icon-list-icon svg {
  width: 19px !important;
  height: 19px;
  fill: currentColor;
  display: block;
}

.mm-advertorial .mm-benefits .elementor-icon-list-text { padding: 0; color: inherit; }

/* Die Brueckenzeile direkt ueber dem Nutzenblock. */
/* Suisse Intl ist lizenzpflichtig und liegt hier nicht vor. Der Name steht
   trotzdem vorn: sobald die Datei im Theme landet, greift sie automatisch.
   Bis dahin faellt der Satz auf Figtree 700 zurueck. */
.mm-advertorial .mm-bridge,
.mm-advertorial .mm-bridge p {
  font-family: "Suisse Intl", "SuisseIntl-Bold", "SuisseIntl-Medium", var(--mm-sans);
  font-weight: 700;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.28;
  color: var(--mm-ink);
  margin: 0;
}

/* ===== Symbole neben dem Text statt darueber ===== */

.mm-advertorial .mm-box .elementor-icon-box-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.mm-advertorial .mm-box .elementor-icon-box-icon {
  flex: 0 0 22px;
  margin: 0 !important;
  padding-top: 2px;
}

.mm-advertorial .mm-box .elementor-icon-box-content { flex: 1 1 auto; }

/* Quadratische Zutatenmotive nicht über die volle Spalte ziehen -
   sonst beschneidet der Deckel sie zu einer abstrakten Flaeche. */
body.mm-advertorial .mm-figure-quad.elementor-widget { max-width: 560px !important; }
.mm-advertorial .mm-figure-quad img { max-height: none; object-fit: initial; }

@media (max-width: 767px) {
  body.mm-advertorial .mm-figure-quad.elementor-widget { max-width: 100vw !important; }
}

/* Der Desktop-Umbruch in der H1 zerhackt den Flattersatz auf schmalen Displays. */
@media (max-width: 767px) {
  body.mm-advertorial .mm-h1 br,
  body.mm-advertorial .mm-brandline br { display: none; }
}

/* =====================================================================
   Problem- und Vorteilsliste liegen auf derselben Flaeche. Den Unter-
   schied traegt allein die Ikone: rot fuer das Problem, gold fuer die
   Loesung. Gleiche Polsterung oben wie unten, damit die Trennlinien
   einen konstanten Rhythmus ergeben.
   ===================================================================== */
.mm-advertorial .mm-negative-panel > .e-con-inner,
.mm-advertorial .mm-benefit-panel > .e-con-inner {
  background: var(--mm-panel);
  padding: 22px 38px;
}

/* Elementors eigene Listenregel ist (0,5,0) und setzt padding-bottom auf 0 -
   dagegen kommt keine vernuenftige Klassenkette an, daher !important. */
.mm-advertorial .mm-benefits .elementor-icon-list-item,
.mm-advertorial .mm-negatives .elementor-icon-list-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 13px 0 !important;
  border-top: 1px solid rgba(25, 25, 25, 0.09);
  border-bottom: 0;
  font-size: 17px;
  line-height: 1.45;
  color: var(--mm-ink);
}
.mm-advertorial .mm-benefits .elementor-icon-list-items > .elementor-icon-list-item:first-child,
.mm-advertorial .mm-negatives .elementor-icon-list-items > .elementor-icon-list-item:first-child {
  border-top: 0;
}
.mm-advertorial .mm-negatives .elementor-icon-list-icon,
.mm-advertorial .mm-negatives .elementor-icon-list-icon svg {
  color: var(--mm-red);
  fill: var(--mm-red);
}
/* Ikone optisch auf die erste Textzeile zentrieren: halbe Zeilenhoehe
   minus halbe Ikonenhoehe. Passt sich mit der Schriftgroesse selbst an. */
.mm-advertorial .mm-negatives .elementor-icon-list-icon,
.mm-advertorial .mm-benefits .elementor-icon-list-icon {
  font-size: 19px;
  flex: 0 0 19px;
  width: 19px;
  padding-top: calc((1.45em - 19px) / 2);
}

/* Die Markenzeile bricht bewusst aus der Playfair-Reihe aus: Grotesk
   statt Serif, damit sie als Absender gelesen wird, nicht als Kapitel. */
/* Suisse Intl ist lizenzpflichtig und liegt hier nicht vor. Der Name steht
   vorn: sobald die Datei im Theme landet, greift sie automatisch. Bis dahin
   Figtree 700. Gleiche Behandlung wie bei der Bruecke. */
.mm-advertorial .mm-brandline .elementor-heading-title {
  font-family: "Suisse Intl", "SuisseIntl-Bold", "SuisseIntl-Medium", var(--mm-sans);
  font-weight: 700;
  font-size: clamp(26px, 2.5vw, 36px);
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--mm-ink);
  max-width: 30ch;
}
.mm-advertorial .mm-brandline em {
  font-style: normal;
  color: var(--mm-gold);
}

/* =====================================================================
   Shop-Footer, uebernommen von menmansion.com: #191919 auf #fafaf8,
   damit der Uebergang ins Shopsystem nicht wie ein Bruch wirkt.
   Suisse Intl ist lizenzpflichtig, deshalb hier Figtree 500.
   ===================================================================== */
.mm-advertorial .mm-sitefooter { background: var(--mm-ink); width: 100%; }
.mm-sf { font-family: var(--mm-sans); color: var(--mm-btn-fg); }
.mm-sf-inner { max-width: var(--mm-container); margin-inline: auto; padding: 54px 28px 34px; }
.mm-sf ul { list-style: none; margin: 0; padding: 0; }
.mm-sf-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: 30px; row-gap: 16px;
}
.mm-sf-nav a {
  color: rgba(250, 250, 248, 0.75);
  font-size: 15px; font-weight: 500; line-height: 1.5;
  text-decoration: none;
}
.mm-sf-nav a:hover, .mm-sf-nav a:focus-visible { color: var(--mm-btn-fg); }
.mm-sf-social { display: flex; justify-content: center; gap: 36px; padding-top: 40px; }
.mm-sf-social a { display: inline-flex; color: var(--mm-btn-fg); }
.mm-sf-si { width: 26px; height: 26px; fill: currentColor; display: block; }
.mm-sf-pay { border-top: 1px solid var(--mm-sf-rule); margin-top: 34px; padding-top: 22px; }
.mm-sf-paylist { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.mm-sf-pi {
  width: 38px; height: 24px; display: block;
  filter: grayscale(1) brightness(1.6) contrast(0.85) opacity(0.55);
}

@media (max-width: 767px) {
  .mm-advertorial .mm-negative-panel > .e-con-inner,
  .mm-advertorial .mm-benefit-panel > .e-con-inner { padding: 16px 22px; }
  .mm-advertorial .mm-benefits .elementor-icon-list-item,
  .mm-advertorial .mm-negatives .elementor-icon-list-item { font-size: 16px; }
  .mm-sf-inner { padding: 42px 24px 30px; }
  .mm-sf-nav { flex-direction: column; align-items: flex-start; row-gap: 22px; }
  .mm-sf-nav a { font-size: 16px; }
  .mm-sf-social { justify-content: center; padding-top: 36px; }
}

/* Die Problemliste soll nicht die halbe Seite fuellen - engere Polsterung,
   damit der naechste Abschnitt frueher in den Blick kommt. */
.mm-advertorial .mm-negatives .elementor-icon-list-item {
  padding: 9px 0 !important;
  font-size: 16px;
}
.mm-advertorial .mm-negative-panel > .e-con-inner { padding: 16px 38px; }
@media (max-width: 767px) {
  .mm-advertorial .mm-negatives .elementor-icon-list-item { font-size: 15px; padding: 8px 0 !important; }
  .mm-advertorial .mm-negative-panel > .e-con-inner { padding: 12px 22px; }
}

/* =====================================================================
   Desktop-Feinschliff. 40ch sind eine Zeilenlaenge fuers Handy; auf
   breiten Schirmen steht der Text sonst als schmales Band links. Die
   linke Flucht bleibt, nur die Zeilen werden laenger. Mobil und Tablet
   bleiben unangetastet.
   ===================================================================== */
@media (min-width: 1025px) {
  body.mm-advertorial { --mm-measure: 62ch; }
  body.mm-advertorial .mm-h2 .elementor-heading-title { max-width: 22ch; }
  body.mm-advertorial .mm-brandline .elementor-heading-title { max-width: 26ch; }
  body.mm-advertorial .mm-note.elementor-widget,
  body.mm-advertorial .mm-caption.elementor-widget { max-width: 72ch !important; }
  body.mm-advertorial .mm-pullquote.elementor-widget { max-width: 44ch !important; }
  body.mm-advertorial .mm-figure:not(.mm-hero-figure) img { max-height: 560px; }
}

/* =====================================================================
   Dunkler Hero. Bild und Aussage zuerst, Text danach.
   ===================================================================== */
.mm-advertorial .mm-hero-dark { background: var(--mm-ink); width: 100%; }
.mm-advertorial .mm-hero-dark > .e-con-inner { padding: 30px 28px 46px; }

.mm-advertorial .mm-wordmark p {
  font-family: var(--mm-display);
  font-size: 15px; font-weight: 700;
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--mm-btn-fg); margin: 0;
}

/* Der weisse Streifen sitzt ohne Fuge unter dem Bild. */
.mm-advertorial .mm-capstrip.elementor-widget { max-width: none !important; }
.mm-advertorial .mm-capstrip p {
  background: var(--mm-btn-fg); color: var(--mm-ink);
  font-size: 19px; font-weight: 700; line-height: 1.3;
  text-align: center; padding: 17px 22px; margin: 0;
}

.mm-advertorial .mm-hero-dark .mm-h1 .elementor-heading-title { color: var(--mm-btn-fg); }
.mm-advertorial .mm-hero-dark .mm-h1 em { color: var(--mm-underline); }
.mm-advertorial .mm-hero-dark .mm-lede,
.mm-advertorial .mm-hero-dark .mm-lede p { color: rgba(250, 250, 248, 0.68); }

.mm-advertorial .mm-hairline.elementor-widget { max-width: none !important; }
.mm-advertorial .mm-hairline p {
  border-top: 1px solid rgba(250, 250, 248, 0.18);
  margin: 0; font-size: 0; line-height: 0;
}

/* Autorenzeile: rundes Portrait links, Name und Rolle rechts. */
.mm-advertorial .mm-author { --gap: 20px; --column-gap: 20px; --row-gap: 20px;
  flex-direction: row; align-items: flex-start; width: 100%; }
.mm-advertorial .mm-author-img.elementor-widget { flex: 0 0 66px; width: 66px; max-width: 66px !important; }
.mm-advertorial .mm-author-img img {
  width: 66px; height: 66px; border-radius: 50% !important;
  object-fit: cover; border: 1px solid rgba(250, 250, 248, 0.25);
}
.mm-advertorial .mm-author-text.elementor-widget { flex: 1 1 auto; max-width: 46ch !important; }
.mm-advertorial .mm-author-text p { color: var(--mm-btn-fg); font-size: 17px; line-height: 1.5; margin: 0; }
.mm-advertorial .mm-author-text .rolle {
  display: block; margin-top: 10px;
  font-family: var(--mm-display); font-size: 17px; color: var(--mm-btn-fg);
}
.mm-advertorial .mm-author-text .rolle em {
  font-style: italic; color: var(--mm-underline); margin-left: 10px;
}

/* Initial im ersten Absatz des Fliesstextes. */
.mm-advertorial .mm-dropcap p:first-of-type::first-letter {
  float: left; font-family: var(--mm-display); font-weight: 700;
  font-size: 4.1em; line-height: 0.8;
  padding: 0.04em 0.09em 0 0; color: var(--mm-ink);
}

@media (max-width: 767px) {
  .mm-advertorial .mm-hero-dark > .e-con-inner { padding: 22px 22px 36px; }
  .mm-advertorial .mm-capstrip p { font-size: 17px; padding: 14px 18px; }
  .mm-advertorial .mm-author { flex-direction: row; }
  .mm-advertorial .mm-author-text p { font-size: 16px; }
  .mm-advertorial .mm-dropcap p:first-of-type::first-letter { font-size: 3.6em; }
}
/* Im Hero laeuft das Bild nicht ueber die volle Breite, sonst passt der
   weisse Streifen darunter nicht zu seiner Kante. */
.mm-advertorial .mm-hero-dark .mm-figure.elementor-widget {
  width: 100%;
  max-width: 100% !important;
  margin-left: 0;
  transform: none;
}
.mm-advertorial .mm-hero-dark .mm-figure img { max-height: none; }

/* Elementor setzt die Richtung des Containers selbst, deshalb hier beide Ebenen. */
.mm-advertorial .mm-author.e-con,
.mm-advertorial .mm-author > .e-con-inner {
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* Der erste Absatz ist kurz. Ohne diese Zeile reisst der Absatzabstand
   mitten durch das Initial. */
.mm-advertorial .mm-dropcap p:first-of-type + p { margin-top: 0.25em; }
/* Ohne Zitat darueber sitzt die Zeile direkt neben dem Portrait. */
.mm-advertorial .mm-author-text .rolle { margin-top: 0; }
.mm-advertorial .mm-author-text .rolle:first-child { padding-top: 20px; }

/* =====================================================================
   Zeitleiste. Drei Etappen nebeneinander, oben von einer durchgehenden
   Haarlinie zusammengehalten. Auf schmalen Displays gestapelt, dann
   traegt jede Etappe ihre eigene Linie.
   ===================================================================== */
.mm-advertorial .mm-timeline,
.mm-advertorial .mm-timeline > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  width: 100%;
}
.mm-advertorial .mm-step.elementor-widget { max-width: none !important; }
.mm-advertorial .mm-step p {
  border-top: 1px solid var(--mm-paper-rule);
  padding-top: 20px;
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--mm-body);
}
.mm-advertorial .mm-step .nr {
  display: block;
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: 42px;
  line-height: 1;
  color: var(--mm-underline);
  margin-bottom: 12px;
}
.mm-advertorial .mm-step .zeit {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mm-kicker);
  margin-bottom: 9px;
}

@media (max-width: 767px) {
  .mm-advertorial .mm-timeline,
  .mm-advertorial .mm-timeline > .e-con-inner { grid-template-columns: 1fr; gap: 0; }
  .mm-advertorial .mm-step p { padding: 18px 0; }
  .mm-advertorial .mm-step .nr { font-size: 34px; margin-bottom: 8px; }
}

/* Quadratisches Heldenbild. aspect-ratio plus object-fit schneidet zu, statt
   zu strecken. Die Selektoren muessen die Hero- und die Desktop-Regel
   ueberbieten, sonst deckelt max-height 560 das Quadrat zu einem Band. */
body.mm-advertorial .mm-hero-dark .mm-hero-img.elementor-widget {
  width: 100%;
  max-width: 100% !important;
  margin-left: 0;
  transform: none;
}
body.mm-advertorial .mm-hero-dark .mm-hero-img img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: 50% 40%;
  max-height: none;
}
@media (min-width: 768px) {
  body.mm-advertorial .mm-hero-dark .mm-hero-img.elementor-widget { max-width: 560px !important; }
}
/* Der Streifen muss auf die Kante des Bildes, nicht auf die Spaltenbreite. */
@media (min-width: 768px) {
  body.mm-advertorial .mm-hero-dark .mm-capstrip.elementor-widget { max-width: 560px !important; }
}

/* ==========================================================================
   Listicle-Format. Baut auf denselben Tokens auf wie das Advertorial,
   setzt aber eine eigene Flaeche: Ziffer, Bild, Behauptung, Merksatz.
   Alle Bilder gleich beschnitten, sonst zerfaellt der Listencharakter.
   ========================================================================== */

/* Kopfleiste */
.mm-listicle .mm-topbar { background: var(--mm-ink); width: 100%; }
.mm-listicle .mm-topbar > .e-con-inner { padding: 15px 20px; }
.mm-listicle .mm-topbar .mm-wordmark p {
  margin: 0;
  color: var(--mm-btn-fg);
  text-align: center;
  font-family: var(--mm-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

/* Vertrauensleiste. Vier Angaben, keine Kacheln, nur Zwischenraum. */
.mm-listicle .mm-ticker { width: 100%; border-bottom: 1px solid var(--mm-paper-rule); }
.mm-listicle .mm-ticker > .e-con-inner { padding: 13px 18px; }
.mm-listicle .mm-ticker p {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 7px 24px; margin: 0;
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mm-kicker);
}
.mm-listicle .mm-ticker span { white-space: nowrap; }

/* Hero */
.mm-listicle .mm-lhero > .e-con-inner { padding: 34px 22px 8px; }
.mm-listicle .mm-sub p {
  margin: 0; font-size: 18px; line-height: 1.5; color: var(--mm-kicker);
}
.mm-listicle .mm-offerstrip p {
  margin: 0; background: var(--mm-panel); padding: 15px 20px;
  text-align: center; font-size: 15px; line-height: 1.5; color: var(--mm-ink);
}
.mm-listicle .mm-offerstrip strong { font-weight: 700; }

/* Ein Listenpunkt */
.mm-listicle .mm-item { width: 100%; }
.mm-listicle .mm-num p {
  margin: 0 0 6px;
  font-family: var(--mm-display); font-weight: 700;
  font-size: 40px; line-height: 1; color: var(--mm-underline);
  border-top: 1px solid var(--mm-paper-rule); padding-top: 22px;
}

/* Alle Punktbilder im selben Schnitt. Gedeckelt wird ueber die Breite. */
body.mm-listicle .mm-item .mm-figure img,
body.mm-listicle .mm-shot img {
  width: 100%; height: auto; max-height: none;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 50%;
}

/* Herkunftszeile */
.mm-listicle .mm-meta p {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0;
  border-top: 1px solid var(--mm-paper-rule);
  border-bottom: 1px solid var(--mm-paper-rule);
}
.mm-listicle .mm-meta .cell { display: block; padding: 12px 0; }
.mm-listicle .mm-meta .cell + .cell {
  padding-left: 20px; border-left: 1px solid var(--mm-paper-rule);
}
.mm-listicle .mm-meta .k {
  display: block; margin-bottom: 4px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mm-kicker);
}
.mm-listicle .mm-meta .v {
  display: block; font-size: 15px; font-weight: 600; color: var(--mm-ink);
}

/* Der Merksatz. Die eine Hervorhebung je Punkt. */
.mm-listicle .mm-take p {
  margin: 0; border-left: 3px solid var(--mm-underline); padding-left: 18px;
  font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--mm-ink);
}

/* Schlussblock */
.mm-listicle .mm-aside p {
  margin: 0; background: var(--mm-panel); padding: 20px 22px;
  font-size: 16px; line-height: 1.6; color: var(--mm-body);
}
.mm-listicle .mm-aside .lab {
  display: block; margin-bottom: 8px;
  font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mm-kicker);
}
.mm-listicle .mm-aside a {
  color: var(--mm-gold); text-decoration: underline; text-underline-offset: 3px;
}

/* FAQ ohne Klappmechanik, damit im Editor jede Zeile greifbar bleibt */
.mm-listicle .mm-faq-q { width: 100%; border-top: 1px solid var(--mm-paper-rule); padding-top: 17px; }
.mm-listicle .mm-faq-q .elementor-heading-title {
  margin: 0; font-family: var(--mm-sans);
  font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--mm-ink);
}
.mm-listicle .mm-faq-a p {
  margin: 7px 0 0; font-size: 16px; line-height: 1.6; color: var(--mm-body);
}

/* Desktop. Der Punktrhythmus bleibt einspaltig, nur die Masse waechst. */
@media (min-width: 768px) {
  body.mm-listicle .mm-item .mm-figure.elementor-widget,
  body.mm-listicle .mm-shot.elementor-widget { max-width: 720px !important; }
}
@media (min-width: 1025px) {
  .mm-listicle .mm-lhero > .e-con-inner { padding-top: 52px; }
  .mm-listicle .mm-num p { font-size: 52px; padding-top: 30px; }
  .mm-listicle .mm-sub p { font-size: 20px; }
  .mm-listicle .mm-take p { font-size: 20px; }
  .mm-listicle .mm-ticker p { font-size: 12px; gap: 8px 34px; }
}
@media (max-width: 480px) {
  .mm-listicle .mm-meta p { grid-template-columns: 1fr; }
  .mm-listicle .mm-meta .cell + .cell {
    padding-left: 0; border-left: 0; border-top: 1px solid var(--mm-paper-rule);
  }
}

/* Nachtrag Listicle: Dachzeile und Randkorrekturen */
.mm-listicle .mm-kicker p {
  margin: 0;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mm-kicker);
}
/* Die Linie gehoert an den Container, nicht zusaetzlich an das Textwidget */
.mm-listicle .mm-ticker { border-bottom: 0; }
.mm-listicle .mm-ticker.e-con { border-bottom: 1px solid var(--mm-paper-rule); }

/* Nachtrag Listicle 2: gemeinsame rechte Kante fuer Bild, Herkunft und Merksatz */
@media (min-width: 768px) {
  body.mm-listicle .mm-meta.elementor-widget,
  body.mm-listicle .mm-take.elementor-widget,
  body.mm-listicle .mm-offerstrip.elementor-widget,
  body.mm-listicle .mm-aside.elementor-widget { max-width: 720px !important; }
}
@media (min-width: 1025px) {
  body.mm-listicle .mm-item .mm-h2 .elementor-heading-title { max-width: 30ch; }
}

/* Nachtrag Listicle 3: mm-why liegt hier eine Ebene tiefer und bekommt einen
   e-con-inner. Traegt aussen und innen dasselbe Grid, entstehen 42px breite
   Spalten. Das Raster gehoert deshalb nur an den inneren Wrapper. */
body.mm-listicle .mm-why.e-con { display: block; }
body.mm-listicle .mm-why > .e-con-inner {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px; width: 100%;
}
@media (max-width: 900px) {
  body.mm-listicle .mm-why > .e-con-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
}
@media (max-width: 520px) {
  body.mm-listicle .mm-why > .e-con-inner { grid-template-columns: 1fr; gap: 18px; }
}

/* ==========================================================================
   Vertikaler Rhythmus des Listicles.
   Die Spacer-Widgets rendern in Elementor 4.2.3 mit Hoehe 0, deshalb haengt
   der Abstand hier an den Bloecken selbst. Elementors eigene Regel
   .elementor.elementor .e-con > .elementor-widget ist (0,4,0) und nullt jeden
   unteren Aussenabstand, darum das !important.
   ========================================================================== */
body.mm-listicle .mm-kicker.elementor-widget    { margin-bottom: 14px !important; }
body.mm-listicle .mm-lhero .mm-h1.elementor-widget { margin-bottom: 16px !important; }
body.mm-listicle .mm-sub.elementor-widget       { margin-bottom: 26px !important; }
body.mm-listicle .mm-offerstrip.elementor-widget { margin: 24px 0 22px !important; }
body.mm-listicle .mm-lhero .mm-actions          { margin-bottom: 36px !important; }

body.mm-listicle .mm-lede.elementor-widget      { margin-bottom: 34px !important; }

body.mm-listicle .mm-num.elementor-widget       { margin-bottom: 6px !important; }
body.mm-listicle .mm-item .mm-h2.elementor-widget { margin-bottom: 20px !important; }
body.mm-listicle .mm-item .mm-figure.elementor-widget { margin-bottom: 18px !important; }
body.mm-listicle .mm-meta.elementor-widget      { margin-bottom: 20px !important; }
body.mm-listicle .mm-item .mm-measure.elementor-widget { margin-bottom: 20px !important; }
body.mm-listicle .mm-take.elementor-widget      { margin-bottom: 36px !important; }

body.mm-listicle .mm-actions                    { margin-bottom: 36px !important; }
body.mm-listicle .mm-h2.elementor-widget        { margin-bottom: 20px !important; }
body.mm-listicle .mm-shot.elementor-widget      { margin-bottom: 0 !important; }
body.mm-listicle .mm-caption.elementor-widget   { margin-bottom: 26px !important; }
body.mm-listicle .mm-why.e-con                  { margin-bottom: 30px !important; }
body.mm-listicle .mm-aside.elementor-widget     { margin: 4px 0 38px !important; }
body.mm-listicle .mm-rating.elementor-widget    { margin-bottom: 22px !important; }
body.mm-listicle .mm-seal.e-con                 { margin-bottom: 36px !important; }
body.mm-listicle .mm-faq-q.elementor-widget     { margin-top: 20px !important; }
body.mm-listicle .mm-faq-a.elementor-widget     { margin-bottom: 0 !important; }

/* ==========================================================================
   Nachtrag Listicle 4: dunkler Auftakt bis zur Einleitung, ab Punkt 01 Papier.
   Dazu ein engerer Rhythmus als in der ersten Fassung.
   ========================================================================== */
.mm-listicle .mm-hero-dark > .e-con-inner { padding: 24px 22px 30px; }
.mm-listicle .mm-hero-dark .mm-kicker p { color: rgba(250, 250, 248, 0.5); }
.mm-listicle .mm-hero-dark .mm-sub p   { color: rgba(250, 250, 248, 0.66); }
.mm-listicle .mm-hero-dark .mm-cta a,
.mm-listicle .mm-hero-dark .mm-cta .elementor-button {
  background-color: var(--mm-btn-fg);
  color: var(--mm-ink);
}

/* Bewertungsleiste unter dem Heldenbild, sitzt ohne Fuge an seiner Kante */
.mm-listicle .mm-stars.elementor-widget { max-width: none !important; }
.mm-listicle .mm-stars p {
  margin: 0; padding: 13px 18px; text-align: center;
  background: rgba(250, 250, 248, 0.07);
  font-size: 14px; letter-spacing: 0.02em;
  color: rgba(250, 250, 248, 0.86);
}
.mm-listicle .mm-stars .s {
  color: var(--mm-underline);
  font-size: 15px; letter-spacing: 0.16em; margin-right: 9px;
}

/* Engerer Rhythmus. Ueberschreibt die Werte der ersten Fassung. */
body.mm-listicle .mm-kicker.elementor-widget          { margin-bottom: 10px !important; }
body.mm-listicle .mm-hero-dark .mm-h1.elementor-widget { margin-bottom: 12px !important; }
body.mm-listicle .mm-sub.elementor-widget             { margin-bottom: 20px !important; }
body.mm-listicle .mm-hero-dark .mm-actions            { margin: 20px 0 30px !important; }
body.mm-listicle .mm-lede.elementor-widget            { margin-bottom: 0 !important; }
body.mm-listicle .mm-num.elementor-widget             { margin-bottom: 4px !important; }
body.mm-listicle .mm-item .mm-h2.elementor-widget     { margin-bottom: 16px !important; }
body.mm-listicle .mm-item .mm-figure.elementor-widget { margin-bottom: 14px !important; }
body.mm-listicle .mm-meta.elementor-widget            { margin-bottom: 16px !important; }
body.mm-listicle .mm-item .mm-measure.elementor-widget { margin-bottom: 16px !important; }
body.mm-listicle .mm-take.elementor-widget            { margin-bottom: 28px !important; }
body.mm-listicle .mm-actions                          { margin-bottom: 28px !important; }
body.mm-listicle .mm-h2.elementor-widget              { margin-bottom: 16px !important; }
body.mm-listicle .mm-caption.elementor-widget         { margin-bottom: 20px !important; }
body.mm-listicle .mm-why.e-con                        { margin-bottom: 24px !important; }
body.mm-listicle .mm-aside.elementor-widget           { margin: 2px 0 30px !important; }
body.mm-listicle .mm-rating.elementor-widget          { margin-bottom: 18px !important; }
body.mm-listicle .mm-seal.e-con                       { margin-bottom: 28px !important; }
body.mm-listicle .mm-faq-q.elementor-widget           { margin-top: 16px !important; }
.mm-listicle .mm-num p { padding-top: 18px; }
@media (min-width: 1025px) {
  .mm-listicle .mm-num p { padding-top: 24px; }
}

/* Nachtrag Listicle 5: Marke und Dachzeile brauchen eine Fuge, der Spacer traegt nicht */
body.mm-listicle .mm-hero-dark .mm-wordmark.elementor-widget { margin-bottom: 22px !important; }

/* ==========================================================================
   Nachtrag Listicle 6: Schweizer Fettschrift auf den Buttons, saubere
   Bewertungsleiste, und der Routine-Abschnitt mit der Aleppo Seife.
   ========================================================================== */

/* Suisse Intl liegt noch nicht im Theme. Der Name steht vorn, bis dahin
   traegt Figtree 700 den Fettschnitt. */
.mm-listicle .mm-cta .elementor-button {
  font-family: "Suisse Intl", "SuisseIntl-Bold", "SuisseIntl-Medium", var(--mm-sans);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.1em;
}

/* Die Sterne tragen Buchstabenabstand, der hinter dem letzten Stern haengen
   bleibt und die Gruppe aus der Mitte schiebt. Deshalb wird er dort abgezogen. */
.mm-listicle .mm-stars p {
  display: flex; align-items: center; justify-content: center;
  gap: 11px; margin: 0;
  padding: 13px 18px;
  background: rgba(250, 250, 248, 0.07);
  font-size: 14px; letter-spacing: 0.01em;
  color: rgba(250, 250, 248, 0.86);
}
.mm-listicle .mm-stars .s {
  color: var(--mm-underline);
  font-size: 16px; line-height: 1;
  letter-spacing: 0.16em; margin-right: -0.16em;
}

/* Routine-Abschnitt */
.mm-listicle .mm-routine { width: 100%; background: var(--mm-panel); }
.mm-listicle .mm-routine > .e-con-inner { padding: 32px 22px 30px; }
.mm-listicle .mm-routine .mm-kicker p { color: var(--mm-kicker); }
.mm-listicle .mm-routine .mm-meta p {
  border-color: rgba(25, 25, 25, 0.16);
}
.mm-listicle .mm-routine .mm-meta .cell + .cell { border-left-color: rgba(25, 25, 25, 0.16); }

/* Zwei Schritte nebeneinander. Das Raster gehoert an den inneren Wrapper. */
.mm-listicle .mm-steps.e-con { display: block; width: 100%; }
.mm-listicle .mm-steps > .e-con-inner {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; width: 100%; padding: 0;
}
.mm-listicle .mm-step2 p {
  margin: 0; padding-top: 16px;
  border-top: 1px solid rgba(25, 25, 25, 0.2);
  font-size: 15px; line-height: 1.5; color: var(--mm-body);
}
.mm-listicle .mm-step2 .nr {
  display: block; margin-bottom: 8px;
  font-family: var(--mm-display); font-weight: 700;
  font-size: 30px; line-height: 1; color: var(--mm-underline);
}
.mm-listicle .mm-step2 .tt {
  display: block; margin-bottom: 5px;
  font-family: var(--mm-sans); font-weight: 700;
  font-size: 16px; color: var(--mm-ink);
}

/* Preiszeile des Sets */
.mm-listicle .mm-setprice p {
  margin: 0; padding: 14px 16px; text-align: center;
  border: 1px solid rgba(25, 25, 25, 0.2);
  font-size: 15px; line-height: 1.4; color: var(--mm-ink);
}
.mm-listicle .mm-setprice s { color: var(--mm-kicker); }
.mm-listicle .mm-setprice strong { font-weight: 700; }

body.mm-listicle .mm-routine .mm-figure.elementor-widget,
body.mm-listicle .mm-steps.e-con,
body.mm-listicle .mm-setprice.elementor-widget { max-width: 720px !important; }
body.mm-listicle .mm-routine .mm-figure img {
  width: 100%; height: auto; max-height: none;
  aspect-ratio: 4 / 3; object-fit: cover;
}
body.mm-listicle .mm-steps.e-con        { margin-bottom: 26px !important; }
body.mm-listicle .mm-setprice.elementor-widget { margin-bottom: 20px !important; }

/* Ohne Wortmarke faengt der dunkle Block direkt mit der Dachzeile an */
.mm-listicle .mm-hero-dark > .e-con-inner { padding-top: 26px; }
@media (min-width: 1025px) {
  .mm-listicle .mm-hero-dark > .e-con-inner { padding-top: 34px; }
}

/* Nachtrag Listicle 7 */
/* Im Routine-Block bleibt das Bild in der Flaeche, die Vollbreite-Regel wird
   zurueckgenommen, sonst laeuft es ueber die Panelkante hinaus. */
body.mm-listicle .mm-routine .mm-figure.elementor-widget {
  width: 100%; max-width: 100% !important;
  margin-left: 0; transform: none;
}
@media (min-width: 768px) {
  body.mm-listicle .mm-routine .mm-figure.elementor-widget { max-width: 720px !important; }
}

/* Die Bewertungszeile bleibt einzeilig, sonst kippt die Mitte */
.mm-listicle .mm-stars p { font-size: 13px; gap: 10px; }
.mm-listicle .mm-stars .s { font-size: 15px; }
.mm-listicle .mm-stars span + span { white-space: nowrap; }
@media (min-width: 480px) {
  .mm-listicle .mm-stars p { font-size: 14px; gap: 12px; }
  .mm-listicle .mm-stars .s { font-size: 16px; }
}

/* Nachtrag Listicle 8: Der Hero laeuft ueber die volle Breite des dunklen
   Blocks. Ohne eigene Angabe schneidet die 560er Hoehenbegrenzung aus dem
   Advertorial das 4:3 auf ein zufaelliges Format. Deshalb hier ein bewusstes
   Breitformat ab Tablet, gedeckelt ueber die Breite statt ueber die Hoehe. */
body.mm-listicle .mm-hero-dark .mm-shot img { max-height: none; }
@media (min-width: 768px) {
  body.mm-listicle .mm-hero-dark .mm-shot img { aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   Nachtrag Listicle 9: Heldenbild mit Zutatenleiste.
   Links fuenf feine Goldkreise mit dem Namen daneben, rechts das Portraet.
   Die Beschriftung ist echter Text, kein Bildinhalt: so bleibt sie scharf,
   korrekt geschrieben und im Editor aenderbar.
   ========================================================================== */
.mm-listicle .mm-herosplit.e-con { display: block; width: 100%; }
.mm-listicle .mm-herosplit > .e-con-inner { display: block; padding: 0; width: 100%; }

.mm-listicle .mm-heroing.e-con { display: block; width: 100%; }
.mm-listicle .mm-heroing > .e-con-inner {
  display: grid; grid-template-columns: 1fr; gap: 13px; width: 100%; padding: 0;
}

.mm-listicle .mm-hi .elementor-image-box-wrapper {
  display: flex; align-items: center; gap: 14px; text-align: left;
}
.mm-listicle .mm-hi .elementor-image-box-img {
  flex: 0 0 auto; margin: 0;
  border: 1px solid var(--mm-underline);
  border-radius: 50%; padding: 4px; line-height: 0;
}
body.mm-listicle .mm-hi .elementor-image-box-img img {
  display: block; width: 50px; height: 50px; max-height: none;
  border-radius: 50%; object-fit: cover; aspect-ratio: 1 / 1;
}
.mm-listicle .mm-hi .elementor-image-box-title {
  margin: 0;
  font-family: "Suisse Intl", "SuisseIntl-Bold", "SuisseIntl-Medium", var(--mm-sans);
  font-weight: 700; font-size: 14px; line-height: 1.2; letter-spacing: 0.01em;
  color: var(--mm-btn-fg);
}
.mm-listicle .mm-hi .elementor-image-box-description { display: none; }

/* Das Portraet steht hochkant, nicht im Breitformat wie das alte Heldenbild */
body.mm-listicle .mm-herosplit .mm-shot img { aspect-ratio: 4 / 5; }

@media (min-width: 768px) {
  .mm-listicle .mm-herosplit > .e-con-inner {
    display: grid; grid-template-columns: minmax(190px, 34%) 1fr;
    gap: 32px; align-items: center;
  }
  .mm-listicle .mm-heroing.e-con { order: -1; }
  body.mm-listicle .mm-herosplit .mm-shot.elementor-widget { max-width: 100% !important; }
  body.mm-listicle .mm-herosplit .mm-shot img { aspect-ratio: 3 / 4; }
  body.mm-listicle .mm-hi .elementor-image-box-img img { width: 58px; height: 58px; }
  .mm-listicle .mm-hi .elementor-image-box-title { font-size: 15px; }
  .mm-listicle .mm-heroing > .e-con-inner { gap: 18px; }
}

/* Nachtrag Listicle 10: Der Kit setzt Radius 0 auf alles, deshalb muss der
   Kreis hier ueberschrieben werden. Der Rahmen braucht ausserdem eine eigene
   Breite, sonst zieht er sich ueber die ganze Zelle. */
.mm-listicle .mm-hi .elementor-image-box-img {
  flex: 0 0 auto; margin: 0; width: max-content;
  border: 1px solid var(--mm-underline);
  border-radius: 50% !important;
  padding: 4px; line-height: 0;
}
body.mm-listicle .mm-hi .elementor-image-box-img img { border-radius: 50% !important; }

/* Das Portraet soll die Spalte nicht sprengen */
@media (min-width: 768px) {
  .mm-listicle .mm-herosplit > .e-con-inner {
    grid-template-columns: minmax(190px, 30%) minmax(0, 460px);
    justify-content: start;
  }
}

/* Nachtrag Listicle 11: Der Rahmen braucht feste Masse, max-content liefert
   hier eine Ellipse statt eines Kreises. */
.mm-listicle .mm-hi .elementor-image-box-img {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; box-sizing: border-box; padding: 0;
}
body.mm-listicle .mm-hi .elementor-image-box-img img { width: 52px; height: 52px; }
@media (min-width: 768px) {
  .mm-listicle .mm-hi .elementor-image-box-img { width: 70px; height: 70px; }
  body.mm-listicle .mm-hi .elementor-image-box-img img { width: 59px; height: 59px; }
}

/* Nachtrag Listicle 12: Elementor gibt dem Bildteil einer Image-Box 30 Prozent
   Breite. Das macht aus dem Kreis eine Ellipse, also feste Masse erzwingen. */
.mm-listicle .mm-hi .elementor-image-box-img {
  flex: 0 0 62px !important;
  width: 62px !important; height: 62px !important;
}
@media (min-width: 768px) {
  .mm-listicle .mm-hi .elementor-image-box-img {
    flex: 0 0 70px !important;
    width: 70px !important; height: 70px !important;
  }
}

/* Nachtrag Listicle 13: Das Heldenbild traegt die Zutaten jetzt selbst und
   steht deshalb quadratisch, auf jedem Bildschirm gleich. Das Produktbild mit
   dem Dermatest-Siegel ebenfalls, sonst schneidet der 4:3-Zuschnitt das
   Siegel oben ab. */
body.mm-listicle .mm-hero-dark .mm-shot img { aspect-ratio: 1 / 1; max-height: none; }
@media (min-width: 768px) {
  body.mm-listicle .mm-hero-dark .mm-shot img { aspect-ratio: 1 / 1; }
  body.mm-listicle .mm-hero-dark .mm-shot.elementor-widget { max-width: 620px !important; }
}
body.mm-listicle .mm-produkt img { aspect-ratio: 1 / 1; max-height: none; }

/* Nachtrag C230: mehr Luft ueber dem Vorfahren-Bild, weniger unter der
   Trennlinie im Hero. Die Spacer-Widgets tragen in Elementor 4.2.3 nicht,
   deshalb steht der Abstand hier. */
body.mm-advertorial .mm-gap-top.elementor-widget { margin-top: 34px !important; }
@media (min-width: 768px) {
  body.mm-advertorial .mm-gap-top.elementor-widget { margin-top: 44px !important; }
}

/* Ohne Autorenblock schliesst die Trennlinie den Hero ab, dann darf unten
   deutlich weniger Luft stehen. Heroes mit Autorenblock bleiben unberuehrt. */
.mm-advertorial .mm-hero-dark > .e-con-inner:not(:has(.mm-author)) { padding-bottom: 12px; }
@media (min-width: 768px) {
  .mm-advertorial .mm-hero-dark > .e-con-inner:not(:has(.mm-author)) { padding-bottom: 18px; }
}

/* Garantiestreifen direkt ueber dem letzten Button */
.mm-listicle .mm-guarantee p {
  margin: 0; background: var(--mm-panel); padding: 17px 20px;
  font-size: 16px; line-height: 1.5; color: var(--mm-ink);
}
.mm-listicle .mm-guarantee strong { font-weight: 700; }
body.mm-listicle .mm-guarantee.elementor-widget { margin-bottom: 20px !important; }
@media (min-width: 768px) {
  body.mm-listicle .mm-guarantee.elementor-widget { max-width: 720px !important; }
}

/* Die 560er Hoehenbegrenzung der Vollbreite-Figur deckelt auch das
   Produktbild und schneidet damit das Siegel ab. */
body.mm-listicle .mm-figure.mm-produkt img {
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  max-height: none !important;
  height: auto !important;
}

/* Die Frage in der Einleitung wirkt als Zwischenkopf, die Antwort darunter
   sitzt deshalb dichter dran als ein normaler Absatzwechsel. */
body.mm-listicle .mm-lede.elementor-widget { margin-top: 32px !important; }
.mm-listicle .mm-lede p.frage + p { margin-top: 7px; }

/* Die Zeitleiste fuehrt jetzt mit der Woche, nicht mit einer Zaehlnummer.
   Darueber ein Strichsymbol, das die Wirkung der Etappe aufnimmt. */
.mm-advertorial .mm-step .ico { display: block; margin-bottom: 14px; color: var(--mm-underline); }
.mm-advertorial .mm-step .ico svg { display: block; width: 27px; height: 27px; }
.mm-advertorial .mm-step .zeit {
  display: block;
  font-family: var(--mm-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mm-underline);
  margin-bottom: 12px;
}
@media (max-width: 767px) {
  .mm-advertorial .mm-step .zeit { font-size: 29px; margin-bottom: 10px; }
  .mm-advertorial .mm-step .ico { margin-bottom: 11px; }
  .mm-advertorial .mm-step .ico svg { width: 24px; height: 24px; }
}

/* Vergleichstabelle: auf dem Handy gestapelt statt seitlich gescrollt.
   Sonst liegt ausgerechnet die eigene Spalte ausserhalb des Bildes. */
@media (max-width: 767px) {
  .mm-listicle .mm-tablewrap { overflow-x: visible; }
  .mm-listicle .mm-table { min-width: 0; }
  .mm-listicle .mm-table thead { display: none; }
  .mm-listicle .mm-table tbody tr {
    display: block; border-top: 1px solid var(--mm-paper-rule); padding: 17px 0;
  }
  .mm-listicle .mm-table tbody th {
    display: block; width: auto; border: 0; padding: 0 0 11px;
    font-weight: 700; color: var(--mm-ink); font-size: 17px;
  }
  .mm-listicle .mm-table tbody td { display: block; border: 0; padding: 0 0 9px; }
  .mm-listicle .mm-table tbody td::before {
    content: attr(data-l); display: block; margin-bottom: 3px;
    font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mm-kicker);
  }
  .mm-listicle .mm-table tbody td:last-child { padding-bottom: 0; color: var(--mm-ink); font-weight: 600; }
}

/* ==========================================================================
   Shop-Skin. Fuer Seiten, die im Look von menmansion.com stehen sollen
   statt im Zeitungspapier der Advertorials. Dunkler Grund, Saol fuer die
   Ueberschriften, Suisse fuer alles andere, Gold als einziger Akzent.
   ========================================================================== */
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Medium.woff2") format("woff2");
  font-weight: 400 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Suisse Intl";
  src: url("fonts/SuisseIntl-Bold.woff2") format("woff2");
  font-weight: 600 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Saol";
  src: url("fonts/SaolStandard-Semibold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}

body.mm-shop {
  --ms-bg:    #191919;
  --ms-panel: #201f1e;
  --ms-line:  rgba(250, 250, 248, 0.13);
  --ms-fg:    #fafaf8;
  --ms-mut:   rgba(250, 250, 248, 0.62);
  --ms-gold:  #af9841;
  --ms-sans:  "Suisse Intl", "SuisseIntl-Medium", system-ui, sans-serif;
  --ms-disp:  "Saol", "Saol Standard", Georgia, serif;

  background: var(--ms-bg);
  color: var(--ms-mut);
  font-family: var(--ms-sans);
  font-weight: 500;
}
body.mm-shop .e-con,
body.mm-shop .e-con-inner { background: transparent; }
body.mm-shop .mm-wrap > .e-con-inner { padding-left: 22px; padding-right: 22px; }
@media (min-width: 1025px) {
  body.mm-shop .mm-wrap > .e-con-inner { padding-left: 0; padding-right: 0; }
}

/* Typografie */
body.mm-shop .mm-h1 .elementor-heading-title,
body.mm-shop .mm-h2 .elementor-heading-title {
  font-family: var(--ms-disp);
  font-weight: 600;
  color: var(--ms-fg);
  letter-spacing: -0.005em;
}
body.mm-shop .mm-h1 .elementor-heading-title { font-size: clamp(34px, 7vw, 58px); line-height: 1.06; }
body.mm-shop .mm-h2 .elementor-heading-title { font-size: clamp(26px, 4.4vw, 38px); line-height: 1.12; }
body.mm-shop .mm-h1 em,
body.mm-shop .mm-h2 em { font-style: normal; color: var(--ms-gold); }
body.mm-shop .mm-measure,
body.mm-shop .mm-measure p,
body.mm-shop .mm-lede,
body.mm-shop .mm-lede p { color: var(--ms-mut); font-size: 17px; line-height: 1.6; }
body.mm-shop .mm-lede p { font-size: 18px; }
body.mm-shop .mm-measure strong,
body.mm-shop .mm-lede strong { color: var(--ms-fg); font-weight: 700; }
body.mm-shop .mm-kicker p {
  font-family: var(--ms-sans); font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ms-gold); margin: 0;
}
body.mm-shop .mm-sub p { color: var(--ms-mut); font-size: 18px; line-height: 1.5; margin: 0; }
body.mm-shop .mm-caption,
body.mm-shop .mm-caption p { color: rgba(250,250,248,0.45); font-size: 13px; }
body.mm-shop .mm-note,
body.mm-shop .mm-note p { color: rgba(250,250,248,0.38); font-size: 12.5px; border-top: 1px solid var(--ms-line); padding-top: 16px; }

/* Nummern und Merksaetze */
body.mm-shop .mm-num p {
  font-family: var(--ms-disp); font-weight: 600; font-size: 15px;
  letter-spacing: 0.2em; color: var(--ms-gold); margin: 0 0 10px;
  border-top: 1px solid var(--ms-line); padding-top: 26px;
}
body.mm-shop .mm-take p {
  margin: 0; padding: 16px 20px; border: 0; border-left: 2px solid var(--ms-gold);
  background: var(--ms-panel);
  font-size: 17px; line-height: 1.45; font-weight: 700; color: var(--ms-fg);
}

/* Gegenueberstellung im Punkt */
body.mm-shop .mm-meta p {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1px; margin: 0;
  background: var(--ms-line); border: 1px solid var(--ms-line);
}
body.mm-shop .mm-meta .cell { display: block; padding: 14px 16px; background: var(--ms-bg); border: 0; }
body.mm-shop .mm-meta .cell + .cell { background: var(--ms-panel); padding-left: 16px; }
body.mm-shop .mm-meta .k {
  display: block; margin-bottom: 5px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(250,250,248,0.4);
}
body.mm-shop .mm-meta .cell + .cell .k { color: var(--ms-gold); }
body.mm-shop .mm-meta .v { display: block; font-size: 15px; font-weight: 500; color: var(--ms-mut); line-height: 1.4; }
body.mm-shop .mm-meta .cell + .cell .v { color: var(--ms-fg); font-weight: 700; }

/* Bilder */
body.mm-shop .mm-figure img { display: block; width: 100%; height: auto; }
body.mm-shop .mm-item .mm-figure img { aspect-ratio: 4/3; object-fit: cover; max-height: none; }

/* Sterne */
body.mm-shop .mm-stars p {
  margin: 0; padding: 14px 18px; text-align: center; background: var(--ms-panel);
  border: 1px solid var(--ms-line);
  font-size: 14px; color: var(--ms-fg); font-weight: 600;
}
body.mm-shop .mm-stars .s { color: var(--ms-gold); letter-spacing: 0.16em; margin-right: 10px; }

/* Buttons */
body.mm-shop .mm-cta .elementor-button {
  display: block; width: 100%; text-align: center;
  background: var(--ms-gold); color: #14130f;
  font-family: var(--ms-sans); font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 20px 26px; border: 0; border-radius: 0;
  transition: background-color .2s ease;
}
body.mm-shop .mm-cta .elementor-button:hover { background: #c2ab4e; color: #14130f; }

/* Garantie und Siegel */
body.mm-shop .mm-guarantee p {
  margin: 0; background: var(--ms-panel); border: 1px solid var(--ms-line);
  padding: 18px 20px; font-size: 16px; line-height: 1.5; color: var(--ms-mut);
}
body.mm-shop .mm-guarantee strong { color: var(--ms-fg); }
body.mm-shop .mm-seal.e-con,
body.mm-shop .mm-seal > .e-con-inner {
  display: flex; flex-direction: row; align-items: center; gap: 18px;
  background: var(--ms-panel); border: 1px solid var(--ms-line); padding: 18px 20px; width: 100%;
}
body.mm-shop .mm-seal-img.elementor-widget { flex: 0 0 62px; max-width: 62px !important; }
body.mm-shop .mm-seal-text p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ms-mut); }
body.mm-shop .mm-seal-text strong { display: block; color: var(--ms-fg); font-weight: 700; margin-bottom: 3px; }

/* Zitat */
body.mm-shop .mm-pullquote p {
  margin: 0; font-family: var(--ms-disp); font-weight: 600;
  font-size: clamp(21px, 3.4vw, 28px); line-height: 1.28; color: var(--ms-fg);
}
body.mm-shop .mm-byline p {
  margin: 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ms-gold);
}

/* ==========================================================================
   Die Vergleichstafel. Herzstueck der Seite: zwei Produktbilder oben,
   darunter Zeile fuer Zeile das Kriterium. Unsere Spalte traegt Gold und
   liegt auf einer eigenen Flaeche, die andere bleibt stumpf.
   ========================================================================== */
body.mm-shop .ms-vs { border: 1px solid var(--ms-line); background: var(--ms-bg); }

body.mm-shop .ms-vs-row {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 1.15fr);
  border-top: 1px solid var(--ms-line);
}
body.mm-shop .ms-vs-row:first-child { border-top: 0; }
body.mm-shop .ms-vs-row > div { padding: 20px 18px; }
body.mm-shop .ms-vs-crit {
  font-size: 15px; font-weight: 700; color: var(--ms-fg); line-height: 1.35;
  display: flex; align-items: center;
}
body.mm-shop .ms-vs-them { color: rgba(250,250,248,0.5); font-size: 15px; line-height: 1.4; }
body.mm-shop .ms-vs-us {
  color: var(--ms-fg); font-size: 15px; font-weight: 700; line-height: 1.4;
  background: rgba(175, 152, 65, 0.07);
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.3), inset -1px 0 0 rgba(175,152,65,0.3);
}
body.mm-shop .ms-vs-row.is-head > div { padding: 22px 18px 18px; }
body.mm-shop .ms-vs-row.is-head .ms-vs-us,
body.mm-shop .ms-vs-row.is-head .ms-vs-them { text-align: center; }
body.mm-shop .ms-vs-row.is-head img {
  display: block; width: 92px; height: 92px; object-fit: cover;
  margin: 0 auto 12px; border: 1px solid var(--ms-line);
}
body.mm-shop .ms-vs-row.is-head .ms-vs-us img { border-color: rgba(175,152,65,0.45); }
body.mm-shop .ms-vs-row.is-head span {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; line-height: 1.4;
}
body.mm-shop .ms-vs-row.is-head .ms-vs-them span { color: rgba(250,250,248,0.42); }
body.mm-shop .ms-vs-row.is-head .ms-vs-us span { color: var(--ms-gold); }

/* Haken und Kreuz */
body.mm-shop .ms-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; margin-right: 10px;
  vertical-align: -4px; flex: 0 0 20px;
}
body.mm-shop .ms-mark svg { width: 11px; height: 11px; display: block; }
body.mm-shop .ms-vs-us .ms-mark { background: var(--ms-gold); color: #14130f; }
body.mm-shop .ms-vs-them .ms-mark { background: rgba(250,250,248,0.12); color: rgba(250,250,248,0.5); }

@media (max-width: 767px) {
  body.mm-shop .ms-vs-row { display: block; }
  body.mm-shop .ms-vs-row > div { padding: 0; }
  body.mm-shop .ms-vs-row:not(.is-head) { padding: 18px 16px; }
  body.mm-shop .ms-vs-crit { display: block; margin-bottom: 12px; font-size: 17px; }
  body.mm-shop .ms-vs-them,
  body.mm-shop .ms-vs-us { box-shadow: none; background: transparent; padding: 0 !important; }
  body.mm-shop .ms-vs-them { margin-bottom: 9px; }
  body.mm-shop .ms-vs-them::before,
  body.mm-shop .ms-vs-us::before {
    content: attr(data-l); display: block; margin-bottom: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  }
  body.mm-shop .ms-vs-them::before { color: rgba(250,250,248,0.35); }
  body.mm-shop .ms-vs-us::before { color: var(--ms-gold); }
  body.mm-shop .ms-vs-row.is-head { display: grid; grid-template-columns: 1fr 1fr; padding: 18px 16px; }
  body.mm-shop .ms-vs-row.is-head .ms-vs-crit { display: none; }
  body.mm-shop .ms-vs-row.is-head .ms-vs-them,
  body.mm-shop .ms-vs-row.is-head .ms-vs-us { text-align: center; }
  body.mm-shop .ms-vs-row.is-head .ms-vs-them::before,
  body.mm-shop .ms-vs-row.is-head .ms-vs-us::before { content: none; }
  body.mm-shop .ms-vs-row.is-head img { width: 76px; height: 76px; }
}

/* Abstaende */
body.mm-shop .mm-kicker.elementor-widget      { margin-bottom: 14px !important; }
body.mm-shop .mm-h1.elementor-widget          { margin-bottom: 18px !important; }
body.mm-shop .mm-sub.elementor-widget         { margin-bottom: 26px !important; }
body.mm-shop .mm-stars.elementor-widget       { margin-bottom: 30px !important; }
body.mm-shop .mm-lede.elementor-widget        { margin-bottom: 0 !important; }
body.mm-shop .mm-num.elementor-widget         { margin-bottom: 4px !important; }
body.mm-shop .mm-item .mm-h2.elementor-widget { margin-bottom: 18px !important; }
body.mm-shop .mm-figure.elementor-widget      { margin-bottom: 16px !important; }
body.mm-shop .mm-meta.elementor-widget        { margin-bottom: 18px !important; }
body.mm-shop .mm-item .mm-measure.elementor-widget { margin-bottom: 18px !important; }
body.mm-shop .mm-take.elementor-widget        { margin-bottom: 34px !important; }
body.mm-shop .mm-h2.elementor-widget          { margin-bottom: 18px !important; }
body.mm-shop .mm-actions                      { margin-bottom: 32px !important; }
body.mm-shop .mm-guarantee.elementor-widget   { margin-bottom: 20px !important; }
body.mm-shop .mm-seal.e-con                   { margin-bottom: 32px !important; }
body.mm-shop .mm-caption.elementor-widget     { margin-bottom: 22px !important; }

@media (min-width: 768px) {
  body.mm-shop .mm-measure.elementor-widget,
  body.mm-shop .mm-lede.elementor-widget { max-width: 720px !important; }
  body.mm-shop .mm-item .mm-figure.elementor-widget,
  body.mm-shop .mm-meta.elementor-widget,
  body.mm-shop .mm-take.elementor-widget,
  body.mm-shop .mm-guarantee.elementor-widget,
  body.mm-shop .mm-actions { max-width: 720px !important; }
  body.mm-shop .mm-cta .elementor-button { display: inline-block; width: auto; min-width: 320px; }
}

/* Feinschliff Shop-Skin: groessere Produktbilder in der Tafel, die eigene
   Spalte deutlicher abgesetzt, Bilder ueber die volle Breite. */
body.mm-shop .ms-vs-row.is-head img { width: 124px; height: 124px; margin-bottom: 14px; }
body.mm-shop .ms-vs-row.is-head .ms-vs-them img { filter: brightness(0.72) saturate(0.7); }
body.mm-shop .ms-vs-row.is-head span { font-size: 11px; }
body.mm-shop .ms-vs-row.is-head .ms-vs-us {
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.3), inset -1px 0 0 rgba(175,152,65,0.3),
              inset 0 2px 0 var(--ms-gold);
}
body.mm-shop .ms-vs-row > div { padding: 22px 20px; }
body.mm-shop .ms-vs-crit { font-size: 16px; }
body.mm-shop .ms-vs-us { font-size: 16px; }
body.mm-shop .ms-vs { border-color: rgba(250,250,248,0.16); }

/* Bilder tragen auf dunklem Grund mehr, wenn sie die Spalte ausfuellen */
@media (min-width: 768px) {
  body.mm-shop .mm-hero-dark .mm-figure.elementor-widget { max-width: 720px !important; }
}
body.mm-shop .mm-hero-dark .mm-figure img { aspect-ratio: 4 / 3; object-fit: cover; max-height: none; }

/* Der Abschnittstitel darf mehr Luft nach unten haben */
body.mm-shop .ms-vs { margin-bottom: 4px; }

/* Korrektur: Marke und Text stehen nebeneinander, nicht untereinander.
   Und der Mobil-Reset muss nach dem Feinschliff stehen, sonst gewinnt
   die Desktop-Polsterung auch auf dem Handy. */
body.mm-shop .ms-vs-them,
body.mm-shop .ms-vs-us { display: flex; align-items: flex-start; gap: 11px; }
body.mm-shop .ms-vs-row.is-head .ms-vs-them,
body.mm-shop .ms-vs-row.is-head .ms-vs-us { display: block; }
body.mm-shop .ms-mark { margin-right: 0; margin-top: 1px; vertical-align: baseline; }

@media (max-width: 767px) {
  body.mm-shop .ms-vs-row:not(.is-head) { padding: 18px 16px; }
  body.mm-shop .ms-vs-row:not(.is-head) > div { padding: 0 !important; }
  body.mm-shop .ms-vs-crit { display: block; margin-bottom: 13px; font-size: 17px; }
  body.mm-shop .ms-vs-them { margin-bottom: 12px; }
  body.mm-shop .ms-vs-them,
  body.mm-shop .ms-vs-us { display: grid; grid-template-columns: 20px 1fr; column-gap: 11px; row-gap: 3px; }
  body.mm-shop .ms-vs-them::before,
  body.mm-shop .ms-vs-us::before { grid-column: 1 / -1; }
  body.mm-shop .ms-vs-row.is-head { padding: 20px 16px; }
  body.mm-shop .ms-vs-row.is-head > div { padding: 0 !important; }
}

/* ==========================================================================
   Vergleichsseite im Hollow-Aufbau: Tabelle ganz oben, danach je Punkt
   Bild, Ueberschrift und Text. Gestaltung bleibt Design Kit.
   ========================================================================== */

/* Kundenstimme direkt unter der Headline */
body.mm-shop .ms-quote {
  border: 1px solid var(--ms-line); background: var(--ms-panel); padding: 20px 22px;
}
body.mm-shop .ms-quote p { margin: 0; }
body.mm-shop .ms-quote .q {
  display: block; font-size: 17px; line-height: 1.45; color: var(--ms-fg); font-weight: 500;
}
body.mm-shop .ms-quote .n {
  display: block; margin-top: 12px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ms-gold);
}

/* Die Tafel: unsere Spalte steht vorn und liegt auf einer eigenen Flaeche */
body.mm-shop .ms-tab { border-top: 1px solid var(--ms-line); }
body.mm-shop .ms-tr {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr) minmax(0, 1fr);
  border-bottom: 1px solid var(--ms-line);
}
body.mm-shop .ms-tr > div { padding: 18px 18px; display: flex; align-items: center; }
body.mm-shop .ms-k { font-size: 14px; font-weight: 700; color: var(--ms-fg); }
body.mm-shop .ms-us {
  background: rgba(175, 152, 65, 0.09);
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.35), inset -1px 0 0 rgba(175,152,65,0.35);
  color: var(--ms-fg); font-size: 15px; font-weight: 700; line-height: 1.35;
}
body.mm-shop .ms-them { color: rgba(250,250,248,0.48); font-size: 15px; line-height: 1.35; }

body.mm-shop .ms-tr.is-head { border-bottom: 0; }
body.mm-shop .ms-tr.is-head > div { padding-top: 0; padding-bottom: 16px; align-items: flex-end; }
body.mm-shop .ms-tr.is-head .ms-us {
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.35), inset -1px 0 0 rgba(175,152,65,0.35),
              inset 0 3px 0 var(--ms-gold);
  padding-top: 18px;
}
body.mm-shop .ms-tr.is-head span {
  display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; line-height: 1.35;
}
body.mm-shop .ms-tr.is-head .ms-us span { color: var(--ms-gold); }
body.mm-shop .ms-tr.is-head .ms-them span { color: rgba(250,250,248,0.4); }

body.mm-shop .ms-summary p {
  margin: 0; font-size: 17px; line-height: 1.5; color: var(--ms-mut);
}
body.mm-shop .ms-summary strong { color: var(--ms-fg); font-weight: 700; }

/* Ein Punkt: Bild, Dachzeile, Ueberschrift, Text */
body.mm-shop .ms-eyebrow p {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ms-gold);
}
body.mm-shop .ms-eyebrow.elementor-widget { margin-bottom: 12px !important; }

@media (max-width: 767px) {
  body.mm-shop .ms-tr { grid-template-columns: 1fr; }
  body.mm-shop .ms-tr > div { padding: 0; display: block; }
  body.mm-shop .ms-tr:not(.is-head) { padding: 17px 0; }
  body.mm-shop .ms-k { margin-bottom: 11px; font-size: 16px; }
  body.mm-shop .ms-us,
  body.mm-shop .ms-them { box-shadow: none; background: transparent; }
  body.mm-shop .ms-us { margin-bottom: 9px; }
  body.mm-shop .ms-us::before,
  body.mm-shop .ms-them::before {
    content: attr(data-l); display: block; margin-bottom: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  }
  body.mm-shop .ms-us::before { color: var(--ms-gold); }
  body.mm-shop .ms-them::before { color: rgba(250,250,248,0.35); }
  body.mm-shop .ms-tr.is-head { display: none; }
}

/* Abstaende fuer den Hollow-Aufbau. Die Spacer-Widgets tragen nicht. */
body.mm-shop .ms-quote.elementor-widget   { margin-bottom: 34px !important; }
body.mm-shop .ms-tab-w.elementor-widget   { margin-bottom: 24px !important; }
body.mm-shop .ms-summary.elementor-widget { margin-bottom: 46px !important; }
body.mm-shop .mm-item .mm-figure.elementor-widget { margin-bottom: 20px !important; }
body.mm-shop .mm-item .mm-measure.elementor-widget { margin-bottom: 52px !important; }
body.mm-shop .mm-item .mm-h2.elementor-widget { margin-bottom: 14px !important; }
body.mm-shop .mm-note.elementor-widget    { margin-top: 30px !important; margin-bottom: 34px !important; }
body.mm-shop .mm-caption.elementor-widget { margin-bottom: 20px !important; }
@media (max-width: 767px) {
  body.mm-shop .ms-summary.elementor-widget { margin-bottom: 38px !important; }
  body.mm-shop .mm-item .mm-measure.elementor-widget { margin-bottom: 44px !important; }
}

/* Die Goldkante ueber der eigenen Spalte muss die spaetere Mobilregel ueberbieten. */
@media (min-width: 768px) {
  body.mm-shop .ms-tr .ms-us {
    box-shadow: inset 1px 0 0 rgba(175,152,65,0.35), inset -1px 0 0 rgba(175,152,65,0.35) !important;
  }
  body.mm-shop .ms-tr.is-head .ms-us {
    box-shadow: inset 1px 0 0 rgba(175,152,65,0.35), inset -1px 0 0 rgba(175,152,65,0.35), inset 0 3px 0 #af9841 !important;
  }
}

/* ==========================================================================
   Vergleichstafel nach dem Vorbild: die eigene Spalte ist eine abgesetzte
   Karte, die oben aus der Tabelle herausragt. Links das Kriterium mit Icon,
   rechts die Kategorie. Radius bleibt 0, das ist Kit.
   ========================================================================== */
body.mm-shop .ms-tab { border-top: 0; padding-top: 0; }
body.mm-shop .ms-tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr) minmax(0, 0.92fr);
  border-bottom: 1px solid var(--ms-line);
}
body.mm-shop .ms-tr > div { padding: 22px 20px; display: flex; align-items: center; }

/* Kriterium mit Icon darueber */
body.mm-shop .ms-k {
  display: block !important; font-size: 16px; font-weight: 700; color: var(--ms-fg); line-height: 1.25;
  padding-left: 0 !important;
}
body.mm-shop .ms-k .ic { display: block; color: var(--ms-gold); margin-bottom: 9px; }
body.mm-shop .ms-k .ic svg { display: block; width: 22px; height: 22px; }

/* Unsere Spalte als Karte */
body.mm-shop .ms-us {
  background: var(--ms-panel);
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.4), inset -1px 0 0 rgba(175,152,65,0.4) !important;
  color: var(--ms-fg); font-size: 15px; font-weight: 700; line-height: 1.4;
  text-align: center; justify-content: center;
}
body.mm-shop .ms-them {
  color: rgba(250,250,248,0.45); font-size: 15px; line-height: 1.4;
  text-align: center; justify-content: center;
}

/* Kopfzeile: unsere Spalte ist ein gefuellter Goldblock, der herausragt */
body.mm-shop .ms-tr.is-head { border-bottom: 0; align-items: end; }
body.mm-shop .ms-tr.is-head > div { padding: 0; }
body.mm-shop .ms-tr.is-head .ms-k { padding: 0 !important; }
body.mm-shop .ms-tr.is-head .ms-us {
  background: var(--ms-gold);
  box-shadow: none !important;
  padding: 26px 18px !important;
}
body.mm-shop .ms-tr.is-head .ms-us span {
  display: block; font-family: var(--ms-disp); font-weight: 600; font-size: 20px;
  letter-spacing: 0.02em; text-transform: none; color: #14130f; line-height: 1.1;
}
body.mm-shop .ms-tr.is-head .ms-them {
  padding: 26px 18px 22px !important;
}
body.mm-shop .ms-tr.is-head .ms-them span {
  display: block; font-family: var(--ms-disp); font-weight: 600; font-size: 18px;
  color: rgba(250,250,248,0.5); line-height: 1.15; text-transform: none; letter-spacing: 0;
}
/* Erste Datenzeile schliesst direkt an den Goldblock an */
body.mm-shop .ms-tr.is-head + .ms-tr { border-top: 0; }
body.mm-shop .ms-tr:last-child { border-bottom: 1px solid var(--ms-line); }
body.mm-shop .ms-tr:last-child .ms-us {
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.4), inset -1px 0 0 rgba(175,152,65,0.4),
              inset 0 -1px 0 rgba(175,152,65,0.4) !important;
}

@media (max-width: 767px) {
  body.mm-shop .ms-tr { grid-template-columns: 1fr; }
  body.mm-shop .ms-tr > div { padding: 0; display: block; text-align: left; }
  body.mm-shop .ms-tr:not(.is-head) { padding: 18px 0; }
  body.mm-shop .ms-k { margin-bottom: 13px; font-size: 17px; }
  body.mm-shop .ms-k .ic { display: inline-block; vertical-align: -5px; margin: 0 9px 0 0; }
  body.mm-shop .ms-us,
  body.mm-shop .ms-them {
    background: transparent; box-shadow: none !important; text-align: left; padding: 0 !important;
  }
  body.mm-shop .ms-us { margin-bottom: 10px; }
  body.mm-shop .ms-us::before,
  body.mm-shop .ms-them::before {
    content: attr(data-l); display: block; margin-bottom: 3px;
    font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  }
  body.mm-shop .ms-us::before { color: var(--ms-gold); }
  body.mm-shop .ms-them::before { color: rgba(250,250,248,0.35); }
  body.mm-shop .ms-tr.is-head { display: none; }
}

/* Die Trennlinien laufen nur durch die Aussenspalten, damit unsere Spalte
   als durchgehende Karte liest. */
@media (min-width: 768px) {
  body.mm-shop .ms-tr { border-bottom: 0; }
  body.mm-shop .ms-tr:not(.is-head) .ms-k,
  body.mm-shop .ms-tr:not(.is-head) .ms-them { border-bottom: 1px solid var(--ms-line); }
  body.mm-shop .ms-tr:not(.is-head) + .ms-tr:not(.is-head) .ms-k,
  body.mm-shop .ms-tr:not(.is-head) + .ms-tr:not(.is-head) .ms-them { border-top: 0; }
  body.mm-shop .ms-tr:last-child { border-bottom: 0; }
  body.mm-shop .ms-tr:last-child .ms-us {
    box-shadow: inset 1px 0 0 rgba(175,152,65,0.4), inset -1px 0 0 rgba(175,152,65,0.4),
                inset 0 -1px 0 rgba(175,152,65,0.4) !important;
  }
}

/* ==========================================================================
   Vergleichstafel Fassung 3: Kopfzeile mit Produktbild, und auf dem Handy
   bleibt die Tabelle eine Tabelle statt zu stapeln.
   ========================================================================== */
body.mm-shop .ms-tr.is-head .ms-us {
  background: #100f0e !important;
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.55), inset -1px 0 0 rgba(175,152,65,0.55),
              inset 0 1px 0 rgba(175,152,65,0.55) !important;
  padding: 20px 14px 16px !important;
}
body.mm-shop .ms-tr.is-head .ms-us span { color: var(--ms-gold) !important; font-size: 18px; }
body.mm-shop .ms-tr.is-head > div img {
  display: block; width: 100%; max-width: 108px; aspect-ratio: 1/1; object-fit: cover;
  margin: 0 auto 12px; border: 1px solid var(--ms-line);
}
body.mm-shop .ms-tr.is-head .ms-us img { border-color: rgba(175,152,65,0.45); }
body.mm-shop .ms-tr.is-head .ms-them img { filter: brightness(0.75) saturate(0.7); }
body.mm-shop .ms-tr.is-head .ms-them { padding: 20px 14px 16px !important; }

/* Handy: gequetscht, aber weiterhin dreispaltig */
@media (max-width: 767px) {
  body.mm-shop .ms-tab-w.elementor-widget {
    margin-left: -22px !important; margin-right: -22px !important;
    width: calc(100% + 44px) !important; max-width: none !important;
  }
  body.mm-shop .ms-tr {
    display: grid !important;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.05fr) minmax(0, 1fr);
    border-bottom: 0;
  }
  body.mm-shop .ms-tr > div { display: flex !important; padding: 13px 9px !important; }
  body.mm-shop .ms-tr:not(.is-head) { padding: 0 !important; }
  body.mm-shop .ms-tr.is-head { display: grid !important; }
  body.mm-shop .ms-tr.is-head > div { padding: 14px 9px 12px !important; }
  body.mm-shop .ms-tr.is-head > div img { max-width: 66px; margin-bottom: 9px; }
  body.mm-shop .ms-tr.is-head .ms-us span { font-size: 13px; }
  body.mm-shop .ms-tr.is-head .ms-them span { font-size: 13px; }

  body.mm-shop .ms-k {
    display: block !important; font-size: 12.5px; line-height: 1.25; margin-bottom: 0;
    align-self: center;
  }
  body.mm-shop .ms-k .ic { display: block; margin: 0 0 6px; }
  body.mm-shop .ms-k .ic svg { width: 17px; height: 17px; }
  body.mm-shop .ms-tr:not(.is-head) .ms-k,
  body.mm-shop .ms-tr:not(.is-head) .ms-them { border-bottom: 1px solid var(--ms-line); }

  body.mm-shop .ms-us,
  body.mm-shop .ms-them {
    text-align: center; justify-content: center; align-items: center;
    font-size: 12px; line-height: 1.3; margin-bottom: 0;
  }
  body.mm-shop .ms-us {
    background: var(--ms-panel) !important;
    box-shadow: inset 1px 0 0 rgba(175,152,65,0.4), inset -1px 0 0 rgba(175,152,65,0.4) !important;
  }
  body.mm-shop .ms-tr:last-child .ms-us {
    box-shadow: inset 1px 0 0 rgba(175,152,65,0.4), inset -1px 0 0 rgba(175,152,65,0.4),
                inset 0 -1px 0 rgba(175,152,65,0.4) !important;
  }
  body.mm-shop .ms-us::before,
  body.mm-shop .ms-them::before { content: none !important; }
}

/* Korrektur Handy-Tafel: Kopfzellen stapeln Bild ueber Label, das Kriterium
   steht unter seinem Symbol, alle Zellen sind oben ausgerichtet. */
@media (max-width: 767px) {
  body.mm-shop .ms-tr.is-head > div,
  body.mm-shop .ms-tr > div.ms-k { display: block !important; }
  body.mm-shop .ms-tr.is-head > div img {
    max-width: 100%; width: 100%; margin: 0 0 8px; aspect-ratio: 1/1;
  }
  body.mm-shop .ms-tr.is-head .ms-us span,
  body.mm-shop .ms-tr.is-head .ms-them span {
    font-size: 12px; line-height: 1.25; text-align: center;
  }
  body.mm-shop .ms-tr.is-head > div { padding: 12px 8px 11px !important; }
  body.mm-shop .ms-tr > div { padding: 12px 8px !important; align-items: flex-start; }
  body.mm-shop .ms-tr > div.ms-k { font-size: 12px; line-height: 1.2; }
  body.mm-shop .ms-k .ic { display: block !important; margin: 0 0 5px !important; }
  body.mm-shop .ms-k .ic svg { width: 16px; height: 16px; }
  body.mm-shop .ms-us,
  body.mm-shop .ms-them { font-size: 11.5px; line-height: 1.3; align-items: flex-start !important; }
  body.mm-shop .ms-tr { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.08fr) minmax(0, 1.02fr); }
}

/* ==========================================================================
   Tafel Fassung 4: Produktbilder freigestellt ueber den dunklen Grund
   geblendet, Emoji statt Strichsymbol, groessere Schrift, gleiche Ausrichtung
   in allen drei Spalten.
   ========================================================================== */
body.mm-shop .ms-tr.is-head > div img {
  border: 0 !important; background: transparent;
  mix-blend-mode: lighten;
  max-width: 150px; width: 100%; margin: 0 auto 14px;
  aspect-ratio: 1/1; object-fit: contain;
  filter: none !important;
}
body.mm-shop .ms-tr.is-head .ms-us  { padding: 22px 16px 18px !important; }
body.mm-shop .ms-tr.is-head .ms-them{ padding: 22px 16px 18px !important; }
body.mm-shop .ms-tr.is-head .ms-us span   { font-size: 21px !important; }
body.mm-shop .ms-tr.is-head .ms-them span { font-size: 20px !important; }

/* Emoji statt Icon, ueber dem Kriterium */
body.mm-shop .ms-k .em {
  display: block; font-size: 24px; line-height: 1; margin-bottom: 10px;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
body.mm-shop .ms-k { font-size: 18px !important; line-height: 1.25; }

/* Groessere Werte, gleiche Ausrichtung in allen Spalten */
body.mm-shop .ms-tr > div { padding: 24px 20px; align-items: center; }
body.mm-shop .ms-us   { font-size: 17px !important; line-height: 1.35; text-align: center; }
body.mm-shop .ms-them { font-size: 17px !important; line-height: 1.35; text-align: center;
                        color: rgba(250,250,248,0.5); }

@media (max-width: 767px) {
  body.mm-shop .ms-tr.is-head > div img { max-width: 82px; margin-bottom: 9px; }
  body.mm-shop .ms-tr.is-head .ms-us span,
  body.mm-shop .ms-tr.is-head .ms-them span { font-size: 14px !important; }
  body.mm-shop .ms-tr.is-head > div { padding: 14px 8px 12px !important; }
  body.mm-shop .ms-tr > div { padding: 15px 8px !important; align-items: center; }
  body.mm-shop .ms-tr > div.ms-k { font-size: 13.5px !important; line-height: 1.22; }
  body.mm-shop .ms-k .em { font-size: 20px; margin-bottom: 7px; }
  body.mm-shop .ms-us,
  body.mm-shop .ms-them { font-size: 13px !important; line-height: 1.3; align-items: center !important; }
  body.mm-shop .ms-tr { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.07fr) minmax(0, 1.03fr); }
}

/* Tafel Fassung 5: Kopfzellen sind schwarze Kacheln, die Produktbilder liegen
   auf demselben Schwarz und wirken dadurch freigestellt. Bild ueber Label. */
body.mm-shop .ms-tr.is-head > div { display: block !important; text-align: center; }
body.mm-shop .ms-tr.is-head .ms-us {
  background: #000 !important;
  box-shadow: inset 1px 0 0 rgba(175,152,65,0.55), inset -1px 0 0 rgba(175,152,65,0.55),
              inset 0 1px 0 rgba(175,152,65,0.55) !important;
  padding: 20px 16px 18px !important;
}
body.mm-shop .ms-tr.is-head .ms-them {
  background: #000 !important;
  box-shadow: inset 0 1px 0 var(--ms-line), inset 1px 0 0 var(--ms-line), inset -1px 0 0 var(--ms-line);
  padding: 20px 16px 18px !important;
}
body.mm-shop .ms-tr.is-head > div img {
  mix-blend-mode: normal !important;
  border: 0 !important; max-width: 168px; width: 100%;
  margin: 0 auto 12px; aspect-ratio: 1/1; object-fit: contain;
  filter: none !important;
}
@media (max-width: 767px) {
  body.mm-shop .ms-tr.is-head > div img { max-width: 92px; margin-bottom: 8px; }
  body.mm-shop .ms-tr.is-head > div { padding: 12px 7px 11px !important; }
}

/* ==========================================================================
   Tafel Fassung 6. Durchgehende Zeilenlinien, schwarze Men-Mansion-Spalte
   mit leichtem Ueberstand nach unten, keine Emojis, kein Kasten rechts.
   ========================================================================== */
body.mm-shop .ms-tab { border-top: 0; }
body.mm-shop .ms-tr { border-bottom: 0 !important; }
body.mm-shop .ms-tr > div { border-bottom: 0 !important; border-top: 0 !important; }

/* Linien laufen durch alle Spalten, auch durch die schwarze */
body.mm-shop .ms-tr:not(.is-head):not(.is-foot) > div {
  border-top: 1px solid var(--ms-line) !important;
}
body.mm-shop .ms-tr:not(.is-head):not(.is-foot):last-of-type > div { border-bottom: 0 !important; }

/* Die eigene Spalte: durchgehend schwarz, oben und unten gerundet */
body.mm-shop .ms-us {
  background: #000 !important;
  box-shadow: none !important;
  color: var(--ms-fg); font-weight: 700;
}
body.mm-shop .ms-tr:not(.is-head):not(.is-foot) .ms-us {
  border-top: 1px solid rgba(250,250,248,0.16) !important;
}
body.mm-shop .ms-tr.is-head .ms-us {
  background: #000 !important; box-shadow: none !important;
  border-radius: 2px 2px 0 0;
}
body.mm-shop .ms-tr.is-foot > div { padding: 0 !important; border: 0 !important; }
body.mm-shop .ms-tr.is-foot .ms-us {
  height: 26px; background: #000 !important; border-radius: 0 0 2px 2px;
}
body.mm-shop .ms-tr.is-foot .ms-k,
body.mm-shop .ms-tr.is-foot .ms-them { background: transparent !important; }

/* Rechte Spalte: kein Kasten, weisser Text, nicht fett */
body.mm-shop .ms-tr.is-head .ms-them {
  background: transparent !important; box-shadow: none !important;
}
body.mm-shop .ms-them {
  color: var(--ms-fg) !important; font-weight: 400 !important;
  background: transparent !important;
}

/* Spaltennamen deutlich groesser, rechts in Suisse */
body.mm-shop .ms-tr.is-head .ms-us span {
  font-family: var(--ms-disp); font-size: 25px !important; font-weight: 600;
  color: var(--ms-gold) !important; letter-spacing: 0.01em;
}
body.mm-shop .ms-tr.is-head .ms-them span {
  font-family: var(--ms-sans) !important; font-size: 22px !important; font-weight: 700;
  color: var(--ms-fg) !important; letter-spacing: 0;
}

/* Kriterium ohne Emoji */
body.mm-shop .ms-k .em { display: none !important; }
body.mm-shop .ms-k { font-size: 18px !important; font-weight: 700; }

/* Werte mittig, in beiden Wertespalten gleich */
body.mm-shop .ms-us,
body.mm-shop .ms-them { text-align: center; justify-content: center; }

@media (max-width: 767px) {
  /* Kein Rand-an-Rand mehr, die Tafel behaelt links und rechts Luft */
  body.mm-shop .ms-tab-w.elementor-widget {
    margin-left: 0 !important; margin-right: 0 !important;
    width: 100% !important;
  }
  body.mm-shop .ms-tr { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.08fr) minmax(0, 1.02fr); }
  body.mm-shop .ms-tr > div { padding: 14px 7px !important; }
  body.mm-shop .ms-tr > div.ms-k { font-size: 13px !important; }
  body.mm-shop .ms-us,
  body.mm-shop .ms-them { font-size: 12.5px !important; line-height: 1.32; }
  body.mm-shop .ms-tr.is-head .ms-us span { font-size: 15px !important; }
  body.mm-shop .ms-tr.is-head .ms-them span { font-size: 14px !important; }
  body.mm-shop .ms-tr.is-foot .ms-us { height: 18px; }
}

/* ===== Kundenstimme wie in der Referenz: Goldblock mit Anfuehrung links ===== */
body.mm-shop .ms-quote {
  border: 1px solid var(--ms-line); background: var(--ms-panel);
  border-radius: 3px; overflow: hidden; padding: 0 !important;
  display: grid; grid-template-columns: 74px 1fr;
}
body.mm-shop .ms-quote > p:first-child { display: contents; }
body.mm-shop .ms-quote .mark {
  display: flex; align-items: center; justify-content: center;
  background: var(--ms-gold); color: #14130f;
  font-family: var(--ms-disp); font-size: 46px; line-height: 1; font-weight: 600;
  padding-top: 12px;
}
body.mm-shop .ms-quote .body { display: block; padding: 22px 24px; }
body.mm-shop .ms-quote .q { display: block; font-size: 17px; line-height: 1.45; color: var(--ms-fg); }
body.mm-shop .ms-quote .n {
  display: block; margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--ms-line);
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ms-gold);
}
@media (max-width: 600px) {
  body.mm-shop .ms-quote { grid-template-columns: 54px 1fr; }
  body.mm-shop .ms-quote .mark { font-size: 34px; }
  body.mm-shop .ms-quote .body { padding: 18px 18px; }
}

/* ===== Zusammenfassung als Block mit Balken links ===== */
body.mm-shop .ms-summary p {
  margin: 0; background: var(--ms-panel); border-radius: 3px;
  border-left: 5px solid var(--ms-gold);
  padding: 20px 24px;
}
body.mm-shop .ms-summary .lab {
  display: block; margin-bottom: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ms-gold);
}
body.mm-shop .ms-summary .tx {
  display: block; font-size: 18px; line-height: 1.45; font-weight: 700; color: var(--ms-fg);
}

/* Der rechte Tiegel liegt ohne Kachel auf dem Seitengrund. Sein schwarzer
   Hintergrund verschwindet ueber lighten, der helle Tiegel bleibt stehen. */
body.mm-shop .ms-tr.is-head .ms-them img { mix-blend-mode: lighten !important; }

/* Der Kit setzt Radius 0 auf alles, hier sind 2px gewollt. */
body.mm-shop .ms-tr.is-head .ms-us { border-radius: 2px 2px 0 0 !important; }
body.mm-shop .ms-tr.is-foot .ms-us { border-radius: 0 0 2px 2px !important; }
body.mm-shop .ms-quote { border-radius: 3px !important; }
body.mm-shop .ms-summary p { border-radius: 3px !important; }

/* ==========================================================================
   Tafel Fassung 7. Die Zeilenlinie sitzt auf der Zeile statt auf den Zellen,
   dadurch liegt sie ueber alle drei Spalten exakt auf derselben Hoehe.
   ========================================================================== */
body.mm-shop .ms-tr:not(.is-head):not(.is-foot) > div { border-top: 0 !important; }
body.mm-shop .ms-tr:not(.is-head):not(.is-foot) {
  border-top: 1px solid var(--ms-line) !important;
}

/* Keine Goldreste mehr an der schwarzen Spalte */
body.mm-shop .ms-us,
body.mm-shop .ms-tr .ms-us,
body.mm-shop .ms-tr:last-child .ms-us,
body.mm-shop .ms-tr.is-foot .ms-us,
body.mm-shop .ms-tr.is-head .ms-us { box-shadow: none !important; }

/* Mehr Rundung an der schwarzen Spalte */
body.mm-shop .ms-tr.is-head .ms-us { border-radius: 6px 6px 0 0 !important; }
body.mm-shop .ms-tr.is-foot .ms-us { border-radius: 0 0 6px 6px !important; }

/* Kriterien groesser */
body.mm-shop .ms-k { font-size: 20px !important; line-height: 1.25; }

/* Beide Wertespalten gleich gross und beide nicht fett */
body.mm-shop .ms-us,
body.mm-shop .ms-them {
  font-size: 17px !important; font-weight: 400 !important; line-height: 1.4;
  color: var(--ms-fg) !important;
}

/* Spaltenname Men Mansion in Versalien und deutlich groesser */
body.mm-shop .ms-tr.is-head .ms-us span {
  font-family: var(--ms-disp); font-size: 30px !important; font-weight: 600 !important;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--ms-gold) !important;
}
body.mm-shop .ms-tr.is-head .ms-them span {
  font-family: var(--ms-sans) !important; font-size: 22px !important; font-weight: 700 !important;
  text-transform: none; color: var(--ms-fg) !important;
}

/* Tiegel groesser */
body.mm-shop .ms-tr.is-head > div img { max-width: 200px; }

@media (max-width: 767px) {
  body.mm-shop .ms-tr > div.ms-k { font-size: 14px !important; }
  body.mm-shop .ms-us,
  body.mm-shop .ms-them { font-size: 13px !important; }
  body.mm-shop .ms-tr.is-head .ms-us span { font-size: 17px !important; }
  body.mm-shop .ms-tr.is-head .ms-them span { font-size: 14.5px !important; }
  body.mm-shop .ms-tr.is-head > div img { max-width: 104px; }
}

/* Mehr Luft ueber der Ueberschrift ganz oben */
body.mm-shop .mm-wrap:first-of-type > .e-con-inner { padding-top: 56px; }
@media (max-width: 767px) {
  body.mm-shop .mm-wrap:first-of-type > .e-con-inner { padding-top: 40px; }
}

/* Luft ueber der Ueberschrift. :first-of-type traf den Clarity-Container,
   deshalb haengt der Abstand jetzt an der Ueberschrift selbst. */
body.mm-shop .mm-h1.elementor-widget { margin-top: 58px !important; }
@media (max-width: 767px) {
  body.mm-shop .mm-h1.elementor-widget { margin-top: 42px !important; }
}

/* ============================================================
   Copy-Runde 01.09.2026: Dermatest-Siegel in der Tafel,
   Hinweis unter jedem CTA, drei Einwaende als Fragenblock.
   ============================================================ */

/* Siegel im Kopf der eigenen Spalte. Das Bild bleibt unveraendert,
   es sitzt nur auf einer hellen Kachel, damit der Papiergrund
   auf Schwarz gewollt wirkt. */
body.mm-shop .ms-tr.is-head .ms-us { position: relative; }
body.mm-shop .ms-badge {
  position: absolute; top: 14px; right: 14px;
  display: block; width: 62px; padding: 5px;
  background: #efede6; border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
body.mm-shop .ms-badge img {
  display: block; width: 100%; height: auto; max-width: none;
  border-radius: 0;
}

/* Hinweis unter jedem Button, gleiche Kante wie der Button selbst. */
body.mm-shop .ms-ctanote p {
  margin: 0;
  font-size: 14px; line-height: 1.45; letter-spacing: 0.01em;
  color: var(--ms-mut);
}
body.mm-shop .ms-ctanote.elementor-widget { margin-bottom: 32px !important; }
body.mm-shop .mm-actions { margin-bottom: 12px !important; }

/* Drei Einwaende, gleiche Stimme, durch Haarlinien getrennt. */
body.mm-shop .ms-faq-w .ms-faq { display: block; }
body.mm-shop .ms-fq {
  padding: 26px 0;
  border-top: 1px solid var(--ms-line);
}
body.mm-shop .ms-fq:first-child { border-top: 0; padding-top: 0; }
body.mm-shop .ms-fq:last-child  { padding-bottom: 0; }
body.mm-shop .ms-fq .q {
  margin: 0 0 14px;
  font-family: var(--ms-disp); font-weight: 600;
  font-size: 27px; line-height: 1.18;
  color: var(--ms-fg); letter-spacing: -0.005em;
}
body.mm-shop .ms-fq p {
  margin: 0 0 12px;
  font-size: 17px; line-height: 1.6; color: var(--ms-mut);
}
body.mm-shop .ms-fq p:last-child { margin-bottom: 0; }
body.mm-shop .ms-fq .k { color: var(--ms-fg); font-weight: 700; }
body.mm-shop .ms-faq-w.elementor-widget { margin-bottom: 32px !important; }

@media (min-width: 768px) {
  body.mm-shop .ms-faq-w.elementor-widget,
  body.mm-shop .ms-ctanote.elementor-widget { max-width: 720px !important; }
}

@media (max-width: 767px) {
  body.mm-shop .ms-badge { top: 9px; right: 9px; width: 44px; padding: 4px; }
  body.mm-shop .ms-fq { padding: 22px 0; }
  body.mm-shop .ms-fq .q { font-size: 23px; margin-bottom: 12px; }
  body.mm-shop .ms-fq p { font-size: 16px; }
}

/* Das Siegel darf nicht ins quadratische Raster der Tafelbilder fallen. */
body.mm-shop .ms-badge img {
  aspect-ratio: auto !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Siegel in die freie obere linke Ecke, damit es den Tiegel nicht ueberdeckt. */
body.mm-shop .ms-badge {
  top: 12px !important; left: 12px !important; right: auto !important;
  width: 54px !important; padding: 5px !important;
  border: 1px solid rgba(175,152,65,0.45);
  box-shadow: none;
}
@media (max-width: 767px) {
  body.mm-shop .ms-badge { top: 10px !important; left: 10px !important; width: 40px !important; padding: 4px !important; }
}

/* Kriterienspalte darf auf Mobile nicht unter die schwarze Spalte laufen. */
body.mm-shop .ms-k {
  hyphens: auto; -webkit-hyphens: auto;
  overflow-wrap: anywhere;
}
@media (max-width: 767px) {
  body.mm-shop .ms-badge { top: 8px !important; left: 8px !important; width: 36px !important; }
}

/* Trennung statt Trennstriche: die Kriterienspalte bekommt auf Mobile
   etwas mehr Breite, dafuer bleiben die Woerter ganz. */
body.mm-shop .ms-k { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: normal !important; }
@media (max-width: 767px) {
  body.mm-shop .ms-tr { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.04fr) minmax(0, 1.0fr) !important; }
}

/* Die Kundenstimme im Angebotsblock braucht Luft nach oben. */
body.mm-shop .mm-measure.elementor-widget + .ms-quote.elementor-widget { margin-top: 30px !important; }

/* ============================================================
   Tafel Fassung 8 (01.09.2026): neue Zeilen aus dem Vault,
   alle drei Spalten mittig ausgerichtet.
   ============================================================ */
body.mm-shop .ms-tr > div,
body.mm-shop .ms-tr > div.ms-k,
body.mm-shop .ms-tr > div.ms-us,
body.mm-shop .ms-tr > div.ms-them,
body.mm-shop .ms-tr.is-head > div { text-align: center !important; }

body.mm-shop .ms-tr > div.ms-k {
  align-items: center !important;
  justify-content: center !important;
}

/* Haken und Kreuz etwas groesser, damit die Zeile nicht leer wirkt. */
body.mm-shop .ms-yes,
body.mm-shop .ms-no { font-size: 1.15em; line-height: 1; }

/* In den Flex-Zellen der Tafel bricht ein <br> nur innerhalb eines
   einzelnen Flex-Items um, deshalb die Zeile als eigener Span. */
body.mm-shop .ms-line { display: block; }

/* ============================================================
   Runde 01.09.2026 nachmittags: Siegel freigestellt neben dem
   Tiegel, Zusatzzeile im Button, Angebotsblock statt Einwaenden.
   ============================================================ */

/* --- Kopfzeile der Tafel: Tiegel und Siegel nebeneinander --- */
body.mm-shop .ms-headrow {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; width: 100%;
}
body.mm-shop .ms-tr.is-head .ms-us img.ms-jar {
  flex: 0 0 auto; width: 132px; max-width: 132px;
  aspect-ratio: 1 / 1; object-fit: contain;
}
body.mm-shop .ms-tr.is-head .ms-us img.ms-seal2 {
  flex: 0 0 auto; width: 84px; max-width: 84px;
  height: auto; aspect-ratio: auto;
  object-fit: contain; background: none; border: 0; border-radius: 0;
}

/* --- Buttons: weisse Schrift, Zusatzzeile darunter --- */
body.mm-shop .mm-cta .elementor-button,
body.mm-shop .mm-cta .elementor-button:hover,
body.mm-shop .mm-cta .elementor-button-text,
body.mm-shop .mm-cta .elementor-button:hover .elementor-button-text {
  color: #fafaf8 !important;
}
body.mm-shop .mm-cta .elementor-button-text { display: block; }
body.mm-shop .mm-cta .elementor-button-text .sub {
  display: block; margin-top: 7px;
  font-size: 14px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0; text-transform: none;
  color: rgba(250,250,248,0.86) !important;
}

/* --- Gap ueber dem mittleren CTA kleiner --- */
body.mm-shop .ms-ctawrap > .e-con-inner { padding-top: 0 !important; }
body.mm-shop .mm-item:has(+ .ms-ctawrap) > .e-con-inner { padding-bottom: 22px !important; }

/* --- Angebotsblock --- */
body.mm-shop .ms-offer img {
  width: 100%; height: auto;
  aspect-ratio: auto !important; max-height: none !important;
  object-fit: contain;
}
body.mm-shop .ms-offer.elementor-widget { margin-bottom: 26px !important; }
body.mm-shop .ms-derma p { margin: 0; }
body.mm-shop .ms-derma a {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ms-gold);
  text-decoration: none; border-bottom: 1px solid rgba(175,152,65,0.5);
  padding-bottom: 2px;
}
body.mm-shop .ms-derma a:hover { color: var(--ms-fg); border-bottom-color: rgba(250,250,248,0.6); }
body.mm-shop .ms-derma.elementor-widget { margin-bottom: 38px !important; }
body.mm-shop .ms-derma + .ms-quote.elementor-widget { margin-top: 0 !important; }
body.mm-shop .mm-note.elementor-widget { margin-bottom: 8px !important; }

@media (min-width: 768px) {
  body.mm-shop .ms-offer.elementor-widget,
  body.mm-shop .ms-derma.elementor-widget { max-width: 720px !important; }
}

@media (max-width: 767px) {
  body.mm-shop .ms-headrow { gap: 8px; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-jar  { width: 92px;  max-width: 92px; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-seal2 { width: 58px; max-width: 58px; }
  body.mm-shop .mm-cta .elementor-button-text .sub { font-size: 13px; margin-top: 6px; }
}

/* Der Kopf-Span erbt sonst die Label-Typografie von "MEN MANSION",
   deshalb hier explizit als Reihe zuruecksetzen. */
body.mm-shop .ms-tr.is-head .ms-us span.ms-headrow,
body.mm-shop .ms-tr.is-head > div span.ms-headrow {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  width: 100%;
  font-family: inherit !important; font-size: 0 !important; font-weight: 400 !important;
  letter-spacing: 0 !important; text-transform: none !important; color: inherit !important;
  margin: 0 !important;
}
body.mm-shop .ms-tr.is-head .ms-us img.ms-jar {
  flex: 0 1 auto; width: 58%; max-width: 58%;
  aspect-ratio: 1 / 1; object-fit: contain;
}
body.mm-shop .ms-tr.is-head .ms-us img.ms-seal2 {
  flex: 0 1 auto; width: 36%; max-width: 36%;
  height: auto; aspect-ratio: auto !important;
  object-fit: contain; background: none; border: 0; border-radius: 0;
}
@media (max-width: 767px) {
  body.mm-shop .ms-tr.is-head .ms-us span.ms-headrow { gap: 6px; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-jar   { width: 56%; max-width: 56%; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-seal2 { width: 38%; max-width: 38%; }
}

/* Auf Mobile ist die Kopfzelle schmal, deshalb dort ohne Innenabstand
   und mit groesseren Anteilen, damit das Siegel lesbar bleibt. */
@media (max-width: 767px) {
  body.mm-shop .ms-tr.is-head .ms-us { padding-left: 4px !important; padding-right: 4px !important; }
  body.mm-shop .ms-tr.is-head .ms-us span.ms-headrow { gap: 4px; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-jar   { width: 52%; max-width: 52%; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-seal2 { width: 45%; max-width: 45%; }
  body.mm-shop .ms-tr.is-head .ms-them img { max-width: 96px; }
}

/* Der fremde Tiegel darf nicht groesser wirken als unser eigener. */
body.mm-shop .ms-tr.is-head .ms-them img { max-width: 150px; }
@media (max-width: 767px) {
  body.mm-shop .ms-tr.is-head .ms-them img { max-width: 72px; }
}

/* Abstand Text zu Button enger, dafuer wieder Luft unter dem Button. */
body.mm-shop .mm-item:has(+ .ms-ctawrap) .mm-measure.elementor-widget { margin-bottom: 8px !important; }
body.mm-shop .ms-ctawrap > .e-con-inner { padding-bottom: 34px !important; }

/* ============================================================
   Siegel zurueck in die obere linke Ecke, nur freigestellt und
   etwas groesser. Tiegel wieder mittig und minimal groesser als
   der fremde Tiegel.
   ============================================================ */
body.mm-shop .ms-tr.is-head .ms-us span.ms-headrow,
body.mm-shop .ms-tr.is-head > div span.ms-headrow {
  display: block !important;
  position: static !important;
  width: 100% !important;
  gap: 0 !important;
}
body.mm-shop .ms-tr.is-head .ms-us img.ms-jar {
  display: block !important;
  width: 100% !important; max-width: 170px !important;
  margin: 0 auto !important;
  aspect-ratio: 1 / 1 !important; object-fit: contain !important;
}
body.mm-shop .ms-tr.is-head .ms-us img.ms-seal2 {
  position: absolute !important;
  top: 12px !important; left: 12px !important; right: auto !important;
  width: 64px !important; max-width: 64px !important; height: auto !important;
  margin: 0 !important;
  aspect-ratio: auto !important; object-fit: contain !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
}
body.mm-shop .ms-tr.is-head .ms-them img { max-width: 152px; }

@media (max-width: 767px) {
  body.mm-shop .ms-tr.is-head .ms-us { padding-left: 8px !important; padding-right: 8px !important; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-jar   { max-width: 86px !important; }
  body.mm-shop .ms-tr.is-head .ms-us img.ms-seal2 { top: 8px !important; left: 8px !important; width: 44px !important; max-width: 44px !important; }
  body.mm-shop .ms-tr.is-head .ms-them img { max-width: 78px; }
}

/* ============================================================
   Runde 01.09.2026 abends, mehrere LPs.
   ============================================================ */

/* Listicle: Frage und Antwort im Lede noch dichter zusammen. */
.mm-listicle .mm-lede p.frage { margin-bottom: 0 !important; }
.mm-listicle .mm-lede p.frage + p { margin-top: 2px !important; }

/* Listicle: Angebotsbild zwischen Siegel und Abschluss-CTA. */
body.mm-listicle .mm-offerimg img {
  width: 100%; height: auto;
  aspect-ratio: auto !important; max-height: none !important;
  object-fit: contain;
}
body.mm-listicle .mm-offerimg.elementor-widget { margin: 8px 0 26px !important; }

/* Advertorial: CTA direkt ueber "Direkt Glowy Skin". */
.mm-advertorial .mm-actions-pre { margin-bottom: 46px !important; }

/* Fettung im dunklen Hero war auf Tintenschwarz gesetzt und damit
   unsichtbar. Betrifft die Lede-Bloecke auf 128, 210 und 85. */
.mm-advertorial .mm-hero-dark strong,
.mm-listicle .mm-hero-dark strong,
.mm-advertorial .mm-hero-dark .mm-lede strong,
.mm-advertorial .mm-hero-dark .mm-measure strong { color: #fafaf8 !important; }

/* Frage und Antwort im Lede eng, aber lesbar getrennt. */
.mm-listicle .mm-lede p.frage + p { margin-top: 6px !important; }

/* Das Angebotsbild darf nicht in die Vollbreiten-Behandlung der
   Zutatenbilder fallen, sonst rutscht es aus dem Raster. */
body.mm-listicle .mm-offerimg.elementor-widget,
body.mm-listicle .mm-offerimg {
  transform: none !important;
  position: static !important;
  left: auto !important; right: auto !important;
  width: auto !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
}

/* Der Footer klebte auf allen Advertorials direkt am Rechtshinweis. */
.mm-advertorial .mm-sitefooter,
.mm-listicle .mm-sitefooter { margin-top: 34px !important; }

/* Autorenzeile hat jetzt zwei Zeilen, deshalb wieder Luft zwischen
   Beschreibung und Rolle. */
.mm-advertorial .mm-author-text p + .rolle { margin-top: 10px !important; }
.mm-advertorial .mm-author.e-con { margin-top: 26px !important; }

/* Autorenzeile: nur noch Name und Rolle, deshalb weniger Luft darunter. */
.mm-advertorial .mm-hero-dark > .e-con-inner:has(.mm-author) { padding-bottom: 22px !important; }
@media (max-width: 767px) {
  .mm-advertorial .mm-hero-dark > .e-con-inner:has(.mm-author) { padding-bottom: 20px !important; }
}
body.mm-listicle .mm-author + .mm-lede.elementor-widget { margin-top: 18px !important; }
.mm-advertorial .mm-author-text p + .rolle { margin-top: 8px !important; }

/* =====================================================================
   Angebotsblock C345. Headline, Bild, Subline, CTA, Garantie und drei
   USPs sitzen in einem gestrichelten Rahmen, damit die Struktur als
   ein Angebot lesbar ist.
   ===================================================================== */
.mm-advertorial .mm-offer.e-con,
.mm-advertorial .mm-offer > .e-con-inner {
  display: block;
  width: 100%;
  border: 1px dashed rgba(25,25,25,0.22);
  padding: 0;
}
.mm-advertorial .mm-offer.e-con { padding: 26px; background: rgba(25,25,25,0.02); }
.mm-advertorial .mm-offer > .e-con-inner { border: 0; padding: 0; }
.mm-advertorial .mm-h2.elementor-widget + .mm-offer.e-con { margin-top: 20px !important; }

/* Bild */
.mm-advertorial .mm-offer-img.elementor-widget {
  width: 100% !important; max-width: 100% !important;
  margin: 0 0 18px !important; transform: none !important;
}
.mm-advertorial .mm-offer-img img {
  width: 100%; height: auto; display: block;
  max-height: none !important; aspect-ratio: auto !important;
}

/* Subline mit Geschenksymbol */
.mm-advertorial .mm-offer-sub.elementor-widget { margin: 0 0 16px !important; }
.mm-advertorial .mm-offer-sub p {
  display: flex; align-items: flex-start; gap: 10px; margin: 0;
  font-size: 17px; line-height: 1.45; color: var(--mm-underline);
}
.mm-advertorial .mm-offer-sub .ico { flex: 0 0 20px; color: var(--mm-underline); }
.mm-advertorial .mm-offer-sub .ico svg { display: block; width: 20px; height: 20px; margin-top: 2px; }
.mm-advertorial .mm-offer-sub strong { color: var(--mm-underline); }

/* CTA ueber die volle Rahmenbreite */
.mm-advertorial .mm-actions-offer.e-con,
.mm-advertorial .mm-actions-offer > .e-con-inner {
  display: block; width: 100%; max-width: 100% !important; margin: 0 0 16px !important;
}
.mm-advertorial .mm-actions-offer .mm-cta,
.mm-advertorial .mm-actions-offer .elementor-button {
  display: block; width: 100%; min-width: 0; text-align: center;
}

/* Garantiekasten */
.mm-advertorial .mm-offer-guarantee.elementor-widget { margin: 0 0 20px !important; }
.mm-advertorial .mm-offer-guarantee p {
  position: relative; margin: 0;
  background: var(--mm-panel); border-left: 3px solid var(--mm-underline);
  padding: 18px 20px 18px 56px;
}
.mm-advertorial .mm-offer-guarantee .ico {
  position: absolute; left: 20px; top: 18px; color: var(--mm-underline);
}
.mm-advertorial .mm-offer-guarantee .ico svg { display: block; width: 22px; height: 22px; }
.mm-advertorial .mm-offer-guarantee .tt {
  display: block; font-family: var(--mm-display); font-weight: 700;
  font-size: 21px; line-height: 1.2; color: var(--mm-ink); margin-bottom: 7px;
}
.mm-advertorial .mm-offer-guarantee .tx {
  display: block; font-size: 16px; line-height: 1.5; color: var(--mm-body);
}

/* Drei USPs */
.mm-advertorial .mm-offer-usps.elementor-widget { margin: 0 !important; }
.mm-advertorial .mm-offer-usps p {
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px;
  margin: 0; padding-top: 18px; border-top: 1px solid rgba(25,25,25,0.14);
}
.mm-advertorial .mm-offer-usps .u { display: flex; align-items: center; gap: 10px; }
.mm-advertorial .mm-offer-usps .ico { flex: 0 0 20px; color: var(--mm-underline); }
.mm-advertorial .mm-offer-usps .ico svg { display: block; width: 20px; height: 20px; }
.mm-advertorial .mm-offer-usps .tx { font-size: 14px; line-height: 1.35; color: var(--mm-body); }

/* Kleiner Hinweis unter dem Rahmen */
.mm-advertorial .mm-offer-note.elementor-widget { margin: 14px 0 0 !important; }
.mm-advertorial .mm-offer-note p {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--mm-kicker); text-align: center;
}

@media (max-width: 767px) {
  .mm-advertorial .mm-offer.e-con { padding: 18px; }
  .mm-advertorial .mm-offer-sub p { font-size: 16px; }
  .mm-advertorial .mm-offer-guarantee p { padding: 16px 16px 16px 50px; }
  .mm-advertorial .mm-offer-guarantee .ico { left: 16px; top: 16px; }
  .mm-advertorial .mm-offer-guarantee .tt { font-size: 19px; }
  .mm-advertorial .mm-offer-usps p { grid-template-columns: 1fr; gap: 12px; }
}

/* Ab Tablet zwei Spalten wie in der Vorlage: Bild links, Angebot rechts,
   die drei USPs darunter ueber die volle Breite. */
@media (min-width: 768px) {
  .mm-advertorial .mm-offer.e-con { max-width: 900px; padding: 30px; }
  .mm-advertorial .mm-offer > .e-con-inner {
    display: grid;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 30px; row-gap: 0;
    align-items: start;
  }
  .mm-advertorial .mm-offer-img.elementor-widget {
    grid-column: 1; grid-row: 1 / span 3; margin: 0 !important; align-self: start;
  }
  .mm-advertorial .mm-offer-sub.elementor-widget       { grid-column: 2; grid-row: 1; margin: 0 0 18px !important; }
  .mm-advertorial .mm-actions-offer.e-con              { grid-column: 2; grid-row: 2; margin: 0 0 18px !important; }
  .mm-advertorial .mm-offer-guarantee.elementor-widget { grid-column: 2; grid-row: 3; margin: 0 !important; }
  .mm-advertorial .mm-offer-usps.elementor-widget      { grid-column: 1 / -1; grid-row: 4; margin: 26px 0 0 !important; }
  .mm-advertorial .mm-offer-note.elementor-widget      { max-width: 900px; }
  .mm-advertorial .mm-actions-offer .elementor-button  { padding: 18px 24px; }
}

/* Der Rahmen ist ein e-con-full, die Kinder haengen also direkt darin.
   Das Raster gehoert deshalb auf den Container selbst. */
@media (min-width: 768px) {
  .mm-advertorial .mm-offer.e-con {
    display: grid !important;
    grid-template-columns: minmax(0, 0.42fr) minmax(0, 0.58fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 30px; row-gap: 0;
    align-items: start;
    max-width: 900px; padding: 30px;
  }
  .mm-advertorial .mm-offer.e-con > .mm-offer-img.elementor-widget {
    grid-column: 1; grid-row: 1 / span 3; margin: 0 !important;
  }
  .mm-advertorial .mm-offer.e-con > .mm-offer-sub.elementor-widget       { grid-column: 2; grid-row: 1; margin: 0 0 18px !important; }
  .mm-advertorial .mm-offer.e-con > .mm-actions-offer.e-con              { grid-column: 2; grid-row: 2; margin: 0 0 18px !important; }
  .mm-advertorial .mm-offer.e-con > .mm-offer-guarantee.elementor-widget { grid-column: 2; grid-row: 3; margin: 0 !important; }
  .mm-advertorial .mm-offer.e-con > .mm-offer-usps.elementor-widget      { grid-column: 1 / -1; grid-row: 4; margin: 26px 0 0 !important; }
  .mm-advertorial .mm-offer-img img { height: auto; }
}

/* =====================================================================
   Angebotsblock, zweite Fassung: Garantie als kleiner Link mit Popup,
   an ihrer Stelle ein Dringlichkeitskasten.
   ===================================================================== */
.mm-advertorial .mm-offer-gar.elementor-widget { margin: 0 0 18px !important; }
.mm-advertorial .mm-gar-link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; line-height: 1.4; color: var(--mm-kicker);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(25,25,25,0.28);
}
.mm-advertorial .mm-gar-link:hover { color: var(--mm-ink); text-decoration-color: var(--mm-underline); }

.mm-advertorial .mm-gar-pop {
  width: min(420px, calc(100vw - 40px));
  border: 1px solid rgba(25,25,25,0.18); border-radius: 0;
  padding: 0; background: var(--mm-paper); color: var(--mm-body);
}
.mm-advertorial .mm-gar-pop::backdrop { background: rgba(25,25,25,0.55); }
.mm-advertorial .mm-gar-inner { display: block; padding: 26px 26px 22px; text-align: left; }
.mm-advertorial .mm-gar-inner .ico { display: block; color: var(--mm-underline); margin-bottom: 12px; }
.mm-advertorial .mm-gar-inner .ico svg { display: block; width: 26px; height: 26px; }
.mm-advertorial .mm-gar-inner .tt {
  display: block; font-family: var(--mm-display); font-weight: 700;
  font-size: 22px; line-height: 1.2; color: var(--mm-ink); margin-bottom: 10px;
}
.mm-advertorial .mm-gar-inner .tx { display: block; font-size: 16px; line-height: 1.55; }
.mm-advertorial .mm-gar-close {
  appearance: none; margin-top: 20px; cursor: pointer;
  background: var(--mm-ink); color: var(--mm-btn-fg); border: 0;
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 22px;
}

/* Dringlichkeit im Kasten, an dem die Garantie vorher stand. */
.mm-advertorial .mm-offer-urgency.elementor-widget { margin: 0 !important; }
.mm-advertorial .mm-offer-urgency p {
  position: relative; margin: 0;
  background: var(--mm-panel); border-left: 3px solid var(--mm-red, #a4392f);
  padding: 18px 20px 18px 56px;
}
.mm-advertorial .mm-offer-urgency .ico {
  position: absolute; left: 20px; top: 18px; color: var(--mm-red, #a4392f);
}
.mm-advertorial .mm-offer-urgency .ico svg { display: block; width: 22px; height: 22px; }
.mm-advertorial .mm-offer-urgency .tt {
  display: block; font-family: var(--mm-display); font-weight: 700;
  font-size: 21px; line-height: 1.2; color: var(--mm-ink); margin-bottom: 7px;
}
.mm-advertorial .mm-offer-urgency .tx { display: block; font-size: 16px; line-height: 1.5; color: var(--mm-body); }

@media (max-width: 767px) {
  .mm-advertorial .mm-offer-urgency p { padding: 16px 16px 16px 50px; }
  .mm-advertorial .mm-offer-urgency .ico { left: 16px; top: 16px; }
  .mm-advertorial .mm-offer-urgency .tt { font-size: 19px; }
}

/* Raster neu: Bild links ueber vier Zeilen, rechts Subline, CTA,
   Garantielink und Dringlichkeit, USPs darunter ueber die volle Breite. */
@media (min-width: 768px) {
  .mm-advertorial .mm-offer.e-con { grid-template-rows: auto auto auto 1fr auto; }
  .mm-advertorial .mm-offer.e-con > .mm-offer-img.elementor-widget      { grid-row: 1 / span 4; }
  .mm-advertorial .mm-offer.e-con > .mm-offer-sub.elementor-widget      { grid-row: 1; }
  .mm-advertorial .mm-offer.e-con > .mm-actions-offer.e-con             { grid-row: 2; margin: 0 0 10px !important; }
  .mm-advertorial .mm-offer.e-con > .mm-offer-gar.elementor-widget      { grid-column: 2; grid-row: 3; margin: 0 0 18px !important; }
  .mm-advertorial .mm-offer.e-con > .mm-offer-urgency.elementor-widget  { grid-column: 2; grid-row: 4; margin: 0 !important; }
  .mm-advertorial .mm-offer.e-con > .mm-offer-usps.elementor-widget     { grid-row: 5; }
}

/* =====================================================================
   Angebotsblock im Shop-Skin (Seite 212). Dunkler Grund, deshalb
   Rahmen, Kaesten und Popup auf die dunklen Token umgestellt.
   ===================================================================== */
body.mm-shop .mm-offer.e-con {
  border-color: rgba(250,250,248,0.18);
  background: rgba(250,250,248,0.03);
}
body.mm-shop .mm-offer-sub p,
body.mm-shop .mm-offer-sub strong,
body.mm-shop .mm-offer-sub .ico { color: var(--ms-gold); }
body.mm-shop .mm-gar-link { color: var(--ms-mut); text-decoration-color: rgba(250,250,248,0.3); }
body.mm-shop .mm-gar-link:hover { color: var(--ms-fg); text-decoration-color: var(--ms-gold); }
body.mm-shop .mm-gar-pop {
  background: var(--ms-panel); color: var(--ms-mut);
  border-color: rgba(250,250,248,0.18);
}
body.mm-shop .mm-gar-inner .ico { color: var(--ms-gold); }
body.mm-shop .mm-gar-inner .tt { color: var(--ms-fg); }
body.mm-shop .mm-gar-close { background: var(--ms-gold); color: #191919; }
body.mm-shop .mm-offer-urgency p { background: rgba(250,250,248,0.05); border-left-color: #a4392f; }
body.mm-shop .mm-offer-urgency .tt { color: var(--ms-fg); }
body.mm-shop .mm-offer-urgency .tx { color: var(--ms-mut); }
body.mm-shop .mm-offer-usps p { border-top-color: rgba(250,250,248,0.14); }
body.mm-shop .mm-offer-usps .ico { color: var(--ms-gold); }
body.mm-shop .mm-offer-usps .tx { color: var(--ms-mut); }
body.mm-shop .mm-actions-offer .elementor-button { background: var(--ms-gold); }

/* Der Angebotsrahmen sitzt jetzt auf jeder LP, deshalb hier der
   gemeinsame Abstand nach oben und unten. */
.mm-advertorial .mm-offer-wrap > .e-con-inner { padding-top: 8px; padding-bottom: 8px; }
.mm-advertorial .mm-offer-wrap .mm-h2.elementor-widget { margin-bottom: 20px !important; }

/* Der Laborbericht-Link braucht Luft zum Angebotsrahmen darüber. */
body.mm-shop .mm-offer.e-con + .ms-derma.elementor-widget,
body.mm-shop .ms-derma.elementor-widget { margin-top: 30px !important; }
@media (max-width: 767px) {
  body.mm-shop .ms-derma.elementor-widget { margin-top: 24px !important; }
}

/* Auf Mobile lief „Schwarzkümmelöl" um drei Pixel aus der Zutatenkachel. */
@media (max-width: 767px) {
  .mm-advertorial .mm-ing .elementor-image-box-title { font-size: 15px; }
}

/* Autorenzeile auf hellem Grund, etwa im Hero von LP2. */
.mm-advertorial .mm-author-hell .mm-author-text p,
.mm-advertorial .mm-author-hell .mm-author-text .rolle { color: var(--mm-ink); }
.mm-advertorial .mm-author-hell .mm-author-text .rolle em { color: var(--mm-underline); }
.mm-advertorial .mm-author-hell .mm-author-img img { border-color: rgba(25,25,25,0.2); }
.mm-advertorial .mm-author-hell.e-con { margin: 24px 0 0 !important; }

/* Luft unter der hellen Autorenzeile, sonst klebt sie am Panel darunter. */
.mm-advertorial .mm-author-hell.e-con { margin: 24px 0 26px !important; }

/* Autorenzeile insgesamt kräftiger setzen. */
.mm-advertorial .mm-author-text p { font-weight: 600; }
.mm-advertorial .mm-author-text p strong { font-weight: 700; }
.mm-advertorial .mm-author-text .rolle,
.mm-advertorial .mm-author-text .rolle em { font-weight: 600; }