/** Shopify CDN: Minification failed

Line 12:0 Unexpected "<"
Line 71:4 Unexpected "<"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:product-tabs (INDEX:126) */
<style>
    .tabs {
      width: 100%;
      display: block;
    }

    .tab-links:after {
      display: block;
      clear: both;
      content: '';
    }
  ul.tab-links {
      border-bottom: 1px solid #ccc;
      display: flex;
      overflow-y: auto;
        align-items: baseline;
    padding-left:0;
  }
    .tab-links li {
      float: left;
      list-style: none;
    }

    .tab-links a {
      padding: 9px 15px;
      display: inline-block;
      border-radius: 3px 3px 0 0;
      font-size: 16px;
      font-weight: 600;
      color: #4c4c4c;
      transition: all linear 0.15s;
      text-decoration: none;
    }

    .tab-links a:hover {
      background: #fff;
      text-decoration: none;
    }

    .tab-links .active a {
      color: #4c4c4c;
      border-bottom: 2px solid #000;
    }

    .tab-content {
      padding: 15px;
    }
.tab-content > * {
    font-size: 13px;
}
    .tab {
      display: none;
    }

    .tab.active {
      display: block;
    }
 
  
    </style>
/* END_SECTION:product-tabs */

/* START_SECTION:ym-compare (INDEX:143) */
.ym-cmp {
    --ym-local-text: var(--ym-aubergine);
    --ym-local-muted: var(--ym-aubergine-72);
    --ym-local-rule: var(--ym-aubergine-16);
    color: var(--ym-local-text);
  }
  .ym-cmp--leinen      { background-color: var(--ym-leinen); }
  .ym-cmp--leinenweiss { background-color: var(--ym-leinenweiss); }
  .ym-cmp--blush       { background-color: var(--ym-blush); }
  .ym-cmp--white       { background-color: #fff; }
  .ym-cmp--transparent { background-color: transparent; }

  .ym-cmp__head {
    max-width: 60ch;
    margin: 0 auto 40px;
    text-align: center;
  }
  .ym-cmp__heading { margin-top: 14px; text-wrap: balance; }
  .ym-cmp__heading > p { margin: 0; }
  .ym-cmp__intro {
    margin-top: 14px;
    color: var(--ym-local-muted);
    text-wrap: pretty;
  }
  .ym-cmp__intro > p { margin: 0 0 1em; }
  .ym-cmp__intro > p:last-child { margin-bottom: 0; }

  .ym-cmp__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ym-cmp__caption {
    margin-bottom: 12px;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    color: var(--ym-local-muted);
    text-align: left;
  }
  .ym-cmp__caption:empty { display: none; }

  .ym-cmp__wrap {
    max-width: 840px;
    margin-inline: auto;
  }
  .ym-cmp__table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  /* Die eigene Spalte ist die betonte: heller Grund, Terrakotta-Rahmen, der
     ueber alle Zeilen durchlaeuft. Die Rahmen sitzen an den Zellen, weil
     <col> in Tabellen keine ueber Zeilengrenzen zusammenhaengenden Raender
     zeichnen kann. */
  .ym-cmp__table th,
  .ym-cmp__table td {
    padding: 14px 12px;
    vertical-align: middle;
    font-family: var(--ym-font-sans);
    font-weight: 400;
    text-align: center;
  }
  .ym-cmp__table thead th {
    padding-top: 0;
    padding-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ym-local-text);
  }
  .ym-cmp__table thead .ym-cmp__own { color: var(--ym-terrakotta); }
  .ym-cmp__table thead .ym-cmp__other { color: var(--ym-local-muted); }

  .ym-cmp__crit {
    width: 52%;
    text-align: left;
  }
  .ym-cmp__own,
  .ym-cmp__other { width: 24%; }

  .ym-cmp__label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--ym-local-text);
    text-wrap: pretty;
  }
  .ym-cmp__detail {
    display: block;
    margin-top: 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ym-local-muted);
    text-wrap: pretty;
  }

  .ym-cmp__table tbody th,
  .ym-cmp__table tbody td {
    border-top: 1px solid var(--ym-local-rule);
  }
  .ym-cmp__table tbody tr:first-child th,
  .ym-cmp__table tbody tr:first-child td { border-top: 0; }

  .ym-cmp__table tbody .ym-cmp__own,
  .ym-cmp__table thead .ym-cmp__own {
    background: var(--ym-salbei-08, rgba(127, 152, 144, 0.1));
    border-left: 1px solid var(--ym-terrakotta-30, rgba(185, 121, 104, 0.35));
    border-right: 1px solid var(--ym-terrakotta-30, rgba(185, 121, 104, 0.35));
  }
  .ym-cmp__table thead .ym-cmp__own {
    border-top: 1px solid var(--ym-terrakotta-30, rgba(185, 121, 104, 0.35));
    border-radius: 12px 12px 0 0;
  }
  .ym-cmp__table tbody tr:last-child .ym-cmp__own {
    border-bottom: 1px solid var(--ym-terrakotta-30, rgba(185, 121, 104, 0.35));
    border-radius: 0 0 12px 12px;
  }

  .ym-cmp__val {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ym-aubergine);
  }
  .ym-cmp__val--muted {
    font-weight: 400;
    color: var(--ym-local-muted);
  }

  .ym-cmp__mark {
    display: inline-block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
  }
  .ym-cmp__mark--ja {
    background-color: var(--ym-salbei);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.6 9.6 18.2 20 6.4'/></svg>");
  }
  /* „Teils“ und „nein“ bewusst zurueckhaltend: ein rotes Kreuz beim
     Mitbewerber ist eine Wertung, ein Strich ist eine Feststellung. */
  .ym-cmp__mark--teils {
    background-color: transparent;
    border: 1px solid var(--ym-aubergine-16);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23302331' stroke-opacity='0.55' stroke-width='2.4' stroke-linecap='round'><path d='M7 12h10'/></svg>");
  }
  .ym-cmp__mark--nein {
    background-color: transparent;
    border: 1px solid var(--ym-aubergine-16);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23302331' stroke-opacity='0.4' stroke-width='2.2' stroke-linecap='round'><path d='M7.5 7.5l9 9M16.5 7.5l-9 9'/></svg>");
  }

  .ym-cmp__note {
    max-width: 720px;
    margin: 32px auto 0;
    font-family: var(--ym-font-sans);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ym-local-muted);
    text-align: center;
    text-wrap: pretty;
  }
  .ym-cmp__cta { margin-top: 32px; text-align: center; }

  /* ── Nebeneinander ab 900 px ───────────────────────────────────────────
     Darunter bleibt es untereinander: eine Tabelle mit drei Spalten neben
     einem Textblock waere auf Telefonbreite in beiden Teilen unlesbar. */
  @media screen and (min-width: 900px) {
    .ym-cmp--split .ym-cmp__inner {
      display: grid;
      gap: clamp(32px, 5vw, 70px);
      align-items: start;
      /* Die Spaltenbreiten kommen aus dem Regler im Style-Block oben. */
    }
    .ym-cmp--split .ym-cmp__head {
      max-width: 44ch;
      margin: 0;
      text-align: left;
    }
    .ym-cmp--split .ym-cmp__wrap { max-width: none; }
    .ym-cmp--split .ym-cmp__note {
      margin-inline: 0;
      text-align: left;
    }
    .ym-cmp--split .ym-cmp__cta { text-align: left; }
    .ym-cmp--split .ym-cmp__crit { width: 46%; }
    .ym-cmp--split .ym-cmp__own,
    .ym-cmp--split .ym-cmp__other { width: 27%; }
  }

  @media screen and (max-width: 749px) {
    .ym-cmp__table th,
    .ym-cmp__table td { padding: 12px 6px; }
    .ym-cmp__crit { width: 46%; }
    .ym-cmp__own,
    .ym-cmp__other { width: 27%; }
    .ym-cmp__label { font-size: 13.5px; }
    .ym-cmp__detail { display: none; }
    .ym-cmp__table thead th { font-size: 12.5px; }
    .ym-cmp__val { font-size: 12px; }
  }
/* END_SECTION:ym-compare */

/* START_SECTION:ym-education (INDEX:144) */
/* ── Block A: Terrakotta-Band ─────────────────────────────────────────── */
  .ym-edu {
    position: relative;
    --ym-local-text: var(--ym-aubergine);
    --ym-local-muted: var(--ym-aubergine-72);
    --ym-local-eyebrow: var(--ym-terrakotta);
    --ym-local-rule: var(--ym-aubergine-16);
    color: var(--ym-local-text);
  }

  .ym-edu__inner {
    position: relative;
  }
  .ym-edu__band {
    width: calc(100% - 2 * var(--ym-gutter));
    max-width: var(--ym-page-width);
    margin-inline: auto;
    --edu-on: 255, 255, 255;
    --edu-accent: var(--edu-on);
    --edu-eyebrow: rgba(var(--edu-on), 0.78);
    --ym-local-text: rgb(var(--edu-on));
    --ym-local-muted: rgba(var(--edu-on), 0.88);
    --ym-local-eyebrow: var(--edu-eyebrow);
    --ym-local-rule: rgba(var(--edu-on), 0.32);
    background-color: var(--edu-band, var(--ym-terrakotta));
    color: var(--ym-local-text);
    position: relative;
    overflow: hidden;
    border-radius: var(--edu-radius, 60px);
    padding: 72px 64px 76px;
    box-sizing: border-box;
  }
  .ym-edu__deco {
    position: absolute;
    right: 40px;
    top: 32px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: rgba(var(--edu-accent), 0.12);
    pointer-events: none;
  }
  @media screen and (max-width: 1099px) {
    .ym-edu__deco {
      display: none;
    }
  }

  .ym-edu__band--terrakotta  { --edu-band: var(--ym-terrakotta);   --edu-on: 255, 255, 255; }
  .ym-edu__band--aubergine   { --edu-band: var(--ym-aubergine);    --edu-on: 245, 244, 239; }
  .ym-edu__band--salbei      { --edu-band: var(--ym-salbei);       --edu-on: 255, 255, 255; }
  .ym-edu__band--blush       { --edu-band: var(--ym-blush);        --edu-on: 48, 35, 49; }
  .ym-edu__band--blush-deep  { --edu-band: var(--ym-blush-deep);   --edu-on: 48, 35, 49; }
  .ym-edu__band--leinen      { --edu-band: var(--ym-leinen);       --edu-on: 48, 35, 49; }
  .ym-edu__band--leinenweiss { --edu-band: var(--ym-leinenweiss);  --edu-on: 48, 35, 49; }
  .ym-edu__band--white       { --edu-band: #fff;                   --edu-on: 48, 35, 49; }

  .ym-edu__band--accented {
    --edu-accent: 185, 121, 104;
    --edu-eyebrow: rgb(var(--edu-accent));
  }

  .ym-edu__band--flush {
    width: 100%;
    max-width: none;
    border-radius: 0 0 var(--edu-radius, 60px) var(--edu-radius, 60px);
  }
  .ym-edu__band-inner {
    max-width: calc(var(--ym-page-width) - 128px);
    margin-inline: auto;
  }
  .ym-edu__faq {
    width: calc(100% - 2 * var(--ym-gutter));
    max-width: var(--ym-page-width);
    margin-inline: auto;
    box-sizing: border-box;
  }

  .ym-edu__head {
    position: relative;
    max-width: 52ch;
    margin: 0 auto 40px;
    text-align: center;
  }
  .ym-edu__heading {
    margin-top: 14px;
  }
  .ym-edu__intro {
    margin-top: 14px;
    text-wrap: pretty;
  }

  .ym-edu__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
  }
  .ym-edu__chip {
    padding: 8px 14px;
    border-radius: var(--ym-radius-pill);
    background: rgba(var(--edu-accent), 0.2);
    font-family: var(--ym-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
  }

  /* ── Diagramm ─────────────────────────────────────────────────────────── */
  .ym-edu__diagram {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
  }
  .ym-edu__col {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ym-edu__row {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .ym-edu__labels {
    display: block;
  }
  .ym-edu__label {
    display: block;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    line-height: 1.3;
    color: var(--ym-local-text);
  }
  .ym-edu__amount {
    display: block;
    margin-top: 3px;
    font-family: var(--ym-font-sans);
    font-size: 11px;
    letter-spacing: 0.1em;
    /* Bewusst NICHT uppercase: das Einheitenzeichen für Gramm ist
       kleingeschrieben. Ein großes G steht für Giga. */
    color: rgba(var(--edu-on), 0.65);
  }

  /* Rundes Rohstoffbild — praktisch das Profilbild der Faser. Es sitzt
     aussen, weil dort die Zeile beginnt: Bild, Name, Marker, Linie, Punkt.
     Der duenne Ring haelt es auf allen acht Bandflaechen zusammen; ohne ihn
     verschwimmt ein helles Motiv auf Leinen und ein dunkles auf Aubergine. */
  .ym-edu__avatar {
    flex: none;
    width: var(--edu-avatar, 56px);
    height: var(--edu-avatar, 56px);
    border-radius: 50%;
    object-fit: cover;
    background: rgba(var(--edu-on), 0.14);
    box-shadow: 0 0 0 1px rgba(var(--edu-accent), 0.45);
  }

  .ym-edu__marker {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid rgba(var(--edu-accent), 0.7);
    border-radius: var(--ym-radius-pill);
    background: transparent;
    color: rgb(var(--edu-accent));
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease-out, color 160ms ease-out;
  }
  .ym-edu__marker--static {
    cursor: default;
  }
  .ym-edu__marker[aria-expanded='true'] {
    background: rgb(var(--edu-accent));
    color: var(--edu-band, var(--ym-terrakotta));
  }

  .ym-edu__leader {
    flex: 1;
    height: 1px;
    background: rgba(var(--edu-accent), 0.5);
  }
  .ym-edu__dot {
    flex: none;
    width: 6px;
    height: 6px;
    border-radius: var(--ym-radius-pill);
    background: rgba(var(--edu-accent), 0.7);
  }

  .ym-edu__panel {
    margin-top: 8px;
    font-family: var(--ym-font-sans);
    font-size: 13px;
    line-height: 1.55;
    color: rgba(var(--edu-on), 0.88);
    max-width: 34ch;
  }
  .ym-edu__panel-head {
    display: none;
  }

  .ym-edu__media {
    display: flex;
    justify-content: center;
  }
  .ym-edu__img {
    display: block;
    width: 100%;
    max-width: 300px;
    aspect-ratio: 38 / 34;
    border-radius: var(--ym-radius-pill);
    object-fit: cover;
  }
  .ym-edu__media .ym-placeholder {
    border-radius: var(--ym-radius-pill);
  }

  .ym-edu__note {
    position: relative;
    max-width: 52ch;
    margin: 36px auto 0;
    text-align: center;
    opacity: 0.9;
  }
  .ym-edu__cta {
    position: relative;
    margin-top: 32px;
    text-align: center;
  }

  /* ── Block B: FAQ ─────────────────────────────────────────────────────── */
  .ym-edu__faq {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 56px 0 8px;
  }
  .ym-edu__faq-text {
    margin-top: 12px;
    max-width: 34ch;
  }
  .ym-edu__textlink {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    color: var(--ym-terrakotta);
    text-decoration: none;
    border-bottom: 1px solid var(--ym-terrakotta-30);
    transition: color 160ms ease-out, border-color 160ms ease-out;
  }
  .ym-edu__textlink:hover {
    color: var(--ym-terrakotta-dark);
    border-bottom-color: currentColor;
  }

  .ym-edu__faq-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ym-edu__faq-item {
    border-bottom: 1px solid var(--ym-terrakotta-30);
  }
  .ym-edu__faq-item:last-child {
    border-bottom: 0;
  }
  .ym-edu__faq-q {
    margin: 0;
  }
  .ym-edu__faq-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 15px 0;
    border: 0;
    background: transparent;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: var(--ym-aubergine);
    cursor: pointer;
  }
  .ym-edu__faq-glyph {
    flex: none;
    font-size: 18px;
    line-height: 1;
    color: var(--ym-terrakotta);
    transition: transform 240ms ease-out;
  }
  .ym-edu__faq-btn[aria-expanded='true'] .ym-edu__faq-glyph {
    transform: rotate(45deg);
  }
  .ym-edu__faq-a {
    padding: 0 0 16px;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ym-aubergine-72);
    max-width: 60ch;
  }
  .ym-edu__faq-a > p {
    margin: 0 0 0.6em;
  }
  .ym-edu__faq-a > p:last-child {
    margin-bottom: 0;
  }

  /* Fokus nie entfernen. */
  .ym-edu__marker:focus-visible,
  .ym-edu__faq-btn:focus-visible,
  .ym-edu__textlink:focus-visible {
    outline: 2px solid var(--ym-terrakotta);
    outline-offset: 2px;
  }
  .ym-edu__marker:focus-visible {
    outline-color: rgb(var(--edu-accent));
  }

  /* ── Ab 900 px: dreispaltiges Diagramm mit Leader-Linien ──────────────── */
  @media screen and (min-width: 900px) {
    .ym-edu__diagram {
      grid-template-columns: 1fr 380px 1fr;
      gap: 0;
    }
    .ym-edu__col {
      gap: 44px;
    }
    .ym-edu__col--left .ym-edu__row {
      text-align: right;
    }
    .ym-edu__col--left .ym-edu__panel {
      margin-left: auto;
      text-align: right;
    }
    /* Die Erklaerung soll unter dem Namen stehen, nicht unter dem Bild —
       deshalb rueckt sie um Bildbreite plus Abstand ein. */
    .ym-edu__col--right .ym-edu__panel {
      margin-right: calc(var(--edu-avatar, 56px) + 14px);
    }
    .ym-edu__col--left .ym-edu__panel {
      margin-left: calc(var(--edu-avatar, 56px) + 14px);
    }
    .ym-edu__img {
      max-width: none;
      aspect-ratio: auto;
      height: 340px;
    }
    .ym-edu__media .ym-placeholder {
      width: 100%;
      height: 340px;
    }
    .ym-edu__faq {
      flex-direction: row;
      gap: 64px;
      align-items: flex-start;
      padding-inline: 24px;
    }
    .ym-edu__faq-intro,
    .ym-edu__faq-list {
      flex: 1;
    }
  }

  /* ── Unter 900 px: die Fasern liegen als Hotspots im Foto ─────────────── */
  @media screen and (max-width: 899px) {
    .ym-edu__band {
      border-radius: 32px;
      padding: 40px 24px 44px;
    }
    .ym-edu__band--flush {
      border-radius: 0 0 32px 32px;
      padding-inline: var(--ym-gutter);
    }
    .ym-edu__deco {
      display: none;
    }

    .ym-edu__diagram {
      position: relative;
      display: block;
      width: 100%;
      max-width: 340px;
      margin-inline: auto;
      gap: 0;
    }
    .ym-edu__col {
      display: contents;
    }
    .ym-edu__leader,
    .ym-edu__dot {
      display: none;
    }

    .ym-edu__media {
      margin: 0;
    }
    /* aspect-ratio waere hier wirkungslos: image_tag schreibt height="900" als
       HTML-Attribut, damit sind beide Achsen definit und das Verhaeltnis wird
       ignoriert. Die Hoehe muss deshalb im CSS stehen. */
    .ym-edu__img {
      aspect-ratio: auto;
      height: 280px;
      max-width: 340px;
      object-fit: contain;
      border-radius: 24px;
    }
    .ym-edu__media .ym-placeholder {
      width: 100%;
      max-width: 340px;
      height: 280px;
      border-radius: 24px;
    }

    /* Die Pille ist so breit wie ihr Inhalt, gedeckelt durch --edu-pill-max.
       Der laengste Name gibt das Mass vor: passt "Flohsamenschalen" in eine
       Zeile, passt alles andere auch. */
    .ym-edu__fiber {
      position: absolute;
      left: var(--spot-x, 50%);
      top: var(--spot-y, 50%);
      transform: translate(var(--spot-shift, -50%), -50%);
      z-index: 2;
      width: max-content;
      max-width: var(--edu-pill-max, 220px);
    }
    /* Umrisspille mit milchiger Fuellung: Rand und Schrift in Aubergine, die
       Flaeche eine leinenfarbene Schleierschicht. Volldeckend wuerde das Foto
       zerschneiden, ganz transparent laesst das Pulver durch die Buchstaben
       laufen — der Schleier haelt beides aus. backdrop-filter macht die
       Struktur darunter zusaetzlich ruhig, wo der Browser ihn kann. */
    .ym-edu__col--left .ym-edu__row,
    .ym-edu__col--right .ym-edu__row {
      flex-direction: row;
      align-items: center;
      gap: 7px;
      padding: 3.5px 9px;
      box-sizing: border-box;
      border: 1px solid var(--ym-aubergine);
      border-radius: var(--ym-radius-pill);
      background: rgba(245, 244, 239, var(--edu-pill-alpha, 0.62));
      -webkit-backdrop-filter: blur(6px);
      backdrop-filter: blur(6px);
      color: var(--ym-aubergine);
      box-shadow: none;
      text-align: left;
    }
    /* Das Rohstoffbild bleibt aussen — links links, rechts rechts. Es steht
       schon so im Markup, deshalb hier bewusst KEINE order-Regel. Auf der
       Bildseite faellt das Polster fast weg, damit der Kreis in der Kontur
       sitzt statt darin zu schwimmen. */
    .ym-edu__col--left .ym-edu__row {
      padding-left: 3px;
    }
    .ym-edu__col--right .ym-edu__row {
      padding-right: 3px;
    }
    .ym-edu__avatar {
      width: 28px;
      height: 28px;
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 0 0 0 1px var(--ym-aubergine-16);
    }
    .ym-edu__labels {
      flex: 0 1 auto;
      min-width: 0;
    }
    .ym-edu__label {
      font-size: 12px;
      line-height: 1.25;
      color: inherit;
      overflow-wrap: break-word;
    }
    .ym-edu__amount {
      display: none;
    }
    .ym-edu__marker {
      width: 19px;
      height: 19px;
      font-size: 12px;
      border-color: currentColor;
      color: inherit;
      opacity: 0.7;
      position: relative;
    }
    .ym-edu__marker::after {
      content: '';
      position: absolute;
      inset: -12px;
    }
    .ym-edu__marker[aria-expanded='true'] {
      background: currentColor;
      opacity: 1;
    }
    .ym-edu__marker[aria-expanded='true'] > span[aria-hidden] {
      color: var(--ym-leinenweiss, #f5f4ef);
    }

    .ym-edu__panel {
      position: absolute;
      z-index: 3;
      width: 220px;
      max-width: none;
      margin: 0;
      padding: 12px 14px;
      box-sizing: border-box;
      border-radius: 16px;
      border: 1px solid var(--ym-aubergine-16);
      background: #fff;
      color: var(--ym-aubergine-72);
      box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
      text-align: left;
    }
    .ym-edu__panel-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin: 0 0 5px;
    }
    .ym-edu__panel-title {
      font-size: 13px;
      line-height: 1.3;
      color: var(--ym-aubergine);
    }
    .ym-edu__panel-amount {
      font-size: 11px;
      letter-spacing: 0.1em;
      color: var(--ym-terrakotta);
    }
    .ym-edu__fiber--below .ym-edu__panel {
      top: calc(100% + 8px);
    }
    .ym-edu__fiber--above .ym-edu__panel {
      bottom: calc(100% + 8px);
    }
    .ym-edu__fiber--left .ym-edu__panel {
      left: 0;
    }
    .ym-edu__fiber--right .ym-edu__panel {
      right: 0;
    }
    .ym-edu__fiber--center .ym-edu__panel {
      left: 50%;
      transform: translateX(-50%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ym-edu__marker,
    .ym-edu__faq-glyph,
    .ym-edu__textlink {
      transition-duration: 0s;
    }
  }
/* END_SECTION:ym-education */

/* START_SECTION:ym-faq (INDEX:145) */
.ym-faq {
    --ym-local-text: var(--ym-aubergine);
    --ym-local-muted: var(--ym-aubergine-72);
    --ym-local-rule: var(--ym-terrakotta-30);
    color: var(--ym-local-text);
  }
  .ym-faq--leinen      { background-color: var(--ym-leinen); }
  .ym-faq--leinenweiss { background-color: var(--ym-leinenweiss); }
  .ym-faq--blush       { background-color: var(--ym-blush); }
  .ym-faq--white       { background-color: #fff; }
  .ym-faq--transparent { background-color: transparent; }

  .ym-faq__grid {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .ym-faq__heading {
    margin: 14px 0 0;
  }
  .ym-faq__text {
    margin-top: 12px;
    max-width: 34ch;
    color: var(--ym-local-muted);
  }
  .ym-faq__text > p {
    margin: 0 0 0.8em;
  }
  .ym-faq__text > p:last-child {
    margin-bottom: 0;
  }
  .ym-faq__textlink {
    display: inline-block;
    margin-top: 18px;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    color: var(--ym-terrakotta);
    text-decoration: none;
    border-bottom: 1px solid var(--ym-terrakotta-30);
    transition: color 160ms ease-out, border-color 160ms ease-out;
  }
  .ym-faq__textlink:hover {
    color: var(--ym-terrakotta-dark);
    border-bottom-color: currentColor;
  }

  .ym-faq__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ym-faq__item {
    border-bottom: 1px solid var(--ym-local-rule);
  }
  .ym-faq__item:last-child {
    border-bottom: 0;
  }
  .ym-faq__q {
    margin: 0;
  }
  .ym-faq__btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 15px 0;
    border: 0;
    background: transparent;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    color: var(--ym-local-text);
    cursor: pointer;
  }
  .ym-faq__glyph {
    flex: none;
    font-size: 18px;
    line-height: 1;
    color: var(--ym-terrakotta);
    transition: transform 240ms ease-out;
  }
  .ym-faq__btn[aria-expanded='true'] .ym-faq__glyph {
    transform: rotate(45deg);
  }
  .ym-faq__a {
    padding: 0 0 16px;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ym-local-muted);
    max-width: 60ch;
  }
  .ym-faq__a > p {
    margin: 0 0 0.6em;
  }
  .ym-faq__a > p:last-child {
    margin-bottom: 0;
  }

  .ym-faq__btn:focus-visible,
  .ym-faq__textlink:focus-visible {
    outline: 2px solid var(--ym-terrakotta);
    outline-offset: 2px;
  }

  @media screen and (min-width: 900px) {
    .ym-faq__grid {
      flex-direction: row;
      gap: 64px;
      align-items: flex-start;
      padding-inline: 24px;
    }
    .ym-faq__intro,
    .ym-faq__list {
      flex: 1;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ym-faq__glyph,
    .ym-faq__textlink {
      transition-duration: 0s;
    }
  }
/* END_SECTION:ym-faq */

/* START_SECTION:ym-fiber-gap (INDEX:146) */
.ym-gap {
    --ym-local-text: var(--ym-aubergine);
    --ym-local-muted: var(--ym-aubergine-72);
    --ym-local-rule: var(--ym-aubergine-16);
    color: var(--ym-local-text);
  }
  .ym-gap--leinen      { background-color: var(--ym-leinen); }
  .ym-gap--leinenweiss { background-color: var(--ym-leinenweiss); }
  .ym-gap--blush       { background-color: var(--ym-blush); }
  .ym-gap--white       { background-color: #fff; }
  .ym-gap--transparent { background-color: transparent; }

  .ym-gap__head {
    max-width: 56ch;
    margin: 0 auto 40px;
    text-align: center;
  }
  .ym-gap__heading { margin-top: 14px; }
  .ym-gap__intro {
    margin-top: 14px;
    color: var(--ym-local-muted);
    text-wrap: pretty;
  }
  .ym-gap__intro > p { margin: 0 0 1em; }
  .ym-gap__intro > p:last-child { margin-bottom: 0; }

  .ym-gap__chart { margin: 0 auto; max-width: 880px; }
  .ym-gap__chartimg {
    display: block;
    width: 100%;
    height: auto;
  }

  .ym-gap__plot { max-width: 760px; margin-inline: auto; }

  .ym-gap__target {
    margin: 0 0 16px;
    text-align: center;
  }
  .ym-gap__target em {
    font-family: var(--ym-font-sans);
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ym-terrakotta);
  }

  .ym-gap__stage {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 44px;
  }

  .ym-gap__puzzlewrap {
    position: relative;
    width: min(300px, 78vw);
    flex: none;
  }
  .ym-gap__puzzlewrap--image { width: min(440px, 92vw); }
  .ym-gap__puzzle {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  .ym-gap__ghost {
    fill: none;
    stroke: var(--ym-aubergine-16);
    stroke-width: 1;
    stroke-dasharray: 4 5;
  }
  .ym-gap__piece--base { fill: var(--ym-aubergine); }
  .ym-gap__piece--fit  { fill: var(--ym-terrakotta); }
  .ym-gap__fit { filter: drop-shadow(0 5px 12px rgba(48, 35, 49, 0.22)); }

  .ym-gap__val {
    font-family: var(--ym-font-sans);
    text-anchor: middle;
    pointer-events: none;
  }
  .ym-gap__valnum { font-size: 17px; font-weight: 600; }
  .ym-gap__valcap { font-size: 9.5px; font-weight: 400; }
  .ym-gap__val--base { fill: #fff; }
  .ym-gap__val--base .ym-gap__valcap { fill: rgba(255, 255, 255, 0.8); }
  .ym-gap__val--fit  { fill: #fff; }

  .ym-gap__gap {
    position: absolute;
    left: 50%;
    bottom: -4px;
    transform: translate(-50%, 100%);
    font-family: var(--ym-font-sans);
    font-size: 12px;
    line-height: 1.35;
    white-space: nowrap;
    color: var(--ym-local-muted);
  }

  .ym-gap__side { position: relative; }

  .ym-gap__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: 320px;
    padding: 16px 18px 16px 16px;
    border: 1px solid var(--ym-salbei-30, rgba(122, 148, 124, 0.32));
    border-radius: 16px;
    background: var(--ym-salbei-08, rgba(122, 148, 124, 0.09));
    text-align: left;
  }
  .ym-gap__link::before {
    content: '';
    position: absolute;
    top: -11px;
    right: 16px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--ym-salbei-30, rgba(122, 148, 124, 0.32));
    background-color: var(--ym-leinenweiss, #fbf8f4);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a947c' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12.6 9.6 18.2 20 6.4'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
  }
  .ym-gap__product {
    display: block;
    width: 70px;
    height: auto;
    flex: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.14));
  }
  .ym-gap__linktext {
    font-family: var(--ym-font-sans);
    font-size: 13px;
    line-height: 1.4;
    color: var(--ym-local-muted);
  }
  .ym-gap__linktext strong {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--ym-terrakotta);
  }

  .ym-gap__line {
    position: absolute;
    left: var(--anchor-y, 35%);
    top: 100%;
    width: 60px;
    height: 30px;
    margin-top: 2px;
    border-top: 1px dashed var(--ym-aubergine-16);
    border-right: 1px dashed var(--ym-aubergine-16);
    border-top-right-radius: 30px;
    pointer-events: none;
  }

  .ym-gap__sum {
    margin: 32px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ym-local-text);
    text-align: center;
  }

  .ym-gap__sub {
    margin: 0 0 24px;
    font-family: var(--ym-font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    text-align: center;
    color: var(--ym-local-text);
  }
  .ym-gap__effects {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ym-gap__effect {
    padding-top: 18px;
    border-top: 1px solid var(--ym-local-rule);
  }
  .ym-gap__effect-title {
    margin: 0 0 6px;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ym-local-text);
  }
  .ym-gap__effect-text {
    margin: 0;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: 1.6;
    color: var(--ym-local-muted);
  }

  .ym-gap__cta { margin-top: 40px; text-align: center; }
  .ym-gap__source {
    max-width: 720px;
    margin: 32px auto 0;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ym-local-muted);
    opacity: 0.85;
    text-align: center;
  }

  @media screen and (max-width: 749px) {
    .ym-gap__stage {
      flex-direction: column-reverse;
    }
  }

  /* ── Nebeneinander ab 900 px ───────────────────────────────────────────
     Kopf links, Grafik rechts. Die Quellenzeile und die Alltagspunkte
     laufen ueber beide Spalten: sie gehoeren zur ganzen Aussage. */
  @media screen and (min-width: 900px) {
    .ym-gap--split .ym-gap__inner {
      display: grid;
      gap: clamp(32px, 5vw, 64px);
      align-items: center;
      /* Die Spaltenbreiten kommen aus dem Regler im Style-Block oben. */
    }
    .ym-gap--split .ym-gap__head {
      max-width: 46ch;
      margin: 0;
      text-align: left;
    }
    .ym-gap--split .ym-gap__chart { margin: 0; max-width: none; }
    .ym-gap--split .ym-gap__plot { max-width: none; }
    .ym-gap--split .ym-gap__target { text-align: left; }
    .ym-gap--split .ym-gap__sum { text-align: left; }
    .ym-gap--split .ym-gap__sub,
    .ym-gap--split .ym-gap__effects,
    .ym-gap--split .ym-gap__cta,
    .ym-gap--split .ym-gap__source {
      grid-column: 1 / -1;
    }
    /* In der schmaleren Spalte muessen Kreis und Karte enger stehen,
       sonst draengt die Karte den Kreis zusammen. */
    .ym-gap--split .ym-gap__stage {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      gap: 40px;
    }
    .ym-gap--split .ym-gap__puzzlewrap { width: 240px; }
    .ym-gap--split .ym-gap__puzzlewrap--image { width: 100%; max-width: 400px; }
    .ym-gap--split .ym-gap__side { width: 200px; flex: none; }
    .ym-gap--split .ym-gap__link {
      position: absolute;
      top: var(--anchor-y, 35%);
      left: 0;
      right: 0;
      max-width: none;
      transform: translateY(-50%);
    }
    .ym-gap--split .ym-gap__line {
      left: auto;
      right: 100%;
      top: 50%;
      width: 36px;
      height: 0;
      margin: 0 6px 0 0;
      border-right: 0;
      border-top-right-radius: 0;
      border-top: 1px dashed var(--ym-aubergine-16);
    }

    /* Untereinander: dieselbe Anordnung wie bisher. */
    .ym-gap:not(.ym-gap--split) .ym-gap__stage {
      flex-direction: row;
      align-items: stretch;
      justify-content: center;
      gap: 70px;
    }
    .ym-gap:not(.ym-gap--split) .ym-gap__puzzlewrap { width: 340px; }
    .ym-gap:not(.ym-gap--split) .ym-gap__puzzlewrap--image { width: 440px; }
    .ym-gap:not(.ym-gap--split) .ym-gap__side { width: 280px; flex: none; }
    .ym-gap:not(.ym-gap--split) .ym-gap__link {
      position: absolute;
      top: var(--anchor-y, 35%);
      left: 0;
      right: 0;
      max-width: none;
      transform: translateY(-50%);
    }
    .ym-gap:not(.ym-gap--split) .ym-gap__line {
      left: auto;
      right: 100%;
      top: 50%;
      width: 50px;
      height: 0;
      margin: 0 6px 0 0;
      border-right: 0;
      border-top-right-radius: 0;
      border-top: 1px dashed var(--ym-aubergine-16);
    }
  }

  /* ── Aufbau beim Hereinscrollen ─────────────────────────────────────── */
  .ym-gap__plot.is-anim .ym-gap__fit {
    opacity: 0;
    transform: translate(26px, -26px);
    transform-box: view-box;
    transition: opacity 420ms ease-out 260ms, transform 620ms cubic-bezier(0.22, 1, 0.36, 1) 260ms;
  }
  .ym-gap__plot.is-anim .ym-gap__base,
  .ym-gap__plot.is-anim .ym-gap__ghost,
  .ym-gap__plot.is-anim .ym-gap__chartimg,
  .ym-gap__plot.is-anim .ym-gap__val--base {
    opacity: 0;
    transition: opacity 520ms ease-out;
  }
  .ym-gap__plot.is-anim .ym-gap__val--fit,
  .ym-gap__plot.is-anim .ym-gap__gap,
  .ym-gap__plot.is-anim .ym-gap__link {
    opacity: 0;
    transition: opacity 520ms ease-out 780ms;
  }

  .ym-gap__plot.is-anim.is-filled .ym-gap__fit {
    opacity: 1;
    transform: translate(0, 0);
  }
  .ym-gap__plot.is-anim.is-filled .ym-gap__base,
  .ym-gap__plot.is-anim.is-filled .ym-gap__ghost,
  .ym-gap__plot.is-anim.is-filled .ym-gap__chartimg,
  .ym-gap__plot.is-anim.is-filled .ym-gap__val--base,
  .ym-gap__plot.is-anim.is-filled .ym-gap__val--fit,
  .ym-gap__plot.is-anim.is-filled .ym-gap__gap,
  .ym-gap__plot.is-anim.is-filled .ym-gap__link {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .ym-gap__plot.is-anim .ym-gap__fit,
    .ym-gap__plot.is-anim .ym-gap__base,
    .ym-gap__plot.is-anim .ym-gap__ghost,
    .ym-gap__plot.is-anim .ym-gap__chartimg,
    .ym-gap__plot.is-anim .ym-gap__val--base,
    .ym-gap__plot.is-anim .ym-gap__val--fit,
    .ym-gap__plot.is-anim .ym-gap__gap,
    .ym-gap__plot.is-anim .ym-gap__link {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }
/* END_SECTION:ym-fiber-gap */

/* START_SECTION:ym-hero (INDEX:148) */
.ym-hero {
    position: relative;
    display: grid;
    isolation: isolate;
  }

  .ym-hero__rule {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 3;
    height: 2px;
    background-color: var(--ym-terrakotta);
  }

  .ym-hero__media,
  .ym-hero__inner {
    grid-area: 1 / 1;
  }

  .ym-hero__media {
    position: relative;
    z-index: 0;
    height: var(--ym-hero-min, 60vh);
    overflow: hidden;
  }

  .ym-hero__picture {
    display: block;
    height: 100%;
  }
  .ym-hero__img,
  .ym-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ym-hero-focus, 50% 50%);
  }
  /* Der Bildausschnitt-Regler wirkt damit auf Video wie auf Foto, und auf
     dem Telefon greift derselbe Fokuswert wie beim Hochformat-Bild. */
  .ym-hero__video {
    background-color: var(--ym-leinen, #e8e4dc);
  }

  /* Der Schleier traegt die Farbe, die dem Text den Ruecken freihaelt:
     hinter heller Schrift dunkelt er ab, hinter dunkler hellt er auf. Ohne
     diese Umkehr arbeitet der Deckkraft-Regler bei dunklem Text gegen die
     Lesbarkeit, statt fuer sie. */
  .ym-hero__scrim {
    --ym-scrim-rgb: 48, 35, 49;
    position: absolute;
    inset: 0;
    background: linear-gradient(
      100deg,
      rgba(var(--ym-scrim-rgb, 48, 35, 49), var(--ym-hero-overlay, 0)) 0%,
      rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 0.55)) 46%,
      rgba(var(--ym-scrim-rgb, 48, 35, 49), 0) 78%
    );
  }

  .ym-hero__inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: var(--ym-hero-min, 340px);
    padding-block: 48px;
  }

  .ym-hero__panel {
    max-width: 440px;
  }
  .ym-hero__panel--center {
    margin-inline: auto;
    text-align: center;
  }
  .ym-hero__panel--right {
    margin-inline-start: auto;
  }

  .ym-hero__heading {
    margin-top: 14px;
  }
  .ym-hero__eyebrow + .ym-hero__heading {
    margin-top: 12px;
  }

  .ym-hero__body {
    margin-top: 16px;
    max-width: 42ch;
  }
  .ym-hero__panel--center .ym-hero__body {
    margin-inline: auto;
  }

  .ym-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
  }
  .ym-hero__panel--center .ym-hero__actions {
    justify-content: center;
  }

  .ym-hero__caption {
    margin-top: 32px;
    text-transform: none;
    letter-spacing: 0.04em;
  }

  /* Helle Schrift auf dunklen/fotografischen Heros */
  /* Doppelt gewichtet: .ym-surface--blush aus ym-brand.css setzt dieselbe
     Variable, laedt spaeter und gewaenne sonst bei gleicher Spezifitaet. */
  .ym-hero.ym-hero--text-dark .ym-hero__scrim {
    --ym-scrim-rgb: 245, 244, 239;
  }

  .ym-hero.ym-hero--text-light {
    --ym-local-text: #fff;
    --ym-local-muted: rgba(255, 255, 255, 0.88);
    --ym-local-eyebrow: rgba(255, 255, 255, 0.82);
    color: #fff;
  }

  @media screen and (min-width: 750px) {
    .ym-hero__inner {
      padding-block: 64px;
    }
    .ym-hero__caption {
      align-self: flex-end;
      max-width: 30ch;
      margin-top: auto;
      text-align: right;
    }
  }

  /* Gestapelt: Bild oben, Text darunter auf der Flaeche. Noetig, sobald der
     Bildfokus auf dem Produkt liegt — dann bleibt kein ruhiger Bereich mehr,
     ueber dem Text lesbar waere. */
  @media screen and (max-width: 749px) {
    .ym-hero--m-stack {
      display: block;
    }
    .ym-hero--m-stack .ym-hero__inner {
      min-height: 0;
      padding-block: 32px 40px;
    }
    .ym-hero--m-stack .ym-hero__scrim {
      display: none;
    }
    .ym-hero--m-stack .ym-hero__caption {
      margin-top: 20px;
    }
    .ym-hero--m-overlay .ym-hero__inner {
      padding-block: 32px;
    }

    /* ── Vollbild, Text unten ────────────────────────────────────────────
       Der Text sitzt im unteren Drittel statt in der Mitte. Das ist die
       Stelle, an der ein Portraetmotiv am ruhigsten ist — Schulter und
       Hintergrund statt Gesicht — und sie liegt naeher am Daumen. */
    .ym-hero--m-bottom .ym-hero__inner {
      justify-content: flex-end;
      padding-block: 32px 40px;
    }
    /* Der Verlauf laeuft entgegengesetzt zum Standard: oben klar, damit das
       Motiv sichtbar bleibt, unten kraeftig, damit die Schrift traegt.
       Der Regler "Abdunklung" steuert weiterhin die Staerke. */
    .ym-hero--m-bottom .ym-hero__scrim {
      background: linear-gradient(
        180deg,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), 0) 0%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 0.2)) 42%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 0.85)) 76%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 1.3)) 100%
      );
    }
    /* Ueberschrift eine Spur kleiner als --display--xl, damit zwei Zeilen
       plus Satz plus Button ins untere Drittel passen. */
    .ym-display.ym-hero--m-bottom .ym-hero__heading,
    .ym-hero--m-bottom .ym-hero__heading {
      font-size: clamp(28px, 21px + 3.4vw, 36px);
      line-height: 1.12;
    }
    .ym-hero--m-bottom .ym-hero__body {
      margin-top: 11px;
      max-width: 30ch;
      font-size: 15px;
      line-height: 1.45;
    }
    .ym-hero--m-bottom .ym-hero__actions {
      margin-top: 18px;
    }
    .ym-hero--m-bottom .ym-btn {
      width: 100%;
    }
    .ym-hero--m-bottom.ym-hero--m-fit .ym-hero__inner {
      justify-content: flex-end;
    }

    /* Hochformat 1:1 einpassen: die Bildflaeche uebernimmt das
       Seitenverhaeltnis des Bildes, dadurch deckt cover die Box exakt ab —
       kein Zoom, kein Beschnitt. Die Hoehe folgt der Bildbreite. */
    .ym-hero--m-fit .ym-hero__media {
      height: auto;
      aspect-ratio: var(--ym-hero-ar, 1);
    }
    .ym-hero--m-fit .ym-hero__inner {
      min-height: 0;
    }
    /* Text oben statt mittig — bei knapper Hoehe soll er nicht auf dem
       Produkt liegen. */
    .ym-hero--m-fit.ym-hero--m-overlay .ym-hero__inner {
      justify-content: flex-start;
    }

    /* ── Liegendes Video, Text darueber ──────────────────────────────────
       Ein 16:9-Video ist auf 375 px Breite nur 211 px hoch. Laege der Text
       als Rasterzelle daneben, wuerde die Zeile auf seine Hoehe wachsen,
       die Videoflaeche mitgestreckt — und cover wuerde wieder beschneiden.
       Deshalb steht der Text absolut: die Sectionhoehe bestimmt allein das
       Video, der Text legt sich darueber. */
    .ym-hero--m-quer {
      position: relative;
    }
    .ym-hero--m-quer .ym-hero__inner {
      position: absolute;
      inset: 0;
      min-height: 0;
      justify-content: center;
      padding-block: 16px;
    }
    /* Auf 211 px muss die Schrift enger gesetzt sein als sonst. Das ist
       kein Sparen an der Wirkung, sondern die Rechnung: Ueberschrift,
       Fliesstext und Button muessen zusammen in die Videohoehe passen,
       sonst haengen sie darueber hinaus. */
    .ym-hero--m-quer .ym-hero__heading {
      font-size: clamp(20px, 13px + 3vw, 26px);
      line-height: 1.12;
    }
    .ym-hero--m-quer .ym-hero__body {
      font-size: 13px;
      line-height: 1.4;
    }
    .ym-hero--m-quer .ym-hero__panel > * + * {
      margin-top: 8px;
    }
    .ym-hero--m-quer .ym-hero__actions {
      margin-top: 12px;
    }
    .ym-hero--m-quer .ym-btn {
      min-height: 36px;
      padding-block: 8px;
    }
  }

  @media screen and (max-width: 749px) {
    /* Mobil ist der Bildausschnitt enger, der Text liegt fast immer auf
       Motiv statt auf ruhiger Fläche — deshalb ein flächiger Scrim von
       oben statt des diagonalen Verlaufs. */
    .ym-hero__scrim {
      background: linear-gradient(
        180deg,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 1.15)) 0%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 0.7)) 62%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 0.35)) 100%
      );
    }
    /* Muss NACH der allgemeinen Mobil-Regel stehen: gleiche Spezifitaet,
       sonst ueberschreibt der Standardverlauf den von "Text unten". */
    .ym-hero--m-bottom .ym-hero__scrim {
      background: linear-gradient(
        180deg,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), 0) 0%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 0.2)) 42%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 0.85)) 76%,
        rgba(var(--ym-scrim-rgb, 48, 35, 49), calc(var(--ym-hero-overlay, 0) * 1.3)) 100%
      );
    }
    .ym-hero__panel {
      max-width: none;
    }
  }
/* END_SECTION:ym-hero */

/* START_SECTION:ym-mission (INDEX:149) */
.ym-mission {
    overflow: hidden;
  }

  /* Die Linie markiert den Schnitt zwischen Hero-Einheit und Haltungstext.
     Bewusst als border und nicht als eigenes div: Dawn blendet in base.css
     jedes leere div aus (div:empty { display: none }). */
  .ym-mission--ruled {
    border-top: 2px solid var(--ym-terrakotta);
  }

  .ym-mission__inner {
    position: relative;
    z-index: 1;
  }

  .ym-mission__eyebrow {
    margin-bottom: 18px;
  }

  .ym-mission__heading {
    margin-bottom: 24px;
  }

  /* Der Fliesstext laeuft schmaler als die Headline — sonst kippt das
     Satzbild bei zentrierter Ausrichtung ins Unruhige. */
  .ym-mission__closing {
    margin-top: 30px;
    color: var(--ym-local-text);
  }

  .ym-mission__blob {
    z-index: 0;
  }
  .ym-mission__blob--left {
    top: 42%;
    left: 5%;
    width: 96px;
    height: 64px;
  }
  .ym-mission__blob--right {
    top: 20%;
    right: 6%;
    width: 84px;
    height: 58px;
  }

  @media screen and (max-width: 1199px) {
    .ym-mission__blob {
      display: none;
    }
  }
/* END_SECTION:ym-mission */

/* START_SECTION:ym-moments (INDEX:150) */
.ym-mom {
    --ym-local-text: var(--ym-aubergine);
    --ym-local-muted: var(--ym-aubergine-72);
    color: var(--ym-local-text);
    text-align: center;
  }
  .ym-mom--leinen      { background-color: var(--ym-leinen); }
  .ym-mom--leinenweiss { background-color: var(--ym-leinenweiss); }
  .ym-mom--blush       { background-color: var(--ym-blush); }
  .ym-mom--white       { background-color: #fff; }
  .ym-mom--transparent { background-color: transparent; }

  .ym-mom__bleed {
    width: 100%;
    padding-inline: clamp(12px, 2.5vw, 40px);
    box-sizing: border-box;
  }

  .ym-mom__eyebrow { margin: 0 0 28px; }

  /* Die Komposition steht als eigene, mittige Spalte — schmaler als die
     Sektion, damit Wort und Bild einander finden statt sich zu suchen. */
  .ym-mom__rows {
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 2vw, 24px);
    margin-inline: auto;
  }

  /* Wort und Bild teilen sich die Reihe, die Reihe selbst ist mittig.
     Jede zweite tauscht die Seiten — der Wechsel ergibt den Versatz, ohne
     dass die Sektion aus der Mittelachse der Seite ausbricht. */
  .ym-mom__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(16px, 3.5vw, 40px);
  }
  .ym-mom__row--flip {
    flex-direction: row-reverse;
  }

  .ym-mom__word {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-weight: 600;
    line-height: 0.98;
    letter-spacing: -0.01em;
    text-align: left;
    overflow-wrap: break-word;
    /* Groesse und Farbe kommen aus den Reglern im Style-Block oben. */
  }
  /* Kursiv gesetzte Woerter bekommen etwas Luft nach rechts: die Schraeglage
     laesst den letzten Buchstaben sonst in den Folgeabstand kippen. */
  .ym-mom__word em {
    font-style: italic;
    padding-right: 0.06em;
  }
  .ym-mom__row--flip .ym-mom__word { text-align: right; }
  .ym-mom__row--solo { justify-content: center; }
  .ym-mom__row--solo .ym-mom__word { text-align: center; }

  .ym-mom__tile {
    position: relative;
    flex: 0 0 clamp(160px, 44%, 320px);
    margin: 0;
    border-radius: var(--ym-radius-lg, 18px);
    overflow: hidden;
    transform: rotate(var(--tilt, 0deg));
    box-shadow: 0 10px 26px rgba(48, 35, 49, 0.12);
  }
  .ym-mom__img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    /* Das Seitenverhaeltnis kommt aus dem Regler im Style-Block oben. */
  }

  /* Die Beschriftung sitzt im Bild. Auf einem Foto ist weisser Text ohne
     Absicherung ein Gluecksspiel — deshalb der Verlauf darunter. */
  .ym-mom__label {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 32px 14px 11px;
    font-family: var(--ym-font-sans);
    font-size: clamp(12px, 1.3vw, 15px);
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    color: #fff;
    background: linear-gradient(to top, rgba(48, 35, 49, 0.72), rgba(48, 35, 49, 0));
    text-shadow: 0 1px 2px rgba(48, 35, 49, 0.35);
  }
  .ym-mom__label--pill {
    left: 11px;
    right: auto;
    bottom: 11px;
    padding: 6px 12px;
    border-radius: var(--ym-radius-pill, 999px);
    background: rgba(255, 255, 255, 0.92);
    color: var(--ym-aubergine);
    text-shadow: none;
    backdrop-filter: blur(2px);
  }

  .ym-mom__note {
    max-width: 56ch;
    margin: clamp(24px, 4vw, 48px) auto 0;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ym-local-muted);
  }
  .ym-mom__cta { margin-top: 32px; }

  /* Unter 750 px bleiben Wort und Bild nebeneinander — das Paar ist die
     ganze Idee der Sektion. Das Bild bekommt eine feste Breite (Regler),
     das Wort nimmt den Rest und darf umbrechen. Die Neigung faellt weg:
     auf schmaler Flaeche kostet sie nur Platz und kippt die Kachel gegen
     den Rand. */
  @media screen and (max-width: 749px) {
    .ym-mom__rows { gap: 24px; }
    .ym-mom__row { gap: 12px; }
    .ym-mom__word {
      flex: 1 1 0;
      hyphens: auto;
    }
    .ym-mom__tile {
      flex: 0 0 auto;
      width: 52%;
      transform: none;
      border-radius: var(--ym-radius-md, 14px);
      box-shadow: 0 6px 16px rgba(48, 35, 49, 0.12);
    }
    .ym-mom__row--solo .ym-mom__word { flex: 0 1 auto; }
    .ym-mom__label {
      padding: 22px 10px 8px;
      font-size: 11px;
    }
    .ym-mom__label--pill {
      left: 8px;
      bottom: 8px;
      padding: 4px 9px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ym-mom__tile { transform: none; }
  }
/* END_SECTION:ym-moments */

/* START_SECTION:ym-pdp-hero (INDEX:151) */
.ym-pdp {
    overflow: hidden;
  }
  /* Der Symbolvorrat darf nichts einnehmen, muss aber im Layout bleiben:
     display:none wuerde <use> in manchen Browsern ins Leere laufen lassen. */
  .ym-pdp__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .ym-pdp__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: start;
  }

  /* Alle gezeichneten Symbole: eine Kontur, keine Flaeche, Terrakotta.
     Die Groessen kommen aus den Reglern im Style-Block oben. */
  .ym-pdp__glyph {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    color: var(--ym-terrakotta);
  }

  .ym-pdp__gallery {
    position: relative;
    padding: 24px;
    background-color: #fff;
    border: 1px solid var(--ym-local-rule);
    border-radius: var(--ym-radius-lg);
  }
  .ym-pdp__badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background-color: #fff;
    border: 1px solid var(--ym-aubergine-16);
    border-radius: var(--ym-radius-pill);
    font-family: var(--ym-font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ym-aubergine);
    box-shadow: 0 2px 10px rgba(48, 35, 49, 0.06);
  }
  .ym-pdp__stage {
    position: relative;
    aspect-ratio: 1 / 1;
  }
  .ym-pdp__slide {
    position: absolute;
    inset: 0;
    display: none;
  }
  .ym-pdp__slide.is-active {
    display: block;
  }
  .ym-pdp__stage-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .ym-pdp__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background-color: #fff;
    border: 1px solid var(--ym-aubergine-16);
    border-radius: 50%;
    color: var(--ym-aubergine);
    cursor: pointer;
  }
  .ym-pdp__nav svg {
    width: 18px;
    height: 18px;
  }
  .ym-pdp__nav--prev { left: 0; }
  .ym-pdp__nav--next { right: 0; }

  .ym-pdp__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
  }
  .ym-pdp__thumb {
    display: block;
    width: 64px;
    height: 64px;
    padding: 4px;
    background-color: #fff;
    border: 1px solid var(--ym-aubergine-12);
    border-radius: var(--ym-radius-sm);
    cursor: pointer;
  }
  .ym-pdp__thumb.is-active {
    border-color: var(--ym-terrakotta);
  }
  .ym-pdp__thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ym-pdp__reviews {
    margin-top: 16px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid var(--ym-local-rule);
    border-radius: var(--ym-radius-lg);
  }
  .ym-pdp__reviews-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
  }
  .ym-pdp__reviews-score {
    margin: 0;
    font-family: var(--ym-font-display);
    font-size: 32px;
    line-height: 1.1;
    color: var(--ym-aubergine);
  }
  .ym-pdp__reviews-count {
    margin: 4px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 13px;
    color: var(--ym-text-muted);
  }
  .ym-pdp__reviews-seal {
    width: 60px;
    height: auto;
  }
  .ym-pdp__stars {
    display: inline-flex;
    gap: 2px;
    margin-top: 4px;
    color: var(--ym-terrakotta);
  }
  .ym-pdp__star {
    width: 16px;
    height: 16px;
  }
  .ym-pdp__stars--sm .ym-pdp__star {
    width: 13px;
    height: 13px;
  }
  .ym-pdp__star.is-empty {
    color: var(--ym-aubergine-16);
  }

  .ym-pdp__review-list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
  }
  .ym-pdp__review {
    padding: 12px 14px;
    background-color: var(--ym-leinenweiss);
    border-radius: var(--ym-radius-sm);
  }
  .ym-pdp__review-text {
    margin: 4px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ym-aubergine);
  }

  /* Dasselbe Siegel wie in den Kundenstimmen der Startseite: Salbei-Flaeche,
     Haken in der Farbe der Kachel. */
  .ym-pdp__verified {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 6px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 500;
    color: var(--ym-salbei);
  }
  .ym-pdp__seal {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--ym-salbei);
    --ym-pdp-check-mark: var(--ym-leinenweiss);
  }
  .ym-pdp__reviews-all {
    width: 100%;
    margin-top: 12px;
  }

  .ym-pdp__usps {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
  }
  .ym-pdp__usp {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--ym-font-sans);
    font-size: 13px;
    color: var(--ym-local-muted);
  }

  .ym-pdp__title {
    margin: 0;
  }

  /* Die Empfehlung sitzt auf voller Spaltenbreite. box-sizing ist noetig,
     weil das Theme global auf border-box steht, der Innenabstand hier aber
     zusammen mit width:100% sonst ueber die Spalte hinauslaufen wuerde. */
  .ym-pdp__expert {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    box-sizing: border-box;
    margin-top: 16px;
    padding: 14px 18px;
    background-color: var(--ym-blush);
    border-radius: var(--ym-radius-md);
  }
  /* Das Portraitbild bringt seine eigene Kreisform (drei Portraits nebeneinander)
     bereits mit. Ein quadratischer Rahmen mit object-fit:cover und border-radius
     hat davon nur einen Ausschnitt gezeigt — deshalb feste Hoehe, freie Breite
     und contain, damit die Datei in ihrem eigenen Seitenverhaeltnis steht. */
  .ym-pdp__expert-img {
    width: auto;
    height: 44px;
    max-width: 50%;
    object-fit: contain;
    border-radius: 0;
    flex: 0 0 auto;
  }
  /* min-width:0 ist der eigentliche Punkt: ein Flex-Element schrumpft ohne
     diese Angabe nicht unter seine Inhaltsbreite — der Text lief deshalb
     rechts aus der Box heraus, statt umzubrechen. */
  .ym-pdp__expert-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--ym-font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ym-aubergine);
    overflow-wrap: break-word;
  }
  .ym-pdp__expert-text strong {
    display: block;
  }

  .ym-pdp__rating-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 9px;
    margin-top: 14px;
    font-family: var(--ym-font-sans);
    font-size: 13px;
    color: var(--ym-local-muted);
  }
  .ym-pdp__rating-score {
    font-weight: 500;
    color: var(--ym-local-text);
  }

  .ym-pdp__subline {
    margin-top: 10px;
  }

  .ym-pdp__keypoints {
    display: grid;
    gap: 12px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }
  .ym-pdp__keypoint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
  }
  .ym-pdp__glyph--keypoint {
    margin-top: 1px;
  }
  .ym-pdp__keypoint-body {
    font-family: var(--ym-font-sans);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--ym-local-muted);
  }
  .ym-pdp__keypoint-body strong {
    color: var(--ym-local-text);
    font-weight: 500;
  }
  .ym-pdp__keypoint-text::before {
    content: ': ';
  }

  .ym-pdp__buybox {
    display: block;
    margin-top: 24px;
  }
  .ym-pdp__buybox form {
    margin: 0;
  }

  .ym-pdp__price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 10px;
  }
  .ym-pdp__price-main {
    font-family: var(--ym-font-sans);
    font-size: 26px;
    font-weight: 500;
    color: var(--ym-local-text);
  }
  .ym-pdp__price-compare {
    font-family: var(--ym-font-sans);
    font-size: 18px;
    color: var(--ym-text-faint);
  }
  .ym-pdp__price-unit,
  .ym-pdp__price-tax {
    font-family: var(--ym-font-sans);
    font-size: 12px;
    color: var(--ym-text-faint);
  }
  .ym-pdp__shipping-note {
    margin: 2px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    color: var(--ym-text-faint);
  }

  .ym-pdp__delivery {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px 0 0;
    padding: 10px 12px;
    background-color: var(--ym-leinenweiss);
    border-radius: var(--ym-radius-sm);
    font-family: var(--ym-font-sans);
    font-size: 13px;
    color: var(--ym-aubergine);
  }
  .ym-pdp__delivery-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--ym-terrakotta);
  }

  .ym-pdp__purchase {
    margin-top: 16px;
  }
  .ym-pdp__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ym-pdp__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 10px 14px;
    background-color: #fff;
    border: 1px solid var(--ym-aubergine-16);
    border-radius: var(--ym-radius-sm);
    font-family: var(--ym-font-sans);
    font-size: 14px;
    color: var(--ym-aubergine);
    cursor: pointer;
  }
  .ym-pdp__tab.is-active {
    background-color: var(--ym-aubergine);
    border-color: var(--ym-aubergine);
    color: var(--ym-leinenweiss);
  }
  .ym-pdp__tab-badge {
    padding: 2px 6px;
    background-color: var(--ym-terrakotta);
    border-radius: var(--ym-radius-pill);
    font-size: 11px;
    color: #fff;
  }

  .ym-pdp__option {
    display: none;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding: 14px;
    background-color: #fff;
    border: 1px solid var(--ym-terrakotta);
    border-radius: var(--ym-radius-sm);
    cursor: pointer;
  }
  .ym-pdp__option.is-active {
    display: flex;
  }
  .ym-pdp__option input {
    accent-color: var(--ym-terrakotta);
    flex: 0 0 auto;
  }
  .ym-pdp__option-body {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ym-font-sans);
  }
  .ym-pdp__option-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--ym-aubergine);
  }
  .ym-pdp__option-note {
    font-size: 12px;
    color: var(--ym-text-muted);
  }
  .ym-pdp__option-price {
    display: grid;
    justify-items: end;
    gap: 1px;
    font-family: var(--ym-font-sans);
    text-align: right;
  }
  .ym-pdp__option-compare {
    font-size: 12px;
    color: var(--ym-text-faint);
  }
  .ym-pdp__option-now {
    font-size: 15px;
    font-weight: 500;
    color: var(--ym-aubergine);
  }
  .ym-pdp__saving {
    margin: 6px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    color: var(--ym-salbei);
  }
  /* Die Ersparnis gehoert zum Abo. Beim Einmalkauf behauptet sie sonst
     direkt ueber dem Warenkorb-Button einen Rabatt, den es dort nicht gibt. */
  .ym-pdp__purchase[data-mode="onetime"] .ym-pdp__saving {
    display: none;
  }

  .ym-pdp__tiers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 8px;
    margin-top: 12px;
  }
  .ym-pdp__tier {
    display: grid;
    gap: 3px;
    padding: 11px 8px;
    background-color: #fff;
    border: 1px solid var(--ym-aubergine-16);
    border-radius: var(--ym-radius-sm);
    font-family: var(--ym-font-sans);
    cursor: pointer;
  }
  .ym-pdp__tier.is-active {
    border-color: var(--ym-aubergine);
    box-shadow: inset 0 0 0 1px var(--ym-aubergine);
  }
  .ym-pdp__tier-label {
    font-size: 13px;
    color: var(--ym-aubergine);
  }
  .ym-pdp__tier-badge {
    font-size: 12px;
    color: var(--ym-terrakotta);
  }

  .ym-pdp__qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 8px 12px;
    background-color: #fff;
    border: 1px solid var(--ym-aubergine-16);
    border-radius: var(--ym-radius-sm);
  }
  .ym-pdp__qty-label,
  .ym-pdp__qty-unit {
    font-family: var(--ym-font-sans);
    font-size: 13px;
    color: var(--ym-text-muted);
  }
  .ym-pdp__stepper {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
  }
  .ym-pdp__step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: 1px solid var(--ym-aubergine-16);
    border-radius: var(--ym-radius-sm);
    color: var(--ym-aubergine);
    cursor: pointer;
  }
  .ym-pdp__step svg {
    width: 16px;
    height: 16px;
  }
  .ym-pdp__qty-input {
    width: 44px;
    padding: 4px;
    background: none;
    border: 0;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    text-align: center;
    color: var(--ym-aubergine);
    -moz-appearance: textfield;
  }
  .ym-pdp__qty-input::-webkit-outer-spin-button,
  .ym-pdp__qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .ym-pdp__submit {
    width: 100%;
    margin-top: 12px;
    position: relative;
  }
  .ym-pdp__submit .loading__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ym-pdp__submit.loading > span {
    visibility: hidden;
  }

  .ym-pdp__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 16px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
  }
  .ym-pdp__trust-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    color: var(--ym-text-muted);
  }
  .ym-pdp__trust-icon {
    width: 14px;
    height: 14px;
    color: var(--ym-terrakotta);
  }

  .ym-pdp__payments {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }
  .ym-pdp__payments svg {
    width: 34px;
    height: 22px;
  }

  .ym-pdp__advice {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px;
    background-color: var(--ym-leinenweiss);
    border-radius: var(--ym-radius-md);
    text-decoration: none;
    color: var(--ym-aubergine);
  }
  .ym-pdp__advice-icon {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    color: var(--ym-terrakotta);
  }
  .ym-pdp__advice-body {
    display: grid;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--ym-font-sans);
  }
  .ym-pdp__advice-title {
    font-size: 14px;
    font-weight: 500;
  }
  .ym-pdp__advice-text {
    font-size: 12px;
    color: var(--ym-text-muted);
  }
  .ym-pdp__advice-chevron {
    width: 18px;
    height: 18px;
    color: var(--ym-aubergine-52);
  }

  .ym-pdp__hint {
    margin-top: 16px;
  }

  .product-form__error-message-wrapper {
    margin-bottom: 12px;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    color: #8b2f2f;
  }

  /* Auf schmalen Geraeten gehoeren die Bewertungen ans Ende: erst das
     Produkt sehen, dann kaufen koennen, dann der soziale Beleg. Der linke
     Wrapper loest sich dafuer per display:contents auf, damit Galerie und
     Bewertungen einzeln in der Reihenfolge stehen koennen — sonst kaeme
     der Kaufbereich zwangslaeufig hinter beiden. */
  @media screen and (max-width: 989px) {
    .ym-pdp__grid {
      display: flex;
      flex-direction: column;
      align-items: stretch;
    }
    .ym-pdp__left {
      display: contents;
    }
    .ym-pdp__gallery {
      order: 1;
    }
    .ym-pdp__right {
      order: 2;
    }
    .ym-pdp__reviews {
      order: 3;
      margin-top: 0;
    }
        /* USP-Zeile: feste 1 Spalten, damit die drei Punkte verlässlich stehen */
            .ym-pdp__usps {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px 16px;
    }

    /* Mengen-Staffel: 2 x 2 statt 3 + 1 */
    .ym-pdp__tiers {
      grid-template-columns: 1fr 1fr;
    }

    /* Experten-Box: mehr Textbreite und sauberer Trennstrich statt Buchstabenbruch */
    .ym-pdp__expert {
      padding: 14px;
      gap: 11px;
    }
    .ym-pdp__expert-img {
      height: 40px;
    }
    .ym-pdp__expert-text {
      -webkit-hyphens: auto;
      hyphens: auto;
    }
  }

  @media screen and (min-width: 990px) {
    .ym-pdp__grid {
      grid-template-columns: 52fr 48fr;
      gap: 48px;
    }
    .ym-pdp__left {
      position: sticky;
      top: 20px;
    }
  }
/* END_SECTION:ym-pdp-hero */

/* START_SECTION:ym-pdp-tabs (INDEX:152) */
.ym-tabs {
    --ym-local-text: var(--ym-aubergine);
    --ym-local-muted: var(--ym-aubergine-72);
    --ym-local-rule: var(--ym-aubergine-16);
    color: var(--ym-local-text);
  }
  .ym-tabs--leinen      { background-color: var(--ym-leinen); }
  .ym-tabs--leinenweiss { background-color: var(--ym-leinenweiss); }
  .ym-tabs--blush       { background-color: var(--ym-blush); }
  .ym-tabs--white       { background-color: #fff; }
  .ym-tabs--transparent { background-color: transparent; }

  /* Die Leiste selbst traegt die Haarlinie, nicht die einzelnen Tabs — sonst
     bekaeme jeder Tab seinen eigenen Strich und die Zeile zerfiele. */
  .ym-tabs__bar {
    display: flex;
    gap: 28px;
    border-bottom: 1px solid var(--ym-local-rule);
    /* Unter 700 px scrollt die Leiste waagrecht. Die Scrollbar bleibt
       unsichtbar, das Snapping macht die Bedienung trotzdem sauber. */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
  }
  .ym-tabs__bar::-webkit-scrollbar {
    display: none;
  }

  .ym-tabs__tab {
    flex: none;
    position: relative;
    padding: 12px 0 14px;
    border: 0;
    background: transparent;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--ym-local-muted);
    cursor: pointer;
    scroll-snap-align: start;
    transition: color 160ms ease-out;
  }
  .ym-tabs__tab:hover {
    color: var(--ym-local-text);
  }
  /* Der aktive Strich liegt auf der Haarlinie der Leiste, nicht darunter —
     deshalb -1px statt 0. */
  .ym-tabs__tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--ym-terrakotta);
    opacity: 0;
    transition: opacity 160ms ease-out;
  }
  .ym-tabs__tab.is-active {
    color: var(--ym-local-text);
    font-weight: 600;
  }
  .ym-tabs__tab.is-active::after {
    opacity: 1;
  }
  .ym-tabs__tab:focus-visible {
    outline: 2px solid var(--ym-terrakotta);
    outline-offset: 2px;
  }

  .ym-tabs__panel {
    padding-top: 32px;
    max-width: 72ch;
  }
  .ym-tabs__panel:focus-visible {
    outline: 2px solid var(--ym-terrakotta);
    outline-offset: 4px;
  }
  .ym-tabs__heading {
    margin: 0 0 16px;
    font-family: var(--ym-font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ym-local-text);
  }
  .ym-tabs__text {
    color: var(--ym-local-muted);
  }
  .ym-tabs__text > p {
    margin: 0 0 1.2em;
  }
  .ym-tabs__text > p:last-child {
    margin-bottom: 0;
  }
  .ym-tabs__text ul,
  .ym-tabs__text ol {
    margin: 0 0 1.2em;
    padding-left: 18px;
  }
  .ym-tabs__text li {
    margin-bottom: 0.4em;
  }
  /* Die Produktbeschreibung kommt aus dem Rich-Text-Editor und kann alles
     mitbringen, was der zulaesst — Zwischenueberschriften und Bilder
     bekommen deshalb hier ihre Form, sonst faellt der Tab aus dem Raster. */
  .ym-tabs__text h2,
  .ym-tabs__text h3,
  .ym-tabs__text h4 {
    margin: 20px 0 8px;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ym-local-text);
  }
  .ym-tabs__text h2:first-child,
  .ym-tabs__text h3:first-child,
  .ym-tabs__text h4:first-child {
    margin-top: 0;
  }
  .ym-tabs__text img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
  }
  .ym-tabs__text a {
    color: var(--ym-terrakotta);
  }

  /* Die Tabelle darf scrollen statt zu quetschen: Naehrwertzeilen mit drei
     Spalten passen auf einem schmalen Telefon sonst nicht ohne Umbruch
     mitten in der Zahl. */
  .ym-tabs__table-wrap {
    margin-top: 24px;
    overflow-x: auto;
  }
  .ym-tabs__table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: 1.4;
  }
  .ym-tabs__table th,
  .ym-tabs__table td {
    padding: 10px 12px 10px 0;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--ym-local-rule);
  }
  .ym-tabs__table thead th {
    font-weight: 600;
    color: var(--ym-local-text);
    white-space: nowrap;
  }
  .ym-tabs__table tbody th {
    font-weight: 400;
    color: var(--ym-local-text);
  }
  .ym-tabs__table tbody td {
    color: var(--ym-local-muted);
    white-space: nowrap;
  }
  .ym-tabs__table tbody tr:last-child th,
  .ym-tabs__table tbody tr:last-child td {
    border-bottom: 0;
  }

  .ym-tabs__footnote {
    margin: 20px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ym-local-muted);
    opacity: 0.85;
  }

  @media screen and (min-width: 750px) {
    .ym-tabs__bar {
      gap: 40px;
    }
    .ym-tabs__panel {
      padding-top: 40px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ym-tabs__tab,
    .ym-tabs__tab::after {
      transition-duration: 0s;
    }
  }
/* END_SECTION:ym-pdp-tabs */

/* START_SECTION:ym-principles (INDEX:154) */
.ym-principles__grid {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ym-principles__text {
    display: flex;
    align-items: center;
    padding-inline: var(--ym-gutter);
  }
  .ym-principles__text-inner {
    width: 100%;
    max-width: 520px;
  }

  .ym-principles__heading {
    margin-top: 14px;
  }
  .ym-principles__intro {
    margin-top: 16px;
    max-width: 44ch;
  }

  .ym-principles__list {
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
  }

  .ym-principles__item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding-block: 18px;
    border-top: 1px solid var(--ym-local-rule);
  }
  .ym-principles__item:last-child {
    border-bottom: 1px solid var(--ym-local-rule);
  }

  .ym-principles__mark {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 1px solid var(--ym-local-eyebrow);
    border-radius: 50%;
    color: var(--ym-local-eyebrow);
  }
  .ym-principles__mark > svg {
    width: 12px;
    height: 12px;
  }

  .ym-principles__item-title {
    margin: 0;
    font-family: var(--ym-font-sans);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--ym-local-text);
  }
  .ym-principles__item-body {
    margin-top: 6px;
    max-width: 52ch;
  }

  .ym-principles__cta {
    margin-top: 28px;
  }

  /* Die Flaeche hinter dem Bild ist eigen einstellbar. Auf dem Desktop
     deckt das Foto sie vollstaendig ab; mobil wird sie sichtbar, sobald die
     Unterkante des Bildes gerundet ist — dort soll sie die Farbe der
     folgenden Section aufnehmen, damit der Uebergang nahtlos bleibt. */
  .ym-principles__media {
    position: relative;
    min-height: var(--ym-principles-media, 280px);
    background-color: var(--ym-principles-media-bg, transparent);
  }
  .ym-principles__img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: var(--ym-principles-media, 280px);
    object-fit: cover;
  }

  @media screen and (max-width: 989px) {
    /* Gerundet wird das Bild selbst, nicht die Section: ein overflow:hidden
       auf der Section wuerde die Ecken zum Seitenhintergrund hin freistellen
       statt zur Flaeche der naechsten Section. */
    .ym-principles--arch-mobile .ym-principles__img {
      border-end-start-radius: var(--ym-arch);
      border-end-end-radius: var(--ym-arch);
    }
  }

  @media screen and (min-width: 990px) {
    .ym-principles__grid {
      align-items: center;
    }

    /* Der Textrand ist regelbar, weil das Bild bis an die Fensterkante
       laeuft, der Text aber auf dem Raster sitzt. Auf breiten Schirmen
       entsteht dadurch links ein grosser Weissraum, dem rechts nichts
       gegenuebersteht. --ym-principles-inset blendet zwischen beidem:
       0 = buendig zum Fensterrand, 1 = buendig zur Containerkante.
       flex-start ist Pflicht — mit flex-end wuerde der Block wieder nach
       rechts gedrueckt und der Regler bliebe wirkungslos. */
    .ym-principles__text {
      justify-content: flex-start;
      padding-inline-start: max(
        var(--ym-gutter),
        calc(
          (100vw - var(--ym-page-width)) / 2 * var(--ym-principles-inset, 0.5)
          + var(--ym-gutter)
        )
      );
      padding-inline-end: clamp(32px, 4vw, 64px);
    }

    .ym-principles__img {
      border-start-start-radius: var(--ym-principles-corner, 0px);
      border-end-start-radius: var(--ym-principles-corner, 0px);
    }

    /* Bei "Bild links" tauschen nur die Rasterplaetze — die DOM-Reihenfolge
       bleibt Text-zuerst, damit Screenreader und Tastatur logisch laufen. */
    .ym-principles--image_first .ym-principles__text {
      grid-column: 2;
      grid-row: 1;
      justify-content: flex-end;
      padding-inline-start: clamp(32px, 4vw, 64px);
      padding-inline-end: max(
        var(--ym-gutter),
        calc(
          (100vw - var(--ym-page-width)) / 2 * var(--ym-principles-inset, 0.5)
          + var(--ym-gutter)
        )
      );
    }
    .ym-principles--image_first .ym-principles__media {
      grid-column: 1;
      grid-row: 1;
    }
    .ym-principles--image_first .ym-principles__img {
      border-start-start-radius: 0;
      border-end-start-radius: 0;
      border-start-end-radius: var(--ym-principles-corner, 0px);
      border-end-end-radius: var(--ym-principles-corner, 0px);
    }
  }
/* END_SECTION:ym-principles */

/* START_SECTION:ym-product-feature (INDEX:155) */
.ym-product {
    overflow: hidden;
  }

  .ym-product__blob {
    top: 120px;
    right: -40px;
    width: 220px;
    height: 160px;
  }

  .ym-product__head {
    margin-bottom: 36px;
    text-align: center;
  }
  .ym-product__heading {
    margin-top: 12px;
  }

  .ym-product__body {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 32px;
    align-items: center;
  }

  .ym-product__media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    padding: 24px;
  }

  /* Die Terrakotta-Ellipse liegt hinter dem Pack — Formmerkmal aus 2a. */
  .ym-product__oval {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
  }

  .ym-product__pack {
    position: relative;
    width: var(--pack-width, 62%);
    max-width: 100%;
  }
  .ym-product__img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--ym-radius-lg, 10px);
  }
  .ym-product__pack .ym-placeholder {
    min-height: 220px;
  }

  .ym-product__subheading {
    margin-top: 10px;
  }
  .ym-product__text {
    margin-top: 10px;
    max-width: 44ch;
  }

  .ym-product__features {
    display: flex;
    flex-direction: column;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }
  .ym-product__feature {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ym-local-rule);
    font-family: var(--ym-font-sans);
    font-size: 14px;
    color: var(--ym-local-text);
  }
  .ym-product__feature:first-child {
    border-top: 1px solid var(--ym-local-rule);
  }
  .ym-product__feature-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: 0 0 auto;
  }

  .ym-product__buy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin-top: 24px;
  }
  .ym-product__form {
    display: block;
  }
  .ym-product__form .form,
  .ym-product__form form {
    margin: 0;
  }
  .ym-product__submit {
    position: relative;
  }
  .ym-product__submit .loading__spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ym-product__submit.loading > span {
    visibility: hidden;
  }

  .ym-product__price {
    margin: 0;
    font-family: var(--ym-font-sans);
    font-size: 16px;
    color: var(--ym-local-text);
  }

  .ym-product__note,
  .ym-product__empty {
    flex-basis: 100%;
    margin: 0;
  }

  .product-form__error-message-wrapper {
    margin-bottom: 12px;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    color: #8b2f2f;
  }

  @media screen and (min-width: 750px) {
    .ym-product__body {
      grid-template-columns: 44fr 56fr;
      gap: 48px;
    }
    .ym-product__media {
      min-height: 340px;
    }
  }
/* END_SECTION:ym-product-feature */

/* START_SECTION:ym-proof (INDEX:156) */
/* ZBV: Trusted-Shops-Servicebewertungen unter der Bildleiste */
  .ym-proof__ts {
    margin-top: 40px;
  }
  .ym-meta.ym-proof__ts-summary {
    margin: 0 0 16px;
    text-align: center;
  }
  .ym-proof__ts-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
  .ym-proof__ts-item {
    background: var(--ym-leinenweiss);
    border-radius: 12px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .ym-proof__ts-item .ym-proof__stars,
  .ym-proof__ts-item .ym-proof__verified {
    margin: 0;
  }
  .ym-proof__ts-text {
    margin: 0;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ym-aubergine);
    flex-grow: 1;
  }
  .ym-proof__ts-note {
    margin: 14px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
    color: var(--ym-aubergine-72);
  }
  @media (max-width: 749px) {
    .ym-proof__ts-list {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  /* Hinweis zur Spezifitaet: ym-brand.css wird nach diesem Stylesheet
     geladen. Jede Regel, die eine Marken-Utility (.ym-display, .ym-body,
     .ym-meta) ueberschreiben soll, braucht deshalb beide Klassen im
     Selektor — ein einzelner Klassenselektor verliert bei Gleichstand. */

  .ym-proof {
    overflow: hidden;
  }

  /* Der Symbol-Vorrat darf nichts einnehmen, muss aber im Layout bleiben:
     display:none wuerde <use> in manchen Browsern ins Leere laufen lassen. */
  .ym-proof__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .ym-proof__head {
    text-align: center;
  }

  .ym-proof__eyebrow {
    margin-bottom: 14px;
  }

  .ym-display.ym-proof__heading {
    max-width: 24ch;
    margin-inline: auto;
  }
  .ym-proof__heading em {
    font-style: italic;
  }

  .ym-body.ym-proof__text {
    max-width: 56ch;
    margin: 16px auto 0;
  }

  .ym-proof__badge {
    display: inline-block;
    margin-top: 18px;
    text-decoration: none;
  }
  .ym-meta.ym-proof__badge-text {
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 13px;
    color: var(--ym-local-text);
    border-bottom: 1px solid var(--ym-local-rule);
    padding-bottom: 2px;
  }
  a.ym-proof__badge:hover .ym-proof__badge-text {
    border-bottom-color: currentColor;
  }

  .ym-proof__rail {
    display: flex;
    gap: 16px;
    margin: 40px 0 0;
    padding: 0 var(--ym-gutter);
    padding-inline-start: max(
      var(--ym-gutter),
      calc((100vw - var(--ym-page-width)) / 2 + var(--ym-gutter))
    );
    /* scroll-padding ist der eigentliche Schluessel: scroll-snap-align: start
       richtet die Kachel am Snapport aus, und der beginnt ohne diese Angabe
       an der sichtbaren Kante — der Innenabstand scrollt also weg und die
       Kachel rastet buendig am Rand ein. Der Wert muss deshalb immer
       demselben Innenabstand entsprechen. */
    scroll-padding-inline-start: max(
      var(--ym-gutter),
      calc((100vw - var(--ym-page-width)) / 2 + var(--ym-gutter))
    );
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    /* Kacheln gleich hoch, damit die Fusszeilen der Karten auf einer Linie
       liegen, auch wenn eine Ortsangabe umbricht. */
    align-items: stretch;
  }
  .ym-proof__rail::-webkit-scrollbar {
    display: none;
  }
  .ym-proof__rail:focus-visible {
    outline: 2px solid var(--ym-local-text);
    outline-offset: -2px;
  }

  .ym-proof__tile {
    flex: 0 0 auto;
    width: var(--ym-proof-tile, 300px);
    scroll-snap-align: start;
  }

  .ym-proof__media {
    aspect-ratio: var(--ym-proof-ratio, 3 / 4);
    border-radius: var(--ym-proof-corner, 10px);
  }
  .ym-proof__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .ym-proof__meta {
    margin-top: 14px;
    font-family: var(--ym-font-sans);
  }
  .ym-proof__meta > * {
    margin: 0;
  }
  .ym-proof__meta > * + * {
    margin-top: 5px;
  }

  .ym-proof__stars {
    display: flex;
    gap: 2px;
    line-height: 0;
  }
  .ym-proof__star {
    width: 14px;
    height: 14px;
    fill: var(--ym-local-eyebrow, var(--ym-terrakotta));
  }
  .ym-proof__star--off {
    fill: var(--ym-local-rule);
  }

  .ym-proof__quote {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ym-local-text);
  }

  .ym-proof__person {
    font-size: 14px;
    line-height: 1.4;
    color: var(--ym-local-text);
  }
  .ym-proof__name {
    font-weight: 600;
  }
  .ym-proof__city,
  .ym-proof__sep {
    color: var(--ym-local-muted);
    font-weight: 400;
  }

  .ym-proof__verified {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    line-height: 1.3;
    color: var(--ym-local-muted);
  }
  .ym-proof__seal {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    color: var(--ym-salbei);
  }
  /* Der Haken im Siegel nimmt die Flaechenfarbe der Section an, damit er
     auch auf Aubergine oder Terrakotta lesbar bleibt. */
  .ym-surface--aubergine .ym-proof__seal {
    --ym-proof-check-mark: var(--ym-aubergine);
  }
  .ym-surface--terrakotta .ym-proof__seal {
    --ym-proof-check-mark: var(--ym-terrakotta);
    color: #fff;
  }

  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  @media screen and (max-width: 749px) {
    .ym-display.ym-proof__heading {
      max-width: 20ch;
      font-size: clamp(22px, 18px + 2vw, 28px);
      line-height: 1.18;
    }
    .ym-body.ym-proof__text {
      margin-top: 11px;
      max-width: 40ch;
      font-size: 14.5px;
      line-height: 1.5;
    }

    /* Eigener, fest gesetzter Innenabstand statt der Container-Rechnung.
       Die oben verwendete Formel haengt an --page-width; liefert das Theme
       dort einen Wert, den calc() nicht verrechnen kann, faellt die ganze
       Eigenschaft aus und die erste Kachel klebt an der Fensterkante.
       Hier steht deshalb ein einfacher Wert, der zugleich in die
       Kachelbreiten-Rechnung eingeht. */
    .ym-proof__rail {
      padding-inline-start: var(--ym-proof-rail-start, 20px);
      padding-inline-end: var(--ym-proof-rail-start, 20px);
      /* Muss denselben Wert tragen wie padding-inline-start, sonst rastet
         die Kachel beim Scrollen wieder an der Fensterkante ein. */
      scroll-padding-inline-start: var(--ym-proof-rail-start, 20px);
      /* Diese Luecke steckt auch in der Kachelbreiten-Rechnung oben —
         beide zusammen aendern, sonst stimmt der Ausschnitt nicht mehr. */
      gap: 12px;
      margin-top: 26px;
    }

    .ym-proof__meta {
      margin-top: 9px;
    }
    /* Bei schmaleren Kacheln muss die Fusszeile mitziehen, sonst bricht
       jede Namenszeile um. */
    .ym-proof__meta > * + * {
      margin-top: 3.5px;
    }
    .ym-proof__stars {
      gap: 1.5px;
    }
    .ym-proof__star {
      width: 12px;
      height: 12px;
    }
    .ym-proof__quote {
      font-size: 12.5px;
      line-height: 1.4;
    }
    .ym-proof__person {
      font-size: 12.5px;
    }
    .ym-proof__verified {
      gap: 4px;
      font-size: 10.5px;
    }
    .ym-proof__seal {
      width: 13px;
      height: 13px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .ym-proof__rail {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:ym-proof */

/* START_SECTION:ym-signup (INDEX:157) */
/* Hinweis zur Spezifitaet: ym-brand.css wird nach diesem Stylesheet
     geladen. Jede Regel, die eine Marken-Utility (.ym-display, .ym-body,
     .ym-meta) ueberschreiben soll, braucht deshalb beide Klassen im
     Selektor — ein einzelner Klassenselektor verliert bei Gleichstand. */

  .ym-signup {
    overflow: hidden;
  }

  .ym-signup__inner {
    position: relative;
    z-index: 1;
    text-align: center;
  }

  .ym-signup__eyebrow {
    margin-bottom: 16px;
  }

  .ym-display.ym-signup__heading {
    max-width: 20ch;
    margin-inline: auto;
  }

  .ym-body.ym-signup__text {
    max-width: 54ch;
    margin: 18px auto 0;
  }

  .ym-signup__form {
    margin-top: 32px;
  }

  /* Das Label bleibt im DOM und wird nur visuell entfernt — ein Feld, das
     nur ueber placeholder beschriftet ist, hat fuer Screenreader keinen
     Namen mehr, sobald Text eingegeben wird. */
  .ym-signup__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .ym-signup__row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    max-width: 520px;
    margin-inline: auto;
  }

  .ym-signup__input {
    /* flex-basis wirkt auf die Hauptachse. In der Zeile ist das die Breite,
       in der Spalte (mobil) waere es die Hoehe — deshalb steht die Basis
       nur hier und wird mobil auf auto zurueckgesetzt. */
    flex: 1 1 260px;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 1px solid var(--ym-local-rule);
    border-radius: var(--ym-radius-sm);
    background-color: rgba(255, 255, 255, 0.94);
    color: var(--ym-aubergine);
    font-family: var(--ym-font-sans);
    /* 16px verhindert, dass iOS Safari beim Fokus in das Feld zoomt. */
    font-size: 16px;
    line-height: 1.2;
  }
  .ym-signup__input::placeholder {
    color: var(--ym-aubergine-52);
  }
  .ym-signup__input:focus-visible {
    outline: 2px solid var(--ym-local-text);
    outline-offset: 2px;
  }

  .ym-btn.ym-signup__submit {
    flex: 0 0 auto;
    min-height: 48px;
  }

  .ym-signup__note {
    margin: 14px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: var(--ym-lh-body);
    color: var(--ym-local-text);
  }

  .ym-meta.ym-signup__legal {
    max-width: 60ch;
    margin: 24px auto 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    line-height: 1.5;
  }
  .ym-signup__legal a {
    color: inherit;
  }

  /* ── Mobil ─────────────────────────────────────────────────────────────
     Auf dem Handy fuellt dieser Block sonst fast einen ganzen Screen. Alle
     Abstaende und Schriftgrade ruecken zusammen; nur die Tap-Flaechen von
     Feld und Button bleiben bei 48px, damit sie bedienbar bleiben. */
  @media screen and (max-width: 749px) {
    .ym-signup__eyebrow {
      margin-bottom: 8px;
    }

    .ym-display.ym-signup__heading {
      max-width: 16ch;
      font-size: clamp(22px, 17px + 2.2vw, 26px);
      line-height: 1.16;
    }

    .ym-body.ym-signup__text {
      margin-top: 9px;
      max-width: 36ch;
      font-size: 14px;
      line-height: 1.5;
    }

    .ym-signup__form {
      margin-top: 16px;
    }

    .ym-signup__row {
      flex-direction: column;
      gap: 8px;
      max-width: 340px;
    }

    /* Ohne dieses Reset streckt flex: 1 1 260px das Feld in der Spalte auf
       260 px Hoehe — die Basis liegt dann auf der vertikalen Achse. */
    .ym-signup__input {
      flex: 0 0 auto;
      width: 100%;
    }
    .ym-btn.ym-signup__submit {
      width: 100%;
    }

    .ym-signup__note {
      margin-top: 9px;
      font-size: 13px;
    }

    .ym-meta.ym-signup__legal {
      margin-top: 12px;
      max-width: 40ch;
      font-size: 10.5px;
      line-height: 1.45;
    }
  }
/* END_SECTION:ym-signup */

/* START_SECTION:ym-stats (INDEX:158) */
.ym-stats {
    --ym-local-text: var(--ym-aubergine);
    --ym-local-muted: var(--ym-aubergine-72);
    color: var(--ym-local-text);
  }
  .ym-stats--leinen      { background-color: var(--ym-leinen); }
  .ym-stats--leinenweiss { background-color: var(--ym-leinenweiss); }
  .ym-stats--blush       { background-color: var(--ym-blush); }
  .ym-stats--white       { background-color: #fff; }
  .ym-stats--transparent { background-color: transparent; }

  .ym-stats__head {
    max-width: 60ch;
    margin: 0 auto 40px;
    text-align: center;
  }
  .ym-stats__heading { margin-top: 14px; text-wrap: balance; }
  .ym-stats__heading > p { margin: 0; }
  .ym-stats__intro {
    margin-top: 14px;
    color: var(--ym-local-muted);
    text-wrap: pretty;
  }
  .ym-stats__intro > p { margin: 0 0 1em; }
  .ym-stats__intro > p:last-child { margin-bottom: 0; }

  .ym-stats__grid {
    display: grid;
    gap: clamp(12px, 2vw, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ym-stats__cell { min-width: 0; }

  .ym-stats__tile {
    position: relative;
    margin: 0;
    overflow: hidden;
    isolation: isolate;
  }
  .ym-stats__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Der Schleier ist ein Verlauf, keine gleichmaessige Flaeche: unten steht
     der Text, dort muss er tragen — oben darf das Motiv atmen. */
  .ym-stats__scrim {
    position: absolute;
    inset: 0;
  }
  .ym-stats__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    height: 100%;
    padding: clamp(16px, 3vw, 32px);
    box-sizing: border-box;
    text-align: center;
    color: #fff;
  }
  .ym-stats__value {
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    /* Die Groesse kommt aus den Reglern im Style-Block oben. */
  }
  .ym-stats__text {
    max-width: 34ch;
    font-family: var(--ym-font-sans);
    font-size: clamp(13px, 1.4vw, 16px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-wrap: pretty;
  }
  .ym-stats__marker {
    margin-left: 0.2em;
    font-size: 0.7em;
    vertical-align: super;
    line-height: 0;
  }

  .ym-stats__note {
    max-width: 60ch;
    margin: clamp(24px, 3vw, 36px) auto 0;
    font-family: var(--ym-font-sans);
    font-size: 15px;
    line-height: 1.6;
    color: var(--ym-local-text);
    text-align: center;
    text-wrap: pretty;
  }
  .ym-stats__cta { margin-top: 32px; text-align: center; }

  .ym-stats__source {
    max-width: 720px;
    margin: 32px auto 0;
    font-family: var(--ym-font-sans);
    font-size: 12px;
    line-height: 1.5;
    color: var(--ym-local-muted);
    opacity: 0.85;
    text-align: center;
  }
  .ym-stats__source p { margin: 0; }
  .ym-stats__source a { color: inherit; }
/* END_SECTION:ym-stats */

/* START_SECTION:ym-steps (INDEX:159) */
.ym-steps__head {
    max-width: 620px;
    margin-bottom: 32px;
  }
  .ym-steps__head--center {
    margin-inline: auto;
    text-align: center;
  }
  .ym-steps__heading {
    margin: 12px 0 0;
    color: var(--ym-local-text);
    text-wrap: balance;
  }
  .ym-steps__heading--serif {
    font-family: var(--ym-font-display);
    font-weight: 400;
    letter-spacing: var(--ym-tracking-display);
    line-height: 1.2;
    font-size: clamp(24px, 17px + 1.9vw, 36px);
  }
  .ym-steps__heading--sans {
    font-family: var(--ym-font-sans);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.28;
    font-size: clamp(20px, 15px + 1.4vw, 28px);
  }


  .ym-steps__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ym-steps__media {
    position: relative;
    overflow: hidden;
    aspect-ratio: var(--steps-ratio, 4 / 5);
    border-radius: var(--steps-radius, 10px);
    background-color: var(--ym-sunken);
  }
  .ym-steps__video,
  .ym-steps__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .ym-steps__media .ym-placeholder {
    height: 100%;
  }

  .ym-steps__label {
    margin: 16px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ym-local-text);
  }
  .ym-steps__text {
    margin: 6px 0 0;
    font-family: var(--ym-font-sans);
    font-size: 14px;
    line-height: 1.55;
    color: var(--ym-local-muted);
    max-width: 40ch;
  }

  @media screen and (min-width: 750px) {
    .ym-steps__grid {
      grid-template-columns: repeat(var(--steps-cols, 3), minmax(0, 1fr));
      gap: 20px;
    }
  }

  /* Ohne Bewegungswunsch bleibt das Poster stehen. */
  @media (prefers-reduced-motion: reduce) {
    .ym-steps__video {
      display: none;
    }
  }
/* END_SECTION:ym-steps */

/* START_SECTION:ym-topics (INDEX:160) */
/* Hinweis zur Spezifitaet: ym-brand.css wird nach diesem Stylesheet
     geladen. Jede Regel, die eine Marken-Utility (.ym-display, .ym-body,
     .ym-meta) ueberschreiben soll, braucht deshalb beide Klassen im
     Selektor — ein einzelner Klassenselektor verliert bei Gleichstand. */

  .ym-topics {
    overflow: hidden;
  }

  .ym-topics__head {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .ym-topics__heading {
    margin-top: 14px;
  }
  .ym-body.ym-topics__intro {
    margin-top: 14px;
    max-width: 52ch;
  }
  .ym-topics__cta {
    align-self: flex-start;
  }

  .ym-topics__grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: var(--ym-topics-row, 260px);
    gap: 12px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
  }

  /* Die Kachel ist als Ganzes der Link. Das Pfeilsymbol ist reine Anzeige —
     ein zweiter Link daneben wuerde denselben Ort doppelt in die
     Tabulator-Reihenfolge stellen. */
  .ym-topics__card {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: var(--ym-topics-corner, 12px);
    background-color: var(--ym-sunken);
    color: #fff;
    text-decoration: none;
    isolation: isolate;
  }

  .ym-topics__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
  }

  .ym-topics__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(48, 35, 49, calc(var(--ym-topics-scrim, 0.5) * 1.15)) 0%,
      rgba(48, 35, 49, calc(var(--ym-topics-scrim, 0.5) * 0.35)) 55%,
      rgba(48, 35, 49, calc(var(--ym-topics-scrim, 0.5) * 0.75)) 100%
    );
  }

  .ym-topics__body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 18px;
    /* Platz fuer den Pfeil in der unteren rechten Ecke. */
    padding-inline-end: 64px;
  }

  .ym-topics__title {
    font-family: var(--ym-font-sans);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
  }
  .ym-topics__excerpt {
    font-family: var(--ym-font-sans);
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.86);
    max-width: 34ch;
  }

  .ym-topics__arrow {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.92);
    color: var(--ym-aubergine);
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  .ym-topics__arrow > svg {
    width: 16px;
    height: 16px;
  }

  .ym-topics__card:hover .ym-topics__img,
  .ym-topics__card:focus-visible .ym-topics__img {
    transform: scale(1.04);
  }
  .ym-topics__card:hover .ym-topics__arrow,
  .ym-topics__card:focus-visible .ym-topics__arrow {
    background-color: #fff;
    transform: translateX(2px);
  }
  .ym-topics__card:focus-visible {
    outline: 2px solid var(--ym-local-text);
    outline-offset: 3px;
  }

  @media (prefers-reduced-motion: reduce) {
    .ym-topics__img,
    .ym-topics__arrow {
      transition: none;
    }
    .ym-topics__card:hover .ym-topics__img,
    .ym-topics__card:focus-visible .ym-topics__img {
      transform: none;
    }
  }

  /* ── Tablet: halbes Raster ─────────────────────────────────────────── */
  @media screen and (min-width: 750px) {
    .ym-topics__grid {
      grid-template-columns: repeat(6, 1fr);
      gap: 16px;
    }
    .ym-topics__cell--normal { grid-column: span 3; }
    .ym-topics__cell--wide   { grid-column: span 6; }
    .ym-topics__cell--tall   { grid-column: span 3; grid-row: span 2; }
    .ym-topics__cell--large  { grid-column: span 6; grid-row: span 2; }

    .ym-topics__head {
      flex-direction: row;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
    }
    .ym-topics__cta {
      align-self: auto;
      flex: 0 0 auto;
    }
    .ym-topics__title {
      font-size: 17px;
    }
  }

  /* ── Desktop: volles Raster ────────────────────────────────────────── */
  @media screen and (min-width: 990px) {
    .ym-topics__cell--normal { grid-column: span 2; }
    .ym-topics__cell--wide   { grid-column: span 3; }
    .ym-topics__cell--tall   { grid-column: span 2; grid-row: span 2; }
    .ym-topics__cell--large  { grid-column: span 3; grid-row: span 2; }

    .ym-topics__body {
      padding: 22px;
      padding-inline-end: 72px;
    }
    .ym-topics__title {
      font-size: 18px;
    }
  }
/* END_SECTION:ym-topics */

/* START_SECTION:ym-trust-bar (INDEX:161) */
.ym-trust__inner {
    padding-block: 12px;
  }

  /* Der Symbolvorrat darf nichts einnehmen, muss aber im Layout bleiben:
     display:none wuerde <use> in manchen Browsern ins Leere laufen lassen. */
  .ym-trust__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
  }

  .ym-trust__list {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .ym-trust__item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
  }

  .ym-trust__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    object-fit: contain;
  }

  /* currentColor kommt von .ym-surface, das --ym-local-text als color setzt.
     Damit folgen Symbol und Bildmaske jedem Flaechenwechsel ohne Zutun. */
  .ym-trust__icon--maske {
    display: block;
    background-color: currentColor;
    -webkit-mask-image: var(--ym-trust-icon);
    mask-image: var(--ym-trust-icon);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
  }

  .ym-trust__glyph {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    /* 1.5 auf 24 Einheiten ergibt bei 18 px Darstellung rund 1,1 px —
       fein genug fuer den Kleintext daneben, kraeftig genug zum Stehen. */
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .ym-trust__text {
    font-family: var(--ym-font-sans);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-transform: uppercase;
    color: var(--ym-local-text);
  }

  @media screen and (min-width: 990px) {
    /* Ab Desktop verteilen sich die Punkte über die volle Breite —
       das Band aus dem Entwurf. */
    .ym-trust__list {
      justify-content: space-between;
      gap: 16px;
    }
  }

  /* Die Kopien existieren nur fuer das Laufband auf schmalen Geraeten. */
  .ym-trust__list--klon {
    display: none;
  }

  @media screen and (max-width: 989px) {
    /* Darunter passen die Punkte nicht nebeneinander. Statt sie zum Wischen
       anzubieten — was die hinteren praktisch unsichtbar macht — laeuft das
       Band von selbst durch. Dafuer randlos: ein Laufband, das in den
       Seitenabstaenden beginnt und endet, wirkt abgeschnitten. */
    /* Doppelt gewichtet, weil ym-brand.css nach den Section-Styles laedt
       und .ym-width sonst seinen Seitenabstand behaelt. */
    .ym-trust .ym-trust__inner {
      max-width: none;
      padding-inline: 0;
    }
    .ym-trust__track {
      display: flex;
      overflow: hidden;
    }
    .ym-trust__list {
      flex: 0 0 auto;
      /* Der Abstand zwischen den Punkten kommt aus gap, der zur naechsten
         Kopie aus diesem Abstand — sonst stoesst der letzte Punkt hart an
         den ersten der Kopie. */
      padding-inline-end: 24px;
      animation: ym-trust-lauf 22s linear infinite;
      will-change: transform;
    }
    .ym-trust__list--klon {
      display: flex;
    }
  }

  /* Jede Kopie wandert um die eigene Breite nach links und rueckt damit
     genau dorthin, wo die vorherige stand — die Naht ist unsichtbar. */
  @keyframes ym-trust-lauf {
    to {
      transform: translateX(-100%);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    /* Ohne Bewegung zurueck zum Wischband, und die Kopien verschwinden. */
    .ym-trust__list {
      animation: none;
    }
    .ym-trust__list--klon {
      display: none;
    }
    @media screen and (max-width: 989px) {
      .ym-trust__track {
        overflow-x: auto;
        scrollbar-width: none;
      }
      .ym-trust__track::-webkit-scrollbar {
        display: none;
      }
      .ym-trust .ym-trust__inner {
        padding-inline: var(--ym-gutter);
      }
    }
  }
/* END_SECTION:ym-trust-bar */

/* START_SECTION:ym-why (INDEX:162) */
/* Hinweis zur Spezifitaet: ym-brand.css wird nach diesem Stylesheet
     geladen. Jede Regel, die eine Marken-Utility (.ym-display, .ym-body,
     .ym-meta, .ym-media, .ym-placeholder) ueberschreiben soll, braucht
     deshalb zwei Klassen im Selektor — ein einzelner Klassenselektor
     verliert bei Gleichstand. */

  .ym-why {
    overflow: hidden;
  }

  .ym-why__inner {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  .ym-why__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .ym-why__eyebrow {
    margin-bottom: 16px;
  }

  .ym-why__quote-wrap {
    margin: 0;
  }

  .ym-display.ym-why__quote {
    /* Ein Zitat laeuft ueber mehrere Zeilen — ruhiger als --lh-display,
       das fuer kurze Ueberschriften gedacht ist. */
    line-height: 1.32;
    max-width: 24ch;
  }

  .ym-meta.ym-why__attribution {
    margin-top: 18px;
  }

  .ym-why__figure {
    margin: 0;
  }

  /* Das Foto steht frei, ohne Bildtraeger: keine Sunken-Flaeche hinter dem
     Motiv und keine schraffierte Platzhalterflaeche. Solange kein Bild
     gewaehlt ist, markiert nur eine feine Linie den Platz. */
  .ym-media.ym-why__media {
    display: block;
    background-color: transparent;
  }

  .ym-placeholder.ym-why__media--empty {
    background-color: transparent;
    background-image: none;
    border: 1px dashed var(--ym-local-rule, rgba(48, 35, 49, 0.16));
    color: var(--ym-local-muted, rgba(48, 35, 49, 0.52));
  }

  .ym-meta.ym-why__figcaption {
    margin-top: 12px;
  }

  .ym-body.ym-why__text {
    max-width: 58ch;
  }

  .ym-why__cta {
    margin-top: 24px;
  }

  /* Zwei Spalten: Zitat oben links, Foto darunter, Erklaertext rechts. */
  @media screen and (min-width: 990px) {
    .ym-why__grid {
      column-gap: clamp(40px, 6vw, 80px);
      row-gap: 32px;
      align-items: start;
    }

    .ym-why__quote-col {
      grid-column: 1;
      grid-row: 1;
    }

    .ym-why__figure {
      grid-column: 1;
      grid-row: 2;
    }

    .ym-why__text-col {
      grid-column: 2;
      grid-row: 1 / span 2;
    }

    /* Die Linie sitzt am Textblock, nicht zwischen den Spalten — so bleibt
       sie an dessen Oberkante buendig, unabhaengig von der Zitatlaenge. */
    .ym-why__grid--divided .ym-why__text-col {
      padding-inline-start: clamp(32px, 4vw, 56px);
      border-inline-start: 1px solid var(--ym-local-rule);
    }

    .ym-display.ym-why__quote {
      max-width: 20ch;
    }

    .ym-body.ym-why__text {
      /* Der Erklaertext startet optisch auf Hoehe der ersten Zitatzeile. */
      margin-top: 6px;
    }
  }

  /* Drei Spalten: Foto | Zitat | Text. Erst ab 1200 px, darunter bliebe
     fuer den Erklaertext zu wenig Breite. */
  @media screen and (min-width: 1200px) {
    .ym-why__grid {
      column-gap: clamp(32px, 3.5vw, 60px);
    }

    .ym-why__figure {
      grid-column: 1;
      grid-row: 1;
    }

    .ym-why__quote-col {
      grid-column: 2;
      grid-row: 1;
    }

    .ym-why__text-col {
      grid-column: 3;
      grid-row: 1;
    }

    .ym-display.ym-why__quote {
      max-width: 22ch;
    }
  }

  @media screen and (max-width: 989px) {
    .ym-why__grid {
      gap: 22px;
    }
    .ym-display.ym-why__quote {
      max-width: 26ch;
      font-size: clamp(22px, 18px + 1.8vw, 28px);
    }
    .ym-body.ym-why__text {
      font-size: 15px;
    }
    .ym-why__grid--divided .ym-why__text-col {
      padding-top: 22px;
      border-top: 1px solid var(--ym-local-rule);
    }
  }
/* END_SECTION:ym-why */