/** Shopify CDN: Minification failed

Line 21155:50 Expected "}" to go with "{"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:announcement-bar (INDEX:0) */
.announcement-bar {
    font-size: var(--text-sm, 0.875rem);
    text-align: center;
    color: var(--color-text-primary, #222);
    background: var(--color-brand-accent, #eee);
  }

  .announcement-bar__text {
    margin-block: 0;
    padding-block: var(--space-2, 8px);
  }

  .announcement-bar__lead {
    display: none;
  }

  .announcement-bar__lead--alone {
    display: inline;
  }

  @media (min-width: 520px) {
    .announcement-bar__lead {
      display: inline;
    }
  }
/* END_SECTION:announcement-bar */

/* START_SECTION:app-blocks (INDEX:1) */
.app-blocks {
    padding-block: var(--section-space, 56px);
  }

  app-blocks-near {
    display: block;
  }
/* END_SECTION:app-blocks */

/* START_SECTION:benefit-row (INDEX:2) */
/* Live steht die Reihe auf dem zweiten Grund, oben und zwischen den Spalten ein harter Strich. */
  .benefit-row {
    margin-top: var(--space-12, 48px);
    border-top: 1px solid var(--color-border-strong, #222);
    background: var(--color-bg-secondary, #f4f4f4);
  }

  /* Live wischt die Reihe auf dem Telefon seitlich, statt die Spalten zu stapeln; die nächste Spalte schaut an. */
  .benefit-row__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 62%;
    margin: 0;
    padding-block: var(--space-2, 8px);
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .benefit-row__list::-webkit-scrollbar {
    display: none;
  }

  .benefit-row__item {
    padding: var(--space-4, 16px);
    text-align: center;
    scroll-snap-align: start;
  }

  .benefit-row__item + .benefit-row__item {
    border-left: 1px solid var(--color-border-strong, #222);
  }

  .benefit-row__title,
  .benefit-row__text {
    margin: 0;
  }

  .benefit-row__title {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: 400;
  }

  .benefit-row__text {
    margin-top: var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  @media (min-width: 768px) {
    /* Wie live steht die Reihe im Seitenraster: die Spalten teilen sich die halbe Gasse als Polster, auch auf breiten Schirmen mittig. */
    .benefit-row .benefit-row__list {
      grid-auto-columns: 1fr;
      margin-inline: auto;
      padding-block: var(--space-2, 8px) var(--space-4, 16px);
      padding-inline: calc(var(--page-gutter) / 2);
      overflow: visible;
    }

    .benefit-row__item {
      padding: var(--space-8, 32px) calc(var(--page-gutter) / 2);
    }

    .benefit-row__title {
      font-size: var(--text-xl, 1.25rem);
    }
  }
/* END_SECTION:benefit-row */

/* START_SECTION:cart-drawer (INDEX:3) */
.cart-drawer__title {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0;
    font-size: var(--text-xl, 1.25rem);
  }

  .cart-drawer__count-text {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 400;
    color: var(--color-text-secondary, #666);
  }

  .cart-drawer__count {
    min-width: 24px;
    padding: 0 var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: var(--color-action-primary-text, #fff);
    background: var(--color-action-primary, #222);
    border-radius: var(--radius-full, 999px);
  }

  /* The totals and the checkout stay in sight while everything above scrolls behind them; the form holds only the foot, and the drawer pads by space-4. */
  cart-drawer .cart-body__form {
    position: sticky;
    bottom: calc(var(--space-2, 8px) * -1);
    z-index: 1;
  }

  /* The foot stays small, so the lines and what completes them keep the room. */
  cart-drawer .cart-body__foot {
    gap: var(--space-2, 8px);
    margin-inline: calc(var(--space-4, 16px) * -1);
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 -8px 12px -12px var(--color-overlay-default, rgba(0, 0, 0, 0.3));
  }

  cart-drawer .cart-body__total {
    margin-top: 0;
  }

  cart-drawer .cart-body__hint {
    font-size: var(--text-xs, 0.75rem);
  }

  /* The table form keeps its foot at the bottom of the drawer however short the cart: the checkout when full, the way back over a rule when empty. */
  cart-drawer .drawer__body:has(.cart-body--table) {
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
  }

  cart-drawer .drawer__body:has(.cart-body--table) > .cart-body {
    display: flex;
    flex: 1;
    flex-direction: column;
  }

  cart-drawer .cart-body--table > .cart-body__form {
    margin-top: auto;
  }

  cart-drawer .cart-body--table .cart-body__empty {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: stretch;
    padding-bottom: 0;
  }

  cart-drawer .cart-body--table .cart-body__collection {
    align-self: flex-start;
    width: calc(50% - 5px);
    margin: 0;
  }

  cart-drawer .cart-body__back {
    position: sticky;
    bottom: 0;
    display: grid;
    margin: auto calc(var(--space-4, 16px) * -1) 0;
    padding: var(--space-4, 16px);
    background: var(--color-bg-primary, #fff);
    border-top: 1px solid var(--color-border-strong, #222);
  }

  /* The compact drawer: the count as a quiet number beside the title, light rules and an edge that parts it from the page. */
  .cart-drawer--compact {
    border-left: 1px solid var(--color-border-default, #ddd);
    box-shadow: -12px 0 32px var(--color-overlay-default, rgba(0, 0, 0, 0.08));
  }

  .cart-drawer--compact .drawer__head {
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .cart-drawer--compact .cart-drawer__title {
    align-items: baseline;
    font-size: var(--text-2xl, 1.375rem);
    font-weight: 500;
  }

  /* Opening moves the focus to the title, not the close button, so a click draws no focus ring on the cross. */
  .cart-drawer__title:focus {
    outline: none;
  }

  .cart-drawer--compact .cart-drawer__count {
    min-width: 0;
    padding: 0;
    font-size: var(--text-sm, 0.8125rem);
    font-weight: 400;
    line-height: inherit;
    color: var(--color-text-secondary, #666);
    background: none;
  }
/* END_SECTION:cart-drawer */

/* START_SECTION:creator-page (INDEX:5) */
.creator-page {
    display: block;
    padding-block: var(--space-6, 24px) 0;
  }

  .creator-page__inner {
    display: grid;
    gap: var(--space-12, 48px);
    max-width: calc(1120px + 2 * var(--page-gutter, 16px));
  }

  .creator-page__inner > * {
    min-width: 0;
  }

  /* The arms of an experiment move blocks with order; notice and commission keep their places. */
  .creator-page__notice {
    order: -40;
    display: flex;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    margin: 0 0 calc(-1 * var(--space-6, 24px));
    padding-bottom: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__eyebrow {
    justify-self: start;
    width: fit-content;
    margin: 0;
    padding: 3px var(--space-2, 8px);
    border-radius: var(--radius-sm, 4px);
    background: var(--cp-accent);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__label {
    justify-self: start;
    align-self: start;
    display: inline-block;
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-full, 999px);
    background: var(--cp-accent);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__hand {
    font-family: var(--font-highlight, serif);
    font-weight: 400;
    line-height: 1.25;
    color: var(--color-text-primary, #222);
  }

  .creator-page__mark {
    background: linear-gradient(transparent 52%, var(--color-brand-highlight, #eee) 52%, var(--color-brand-highlight, #eee) 92%, transparent 92%);
  }

  .creator-page__head {
    display: grid;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-8, 32px);
  }

  .creator-page__heading,
  .creator-page__title,
  .creator-page__name,
  .creator-page__highlight-title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .creator-page__heading {
    font-size: clamp(var(--text-2xl, 1.5rem), 4.4vw, var(--text-4xl, 2.25rem));
    line-height: 1.08;
  }

  .creator-page__head-text,
  .creator-page__lead {
    margin: 0;
    max-width: 56ch;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__small {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .creator-page__add {
    display: grid;
    gap: var(--space-2, 8px);
  }

  .creator-page__add-button {
    flex-wrap: wrap;
    gap: 0 var(--space-2, 8px);
    white-space: normal;
    text-align: center;
  }

  .creator-page__add-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
  }

  .creator-page__add-price .c-price {
    display: inline-flex;
    flex-direction: row-reverse;
    align-items: baseline;
    gap: var(--space-2, 8px);
    font: inherit;
    color: inherit;
  }

  .creator-page__add-error {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-error-600, #555);
  }

  /* On a surface in the accent, pill and marker step back to the page colour, or they would vanish. */
  .creator-page__highlight .creator-page__label,
  .creator-page__code .creator-page__pill,
  .creator-page__recipe--card .creator-page__label {
    background: var(--color-bg-primary, #fff);
  }

  .creator-page__highlight .creator-page__eyebrow,
  .creator-page__code .creator-page__eyebrow,
  .creator-page__recipe--card .creator-page__eyebrow,
  .creator-page__launch .creator-page__eyebrow {
    padding: 0;
    background: none;
  }

  /* Kopf: ein Band in der Akzentfarbe über die volle Breite; border-image zeichnet es ohne Überlauf zum Scrollen. */
  .creator-page__hero {
    display: grid;
    gap: var(--space-8, 32px);
    align-items: center;
    padding-block: var(--space-8, 32px);
    border-image: linear-gradient(var(--cp-accent), var(--cp-accent)) fill 0 / 0 / 0 100vw;
  }

  .creator-page__notice:has(+ .creator-page__hero) {
    margin-bottom: calc(-1 * var(--space-12, 48px));
  }

  /* With the highlight as accent the band would swallow marker and note, which are the highlight already. */
  .creator-page[data-accent='highlight'] .creator-page__hero .creator-page__mark {
    background: linear-gradient(transparent 52%, var(--color-bg-primary, #fff) 52%, var(--color-bg-primary, #fff) 92%, transparent 92%);
  }

  .creator-page[data-accent='highlight'] .creator-page__hero .creator-page__note {
    background: var(--color-bg-primary, #fff);
  }

  .creator-page__hero-copy {
    display: grid;
    gap: var(--space-5, 20px);
    min-width: 0;
  }

  .creator-page__title {
    font-size: clamp(var(--text-4xl, 2.25rem), 7vw, var(--text-7xl, 4.5rem));
    line-height: 1;
  }

  .creator-page__lead {
    font-size: var(--text-lg, 1.125rem);
    max-width: 44ch;
  }

  .creator-page__byline,
  .creator-page__who {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  .creator-page__byline-face {
    flex: none;
    width: 44px;
    height: 44px;
    overflow: hidden;
    border-radius: var(--radius-full, 999px);
  }

  .creator-page__byline-face img,
  .creator-page__portrait img,
  .creator-page__hero-media img,
  .creator-page__voice-media img,
  .creator-page__highlight-media img,
  .creator-page__recipe-media img,
  .creator-page__tip-media img,
  .creator-page__gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .creator-page__byline-name {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 600;
  }

  .creator-page__byline-meta {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__handle {
    color: inherit;
  }

  .creator-page__hero-media {
    position: relative;
    min-width: 0;
  }

  .creator-page__hero-media img {
    aspect-ratio: 4 / 3;
    object-position: 50% 30%;
    border-radius: var(--radius-2xl, 24px);
  }

  .creator-page__note {
    justify-self: start;
    margin: 0;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-brand-highlight, #eee);
    font-size: var(--text-xl, 1.25rem);
    transform: rotate(-2deg);
  }

  .creator-page__hero-media .creator-page__note {
    position: absolute;
    left: var(--space-3, 12px);
    bottom: var(--space-4, 16px);
    box-shadow: var(--shadow-lg, none);
  }

  .creator-page__hero--stacked .creator-page__hero-media {
    order: -1;
  }

  .creator-page__hero--stacked .creator-page__hero-media img {
    aspect-ratio: 16 / 9;
  }

  .creator-page__hero--portrait {
    align-items: start;
    gap: var(--space-4, 16px);
  }

  .creator-page__portrait {
    flex: none;
    width: 88px;
    height: 88px;
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-secondary, #eee);
  }

  .creator-page__name {
    font-size: var(--text-3xl, 1.875rem);
    line-height: 1.1;
  }

  .creator-page__lead-title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 600;
    line-height: 1.15;
  }

  /* Code */
  .creator-page__code {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2, 8px) var(--space-6, 24px);
    align-items: center;
    padding-block: var(--space-5, 20px);
    border-top: 1px solid var(--color-border-strong, #222);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .creator-page__code-value {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 12px);
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: clamp(var(--text-2xl, 1.5rem), 5vw, var(--text-3xl, 1.875rem));
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .creator-page__pill {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: var(--radius-full, 999px);
    background: var(--cp-accent);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    letter-spacing: 0;
  }

  .creator-page__code-text {
    margin: 0;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__code-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .creator-page__code-actions:not(:has(> :not([hidden]))) {
    display: none;
  }

  .creator-page__code--line {
    padding-inline: var(--space-5, 20px);
    background: var(--cp-accent);
  }

  .creator-page__code--card {
    padding: var(--space-6, 24px);
    border: 0;
    border-radius: var(--radius-2xl, 24px);
    background: var(--cp-accent);
  }

  .creator-page__code--stamp {
    justify-self: start;
    padding: var(--space-5, 20px) var(--space-6, 24px);
    border: 2px dashed var(--color-border-strong, #222);
    border-radius: var(--radius-xl, 16px);
    background: var(--cp-accent);
    transform: rotate(-1.5deg);
  }

  /* Sprachnachricht */
  .creator-page__voice {
    display: grid;
    gap: var(--space-8, 32px);
    align-items: start;
  }

  .creator-page__voice-side {
    display: grid;
    min-width: 0;
  }

  .creator-page__voice-side .creator-page__head {
    margin-bottom: var(--space-5, 20px);
  }

  .creator-page__voice-media img {
    aspect-ratio: 4 / 3;
    object-position: 50% 25%;
    border-radius: var(--radius-2xl, 24px);
  }

  .creator-page__player {
    position: relative;
    display: grid;
    gap: var(--space-4, 16px);
    padding: var(--space-6, 24px);
    border-radius: var(--radius-2xl, 24px);
    background: var(--cp-accent);
    box-shadow: var(--shadow-lg, none);
  }

  .creator-page__voice-media + .creator-page__player {
    margin: calc(-1 * var(--space-16, 64px)) var(--space-4, 16px) 0;
  }

  .creator-page__player-top {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  .creator-page__play {
    flex: none;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: var(--radius-full, 999px);
    background: var(--color-action-primary, #222);
    color: var(--color-action-primary-text, #fff);
  }

  .creator-page__play .icon {
    width: 18px;
    height: 18px;
  }

  .creator-page__pause {
    display: none;
    width: 14px;
    height: 16px;
    border-inline: 5px solid currentColor;
  }

  .creator-page__play[aria-pressed='true'] .icon {
    display: none;
  }

  .creator-page__play[aria-pressed='true'] .creator-page__pause {
    display: block;
  }

  .creator-page__wave {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 3px;
    min-width: 0;
    height: 40px;
  }

  .creator-page__wave i {
    flex: 1;
    border-radius: var(--radius-sm, 2px);
    background: var(--color-text-primary, #222);
    opacity: 0.8;
  }

  .creator-page__audio {
    width: 100%;
  }

  .creator-page__audio:not([controls]) {
    display: none;
  }

  .creator-page__player-meta {
    display: flex;
    justify-content: space-between;
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__transcript {
    display: grid;
    gap: var(--space-3, 12px);
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.6;
  }

  .creator-page__transcript p {
    margin: 0;
    border-radius: var(--radius-sm, 4px);
    transition: color 0.35s, background-color 0.35s;
  }

  .creator-page__transcript[data-reading] [data-cp-line] {
    color: var(--color-text-secondary, #555);
  }

  .creator-page__transcript[data-reading] [data-cp-line][data-current] {
    color: var(--color-text-primary, #222);
    background: var(--color-brand-highlight, #eee);
  }

  .creator-page__transcript .creator-page__signature {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__voice--quote .creator-page__transcript {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-2xl, 1.5rem);
    line-height: 1.35;
  }

  .creator-page__transcript-toggle .creator-page__transcript {
    padding-bottom: var(--space-5, 20px);
  }

  @media (prefers-reduced-motion: no-preference) {
    .creator-page__player[data-playing] .creator-page__wave i {
      animation: creator-page-wave 1.1s ease-in-out infinite alternate;
    }

    .creator-page__player[data-playing] .creator-page__wave i:nth-child(3n) {
      animation-delay: 0.2s;
    }

    .creator-page__player[data-playing] .creator-page__wave i:nth-child(4n) {
      animation-delay: 0.45s;
    }
  }

  @keyframes creator-page-wave {
    from {
      transform: scaleY(0.55);
    }

    to {
      transform: scaleY(1);
    }
  }

  /* Gerade wichtig */
  .creator-page__highlight {
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-2xl, 24px);
    background: var(--cp-accent);
  }

  .creator-page__highlight-media img {
    aspect-ratio: 1;
  }

  .creator-page__highlight-copy {
    display: grid;
    gap: var(--space-3, 12px);
    align-content: center;
    padding: var(--space-6, 24px);
  }

  .creator-page__highlight-title {
    font-size: clamp(var(--text-2xl, 1.5rem), 3.4vw, var(--text-3xl, 1.875rem));
    line-height: 1.1;
  }

  .creator-page__highlight-text {
    margin: 0;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__highlight--banner {
    background: var(--cp-accent);
  }

  .creator-page__highlight--banner .creator-page__highlight-copy {
    padding-block: var(--space-5, 20px);
  }

  .creator-page__highlight--note {
    justify-self: start;
    max-width: 640px;
    border-radius: var(--radius-lg, 12px);
    background: var(--color-brand-highlight, #eee);
    transform: rotate(-1deg);
  }

  .creator-page__highlight--note .creator-page__highlight-text {
    font-size: var(--text-2xl, 1.5rem);
  }

  /* Lieblinge */
  @media (hover: hover) {
    .creator-page__bundle .creator-page__add-button:hover {
      color: var(--color-text-primary, #222);
      background: var(--cp-accent);
      border-color: var(--color-border-strong, #222);
    }

    .creator-page__bundle .creator-page__add-button:hover::before {
      transform: scaleY(0);
    }
  }

  .creator-page__bundle {
    justify-self: start;
    margin-top: var(--space-1, 4px);
  }

  .creator-page__pick-list,
  .creator-page__gallery-list,
  .creator-page__tip-list,
  .creator-page__trust,
  .creator-page__community-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .creator-page__pick-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4, 16px);
  }

  .creator-page__pick {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: var(--space-3, 12px);
    padding-bottom: var(--space-8, 32px);
  }

  .creator-page__pick-media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-xl, 16px);
    background: var(--color-bg-secondary, #eee);
  }

  .creator-page__pick-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .creator-page__pick-title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    line-height: 1.25;
  }

  .creator-page__pick-title a {
    color: inherit;
    text-decoration: none;
  }

  .creator-page__pick-note {
    align-self: start;
    margin: 0;
    font-size: var(--text-base, 1rem);
  }

  .creator-page__price {
    align-self: end;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1, 4px) var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--color-border-default, #ddd);
    font-size: var(--text-sm, 0.875rem);
    font-variant-numeric: tabular-nums;
  }

  .creator-page__price .c-price {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: var(--space-2, 8px);
  }

  .creator-page__price .c-price__current {
    font-weight: 600;
    background: linear-gradient(transparent 52%, var(--color-brand-highlight, #eee) 52%, var(--color-brand-highlight, #eee) 92%, transparent 92%);
  }

  .creator-page__pick-code {
    margin-left: auto;
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__pick-add {
    align-self: end;
  }

  .creator-page__pick-add .creator-page__add-button {
    width: 100%;
  }

  .creator-page__picks--list .creator-page__pick-list {
    grid-template-columns: minmax(0, 1fr);
    border-top: 1px solid var(--color-border-strong, #222);
  }

  .creator-page__picks--list .creator-page__pick {
    grid-row: auto;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto;
    column-gap: var(--space-4, 16px);
    padding-block: var(--space-4, 16px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .creator-page__picks--list .creator-page__pick-media {
    grid-row: span 4;
  }

  .creator-page__picks--list .creator-page__pick-add .creator-page__add-button {
    width: auto;
  }

  .creator-page__picks--feature .creator-page__pick:first-child .creator-page__pick-title {
    font-size: var(--text-xl, 1.25rem);
  }

  /* Rezept */
  .creator-page__recipe {
    display: grid;
    gap: var(--space-6, 24px);
    align-items: start;
    padding-top: var(--space-8, 32px);
    border-top: 1px solid var(--color-border-strong, #222);
  }

  .creator-page__recipe-media img {
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-2xl, 24px);
  }

  .creator-page__recipe-copy {
    display: grid;
    gap: var(--space-4, 16px);
    min-width: 0;
  }

  .creator-page__recipe-meta {
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__recipe-columns {
    display: grid;
    gap: var(--space-6, 24px);
    padding-block: var(--space-2, 8px);
  }

  .creator-page__recipe-subtitle {
    margin: 0 0 var(--space-2, 8px);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-base, 1rem);
  }

  .creator-page__recipe-list {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding-left: var(--space-5, 20px);
  }

  .creator-page__recipe-list li::marker {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__recipe--card {
    padding: var(--space-6, 24px);
    border: 0;
    border-radius: var(--radius-2xl, 24px);
    background: var(--cp-accent);
  }

  /* Tipps */
  .creator-page__tip-list {
    display: grid;
    gap: var(--space-6, 24px);
  }

  .creator-page__tip {
    display: grid;
    align-content: start;
    gap: var(--space-3, 12px);
  }

  .creator-page__tip-media img {
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-xl, 16px);
  }

  .creator-page__tip-label {
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__tip-text {
    margin: 0;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__tip-text strong {
    display: block;
    margin-bottom: var(--space-1, 4px);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.3;
    color: var(--color-text-primary, #222);
  }

  .creator-page__tips--numbered .creator-page__tip-label {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-4xl, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #222);
  }

  .creator-page__tips--list .creator-page__tip-list {
    gap: 0;
    border-top: 1px solid var(--color-border-strong, #222);
  }

  .creator-page__tips--list .creator-page__tip {
    padding-block: var(--space-4, 16px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .creator-page__tips > .creator-page__small {
    margin-top: var(--space-6, 24px);
  }

  /* Galerie */
  .creator-page__gallery-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 12px);
  }

  .creator-page__gallery-item figure {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
  }

  .creator-page__gallery-item img {
    aspect-ratio: 4 / 5;
    border-radius: var(--radius-xl, 16px);
  }

  .creator-page__gallery--strip .creator-page__gallery-list {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .creator-page__gallery--strip .creator-page__gallery-item {
    flex: 0 0 70%;
    scroll-snap-align: start;
  }

  .creator-page__gallery--mosaic .creator-page__gallery-item:first-child {
    grid-column: span 2;
  }

  .creator-page__gallery--mosaic .creator-page__gallery-item:first-child img {
    aspect-ratio: 16 / 10;
  }

  /* Fragen */
  .creator-page__faq-list {
    border-top: 1px solid var(--color-border-strong, #222);
  }

  .creator-page__faq-list .c-accordion-item,
  .creator-page__transcript-toggle {
    border-bottom-color: var(--color-border-default, #ddd);
  }

  .creator-page__faq-list .c-accordion-item__name {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
  }

  .creator-page__faq-list .c-accordion-item__text {
    max-width: 64ch;
    color: var(--color-text-secondary, #555);
  }

  .creator-page__faq-entry {
    padding-block: var(--space-4, 16px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .creator-page__faq-question {
    margin: 0 0 var(--space-2, 8px);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-lg, 1.125rem);
  }

  .creator-page__faq-answer {
    margin: 0;
    max-width: 64ch;
    color: var(--color-text-secondary, #555);
  }

  /* Vertrauen; ul, weil base.css ul[role='list'] sonst das Padding nullt */
  ul.creator-page__trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px) var(--space-6, 24px);
    padding-block: var(--space-5, 20px);
    border-block: 1px solid var(--color-border-default, #ddd);
  }

  .creator-page__trust-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .creator-page__trust-item .icon {
    flex: none;
    box-sizing: content-box;
    width: 18px;
    height: 18px;
    padding: var(--space-1, 4px);
    border-radius: var(--radius-full, 999px);
    background: var(--cp-accent);
  }

  ul.creator-page__trust--icons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    border: 0;
    text-align: center;
  }

  .creator-page__trust--icons .creator-page__trust-item {
    display: grid;
    justify-items: center;
    gap: var(--space-3, 12px);
  }

  .creator-page__trust--icons .icon {
    box-sizing: content-box;
    padding: var(--space-3, 12px);
    border-radius: var(--radius-full, 999px);
    background: var(--cp-accent);
  }

  /* Community, Launch */
  .creator-page__community-list {
    border-top: 1px solid var(--color-border-strong, #222);
  }

  .creator-page__community-item {
    display: grid;
    grid-template-columns: 2.5rem 48px minmax(0, 1fr);
    gap: var(--space-3, 12px);
    align-items: center;
    padding-block: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .creator-page__community-rank {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  .creator-page__community-media {
    display: block;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #eee);
  }

  .creator-page__community-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .creator-page__community-title {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 600;
    color: var(--color-text-primary, #222);
    text-decoration: none;
  }

  .creator-page__community > .creator-page__small {
    margin-top: var(--space-3, 12px);
  }

  .creator-page__launch {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: var(--space-4, 16px);
    align-items: start;
    padding: var(--space-4, 16px);
    border-radius: var(--radius-2xl, 24px);
    background: var(--cp-accent);
  }

  .creator-page__launch-media {
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
  }

  .creator-page__launch-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .creator-page__launch-body {
    display: grid;
    gap: var(--space-1, 4px);
    min-width: 0;
  }

  .creator-page__launch-title,
  .creator-page__launch-sub,
  .creator-page__launch-code {
    margin: 0;
  }

  .creator-page__launch-title {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 600;
  }

  .creator-page__launch-sub,
  .creator-page__launch-code {
    font-size: var(--text-sm, 0.875rem);
  }

  .creator-page__launch-code {
    font-weight: 600;
  }

  .creator-page__launch-link {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-link, #222);
  }

  .creator-page__commission {
    order: 101;
    margin: 0;
    padding-bottom: var(--space-8, 32px);
    max-width: 72ch;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  /* Leiste */
  .creator-page__cart {
    position: sticky;
    bottom: 0;
    z-index: 5;
    padding: var(--space-3, 12px) var(--page-gutter, 16px);
    border-top: 1px solid var(--color-border-default, #ddd);
    background: var(--color-bg-primary, #fff);
  }

  .creator-page__cart-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    max-width: 1120px;
    margin-inline: auto;
  }

  .creator-page__cart-code {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
  }

  .creator-page__cart-code strong {
    font-family: var(--font-heading, system-ui, sans-serif);
    letter-spacing: 0.04em;
  }

  .creator-page__cart-code {
    flex: none;
  }

  .creator-page__cart-button {
    flex: 0 1 auto;
    margin-left: auto;
    font-size: var(--text-xs, 0.75rem);
    white-space: normal;
  }

  @media (min-width: 480px) {
    .creator-page__code {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .creator-page__code .creator-page__eyebrow {
      grid-column: 1 / -1;
    }

    .creator-page__cart-button {
      font-size: inherit;
    }
  }

  @media (min-width: 860px) {
    .creator-page__inner {
      gap: var(--space-16, 64px);
    }

    .creator-page__notice {
      margin-bottom: calc(-1 * var(--space-12, 48px));
    }

    .creator-page__notice:has(+ .creator-page__hero) {
      margin-bottom: calc(-1 * var(--space-16, 64px));
    }

    .creator-page__hero {
      padding-block: var(--space-12, 48px);
    }

    .creator-page__hero--split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-12, 48px);
    }

    .creator-page__hero--split .creator-page__hero-media img {
      aspect-ratio: 4 / 5;
    }

    .creator-page__hero--split .creator-page__hero-media .creator-page__note {
      left: calc(-1 * var(--space-4, 16px));
      bottom: var(--space-8, 32px);
    }

    .creator-page__hero--bare {
      grid-template-columns: minmax(0, 1fr);
    }

    .creator-page__voice--player,
    .creator-page__voice--quote {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
      gap: var(--space-12, 48px);
    }

    .creator-page__highlight--split {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    }

    .creator-page__highlight--bare {
      grid-template-columns: minmax(0, 1fr);
    }

    .creator-page__highlight--split .creator-page__highlight-media img {
      height: 100%;
    }

    .creator-page__highlight-copy {
      padding: var(--space-8, 32px);
    }

    .creator-page__pick-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      column-gap: var(--space-6, 24px);
    }

    .creator-page__pick-note {
      font-size: var(--text-lg, 1.125rem);
    }

    .creator-page__picks--list .creator-page__pick {
      grid-template-columns: 120px minmax(0, 1fr) auto;
    }

    .creator-page__picks--list .creator-page__price,
    .creator-page__picks--list .creator-page__pick-add {
      grid-column: 3;
    }

    .creator-page__picks--list .creator-page__price {
      grid-row: 1 / span 2;
    }

    .creator-page__picks--list .creator-page__pick-title,
    .creator-page__picks--list .creator-page__pick-note {
      grid-column: 2;
    }

    .creator-page__picks--feature .creator-page__pick:first-child {
      grid-column: span 2;
      grid-row: span 5;
    }

    .creator-page__recipe--split {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
      gap: var(--space-12, 48px);
    }

    .creator-page__recipe--bare {
      grid-template-columns: minmax(0, 1fr);
    }

    .creator-page__recipe--split .creator-page__recipe-media {
      position: sticky;
      top: var(--space-6, 24px);
    }

    .creator-page__recipe--split .creator-page__recipe-media img {
      aspect-ratio: 4 / 5;
    }

    .creator-page__recipe--card {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      padding: var(--space-8, 32px);
    }

    .creator-page__recipe-columns {
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    }

    .creator-page__tips--cards .creator-page__tip-list,
    .creator-page__tips--numbered .creator-page__tip-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--space-6, 24px);
    }

    .creator-page__gallery-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .creator-page__gallery--strip .creator-page__gallery-item {
      flex-basis: 32%;
    }
  }
/* END_SECTION:creator-page */

/* START_SECTION:dkd-article (INDEX:6) */
/* Kopf (.a-kopf): 1120 px breit wie das Bild, die Zeile, der Titel bis 50 px, die Autorzeile. */
  .dkd-article.main-article {
    padding-block: 0;
  }

  .dkd-article__head,
  .dkd-article__media,
  .dkd-article__layout {
    max-width: 1072px;
    margin-inline: auto;
  }

  .dkd-article__head {
    display: grid;
    gap: 16px;
    padding-top: 22px;
  }

  .dkd-article__head > * {
    margin: 0;
  }

  .dkd-article__meta {
    font-size: 0.78125rem;
    color: var(--dkd-quiet, #666);
  }

  .dkd-article__title {
    max-width: 860px;
    font-size: clamp(2rem, 3.4vw, 2.75rem);
    line-height: 1.08;
  }

  .dkd-article__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.84375rem;
    color: var(--dkd-quiet, #666);
  }

  .dkd-article__byline b {
    font-weight: 600;
    color: var(--color-text-primary, #222);
  }

  .dkd-article__byline a {
    color: inherit;
    text-decoration: none;
  }

  .dkd-article__portrait {
    display: block;
    flex: none;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
  }

  .dkd-article__portrait .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .dkd-article__portrait--large {
    width: 72px;
    height: 72px;
  }

  /* Bild (.a-bild): 16:8, am Telefon 16:10, Radius 16. */
  .dkd-article__media {
    overflow: hidden;
    aspect-ratio: 16 / 8;
    margin-top: 36px;
    border-radius: 16px;
  }

  .dkd-article__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Raster (.a-raster): links 220 px Verzeichnis, rechts der Text mit 680 px, 64 px dazwischen. */
  .dkd-article__layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 64px;
    align-items: start;
    padding-top: 56px;
  }

  /* Ein Raster für alles (Johannes 06.11.2026): Brotkrumen, Kopf und Bild stehen in der Textspalte, mit derselben linken
     Kante wie der Text; Verzeichnis links und rechte Spalte rahmen sie. Das Bild ist so breit wie der Text, 16:9. */
  .dkd-article .dkd-article__crumbs {
    padding-block: 0 6px;
  }

  @media (min-width: 1001px) {
    .dkd-article__head,
    .dkd-article__media {
      display: grid;
      grid-template-columns: 220px minmax(0, 1fr);
      column-gap: 64px;
    }

    .dkd-article__head > *,
    .dkd-article__media > * {
      grid-column: 2;
      max-width: 680px;
    }

    .dkd-article__media {
      overflow: visible;
      aspect-ratio: auto;
      border-radius: 0;
    }

    .dkd-article__media .c-image {
      height: auto;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
    }
  }

  @media (min-width: 1200px) {
    .dkd-article__head,
    .dkd-article__media {
      max-width: 1280px;
      grid-template-columns: 200px minmax(0, 1fr) 260px;
      column-gap: 48px;
    }
  }

  /* Ab 1200 px drei Spalten: Inhalt, Text, rechte Spalte mit Notfall-Karte und „In eigener Sache". */
  @media (min-width: 1200px) {
    .dkd-article__layout {
      max-width: 1280px;
      grid-template-columns: 200px minmax(0, 1fr) 260px;
      gap: 48px;
    }
  }

  .dkd-article__contents {
    position: sticky;
    top: 100px;
    display: grid;
    gap: 12px;
    font-size: 0.84375rem;
  }

  .dkd-article__contents-title {
    margin: 0 0 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dkd-quiet, #666);
  }

  .dkd-article .dkd-article__contents-list {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid var(--dkd-line, #ddd);
  }

  .dkd-article__contents-list a {
    display: block;
    margin-left: -1px;
    padding: 6px 0 6px 14px;
    line-height: 1.35;
    color: var(--dkd-quiet, #666);
    text-decoration: none;
    border-left: 2px solid transparent;
  }

  .dkd-article__contents-list a:hover {
    color: var(--color-text-primary, #222);
  }

  .dkd-article__contents-list a[aria-current] {
    font-weight: 500;
    color: var(--color-text-primary, #222);
    border-left-color: var(--color-text-primary, #222);
  }

  .dkd-article__main {
    max-width: 680px;
  }

  /* Der Text (.a-text): 17 px bei 1,72, der erste Absatz größer in Navy, Zwischentitel bis 30 px. */
  .dkd-article .dkd-article__text {
    font-size: 1.0625rem;
    line-height: 1.72;
  }

  .dkd-article__text > * {
    margin-block: 0;
  }

  .dkd-article__text > * + * {
    margin-top: 18px;
  }

  .dkd-article__text > p:first-child,
  .dkd-article__text > .a-kurz + p {
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--color-text-primary, #222);
  }

  .dkd-article__text h2 {
    margin-top: 52px;
    font-size: clamp(1.5rem, 2.3vw, 1.875rem);
    line-height: 1.2;
    scroll-margin-top: 100px;
  }

  .dkd-article__text h3 {
    margin-top: 32px;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .dkd-article__text h4 {
    margin-top: 24px;
    font: 600 1.0625rem var(--font-body);
  }

  .dkd-article__text :is(ul, ol) {
    padding-left: 22px;
  }

  .dkd-article__text li + li {
    margin-top: 8px;
  }

  .dkd-article__text li::marker {
    color: var(--color-dkd-terra);
  }

  /* Schritt-Listen aus dem Editor tragen ein graues, gesperrtes Kästchen neben dem Punkt. Wie im Entwurf bleibt nur
     ein Marker: der Terra-Punkt. */
  .dkd-article__text li input[type='checkbox'][disabled] {
    display: none;
  }

  .dkd-article__text strong {
    font-weight: 600;
    color: var(--color-text-primary, #222);
  }

  .dkd-article__text blockquote {
    margin-left: 0;
    padding-left: 20px;
    font-family: var(--font-heading);
    font-size: 1.25rem;
    border-left: 3px solid var(--color-dkd-hellblau);
  }

  /* Kästen (.box): Zartblau Information, Beige Aarons Praxis, Creme Tipp, Rosa Warnung, Navy Notruf, Kachel Quellen. */
  .dkd-article__text .box {
    margin-top: 28px;
    margin-bottom: 10px;
    padding: 20px 24px;
    font-size: 0.96875rem;
    line-height: 1.6;
    border-radius: 12px;
  }

  .dkd-article__text .box > * {
    margin: 0;
  }

  .dkd-article__text .box > * + * {
    margin-top: 10px;
  }

  .dkd-article__text .box :is(ul, ol) {
    padding-left: 20px;
  }

  .dkd-article__text .box-titel {
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .dkd-article__text .box.info {
    background: var(--color-bg-accent, #eee);
  }

  .dkd-article__text .box.praxis {
    background: var(--color-bg-secondary, #eee);
  }

  .dkd-article__text .box.praxis .box-titel {
    color: var(--color-dkd-terra);
  }

  .dkd-article__text .box.tipp {
    background: var(--color-dkd-creme);
  }

  .dkd-article__text .box.tipp .box-titel {
    color: var(--color-dkd-senf);
  }

  .dkd-article__text .box.tipp li::marker {
    color: var(--color-dkd-ocker);
  }

  .dkd-article__text .box.warn {
    background: var(--color-dkd-rosa);
  }

  .dkd-article__text .box.warn .box-titel,
  .dkd-article__text .box.warn li::marker {
    color: var(--color-dkd-weinrot);
  }

  .dkd-article__text .box.notruf {
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-inverse, #222);
  }

  .dkd-article__text .box.notruf :is(strong, .box-titel, a) {
    color: var(--color-text-inverse, #fff);
  }

  .dkd-article__text .box.quellen {
    margin-top: 48px;
    font-size: 0.84375rem;
    background: var(--dkd-tile, #eee);
  }

  .dkd-article__text .box.quellen .box-titel {
    color: var(--dkd-quiet, #666);
  }

  /* Ampel (.box.ampel, Infobox der Content Engine): wann 112, wann Giftnotruf, wann 116 117, wann Praxis.
     Weiße Karte mit Kante, jede Stufe mit farbigem Punkt; die Stufen sind die festen Texte aus boxes.mjs. */
  .dkd-article__text .box.ampel {
    background: var(--color-dkd-weiss);
    border: 1px solid var(--color-dkd-kante);
  }

  .dkd-article__text .box.ampel .box-titel {
    color: var(--color-dkd-navy);
  }

  .dkd-article__text .box .ampel-liste {
    display: grid;
    gap: 10px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
  }

  .dkd-article__text .ampel-liste li + li {
    margin-top: 0;
  }

  .dkd-article__text .ampel-stufe {
    display: grid;
    grid-template-columns: minmax(150px, 34%) 1fr;
    gap: 6px 16px;
    align-items: start;
    padding: 12px 14px 12px 16px;
    border-radius: 10px;
    border-left: 5px solid;
  }

  .dkd-article__text .ampel-wer {
    font-weight: 700;
    color: var(--color-dkd-navy);
  }

  .dkd-article__text .ampel-rot {
    background: var(--color-dkd-rosa);
    border-color: var(--color-dkd-rot);
  }

  .dkd-article__text .ampel-rot .ampel-wer {
    color: var(--color-dkd-weinrot);
  }

  .dkd-article__text .ampel-gelb {
    background: var(--color-dkd-creme);
    border-color: var(--color-dkd-orange);
  }

  .dkd-article__text .ampel-gruen {
    background: var(--color-dkd-zartblau);
    border-color: var(--color-dkd-himmel);
  }

  @media (max-width: 599px) {
    .dkd-article__text .ampel-stufe {
      grid-template-columns: 1fr;
    }
  }

  /* Werkzeug-Hinweis im Text (.box.info.werkzeug): nur sichtbar, wenn die Einstellung an ist
     (Regel „Eigenwerbung nur in eigener Sache", Freigabe durch den Anwalt). */
  .dkd-article--ohne-werkzeug-hinweis .dkd-article__text .box.werkzeug {
    display: none;
  }

  .dkd-article__text .box.werkzeug .box-link {
    display: inline-block;
    padding: 8px 16px;
    font-weight: 600;
    color: var(--color-dkd-weiss);
    text-decoration: none;
    background: var(--color-dkd-navy);
    border-radius: 999px;
  }

  /* In 30 Sekunden (.a-kurz): Hellblau, Titel in Blau mit Uhr. */
  .dkd-article__text .a-kurz {
    margin-bottom: 8px;
    padding: 22px 26px 24px;
    background: var(--color-dkd-hellblau);
    border-radius: 14px;
  }

  .dkd-article__text .a-kurz-titel {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    font: 600 0.78125rem var(--font-body);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-link, #222);
  }

  .dkd-article__text .a-kurz-titel svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dkd-article__text .a-kurz ul {
    display: grid;
    gap: 6px;
    margin: 0;
    padding-left: 20px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .dkd-article__text .a-kurz li + li {
    margin-top: 0;
  }

  .dkd-article__text .a-kurz li::marker {
    color: var(--color-text-link, #222);
  }

  /* Tabellen (.a-tabelle): weiße Karte mit Kante, Kopf auf Zartblau; breite Tabellen wischen am Telefon wie im Entwurf. */
  .dkd-article__text .a-tabelle {
    margin-top: 26px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dkd-article__text .a-tabelle table {
    width: 100%;
    overflow: hidden;
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-dkd-kante);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 14px;
  }

  .dkd-article__text .a-tabelle caption {
    padding: 0 0 10px;
    caption-side: top;
    text-align: left;
    font: 600 0.78125rem var(--font-body);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-dkd-terra);
  }

  .dkd-article__text .a-tabelle th {
    padding: 13px 16px;
    text-align: left;
    vertical-align: bottom;
    font: 600 0.9375rem / 1.4 var(--font-body);
    color: var(--color-text-primary, #222);
    background: var(--color-bg-accent, #eee);
    border: 0;
  }

  .dkd-article__text .a-tabelle td {
    padding: 13px 16px;
    vertical-align: top;
    border: 0;
    border-top: 1px solid var(--color-dkd-kante);
  }

  .dkd-article__text .a-tabelle :is(th + th, td + td) {
    border-left: 1px solid var(--color-dkd-kante);
  }

  .dkd-article__text .a-tabelle.beschriftet td:first-child {
    font-weight: 600;
    color: var(--color-text-primary, #222);
  }

  .dkd-article__text .a-tabelle td > * {
    margin: 0;
  }

  .dkd-article__text .a-tabelle td > * + * {
    margin-top: 8px;
  }

  .dkd-article__text .a-tabelle td :is(ul, ol) {
    padding-left: 18px;
  }

  .dkd-article__text .a-tabelle td li + li {
    margin-top: 4px;
  }

  .dkd-article__text .a-tabelle td .box {
    margin: 10px 0 0;
    padding: 12px 14px;
    font-size: 0.875rem;
  }

  .dkd-article__text .a-tabelle.breit table {
    min-width: 560px;
  }

  /* Fragen im Text (.a-faq): wie die Fragen der Startseite, die Frage in der Überschriftenschrift. */
  .dkd-article__text .a-faq {
    margin-top: 20px;
    border-top: 1px solid var(--dkd-line, #ddd);
  }

  .dkd-article__text .a-faq details {
    border-bottom: 1px solid var(--dkd-line, #ddd);
  }

  .dkd-article__text .a-faq summary {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 0;
    font: 500 1.0625rem / 1.4 var(--font-heading);
    color: var(--color-text-primary, #222);
    list-style: none;
    cursor: pointer;
  }

  .dkd-article__text .a-faq summary::-webkit-details-marker {
    display: none;
  }

  .dkd-article__text .a-faq summary::after {
    content: '+';
    flex: none;
    margin-top: -2px;
    font: 300 1.5rem / 1 var(--font-body);
  }

  .dkd-article__text .a-faq details[open] summary::after {
    content: '–';
  }

  .dkd-article__text .a-faq summary:focus-visible {
    outline: 3px solid var(--color-brand-accent, #ccc);
    outline-offset: 2px;
  }

  .dkd-article__text .a-faq .antwort {
    display: grid;
    gap: 8px;
    padding: 0 0 20px;
    font-size: 1rem;
    line-height: 1.65;
  }

  .dkd-article__text .a-faq .antwort > * {
    margin: 0;
  }

  .dkd-article__text .a-faq .antwort ul {
    padding-left: 20px;
  }

  .dkd-article__text :is(.a-meta, .a-quelle) {
    margin-top: 6px;
    font-size: 0.875rem;
    color: var(--dkd-quiet, #666);
  }

  .dkd-article__text .a-kicker {
    font: 600 0.78125rem var(--font-body);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-dkd-terra);
  }

  /* Autorenbox (.a-autorbox): zwischen zwei Haarlinien, Bild 72 px. */
  .dkd-article__author {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
    margin-top: 64px;
    padding: 24px 0;
    border-top: 1px solid var(--dkd-line, #ddd);
    border-bottom: 1px solid var(--dkd-line, #ddd);
  }

  .dkd-article__author p {
    margin: 0;
    font-size: 0.90625rem;
  }

  .dkd-article__author .dkd-article__author-name {
    font-size: 1rem;
    font-weight: 600;
  }

  .dkd-article__author-name a {
    color: inherit;
    text-decoration: none;
  }

  .dkd-article__author .dkd-article__author-role {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }

  /* Mehr aus diesem Bereich (.a-mehr): 88 px Luft darüber, drei Karten. */
  .dkd-article__more {
    padding-top: 88px;
    padding-bottom: 20px;
  }

  .dkd-article__more-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
  }

  .dkd-article__more-head h2 {
    margin: 0;
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  }

  .dkd-article__more .dkd-article__more-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 1000px) {
    .dkd-article__layout {
      grid-template-columns: minmax(0, 1fr);
      gap: 0;
    }

    .dkd-article__layout > :first-child {
      display: none;
    }

    .dkd-article__more .dkd-article__more-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px 20px;
    }
  }

  @media (max-width: 640px) {
    .dkd-article__media {
      aspect-ratio: 16 / 10;
    }

    .dkd-article .dkd-article__text {
      font-size: 1.03125rem;
    }

    .dkd-article__text .a-tabelle table {
      font-size: 0.875rem;
    }

    .dkd-article__text .a-tabelle :is(th, td) {
      padding: 11px 12px;
    }

    .dkd-article__text .a-kurz {
      padding: 18px 18px 20px;
    }

    .dkd-article__more .dkd-article__more-grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:dkd-article */

/* START_SECTION:dkd-author-page (INDEX:7) */
.dkd-author__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    padding: 20px 0 56px;
  }

  .dkd-author__head {
    display: grid;
    gap: 14px;
    justify-items: start;
  }

  .dkd-author__head > * {
    margin: 0;
  }

  .dkd-author__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra);
  }

  .dkd-author__name {
    font-size: clamp(2.375rem, 4.6vw, 4rem);
    line-height: 1.03;
  }

  .dkd-author__role {
    font-size: 1.0625rem;
    color: var(--color-text-secondary, #666);
  }

  .dkd-author__intro {
    max-width: 520px;
    font-size: 1.0625rem;
  }

  .dkd-author__media {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: 22px;
  }

  .dkd-author__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Die Angaben als Beige-Kacheln (.hk-weg des Entwurfs), zwei nebeneinander. */
  .dkd-author .dkd-author__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 0;
  }

  .dkd-author__fact {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 24px;
    background: var(--color-bg-secondary, #eee);
    border-radius: 18px;
  }

  .dkd-author__fact dt {
    font: 600 1.0625rem var(--font-heading);
    color: var(--color-text-primary, #222);
  }

  .dkd-author__fact dd {
    margin: 0;
    font-size: 0.9375rem;
  }

  .dkd-author__todo {
    color: var(--color-text-secondary, #666);
    font-style: italic;
  }

  .dkd-author__profiles {
    padding: 56px 0 80px;
  }

  .dkd-author__profiles h2 {
    margin: 0 0 16px;
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  }

  .dkd-author .dkd-author__profiles ul {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dkd-author__profiles a {
    font-weight: 600;
    color: var(--color-text-link, #222);
  }

  @media (max-width: 1000px) {
    .dkd-author__hero,
    .dkd-author .dkd-author__facts {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:dkd-author-page */

/* START_SECTION:dkd-blog (INDEX:8) */
/* .w-kopf of wissen.css: the path 28 px under the head, 14 px to the title block, which keeps 40 px below. */
  .dkd-blog .dkd-crumbs {
    padding: 28px 0 0;
  }

  .dkd-blog__head {
    display: grid;
    gap: 14px;
    padding: 14px 0 40px;
  }

  .dkd-blog__title {
    margin: 18px 0 0;
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    line-height: 1.04;
  }

  .dkd-blog__lead {
    max-width: 620px;
    margin: 0;
    font-size: 1.03125rem;
  }

  .dkd-blog__list {
    padding: 48px 0 40px;
  }

  .dkd-blog__filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
  }

  .dkd-blog__pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-text-primary, #222);
    text-decoration: none;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 99px;
    transition: background 0.15s, border-color 0.15s;
  }

  .dkd-blog__pill span {
    margin-left: 2px;
    font-weight: 400;
    color: var(--dkd-quiet, #666);
  }

  .dkd-blog__pill:hover {
    border-color: var(--color-text-primary, #222);
  }

  .dkd-blog__pill:focus-visible {
    outline: 3px solid var(--color-brand-accent, #ccc);
    outline-offset: 2px;
  }

  .dkd-blog__pill[aria-current='page'] {
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-inverse, #222);
    border-color: var(--color-bg-inverse, #222);
  }

  .dkd-blog__pill[aria-current='page'] span {
    color: color-mix(in srgb, var(--color-text-inverse, #fff) 70%, transparent);
  }

  .dkd-blog .dkd-blog__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dkd-blog__empty {
    color: var(--dkd-quiet, #666);
  }

  @media (max-width: 1000px) {
    .dkd-blog .dkd-blog__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 40px 20px;
    }
  }

  @media (max-width: 640px) {
    .dkd-blog .dkd-blog__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dkd-blog__pill {
      transition: none;
    }
  }
/* END_SECTION:dkd-blog */

/* START_SECTION:dkd-collection-grid (INDEX:9) */
.dkd-collection-grid {
    padding-bottom: 40px;
  }

  .dkd-collection-grid__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 44px var(--dkd-grid-gap, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dkd-collection-grid__empty {
    margin: 0;
    color: var(--dkd-quiet, #666);
  }

  .dkd-collection-grid .page-numbers {
    margin-top: 48px;
  }

  @media (max-width: 1000px) {
    .dkd-collection-grid__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SECTION:dkd-collection-grid */

/* START_SECTION:dkd-legal-page (INDEX:10) */
/* .l-kopf: mittig, 760 px, Rechtliches in Terra, Titel bis 52 px, die Zeile leise. */
  .dkd-legal__head {
    display: grid;
    gap: 14px;
    justify-items: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 0 36px;
    text-align: center;
  }

  .dkd-legal__head > * {
    margin: 0;
  }

  .dkd-legal__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra);
  }

  .dkd-legal__title {
    font-size: clamp(2rem, 3.96vw, 3.25rem);
    line-height: 1.05;
  }

  .dkd-legal__sub {
    max-width: 560px;
    font-size: 0.96875rem;
    color: var(--dkd-quiet, #666);
  }

  /* .l-inhalt: Beige, Radius 18, zwei Spalten, am Telefon eine. */
  .dkd-legal__contents {
    max-width: 720px;
    margin: 0 auto 40px;
    padding: 22px 26px;
    background: var(--color-bg-secondary, #eee);
    border-radius: 18px;
  }

  .dkd-legal__contents p {
    margin: 0 0 10px;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dkd-quiet, #666);
  }

  .dkd-legal__contents ol {
    margin: 0;
    padding-left: 20px;
    font-size: 0.9375rem;
    columns: 2;
    column-gap: 28px;
  }

  .dkd-legal__contents li {
    padding: 3px 0;
    break-inside: avoid;
  }

  .dkd-legal__contents a {
    color: var(--color-text-primary, #222);
    text-decoration: none;
  }

  .dkd-legal__contents a:hover {
    text-decoration: underline;
  }

  @media (max-width: 640px) {
    .dkd-legal__contents ol {
      columns: 1;
    }
  }
/* END_SECTION:dkd-legal-page */

/* START_SECTION:dkd-search (INDEX:11) */
/* As main-search of the core: field well under the head, title under it, filters and grid with air under the title. */
  .dkd-search {
    padding-block: var(--space-12, 48px) var(--space-16, 64px);
  }

  .dkd-search__head {
    margin: 0 auto var(--space-8, 32px);
    text-align: center;
  }

  .dkd-search__head .search-field {
    max-width: 600px;
    margin-inline: auto;
  }

  .dkd-search__title {
    margin: var(--space-10, 40px) 0 0;
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 400;
  }

  @media (min-width: 768px) {
    .dkd-search {
      padding-top: calc(var(--space-12, 48px) + var(--space-5, 20px));
    }

    .dkd-search__head {
      margin-bottom: calc(var(--space-12, 48px) + var(--space-10, 40px));
    }

    .dkd-search__title {
      font-size: var(--text-3xl, 1.875rem);
    }
  }

  .dkd-search__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    align-self: start;
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .dkd-search__badge {
    align-self: flex-start;
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-brand-accent, #eee);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
  }

  /* The title stops after two lines and the excerpt after three, each with an ellipsis. */
  .dkd-search__name {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--text-base, 1rem);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* The card is the link: the title's link stretches over it. */
  .dkd-search__name a {
    color: inherit;
    text-decoration: none;
  }

  .dkd-search__name a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .dkd-search__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  /* Am Telefon steht jede Text-Karte über die volle Breite: der Titel bekommt drei Zeilen und mehr Größe. */
  @media (max-width: 560px) {
    .dkd-search__card {
      grid-column: 1 / -1;
    }

    .dkd-search__name {
      -webkit-line-clamp: 3;
      line-clamp: 3;
      font-size: var(--text-lg, 1.125rem);
    }
  }

  .dkd-search__more {
    align-self: flex-end;
    padding-top: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }
/* END_SECTION:dkd-search */

/* START_SECTION:footer (INDEX:12) */
/* Die Vorteile-Zeile steht direkt über dem Fuß; der Abstand zum Inhalt gehört ihr. */
  .site-footer {
    padding-block: var(--space-12, 48px) var(--space-8, 32px);
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-inverse, #222);
  }

  .site-footer a {
    color: inherit;
    text-decoration: none;
  }

  .site-footer a:hover {
    text-decoration: underline;
  }

  .site-footer :focus-visible {
    outline-color: currentColor;
  }

  .site-footer__top {
    display: grid;
    gap: var(--space-10, 40px);
  }

  .site-footer__heading {
    margin-bottom: var(--space-4, 16px);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* Der Anspruch der Marke steht live als große Zeile im Schnitt der Überschriften, nicht als fetter Satz. */
  .site-footer__claim-text {
    margin: var(--space-8, 32px) 0 var(--space-8, 32px);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 400;
    line-height: 1.25;
  }

  .site-footer__fold > summary {
    list-style: none;
    cursor: pointer;
  }

  .site-footer__fold > summary::-webkit-details-marker {
    display: none;
  }

  .site-footer__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
  }

  .site-footer__summary .site-footer__heading {
    margin: 0;
  }

  .site-footer__summary .icon {
    width: 16px;
    height: 16px;
  }

  .site-footer__fold[open] > .site-footer__summary .icon {
    transform: rotate(45deg);
  }

  @media (min-width: 768px) {
    .site-footer__summary {
      min-height: 24px;
      margin-bottom: var(--space-4, 16px);
      cursor: default;
    }

    .site-footer__summary .icon {
      display: none;
    }

    .site-footer__claim-text {
      max-width: 12em;
      margin-top: var(--space-12, 48px);
      font-size: var(--text-3xl, 1.875rem);
    }
  }

  .site-footer .form-message--error {
    color: inherit;
  }

  .site-footer__menus {
    display: grid;
    gap: var(--space-2, 8px);
  }

  .site-footer__fold ul {
    padding-bottom: var(--space-4, 16px);
  }

  @media (min-width: 768px) {
    .site-footer__menus {
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: var(--space-8, 32px);
    }

    .site-footer__fold ul {
      padding-bottom: 0;
    }
  }

  .site-footer__menu li + li {
    margin-top: var(--space-2, 8px);
  }

  .site-footer__menu a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    font-family: var(--font-heading, system-ui, sans-serif);
    color: color-mix(in srgb, currentColor 55%, transparent);
  }

  .site-footer__menu a:hover {
    color: inherit;
  }

  .site-footer__newsletter .field--inline {
    max-width: 420px;
  }

  .site-footer__wordmark {
    margin-top: var(--space-12, 48px);
  }

  .site-footer__wordmark img {
    display: block;
    width: 100%;
    height: auto;
  }

  .site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6, 24px) var(--space-8, 32px);
    margin-top: var(--space-10, 40px);
    font-size: var(--text-sm, 0.875rem);
  }

  .site-footer__meta {
    display: grid;
    flex: 1 1 100%;
    gap: var(--space-3, 12px);
    justify-items: start;
  }

  .site-footer__localization,
  .site-footer__payments,
  .site-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-4, 16px);
  }

  .site-footer__localization .field__label {
    margin: 0;
  }

  .site-footer__payment {
    display: block;
    width: 38px;
    height: 24px;
  }

  .site-footer__cancel,
  .site-footer__guarantee,
  .site-footer__copyright {
    margin: 0;
  }

  .site-footer__payments {
    flex: 1 1 100%;
  }

  @media (min-width: 768px) {
    .site-footer__meta {
      flex: 0 1 auto;
    }

    .site-footer__payments {
      flex: 0 1 50%;
      justify-content: flex-end;
    }
  }

  /* Wie live: Anspruch, eine leere Spalte und jede Linkspalte in einer Reihe (drei zu eins zu je zwei), jede Spalte mit halber Gasse als Polster. */
  @media (min-width: 900px) {
    .site-footer__top {
      grid-template-columns: minmax(0, 3fr) minmax(0, 1fr) repeat(var(--footer-menus, 1), minmax(0, 2fr));
      column-gap: 0;
      padding-inline: calc(var(--page-gutter) - var(--space-5, 20px));
    }

    .site-footer__claim,
    .site-footer__menu {
      padding-inline: var(--space-5, 20px);
    }

    .site-footer__menus {
      display: contents;
    }

    .site-footer__menu:first-child {
      grid-column-start: 3;
    }
  }
/* END_SECTION:footer */

/* START_SECTION:header (INDEX:13) */
.section-header {
    position: sticky;
    top: var(--header-offset, 0px);
    z-index: 100;
  }

  .site-header {
    display: block;
    position: relative;
    background: var(--color-bg-primary, #fff);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .site-header__row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--space-4, 16px);
    min-height: 60px;
  }

  .site-header__nav {
    display: none;
  }

  .site-header__end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2, 8px);
  }

  .site-logo {
    display: inline-flex;
    justify-self: center;
    color: inherit;
    text-decoration: none;
  }

  .site-logo img {
    width: auto;
    height: 44px;
  }

  .site-logo__name {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
  }

  .site-header__cart {
    position: relative;
  }

  .site-header__count {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 18px;
    padding: 0 var(--space-1, 4px);
    font-size: var(--text-xs, 0.75rem);
    line-height: 18px;
    text-align: center;
    color: var(--color-action-primary-text, #fff);
    background: var(--color-action-primary, #222);
    border-radius: var(--radius-full, 9999px);
  }

  .site-header__search {
    position: absolute;
    inset: 0 var(--space-4, 16px);
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    background: var(--color-bg-primary, #fff);
  }

  .drawer__search {
    padding: var(--space-3, 12px) var(--space-4, 16px) 0;
  }

  .drawer__localization {
    display: grid;
    gap: var(--space-3, 12px);
    margin-top: var(--space-3, 12px);
  }

  .header-menu {
    display: flex;
    align-items: center;
    gap: var(--space-6, 24px);
  }

  .header-menu__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: var(--space-2, 8px) 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 500;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    list-style: none;
    cursor: pointer;
  }

  .header-menu__link::-webkit-details-marker {
    display: none;
  }

  .header-menu__link::after {
    content: '';
    position: absolute;
    inset: auto 0 0;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
  }

  .header-menu__link:hover::after,
  .header-menu__link[aria-current='page']::after,
  .mega[open] > .header-menu__link::after {
    transform: scaleX(1);
  }

  .mega__panel {
    position: absolute;
    inset: 100% 0 auto;
    padding-block: var(--space-8, 32px);
    background: var(--color-bg-primary, #fff);
    border-block: 1px solid var(--color-border-default, #ddd);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  }

  .mega__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-10, 40px);
  }

  .mega__heading {
    display: block;
    margin-bottom: var(--space-3, 12px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-text-secondary, #666);
  }

  .mega__column li a {
    display: block;
    min-height: 24px;
    padding: var(--space-1, 4px) 0;
    text-decoration: none;
  }

  .mega__column li a:hover {
    text-decoration: underline;
  }

  .mega__all {
    margin-top: var(--space-6, 24px);
  }

  .drawer-menu > li {
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .drawer-menu a,
  .drawer-menu summary {
    display: flex;
    align-items: center;
    min-height: 24px;
    justify-content: space-between;
    padding: var(--space-3, 12px) 0;
    text-decoration: none;
    cursor: pointer;
  }

  .drawer-menu > li > a,
  .drawer-menu summary {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 500;
  }

  .drawer-menu summary {
    list-style: none;
  }

  .drawer-menu summary::-webkit-details-marker {
    display: none;
  }

  .drawer-menu summary .icon {
    width: 18px;
    height: 18px;
    transition: transform 0.18s ease;
  }

  .drawer-menu details[open] > summary .icon {
    transform: rotate(90deg);
  }

  .drawer-menu ul ul {
    padding-left: var(--space-4, 16px);
    color: var(--color-text-secondary, #666);
  }

  @media (min-width: 1024px) {
    .site-header__row {
      min-height: 72px;
    }

    .site-header__burger {
      display: none;
    }

    .site-header__nav {
      display: flex;
    }

    /* Die Zeichen stehen optisch am Seitenrand und dicht wie live; ihre Tippflächen von 44 px reichen in den Rand. */
    .site-header__end {
      gap: 0;
      margin-inline-end: -11px;
    }

    .site-header__nav--end {
      margin-right: var(--space-6, 24px);
    }

    .site-logo img {
      height: 52px;
    }

    .site-header__search {
      position: relative;
      inset: auto;
      width: 320px;
    }
  }
/* END_SECTION:header */

/* START_SECTION:main-404 (INDEX:14) */
.not-found {
    display: grid;
    justify-items: center;
    gap: var(--space-6, 24px);
    padding-block: var(--space-12, 48px) var(--space-16, 64px);
    text-align: center;
  }

  .not-found > * {
    margin: 0;
  }

  .not-found__code {
    font-size: var(--text-6xl, 3.75rem);
    font-weight: 400;
    line-height: 1;
  }

  .not-found__line {
    width: 80px;
    margin: 0;
    border-top-color: var(--color-border-strong, #222);
  }

  .not-found__text {
    font-size: var(--text-2xl, 1.5rem);
  }

  .not-found__heading {
    margin: var(--space-4, 16px) 0 var(--space-3, 12px);
    font-size: var(--text-lg, 1.125rem);
  }

  .not-found__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 8px);
  }
/* END_SECTION:main-404 */

/* START_SECTION:main-article (INDEX:15) */
.main-article {
    padding-block: var(--space-8, 32px) var(--space-16, 64px);
  }

  .main-article__head {
    display: grid;
    gap: var(--space-4, 16px);
    max-width: 48rem;
    margin-bottom: var(--space-8, 32px);
  }

  .main-article__eyebrow {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .main-article__title {
    margin: 0;
  }

  .main-article__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px) var(--space-5, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .main-article__media {
    overflow: hidden;
    margin-bottom: var(--space-8, 32px);
    border-radius: var(--radius-md, 8px);
  }

  .main-article__layout {
    display: grid;
    gap: var(--space-8, 32px);
  }

  .main-article__main {
    min-width: 0;
    max-width: 48rem;
  }

  .main-article__contents {
    display: block;
    padding: var(--space-5, 20px);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #eee);
  }

  .main-article__contents-title {
    display: flex;
    align-items: center;
    min-height: 24px;
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .main-article__contents-title::-webkit-details-marker {
    display: none;
  }

  .main-article__avatar {
    width: 24px;
    height: 24px;
    margin-right: var(--space-2, 8px);
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
  }

  .main-article__meta a {
    color: inherit;
  }

  .main-article__embed {
    max-width: 22rem;
    margin-block: var(--space-6, 24px);
  }

  .main-article__contents-list {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding-left: var(--space-5, 20px);
    font-size: var(--text-sm, 0.875rem);
  }

  .main-article__contents-list a {
    color: inherit;
  }

  .main-article__contents-list a[aria-current='true'] {
    font-weight: 600;
  }

  .main-article__question {
    padding-block: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .main-article__question summary {
    min-height: 24px;
    font-weight: 600;
    cursor: pointer;
  }

  .main-article__related,
  .main-article__comments {
    margin-top: var(--space-16, 64px);
  }

  .main-article__comment-list {
    display: grid;
    gap: var(--space-6, 24px);
    margin: 0 0 var(--space-8, 32px);
    padding: 0;
    list-style: none;
  }

  .main-article__comment-meta {
    display: flex;
    gap: var(--space-3, 12px);
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
  }

  .main-article__comment-form {
    display: grid;
    gap: var(--space-4, 16px);
    max-width: 40rem;
  }

  .main-article__comment-form h3 {
    margin: 0;
  }

  @media (min-width: 1024px) {
    .main-article__layout {
      grid-template-columns: minmax(0, 1fr) 18rem;
      align-items: start;
    }

    .main-article__contents {
      position: sticky;
      top: var(--space-24, 96px);
      grid-column: 2;
      grid-row: 1;
    }

    .main-article__contents[hidden] + .main-article__main {
      grid-column: 1 / -1;
    }
  }
/* END_SECTION:main-article */

/* START_SECTION:main-blog (INDEX:16) */
.main-blog {
    padding-block: var(--space-8, 32px) var(--space-16, 64px);
  }

  /* Das Register bringt seinen eigenen oberen Abstand mit und steht als zweite Section darunter. */
  .main-blog--register {
    padding-block-end: 0;
  }

  .main-blog__head {
    display: grid;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-6, 24px);
  }

  .main-blog__title {
    margin: 0;
  }

  .main-blog__tags {
    margin-bottom: var(--space-8, 32px);
  }

  .main-blog__tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-blog__tag {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding-inline: var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-full, 999px);
    font-size: var(--text-sm, 0.875rem);
    color: inherit;
    text-decoration: none;
  }

  .main-blog__tag:hover {
    border-color: var(--color-text-primary, #222);
  }

  .main-blog__tag[aria-current='page'] {
    border-color: var(--color-text-primary, #222);
    background: var(--color-text-primary, #222);
    color: var(--color-bg-primary, #fff);
  }

  .main-blog__empty {
    padding-block: var(--space-12, 48px);
    text-align: center;
  }
/* END_SECTION:main-blog */

/* START_SECTION:main-cart (INDEX:17) */
.main-cart {
    padding-block: var(--space-8, 32px) var(--space-12, 48px);
  }

  /* Live ist der Titel der Warenkorbseite eine Stufe über dem Fließtext, kein Seitentitel in voller Größe. */
  .main-cart__title {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 400;
    text-align: center;
  }

  .main-cart__count {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #666);
  }

  .main-cart__lead {
    margin: var(--space-2, 8px) 0 0;
    text-align: center;
    color: var(--color-text-secondary, #666);
  }

  /* A script that empties the cart renders only the rows again, so the line of a full cart leaves with them. */
  .main-cart:has(.cart-body__empty) .main-cart__lead {
    display: none;
  }

  @media (min-width: 768px) {
    .main-cart__title {
      font-size: var(--text-3xl, 1.875rem);
    }

    /* Wie live steht ein voller Warenkorb in zwei Spalten: Zeilen links, Summe mit Kasse rechts, beim Scrollen klebend. */
    .main-cart.container--narrow:has(.cart-body__lines) {
      max-width: 1400px;
    }

    .main-cart .cart-body:has(> .cart-body__lines) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      column-gap: var(--space-10, 40px);
      align-items: start;
    }

    .main-cart .cart-body > * {
      grid-column: 1;
    }

    .main-cart .cart-body > .cart-body__lines {
      grid-row: 1 / span 2;
    }

    .main-cart .cart-body > .cart-rewards--progress {
      grid-column: 2;
      grid-row: 1;
    }

    .main-cart .cart-body > .cart-body__form {
      position: sticky;
      top: calc(var(--header-height, 0px) + var(--space-5, 20px));
      grid-column: 2;
      /* Set offer, upsell, gifts and note follow the rows on the left; spanning their rows keeps the sum from pushing them down. */
      grid-row: 2 / span 5;
      margin-top: 0;
    }
  }

  @media (min-width: 1024px) {
    .main-cart .cart-body:has(> .cart-body__lines) {
      grid-template-columns: minmax(0, 1fr) 350px;
    }
  }

  /* The table form: a full cart puts its title on the left with the way back beside it, the rows between two strong rules, the aside below them on a phone and beside them from 768 px. */
  .main-cart--table:has(.cart-body__lines) .main-cart__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5, 20px);
    margin-bottom: var(--space-5, 20px);
  }

  .main-cart--table:has(.cart-body__lines) .main-cart__title {
    margin: 0;
    text-align: start;
  }

  .main-cart--table .main-cart__back:empty {
    display: none;
  }

  .main-cart--table .cart-body--table > .cart-body__lines {
    border-top: 1px solid var(--color-border-strong, #222);
  }

  .main-cart--table .cart-body--table .cart-line {
    grid-template-columns: 100px minmax(0, 1fr);
    column-gap: var(--space-5, 20px);
    padding-block: 15px var(--space-10, 40px);
    border-bottom: 1px solid var(--color-border-strong, #222);
  }

  .main-cart--table .cart-body--table .cart-line__price {
    grid-column: 2;
    grid-row: auto;
    order: 1;
    max-width: none;
    margin-block: 10px;
    text-align: start;
  }

  .main-cart--table .cart-body--table .cart-line__price .c-price {
    justify-content: flex-start;
  }

  .main-cart--table .cart-body--table .cart-line__body > .cart-line__foot {
    grid-column: 2;
    order: 2;
    flex-direction: column;
    align-items: center;
    justify-self: start;
    gap: 0;
    margin-top: 35px;
  }

  .main-cart--table .cart-body__aside {
    display: grid;
    gap: var(--space-4, 16px);
    margin-top: var(--space-6, 24px);
  }

  .main-cart--table .cart-body__aside > * {
    margin: 0;
  }

  @media (min-width: 768px) {
    .main-cart.main-cart--table:has(.cart-body__lines) {
      max-width: calc(var(--page-width, 1320px) + 2 * var(--page-gutter));
    }

    .main-cart--table .main-cart__head {
      grid-column: 1;
      grid-row: 1;
    }

    .main-cart--table:has(.cart-body__lines) {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 280px;
      grid-template-rows: auto auto 1fr;
      column-gap: var(--space-10, 40px);
      align-items: start;
    }

    .main-cart--table:has(.cart-body__lines) > [data-cart-section] {
      display: contents;
    }

    .main-cart--table .cart-body--table:has(> .cart-body__lines) {
      display: contents;
    }

    .main-cart--table .cart-body--table > .cart-body__lines {
      grid-column: 1;
      grid-row: 2;
    }

    .main-cart--table .cart-body--table > .cart-body__aside {
      grid-column: 2;
      grid-row: 1 / 4;
      margin-top: 0;
    }

    .main-cart--table .cart-body--table .cart-line {
      grid-template-columns: 120px minmax(0, 2fr) minmax(0, 3fr) 95px;
      column-gap: 0;
      align-items: center;
      padding-block: 15px;
    }

    .main-cart--table .cart-body--table .cart-line__media {
      margin-inline-end: var(--space-5, 20px);
    }

    .main-cart--table .cart-body--table .cart-line__title {
      grid-column: 2;
    }

    .main-cart--table .cart-body--table .cart-line__price {
      grid-column: 3;
      grid-row: 1;
      margin: 0;
      padding-inline: 10px;
      text-align: center;
    }

    .main-cart--table .cart-body--table .cart-line__price .c-price {
      justify-content: center;
    }

    .main-cart--table .cart-body--table .cart-line__body > .cart-line__foot {
      grid-column: 4;
      grid-row: 1;
      margin-top: 0;
    }
  }

  @media (min-width: 1024px) {
    .main-cart--table:has(.cart-body__lines) {
      grid-template-columns: minmax(0, 1fr) 350px;
    }
  }
/* END_SECTION:main-cart */

/* START_SECTION:main-collection (INDEX:18) */
.main-collection {
    padding-block: var(--space-8, 32px) var(--space-16, 64px);
  }

  .main-collection__head {
    display: grid;
    gap: var(--space-6, 24px);
    margin-bottom: var(--space-8, 32px);
  }

  .main-collection__title {
    margin: 0 0 var(--space-3, 12px);
  }

  .main-collection__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px) var(--space-6, 24px);
    margin-bottom: var(--space-4, 16px);
  }

  .main-collection__bar .product-results__count {
    margin: 0;
  }

  /* Neben den Brotkrumen trägt die Zeile die Zahl erst ab 768 px; darunter hört sie nur die Vorlesehilfe. */
  @media (max-width: 767px) {
    .main-collection__bar .product-results__count {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  .main-collection__crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .main-collection__crumbs li {
    display: inline-flex;
    gap: var(--space-2, 8px);
  }

  .main-collection__crumbs a {
    color: inherit;
    text-decoration: none;
  }

  .main-collection__media {
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
  }

  @media (min-width: 768px) {
    .main-collection__head--media {
      grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
      align-items: center;
    }
  }
/* END_SECTION:main-collection */

/* START_SECTION:main-list-collections (INDEX:19) */
.collection-list {
    padding-block: var(--space-8, 32px) var(--space-16, 64px);
  }

  .collection-list__title {
    margin: 0 0 var(--space-8, 32px);
    font-size: var(--text-3xl, 1.875rem);
    font-weight: 400;
  }

  .collection-list__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6, 24px) var(--space-4, 16px);
  }

  .collection-list__card {
    display: grid;
    gap: var(--space-2, 8px);
    color: inherit;
    text-decoration: none;
  }

  .collection-list__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--color-bg-secondary, #f4f4f4);
    border-radius: var(--radius-lg, 12px);
  }

  .collection-list__media .c-image {
    height: 100%;
    object-fit: cover;
  }

  .collection-list__name {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
  }

  .collection-list__count {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  /* Runde Kacheln: ein Kreis je Kollektion, der Name leise darunter; auf dem Telefon eine Reihe, die zur Seite läuft. */
  .collection-list--round .collection-list__grid {
    grid-template-columns: none;
    grid-auto-columns: 85%;
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .collection-list--round .collection-list__grid > li {
    scroll-snap-align: start;
  }

  .collection-list--round .collection-list__media {
    aspect-ratio: 1;
    border-radius: var(--radius-full, 9999px);
  }

  .collection-list--round .collection-list__name {
    font-size: var(--text-base, 1rem);
    font-weight: 400;
  }

  @media (min-width: 1024px) {
    .collection-list__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .collection-list--round .collection-list__grid {
      grid-template-columns: repeat(var(--collections-per-row, 3), minmax(0, 1fr));
      grid-auto-flow: row;
      overflow: visible;
    }
  }
/* END_SECTION:main-list-collections */

/* START_SECTION:main-offer-checkout (INDEX:20) */
.offer-checkout {
    display: grid;
    gap: var(--space-4, 16px);
    padding-block: var(--space-16, 64px);
    text-align: center;
  }

  .offer-checkout__status {
    color: var(--color-text-secondary, #666666);
  }

  .offer-checkout__links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 8px);
    margin-top: var(--space-4, 16px);
  }
/* END_SECTION:main-offer-checkout */

/* START_SECTION:main-page (INDEX:21) */
.main-page {
    padding-block: var(--space-10, 40px);
  }

  .main-page__title {
    font-size: var(--text-3xl, 1.875rem);
  }

  @media (min-width: 768px) {
    .main-page {
      padding-block: var(--space-12, 48px);
    }

    .main-page__title {
      font-size: var(--text-5xl, 3rem);
    }
  }
/* END_SECTION:main-page */

/* START_SECTION:main-password (INDEX:22) */
.main-password {
    display: grid;
    justify-items: center;
    gap: var(--space-8, 32px);
    min-height: 100vh;
    padding-block: var(--space-10, 40px);
    text-align: center;
    align-content: center;
  }

  .main-password__card {
    width: min(560px, 100%);
    padding: var(--space-8, 32px) var(--space-6, 24px);
    background: var(--color-bg-secondary, #f5f5f5);
    border-radius: var(--radius-xl, 16px);
  }

  .main-password__title {
    font-size: var(--text-3xl, 1.875rem);
  }

  .main-password__heading {
    margin: var(--space-6, 24px) 0 var(--space-3, 12px);
    font-size: var(--text-lg, 1.125rem);
  }
/* END_SECTION:main-password */

/* START_SECTION:main-policy (INDEX:23) */
.main-policy {
    padding-block: var(--space-10, 40px);
  }

  .main-policy__title {
    font-size: var(--text-3xl, 1.875rem);
  }

  .main-policy__nav {
    margin-top: var(--space-6, 24px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .main-policy__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    min-height: 56px;
    padding-block: var(--space-3, 12px);
    font-weight: 500;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .main-policy__link:hover {
    text-decoration: underline;
  }

  .main-policy__link .icon {
    flex: none;
  }

  .main-policy__link[aria-current='page'] {
    font-weight: 700;
  }

  @media (min-width: 768px) {
    .main-policy {
      padding-block: var(--space-12, 48px);
    }

    .main-policy__title {
      font-size: var(--text-5xl, 3rem);
    }
  }
/* END_SECTION:main-policy */

/* START_SECTION:main-product (INDEX:24) */
.product {
    display: grid;
    gap: var(--space-8, 32px);
    padding-block: var(--space-4, 16px) var(--section-space, 56px);
  }

  @media (min-width: 768px) {
    .product {
      padding-block: var(--section-space, 72px);
    }
  }

  .product__gallery,
  .product__info {
    min-width: 0;
    /* In der Kaufspalte stehen die Bausteine dicht untereinander: dort gilt die Abschnittsluft einer Seite nicht. */
    --block-space: 0px;
  }

  /* Ein Baustein der Kaufspalte trägt seinen eigenen Rand nicht; den Rand setzt die Spalte. */
  .product__info .container {
    max-width: none;
    padding-inline: 0;
  }

  /* Eine Überschrift in der Kaufspalte steht über zwei Zeilen Inhalt, nicht über einem Abschnitt. */
  .product__info .c-faq__heading {
    font-size: var(--text-xl, 1.25rem);
  }

  /* In der Kaufspalte ist die Frage-Liste ein Akkordeon, kein Abschnitt: sie bleibt einspaltig. */
  .product__info .c-faq {
    display: block;
  }

  /* Ein Vorteil der Kaufspalte steht unter dem nächsten, wie live, nie in einem zweiten Raster daneben. */
  .product__info .c-benefit-list:not(.c-benefit-list--dense) .c-benefit-list__items {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Die Garantiezeile steht mittig unter dem Lieferhinweis. */
  .product__info .c-benefit-list--dense .c-benefit-list__items {
    justify-content: center;
  }

  .product-gallery__track {
    display: flex;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-xl, 16px);
  }

  .product-gallery {
    position: relative;
    display: block;
  }

  /* Das Schild eines reduzierten Preises liegt wie live oben links auf dem ersten Bild. */
  .product-gallery__badge {
    position: absolute;
    top: var(--space-3, 12px);
    left: var(--space-3, 12px);
    z-index: 1;
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-sale-bg, #444);
    color: var(--color-sale-text, #fff);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .product-gallery__item {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Die Reihe liegt im Vorlade-Rand des Browsers und holte jedes Bild neben dem ersten, darum steht bis zum Laden der Seite oder zum ersten Zeichen nur das erste im Fluss. */
  @media (scripting: enabled) {
    product-gallery:not([data-gallery-awake]) .product-gallery__item ~ .product-gallery__item {
      display: none;
    }
  }

  .product-gallery__zoom {
    display: block;
    cursor: zoom-in;
  }

  .product-gallery__video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }

  .product-gallery__model {
    position: absolute;
    right: var(--space-4, 16px);
    bottom: var(--space-4, 16px);
  }

  .product-gallery__thumbnails {
    display: flex;
    gap: var(--space-2, 8px);
    margin: var(--space-3, 12px) 0 0;
    padding: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
  }

  /* A strip of a set number (pdp.gallery.thumbs, five at most on a phone): each thumbnail the same width, 56 to 80 px so a
     wide gallery keeps them small and a narrow one scrolls, no scrollbar, a calm ring on the current one; the script keeps the current one in view. */
  .product-gallery__thumbnails[data-even] {
    --gallery-thumbs-now: min(var(--gallery-thumbs), 5);
    --gallery-thumb-gap: var(--space-2, 8px);
    gap: var(--gallery-thumb-gap);
    margin-top: var(--space-4, 16px);
    padding: 4px;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    scrollbar-width: none;
  }

  .product-gallery__thumbnails[data-even]::-webkit-scrollbar {
    display: none;
  }

  .product-gallery__thumbnails[data-even] > li {
    flex: 0 0 clamp(56px, calc((100% - (var(--gallery-thumbs-now) - 1) * var(--gallery-thumb-gap)) / var(--gallery-thumbs-now)), 80px);
    scroll-snap-align: start;
  }

  .product-gallery__thumbnails[data-even] .product-gallery__thumbnail {
    width: 100%;
    border: 0;
    border-radius: var(--radius-md, 8px);
    opacity: 0.7;
    outline: 1.5px solid transparent;
    outline-offset: 2px;
    transition: opacity 0.2s ease, outline-color 0.2s ease;
  }

  .product-gallery__thumbnails[data-even] .product-gallery__thumbnail:hover {
    opacity: 0.85;
  }

  .product-gallery__thumbnails[data-even] .product-gallery__thumbnail[aria-current='true'] {
    opacity: 1;
    outline-color: var(--color-border-strong, #222);
  }

  .product-gallery__thumbnails[data-even] .product-gallery__thumbnail:focus-visible {
    opacity: 1;
    outline-color: var(--color-focus, currentColor);
  }

  @media (min-width: 750px) {
    .product-gallery__thumbnails[data-even] {
      --gallery-thumbs-now: var(--gallery-thumbs);
      --gallery-thumb-gap: var(--space-3, 12px);
    }
  }

  /* The preview of a slide: the copy stands at the width of the track and is scaled down to the thumbnail. */
  .product-gallery__thumbnail--slide {
    position: relative;
    aspect-ratio: 1;
  }

  .product-gallery__thumb-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--gallery-stage, 600px);
    transform: scale(var(--gallery-thumb-scale, 0.12));
    transform-origin: 0 0;
    pointer-events: none;
  }

  .product-gallery__thumb-stage > .product-gallery__item {
    display: block;
    width: 100%;
  }

  /* Round arrows over the pictures with a pointer, in the gallery (pdp.gallery.arrows) and always in the enlarged view; a phone swipes. */
  .product-gallery__arrow {
    display: none;
  }

  @media (min-width: 750px) and (hover: hover) {
    .product-gallery__arrow:not([hidden]) {
      position: absolute;
      top: var(--gallery-arrow-top, 50%);
      z-index: 2;
      display: grid;
      place-items: center;
      width: 44px;
      height: 44px;
      margin-top: -22px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--color-bg-primary, #fff);
      box-shadow: var(--shadow-sm, 0 1px 6px rgb(0 0 0 / 0.12));
      color: var(--color-text-primary, #000);
      cursor: pointer;
    }

    .product-gallery__arrow--previous {
      left: var(--space-4, 16px);
    }

    .product-gallery__arrow--previous svg {
      transform: scaleX(-1);
    }

    .product-gallery__arrow--next {
      right: var(--space-4, 16px);
    }
  }

  .product-gallery__thumbnail {
    display: block;
    width: 72px;
    overflow: hidden;
    background: var(--color-bg-secondary, #eee);
    border: 1px solid transparent;
    border-radius: var(--radius-md, 8px);
  }

  .product-gallery__thumbnail[aria-current='true'] {
    border-color: var(--color-border-strong, #222);
  }

  /* Only the thumbnail's own picture: a slide copy on the stage keeps the sizes of its own pictures. */
  .product-gallery__thumbnail .c-image:not(.product-gallery__thumb-stage *),
  .product-gallery__thumbnail img:not(.product-gallery__thumb-stage *) {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
  }

  .product-gallery__dialog {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    padding: 0;
    overflow: hidden;
    background: var(--color-bg-primary, #fff);
    border: 0;
  }

  .product-gallery__dialog::backdrop {
    background: var(--color-overlay-default, #666);
  }

  .product-gallery__close {
    position: fixed;
    top: var(--space-4, 16px);
    right: var(--space-4, 16px);
    background: var(--color-bg-primary, #fff);
  }

  /* The enlarged view: every picture and slide of the gallery in a row, each a square that fits the window, starting at the one clicked. */
  .product-gallery__zoomed {
    --gallery-arrow-top: 50%;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .product-gallery__zoom-track {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .product-gallery__zoom-item {
    display: grid;
    flex: 0 0 100%;
    place-items: center;
    scroll-snap-align: start;
  }

  /* Two classes, so a brand's own width for its slide class does not stretch the square. */
  .product-gallery__zoom-item > .product-gallery__zoom-square {
    position: relative;
    width: min(88vh, 92vw, 1100px);
    aspect-ratio: 1;
    overflow: hidden;
  }

  .product-gallery__zoom-square > a,
  .product-gallery__zoom-square > .c-image {
    display: block;
    width: 100%;
    height: 100%;
  }

  .product-gallery__zoom-square img {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    object-fit: contain;
  }

  .product-gallery__zoom-square .product-gallery__zoom {
    cursor: default;
  }

  .product__info > *,
  .product__live > * {
    margin-block: 0;
  }

  .product__info > * + *,
  .product__live > * + * {
    margin-top: var(--space-3, 12px);
  }

  /* Die Kaufspalte trägt eine eigene, engere Stufe als die Abschnitte darunter: sonst steht der Kaufknopf unter der Falz. */
  .product__title {
    font-size: var(--text-2xl, 1.5rem);
  }

  .product__subtitle {
    font-size: var(--text-sm, 0.875rem);
  }

  .product__subtitle,
  .product__note {
    color: var(--color-text-secondary, #666);
  }

  .product__note {
    font-size: var(--text-sm, 0.875rem);
  }

  /* contents macht die Teile des Preises zu Geschwistern des Hinweises, und ::before bricht zwischen Preis mit Streichpreis und Grundpreis mit Hinweis um. */
  .product__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--space-1, 4px);
    font-size: var(--text-2xl, 1.5rem);
  }

  .product__price-note {
    flex-basis: 100%;
    font-size: var(--text-base, 1rem);
  }

  .product__price::before {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
  }

  .product__price .c-price {
    display: contents;
  }

  .product__price :is(.c-price__unit, .c-price__subscription, .c-price__savings, .product__note) {
    order: 2;
  }

  .product__price .c-price__unit {
    flex-basis: auto;
  }

  .product__price .c-price__compare {
    margin-inline-start: var(--space-1, 4px);
    font-size: var(--text-base, 1rem);
  }

  /* Ein reduzierter Preis steht wie live in der Farbe des Angebots, der alte klein daneben. */
  .product__price .c-price--sale .c-price__current {
    color: var(--color-sale-bg, #444);
  }

  .product__price .product__note {
    margin: 0;
  }

  .variant-picker {
    display: grid;
    gap: var(--space-4, 16px);
  }

  .variant-picker__group {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .variant-picker__legend {
    margin-bottom: var(--space-2, 8px);
    padding: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
  }

  .variant-picker__values {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .variant-picker__pill {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-full, 9999px);
    cursor: pointer;
  }

  .variant-picker__pill--sold-out {
    color: var(--color-text-secondary, #666);
    text-decoration: line-through;
  }

  .variant-picker__input:checked + .variant-picker__pill {
    color: var(--color-action-primary-text, #fff);
    background: var(--color-action-primary, #222);
    border-color: var(--color-action-primary, #222);
  }

  .variant-picker__input:focus-visible + .variant-picker__pill {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .variant-picker__input:disabled + .variant-picker__pill {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .variant-picker__apply {
    margin-top: var(--space-3, 12px);
  }

  /* Die Zusagen stehen in einer Reihe, die umbricht — gestapelt schieben drei Zeilen den Kaufknopf nach unten. */
  .product__trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 8px) var(--space-5, 20px);
    margin-top: var(--space-3, 12px);
  }

  .product__trust > * {
    margin: 0;
  }

  .product__trust-row {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .product__trust-row .icon {
    flex: none;
    width: 18px;
    height: 18px;
  }

  .product__trust-lead {
    font-weight: 600;
    color: var(--color-text-primary, #222);
  }

  .product__shipping {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .product__shipping .c-price {
    font-size: inherit;
    font-weight: 500;
    color: var(--color-text-primary, #222);
  }

  .product__availability {
    font-size: var(--text-sm, 0.875rem);
  }

  .product__availability--available .icon,
  .product__availability--available .product__trust-lead {
    color: var(--color-status-available, #444);
  }

  .product-form__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3, 12px);
  }

  .product-form__row .button {
    flex: 1 1 200px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }

  /* Die Mengenwahl steht wie live in einer eigenen Zeile, der Knopf darunter über die ganze Breite. */
  .product-form__quantity + .button {
    flex-basis: 100%;
  }

  /* Kaufart oder Pakete stehen mit ihrem Knopf in einer gerahmten Karte, wie live. */
  .product__buy-card {
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-xl, 16px);
    background: var(--color-bg-primary, #fff);
  }

  .product__buy > * {
    margin-block: 0;
  }

  .product__buy > * + * {
    margin-top: var(--space-3, 12px);
  }

  /* Im Kachel-Layout steht jeder Preis auf der Zeile seiner Kaufart, der Preis darüber träte doppelt auf. */
  .product__live:has(> .product__buy-card--tiles) > .product__price > .c-price {
    display: none;
  }

  /* Im Kachel-Layout ist die Karte der Abo-Kasten: kräftiger Rahmen, der Knopf eine Pille darin. */
  .product__buy-card--tiles {
    display: grid;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px);
    border: 2px solid var(--color-border-strong, #222);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-secondary, #fff);
  }

  .product__buy-card--tiles > * + * {
    margin-top: 0;
  }

  .product__buy-card--tiles .product-form__row .button {
    border-radius: var(--radius-full, 9999px);
    letter-spacing: normal;
    text-transform: none;
  }

  .product__buy-card .c-pack-options {
    margin: 0;
  }

  .product__buy-card .product-form__row .button {
    min-height: 56px;
  }

  /* Wort und Preis sind ein Kind des Knopfs: auf dem Telefon bricht die Zeile als Ganzes mittig um. */
  .product-form__button-label {
    min-width: 0;
    text-align: center;
  }

  .product-form__pack-label .c-price {
    display: inline;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  .product-form__button-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
    margin-left: var(--space-2, 8px);
  }

  .product-form__button-price .c-price {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  /* Mit Streichpreis bricht der Knopf wie live um, wo die Zeile nicht reicht: der alte Preis rutscht als Ganzes darunter. */
  .product-form__row .button:has(.c-price--sale) {
    flex-wrap: wrap;
    column-gap: var(--space-2, 8px);
    row-gap: 0;
    padding-inline: var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
  }

  .product-form__button-price:has(.c-price--sale),
  .product-form__button-price:has(.c-price--sale) .c-price {
    display: contents;
  }

  .product-form__button-price .c-price__compare {
    color: inherit;
    font-size: var(--text-sm, 0.875rem);
  }

  .product-form__quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-strong, #222);
    border-radius: var(--radius-full, 9999px);
  }

  .product-form__quantity-input {
    width: 56px;
    min-height: 46px;
    padding: 0;
    font: inherit;
    text-align: center;
    color: inherit;
    background: none;
    border: 0;
    appearance: textfield;
  }

  .product-form__quantity-input::-webkit-inner-spin-button {
    appearance: none;
  }

  .product__description {
    padding-top: var(--space-6, 24px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  /* A product the shop does not sell on this page: its description stands under the title, the buy form and its lines stay away. */
  .product__lead-description {
    margin-top: var(--space-4, 16px);
  }

  .product__info:has(> .product__lead-description) :is(.product__price-note, variant-picker, .product__buy, .c-notice, .product__trust, .product__description) {
    display: none;
  }

  .product__description-title {
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--text-xl, 1.25rem);
  }

  /* Aufteilung, Abstand und größte Breite der Kaufspalte darf eine Brand über diese drei Variablen setzen. */
  @media (min-width: 900px) {
    .product {
      grid-template-columns: var(--product-columns, repeat(2, minmax(0, 1fr)));
      gap: var(--product-gap, var(--space-12, 48px));
      align-items: start;
    }

    .product__info {
      max-width: var(--product-info-max, none);
    }

    .product__gallery {
      position: sticky;
      top: calc(var(--header-height, 0px) + var(--space-6, 24px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .product-gallery__track {
      scroll-behavior: auto;
    }
  }
/* END_SECTION:main-product */

/* START_SECTION:main-search (INDEX:25) */
/* Abstände wie live: Feld gut unter dem Kopf, Titel darunter, Filter und Raster mit Luft unter dem Titel. */
  .main-search {
    padding-block: var(--space-12, 48px) var(--space-16, 64px);
  }

  .main-search__head {
    margin: 0 auto var(--space-8, 32px);
    text-align: center;
  }

  .main-search__head .search-field {
    max-width: 600px;
    margin-inline: auto;
  }

  .main-search__title {
    margin: var(--space-10, 40px) 0 0;
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 400;
  }

  @media (min-width: 768px) {
    .main-search {
      padding-top: calc(var(--space-12, 48px) + var(--space-5, 20px));
    }

    .main-search__head {
      margin-bottom: calc(var(--space-12, 48px) + var(--space-10, 40px));
    }

    .main-search__title {
      font-size: var(--text-3xl, 1.875rem);
    }
  }

  .main-search__card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    align-self: start;
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .main-search__badge {
    align-self: flex-start;
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-brand-accent, #eee);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
  }

  /* Wie live endet der Titel nach zwei Zeilen und der Auszug nach drei, jeweils mit Auslassung. */
  .main-search__name {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    font-size: var(--text-base, 1rem);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  /* The card is the link: the title's link stretches over it. */
  .main-search__name a {
    color: inherit;
    text-decoration: none;
  }

  .main-search__name a::after {
    content: "";
    position: absolute;
    inset: 0;
  }

  .main-search__excerpt {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .main-search__more {
    align-self: flex-end;
    padding-top: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }
/* END_SECTION:main-search */

/* START_SECTION:predictive-search (INDEX:53) */
.predictive-search__group + .predictive-search__group {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .predictive-search__heading {
    margin-bottom: var(--space-1, 4px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .predictive-search__link {
    display: block;
    min-height: 24px;
    padding: var(--space-2, 8px);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-md, 8px);
  }

  .predictive-search__link--media {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  .predictive-search__link--all {
    font-weight: 600;
  }

  .predictive-search__option[aria-selected='true'] .predictive-search__link,
  .predictive-search__link:hover {
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .predictive-search__media {
    flex: none;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--color-bg-secondary, #f4f4f4);
    border-radius: var(--radius-md, 8px);
  }

  .predictive-search__media .c-image {
    height: 100%;
    object-fit: cover;
  }

  .predictive-search__text {
    display: grid;
    gap: var(--space-1, 4px);
    min-width: 0;
  }
/* END_SECTION:predictive-search */

/* START_SECTION:related-products (INDEX:55) */
.related-products {
    padding-block: var(--section-space, 56px);
  }

  .related-products__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  .related-products__list {
    display: grid;
    grid-template-columns: repeat(var(--row-columns-mobile, 2), minmax(0, 1fr));
    gap: var(--space-8, 32px) var(--space-4, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 768px) {
    .related-products__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: var(--space-10, 40px) var(--space-6, 24px);
    }
  }
/* END_SECTION:related-products */

/* START_SECTION:section-accordions-with-images (INDEX:56) */
.accordions-media {
    padding-block: var(--section-space, 56px);
  }

  .accordions-media__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  @media (min-width: 768px) {
    /* Wie live: Überschrift links, Fragen rechts, drei zu fünf. */
    .accordions-media--split {
      display: grid;
      grid-template-columns: 3fr 5fr;
      column-gap: var(--space-10, 40px);
      align-items: start;
    }
  }
/* END_SECTION:section-accordions-with-images */

/* START_SECTION:section-accordions (INDEX:57) */
.accordions {
    padding-block: var(--section-space, 56px);
  }

  .accordions__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  .accordions__intro {
    margin-bottom: var(--space-6, 24px);
  }

  /* Über zwei Spalten Fragen steht die Überschrift live mittig. */
  .accordions--two .accordions__head {
    text-align: center;
  }

  .accordions--boxed .c-accordion-item {
    margin-bottom: var(--space-2, 8px);
    padding-inline: var(--space-5, 20px);
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .accordions--boxed .c-accordion-item__title {
    font-weight: 400;
  }

  @media (min-width: 768px) {
    /* Wie live: in der einspaltigen Form stehen Überschrift und Fragen nebeneinander, drei zu fünf. */
    .accordions--split {
      display: grid;
      grid-template-columns: 3fr 5fr;
      column-gap: var(--space-10, 40px);
      align-items: start;
    }

    /* Wie live füllen die Fragen erst die linke, dann die rechte Spalte, und jede Spalte wächst für sich. */
    .accordions__list--two {
      columns: 2;
      column-gap: var(--space-10, 40px);
    }

    .accordions__list--two > * {
      break-inside: avoid;
    }
  }
/* END_SECTION:section-accordions */

/* START_SECTION:section-collection (INDEX:58) */
.collection-row {
    padding-block: var(--section-space, 56px);
  }

  /* Die Reihe läuft bis an den Rand des Fensters, auch wenn ihr Container gedeckelt ist; weiter als der Rand geht sie nie. */
  .shopify-section:has(> .collection-row .collection-row__list--rail) {
    overflow-x: clip;
  }

  .collection-row--center {
    text-align: center;
  }

  .collection-row__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  .collection-row__list {
    display: grid;
    grid-template-columns: repeat(var(--row-columns-mobile, 2), minmax(0, 1fr));
    gap: var(--space-8, 32px) var(--space-4, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Die Reihe fährt seitlich, solange kein Skript sie schiebt: der Browser rastet ein. Rechts reicht sie über das
     Polster hinaus, und jede Karte gibt ein Stück ab, damit die nächste sichtbar anschneidet wie live. */
  .collection-row__list--rail {
    --rail-peek: var(--space-6, 24px);
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--row-columns-mobile, 2) - 1) * var(--space-4, 16px) - var(--rail-peek)) / var(--row-columns-mobile, 2));
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  /* Zwei Klassen, weil die Grundregel für Listen mit role="list" Rand und Polster auf null setzt. */
  .collection-row .collection-row__list--rail {
    margin-inline-end: calc(50% - 50vw);
    padding-inline-end: calc(50vw - 50%);
  }

  .collection-row__list--rail > .collection-row__item {
    scroll-snap-align: start;
  }

  @media (min-width: 768px) {
    .collection-row__list {
      grid-template-columns: repeat(var(--row-columns, 4), minmax(0, 1fr));
      gap: var(--space-10, 40px) var(--space-6, 24px);
    }

    /* Am Schreibtisch wie live eine Zeile aus inline-Kacheln: kein Flex und kein Grid, auch nicht in Preis und Sternen der Karte. */
    .collection-row__list--rail {
      display: block;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;
    }

    /* Am Schreibtisch füllen die Karten die Inhaltsbreite; angeschnitten wird die nächste im Seitenrand, bis an die Fensterkante. */
    .collection-row__list--rail > .collection-row__item {
      display: inline-block;
      width: calc((100% - (var(--row-columns, 4) - 1) * var(--space-5, 20px)) / var(--row-columns, 4));
      margin-inline-end: var(--space-5, 20px);
      vertical-align: top;
      white-space: normal;
    }

    .collection-row__list--rail > .collection-row__item:last-child {
      margin-inline-end: 0;
    }

    .collection-row__list--rail :is(.c-price, .c-rating-row__stars) {
      display: inline-block;
    }

    .collection-row__list--rail .c-price > :not(:first-child) {
      margin-inline-start: var(--space-2, 8px);
    }

    .collection-row__list--rail :is(.c-price__unit, .c-price__subscription, .c-price__savings) {
      display: block;
      margin-inline-start: 0;
    }

    .collection-row__list--rail .c-rating-row__star {
      display: inline-block;
      margin-inline-end: 1px;
    }
  }
/* END_SECTION:section-collection */

/* START_SECTION:section-custom-content (INDEX:60) */
/* Without a padding of the template the section keeps the spacing scale of the page; with one, section-padding (compat.css) spaces it. */
  .custom-content:not(.section-padding) {
    padding-block: var(--section-space, 56px);
  }

  .custom-content__grid {
    display: grid;
    gap: var(--space-6, 24px);
  }

  .custom-content__grid--gutter {
    gap: var(--space-10, 40px);
  }

  .custom-content__cell--text {
    align-self: center;
  }

  .custom-content__grid--fixed .custom-content__cell > .c-image {
    width: 100%;
    height: var(--custom-content-height-mobile, auto);
    object-fit: cover;
  }

  .custom-content__heading {
    margin: 0 0 var(--space-4, 16px);
  }

  /* Wie live stoßen Bild und Text ohne Gasse aneinander, der Text hält seinen Abstand im eigenen Polster. */
  @media (min-width: 768px) {
    .custom-content__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: 0;
    }

    .custom-content__grid--gutter {
      gap: var(--space-10, 40px);
    }

    .custom-content__inner {
      padding-inline: var(--space-8, 32px);
    }

    .custom-content__grid--fixed .custom-content__cell > .c-image {
      height: var(--custom-content-height, auto);
    }
  }
/* END_SECTION:section-custom-content */

/* START_SECTION:section-custom-html (INDEX:61) */
/* Hand-written code carries its own spacing; the band outside it is the template's (see above). */
  .custom-html {
    padding-block: 0;
  }

  .custom-html > :first-child {
    margin-top: 0;
  }

  .custom-html > :last-child {
    margin-bottom: 0;
  }

  /* Hand-written code places a picture like text, the way a browser does without the reset of the core. */
  .custom-html img {
    display: inline;
  }
/* END_SECTION:section-custom-html */

/* START_SECTION:section-icons-row (INDEX:63) */
.icons-row--top-line {
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .icons-row--bottom-line {
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .icons-row__list {
    display: grid;
    gap: var(--space-4, 16px);
    margin: 0;
    padding-block: var(--space-6, 24px);
    list-style: none;
  }

  .icons-row--center {
    text-align: center;
  }

  .icons-row__title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 600;
  }

  .icons-row__text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  @media (min-width: 768px) {
    .icons-row__list {
      grid-template-columns: repeat(var(--row-columns, 3), minmax(0, 1fr));
      gap: var(--space-8, 32px);
    }

    .icons-row--split .icons-row__item + .icons-row__item {
      border-left: 1px solid var(--color-border-default, #ddd);
    }
  }
/* END_SECTION:section-icons-row */

/* START_SECTION:section-image-with-text (INDEX:64) */
.media-text:not(.section-padding) {
    padding-block: var(--section-space, 56px);
  }

  .media-text__split {
    display: grid;
    gap: var(--space-6, 24px);
  }

  /* Der zweite Grund reicht wie live über die ganze Breite der Seite, ohne den Inhalt aus dem Raster zu nehmen. */
  .media-text--tinted {
    background: var(--media-ground, var(--color-bg-secondary, #f4f4f4));
    box-shadow: 0 0 0 100vmax var(--media-ground, var(--color-bg-secondary, #f4f4f4));
    clip-path: inset(0 -100vmax);
  }

  /* Mobil steht der Block wie live eine Stufe eingerückt und die Textspalte noch eine Stufe weiter. */
  @media (max-width: 767px) {
    .media-text__split {
      padding-inline: var(--space-5, 20px);
    }

    .media-text__content {
      padding-inline-start: var(--space-5, 20px);
    }
  }

  /* A least height of the template holds the picture's place open, the picture stands at its top as live. */
  .media-text__media {
    min-height: var(--media-least, auto);
  }

  @media (max-width: 767px) {
    .media-text__media {
      min-height: var(--media-least-mobile, auto);
    }
  }

  .media-text__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md, 8px);
    aspect-ratio: var(--media-ratio, 1);
    object-fit: cover;
  }

  .media-text__content {
    display: grid;
    align-content: center;
    gap: var(--space-4, 16px);
  }

  .media-text__heading {
    margin: 0;
  }

  .media-text__text {
    line-height: 1.6;
  }

  /* Live steht vor jeder Frage ein kleines Bild; die Trennlinie läuft unter beiden durch. */
  .media-text__accordion {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-strong, #222);
  }

  .media-text__accordion .c-accordion-item {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: 0;
  }

  .media-text__accordion-picture {
    display: flex;
    flex: none;
    margin-top: var(--space-4, 16px);
  }

  .media-text__accordion-picture img {
    width: 25px;
    height: 25px;
    object-fit: cover;
  }

  .media-text__eyebrow {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .media-text__bullets {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Der Haken steht vor dem Text wie live, ohne Flex: zwei Kinder in einer Zeile läsen sich als zwei Spalten. */
  .media-text__bullet {
    position: relative;
    padding-inline-start: calc(22px + var(--space-2, 8px));
  }

  .media-text__bullet-text > p {
    margin: 0;
  }

  .media-text__bullet .icon {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    stroke-width: 2.6;
  }

  /* Blocks with their own space below: no gap, each block carries its margin (the last one too, as live). */
  .media-text__content--spaced,
  .media-text__content--spaced .media-text__bullets {
    gap: 0;
  }

  .media-text__content--spaced > .media-text__block,
  .media-text__content--spaced .media-text__bullet {
    margin-bottom: var(--media-block-space, 0px);
  }

  .media-text__bullet--styled {
    padding-inline-start: calc(var(--bullet-icon, 22px) + var(--bullet-gap, var(--space-2, 8px)));
    font-size: var(--bullet-size, inherit);
    line-height: var(--bullet-leading, inherit);
    color: var(--bullet-color, inherit);
  }

  .media-text__bullet--styled .media-text__bullet-text,
  .media-text__bullet--styled .media-text__bullet-text > p {
    font-size: inherit;
    line-height: inherit;
  }

  .media-text__bullet-picture {
    position: absolute;
    inset-inline-start: 0;
    top: 0.15em;
    display: flex;
    width: var(--bullet-icon, 22px);
  }

  .media-text__bullet-picture img {
    width: 100%;
    height: auto;
  }

  @media (min-width: 768px) {
    /* Beide Spalten beginnen oben wie live; zentriert wird in der Spalte, nicht die Spalte selbst. */
    /* Wie live teilen Bild und Text die Breite ohne Gasse; der Text hält seinen Abstand zum Bild selbst. */
    .media-text__split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0;
    }

    .media-text__content {
      padding-inline-start: var(--space-10, 40px);
    }

    .media-text__split--flip .media-text__content {
      padding-inline: 0 var(--space-10, 40px);
    }

    .media-text__media {
      display: grid;
      align-content: center;
    }


    .media-text__split--wide {
      grid-template-columns: 3fr 2fr;
    }

    .media-text__split--flip .media-text__media {
      order: 2;
    }

    /* Ohne Bild trägt der Text die ganze Breite, wie live. */
    .media-text__split--solo {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SECTION:section-image-with-text */

/* START_SECTION:section-marquee (INDEX:66) */
.marquee-row {
    padding-block: var(--space-3, 12px) var(--section-space, 56px);
  }

  .marquee-row--top-line {
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .marquee-row--bottom-line {
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .marquee-row__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .marquee-row--caps {
    text-transform: uppercase;
  }

  .marquee-row__item {
    flex: 0 0 auto;
    margin-inline-end: var(--space-6, 24px);
    white-space: nowrap;
  }

  .marquee-row__text > :is(h2, h3, p) {
    margin: 0;
    font-size: var(--text-xs, 0.75rem);
  }

  .marquee-row__item--image .c-image {
    width: auto;
    height: var(--logo-height, 50px);
  }

  @media (min-width: 768px) {
    .marquee-row__text > :is(h2, h3, p) {
      font-size: var(--text-sm, 0.875rem);
    }
  }

  .marquee-row--sized .marquee-row__text > :is(h2, h3, p) {
    font-size: var(--marquee-size-mobile, var(--marquee-size));
    line-height: 1.5;
  }

  @media (min-width: 768px) {
    .marquee-row--sized .marquee-row__text > :is(h2, h3, p) {
      font-size: var(--marquee-size, var(--marquee-size-mobile));
    }
  }
/* END_SECTION:section-marquee */

/* START_SECTION:section-newsletter (INDEX:67) */
.newsletter-section {
    padding-block: var(--section-space, 56px);
  }

  .newsletter-section__inner {
    max-width: 640px;
    margin-inline: auto;
    text-align: center;
  }

  .newsletter-section__heading {
    margin: 0;
  }

  .newsletter-section__text {
    margin-top: var(--space-3, 12px);
  }

  .newsletter-section__form {
    margin-top: var(--space-6, 24px);
  }

  .newsletter-section__form .field--inline {
    max-width: 420px;
    margin-inline: auto;
  }

  /* Split: text on the left, the form on the right from 768 px; narrower both stand left, field and button one under the other. */
  .newsletter-section--split .newsletter-section__inner {
    max-width: none;
    text-align: start;
  }

  .newsletter-section--split .newsletter-section__form .field--inline {
    flex-direction: column;
    align-items: stretch;
    max-width: none;
  }

  @media (min-width: 768px) {
    .newsletter-section--split .newsletter-section__inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: center;
      gap: 0;
    }

    /* Wie live teilen Text und Formular die Breite ohne Gasse; der Text hält seinen Abstand zum Formular selbst. */
    .newsletter-section--split .newsletter-section__copy {
      padding-inline-end: var(--page-gutter);
    }

    .newsletter-section--split .newsletter-section__form {
      margin-top: 0;
    }

    .newsletter-section--split .newsletter-section__form .field--inline {
      flex-direction: row;
    }

    .newsletter-section--split .newsletter-section__form .field__input {
      flex: 1 1 0;
    }

    .newsletter-section--split .newsletter-section__form .button {
      flex: 1 1 0;
    }
  }
/* END_SECTION:section-newsletter */

/* START_SECTION:section-overlapping-images (INDEX:68) */
.overlap {
    --overlap-offset: calc(var(--space-12, 48px) * 2.5);
  }

  /* Without a padding of the template the section keeps the spacing scale of the page; with one, section-padding (compat.css) spaces it. */
  .overlap:not(.section-padding) {
    padding-block: var(--section-space, 56px);
  }

  .overlap__split {
    display: grid;
    gap: var(--space-8, 32px);
  }

  /* Zwei gleich breite Bilder nebeneinander: das erste tiefer und vorn, das zweite hoch und dahinter, um einen Versatz überlappt. */
  .overlap__media {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .overlap__picture {
    flex: none;
    width: 50%;
    border-radius: var(--radius-2xl, 24px);
    overflow: hidden;
  }

  .overlap__picture--first {
    position: relative;
    z-index: 1;
    margin-top: var(--overlap-offset);
  }

  .overlap__picture--second {
    margin-left: -40%;
  }

  .overlap__picture:only-child {
    width: 100%;
    margin: 0;
  }

  .overlap__heading {
    margin: 0 0 var(--space-6, 24px);
    font-size: var(--text-4xl, 2.25rem);
    font-weight: 400;
    line-height: 1.1;
  }

  .overlap__heading strong {
    font-weight: inherit;
  }

  .overlap__text {
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.6;
  }

  @media (min-width: 768px) {
    .overlap__split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: center;
      gap: var(--space-12, 48px);
    }

    /* Beide Bilder sind halb so breit wie ihre Fläche plus der halbe Versatz, das zweite schiebt sich um den ganzen darunter. */
    .overlap__picture {
      width: calc(50% + var(--overlap-offset) / 2);
      border-radius: calc(var(--radius-2xl, 24px) * 1.5);
    }

    .overlap__picture--second {
      margin-left: calc(-1 * var(--overlap-offset));
    }

    .overlap__picture:only-child {
      width: 100%;
    }

    /* The text stands on the left where the template says so; the pictures follow on the right. */
    .overlap--text-first .overlap__content {
      order: -1;
    }
  }

  /* Wie live: breite Gasse, der Text höchstens 600 px, die Bilder höchstens so breit wie die Vorlage sagt, beide an der Gasse. */
  @media (min-width: 1024px) {
    .overlap__split {
      gap: calc(2 * var(--page-gutter));
    }

    .overlap__content {
      max-width: 600px;
    }

    .overlap__media {
      width: 100%;
      max-width: var(--overlap-width, none);
      margin-inline-start: auto;
    }

    .overlap--text-first .overlap__content {
      margin-inline-start: auto;
    }

    .overlap--text-first .overlap__media {
      margin-inline: 0 auto;
    }
  }
/* END_SECTION:section-overlapping-images */

/* START_SECTION:section-product (INDEX:69) */
/* Code aus dem Template bringt Icons ohne eigenes Stylesheet; sie stehen in einer Zeile wie live. */
  .featured-product__code svg {
    display: inline-block;
    margin: 0 var(--space-2, 8px) var(--space-2, 8px) 0;
    vertical-align: middle;
  }

  .featured-product {
    padding-block: var(--section-space, 56px);
  }

  .featured-product__split {
    display: grid;
    gap: var(--space-6, 24px);
  }

  .featured-product__content {
    display: grid;
    align-content: start;
    gap: var(--space-4, 16px);
  }

  .featured-product__title {
    margin: 0;
  }

  .featured-product__title a {
    color: inherit;
    text-decoration: none;
  }

  .featured-product__price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-3, 12px);
  }

  /* Wort und Preis sind ein Kind des Knopfs; der Preis steht in der Schrift des Knopfs. */
  .featured-product__button-label {
    min-width: 0;
    text-align: center;
  }

  .featured-product__button-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2, 8px);
    margin-left: var(--space-2, 8px);
  }

  .featured-product__button-price .c-price {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
  }

  .featured-product__button-price .c-price__compare {
    color: inherit;
  }

  /* Mit Streichpreis bricht der Knopf wie die Kaufbox der Produktseite um: Wort und Preis fließen als eine Zeile, der alte
     Preis rutscht als Ganzes darunter, wo die Zeile nicht reicht. */
  .featured-product__button-price:has(.c-price--sale),
  .featured-product__button-price:has(.c-price--sale) .c-price {
    display: contents;
  }

  .featured-product__saving {
    padding: 2px var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-inverse, #fff);
    background: var(--color-error-600, #555);
    border-radius: var(--radius-sm, 4px);
  }

  @media (min-width: 768px) {
    .featured-product__split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: start;
      gap: var(--space-10, 40px);
    }
  }

  /* Dieselbe Aufteilung wie die Produktseite, wo die Brand sie setzt. */
  @media (min-width: 900px) {
    .featured-product__split {
      grid-template-columns: var(--product-columns, repeat(2, minmax(0, 1fr)));
      gap: var(--product-gap, var(--space-10, 40px));
    }

    .featured-product__content {
      grid-template-columns: minmax(0, var(--product-info-max, 1fr));
    }
  }
/* END_SECTION:section-product */

/* START_SECTION:section-products-with-image (INDEX:70) */
.products-image {
    padding-block: var(--section-space, 56px);
    overflow-x: clip;
  }

  /* minmax(0, …): iOS Safari let the single track grow to the picture's own width, so the band and the row ran off the
     screen at the right. */
  .products-image__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6, 24px);
  }

  .products-image__split > * {
    min-width: 0;
  }

  .products-image__heading {
    margin: 0 0 var(--space-5, 20px);
  }

  /* Das Bild ist mobil ein flaches Band, die Überschrift liegt mittig darauf. */
  .products-image__media {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-md, 8px);
  }

  /* Height from the ratio alone: iOS Safari resolved height: 100% against the stretched grid area and showed the picture
     at full height, cut at the side. */
  .products-image__media picture {
    display: contents;
  }

  .products-image__media .c-image {
    width: 100%;
    height: auto;
    aspect-ratio: 2.15;
    object-fit: cover;
  }

  .products-image__heading--over {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: var(--space-4, 16px);
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 400;
    text-align: center;
  }

  /* Mobil fährt die Reihe seitlich bis an den Rand, die nächste Karte schneidet an wie live. */
  .products-image__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    gap: var(--space-5, 20px);
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }

  .products-image__list > li {
    scroll-snap-align: start;
  }

  /* Zwei Klassen, weil die Grundregel für Listen mit role="list" Rand und Polster auf null setzt. */
  .products-image .products-image__list {
    margin-inline-end: calc(50% - 50vw);
    padding-inline-end: calc(50vw - 50%);
  }

  .products-image__button {
    margin-top: var(--space-6, 24px);
  }

  @media (min-width: 768px) {
    /* Am Schreibtisch ist das Bild so hoch wie die Karten daneben, die Überschrift steht unten darauf. */
    .products-image__split {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: stretch;
      gap: var(--space-10, 40px);
    }

    .products-image__split--flip .products-image__media {
      order: 2;
    }

    .products-image__media {
      min-height: 320px;
    }

    .products-image__media .c-image {
      position: absolute;
      inset: 0;
      height: 100%;
      aspect-ratio: auto;
    }

    .products-image__heading--over {
      place-items: end center;
      padding-bottom: var(--space-10, 40px);
      font-size: var(--text-3xl, 1.875rem);
    }

    .products-image__list {
      grid-auto-flow: row;
      grid-template-columns: repeat(var(--row-columns, 2), minmax(0, 1fr));
      grid-auto-columns: auto;
      gap: var(--space-6, 24px) var(--space-4, 16px);
      overflow: visible;
    }

    .products-image .products-image__list {
      margin-inline-end: 0;
      padding-inline-end: 0;
    }
  }
/* END_SECTION:section-products-with-image */

/* START_SECTION:section-recommended-posts (INDEX:71) */
.recommended-posts {
    padding-block: var(--section-space, 56px);
  }

  .recommended-posts__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  @media (min-width: 768px) {
    .recommended-posts__list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
/* END_SECTION:section-recommended-posts */

/* START_SECTION:section-testimonials-with-images (INDEX:72) */
.review-shots {
    padding-block: var(--section-space, 56px);
  }

  .review-shots__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  /* Mobil ein Bild je Blick wie live: inline-Kacheln statt Flex, damit keine Zeile fünf Spalten trägt. */
  .review-shots .review-shots__list {
    display: block;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    list-style: none;
    scroll-snap-type: x mandatory;
  }

  .review-shots .review-shots__list > .review-shots__item {
    display: inline-block;
    width: 84%;
    margin-inline-end: var(--space-4, 16px);
    vertical-align: top;
    white-space: normal;
    scroll-snap-align: start;
  }

  .review-shots [data-slider-dots] {
    position: static;
    display: block;
    margin-top: var(--space-4, 16px);
    text-align: center;
  }

  .review-shots [data-slider-dot] {
    display: inline-block;
    margin-inline: var(--space-1, 4px);
    vertical-align: middle;
  }

  /* Die Einstellung ist Höhe je Breite wie live: 1,3 ist ein Hochformat. */
  .review-shots__item .c-image {
    aspect-ratio: 1 / var(--shot-ratio, 1);
    object-fit: cover;
    border-radius: var(--radius-md, 8px);
  }

  .review-shots__stars {
    margin: 0 0 var(--space-2, 8px);
    color: var(--color-brand-accent, #666);
  }

  @media (min-width: 768px) {
    .review-shots .review-shots__list {
      display: flex;
      gap: var(--space-6, 24px);
      white-space: normal;
    }

    .review-shots .review-shots__list > .review-shots__item {
      flex: 0 0 calc((100% - (var(--shot-columns, 5) - 1) * var(--space-6, 24px)) / var(--shot-columns, 5));
      width: auto;
      margin-inline-end: 0;
    }
  }
/* END_SECTION:section-testimonials-with-images */

/* START_SECTION:section-text (INDEX:74) */
.text-block {
    padding-block: var(--section-space, 56px);
  }

  .text-block--spaced {
    padding-block: calc(var(--text-block-top) * 0.6) calc(var(--text-block-bottom) * 0.6);
  }

  @media (min-width: 768px) {
    .text-block--spaced {
      padding-block: calc(var(--text-block-top) * 0.8) calc(var(--text-block-bottom) * 0.8);
    }
  }

  @media (min-width: 1024px) {
    .text-block--spaced {
      padding-block: var(--text-block-top) var(--text-block-bottom);
    }
  }

  .text-block--center {
    text-align: center;
  }

  .text-block__heading {
    margin: 0;
  }

  .text-block__subheading {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .text-block__text {
    margin-top: var(--space-4, 16px);
  }

  .text-block__button {
    margin-top: var(--space-6, 24px);
  }
/* END_SECTION:section-text */

/* START_SECTION:sh-trust-slider (INDEX:75) */
/* Nicht in voller Breite steht der Streifen wie live in 1200 px. */
  .trust-strip .trust-strip__box {
    max-width: calc(1200px + 2 * var(--page-gutter));
  }

  .trust-strip {
    padding-block: var(--space-5, 20px);
  }

  .trust-strip__heading {
    margin: 0 0 var(--trust-heading-space, var(--space-3, 12px));
    font-size: var(--trust-heading-size-mobile, var(--trust-heading-size, var(--text-sm, 0.875rem)));
    text-align: center;
    color: var(--trust-heading-color, var(--color-text-secondary, #666));
  }

  @media (min-width: 768px) {
    .trust-strip__heading {
      font-size: var(--trust-heading-size, var(--text-sm, 0.875rem));
    }
  }

  .trust-strip__run {
    position: relative;
  }

  /* Die Ränder blenden in die Fläche aus wie live. */
  .trust-strip__run--fade::before,
  .trust-strip__run--fade::after {
    content: '';
    position: absolute;
    inset-block: 0;
    z-index: 1;
    width: 100px;
    pointer-events: none;
  }

  .trust-strip__run--fade::before {
    inset-inline-start: 0;
    background: linear-gradient(to right, var(--color-bg-primary, #fff), transparent);
  }

  .trust-strip__run--fade::after {
    inset-inline-end: 0;
    background: linear-gradient(to left, var(--color-bg-primary, #fff), transparent);
  }

  .trust-strip__list {
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .trust-strip__list--grey {
    filter: grayscale(1);
  }

  .trust-strip__item {
    flex: 0 0 auto;
    width: var(--logo-mobile, 120px);
    margin-inline-end: var(--space-4, 16px);
  }

  @media (min-width: 768px) {
    .trust-strip__item {
      width: var(--logo-desktop, 140px);
      margin-inline-end: var(--space-5, 20px);
    }
  }
/* END_SECTION:sh-trust-slider */

/* CSS from snippet stylesheet tags */
/* START_SNIPPET:affiliate-badge (INDEX:76) */
.affiliate-badge {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-block: var(--space-3, 12px) var(--space-4, 16px);
    padding: var(--space-4, 16px);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-lg, 12px);
  }

  .affiliate-badge__avatar {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
  }

  .affiliate-badge__mark {
    flex: none;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: var(--color-text-inverse, #fff);
    background: var(--color-brand-primary, #444);
  }

  .affiliate-badge__avatar:not([hidden]) + .affiliate-badge__mark {
    display: none;
  }

  .affiliate-badge__mark .icon {
    width: 20px;
    height: 20px;
  }

  .affiliate-badge__body {
    min-width: 0;
  }

  .affiliate-badge__title {
    margin: 0;
    font-weight: 600;
  }

  .affiliate-badge__text {
    margin: var(--space-1, 4px) 0 0;
    font-size: var(--text-sm, 14px);
    color: var(--color-text-secondary, #555);
  }
/* END_SNIPPET:affiliate-badge */

/* START_SNIPPET:artboard-frames (INDEX:78) */
.artboard-frames {
    display: block;
  }

  .artboard-frames__frame--desktop {
    display: none;
  }

  /* Das <picture> um jedes gepresste Bild ist nur ein Träger: die Maße stehen am Bild des Artboards. */
  .artboard-frames picture {
    display: contents;
  }

  @media (min-width: 768px) {
    .artboard-frames__frame--mobile {
      display: none;
    }

    .artboard-frames__frame--desktop {
      display: block;
    }
  }

  .artboard-frames__fit {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
    aspect-ratio: var(--artboard-width) / var(--artboard-height);
  }

  /* Der Maßstab ohne Skript: tan(atan2(a, b)) macht aus zwei Längen eine Zahl, die scale() nimmt. */
  .artboard-frames__board {
    transform: scale(tan(atan2(100vw, calc(var(--artboard-width) * 1px))));
    transform-origin: top left;
  }

  /* GAP: Braucht ein Browser ohne tan()/atan2() einen eigenen Rückfall, oder genügt der unskalierte Ausschnitt? */
  /* Ab hier misst der Maßstab die Fläche statt des Fensters — ohne Container-Einheiten bleibt es beim Fenster. */
  @supports (width: 1cqw) {
    .artboard-frames__board {
      transform: scale(tan(atan2(100cqw, calc(var(--artboard-width) * 1px))));
    }
  }
/* END_SNIPPET:artboard-frames */

/* START_SNIPPET:article-card (INDEX:80) */
.article-card > * {
    margin-block: 0;
  }

  .article-card__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    margin-bottom: var(--space-4, 16px);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #eee);
  }

  .article-card__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .article-card__date {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .article-card__title {
    padding-block: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-xl, 1.25rem);
  }

  .article-card__title a {
    color: inherit;
    text-decoration: none;
  }

  .article-card__title a:hover {
    text-decoration: underline;
  }

  .article-card__text {
    font-size: var(--text-sm, 0.875rem);
  }
/* END_SNIPPET:article-card */

/* START_SNIPPET:article-cluster (INDEX:81) */
.article-cluster {
    margin-top: var(--space-10, 40px);
  }

  .article-cluster__heading {
    margin: 0 0 var(--space-4, 16px);
    font-size: var(--text-lg, 1.125rem);
  }

  .article-cluster__grid {
    display: grid;
    gap: var(--space-3, 12px);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .article-cluster__card {
    display: block;
    height: 100%;
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
    color: inherit;
    font-weight: 500;
    text-decoration: none;
  }
/* END_SNIPPET:article-cluster */

/* START_SNIPPET:article-crumbs (INDEX:83) */
.article-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1, 4px);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .article-crumbs__list li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
  }

  .article-crumbs__list a {
    color: inherit;
  }

  .article-crumbs__list .icon {
    width: 12px;
    height: 12px;
    transform: rotate(-90deg);
  }
/* END_SNIPPET:article-crumbs */

/* START_SNIPPET:article-recipe (INDEX:88) */
.article-recipe {
    display: grid;
    gap: var(--space-8, 32px);
    margin-block: var(--space-8, 32px);
  }

  .article-recipe h2 {
    margin: 0 0 var(--space-4, 16px);
    font-size: var(--text-2xl, 1.5rem);
  }

  .article-recipe__ingredients {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .article-recipe__ingredients li {
    display: flex;
    gap: var(--space-3, 12px);
    padding-block: var(--space-2, 8px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .article-recipe__amount {
    flex: 0 0 6rem;
    font-weight: 600;
  }

  .article-recipe__steps {
    display: grid;
    gap: var(--space-3, 12px);
    margin: 0;
    padding-left: var(--space-6, 24px);
  }

  .article-recipe__tip {
    padding: var(--space-5, 20px);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #eee);
  }

  .article-recipe__tip p {
    margin: 0;
  }
/* END_SNIPPET:article-recipe */

/* START_SNIPPET:c-about-hero (INDEX:136) */
.c-about-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    padding: 20px 0 40px;
  }

  .c-about-hero__text {
    display: grid;
    gap: 18px;
    justify-items: start;
  }

  .c-about-hero__eyebrow {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra);
  }

  .c-about-hero__heading {
    margin: 0;
    font-size: clamp(2.375rem, 4.6vw, 4rem);
    line-height: 1.03;
  }

  .c-about-hero__lead {
    display: grid;
    gap: 18px;
  }

  .c-about-hero__lead p {
    max-width: 520px;
    margin: 0;
    font-size: 1.0625rem;
  }

  .c-about-hero__figures {
    display: flex;
    gap: clamp(20px, 3vw, 40px);
    width: 100%;
    margin-top: 14px;
    padding-top: 22px;
    border-top: 1px solid var(--dkd-line, #ddd);
  }

  .c-about-hero__figures .c-page-figure b {
    font-size: clamp(1.625rem, 2.6vw, 2.125rem);
  }

  .c-about-hero__figures .c-page-figure span {
    font-size: 0.84375rem;
  }

  .c-about-hero__media {
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border-radius: 22px;
  }

  .c-about-hero__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 1000px) {
    .c-about-hero__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SNIPPET:c-about-hero */

/* START_SNIPPET:c-accordion-item (INDEX:137) */
.c-accordion-item {
    border-bottom: 1px solid var(--color-border-strong, #222);
  }

  .c-accordion-item__title {
    display: flex;
    align-items: center;
    min-height: 24px;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding-block: var(--space-4, 16px);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }

  .c-accordion-item__title::-webkit-details-marker {
    display: none;
  }

  .c-accordion-item__name {
    flex: 1 1 auto;
  }

  .c-accordion-item__label {
    flex: none;
    color: var(--color-text-secondary, #666);
    font-variant-numeric: tabular-nums;
  }

  .c-accordion-item__meta {
    flex: none;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: var(--color-text-secondary, #666);
  }

  .c-accordion-item__title .icon {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }

  .c-accordion-item[open] .c-accordion-item__title .icon {
    transform: rotate(45deg);
  }

  .c-accordion-item__text {
    padding-bottom: var(--space-5, 20px);
  }

  /* Wie live gleitet eine Antwort in 0,5 s auf und blendet in 1 s ein; ohne ::details-content springt sie wie zuvor. */
  @media (prefers-reduced-motion: no-preference) {
    .c-accordion-item {
      interpolate-size: allow-keywords;
    }

    .c-accordion-item::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: block-size 0.5s ease, opacity 1s ease, content-visibility 0.5s allow-discrete;
    }

    .c-accordion-item[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .c-accordion-item__title .icon {
      transition: none;
    }
  }
/* END_SNIPPET:c-accordion-item */

/* START_SNIPPET:c-accordion-media (INDEX:138) */
.c-accordion-media {
    padding-block: var(--space-12, 48px);
  }

  .c-accordion-media__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  .c-accordion-media__grid {
    display: grid;
    gap: var(--space-8, 32px);
  }

  .c-accordion-media__media {
    overflow: hidden;
    border-radius: var(--radius-xl, 16px);
  }

  @media (min-width: 900px) {
    .c-accordion-media__grid--media {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-12, 48px);
    }
  }
/* END_SNIPPET:c-accordion-media */

/* START_SNIPPET:c-alarm (INDEX:139) */
.c-alarm {
    padding-block: var(--section-space, 56px);
    scroll-margin-top: var(--space-8, 32px);
  }

  .c-alarm__panel {
    display: grid;
    gap: var(--space-6, 24px);
    padding: clamp(24px, 4vw, 48px);
    color: var(--color-text-primary, #222);
    background: var(--color-dkd-rosa);
    border-radius: 18px;
  }

  .c-alarm__sign {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin-bottom: var(--space-4, 16px);
    color: var(--color-text-primary, #222);
    background: var(--color-card, #fff);
    border-radius: 50%;
  }

  .c-alarm__sign .icon {
    width: 22px;
    height: 22px;
  }

  .c-alarm__eyebrow {
    margin: 0 0 var(--space-2, 8px);
    font-size: 0.78125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-dkd-weinrot);
  }

  .c-alarm__heading {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(1.625rem, 2.8vw, var(--text-3xl, 2rem));
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-wrap: balance;
  }

  .c-alarm__call {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-6, 24px);
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-inverse, #222);
    border-color: var(--color-bg-inverse, #222);
  }

  .c-alarm__call .icon {
    width: 18px;
    height: 18px;
  }

  .c-alarm__text {
    min-width: 0;
    font-size: var(--text-base, 1rem);
    line-height: 1.55;
  }

  .c-alarm__text > :first-child {
    margin-top: 0;
  }

  .c-alarm__text > :last-child {
    margin-bottom: 0;
  }

  /* Gruppen-Titel der Warnzeichen („Sofort handeln bei:") als Label, die Zeichen darunter als Liste zwischen
     Haarlinien direkt auf der Fläche: keine weißen Kästen, die Hierarchie kommt aus Schrift und Linie. */
  .c-alarm__text h3 {
    margin: var(--space-8, 32px) 0 var(--space-2, 8px);
    font-family: var(--font-body, sans-serif);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--color-text-primary, #222);
  }

  .c-alarm__text :is(ul, ol) {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-alarm__text li {
    position: relative;
    padding: 14px 0 14px 28px;
    border-bottom: 1px solid var(--color-border-default, #ccc);
  }

  .c-alarm__text li:first-child {
    border-top: 1px solid var(--color-border-default, #ccc);
  }

  /* Ein Punkt in tiefem Petrol statt des Listenpunkts; Schmuck, kein Text. */
  .c-alarm__text li::before {
    content: '';
    position: absolute;
    top: 23px;
    left: 4px;
    width: 8px;
    height: 8px;
    background: var(--color-bg-inverse, #222);
    border-radius: 50%;
  }

  .c-alarm__text p {
    margin: var(--space-5, 20px) 0 0;
    font-weight: 700;
  }

  .c-alarm__note {
    max-width: 72ch;
    margin: var(--space-4, 16px) auto 0;
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
    text-align: center;
    color: var(--color-text-secondary, #555);
  }

  @media (min-width: 990px) {
    .c-alarm__panel {
      grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
      gap: var(--space-12, 48px);
      align-items: start;
    }
  }
/* END_SNIPPET:c-alarm */

/* START_SNIPPET:c-answer-article (INDEX:140) */
.c-answer-article__byline {
    margin: var(--space-4, 16px) auto 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-answer-article */

/* START_SNIPPET:c-article-row (INDEX:141) */
.c-article-row {
    padding-top: var(--section-space, 80px);
    padding-bottom: 20px;
  }

  .c-article-row__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
  }

  .c-article-row__heading {
    margin: 10px 0 0;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  .c-article-row__lead {
    max-width: 620px;
    margin: 12px 0 0;
  }

  .c-article-row__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-article-teaser {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
  }

  .c-article-teaser > * {
    margin: 0;
  }

  .c-article-teaser__media {
    aspect-ratio: 16 / 10;
    margin-bottom: 8px;
    overflow: hidden;
    background: var(--color-card, #fff);
    border-radius: 6px;
  }

  .c-article-teaser__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
  }

  .c-article-teaser__meta {
    font-size: 0.78125rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .c-article-teaser__title {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .c-article-teaser__link {
    color: inherit;
    text-decoration: none;
  }

  .c-article-teaser__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  .c-article-teaser__link:focus-visible {
    outline: none;
  }

  .c-article-teaser__link:focus-visible::after {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .c-article-teaser__text {
    font-size: 0.90625rem;
  }

  @media (hover: hover) {
    .c-article-teaser:hover .c-image {
      transform: scale(1.03);
    }

    .c-article-teaser:hover .c-article-teaser__title {
      text-decoration: underline;
      text-decoration-color: color-mix(in srgb, var(--color-brand-highlight, #999) 45%, transparent);
      text-decoration-thickness: 1px;
      text-underline-offset: 5px;
    }
  }

  /* On tablet and phone the cards lie in one row that is swiped, edge to edge (.artikel of the draft). */
  @media (max-width: 1000px) {
    .c-article-row__head {
      flex-direction: column;
      align-items: flex-start;
    }

    .c-article-row .c-article-row__list {
      display: flex;
      gap: 16px;
      margin-inline: calc(-1 * var(--page-gutter, 24px));
      padding-inline: var(--page-gutter, 24px);
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-inline: var(--page-gutter, 24px);
      scrollbar-width: none;
    }

    .c-article-row__list::-webkit-scrollbar {
      display: none;
    }

    .c-article-teaser {
      flex: 0 0 78%;
      scroll-snap-align: start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-article-teaser__media .c-image {
      transition: none;
    }
  }
/* END_SNIPPET:c-article-row */

/* START_SNIPPET:c-author-card (INDEX:143) */
.c-author-card {
    display: flex;
    gap: var(--space-4, 16px);
    align-items: flex-start;
    margin-top: var(--space-10, 40px);
    padding: var(--space-5, 20px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
  }

  .c-author-card__portrait {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
  }

  .c-author-card__body {
    display: grid;
    gap: var(--space-1, 4px);
  }

  .c-author-card__name {
    margin: 0;
    font-weight: 600;
  }

  .c-author-card__text,
  .c-author-card__reviewed {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-author-card */

/* START_SNIPPET:c-back-in-stock (INDEX:144) */
.c-back-in-stock__title {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-base, 1rem);
  }

  .c-back-in-stock__consent {
    display: flex;
    align-items: flex-start;
    min-height: 24px;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
  }
/* END_SNIPPET:c-back-in-stock */

/* START_SNIPPET:c-badge (INDEX:145) */
.c-badge {
    display: block;
    flex: none;
    width: var(--badge-size, 120px);
    aspect-ratio: 1;
  }

  .c-badge svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  .c-badge__shape {
    fill: var(--badge-bg, var(--color-brand-accent, #eee));
  }

  .c-badge__ink {
    color: var(--badge-color, var(--color-text-primary, #222));
    fill: currentColor;
  }

  .c-badge__fill {
    fill: currentColor;
  }

  .c-badge__line {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .c-badge__stars {
    fill: var(--badge-star, currentColor);
  }

  /* Auf einem Produktbild: oben rechts, leicht gedreht, Gelb (.karten-badge des Entwurfs). */
  .c-badge--card {
    position: absolute;
    top: 6%;
    right: 6%;
    z-index: 1;
    --badge-size: 34%;
    --badge-bg: var(--color-dkd-gelb, #eee);
    transform: rotate(6deg);
  }

  /* Auf dem großen Bild des Hero (.bild-badge des Entwurfs). */
  .c-badge--hero {
    position: absolute;
    top: 28px;
    right: 28px;
    --badge-size: 128px;
    transform: rotate(8deg);
  }
/* END_SNIPPET:c-badge */

/* START_SNIPPET:c-benefit-list (INDEX:146) */
.c-benefit-list {
    padding-block: var(--block-space, var(--space-8, 32px));
  }

  .c-benefit-list--dense {
    padding-block: var(--space-2, 8px);
  }

  /* Fast ohne Luft und eine Stufe kleiner — sonst rutscht der Kaufknopf unter die Falz. */
  .c-benefit-list--tight {
    padding-block: 0;
  }

  .c-benefit-list--tight .c-benefit-list__items {
    gap: var(--space-1, 4px);
  }

  .c-benefit-list--tight .c-benefit {
    font-size: var(--text-sm, 0.875rem);
  }

  .c-benefit-list--tight .c-benefit--mark {
    padding-inline-start: 32px;
  }

  .c-benefit-list--dense .c-benefit-list__items {
    grid-template-columns: repeat(auto-fit, minmax(140px, auto));
    gap: var(--space-1, 4px) var(--space-4, 16px);
  }

  .c-benefit-list--dense .c-benefit {
    font-size: var(--text-sm, 0.875rem);
  }

  .c-benefit-list--dense .c-benefit--icon,
  .c-benefit-list--dense .c-benefit--mark {
    padding-inline-start: 28px;
  }

  .c-benefit-list--dense .c-benefit__icon {
    width: 20px;
    height: 20px;
  }

  .c-benefit-list--dense .c-benefit__mark .icon {
    width: 16px;
    height: 16px;
  }

  .c-benefit-list__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  .c-benefit-list__items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-4, 16px) var(--space-6, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Zeichen und Text stehen nicht in einem Flex-Kasten nebeneinander, sondern das Zeichen in der Rinne
     der Zeile — so bleibt eine Liste eine Spalte und wird nicht als Raster gemessen. */
  .c-benefit {
    position: relative;
    font-weight: 500;
  }

  .c-benefit--icon {
    padding-inline-start: 64px;
  }

  /* Eine Abschnitts-Zeile mit Symbol steht wie live: halbfett, eine Stufe kleiner als der Fließtext — und mit
     einem Symbol, das seinen eigenen Weißraum mitbringt (live 44 px auf dem Telefon, 92 px am Schreibtisch).
     Die Rinne gilt nur der Zeile, die das Symbol neben sich trägt; gestapelt steht es über dem Text. */
  .c-benefit-list:not(.c-benefit-list--dense):not(.c-benefit-list--tight) .c-benefit--icon {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }

  .c-benefit-list:not(.c-benefit-list--dense):not(.c-benefit-list--tight) .c-benefit__icon:not(.c-benefit__icon--wide) {
    width: 44px;
    height: 44px;
  }

  /* Das Symbol steht in der Rinne und liegt damit außerhalb des Flusses: ohne Mindesthöhe legen sich zwei Zeilen übereinander. */
  .c-benefit-list:not(.c-benefit-list--dense):not(.c-benefit-list--tight) .c-benefit-list__items:not(.c-benefit-list__items--stacked) .c-benefit--icon {
    padding-inline-start: 60px;
    min-height: 44px;
  }

  .c-benefit-list:not(.c-benefit-list--dense):not(.c-benefit-list--tight) .c-benefit-list__items:not(.c-benefit-list__items--stacked) .c-benefit__icon:not(.c-benefit__icon--wide) {
    top: 50%;
    transform: translateY(-50%);
  }

  @media (min-width: 768px) {
    .c-benefit-list:not(.c-benefit-list--dense):not(.c-benefit-list--tight) .c-benefit__icon:not(.c-benefit__icon--wide) {
      width: 88px;
      height: 88px;
    }

    .c-benefit-list:not(.c-benefit-list--dense):not(.c-benefit-list--tight) .c-benefit-list__items:not(.c-benefit-list__items--stacked) .c-benefit--icon {
      padding-inline-start: 104px;
      min-height: 88px;
    }
  }

  .c-benefit--mark {
    padding-inline-start: 36px;
  }

  .c-benefit__icon,
  .c-benefit__mark {
    position: absolute;
    inset-inline-start: 0;
    top: 0;
  }

  .c-benefit__icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
  }

  /* Ein Band aus Gesichtern ist kein Symbol: es behält sein Verhältnis und steht in seiner eigenen Breite. */
  .c-benefit__icon--wide {
    width: auto;
    max-width: 160px;
    height: 34px;
  }

  /* Der Haken ist größer als seine Zeile hoch ist: ohne den Versatz hinge er unter der ersten Zeile. */
  .c-benefit__mark {
    top: -3px;
    color: var(--color-text-primary, #222);
  }

  /* Ein dünner Haken liest sich als Grau; live steht dort ein fetter schwarzer, rund 17 px breit. */
  .c-benefit__mark .icon {
    display: block;
    width: 26px;
    height: 26px;
    stroke-width: 3.4;
  }

  /* Gestapelt steht das Zeichen über dem Text und damit wieder im Fluss. */
  .c-benefit-list__items--stacked .c-benefit {
    padding-inline-start: 0;
    text-align: center;
  }

  .c-benefit-list__items--stacked .c-benefit__icon,
  .c-benefit-list__items--stacked .c-benefit__mark {
    position: static;
    margin: 0 auto var(--space-3, 12px);
  }

  .c-benefit-list__items--start .c-benefit {
    text-align: start;
  }

  .c-benefit-list__items--start .c-benefit__icon,
  .c-benefit-list__items--start .c-benefit__mark {
    margin-inline: 0;
  }

  .c-benefit__text {
    margin: 0;
  }
/* END_SNIPPET:c-benefit-list */

/* START_SNIPPET:c-brand-facts-page (INDEX:148) */
.c-brand-facts {
    padding-block: var(--space-12, 48px) 0;
  }

  .c-brand-facts__heading {
    margin: 0 0 var(--space-3, 12px);
  }

  .c-brand-facts__lead {
    margin: 0 0 var(--space-6, 24px);
    color: var(--color-text-secondary, #666);
  }

  .c-brand-facts__list {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .c-brand-facts__list > div {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--space-2, 8px) var(--space-6, 24px);
    padding-block: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .c-brand-facts__list dt {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-brand-facts__list dd {
    margin: 0;
  }
/* END_SNIPPET:c-brand-facts-page */

/* START_SNIPPET:c-bundle-box (INDEX:149) */
.c-bundle-box {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 56px;
    align-items: start;
    padding-block: var(--section-space, 80px);
  }

  .c-bundle-box__picture {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-dkd-papier, var(--color-bg-secondary, #f4f4f4));
    border-radius: 6px;
  }

  .c-bundle-box__picture[hidden] {
    display: none;
  }

  .c-bundle-box__picture > .c-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .c-bundle-box__picture .c-bundle-box__stamp {
    --badge-size: 24%;
  }

  /* "Geprüft und gepackt von" with the logo of the partner (.pdp-logo of the draft). */
  .c-bundle-box__partner {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    display: grid;
    gap: 3px;
    width: clamp(120px, 26%, 170px);
    padding: 8px 12px 10px;
    background: var(--color-card, #fff);
    border-radius: 12px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text-primary, #222) 10%, transparent);
  }

  .c-bundle-box__partner small {
    font-size: 0.59375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  /* The list reset of the core (ul[role='list']) weighs more than one class. */
  .c-bundle-box__gallery .c-bundle-box__thumbs {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
  }

  .c-bundle-box__thumb {
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--dkd-tile, var(--color-bg-secondary, #f4f4f4));
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.15s;
  }

  .c-bundle-box__thumb .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-bundle-box__thumb[aria-pressed='true'] {
    border-color: var(--color-text-primary, #222);
  }

  @media (hover: hover) {
    .c-bundle-box__thumb:hover {
      border-color: var(--dkd-line, var(--color-border-default, #ddd));
    }

    .c-bundle-box__thumb[aria-pressed='true']:hover {
      border-color: var(--color-text-primary, #222);
    }
  }

  .c-bundle-box__thumb:focus-visible {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-bundle-box__buy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
  }

  .c-bundle-box__buy > * {
    margin: 0;
  }

  .c-bundle-box__heading {
    font-size: clamp(2rem, 3.4vw, 2.875rem);
    line-height: 1.05;
  }

  .c-bundle-box__heading a {
    color: inherit;
    text-decoration: none;
  }

  .c-bundle-box__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 0.875rem;
  }

  .c-bundle-box__rating b {
    font-weight: 600;
  }

  .c-bundle-box__rating a {
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .c-bundle-box__parts {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--dkd-line, var(--color-border-default, #ddd));
  }

  .c-bundle-box__sum {
    display: grid;
    gap: 8px;
  }

  .c-bundle-box__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
  }

  /* line-height normal: the font shorthand of .summe .gross in the draft resets it. */
  .c-bundle-box__price {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.625rem;
    font-weight: 500;
    line-height: normal;
  }

  .c-bundle-box__chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    margin: 0;
  }

  .c-bundle-box__chip {
    padding: 5px 10px;
    font-size: 0.78125rem;
    background: var(--color-brand-accent, #eee);
    border-radius: 99px;
  }

  .c-bundle-box__chip--quiet {
    background: var(--dkd-tile, var(--color-bg-secondary, #f4f4f4));
  }

  .c-bundle-box__form {
    margin: 0;
  }

  .c-bundle-box__delivery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    font-size: 0.8125rem;
  }

  .c-bundle-box__delivery > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .c-bundle-box__available {
    color: var(--color-status-available, #222);
  }

  /* The green dot breathes like the draft; with reduced motion it stands still. */
  .c-bundle-box__available::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--color-dkd-gruenhell, currentColor);
    border-radius: 50%;
    animation: c-bundle-box-pulse 1.8s ease-out infinite;
  }

  @keyframes c-bundle-box-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-dkd-gruenhell, currentColor) 55%, transparent); }
    70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-dkd-gruenhell, currentColor) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-dkd-gruenhell, currentColor) 0%, transparent); }
  }

  .c-bundle-box__truck {
    flex: none;
    width: 20px;
    height: 20px;
  }

  /* 44 × 28 with 6 px between, centred, as .payments of the draft. */
  .c-bundle-box__payments .c-payment-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  .c-bundle-box__payments .c-payment-icons__item {
    margin: 0;
  }

  .c-bundle-box__payments .c-payment-icons__icon {
    width: 44px;
    height: 28px;
  }

  @media (max-width: 1000px) {
    .c-bundle-box {
      grid-template-columns: minmax(0, 1fr);
      gap: 32px;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-bundle-box__available::before {
      animation: none;
    }

    .c-bundle-box__thumb {
      transition: none;
    }
  }
/* END_SNIPPET:c-bundle-box */

/* START_SNIPPET:c-bundle-builder (INDEX:150) */
.c-bundle-builder {
    padding-block: var(--space-8, 32px) var(--space-12, 48px);
  }

  .c-bundle-builder__heading {
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--text-4xl, 2.25rem);
  }

  .c-bundle-builder__text,
  .c-bundle-builder__hint {
    max-width: 60ch;
    color: var(--color-text-secondary, #666);
  }

  .c-bundle-builder__sizes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: var(--space-4, 16px) 0;
    padding: 0;
    list-style: none;
  }

  .c-bundle-builder__layout {
    display: grid;
    gap: var(--space-8, 32px);
    margin-top: var(--space-6, 24px);
  }

  .c-bundle-builder__subheading {
    margin: 0 0 var(--space-4, 16px);
    font-size: var(--text-xl, 1.25rem);
  }

  .c-bundle-builder__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-bundle-builder__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
  }

  .c-bundle-builder__card .button {
    margin-top: auto;
  }

  .c-bundle-builder__card-media {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-lg, 12px);
  }

  .c-bundle-builder__card-media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-bundle-builder__card-title {
    margin: 0;
    font-size: var(--text-base, 1rem);
  }

  .c-bundle-builder__card-title a {
    color: inherit;
    text-decoration: none;
  }

  .c-bundle-builder__box {
    display: grid;
    gap: var(--space-3, 12px);
    align-content: start;
    padding: var(--space-5, 20px);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-xl, 16px);
  }

  .c-bundle-builder__box > * {
    margin-block: 0;
  }

  .c-bundle-builder__empty,
  .c-bundle-builder__note,
  .c-bundle-builder__progress {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-bundle-builder__lines {
    display: grid;
    gap: var(--space-2, 8px);
    padding: 0;
    list-style: none;
  }

  .c-bundle-builder__line {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .c-bundle-builder__line-title {
    flex: 1;
    min-width: 0;
    font-weight: 500;
  }

  .c-bundle-builder__stepper {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
  }

  .c-bundle-builder__line-quantity {
    min-width: 2ch;
    text-align: center;
  }

  .c-bundle-builder__meter {
    width: 100%;
    height: 8px;
    accent-color: var(--color-action-primary, #222);
  }

  .c-bundle-builder__total {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    font-size: var(--text-lg, 1.125rem);
  }

  .c-bundle-builder__total .c-price {
    justify-content: flex-end;
    text-align: right;
  }

  @media (min-width: 900px) {
    .c-bundle-builder__layout {
      grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
      align-items: start;
    }

    .c-bundle-builder__box {
      position: sticky;
      top: var(--space-6, 24px);
    }
  }
/* END_SNIPPET:c-bundle-builder */

/* START_SNIPPET:c-bundle-highlight (INDEX:151) */
.c-bundle-highlight {
    padding-block: var(--space-10, 40px) var(--space-5, 20px);
  }

  .c-bundle-highlight__grid {
    display: grid;
    gap: var(--space-8, 32px);
    align-items: start;
  }

  .c-bundle-highlight__media {
    display: block;
    overflow: hidden;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-xl, 16px);
  }

  .c-bundle-highlight__content > * {
    margin-block: 0;
  }

  .c-bundle-highlight__content > * + * {
    margin-top: var(--space-4, 16px);
  }

  .c-bundle-highlight__badge {
    display: inline-block;
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-sm, 4px);
  }

  .c-bundle-highlight__heading {
    font-size: var(--text-4xl, 2.25rem);
  }

  .c-bundle-highlight__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
  }

  .c-bundle-highlight__rating-value {
    font-weight: 600;
  }

  .c-bundle-highlight__rating-label,
  .c-bundle-highlight__note,
  .c-bundle-item__subtitle {
    color: var(--color-text-secondary, #666);
  }

  .c-bundle-highlight__items,
  .c-bundle-highlight__promises,
  .c-bundle-highlight__payments {
    padding: 0;
    list-style: none;
  }

  .c-bundle-item {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: var(--space-3, 12px);
    align-items: center;
    padding-block: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .c-bundle-item__image {
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .c-bundle-item__image .c-image {
    height: 100%;
    object-fit: cover;
  }

  .c-bundle-item__name {
    display: grid;
    font-size: var(--text-sm, 0.875rem);
  }

  .c-bundle-item__title {
    font-weight: 500;
  }

  .c-bundle-highlight__price {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
  }

  .c-bundle-highlight__price-label {
    font-size: var(--text-base, 1rem);
    font-weight: 400;
  }

  .c-bundle-highlight__note {
    margin-top: var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
  }

  .c-bundle-highlight__price-note {
    display: inline-block;
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .c-bundle-highlight__form .button {
    border-radius: var(--radius-md, 8px);
  }

  .c-bundle-highlight__promises,
  .c-bundle-highlight__payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
  }

  @media (min-width: 900px) {
    .c-bundle-highlight__grid {
      grid-template-columns: 48fr 52fr;
      gap: var(--space-12, 48px);
    }
  }
/* END_SNIPPET:c-bundle-highlight */

/* START_SNIPPET:c-bundle-part (INDEX:153) */
.c-bundle-part {
    display: grid;
    grid-template-columns: 52px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid var(--dkd-line, var(--color-border-default, #ddd));
  }

  .c-bundle-part__media {
    display: block;
    width: 52px;
    height: 52px;
    overflow: hidden;
    background: var(--dkd-tile, var(--color-bg-secondary, #f4f4f4));
    border-radius: 4px;
  }

  .c-bundle-part__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-bundle-part__body {
    min-width: 0;
  }

  .c-bundle-part__body b {
    display: block;
    font-weight: 500;
  }

  .c-bundle-part__body span {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .c-bundle-part__value {
    font-size: 0.9375rem;
    white-space: nowrap;
  }
/* END_SNIPPET:c-bundle-part */

/* START_SNIPPET:c-bundle-size (INDEX:155) */
.c-bundle-size {
    padding: 2px var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-full, 9999px);
  }

  .c-bundle-size[data-reached] {
    font-weight: 600;
    background: var(--color-brand-highlight, #eee);
    border-color: var(--color-border-strong, #222);
  }
/* END_SNIPPET:c-bundle-size */

/* START_SNIPPET:c-collection-head (INDEX:157) */
/* .brot, .k-kopf and .k-leiste of the draft: path 13 px, title up to 60 px, the pills of .w-filter. */
  .c-collection-head {
    display: grid;
  }

  .c-collection-head__crumbs {
    padding-top: 18px;
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }

  .c-collection-head__crumbs a {
    color: inherit;
    text-decoration: none;
  }

  .c-collection-head__crumbs a:hover {
    color: var(--color-text-primary, #222);
  }

  .c-collection-head__title {
    margin: 36px 0 0;
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    line-height: 1.04;
  }

  .c-collection-head__text {
    max-width: 640px;
    margin-top: 14px;
    font-size: 1.03125rem;
  }

  .c-collection-head__text > * {
    margin: 0;
  }

  .c-collection-head__bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 36px;
    margin-bottom: 32px;
  }

  .c-collection-head__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .c-collection-head__tab {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.55;
    color: var(--color-text-primary, #222);
    text-decoration: none;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 99px;
    transition: background 0.15s, border-color 0.15s;
  }

  .c-collection-head__tab span {
    margin-left: 2px;
    font-weight: 400;
    color: var(--dkd-quiet, #666);
  }

  .c-collection-head__tab:hover {
    border-color: var(--color-text-primary, #222);
  }

  .c-collection-head__tab:focus-visible {
    outline: 3px solid var(--color-brand-accent, #ccc);
    outline-offset: 2px;
  }

  .c-collection-head__tab[aria-current='page'] {
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-inverse, #222);
    border-color: var(--color-bg-inverse, #222);
  }

  .c-collection-head__tab[aria-current='page'] span {
    color: color-mix(in srgb, var(--color-text-inverse, #fff) 70%, transparent);
  }

  .c-collection-head__count {
    margin: 0;
    font-size: 0.84375rem;
    color: var(--dkd-quiet, #666);
  }

  @media (prefers-reduced-motion: reduce) {
    .c-collection-head__tab {
      transition: none;
    }
  }
/* END_SNIPPET:c-collection-head */

/* START_SNIPPET:c-community (INDEX:160) */
.c-community {
    margin-bottom: 60px;
  }

  .c-community__panel {
    display: grid;
    justify-items: center;
    gap: 18px;
    padding: 60px 24px;
    text-align: center;
    background: var(--color-bg-accent, #f4f4f4);
    border-radius: 18px;
  }

  .c-community__panel > * {
    margin: 0;
  }

  .c-community__mark {
    width: 30px;
    height: 30px;
  }

  .c-community__heading {
    max-width: 720px;
    font-size: clamp(1.625rem, 2.8vw, 2.25rem);
    line-height: 1.2;
  }

  .c-community__text {
    max-width: 620px;
  }

  /* The list reset of the core (ul[role='list']) weighs more than one class. */
  .c-community__panel .c-community__figures {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 48px;
    margin-top: 10px;
    padding: 0;
    list-style: none;
  }

  .c-community-figure {
    display: grid;
    justify-items: center;
    gap: 2px;
  }

  .c-community-figure__deco {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    margin-bottom: 8px;
  }

  .c-community-figure__faces .c-image,
  .c-community-figure__faces i {
    width: 36px;
    height: 36px;
    margin-left: -10px;
    border: 2px solid var(--color-bg-accent, #f4f4f4);
    border-radius: 50%;
  }

  .c-community-figure__faces > :first-child {
    margin-left: 0;
  }

  .c-community-figure__faces .c-image {
    object-fit: cover;
    object-position: 50% 25%;
  }

  .c-community-figure__faces i {
    display: grid;
    place-items: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 600;
    color: var(--color-text-inverse, #fff);
    background: var(--color-text-primary, #222);
  }

  .c-community-figure__play {
    width: 40px;
    background: var(--color-card, #fff);
    border-radius: 50%;
  }

  .c-community-figure__play svg {
    width: 24px;
    height: 24px;
  }

  .c-community-figure__stars {
    font-size: 1.0625rem;
    letter-spacing: 5px;
  }

  .c-community-figure__value {
    font-family: var(--font-heading, sans-serif);
    font-size: 2.125rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .c-community-figure__label {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  /* The messages stand in columns and fade out at the bottom; the link to all of them lies over the fade. */
  .c-community__panel .c-community__notes {
    width: 100%;
    max-height: 520px;
    margin-top: 28px;
    padding: 0;
    overflow: hidden;
    list-style: none;
    text-align: left;
    columns: 3 260px;
    column-gap: 20px;
    -webkit-mask-image: linear-gradient(black 55%, transparent);
    mask-image: linear-gradient(black 55%, transparent);
  }

  .c-community-note {
    display: grid;
    gap: 6px;
    margin-bottom: 20px;
    padding: 26px 28px;
    background: var(--color-card, #fff);
    border-radius: 22px;
    break-inside: avoid;
  }

  .c-community-note > * {
    margin: 0;
  }

  .c-community-note__stars {
    font-size: 0.75rem;
    letter-spacing: 3px;
  }

  .c-community-note__name {
    margin-bottom: 8px;
    font-size: 0.875rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .c-community-note__title {
    font-family: var(--font-body, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0;
  }

  .c-community-note__text {
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .c-community__more {
    position: relative;
    z-index: 1;
    margin-top: -30px;
  }
/* END_SNIPPET:c-community */

/* START_SNIPPET:c-comparison-table (INDEX:162) */
.c-comparison-table {
    padding-block: var(--block-space, var(--section-space, 56px));
  }

  .c-comparison-table__heading {
    margin: 0 0 var(--space-4, 16px);
    text-align: center;
  }

  .c-comparison-table__text {
    margin: 0 0 var(--space-8, 32px);
    text-align: center;
    color: var(--color-text-secondary, #666);
  }

  /* Zwei Tafeln nebeneinander, keine Tabelle mit Linien: die Spalte ist die Aussage, die Zeile nur ihr Inhalt. */
  .c-comparison-table__table,
  .c-comparison-table__table thead,
  .c-comparison-table__table tbody {
    display: block;
    width: 100%;
  }

  .c-comparison-table__table thead tr,
  .c-comparison-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-comparison-table__head {
    padding: var(--space-8, 32px) var(--space-8, 32px) var(--space-6, 24px);
    text-align: center;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    color: var(--color-text-primary, #222);
  }

  .c-comparison-table__head--ours {
    background: var(--color-brand-accent, #eee);
  }

  .c-comparison-row__cell {
    position: relative;
    padding: var(--space-4, 16px) var(--space-8, 32px);
    vertical-align: top;
    color: var(--color-text-secondary, #666);
  }

  /* Die Trennlinie steht in der Spalte, nicht quer über beide: sie endet, wo der Innenabstand beginnt. */
  .c-comparison-row + .c-comparison-row .c-comparison-row__cell::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: var(--space-8, 32px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .c-comparison-row__cell--ours {
    background: var(--color-brand-accent, #eee);
    font-weight: 500;
    color: var(--color-text-primary, #222);
  }

  .c-comparison-table__table tbody tr:last-child .c-comparison-row__cell {
    padding-bottom: var(--space-8, 32px);
  }

  .c-comparison-row__entry {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  /* A flex child sizes to its longest word unless it may shrink; break-word splits one only when it truly does not fit. */
  .c-comparison-row__entry > span:last-child {
    min-width: 0;
    overflow-wrap: break-word;
  }

  .c-comparison-row__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full, 999px);
  }

  .c-comparison-row__mark--yes {
    color: var(--color-text-inverse, #fff);
    background: var(--color-brand-primary, #555);
  }

  .c-comparison-row__mark--no {
    color: var(--color-text-secondary, #666);
    background: var(--color-bg-secondary, #eee);
  }

  .c-comparison-row__mark .icon {
    width: 14px;
    height: 14px;
  }

  /* Auf dem Telefon stehen die beiden Tafeln untereinander: order legt jede Seite zusammen. */
  @media (max-width: 599px) {
    .c-comparison-table__table {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      border: 0;
      border-radius: 0;
      overflow: visible;
    }

    .c-comparison-table__table thead,
    .c-comparison-table__table tbody,
    .c-comparison-table__table thead tr,
    .c-comparison-row {
      display: contents;
    }

    .c-comparison-table__head {
      order: 3;
      margin-top: var(--space-6, 24px);
      padding-inline: var(--space-6, 24px);
      border-radius: var(--radius-2xl, 24px) var(--radius-2xl, 24px) 0 0;
      background: var(--color-bg-secondary, #f4f4f4);
    }

    .c-comparison-row__cell {
      order: 4;
      padding-inline: var(--space-6, 24px);
      background: var(--color-bg-secondary, #f4f4f4);
    }

    .c-comparison-row + .c-comparison-row .c-comparison-row__cell::before {
      inset-inline: var(--space-6, 24px);
    }

    .c-comparison-table__head--ours {
      order: 1;
      margin-top: 0;
      background: var(--color-brand-accent, #eee);
    }

    .c-comparison-row__cell--ours {
      order: 2;
      background: var(--color-brand-accent, #eee);
    }

    .c-comparison-row:last-child .c-comparison-row__cell {
      border-radius: 0 0 var(--radius-2xl, 24px) var(--radius-2xl, 24px);
    }
  }
/* END_SNIPPET:c-comparison-table */

/* START_SNIPPET:c-contact-form (INDEX:163) */
.c-contact-form {
    padding-block: var(--space-10, 40px);
  }

  .c-contact-form__heading {
    font-size: var(--text-3xl, 1.875rem);
  }

  .c-contact-form__text {
    margin-bottom: var(--space-6, 24px);
  }

  .c-contact-form__message {
    margin: 0 0 var(--space-4, 16px);
    font-size: var(--text-base, 1rem);
  }

  .c-contact-form__message > * {
    margin: 0;
  }

  .c-contact-form__hint {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-contact-form__mark {
    margin-inline-start: 0.3em;
    color: var(--color-error-600, #555);
  }

  .c-contact-form__fields {
    display: grid;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-6, 24px);
  }

  .c-contact-form__body {
    padding-block: var(--space-3, 12px);
    resize: vertical;
  }
/* END_SNIPPET:c-contact-form */

/* START_SNIPPET:c-contact-line (INDEX:164) */
.c-contact-line {
    display: grid;
    gap: var(--space-3, 12px);
  }

  .c-contact-line__label {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 600;
  }

  /* Live ist das eine dünne graue Zeile, kein Knopf: der Weg zur Beratung soll den Kauf nicht überstimmen. */
  .c-contact-line__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    min-height: 48px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #222);
  }

  .c-contact-line__link .icon {
    width: 18px;
    height: 18px;
  }
/* END_SNIPPET:c-contact-line */

/* START_SNIPPET:c-content-carousel (INDEX:166) */
.c-content-carousel {
    padding-block: var(--space-12, 48px);
  }

  .c-content-carousel__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  .c-content-carousel__text {
    max-width: 56rem;
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
  }

  .c-content-carousel__list {
    display: grid;
    gap: var(--space-8, 32px);
    margin: var(--space-8, 32px) 0 0;
    padding: 0;
    list-style: none;
  }

  .c-content-card > * {
    margin-block: 0;
  }

  .c-content-card__media {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    margin-bottom: var(--space-5, 20px);
    background: var(--color-bg-secondary, #eee);
  }

  .c-content-card__media .c-image {
    height: 100%;
    object-fit: cover;
  }

  .c-content-card__title {
    font-size: var(--text-xl, 1.25rem);
  }

  .c-content-card__subline {
    padding-block: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-content-card__text {
    font-size: var(--text-sm, 0.875rem);
  }

  @media (min-width: 768px) {
    .c-content-carousel__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SNIPPET:c-content-carousel */

/* START_SNIPPET:c-content-cluster (INDEX:167) */
.c-content-cluster {
    display: grid;
    gap: var(--space-6, 24px);
    padding-block: var(--space-12, 48px);
  }

  .c-content-cluster__title,
  .c-content-cluster__text {
    margin: 0;
  }

  .c-content-cluster__text {
    max-width: 56rem;
    margin-top: var(--space-3, 12px);
    font-size: var(--text-lg, 1.125rem);
  }
/* END_SNIPPET:c-content-cluster */

/* START_SNIPPET:c-countdown (INDEX:168) */
.c-countdown {
    display: block;
    padding-block: var(--space-5, 20px);
  }

  .c-countdown__box {
    display: grid;
    justify-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-5, 20px);
    text-align: center;
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-xl, 16px);
  }

  .c-countdown__box > * {
    margin: 0;
  }

  .c-countdown__heading {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
  }

  .c-countdown__clock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4, 16px);
  }

  .c-countdown__part {
    display: grid;
    min-width: 64px;
  }

  .c-countdown__value {
    font-size: var(--text-3xl, 1.875rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
  }

  .c-countdown__unit {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-countdown__text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-countdown */

/* START_SNIPPET:c-course-teaser (INDEX:169) */
/* The tile ends 20 px above the foot of the page, which keeps its own 40 px (.w-kurs margin of the draft). */
  .c-course-teaser__tile {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 36px;
    align-items: center;
    margin: 40px 0 0;
    padding: 28px;
    color: inherit;
    text-decoration: none;
    background: var(--color-bg-accent, #eee);
    border-radius: 18px;
  }

  .c-course-teaser__media .c-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 10px;
  }

  .c-course-teaser__text {
    display: grid;
    gap: 10px;
    justify-items: start;
  }

  .c-course-teaser__heading {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.15;
  }

  .c-course-teaser__lead {
    max-width: 560px;
    margin: 0;
  }

  .c-course-teaser__tile:hover .text-link,
  .c-course-teaser__tile:focus-visible .text-link {
    background-size: calc(100% - 18px) 1px;
  }

  .c-course-teaser__tile:focus-visible {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  @media (max-width: 1000px) {
    .c-course-teaser__tile {
      grid-template-columns: minmax(0, 1fr);
      gap: 20px;
    }

  }
/* END_SNIPPET:c-course-teaser */

/* START_SNIPPET:c-divider (INDEX:170) */
.c-divider {
    padding-top: var(--divider-top, var(--space-6, 24px));
    padding-bottom: var(--divider-bottom, 0px);
  }

  .c-divider__line {
    margin: 0;
    border: 0;
    border-top: 1px solid var(--color-border-default, #ddd);
  }
/* END_SNIPPET:c-divider */

/* START_SNIPPET:c-dosage-table (INDEX:172) */
.c-dosage-table {
    padding-block: var(--block-space, var(--section-space, 56px));
  }

  .c-dosage-table__heading {
    margin: 0 0 var(--space-3, 12px);
  }

  .c-dosage-table__text {
    margin: 0 0 var(--space-6, 24px);
    color: var(--color-text-secondary, #666);
  }

  .c-dosage-table__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-xl, 16px);
  }

  .c-dosage-table__table {
    width: 100%;
    border-collapse: collapse;
  }

  .c-dosage-table__table th,
  .c-dosage-table__table td {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    text-align: left;
  }

  /* Auf dem Schirm eines Telefons bleibt die Tabelle in der Breite und bricht die Kopfzeile um; nichts
     darf zur Seite laufen, weil der Bezugswert sonst im Ruhezustand abgeschnitten ist. */
  @media (max-width: 599px) {
    .c-dosage-table__table {
      table-layout: fixed;
    }

    .c-dosage-table__table th,
    .c-dosage-table__table td {
      padding: var(--space-2, 8px) var(--space-2, 8px);
      font-size: var(--text-xs, 0.75rem);
      overflow-wrap: break-word;
    }

    .c-dosage-table__heading {
      font-size: var(--text-xl, 1.25rem);
    }

    .c-dosage-table__text {
      margin-bottom: var(--space-4, 16px);
      font-size: var(--text-sm, 0.875rem);
    }
  }

  .c-dosage-table__table thead th {
    background: var(--color-bg-secondary, #f4f4f4);
    font-weight: 500;
  }

  .c-dosage-table__table tbody th {
    font-weight: 500;
  }

  .c-dosage-table__table tbody tr + tr {
    border-top: 1px solid var(--color-border-default, #ddd);
  }
/* END_SNIPPET:c-dosage-table */

/* START_SNIPPET:c-faq (INDEX:177) */
.c-faq {
    padding-block: var(--block-space, var(--section-space, 56px));
  }

  .c-faq__heading {
    margin: 0 0 var(--space-6, 24px);
  }

  /* Ab der Breite eines kleinen Notebooks steht die Frage-Liste neben ihrer Überschrift, wie live:
     die Überschrift an der linken Seitenkante, die Zeilen über den Rest der Seitenbreite. */
  @media (min-width: 1024px) {
    .c-faq {
      display: grid;
      grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
      gap: var(--space-8, 32px);
      align-items: start;
    }

    .c-faq__heading {
      margin: 0;
    }
  }

  .c-faq-item {
    border-bottom: 1px solid var(--color-border-strong, #222);
  }

  .c-faq-item__table {
    width: 100%;
    margin-top: var(--space-3, 12px);
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
  }

  .c-faq-item__table th,
  .c-faq-item__table td {
    padding: var(--space-2, 8px);
    border: 1px solid var(--color-border-default, #ddd);
    text-align: left;
    vertical-align: top;
  }

  .c-faq-item__question {
    display: flex;
    align-items: center;
    min-height: 24px;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding-block: var(--space-3, 12px);
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }

  .c-faq-item__question::-webkit-details-marker {
    display: none;
  }

  .c-faq-item__question .icon {
    flex: none;
    width: 20px;
    height: 20px;
    transition: transform 0.3s ease;
  }

  .c-faq-item[open] .c-faq-item__question .icon {
    transform: rotate(45deg);
  }

  .c-faq-item__answer {
    padding-bottom: var(--space-5, 20px);
  }

  /* Wie live gleitet eine Antwort in 0,5 s auf und blendet in 1 s ein; ohne ::details-content springt sie wie zuvor. */
  @media (prefers-reduced-motion: no-preference) {
    .c-faq-item {
      interpolate-size: allow-keywords;
    }

    .c-faq-item::details-content {
      block-size: 0;
      overflow: hidden;
      opacity: 0;
      transition: block-size 0.5s ease, opacity 1s ease, content-visibility 0.5s allow-discrete;
    }

    .c-faq-item[open]::details-content {
      block-size: auto;
      opacity: 1;
    }
  }

  .c-faq-item__files {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-faq-item__file {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #222);
  }

  .c-faq-item__file-name {
    overflow-wrap: anywhere;
  }

  .c-faq-item__file-label {
    color: var(--color-text-secondary, #666);
  }

  @media (prefers-reduced-motion: reduce) {
    .c-faq-item__question .icon {
      transition: none;
    }
  }
/* END_SNIPPET:c-faq */

/* START_SNIPPET:c-first-aid (INDEX:178) */
.c-first-aid {
    padding-block: var(--section-space, 56px);
    scroll-margin-top: var(--space-8, 32px);
  }

  .c-first-aid__grid {
    display: grid;
    gap: var(--space-10, 40px);
  }

  /* Die Schritte sind die Liste des Artikels; die Gestalt macht daraus eine ruhige Zeitleiste: Petrol-Nummer, eine
     feine Linie zum nächsten Schritt, die Handlung in Tinte, die Erklärung leiser. Keine Kästen. */
  .c-first-aid__steps > :is(ol, ul) {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: dkd-step;
  }

  .c-first-aid__steps li {
    position: relative;
    max-width: 62ch;
    min-height: 40px;
    padding: 7px 0 var(--space-8, 32px) 64px;
    font-size: var(--text-base, 1rem);
    line-height: 1.6;
    color: var(--color-text-secondary, #555);
    counter-increment: dkd-step;
  }

  .c-first-aid__steps li:last-child {
    padding-bottom: 0;
  }

  .c-first-aid__steps li::before {
    content: counter(dkd-step);
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-action-primary-text, #fff);
    background: var(--color-action-primary, #222);
    border-radius: 50%;
  }

  /* Die Linie zum nächsten Schritt; Schmuck, kein Text. */
  .c-first-aid__steps li:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 48px;
    bottom: 8px;
    left: 19px;
    width: 2px;
    background: var(--color-dkd-himmel, #ccc);
    border-radius: 1px;
  }

  .c-first-aid__steps li strong {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 700;
    line-height: 1.45;
    color: var(--color-text-primary, #222);
  }

  /* Zwischentitel wie „Bei Säuglingen (< 1 Jahr):" führen eine Gruppe von Schritten an. */
  .c-first-aid__steps > h3 {
    margin: 0 0 var(--space-5, 20px);
    padding-bottom: var(--space-3, 12px);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-primary, #222);
    border-bottom: 1px solid var(--color-border-soft, #ddd);
  }

  .c-first-aid__steps > :is(ol, ul) + h3 {
    margin-top: var(--space-12, 48px);
  }

  .c-first-aid__steps > p {
    max-width: 62ch;
    margin: 0;
    line-height: 1.6;
    color: var(--color-text-secondary, #555);
  }

  .c-first-aid__steps > p strong {
    color: var(--color-text-primary, #222);
  }

  .c-first-aid__steps > :is(ol, ul) + p {
    margin-top: var(--space-10, 40px);
  }

  /* Ein Satz nach den Schritten steht als ruhiger Hinweis unter einer Haarlinie. */
  .c-first-aid__steps > :is(ol, ul) + p {
    padding-top: var(--space-5, 20px);
    border-top: 1px solid var(--color-border-soft, #ddd);
  }

  .c-first-aid__video-label {
    margin: 0 0 var(--space-3, 12px);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-text-link, #222);
  }

  /* Zwei Klassen: der Listen-Reset des Kerns (ul[role=list]) schlägt eine allein. */
  .c-first-aid .c-first-aid__clips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--space-6, 24px) var(--dkd-grid-gap, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* Ein einzelner Hochkant-Clip steht am Telefon nicht über die ganze Breite. */
  .c-first-aid .c-first-aid__clips:has(> .c-video-tile--portrait:only-child) {
    max-width: 260px;
  }

  @media (min-width: 990px) {
    .c-first-aid .c-first-aid__clips {
      grid-template-columns: minmax(0, 1fr);
      max-width: none;
    }

    .c-first-aid__grid--video {
      grid-template-columns: minmax(0, 1fr) 320px;
      align-items: start;
      gap: var(--space-12, 48px);
    }
  }
/* END_SNIPPET:c-first-aid */

/* START_SNIPPET:c-glossary-letter (INDEX:179) */
.c-glossary-letter {
    display: grid;
    gap: var(--space-2, 8px);
    padding-block: var(--space-8, 32px);
    border-top: 1px solid var(--color-border-default, #ccc);
    scroll-margin-top: var(--space-6, 24px);
  }

  .c-glossary-letter__letter {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.5rem, 5vw, var(--text-6xl, 4rem));
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--color-text-link, #222);
  }

  /* Zwei Klassen: der Listen-Reset des Kerns (ul[role=list]) schlägt eine allein. */
  .c-glossary-letter .c-glossary-letter__terms {
    display: grid;
    column-gap: var(--space-10, 40px);
    align-items: start;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 750px) {
    .c-glossary-letter {
      grid-template-columns: 120px minmax(0, 1fr);
      gap: var(--space-8, 32px);
      padding-block: var(--space-10, 40px);
    }

    .c-glossary-letter .c-glossary-letter__terms {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SNIPPET:c-glossary-letter */

/* START_SNIPPET:c-glossary-term (INDEX:180) */
.c-glossary-term {
    min-width: 0;
    border-bottom: 1px solid var(--color-border-soft, #ddd);
  }

  .c-glossary-term__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    min-height: 56px;
    padding-block: var(--space-3, 12px);
    list-style: none;
    cursor: pointer;
  }

  .c-glossary-term__summary::-webkit-details-marker {
    display: none;
  }

  .c-glossary-term__summary:focus-visible {
    outline: 3px solid var(--color-border-focus, currentColor);
    outline-offset: 2px;
    border-radius: var(--radius-sm, 4px);
  }

  .c-glossary-term__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    line-height: 1.35;
    color: var(--color-text-primary, #222);
    hyphens: auto;
  }

  /* Ein kleines Kennzeichen: zu diesem Thema gibt es eine eigene Seite „Was tun bei …". */
  .c-glossary-term__flag {
    flex: none;
    padding: 2px 10px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--color-bg-inverse, #222);
    background: var(--color-bg-accent, #eee);
    border-radius: var(--radius-full, 9999px);
  }

  .c-glossary-term__mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--color-text-link, #222);
    border: 1px solid var(--color-border-soft, #ddd);
    border-radius: 50%;
    transition: transform 0.25s ease, background-color 0.2s ease;
  }

  .c-glossary-term__mark .icon {
    width: 14px;
    height: 14px;
  }

  .c-glossary-term__details[open] .c-glossary-term__mark {
    background: var(--color-bg-accent, #eee);
    transform: rotate(45deg);
  }

  .c-glossary-term__body {
    padding: 0 0 var(--space-5, 20px);
  }

  .c-glossary-term__text {
    max-width: 62ch;
    font-size: var(--text-base, 1rem);
    line-height: 1.6;
    color: var(--color-text-secondary, #555);
  }

  .c-glossary-term__text > :last-child {
    margin-bottom: 0;
  }

  .c-glossary-term__link {
    display: inline-block;
    margin-top: var(--space-3, 12px);
    font-weight: 700;
    text-underline-offset: 4px;
  }

  @media (hover: hover) and (pointer: fine) {
    .c-glossary-term__summary:hover .c-glossary-term__name {
      color: var(--color-text-link, #222);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-glossary-term__mark {
      transition: none;
    }
  }
/* END_SNIPPET:c-glossary-term */

/* START_SNIPPET:c-glossary (INDEX:181) */
.c-glossary {
    padding-block: var(--space-6, 24px) var(--section-space, 56px);
  }

  .c-glossary__top {
    display: grid;
    gap: var(--space-6, 24px);
    margin-bottom: var(--space-10, 40px);
  }

  /* Zwei Klassen: der Listen-Reset des Kerns (ul[role=list]) schlägt eine allein. */
  .c-glossary .c-glossary__letters,
  .c-glossary .c-glossary__guides {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-glossary__letter-link {
    display: grid;
    place-items: center;
    min-width: 44px;
    height: 44px;
    padding-inline: 8px;
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    color: var(--color-text-link, #222);
    text-decoration: none;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-border-soft, #ddd);
    border-radius: var(--radius-sm, 8px);
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }

  .c-glossary__letter-link:focus-visible,
  .c-glossary__guide:focus-visible {
    outline: 3px solid var(--color-border-focus, currentColor);
    outline-offset: 2px;
  }

  .c-glossary__featured {
    padding: var(--space-5, 20px);
    background: var(--color-bg-accent, #eee);
    border-radius: var(--radius-lg, 12px);
  }

  .c-glossary__featured-label {
    margin: 0 0 var(--space-3, 12px);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-bg-inverse, #222);
  }

  .c-glossary__guide {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    font-weight: 700;
    color: var(--color-bg-inverse, #222);
    text-decoration: none;
    background: var(--color-card, #fff);
    border-radius: var(--radius-full, 9999px);
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  @media (hover: hover) and (pointer: fine) {
    .c-glossary__letter-link:hover {
      background: var(--color-bg-accent, #eee);
      border-color: var(--color-bg-accent, #eee);
    }

    .c-glossary__guide:hover {
      color: var(--color-action-primary-text, #fff);
      background: var(--color-action-primary, #222);
    }
  }

  @media (min-width: 990px) {
    .c-glossary__top {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      align-items: start;
      gap: var(--space-10, 40px);
    }

    .c-glossary__featured {
      padding: var(--space-6, 24px);
    }
  }
/* END_SNIPPET:c-glossary */

/* START_SNIPPET:c-help-form (INDEX:182) */
.c-help-form__tile {
    display: grid;
    gap: 18px;
    max-width: 840px;
    margin: 0 auto 88px;
    padding: clamp(24px, 4vw, 48px);
    background: var(--color-bg-secondary, #eee);
    border-radius: 22px;
  }

  .c-help-form__heading {
    margin: 0;
    font-size: clamp(1.625rem, 2.8vw, 2.25rem);
    line-height: 1.1;
  }

  .c-help-form__text {
    margin: 0;
  }

  .c-help-form__form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
  }

  .c-help-form__full {
    grid-column: 1 / -1;
  }

  .c-help-form__topics {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .c-help-form__label {
    display: block;
    padding: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-primary, #222);
  }

  .c-help-form__topics .c-help-form__label {
    margin-bottom: 6px;
  }

  .c-help-form__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .c-help-form__pill {
    position: relative;
    cursor: pointer;
  }

  .c-help-form__pill input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
  }

  .c-help-form__pill span {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    padding: 11px 16px;
    font: 500 0.875rem var(--font-body);
    color: var(--color-text-primary, #222);
    background: var(--color-card, #fff);
    border: 1px solid var(--color-dkd-kante);
    border-radius: 99px;
  }

  .c-help-form__pill input:checked + span {
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-inverse, #222);
    border-color: var(--color-bg-inverse, #222);
  }

  .c-help-form__pill input:focus-visible + span {
    outline: 3px solid var(--color-brand-accent, #ccc);
    outline-offset: 2px;
  }

  .c-help-form__field {
    display: grid;
    gap: 6px;
  }

  .c-help-form__field :is(input, textarea) {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 14px;
    font: inherit;
    /* 16 px: darunter zoomt iOS Safari beim Antippen in die Seite. */
    font-size: 1rem;
    color: var(--color-text-primary, #222);
    background: var(--color-card, #fff);
    border: 1px solid var(--color-dkd-kante);
    border-radius: 12px;
  }

  .c-help-form__field textarea {
    min-height: 140px;
    resize: vertical;
  }

  .c-help-form__field :is(input, textarea):focus-visible {
    outline: 3px solid var(--color-brand-accent, #ccc);
    outline-offset: 1px;
  }

  .c-help-form__button {
    justify-self: start;
  }

  .c-help-form__thanks,
  .c-help-form__error {
    grid-column: 1 / -1;
    margin: 0;
    padding: 14px 16px;
    font-weight: 500;
    border-radius: 12px;
  }

  .c-help-form__thanks {
    color: var(--color-dkd-gruen);
    background: var(--color-dkd-mint);
  }

  .c-help-form__error {
    color: var(--color-dkd-weinrot);
    background: var(--color-dkd-rosa);
  }

  .c-help-form__error > * {
    margin: 0;
  }

  .c-help-form__note {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }

  .c-help-form__note > * {
    margin: 0;
  }

  @media (max-width: 640px) {
    .c-help-form__form {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SNIPPET:c-help-form */

/* START_SNIPPET:c-help-group (INDEX:183) */
.c-help-group__inner {
    max-width: 840px;
    margin: 0 auto 44px;
  }

  .c-help-group:has(+ :not(.c-help-group)) .c-help-group__inner,
  .c-help-group:last-child .c-help-group__inner {
    margin-bottom: 64px;
  }

  .c-help-group__heading {
    margin: 0 0 6px;
    font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  }
/* END_SNIPPET:c-help-group */

/* START_SNIPPET:c-help-way (INDEX:184) */
.c-help-way {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 24px;
    background: var(--color-bg-secondary, #eee);
    border-radius: 18px;
  }

  .c-help-way > p {
    margin: 0;
  }

  .c-help-way__icon {
    width: 26px;
    height: 26px;
    fill: none;
    stroke: var(--color-text-primary, #222);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .c-help-way__title {
    font: 600 1.0625rem var(--font-heading);
    color: var(--color-text-primary, #222);
  }

  .c-help-way__text {
    font-size: 0.90625rem;
    color: var(--dkd-quiet, #666);
  }

  .c-help-way__link {
    font-weight: 600;
    color: var(--color-text-primary, #222);
    overflow-wrap: anywhere;
  }
/* END_SNIPPET:c-help-way */

/* START_SNIPPET:c-help-ways (INDEX:185) */
.c-help-ways .c-help-ways__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto 56px;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 1000px) {
    .c-help-ways .c-help-ways__list {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SNIPPET:c-help-ways */

/* START_SNIPPET:c-hero-carousel-slide (INDEX:186) */
.c-hero-carousel-slide {
    flex: 0 0 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 560px;
    scroll-snap-align: start;
  }

  /* The text starts where the content of the page starts (.innen of the draft), inside the inset beige tile. */
  .c-hero-carousel-slide__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 22px;
    min-width: 0;
    padding: 56px clamp(40px, 5vw, 80px) 56px max(32px, calc(max(24px, (100vw - 1320px) / 2 + 24px) - max(16px, (100vw - 1384px) / 2)));
  }

  .c-hero-carousel-slide__text > * {
    margin: 0;
  }

  /* Terra and 16.5 px as .hero-topline under .hero p of the draft (decision 1:1, README "Design und Texte": terra holds
     2.8:1 on the beige tile, below the 4.5:1 of body text). Two classes, so the label of custom.css stays behind. */
  .c-hero-carousel-slide .c-hero-carousel-slide__eyebrow {
    margin: 0;
    font-size: 1.03125rem;
    line-height: 1.55;
    color: var(--color-dkd-terra);
  }

  .c-hero-carousel-slide__heading {
    font-size: clamp(2rem, 3.8vw, 3.25rem);
    line-height: 1.04;
  }

  .c-hero-carousel-slide__heading em {
    font: inherit;
    color: inherit;
  }

  .c-hero-carousel-slide__lead {
    max-width: 460px;
    font-size: 1.03125rem;
  }

  .c-hero-carousel-slide__rating {
    max-width: 460px;
    font-size: 0.78125rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .c-hero-carousel-slide__media {
    position: relative;
    min-width: 0;
    overflow: hidden;
  }

  .c-hero-carousel-slide__media .c-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-hero-carousel-slide__note {
    position: absolute;
    left: 32px;
    bottom: 34px;
    margin: 0;
    /* 16.5 px: in the draft .hero p outweighs the 24 px of .handnotiz. */
    font-size: 1.03125rem;
    line-height: 1.1;
    color: var(--color-text-inverse, #fff);
    transform: rotate(-4deg);
  }

  @media (max-width: 1000px) {
    /* Every slide keeps its own height (text, then a 4:3 picture over the full width), as the draft shows one slide
       at a time; the carousel follows the height of the slide in view (c-hero-carousel). */
    .c-hero-carousel-slide {
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-content: start;
      min-height: 0;
    }

    .c-hero-carousel-slide__text {
      padding: 40px 24px;
    }

    /* Width first: with an aspect ratio a grid item would otherwise take its width from a stretched height. */
    .c-hero-carousel-slide__media {
      justify-self: stretch;
      align-self: start;
      width: 100%;
      aspect-ratio: 4 / 3;
    }
  }
/* END_SNIPPET:c-hero-carousel-slide */

/* START_SNIPPET:c-hero-carousel (INDEX:187) */
.c-hero-carousel {
    position: relative;
    display: block;
    width: calc(100% - 32px);
    max-width: 1384px;
    margin: 4px auto 0;
    overflow: hidden;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-secondary, #f4f4f4);
    border-radius: 24px;
  }

  .c-hero-carousel__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
  }

  .c-hero-carousel__track::-webkit-scrollbar {
    display: none;
  }

  .c-hero-carousel__track:focus-visible {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: -3px;
  }

  /* The dots sit on the middle of the picture half, on a light pill (.punkte of the draft). */
  .c-hero-carousel__dots {
    position: absolute;
    left: 75%;
    bottom: 20px;
    display: flex;
    gap: 8px;
    padding: 7px 10px;
    background: color-mix(in srgb, var(--color-bg-primary, #fff) 85%, transparent);
    border-radius: 99px;
    transform: translateX(-50%);
  }

  .c-hero-carousel__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: color-mix(in srgb, var(--color-bg-primary, #fff) 60%, transparent);
    border: 1px solid var(--color-text-primary, #222);
    border-radius: 99px;
    cursor: pointer;
    transition: width 0.2s, background-color 0.2s;
  }

  /* The tap area grows beyond the dot without moving it. */
  .c-hero-carousel__dot {
    position: relative;
  }

  .c-hero-carousel__dot::after {
    content: '';
    position: absolute;
    /* 45 px hoch; zur Seite nur bis zur Mitte des Abstands, damit sich die Flächen nicht überlappen. */
    inset: -18px -4px;
  }

  .c-hero-carousel__dot[aria-current='true'] {
    width: 26px;
    background: var(--color-text-primary, #222);
  }

  .c-hero-carousel__dot:focus-visible {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  @media (max-width: 1000px) {
    .c-hero-carousel__dots {
      left: 50%;
    }

    /* Below 1000 px the slides keep their own height; the script sets the track to the slide in view. */
    .c-hero-carousel__track {
      align-items: flex-start;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-hero-carousel__dot {
      transition: none;
    }
  }
/* END_SNIPPET:c-hero-carousel */

/* START_SNIPPET:c-hero-slider (INDEX:189) */
.c-hero-slider {
    position: relative;
    display: block;
  }

  /* The arrows belong to the slides, not to the rating bar below them. */
  .c-hero-slider__stage {
    position: relative;
  }

  .c-hero-slider__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .c-hero-slider__track::-webkit-scrollbar {
    display: none;
  }

  .c-hero-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
  }

  /* Slides stretch to the tallest sibling, so the picture has to cover that height, not its own ratio. */
  .c-hero-slide__media {
    display: block;
    height: 100%;
    min-height: 60vh;
  }

  .c-hero-slide__media .c-image {
    height: 100%;
    max-height: 85vh;
    object-fit: cover;
  }

  @media (min-width: 768px) {
    .c-hero-slide__media {
      min-height: 0;
    }
  }

  /* An artboard brings its own ratio, so the slide follows the artboard instead of a minimum height. */
  .c-hero-slide__media--artboard,
  .c-hero-slide__media--artboard .artboard-frames {
    height: auto;
    min-height: 0;
  }

  .c-hero-slider__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    margin: 0;
    padding-block: var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
  }

  .c-hero-slider__rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .c-hero-slider__stars {
    display: inline-flex;
    color: var(--color-text-primary, #222);
  }

  .c-hero-slider__separator {
    color: var(--color-text-secondary, #666);
  }

  .c-hero-slide__media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .c-hero-slide[data-text] .c-hero-slide__media::after {
    background: linear-gradient(to top, var(--color-overlay-default, rgb(34 34 34 / 0.4)), transparent 60%);
  }

  .c-hero-slide__content {
    position: absolute;
    inset: auto 0 0;
    padding-block: var(--space-8, 32px);
    color: var(--color-text-inverse, #fff);
  }

  .c-hero-slide__content > * + * {
    margin-top: var(--space-3, 12px);
  }

  .c-hero-slide__title {
    margin: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-4xl, 2.25rem);
    line-height: 1.1;
  }

  .c-hero-slide__text {
    margin-bottom: 0;
    font-size: var(--text-lg, 1.125rem);
  }

  /* On a narrow screen the arrows stand under the slides: every spot on the artboard carries a badge or a button. */
  .c-hero-slider__nav {
    display: flex;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-5, 20px) 0;
  }

  .c-hero-slider__nav[hidden] {
    display: none;
  }

  .c-hero-slider__button {
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-full, 9999px);
  }

  .c-hero-slider__button--previous .icon {
    transform: scaleX(-1);
  }

  /* Left, not right: on the right of a slide stand the store badges and the buttons of an artboard. */
  @media (min-width: 768px) {
    .c-hero-slider__nav {
      position: absolute;
      left: var(--space-5, 20px);
      bottom: var(--space-5, 20px);
      padding: 0;
    }
  }

  @media (min-width: 1024px) {
    .c-hero-slide__title {
      font-size: var(--text-6xl, 3.75rem);
    }
  }
/* END_SNIPPET:c-hero-slider */

/* START_SNIPPET:c-image (INDEX:191) */
.c-image {
    display: block;
    width: 100%;
    height: auto;
  }
/* END_SNIPPET:c-image */

/* START_SNIPPET:c-key-facts (INDEX:192) */
.c-key-facts {
    display: grid;
    gap: var(--space-3, 12px);
  }

  .c-key-facts__heading {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #666);
  }

  .c-key-facts__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 16px) var(--space-8, 32px);
    margin: 0;
    padding-top: var(--space-4, 16px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .c-key-facts__list dt {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-key-facts__list dd {
    margin: 0;
    font-weight: 600;
  }
/* END_SNIPPET:c-key-facts */

/* START_SNIPPET:c-lab-report (INDEX:193) */
.c-lab-report {
    padding-block: var(--block-space, var(--section-space, 56px));
  }

  .c-lab-report__grid {
    display: grid;
    gap: var(--space-6, 24px);
    padding: var(--space-5, 20px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-2xl, 24px);
  }

  /* A grid child sizes to its content unless it may shrink; without this the page gallery widens the page. */
  .c-lab-report__aside,
  .c-lab-report__content,
  .c-lab-report__media {
    min-width: 0;
  }

  .c-lab-report__pages {
    display: flex;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0 0 var(--space-2, 8px);
    overflow-x: auto;
    overflow-y: hidden;
    list-style: none;
  }

  .c-lab-report__page {
    flex: none;
    width: 120px;
  }

  .c-lab-report__page img {
    display: block;
    width: 100%;
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-sm, 4px);
  }

  .c-lab-report__files {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-lab-report__file-link {
    display: grid;
    gap: 2px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #222);
  }

  .c-lab-report__file-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .c-lab-report__file-label {
    color: var(--color-text-secondary, #666);
  }

  .c-lab-report__reports {
    margin-top: var(--space-4, 16px);
  }

  .c-lab-report__reports-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    min-height: 24px;
    padding-block: var(--space-3, 12px);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  .c-lab-report__reports-summary::-webkit-details-marker {
    display: none;
  }

  .c-lab-report__reports[open] .c-lab-report__reports-summary .icon {
    transform: rotate(45deg);
  }

  .c-lab-report__files {
    margin-bottom: var(--space-3, 12px);
  }

  .c-lab-report__media {
    max-width: 55%;
    margin-top: var(--space-4, 16px);
    overflow: hidden;
    border-radius: var(--radius-xl, 16px);
  }

  .c-lab-report__content {
    display: grid;
    align-content: start;
  }

  .c-lab-report__heading {
    margin: 0 0 var(--space-3, 12px);
  }

  .c-lab-report__heading-accent {
    font-family: var(--font-accent, serif);
    font-style: italic;
    font-weight: 400;
  }

  .c-lab-report__studies {
    display: grid;
    gap: var(--space-4, 16px);
    min-width: 0;
    margin: var(--space-4, 16px) 0 0;
    padding: 0;
    list-style: none;
  }

  /* Die Adresse einer Studie ist ein Wort ohne Trennstelle: ohne min-width und Umbruch schiebt sie die ganze Seite breit. */
  .c-lab-report__studies .c-study-link {
    display: grid;
    gap: 2px;
    min-width: 0;
    padding: 0;
    background: none;
    font-size: var(--text-sm, 0.875rem);
  }

  .c-lab-report__studies .c-study-link > span {
    font-weight: 600;
  }

  .c-lab-report__studies .c-study-link__anchor {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--color-text-secondary, #666);
  }

  /* Neben dem Titel steht die Quelle erst, wo eine Zeile beides trägt; auf dem Telefon stünde sie sonst über dem Rand. */
  @media (min-width: 900px) {
    .c-lab-report__studies {
      gap: var(--space-2, 8px);
    }

    .c-lab-report__studies .c-study-link {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: baseline;
      column-gap: var(--space-3, 12px);
    }
  }

  .c-lab-report__content .button {
    justify-self: start;
    margin-top: var(--space-4, 16px);
  }

  @media (min-width: 900px) {
    .c-lab-report__grid--media {
      grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
      align-items: start;
      gap: var(--space-8, 32px);
      padding: var(--space-6, 24px);
    }

    .c-lab-report__media {
      max-width: 200px;
    }

    .c-lab-report__aside {
      align-self: start;
    }
  }
/* END_SNIPPET:c-lab-report */

/* START_SNIPPET:c-media-text (INDEX:194) */
.c-media-text {
    padding-block: var(--block-space, var(--section-space, 56px));
  }

  .c-media-text__grid {
    display: grid;
    gap: var(--space-8, 32px);
    align-items: center;
  }

  .c-media-text__media {
    overflow: hidden;
    border-radius: var(--radius-xl, 16px);
  }

  /* Ein Porträt neben einem Text ist ein Beleg, keine Bühne: es bleibt klein, auch wenn die Spalte breit ist. */
  .c-media-text__grid--narrow .c-media-text__media {
    max-width: 58%;
  }


  .c-media-text__eyebrow {
    margin: 0 0 var(--space-3, 12px);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .c-media-text__heading {
    margin: 0 0 var(--space-4, 16px);
  }

  /* A heading of three sentences in display size is a wall, not a hierarchy. */
  .c-media-text__heading--lead {
    font-size: var(--text-lg, 1.125rem);
    font-weight: 500;
    line-height: 1.4;
  }

  @media (min-width: 768px) {
    .c-media-text__heading--lead {
      font-size: var(--text-3xl, 1.875rem);
    }
  }

  .c-media-text__text {
    margin-bottom: var(--space-4, 16px);
  }

  .c-media-text__text ul {
    padding-left: 1.2em;
  }

  /* Live steht die Schlusszeile als eigener Absatz mit Luft, nicht als sechste Hakenzeile. */
  .c-media-text__closing {
    margin-top: var(--space-8, 32px);
  }

  .c-media-text__benefits {
    display: grid;
    gap: var(--space-3, 12px);
    margin: 0 0 var(--space-4, 16px);
    padding: 0;
    list-style: none;
  }

  @media (min-width: 900px) {
    .c-media-text__grid--media {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-12, 48px);
    }

    .c-media-text__grid--narrow .c-media-text__media {
      max-width: 240px;
    }

    .c-media-text__grid--flip .c-media-text__media {
      order: 2;
    }
  }
/* END_SNIPPET:c-media-text */

/* START_SNIPPET:c-mega-card (INDEX:196) */
.mega-card {
    display: block;
    margin-top: var(--space-4, 16px);
    color: inherit;
    text-decoration: none;
  }

  .mega-card__media {
    display: block;
    overflow: hidden;
    border-radius: var(--radius-md, 10px);
  }

  .mega-card__media .c-image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .mega-card__label {
    display: inline-block;
    margin-top: var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
  }
/* END_SNIPPET:c-mega-card */

/* START_SNIPPET:c-mega-column (INDEX:197) */
.mega-nav__column {
    min-width: 0;
  }

  .mega-nav__column--card {
    padding: var(--space-5, 20px);
    background: var(--color-bg-secondary, #fff);
    border-radius: var(--radius-lg, 16px);
  }

  .mega-nav__heading {
    margin: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .mega-nav__heading-badge {
    display: inline-block;
    margin-left: var(--space-1, 4px);
    padding: 2px var(--space-2, 8px);
    font-weight: 600;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    color: var(--color-text-primary, #222);
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-full, 9999px);
  }

  .mega-nav__heading-badge .c-price__current {
    font-weight: inherit;
  }

  .mega-nav__column--card .mega-nav__heading {
    font-size: var(--text-base, 1rem);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-text-primary, #222);
  }

  .mega-nav__note {
    margin: var(--space-1, 4px) 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .mega-nav__tiles,
  .mega-nav__links,
  .mega-nav__trust {
    display: grid;
    gap: var(--space-1, 4px);
    margin: var(--space-3, 12px) 0 0;
    padding: 0;
    list-style: none;
  }

  .mega-nav__trust {
    gap: var(--space-4, 16px);
  }

  .mega-nav__all {
    display: inline-block;
    min-height: 24px;
    margin-top: var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
  }

  @media (min-width: 1024px) {
    .mega-nav > .mega-nav__item .mega-nav__column--two {
      grid-column: span 2;
    }

    .mega-nav > .mega-nav__item .mega-nav__column--two .mega-nav__tiles {
      grid-template-columns: 1fr 1fr;
      gap: var(--space-1, 4px) var(--space-6, 24px);
    }

    .mega-nav > .mega-nav__item .mega-nav__column--wide {
      grid-column: 1 / -1;
      padding-top: var(--space-6, 24px);
      border-top: 1px solid var(--color-border-default, #ddd);
    }

    .mega-nav > .mega-nav__item .mega-nav__trust {
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      margin-top: 0;
    }
  }
/* END_SNIPPET:c-mega-column */

/* START_SNIPPET:c-mega-drawer-entry (INDEX:198) */
.mega-entry {
    display: flex;
    min-height: 24px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    padding: 7px 4px 7px 18px;
    color: var(--color-text-secondary, #666);
    text-decoration: none;
  }

  .mega-entry__media {
    flex: none;
    width: 32px;
    height: 32px;
    overflow: hidden;
    background: var(--color-bg-secondary, #f4f4f4);
    border-radius: 7px;
  }

  .mega-entry__media .c-image {
    width: 32px;
    height: 32px;
    object-fit: cover;
  }

  .mega-entry__title {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    min-width: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
    color: var(--color-text-primary, #222);
  }

  .mega-entry__badge--waitlist {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }

  .mega-entry__badge,
  .mega-entry__tag {
    padding: 3px 9px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.55;
    white-space: nowrap;
    color: var(--color-text-primary, #222);
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-full, 9999px);
  }

  .mega-entry__tag {
    flex: none;
  }

  .mega-entry__end {
    flex: none;
    font-size: var(--text-xs, 0.75rem);
    white-space: nowrap;
    color: var(--color-text-secondary, #666);
  }

  .mega-entry__end .c-price {
    display: inline;
  }

  .mega-entry__end .c-price__current {
    font-weight: inherit;
  }

  .mega-entry__heading {
    padding: 10px 4px 2px 18px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-secondary, #666);
  }

  .mega-entry__nest-toggle {
    display: flex;
    min-height: 24px;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px 6px 18px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--color-text-secondary, #666);
    list-style: none;
    cursor: pointer;
  }

  .mega-entry__nest-toggle::-webkit-details-marker {
    display: none;
  }

  .mega-entry__chevron > span {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .mega-entry__nest[open] > .mega-entry__nest-toggle .mega-entry__chevron > span {
    transform: rotate(90deg);
  }

  .mega-entry__nest .mega-entry__nested {
    margin: 0;
    padding: 0 0 2px;
    list-style: none;
  }
/* END_SNIPPET:c-mega-drawer-entry */

/* START_SNIPPET:c-mega-drawer-group (INDEX:199) */
.mega-drawer-group + .mega-drawer-group {
    margin-top: var(--space-3, 12px);
    padding-top: var(--space-1, 4px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .mega-drawer-group__label {
    margin: var(--space-4, 16px) 0 var(--space-1, 4px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .mega-drawer-group__rows,
  .mega-drawer-group__links,
  .mega-drawer-group__seals {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mega-drawer-group__offer {
    margin: var(--space-5, 20px) 0 var(--space-1, 4px);
  }

  .mega-drawer-group__links .mega-link {
    margin-inline: 0;
    padding-inline: 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 500;
  }

  .mega-drawer-group__seals {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    justify-items: center;
    align-items: center;
    gap: var(--space-4, 16px) var(--space-2, 8px);
    margin-top: var(--space-5, 20px);
  }

  .mega-drawer-group__seals .mega-seal {
    width: 100%;
    max-width: 66px;
  }
/* END_SNIPPET:c-mega-drawer-group */

/* START_SNIPPET:c-mega-drawer-row (INDEX:200) */
.mega-row {
    display: grid;
    min-width: 0;
  }

  .mega-row > * {
    grid-area: 1 / 1;
    min-width: 0;
  }

  .mega-row__link,
  .mega-row__toggle,
  .mega-row__ghost,
  .mega-row__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--space-2, 8px);
  }

  .mega-row__link,
  .mega-row__toggle {
    min-height: 44px;
    padding: var(--space-3, 12px) 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    line-height: 1.55;
    color: inherit;
    text-decoration: none;
  }

  /* The link takes the row but the toggle at its end; the rest of the row opens the entries. */
  .mega-row__link {
    z-index: 1;
    align-self: start;
    margin-inline-end: var(--mega-row-toggle, 44px);
  }

  .mega-row__link--whole {
    flex-wrap: nowrap;
    margin-inline-end: 0;
  }

  .mega-row__link--whole .mega-row__chevron {
    margin-inline-start: auto;
  }

  .mega-row__toggle {
    flex-wrap: nowrap;
    justify-content: space-between;
    list-style: none;
    cursor: pointer;
  }

  .mega-row__toggle::-webkit-details-marker {
    display: none;
  }

  .mega-row__ghost {
    visibility: hidden;
  }

  .mega-row__badge {
    padding: 2px var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    line-height: 1.55;
    color: var(--color-action-primary-text, #fff);
    background: var(--color-action-primary, #222);
    border-radius: var(--radius-full, 9999px);
  }

  .mega-row__tag {
    padding: 3px var(--space-2, 8px);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: normal;
    white-space: nowrap;
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-full, 9999px);
  }

  .mega-row__tag .c-price__current {
    font-weight: inherit;
  }

  .mega-row__chevron {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 400;
    line-height: 1;
    color: var(--color-text-secondary, #666);
  }

  .mega-row__chevron > span {
    display: inline-block;
    transition: transform 0.2s ease;
  }

  .mega-row__disclosure[open] > .mega-row__toggle .mega-row__chevron > span {
    transform: rotate(90deg);
  }

  /* The list reset of the core would win over a single class. */
  .mega-row .mega-row__entries {
    margin: 0 0 0 3px;
    padding: 2px 0 10px 2px;
    list-style: none;
    border-left: 1.5px solid var(--color-border-default, #ddd);
  }

  /* A small row: smaller label, the toggle behind a short line, pointing down and up. */
  .mega-row--small {
    --mega-row-toggle: 56px;
  }

  .mega-row--small .mega-row__link,
  .mega-row--small .mega-row__toggle {
    font-size: var(--text-base, 1rem);
    font-weight: 500;
  }

  .mega-row--small .mega-row__toggle .mega-row__chevron {
    align-self: stretch;
    width: 56px;
    margin-block: calc(var(--space-3, 12px) * -1);
    padding-left: var(--space-3, 12px);
  }

  .mega-row--small .mega-row__toggle .mega-row__chevron::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 22px;
    margin-top: -11px;
    background: var(--color-border-default, #ddd);
  }

  .mega-row--small .mega-row__toggle .mega-row__chevron > span {
    transform: rotate(90deg);
  }

  .mega-row--small .mega-row__disclosure[open] > .mega-row__toggle .mega-row__chevron > span {
    transform: rotate(-90deg);
  }
/* END_SNIPPET:c-mega-drawer-row */

/* START_SNIPPET:c-mega-drawer (INDEX:201) */
.mega-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mega-drawer__list > .mega-nav__item {
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  /* A linked entry: the link lies over the start of the row, the rest of the row opens the panel below. */
  .mega-drawer__list > .mega-nav__item--split {
    display: grid;
  }

  .mega-drawer__list > .mega-nav__item--split > * {
    grid-area: 1 / 1;
  }

  .mega-drawer__list > .mega-nav__item--split > .mega-nav__link {
    z-index: 1;
    align-self: start;
    justify-self: start;
    padding: var(--space-3, 12px) 0;
    font-size: var(--text-lg, 1.125rem);
  }

  .mega-drawer__list .mega-nav__label {
    justify-content: space-between;
    padding: var(--space-3, 12px) 0;
    font-size: var(--text-lg, 1.125rem);
  }

  .mega-drawer__list .mega-nav__title::after {
    display: none;
  }

  .mega-drawer__list .mega-nav__badge {
    margin-right: auto;
  }

  .mega-drawer__list .mega-nav__panel {
    padding-bottom: var(--space-4, 16px);
  }

  .mega-drawer__list .mega-nav__grid {
    gap: var(--space-5, 20px);
  }

  .mega-drawer__list .mega-nav__note {
    display: none;
  }

  .mega-drawer__offer {
    margin-top: var(--space-5, 20px);
  }

  /* The foot stays at the bottom of the scrolling drawer, the rows fade out behind it. */
  .mega-drawer__foot {
    position: sticky;
    bottom: 0;
    z-index: 1;
    margin-top: var(--space-4, 16px);
    padding: var(--space-4, 16px) 0 var(--space-5, 20px);
    background: linear-gradient(to top, var(--color-bg-primary, #fff) 75%, transparent);
  }

  .mega-drawer__cta {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: var(--space-1, 4px);
  }

  .mega-drawer__cta .c-price__current {
    font-weight: inherit;
  }

  .mega-drawer__cta .c-price__compare {
    color: inherit;
  }

  .mega-drawer__note {
    margin: var(--space-2, 8px) 0 0;
    font-size: var(--text-xs, 0.75rem);
    text-align: center;
    color: var(--color-text-secondary, #666);
  }

  .mega-drawer__note .c-price__current {
    font-weight: inherit;
  }
/* END_SNIPPET:c-mega-drawer */

/* START_SNIPPET:c-mega-item (INDEX:202) */
.mega-nav__item {
    position: static;
  }

  .mega-nav__label {
    display: flex;
    align-items: center;
    min-height: 24px;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 500;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
  }

  .mega-nav__link {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-2, 8px) 0;
    font-family: var(--font-heading, system-ui, sans-serif);
    font-weight: 500;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
  }

  .mega-nav__ghost {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    visibility: hidden;
  }

  .mega-nav__label::-webkit-details-marker {
    display: none;
  }

  .mega-nav__title {
    position: relative;
  }

  .mega-nav__title::after {
    content: '';
    position: absolute;
    inset: auto 0 -2px;
    height: 1.5px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.18s ease;
  }

  .mega-nav__label:hover .mega-nav__title::after,
  .mega-nav__link:hover .mega-nav__title::after,
  .mega-nav__item--split:has(> .mega-nav__disclosure[open]) > .mega-nav__link .mega-nav__title::after,
  .mega-nav__disclosure[open] .mega-nav__title::after {
    transform: scaleX(1);
  }

  .mega-nav__badge {
    padding: 2px var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--color-action-primary-text, #fff);
    background: var(--color-action-primary, #222);
    border-radius: var(--radius-full, 9999px);
  }

  .mega-nav__label .icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-secondary, #666);
    transition: transform 0.18s ease;
  }

  .mega-nav__disclosure[open] > .mega-nav__label .icon {
    transform: rotate(90deg);
  }

  .mega-nav__grid {
    display: grid;
    gap: var(--space-6, 24px);
  }

  .mega-nav__seals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5, 20px);
    margin: var(--space-6, 24px) 0 0;
    padding: 0;
    list-style: none;
  }

  .mega-nav > .mega-nav__item > .mega-nav__disclosure > .mega-nav__label .icon {
    display: none;
  }

  .mega-nav > .mega-nav__item--split {
    display: flex;
    align-items: center;
  }

  .mega-nav > .mega-nav__item--split > .mega-nav__disclosure > .mega-nav__label .icon {
    display: block;
  }

  /* Where a pointer hovers, the hover opens the panel: the toggle stays for the keyboard and shows on focus. */
  @media (hover: hover) {
    .mega-nav > .mega-nav__item--split > .mega-nav__disclosure > .mega-nav__label:not(:focus-visible) {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
  }

  .mega-nav > .mega-nav__item--split .mega-nav__ghost {
    display: none;
  }

  @media (min-width: 1024px) {
    .mega-nav > .mega-nav__item .mega-nav__panel {
      position: absolute;
      inset: 100% 0 auto;
      z-index: 1;
      padding-block: var(--space-8, 32px);
      background: var(--color-bg-primary, #fff);
      border-bottom: 1px solid var(--color-border-default, #ddd);
      box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
    }

    .mega-nav > .mega-nav__item .mega-nav__grid {
      width: 100%;
      max-width: 1440px;
      margin-inline: auto;
      padding-inline: var(--space-10, 40px);
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: var(--space-10, 40px);
      align-items: start;
    }

    .mega-nav > .mega-nav__item .mega-nav__seals {
      max-width: 1440px;
      margin-inline: auto;
      padding-inline: var(--space-10, 40px);
    }
  }
/* END_SNIPPET:c-mega-item */

/* START_SNIPPET:c-mega-link (INDEX:203) */
.mega-link {
    display: flex;
    min-height: 24px;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0 var(--space-3, 12px);
    padding: var(--space-2, 8px);
    margin-inline: calc(var(--space-2, 8px) * -1);
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-sm, 8px);
  }

  .mega-link:hover {
    background: var(--color-bg-secondary, #fff);
  }

  .mega-link__sub {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-mega-link */

/* START_SNIPPET:c-mega-nav (INDEX:204) */
.mega-nav {
    display: flex;
    align-items: center;
    gap: var(--space-6, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 1280px) {
    .mega-nav {
      gap: var(--space-7, 28px);
    }
  }
/* END_SNIPPET:c-mega-nav */

/* START_SNIPPET:c-mega-offer (INDEX:205) */
.mega-offer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2, 8px);
    padding: var(--space-5, 20px);
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-lg, 16px);
  }

  .mega-offer__media {
    display: block;
    width: 120px;
    overflow: hidden;
    border-radius: var(--radius-md, 10px);
  }

  .mega-offer p {
    margin: 0;
  }

  .mega-offer__eyebrow {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #666);
  }

  .mega-offer__title {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    line-height: 1.2;
  }

  .mega-offer__text {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .mega-offer__button {
    margin-top: var(--space-2, 8px);
  }

  .mega-offer__price {
    font-family: var(--font-accent, serif);
    font-style: italic;
    font-weight: 400;
  }

  .mega-offer__title .c-price {
    display: inline;
  }

  .mega-offer__title .c-price__current {
    font-weight: inherit;
  }

  .mega-offer__compare {
    font-weight: 400;
    color: var(--color-text-secondary, #666);
  }

  .mega-offer__thumbs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    width: 100%;
    margin-top: var(--space-2, 8px);
  }

  .mega-offer__thumb {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-md, 10px);
  }

  .mega-offer__thumb .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
/* END_SNIPPET:c-mega-offer */

/* START_SNIPPET:c-mega-product (INDEX:206) */
.mega-tile {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-2, 8px);
    margin-inline: calc(var(--space-2, 8px) * -1);
    color: inherit;
    text-decoration: none;
    border-radius: var(--radius-md, 10px);
  }

  a.mega-tile:hover {
    background: var(--color-bg-secondary, #fff);
  }

  /* Under 0.7 the dimmed text falls below 4.5:1 on white. */
  .mega-tile--flat {
    opacity: 0.7;
  }

  .mega-tile__media {
    flex: none;
    width: 48px;
    height: 48px;
    overflow: hidden;
    background: var(--color-bg-secondary, #fff);
    border-radius: var(--radius-sm, 8px);
  }

  .mega-tile__media .c-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
  }

  .mega-tile__body {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2, 8px);
    min-width: 0;
  }

  .mega-tile__title {
    flex-basis: 100%;
    font-weight: 500;
    line-height: 1.2;
  }

  .mega-tile__badge {
    display: inline-block;
    margin-left: var(--space-2, 8px);
    padding: 1px var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    white-space: nowrap;
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-full, 9999px);
  }

  .mega-tile__badge--waitlist {
    display: inline-flex;
    gap: 6px;
    align-items: center;
  }

  .mega-tile__sub,
  .mega-tile .c-price {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-mega-product */

/* START_SNIPPET:c-mega-seal (INDEX:207) */
.mega-seal {
    flex: none;
    width: 96px;
  }

  .mega-seal__icon {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
  }
/* END_SNIPPET:c-mega-seal */

/* START_SNIPPET:c-mega-trust (INDEX:208) */
.mega-trust {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  .mega-trust__icon {
    flex: none;
    width: 32px;
  }

  .mega-trust__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .mega-trust__title {
    font-weight: 500;
    font-size: var(--text-sm, 0.875rem);
  }

  .mega-trust__sub {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-mega-trust */

/* START_SNIPPET:c-notice (INDEX:209) */
/* Der Hinweis steht wie der Kaufknopf über die ganze Spalte, nicht als Pille daneben. */
  .c-notice {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    max-width: 100%;
    margin: var(--space-2, 8px) 0 0;
    padding: var(--space-3, 12px);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #f4f4f4);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    text-align: center;
  }

  .c-notice--warn {
    background: var(--color-brand-highlight, #f4f4f4);
    color: var(--color-text-primary, #222);
  }

  .c-notice--urgent {
    justify-content: flex-start;
    border: 1px solid var(--color-sale-bg, #999);
    background: var(--color-bg-primary, #fff);
    color: var(--color-sale-bg, #555);
  }

  .c-notice__mark svg {
    display: block;
    width: 16px;
    height: 16px;
  }
/* END_SNIPPET:c-notice */

/* START_SNIPPET:c-offer-card (INDEX:210) */
/* Narrow the price stands under the package, wide beside it: beside it, a card of 390 px leaves the
     features about a hundred pixels and every line breaks after one word. */
  .c-offer-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3, 12px);
    min-height: 44px;
    padding: var(--space-4, 16px);
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
  }

  .c-offer-card__input:checked + .c-offer-card {
    border-color: var(--color-border-strong, #222);
    box-shadow: inset 0 0 0 1px var(--color-border-strong, #222);
  }

  .c-offer-card__input:focus-visible + .c-offer-card {
    outline: 2px solid var(--color-border-strong, #222);
    outline-offset: 2px;
  }

  .c-offer-card__mark {
    flex: none;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-strong, #222);
    border-radius: var(--radius-full, 999px);
  }

  .c-offer-card__input:checked + .c-offer-card .c-offer-card__mark {
    border-width: 6px;
  }

  .c-offer-card__body {
    display: grid;
    gap: var(--space-2, 8px);
    min-width: 0;
  }

  .c-offer-card__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
  }

  .c-offer-card__name {
    font-weight: 600;
  }

  .c-offer-card__badge {
    padding: var(--space-1, 4px) var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-full, 999px);
  }

  .c-offer-card__thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1, 4px);
  }

  .c-offer-card__thumbs .c-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .c-offer-card__features {
    display: grid;
    gap: var(--space-1, 4px);
  }

  .c-offer-card__price {
    grid-column: 2;
  }

  @media (min-width: 768px) {
    .c-offer-card {
      grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .c-offer-card__price {
      grid-column: 3;
      grid-row: 1;
      text-align: end;
    }
  }
/* END_SNIPPET:c-offer-card */

/* START_SNIPPET:c-offer-cards (INDEX:211) */
.c-offer-cards {
    display: grid;
    gap: var(--space-3, 12px);
    padding-block: var(--space-8, 32px);
  }

  .c-offer-cards > * {
    margin: 0;
  }

  .c-offer-cards__lead {
    max-width: 68ch;
    color: var(--color-text-secondary, #666);
  }

  .c-offer-cards__form {
    display: grid;
    gap: var(--space-3, 12px);
  }

  .c-offer-cards__group {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .c-offer-cards__label {
    padding: 0 0 var(--space-2, 8px);
    font-weight: 600;
  }

  .c-offer-cards__list {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-offer-cards__cta {
    display: flex;
    justify-content: center;
    gap: var(--space-1, 4px);
  }

  .c-offer-cards__note,
  .c-offer-cards__timer {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-offer-cards__timer {
    display: flex;
    justify-content: center;
    gap: var(--space-1, 4px);
    font-variant-numeric: tabular-nums;
  }
/* END_SNIPPET:c-offer-cards */

/* START_SNIPPET:c-offer-feature (INDEX:212) */
.c-offer-feature {
    display: flex;
    align-items: start;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
  }

  .c-offer-feature--out {
    color: var(--color-text-secondary, #666);
  }

  .c-offer-feature__mark .icon {
    flex: none;
    width: 18px;
    height: 18px;
  }
/* END_SNIPPET:c-offer-feature */

/* START_SNIPPET:c-outline-entry (INDEX:213) */
.c-outline-entry {
    font-size: var(--text-sm, 0.875rem);
  }
/* END_SNIPPET:c-outline-entry */

/* START_SNIPPET:c-outline-group (INDEX:214) */
.c-outline-group__question {
    margin: 0 0 var(--space-3, 12px);
    color: var(--color-text-secondary, #666);
  }

  .c-outline-group__entries {
    display: grid;
    gap: var(--space-1, 4px);
    margin: 0;
    padding-inline-start: var(--space-5, 20px);
  }
/* END_SNIPPET:c-outline-group */

/* START_SNIPPET:c-outline (INDEX:215) */
.c-outline {
    display: block;
    padding-block: var(--space-12, 48px);
  }

  .c-outline__eyebrow {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-outline__heading {
    margin: 0 0 var(--space-3, 12px);
  }

  .c-outline__lead {
    margin: 0 0 var(--space-6, 24px);
    max-width: 68ch;
    color: var(--color-text-secondary, #666);
  }

  .c-outline__groups {
    border-top: 1px solid var(--color-border-default, #ddd);
  }
/* END_SNIPPET:c-outline */

/* START_SNIPPET:c-pack-options (INDEX:216) */
/* Die Wahl steht live mit Luft unter der Zeile von Grundpreis und Versand: das Schild einer Karte ragt sonst in sie hinein. */
  .c-pack-options {
    min-width: 0;
    margin: var(--space-5, 20px) 0 var(--space-4, 16px);
    padding: 0;
    border: 0;
  }

  .c-pack-options__legend {
    margin-bottom: var(--space-4, 16px);
    padding: 0;
    font-size: var(--text-base, 1rem);
    font-weight: 700;
  }

  .c-pack-options__options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-2, 8px);
  }

  .c-pack-options__option {
    display: grid;
    min-width: 0;
  }

  .c-pack-options__label {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 44px;
    overflow: visible;
    border: 1.5px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  }

  /* Die Bühne zeigt die Zusammenstellung eines Pakets: bezahlte Stücke, ein Pluszeichen, die geschenkten.
     Die Stücke liegen versetzt übereinander, deshalb trägt der Stapel die Breite seiner Kanten selbst. */
  .c-pack-options__stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1, 4px);
    min-width: 0;
    height: 96px;
    padding: var(--space-3, 12px) var(--space-1, 4px) var(--space-2, 8px);
    overflow: hidden;
  }

  /* Drei Karten nebeneinander sind auf einem Telefon je gut hundert Pixel breit: die Kanten bleiben klein genug,
     dass die ganze Zusammenstellung in die Karte passt, statt an ihrem Rand abgeschnitten zu werden. */
  .c-pack-options__stage--single {
    --piece: 72px;
    --shift: 0px;
    --gift: 0px;
  }

  .c-pack-options__stage--pack {
    --piece: 34px;
    --shift: 8px;
    --gift: 30px;
  }

  .c-pack-options__stage--pack2 {
    --piece: 28px;
    --shift: 6px;
    --gift: 26px;
  }

  @media (min-width: 900px) {
    .c-pack-options__stage {
      gap: var(--space-2, 8px);
      height: 112px;
      padding: var(--space-4, 16px) var(--space-1, 4px) var(--space-2, 8px);
    }

    .c-pack-options__stage--single {
      --piece: 84px;
    }

    .c-pack-options__stage--pack {
      --piece: 50px;
      --shift: 12px;
      --gift: 46px;
    }

    .c-pack-options__stage--pack2 {
      --piece: 44px;
      --shift: 10px;
      --gift: 40px;
    }
  }

  .c-pack-options__stack {
    position: relative;
    display: block;
    flex: none;
    height: var(--piece, 50px);
    width: calc(var(--piece, 50px) + (var(--pieces, 1) - 1) * var(--shift, 12px));
  }

  /* Jedes Stück steht als eigene Kachel mit Rand und Schatten: liegen drei Packshots mit weißem Grund
     ohne Kante übereinander, ist ein Dreierpaket von einem Fünferpaket nicht zu unterscheiden. */
  .c-pack-options__stack img {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--piece, 50px);
    height: var(--piece, 50px);
    object-fit: cover;
    border-radius: var(--radius-sm, 6px);
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 0 0 1px var(--color-border-default, #ddd), var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  }

  .c-pack-options__stack img:nth-child(2) {
    left: var(--shift, 12px);
    z-index: 2;
  }

  .c-pack-options__stack img:nth-child(3) {
    left: calc(2 * var(--shift, 12px));
    z-index: 3;
  }

  .c-pack-options__stack img:nth-child(4) {
    left: calc(3 * var(--shift, 12px));
    z-index: 4;
  }

  .c-pack-options__stack img:nth-child(5) {
    left: calc(4 * var(--shift, 12px));
    z-index: 5;
  }

  .c-pack-options__stack--free {
    height: var(--gift, 46px);
    width: calc(var(--gift, 46px) + (var(--pieces, 1) - 1) * var(--shift, 12px));
    align-self: flex-end;
  }

  .c-pack-options__stack--free img {
    width: var(--gift, 46px);
    height: var(--gift, 46px);
  }

  .c-pack-options__plus {
    flex: none;
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-secondary, #666);
  }

  /* Der Gratis-Sticker ist ein Preisschild, kein Markenzeichen: er trägt den Angebots-Ton und sitzt schräg auf der Ecke wie live. */
  .c-pack-options__sticker {
    position: absolute;
    left: -8px;
    bottom: -8px;
    z-index: 9;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-sale-bg, #444);
    color: var(--color-sale-text, #fff);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    transform: rotate(-12deg);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.05));
  }

  /* Ein freigestelltes Stück ist gut dreimal so hoch wie breit und steht ohne Kachel, darum höher und enger als ein Foto. */
  .c-pack-options--cutout .c-pack-options__stage {
    height: 98px;
  }

  .c-pack-options--cutout .c-pack-options__stage--single {
    --piece: 78px;
  }

  .c-pack-options--cutout .c-pack-options__stage--pack {
    --piece: 72px;
    --shift: 13px;
    --gift: 64px;
  }

  .c-pack-options--cutout .c-pack-options__stage--pack2 {
    --piece: 60px;
    --shift: 10px;
    --gift: 54px;
  }

  @media (min-width: 900px) {
    .c-pack-options--cutout .c-pack-options__stage {
      height: 118px;
    }

    .c-pack-options--cutout .c-pack-options__stage--single {
      --piece: 96px;
    }

    .c-pack-options--cutout .c-pack-options__stage--pack {
      --piece: 88px;
      --shift: 17px;
      --gift: 80px;
    }

    .c-pack-options--cutout .c-pack-options__stage--pack2 {
      --piece: 74px;
      --shift: 13px;
      --gift: 66px;
    }
  }

  .c-pack-options--cutout .c-pack-options__stack {
    width: calc(var(--piece, 50px) * 0.32 + (var(--pieces, 1) - 1) * var(--shift, 12px));
  }

  .c-pack-options--cutout .c-pack-options__stack--free {
    width: calc(var(--gift, 46px) * 0.32 + (var(--pieces, 1) - 1) * var(--shift, 12px));
  }

  .c-pack-options--cutout .c-pack-options__stack img {
    width: auto;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--color-text-primary, #222) 14%, transparent));
  }

  .c-pack-options__foot {
    display: grid;
    gap: 2px;
    margin-top: auto;
    padding: var(--space-2, 8px) var(--space-1, 4px) var(--space-3, 12px);
    background: var(--color-bg-secondary, #f4f4f4);
    border-radius: 0 0 10px 10px;
    text-align: center;
  }

  .c-pack-options__input:checked + .c-pack-options__label .c-pack-options__foot {
    background: var(--color-brand-accent, #eee);
  }

  .c-pack-options__label .c-price {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
  }

  /* In a narrow card an amount would otherwise break between the number and its sign; the line that names
     the saving is a sentence and may break, or it stands over the edge of its card. */
  .c-pack-options__label .c-price > :not(.c-price__savings) {
    white-space: nowrap;
  }

  .c-pack-options__label .c-price__savings {
    text-align: center;
  }

  .c-pack-options__input:checked + .c-pack-options__label {
    border-color: var(--color-border-strong, #222);
    box-shadow: inset 0 0 0 1px var(--color-border-strong, #222);
  }

  .c-pack-options__input:focus-visible + .c-pack-options__label {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-pack-options__name {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }

  /* Drei Karten auf einem Telefon: Name und Preis eine Stufe kleiner, wie live, sonst bricht jede Karte in vier Zeilen. */
  @media (max-width: 480px) {
    .c-pack-options:not(.c-pack-options--compact):not(.c-pack-options--rows) .c-pack-options__name,
    .c-pack-options:not(.c-pack-options--compact):not(.c-pack-options--rows) .c-pack-options__label .c-price {
      font-size: var(--text-xs, 0.75rem);
    }

    .c-pack-options:not(.c-pack-options--compact):not(.c-pack-options--rows) .c-pack-options__saving {
      right: var(--space-1, 4px);
      padding: 2px 6px;
      font-size: 10px;
    }
  }

  /* Das Schild hängt über der rechten oberen Ecke der Karte, wie live. */
  .c-pack-options__saving {
    position: absolute;
    top: -11px;
    right: var(--space-2, 8px);
    z-index: 2;
    padding: 3px var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--color-status-available, #444);
    /* Die Brand liefert kein blasses Grün: das Schild mischt sich seinen Grund aus dem Verfügbar-Ton und dem Papier, blass genug für 4,5:1. */
    background: color-mix(in srgb, var(--color-status-available, #444) 6%, var(--color-bg-primary, #fff));
    border: 1px solid color-mix(in srgb, var(--color-status-available, #444) 30%, var(--color-bg-primary, #fff));
    border-radius: var(--radius-full, 9999px);
  }

  /* Kompakt: eine Zeile aus drei Wahlknöpfen mit Menge und Preis, das Schild mit der Ersparnis auf der Ecke. */
  .c-pack-options--compact .c-pack-options__label {
    justify-content: center;
    border-radius: var(--radius-md, 8px);
  }

  .c-pack-options--compact .c-pack-options__foot {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: var(--space-2, 8px);
    background: none;
  }

  .c-pack-options--compact .c-pack-options__input:checked + .c-pack-options__label .c-pack-options__foot {
    background: none;
  }

  .c-pack-options--compact .c-pack-options__foot::before {
    content: "";
    flex: none;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--color-border-strong, #222);
    border-radius: var(--radius-full, 9999px);
  }

  .c-pack-options--compact .c-pack-options__input:checked + .c-pack-options__label .c-pack-options__foot::before {
    border-width: 4px;
  }

  .c-pack-options--compact .c-pack-options__label .c-price {
    flex-wrap: nowrap;
    font-weight: 400;
  }

  .c-pack-options--compact .c-pack-options__saving {
    top: -9px;
    right: var(--space-1, 4px);
    padding: 1px var(--space-1, 4px);
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-brand-accent, #eee);
    color: var(--color-text-primary, #222);
    font-size: 10px;
    font-weight: 700;
  }
  /* Zeilen: je Paket Name und Preis, darunter Versand und Ersparnis; das größte trägt das Schild und ist gewählt. */
  .c-pack-options--rows .c-pack-options__options {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3, 12px);
  }

  .c-pack-options--rows .c-pack-options__label {
    gap: var(--space-1, 4px);
    padding: var(--space-3, 12px) var(--space-3, 12px) var(--space-3, 12px) var(--space-10, 40px);
    border-radius: var(--radius-lg, 12px);
  }

  .c-pack-options--rows .c-pack-options__label::before {
    content: "";
    position: absolute;
    top: var(--space-4, 16px);
    left: var(--space-3, 12px);
    width: 18px;
    height: 18px;
    border: 1.5px solid var(--color-border-default, #ccc);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-primary, #fff);
    transition: border-width 0.15s ease, border-color 0.15s ease;
  }

  .c-pack-options--rows .c-pack-options__input:checked + .c-pack-options__label {
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .c-pack-options--rows .c-pack-options__input:checked + .c-pack-options__label::before {
    border: 5px solid var(--color-border-strong, #222);
  }

  /* Links Name, Reichweite und Tagespreis mit Versand, rechts Preis und Ersparnis, wie live. */
  .c-pack-options--rows .c-pack-options__label {
    flex-direction: row;
    justify-content: space-between;
    gap: var(--space-3, 12px);
  }

  .c-pack-options__side {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .c-pack-options__amount {
    display: grid;
    flex: none;
    justify-items: end;
    align-content: start;
    gap: var(--space-1, 4px);
  }

  .c-pack-options__reach {
    margin-top: var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-pack-options__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-pack-options--rows .c-pack-options__label .c-pack-options__day .c-price,
  .c-pack-options--rows .c-pack-options__day .c-price__current {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
  }

  /* Der Tagespreis des besten Pakets steht wie live auf einem hellen Schild. */
  .c-pack-options__day--best {
    padding: 1px var(--space-2, 8px);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-brand-accent, #eee);
    color: var(--color-text-primary, #222);
    font-weight: 600;
  }

  /* Der Versandkasten zeigt, was das gewählte Paket am Versand und am Preis ändert; im grünen Ton, sobald der Versand frei ist. */
  .c-pack-options__ships {
    margin-top: var(--space-4, 16px);
  }

  .c-pack-options__ship {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .c-pack-options__ship--free {
    border-color: color-mix(in srgb, var(--color-status-available, #444) 20%, var(--color-bg-primary, #fff));
    background: color-mix(in srgb, var(--color-status-available, #444) 6%, var(--color-bg-primary, #fff));
  }

  .c-pack-options__ship-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1, 4px) var(--space-3, 12px);
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }

  .c-pack-options__ship--free .c-pack-options__ship-title {
    color: var(--color-status-available, #444);
  }

  .c-pack-options__ship-saving {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    color: var(--color-text-secondary, #666);
  }

  .c-pack-options__ship-saving .c-price {
    display: inline;
    font-size: inherit;
    font-weight: inherit;
  }

  .c-pack-options__bar {
    display: block;
    height: 6px;
    margin-top: var(--space-3, 12px);
    overflow: hidden;
    border-radius: var(--radius-full, 9999px);
    background: var(--color-border-default, #ddd);
  }

  .c-pack-options__bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-text-primary, #222);
  }

  .c-pack-options__ship--free .c-pack-options__bar > span {
    background: var(--color-status-available, #444);
  }

  .c-pack-options__ship-list {
    display: grid;
    gap: var(--space-1, 4px);
    margin: var(--space-3, 12px) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-pack-options__ship-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2, 8px);
  }

  .c-pack-options__ship-list .icon {
    flex: none;
    width: 14px;
    height: 14px;
    margin-top: 3px;
  }

  .c-pack-options__ship-list .c-pack-options__ship-on {
    color: var(--color-status-available, #444);
  }

  /* Unter dem Knopf: wie lange das Paket reicht und dass es eine einmalige Zahlung ist. */
  .c-pack-options__note {
    margin: 0;
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.6;
    text-align: center;
    color: var(--color-text-secondary, #666);
  }

  .c-pack-options__notes {
    display: grid;
    gap: 2px;
  }

  .c-pack-options__note strong {
    color: var(--color-text-primary, #222);
  }

  .c-pack-options--rows .c-pack-options__name {
    font-size: var(--text-base, 1rem);
  }

  .c-pack-options--rows .c-pack-options__label .c-price {
    flex-wrap: nowrap;
    font-size: var(--text-base, 1rem);
    font-weight: 600;
  }

  .c-pack-options__shipping {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-pack-options__shipping--free {
    color: var(--color-status-available, #444);
    font-weight: 500;
  }

  .c-pack-options__shipping .icon {
    width: 14px;
    height: 14px;
  }

  .c-pack-options--rows .c-pack-options__saving {
    position: static;
    border: 0;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-brand-highlight, #eee);
    color: var(--color-text-primary, #222);
  }

  .c-pack-options__best {
    position: absolute;
    top: -11px;
    right: var(--space-3, 12px);
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-inverse, #222);
    color: var(--color-text-inverse, #fff);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
  }
/* END_SNIPPET:c-pack-options */

/* START_SNIPPET:c-page-figure (INDEX:217) */
.c-page-figure {
    display: grid;
    gap: 2px;
    margin: 0;
  }

  .c-page-figure b {
    font: 500 clamp(1.4375rem, 2.5vw, 2rem) / 1.05 var(--font-heading);
    letter-spacing: -0.02em;
    color: var(--color-text-primary, #222);
  }

  .c-page-figure span {
    font-size: 0.78125rem;
    color: var(--dkd-quiet, #666);
  }
/* END_SNIPPET:c-page-figure */

/* START_SNIPPET:c-page-head (INDEX:218) */
/* .l-kopf of rechtliches.css: centred, 760 px wide, 28 px above and 36 px below, 14 px between the lines. */
  .c-page-head__head {
    display: grid;
    gap: 14px;
    justify-items: center;
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 0 36px;
    text-align: center;
  }

  .c-page-head__eyebrow {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra);
  }

  .c-page-head__title {
    margin: 0;
    font-size: clamp(2rem, 3.96vw, 3.25rem);
    line-height: 1.05;
  }

  .c-page-head__text {
    max-width: 560px;
    margin: 0;
    font-size: 0.96875rem;
    color: var(--dkd-quiet, #666);
  }

  .c-page-head__figures {
    display: flex;
    justify-content: center;
    gap: clamp(28px, 5vw, 64px);
    margin-top: 10px;
  }

  .c-page-head__figures .c-page-figure {
    text-align: center;
  }

  .c-page-head__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 24px;
    margin: 8px 0 0;
  }

  .c-page-head--left .c-page-head__actions {
    justify-content: flex-start;
  }

  /* .w-kopf of wissen.css: at the left edge, the title up to 60 px, the sentence 620 px wide. */
  .c-page-head--left .c-page-head__head {
    justify-items: start;
    max-width: none;
    margin: 0;
    padding: 0 0 40px;
    text-align: left;
  }

  .c-page-head--left .c-page-head__eyebrow {
    margin-top: 10px;
  }

  .c-page-head--left .c-page-head__title {
    margin-top: 10px;
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    line-height: 1.04;
  }

  .c-page-head--left .c-page-head__text {
    max-width: 620px;
    font-size: 1.03125rem;
    color: var(--color-text-primary, #222);
  }
/* END_SNIPPET:c-page-head */

/* START_SNIPPET:c-password-entry (INDEX:219) */
.main-password__enter {
    width: min(560px, 100%);
  }

  .main-password__toggle {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    cursor: pointer;
  }

  .main-password__fields {
    margin-top: var(--space-4, 16px);
    text-align: start;
  }

  .main-password__owner {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-password-entry */

/* START_SNIPPET:c-payment-icons (INDEX:220) */
/* Live stehen die Zeichen in Shopifys Maß von 38 × 24 in einer Reihe, die bei Bedarf umbricht; als Zeile aus Kacheln, wie die Bildreihen. */
  .c-payment-icons {
    display: block;
    line-height: 0;
  }

  .c-payment-icons__item {
    display: inline-block;
    margin: 0 var(--space-1, 4px) var(--space-1, 4px) 0;
  }

  .c-payment-icons__icon {
    display: block;
    width: 38px;
    height: 24px;
  }
/* END_SNIPPET:c-payment-icons */

/* START_SNIPPET:c-pdp-cards (INDEX:221) */
.c-pdp-cards {
    padding-top: 88px;
  }

  .c-pdp-cards .dkd-tags {
    margin: 0 0 6px;
  }

  .c-pdp-cards__lead {
    max-width: 620px;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-cards .c-pdp-cards__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-cards--three .c-pdp-cards__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .c-pdp-cards--one .c-pdp-cards__list {
    grid-template-columns: 1fr;
  }

  .c-pdp-cards__card,
  .c-pdp-cards__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .c-pdp-cards__link {
    color: inherit;
    text-decoration: none;
  }

  .c-pdp-cards__picture {
    position: relative;
    display: block;
    aspect-ratio: 1;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--color-dkd-platzhalter, #eee);
    border-radius: 14px;
  }

  .c-pdp-cards__picture > .c-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-pdp-cards__partner {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    gap: 2px;
    width: clamp(78px, 34%, 118px);
    padding: 5px 8px 6px;
    background: var(--color-bg-primary, #fff);
    border-radius: 8px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text-primary, #222) 8%, transparent);
  }

  .c-pdp-cards__partner small {
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-cards__partner .c-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .c-pdp-cards__words {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .c-pdp-cards__info {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text-link, #444);
  }

  .c-pdp-cards__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
  }

  .c-pdp-cards__text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.55;
  }

  .c-pdp-cards--one .c-pdp-cards__card {
    display: grid;
    grid-template-columns: minmax(0, 320px) 1fr;
    gap: 32px;
    align-items: center;
  }

  .c-pdp-cards--one .c-pdp-cards__picture {
    margin: 0;
  }

  .c-pdp-cards--one .c-pdp-cards__title {
    font-size: 1.375rem;
  }

  .c-pdp-cards--one .c-pdp-cards__text {
    max-width: 560px;
    font-size: 0.9375rem;
  }

  @media (max-width: 900px) {
    .c-pdp-cards .c-pdp-cards__list,
    .c-pdp-cards--three .c-pdp-cards__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 700px) {
    .c-pdp-cards--one .c-pdp-cards__card {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 560px) {
    .c-pdp-cards .c-pdp-cards__list,
    .c-pdp-cards--three .c-pdp-cards__list {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-cards */

/* START_SNIPPET:c-pdp-cash (INDEX:222) */
.c-pdp-cash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    font-size: 0.8125rem;
    background: var(--color-dkd-gelb, #eee);
    border-radius: 6px;
  }

  .c-pdp-cash__icon {
    flex: none;
    width: 16px;
    height: 16px;
  }
/* END_SNIPPET:c-pdp-cash */

/* START_SNIPPET:c-pdp-community (INDEX:223) */
.c-pdp-community {
    display: grid;
    gap: 16px;
  }

  .c-pdp-community__heading {
    margin: 8px 0 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.375rem;
    font-weight: 500;
  }

  /* A row that is swiped, as the draft shows it; the list reset of the core weighs more than one class. */
  .c-pdp-community .c-pdp-community__list {
    display: flex;
    gap: 10px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .c-pdp-community__list::-webkit-scrollbar {
    display: none;
  }

  .c-pdp-photo {
    flex: 0 0 31%;
    scroll-snap-align: start;
  }

  .c-pdp-photo__button {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    padding: 0;
    overflow: hidden;
    background: var(--dkd-tile, #eee);
    border: 0;
    border-radius: 10px;
    cursor: zoom-in;
  }

  .c-pdp-photo__button .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }

  .c-pdp-photo__button:hover .c-image {
    transform: scale(1.03);
  }

  .c-pdp-photo__caption {
    position: absolute;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78125rem;
    color: var(--color-text-inverse, #fff);
  }

  .c-pdp-photo__caption span {
    padding: 4px 10px;
    background: color-mix(in srgb, var(--color-text-primary, #222) 70%, transparent);
    border-radius: 99px;
  }

  .c-pdp-photo__caption i {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border-radius: 50%;
  }

  .c-pdp-photo__caption i svg {
    width: 15px;
    height: 15px;
  }

  .c-pdp-community__dialog {
    max-width: min(560px, calc(100vw - 48px));
    max-height: calc(100vh - 48px);
    padding: 0;
    overflow: visible;
    background: none;
    border: 0;
  }

  .c-pdp-community__dialog::backdrop {
    background: color-mix(in srgb, var(--color-text-primary, #222) 75%, transparent);
  }

  .c-pdp-community__card {
    position: relative;
  }

  .c-pdp-community__large img {
    display: block;
    max-width: 100%;
    max-height: calc(100vh - 48px);
    object-fit: contain;
    border-radius: 16px;
  }

  .c-pdp-community__name {
    position: absolute;
    bottom: 14px;
    left: 14px;
    padding: 5px 12px;
    font-size: 0.875rem;
    color: var(--color-text-inverse, #fff);
    background: color-mix(in srgb, var(--color-text-primary, #222) 70%, transparent);
    border-radius: 99px;
  }

  .c-pdp-community__close,
  .c-pdp-community__step {
    position: absolute;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--color-text-primary, #222) 15%, transparent);
    cursor: pointer;
  }

  .c-pdp-community__close {
    top: 12px;
    right: 12px;
  }

  .c-pdp-community__step {
    top: 50%;
    transform: translateY(-50%);
  }

  .c-pdp-community__step--previous {
    left: 12px;
  }

  .c-pdp-community__step--next {
    right: 12px;
  }

  @media (max-width: 640px) {
    .c-pdp-photo {
      flex-basis: 62%;
    }
  }
/* END_SNIPPET:c-pdp-community */

/* START_SNIPPET:c-pdp-compare (INDEX:224) */
.c-pdp-compare {
    padding-top: 80px;
  }

  .c-pdp-compare .dkd-head {
    max-width: 720px;
    margin-bottom: 36px;
  }

  .c-pdp-compare__lead {
    max-width: 640px;
    font-size: 1.0625rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-compare__table {
    overflow: hidden;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 14px;
  }

  .c-pdp-compare__table table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
  }

  .c-pdp-compare__table thead :is(th, td) {
    padding: 18px 22px 16px;
    font: 600 0.9375rem / 1.3 var(--font-heading, sans-serif);
    text-align: left;
    background: var(--color-bg-accent, #eee);
  }

  .c-pdp-compare__table thead th {
    width: 30%;
  }

  .c-pdp-compare__table thead img {
    display: block;
    width: auto;
    height: 20px;
  }

  .c-pdp-compare__table tbody :is(th, td) {
    padding: 16px 22px;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.45;
    text-align: left;
    vertical-align: top;
    border-top: 1px solid var(--dkd-line, #ddd);
  }

  .c-pdp-compare__table :is(th, td) + :is(th, td) {
    border-left: 1px solid var(--dkd-line, #ddd);
  }

  .c-pdp-compare__table tbody th b {
    display: block;
    font: 600 0.9375rem var(--font-heading, sans-serif);
  }

  .c-pdp-compare__table tbody th small {
    display: block;
    margin-top: 2px;
    font-size: 0.78125rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-compare__table td.c-pdp-compare__own b {
    font-weight: 500;
  }

  .c-pdp-compare__theirs {
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-compare__yes,
  .c-pdp-compare__no,
  .c-pdp-compare__partly {
    margin-right: 8px;
    font-weight: 700;
  }

  .c-pdp-compare__yes {
    color: var(--color-dkd-gruen, #333);
  }

  .c-pdp-compare__no {
    color: var(--color-dkd-rot, #666);
  }

  .c-pdp-compare__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1040px;
    margin: 0 auto;
  }

  .c-pdp-compare__column {
    padding: 28px clamp(20px, 3vw, 40px) 32px;
  }

  .c-pdp-compare__column--own {
    background: var(--color-bg-accent, #eee);
    border-radius: 14px 14px 0 0;
  }

  .c-pdp-compare__column h3 {
    margin: 0 0 18px;
    font-size: 1.25rem;
    font-weight: 600;
    text-align: center;
  }

  .c-pdp-compare__column ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-compare__column li {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    font-size: 0.90625rem;
    border-bottom: 1px solid color-mix(in srgb, var(--color-text-primary, #222) 10%, transparent);
  }

  .c-pdp-compare__column li:last-child {
    border-bottom: 0;
  }

  .c-pdp-compare__column--own li::before {
    content: '✓';
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 0.6875rem;
    font-weight: 700;
    color: var(--color-text-inverse, #fff);
    background: var(--color-text-primary, #222);
    border-radius: 50%;
  }

  .c-pdp-compare__column--theirs li {
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-compare__column--theirs li::before {
    content: '–';
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    background: var(--dkd-tile, #eee);
    border-radius: 50%;
  }

  .c-pdp-compare__note {
    margin: 16px 0 0;
    font-size: 0.78125rem;
    color: var(--dkd-quiet, #666);
  }

  @media (max-width: 700px) {
    .c-pdp-compare__table :is(th, td) {
      padding: 14px 12px;
      font-size: 0.875rem;
    }
  }

  @media (max-width: 640px) {
    .c-pdp-compare__columns {
      font-size: 0.8125rem;
    }

    .c-pdp-compare__column {
      padding: 20px 12px;
    }

    .c-pdp-compare__column li {
      grid-template-columns: 18px 1fr;
      gap: 8px;
      font-size: 0.8125rem;
    }
  }
/* END_SNIPPET:c-pdp-compare */

/* START_SNIPPET:c-pdp-contact (INDEX:225) */
.c-pdp-contact {
    display: grid;
    gap: 8px;
  }

  .c-pdp-contact__heading {
    margin: 0;
    font-size: 0.84375rem;
    font-weight: 600;
  }

  .c-pdp-contact__link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: 0.875rem;
    color: inherit;
    text-decoration: none;
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 8px;
  }

  .c-pdp-contact__link:hover {
    border-color: var(--color-text-primary, #222);
  }

  .c-pdp-contact__icon {
    width: 16px;
    height: 16px;
  }
/* END_SNIPPET:c-pdp-contact */

/* START_SNIPPET:c-pdp-contents (INDEX:226) */
.c-pdp-contents {
    padding-top: 64px;
    scroll-margin-top: 96px;
  }

  .c-pdp-contents__head {
    max-width: none;
  }

  .c-pdp-contents__lead {
    max-width: 620px;
  }

  .c-pdp-contents--small .dkd-title {
    font-size: clamp(1.4375rem, 2.24vw, 1.875rem);
  }

  .c-pdp-contents--small .c-pdp-contents__lead {
    font-size: 1.0625rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-contents__video {
    margin: 0 0 32px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-text-primary, #222);
    border-radius: 14px;
  }

  .c-pdp-contents__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-pdp-contents__table {
    overflow: hidden;
    border: 1px solid var(--color-text-primary, #222);
    border-radius: 14px;
  }

  .c-pdp-contents__table table {
    width: 100%;
    font-size: 0.90625rem;
    border-collapse: collapse;
  }

  .c-pdp-contents__table th {
    padding: 16px 22px;
    font-size: 0.84375rem;
    font-weight: 600;
    text-align: left;
    border-bottom: 1px solid var(--color-text-primary, #222);
  }

  .c-pdp-contents__table td {
    padding: 18px 22px;
    vertical-align: top;
    border-top: 1px solid var(--dkd-line, #ddd);
  }

  .c-pdp-contents__table tr:nth-child(even) td {
    background: color-mix(in srgb, var(--dkd-tile, #eee) 40%, var(--color-bg-primary, #fff));
  }

  .c-pdp-contents__table td:first-child {
    width: 120px;
    white-space: nowrap;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-contents__table td:nth-child(2) {
    width: 28%;
    font-weight: 500;
  }

  .c-pdp-contents__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .c-pdp-contents__topics span {
    padding: 4px 9px;
    font-size: 0.78125rem;
    background: var(--color-bg-accent, #eee);
    border-radius: 4px;
  }

  .c-pdp-contents__bonus td:first-child {
    color: var(--color-dkd-ocker, #666);
  }

  .c-pdp-contents__bonus .c-pdp-contents__topics span {
    background: var(--color-dkd-gelb, #eee);
  }

  @media (max-width: 640px) {
    .c-pdp-contents__table :is(th, td):first-child {
      display: none;
    }

    .c-pdp-contents__table :is(th, td) {
      padding: 14px;
    }

    .c-pdp-contents__table td:nth-child(2) {
      width: 38%;
    }
  }
/* END_SNIPPET:c-pdp-contents */

/* START_SNIPPET:c-pdp-cooperation (INDEX:227) */
.c-pdp-cooperation {
    padding-top: 88px;
  }

  .c-pdp-cooperation__tile {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(24px, 3.5vw, 44px);
    background: var(--color-bg-secondary, #eee);
    border-radius: 22px;
  }

  .c-pdp-cooperation__words {
    display: grid;
    gap: 14px;
    padding: clamp(4px, 1.5vw, 20px);
  }

  .c-pdp-cooperation__logo .c-image {
    width: min(300px, 70%);
    height: auto;
    margin: 0 0 10px -10px;
  }

  .c-pdp-cooperation__words p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
  }

  .c-pdp-cooperation__words b {
    font-weight: 600;
  }

  .c-pdp-cooperation__people {
    display: grid;
    gap: 16px;
  }

  .c-pdp-cooperation__people figure {
    position: relative;
    margin: 0;
    aspect-ratio: 5 / 3;
    overflow: hidden;
    border-radius: 16px;
  }

  .c-pdp-cooperation__people .c-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-pdp-cooperation__people figcaption {
    position: absolute;
    bottom: 14px;
    left: 14px;
    display: grid;
    gap: 1px;
    padding: 8px 12px;
    font-size: 0.78125rem;
    color: var(--dkd-quiet, #666);
    background: color-mix(in srgb, var(--color-bg-primary, #fff) 92%, transparent);
    border-radius: 10px;
  }

  .c-pdp-cooperation__people figcaption b {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary, #222);
  }

  @media (max-width: 900px) {
    .c-pdp-cooperation__tile {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-cooperation */

/* START_SNIPPET:c-pdp-crumbs (INDEX:228) */
.c-pdp-crumbs {
    padding-block: 18px;
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }

  /* Die Tap-Fläche wächst nach oben und unten, die Zeile bleibt gleich hoch. */
  .c-pdp-crumbs a {
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
    color: inherit;
    text-decoration: none;
  }

  .c-pdp-crumbs a:hover {
    color: var(--color-text-primary, #222);
  }
/* END_SNIPPET:c-pdp-crumbs */

/* START_SNIPPET:c-pdp-details (INDEX:229) */
.c-pdp-details {
    border-top: 1px solid var(--dkd-line, #ddd);
  }

  .c-pdp-details__entry {
    border-bottom: 1px solid var(--dkd-line, #ddd);
  }

  .c-pdp-details__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 0;
    font-size: 0.9375rem;
    font-weight: 500;
    list-style: none;
    cursor: pointer;
  }

  .c-pdp-details__title::-webkit-details-marker {
    display: none;
  }

  .c-pdp-details__title .icon {
    flex: none;
    width: 18px;
    height: 18px;
    stroke-width: 2;
  }

  /* Open, the plus keeps only its bar (– of the draft). */
  .c-pdp-details__entry[open] .c-pdp-details__title .icon {
    clip-path: inset(calc(50% - 1.5px) 0);
  }

  .c-pdp-details__body {
    display: grid;
    gap: 10px;
    padding: 0 0 18px;
    font-size: 0.90625rem;
  }

  .c-pdp-details__body > * {
    margin: 0;
  }

  .c-pdp-details__body ul {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-left: 18px;
  }

  .c-pdp-details__modules {
    display: grid;
    gap: 12px;
  }

  .c-pdp-details__modules p {
    margin: 0;
  }

  .c-pdp-details__modules b {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
  }
/* END_SNIPPET:c-pdp-details */

/* START_SNIPPET:c-pdp-experts (INDEX:230) */
.c-pdp-experts {
    padding-top: 88px;
  }

  .c-pdp-experts__head {
    margin-bottom: 48px;
  }

  .c-pdp-experts__head .dkd-title {
    max-width: 640px;
    margin-top: 16px;
  }

  .c-pdp-experts .dkd-tags {
    margin: 0;
  }

  /* Rows that are swiped, as the draft shows them; the list reset of the core weighs more than one class. */
  .c-pdp-experts .c-pdp-experts__row,
  .c-pdp-experts .c-pdp-experts__parents {
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    list-style: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .c-pdp-experts__row::-webkit-scrollbar,
  .c-pdp-experts__parents::-webkit-scrollbar {
    display: none;
  }

  .c-pdp-experts__expert {
    flex: 0 0 calc((100% - 40px) / 3.25);
    scroll-snap-align: start;
  }

  .c-pdp-experts__expert figure {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 14px;
  }

  .c-pdp-experts__expert .c-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background: var(--dkd-tile, #eee);
  }

  .c-pdp-experts__words {
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 12px;
    padding: 18px 20px 22px;
  }

  .c-pdp-experts__words blockquote {
    margin: 0;
  }

  .c-pdp-experts__words blockquote p {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.4;
  }

  .c-pdp-experts__words blockquote p::before {
    content: '„';
  }

  .c-pdp-experts__words blockquote p::after {
    content: '“';
  }

  .c-pdp-experts__words figcaption {
    display: grid;
    gap: 2px;
    font-size: 0.8125rem;
  }

  .c-pdp-experts__words figcaption b {
    font-weight: 600;
  }

  .c-pdp-experts__words figcaption span {
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-experts .c-pdp-experts__parents {
    gap: 16px;
    margin-top: 20px;
    padding-bottom: 4px;
  }

  .c-pdp-experts__parent {
    display: grid;
    flex: 0 0 calc((100% - 48px) / 4);
    align-content: start;
    gap: 10px;
    padding: 22px 22px 26px;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 14px;
    scroll-snap-align: start;
  }

  .c-pdp-experts__parent > * {
    margin: 0;
  }

  .c-pdp-experts__who {
    display: flex;
    gap: 12px;
    align-items: center;
  }

  .c-pdp-experts__who .c-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 50%;
  }

  .c-pdp-experts__who > span {
    display: grid;
    gap: 2px;
    font-size: 0.8125rem;
  }

  .c-pdp-experts__parent h3 {
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0;
  }

  .c-pdp-experts__parent p:last-child {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--dkd-quiet, #666);
  }

  @media (max-width: 860px) {
    .c-pdp-experts__expert {
      flex-basis: 80%;
    }

    .c-pdp-experts__parent {
      flex-basis: 82%;
    }
  }
/* END_SNIPPET:c-pdp-experts */

/* START_SNIPPET:c-pdp-features (INDEX:232) */
.c-pdp-features {
    padding-top: 64px;
  }

  .c-pdp-features--tight {
    padding-top: 0;
  }

  .c-pdp-features__intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 20px;
  }

  .c-pdp-features > .dkd-head + .c-pdp-features__intro {
    margin-top: 0;
  }

  .c-pdp-features__words {
    display: grid;
    align-content: center;
    gap: 16px;
    padding: clamp(28px, 4vw, 56px);
    background: var(--color-bg-secondary, #eee);
    border-radius: 22px;
  }

  .c-pdp-features__words h3 {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.12;
  }

  .c-pdp-features__words p,
  .c-pdp-features__card p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
  }

  .c-pdp-features :is(p, li) b {
    font-weight: 600;
  }

  .c-pdp-features__media {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--dkd-tile, #eee);
    border-radius: 22px;
  }

  .c-pdp-features__media :is(video, .c-image) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-pdp-features .c-pdp-features__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-features__card {
    display: grid;
    align-content: start;
    gap: 10px;
    padding: 16px 16px 26px;
    background: var(--color-bg-secondary, #eee);
    border-radius: 22px;
  }

  .c-pdp-features__card .c-image {
    width: 100%;
    aspect-ratio: 1;
    margin-bottom: 8px;
    object-fit: cover;
    border-radius: 14px;
  }

  .c-pdp-features__card h3 {
    margin: 0;
    padding: 0 8px;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.2;
  }

  .c-pdp-features__card p {
    padding: 0 8px;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  @media (max-width: 1000px) {
    .c-pdp-features__intro,
    .c-pdp-features .c-pdp-features__cards {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-features */

/* START_SNIPPET:c-pdp-gift (INDEX:233) */
.c-pdp-gift {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 12px;
    align-items: center;
    margin: 12px 0;
    padding: 12px 14px 12px 12px;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-secondary, #eee);
    border-radius: 12px;
  }

  .c-pdp-gift__media {
    position: relative;
    display: block;
    width: 64px;
    height: 64px;
  }

  .c-pdp-gift__media .c-image {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 8px;
    background: var(--color-bg-primary, #fff);
  }

  .c-pdp-gift__bow {
    position: absolute;
    top: -7px;
    left: -7px;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    color: var(--color-text-primary, #222);
    background: var(--color-brand-highlight, orange);
    border: 2px solid var(--color-bg-secondary, #eee);
    border-radius: 50%;
  }

  .c-pdp-gift__body {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .c-pdp-gift__label {
    font-size: 0.75rem;
    font-weight: 600;
  }

  .c-pdp-gift__name {
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.25;
  }

  .c-pdp-gift__detail {
    font-size: 0.78125rem;
    line-height: 1.35;
  }

  .c-pdp-gift__price {
    display: grid;
    gap: 3px;
    justify-items: end;
    text-align: right;
  }

  .c-pdp-gift__flag {
    padding: 2px 7px;
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--color-brand-accent, #ddd);
    border-radius: 3px;
  }

  .c-pdp-gift__amount {
    font-size: 0.9375rem;
    font-weight: 700;
    white-space: nowrap;
  }

  .c-pdp-gift__amount s {
    margin-right: 2px;
    font-weight: 400;
    font-size: 0.8125rem;
  }

  .c-pdp-gift__shipping {
    font-size: 0.71875rem;
    white-space: nowrap;
  }

  @media (max-width: 480px) {
    .c-pdp-gift {
      grid-template-columns: 56px 1fr;
    }

    .c-pdp-gift__media,
    .c-pdp-gift__media .c-image {
      width: 56px;
      height: 56px;
    }

    .c-pdp-gift__price {
      display: flex;
      flex-wrap: wrap;
      grid-column: 2;
      align-items: center;
      gap: 4px 8px;
      text-align: left;
    }
  }
/* END_SNIPPET:c-pdp-gift */

/* START_SNIPPET:c-pdp-head (INDEX:234) */
.c-pdp-head {
    display: grid;
    gap: 16px;
  }

  .c-pdp-head > * {
    margin: 0;
  }

  .c-pdp-head__rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.84375rem;
  }

  .c-pdp-head__rating b {
    font-weight: 600;
  }

  .c-pdp-head__rating-link {
    color: var(--dkd-quiet, #666);
  }

  a.c-pdp-head__rating-link {
    display: inline-block;
    padding-block: 11px;
    margin-block: -11px;
  }

  .c-pdp-head__booked {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
  }

  .c-pdp-head__booked b {
    font-weight: 600;
  }

  .c-pdp-head__faces {
    display: flex;
  }

  .c-pdp-head__faces .c-image {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border: 2px solid var(--color-bg-primary, #fff);
    border-radius: 50%;
  }

  .c-pdp-head__faces .c-image + .c-image {
    margin-left: -8px;
  }
/* END_SNIPPET:c-pdp-head */

/* START_SNIPPET:c-pdp-hint (INDEX:235) */
.c-pdp-hint {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    font-size: 0.8125rem;
  }

  .c-pdp-hint > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .c-pdp-hint__ready {
    color: var(--color-dkd-gruen, #333);
  }

  .c-pdp-hint__ready::before {
    content: '';
    flex: none;
    width: 8px;
    height: 8px;
    background: var(--color-dkd-gruenhell, #999);
    border-radius: 50%;
    animation: c-pdp-hint-pulse 1.8s ease-out infinite;
  }

  .c-pdp-hint__icon {
    width: 18px;
    height: 18px;
  }

  @keyframes c-pdp-hint-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-dkd-gruenhell, currentColor) 55%, transparent); }
    70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--color-dkd-gruenhell, currentColor) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-dkd-gruenhell, currentColor) 0%, transparent); }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-pdp-hint__ready::before {
      animation: none;
    }
  }
/* END_SNIPPET:c-pdp-hint */

/* START_SNIPPET:c-pdp-icons (INDEX:237) */
.c-pdp-icons {
    padding-block: 56px 24px;
  }

  .c-pdp-icons .c-pdp-icons__list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-icon {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 14px;
    align-items: center;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .c-pdp-icon__mark {
    width: 40px;
    height: 40px;
    color: var(--color-text-link, #444);
  }

  @media (max-width: 1000px) {
    .c-pdp-icons .c-pdp-icons__list {
      grid-template-columns: 1fr 1fr;
    }
  }
/* END_SNIPPET:c-pdp-icons */

/* START_SNIPPET:c-pdp-important (INDEX:238) */
.c-pdp-important {
    padding-top: 88px;
  }

  .c-pdp-important__tile {
    padding: 64px 56px 56px;
    text-align: center;
    background: var(--color-bg-secondary, #eee);
    border-radius: 24px;
  }

  .c-pdp-important__tile h2 {
    margin: 0 0 20px;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  .c-pdp-important__text {
    max-width: 720px;
    margin: 0 auto 12px;
    font-size: 0.96875rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-important .c-pdp-important__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 40px 0 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-important__cards li {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 12px;
    padding: 32px 28px 34px;
    background: var(--color-bg-primary, #fff);
    border-radius: 16px;
  }

  .c-pdp-important__cards .c-pdp-important__stamp {
    margin-bottom: 6px;
    --badge-size: 104px;
  }

  .c-pdp-important__cards h3 {
    margin: 0;
    font-size: 1.25rem;
  }

  .c-pdp-important__cards p {
    margin: 0;
    font-size: 0.90625rem;
    color: var(--dkd-quiet, #666);
  }

  @media (max-width: 860px) {
    .c-pdp-important__tile {
      padding: 40px 20px;
    }

    .c-pdp-important .c-pdp-important__cards {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-important */

/* START_SNIPPET:c-pdp-lead (INDEX:239) */
.c-pdp-lead {
    display: grid;
    gap: 16px;
  }

  .c-pdp-lead > * {
    margin: 0;
  }

  .c-pdp-lead__checks {
    display: grid;
    gap: 8px;
    padding: 0;
    font-size: 0.9375rem;
    list-style: none;
  }

  .c-pdp-lead__checks li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
  }

  .c-pdp-lead__checks li::before {
    content: '';
    width: 18px;
    height: 18px;
    margin-top: 2px;
    background: var(--color-text-primary, #222);
    /* The bold check of the draft as a data address: a file address would resolve beside the bundled styles, not the assets. */
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5l5 5L20 6.5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  }

  .c-pdp-lead__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .c-pdp-lead__facts span {
    padding: 6px 12px;
    font-size: 0.8125rem;
    background: var(--dkd-tile, #eee);
    border-radius: 99px;
  }

  .c-pdp-lead__facts b {
    font-weight: 600;
  }
/* END_SNIPPET:c-pdp-lead */

/* START_SNIPPET:c-pdp-media (INDEX:240) */
/* Lies on the first picture: the square track starts at the top of the gallery. */
  .c-pdp-media {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    aspect-ratio: 1;
    pointer-events: none;
  }

  .c-pdp-media .c-pdp-media__stamp {
    position: absolute;
    top: 6%;
    right: 6%;
    --badge-size: 22%;
  }

  .c-pdp-media .c-pdp-media__stamp--print {
    --badge-bg: var(--color-dkd-hellblau, #ddd);
  }

  .c-pdp-media__partner {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    gap: 3px;
    width: clamp(120px, 26%, 170px);
    padding: 8px 12px 10px;
    background: var(--color-bg-primary, #fff);
    border-radius: 12px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-text-primary, #222) 10%, transparent);
  }

  .c-pdp-media__partner small {
    font-size: 0.59375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-media__partner .c-image {
    width: 100%;
    height: auto;
  }

  .c-pdp-media[data-away] {
    display: none;
  }
/* END_SNIPPET:c-pdp-media */

/* START_SNIPPET:c-pdp-pack (INDEX:241) */
.c-pdp-pack {
    position: relative;
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 4px 10px;
    align-items: center;
    padding: 14px 14px 14px 12px;
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s;
  }

  .c-pdp-pack:has(input:checked) {
    border-color: var(--color-text-primary, #222);
    box-shadow: inset 0 0 0 1px var(--color-text-primary, #222);
  }

  .c-pdp-pack--picture {
    padding-right: 64px;
  }

  .c-pdp-pack input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--color-text-primary, #222);
  }

  .c-pdp-pack__name {
    font-size: 0.90625rem;
    font-weight: 600;
  }

  .c-pdp-pack__price {
    grid-column: 2;
    font-size: 0.84375rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-pack__note {
    grid-column: 2;
    font-size: 0.78125rem;
    line-height: 1.35;
    color: var(--color-text-primary, #222);
  }

  .c-pdp-pack__price s {
    margin-left: 4px;
  }

  .c-pdp-pack__picture {
    position: absolute;
    right: 16px;
    bottom: 7px;
    pointer-events: none;
  }

  .c-pdp-pack__picture .c-image {
    width: auto;
    height: 46px;
  }

  .c-pdp-pack__flag {
    position: absolute;
    top: -9px;
    right: 10px;
    padding: 3px 7px;
    font-size: 0.65625rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-primary, #222);
    background: var(--color-dkd-hellblau, #ddd);
    border-radius: 3px;
  }
/* END_SNIPPET:c-pdp-pack */

/* START_SNIPPET:c-pdp-packs (INDEX:242) */
/* Eigenes Element ist sonst inline: der Abstand zum Warenkorb-Knopf (margin-top des Formulars) griffe nicht. */
  .c-pdp-packs {
    display: block;
    margin-bottom: 12px;
  }

  .c-pdp-packs__set {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .c-pdp-packs__legend {
    margin-bottom: 8px;
    padding: 0;
    font-size: 0.84375rem;
    font-weight: 600;
  }

  .c-pdp-packs__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  @media (max-width: 640px) {
    .c-pdp-packs__cards {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-packs */

/* START_SNIPPET:c-pdp-pages (INDEX:243) */
.c-pdp-pages {
    padding-top: 40px;
  }

  .c-pdp-pages__band {
    padding: 12px 0 24px;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
    mask: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  }

  .c-pdp-pages__run {
    display: flex;
    gap: 28px;
    width: max-content;
    animation: c-pdp-pages-run calc(var(--sheets, 10) * 4.5s) linear infinite;
  }

  .c-pdp-pages__band:hover .c-pdp-pages__run {
    animation-play-state: paused;
  }

  .c-pdp-pages__sheet {
    flex: none;
    width: clamp(180px, 17vw, 250px);
    aspect-ratio: 360 / 509;
    overflow: hidden;
    background: var(--color-bg-primary, #fff);
    border-radius: 6px;
    box-shadow:
      0 10px 26px color-mix(in srgb, var(--color-text-primary, #222) 12%, transparent),
      0 2px 6px color-mix(in srgb, var(--color-text-primary, #222) 6%, transparent);
  }

  .c-pdp-pages__sheet .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @keyframes c-pdp-pages-run {
    to {
      transform: translateX(calc(-50% - 14px));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-pdp-pages__run {
      animation: none;
    }
  }
/* END_SNIPPET:c-pdp-pages */

/* START_SNIPPET:c-pdp-partner (INDEX:244) */
.c-pdp-partner {
    padding-top: 88px;
  }

  .c-pdp-partner__tile {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding: clamp(24px, 4vw, 56px);
    background: var(--color-bg-secondary, #eee);
    border-radius: 22px;
  }

  .c-pdp-partner__logo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    padding: clamp(28px, 4vw, 48px);
    background: var(--color-bg-primary, #fff);
    border-radius: 18px;
  }

  .c-pdp-partner__logo .c-image {
    width: 100%;
    height: auto;
  }

  .c-pdp-partner__words {
    display: grid;
    gap: 14px;
  }

  .c-pdp-partner__words > * {
    margin: 0;
  }

  .c-pdp-partner__role {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-dkd-terra, #999);
  }

  .c-pdp-partner__words h2 {
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    line-height: 1.1;
  }

  .c-pdp-partner__words p {
    font-size: 1rem;
    line-height: 1.65;
  }

  .c-pdp-partner__words b {
    font-weight: 600;
  }

  .c-pdp-partner .c-pdp-partner__words ul {
    display: grid;
    gap: 8px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-partner__words li {
    display: grid;
    grid-template-columns: 18px 1fr;
    gap: 10px;
    font-size: 0.9375rem;
  }

  .c-pdp-partner__words li::before {
    content: '✓';
    font-weight: 600;
    color: var(--color-text-primary, #222);
  }

  @media (max-width: 900px) {
    .c-pdp-partner__tile {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-partner */

/* START_SNIPPET:c-pdp-parts (INDEX:245) */
.c-pdp-parts dkd-parts {
    display: block;
  }

  .c-pdp-parts {
    padding-top: 64px;
    scroll-margin-top: 96px;
  }

  .c-pdp-parts__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 8px;
    margin-bottom: 28px;
  }

  .c-pdp-parts__tabs[hidden] {
    display: none;
  }

  .c-pdp-parts__tab {
    min-height: 44px;
    padding: 9px 16px;
    font: 500 0.875rem var(--font-body, sans-serif);
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 99px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
  }

  .c-pdp-parts__tab span {
    margin-left: 4px;
    font-weight: 400;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-parts__tab:hover {
    border-color: var(--color-text-primary, #222);
  }

  .c-pdp-parts__tab[aria-selected='true'] {
    color: var(--color-text-inverse, #fff);
    background: var(--color-text-primary, #222);
    border-color: var(--color-text-primary, #222);
  }

  .c-pdp-parts__tab[aria-selected='true'] span {
    color: color-mix(in srgb, var(--color-text-inverse, #fff) 70%, transparent);
  }

  .c-pdp-parts__topic {
    margin: -12px 0 20px;
    font-size: 0.875rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-parts__topic:empty {
    display: none;
  }

  .c-pdp-parts .c-pdp-parts__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-parts__item[hidden] {
    display: none;
  }

  .c-pdp-parts__part {
    display: grid;
    align-content: start;
    gap: 10px;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: 0;
    cursor: zoom-in;
  }

  .c-pdp-parts__picture {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-dkd-platzhalter, #eee);
    border-radius: 10px;
    transition: transform 0.2s;
  }

  .c-pdp-parts__part:hover .c-pdp-parts__picture {
    transform: scale(1.03);
  }

  .c-pdp-parts__picture .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-pdp-parts__part b {
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.35;
  }

  .c-pdp-parts__dialog {
    width: min(560px, calc(100vw - 48px));
    padding: 0;
    overflow: hidden;
    background: var(--color-bg-primary, #fff);
    border: 0;
    border-radius: 18px;
  }

  .c-pdp-parts__dialog::backdrop {
    background: color-mix(in srgb, var(--color-text-primary, #222) 55%, transparent);
  }

  .c-pdp-parts__card {
    position: relative;
  }

  .c-pdp-parts__large {
    aspect-ratio: 1;
    background: var(--color-dkd-platzhalter, #eee);
  }

  .c-pdp-parts__large img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-pdp-parts__caption {
    display: grid;
    gap: 4px;
    margin: 0;
    padding: 20px 24px 24px;
  }

  .c-pdp-parts__caption b {
    font: 600 1.1875rem var(--font-heading, sans-serif);
  }

  .c-pdp-parts__caption span {
    font-size: 0.875rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-parts__close,
  .c-pdp-parts__step {
    position: absolute;
    z-index: 1;
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 1.125rem;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 0;
    border-radius: 50%;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--color-text-primary, #222) 15%, transparent);
    cursor: pointer;
  }

  .c-pdp-parts__close {
    top: 12px;
    right: 12px;
    font-size: 1.25rem;
  }

  .c-pdp-parts__step {
    top: 40%;
  }

  .c-pdp-parts__step--previous {
    left: 12px;
  }

  .c-pdp-parts__step--next {
    right: 12px;
  }
/* END_SNIPPET:c-pdp-parts */

/* START_SNIPPET:c-pdp-people (INDEX:246) */
.c-pdp-people {
    padding-top: 88px;
  }

  .c-pdp-people .dkd-tags {
    margin: 0 0 6px;
  }

  .c-pdp-people__person {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .c-pdp-people__person + .c-pdp-people__person {
    margin-top: 20px;
  }

  .c-pdp-people__person--turned .c-pdp-people__portrait {
    order: 2;
  }

  .c-pdp-people__portrait {
    min-height: 100%;
    overflow: hidden;
    background: var(--dkd-tile, #eee);
    border-radius: 22px;
  }

  .c-pdp-people__portrait .c-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
  }

  .c-pdp-people__words {
    display: grid;
    align-content: center;
    gap: 16px;
    padding: clamp(28px, 4vw, 56px);
    background: var(--color-bg-secondary, #eee);
    border-radius: 22px;
  }

  .c-pdp-people__words > * {
    margin: 0;
  }

  .c-pdp-people__role {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-dkd-terra, #999);
  }

  .c-pdp-people__words h3 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 500;
    line-height: 1.12;
  }

  .c-pdp-people__words p {
    font-size: 1rem;
    line-height: 1.65;
  }

  .c-pdp-people__words ul {
    display: grid;
    gap: 6px;
    padding-left: 20px;
    font-size: 1rem;
    line-height: 1.55;
  }

  .c-pdp-people__words li::marker {
    color: var(--color-dkd-terra, #999);
  }

  @media (max-width: 1000px) {
    .c-pdp-people__person {
      grid-template-columns: 1fr;
    }

    .c-pdp-people__person--turned .c-pdp-people__portrait {
      order: 0;
    }

    .c-pdp-people__portrait {
      aspect-ratio: 4 / 5;
    }
  }
/* END_SNIPPET:c-pdp-people */

/* START_SNIPPET:c-pdp-promise (INDEX:248) */
.c-pdp-promise {
    display: grid;
    gap: 18px;
    padding: 24px 24px 26px;
    background: var(--color-bg-accent, #eee);
    border-radius: 14px;
  }

  .c-pdp-promise__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
  }

  .c-pdp-promise__heading {
    margin: 0;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .c-pdp-promise__badges {
    display: flex;
    gap: 8px;
    --badge-size: 78px;
    --badge-bg: var(--color-bg-primary, #fff);
  }

  .c-pdp-promise .c-pdp-promise__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 20px;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    list-style: none;
  }

  .c-pdp-promise__list li {
    display: flex;
    gap: 10px;
    align-items: baseline;
  }

  .c-pdp-promise__list li::before {
    content: '✔';
    font-size: 0.8125rem;
    color: var(--color-text-primary, #222);
  }

  @media (max-width: 640px) {
    .c-pdp-promise .c-pdp-promise__list {
      grid-template-columns: 1fr;
    }

    /* Am Telefon kleinere Stempel, die Überschrift gibt nach: nichts ragt aus der Kachel. */
    .c-pdp-promise__badges {
      --badge-size: 64px;
      flex-shrink: 0;
    }

    .c-pdp-promise__heading {
      min-width: 0;
      font-size: 1.25rem;
    }
  }

  /* Ganz schmal stehen die Stempel unter der Überschrift statt daneben. */
  @media (max-width: 400px) {
    .c-pdp-promise__head {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  }
/* END_SNIPPET:c-pdp-promise */

/* START_SNIPPET:c-pdp-quote (INDEX:250) */
.c-pdp-quote {
    margin-top: 40px;
    padding-top: 64px;
    padding-bottom: 24px;
  }

  .c-pdp-quote__figure {
    display: grid;
    justify-items: center;
    gap: 18px;
    margin: 0;
    text-align: center;
  }

  .c-pdp-quote__words {
    margin: 0;
  }

  .c-pdp-quote__words p {
    max-width: 760px;
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(1.25rem, 2vw, 1.6875rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.01em;
  }

  .c-pdp-quote__figure figcaption {
    display: grid;
    justify-items: center;
    gap: 18px;
  }

  .c-pdp-quote__greeting {
    font-size: 1.75rem;
    line-height: 1;
  }

  .c-pdp-quote__role {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }
/* END_SNIPPET:c-pdp-quote */

/* START_SNIPPET:c-pdp-related (INDEX:251) */
.c-pdp-related {
    padding-top: 20px;
    padding-bottom: 80px;
  }

  .c-pdp-related__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
  }

  .c-pdp-related__heading {
    margin: 10px 0 0;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  .c-pdp-related .c-pdp-related__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 1000px) {
    .c-pdp-related__head {
      flex-direction: column;
      align-items: flex-start;
    }

    .c-pdp-related .c-pdp-related__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
/* END_SNIPPET:c-pdp-related */

/* START_SNIPPET:c-pdp-reviews (INDEX:254) */
.c-pdp-reviews {
    padding-block: 80px;
    scroll-margin-top: 96px;
  }

  .c-pdp-reviews__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--dkd-line, #ddd);
  }

  .c-pdp-reviews__score {
    display: grid;
    gap: 4px;
    margin: 0;
    font: inherit;
  }

  .c-pdp-reviews__score b {
    font-family: var(--font-heading, sans-serif);
    font-size: 2.375rem;
    font-weight: 500;
    line-height: 1;
  }

  .c-pdp-reviews__score-label {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-reviews .c-pdp-reviews__bars {
    display: grid;
    gap: 5px;
    min-width: 240px;
    margin: 0;
    padding: 0;
    font-size: 0.78125rem;
    color: var(--dkd-quiet, #666);
    list-style: none;
  }

  .c-pdp-review-bar {
    display: grid;
    grid-template-columns: 28px 1fr 44px;
    gap: 10px;
    align-items: center;
  }

  .c-pdp-review-bar i {
    display: block;
    height: 6px;
    overflow: hidden;
    background: var(--dkd-tile, #eee);
    border-radius: 9px;
  }

  .c-pdp-review-bar i::after {
    content: '';
    display: block;
    width: var(--share);
    height: 100%;
    background: var(--color-text-primary, #222);
  }

  .c-pdp-reviews .c-pdp-reviews__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .dkd-review {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    padding: 28px 0;
    border-bottom: 1px solid var(--dkd-line, #ddd);
  }

  .dkd-review__who {
    display: grid;
    align-content: start;
    gap: 4px;
    margin: 0;
    font-size: 0.8125rem;
  }

  .dkd-review__who .c-image,
  .dkd-review__disc {
    width: 44px;
    height: 44px;
    margin-bottom: 6px;
    border-radius: 50%;
  }

  .dkd-review__who .c-image {
    object-fit: cover;
    object-position: 50% 25%;
  }

  .dkd-review__disc {
    display: grid;
    place-items: center;
    font: normal 600 0.9375rem var(--font-body, sans-serif);
    background: var(--color-dkd-hellblau, #ddd);
  }

  .dkd-review__disc--1 {
    background: var(--color-dkd-gelb, #eee);
  }

  .dkd-review__disc--2 {
    background: var(--color-dkd-sand, #eee);
  }

  .dkd-review__disc--3 {
    background: var(--color-bg-accent, #eee);
  }

  .dkd-review__who b {
    font-size: 0.90625rem;
    font-weight: 600;
  }

  .dkd-review__who span {
    color: var(--dkd-quiet, #666);
  }

  .dkd-review__body {
    display: grid;
    gap: 8px;
    max-width: 760px;
  }

  .dkd-review__body h3 {
    margin: 0;
    font: 600 1rem var(--font-body, sans-serif);
    letter-spacing: 0;
  }

  .dkd-review__body p {
    margin: 0;
    font-size: 0.9375rem;
  }

  .dkd-review__occasion {
    font-size: 0.78125rem;
    font-weight: 600;
    color: var(--color-dkd-terra, #999);
  }

  @media (max-width: 560px) {
    .c-pdp-reviews {
      padding-block: 56px;
    }
  }

  @media (max-width: 1000px) {
    .c-pdp-reviews__head {
      flex-direction: column;
      align-items: flex-start;
    }

    .dkd-review {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }
/* END_SNIPPET:c-pdp-reviews */

/* START_SNIPPET:c-pdp-steps (INDEX:255) */
.c-pdp-steps {
    padding-top: 64px;
  }

  .c-pdp-steps__tile {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
    padding: clamp(28px, 4.5vw, 64px);
    background: var(--color-bg-accent, #eee);
    border-radius: 22px;
  }

  .c-pdp-steps__roof {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra, #999);
  }

  .c-pdp-steps__words h2 {
    margin: 10px 0 16px;
    font-size: clamp(1.875rem, 3.2vw, 2.75rem);
    line-height: 1.08;
  }

  .c-pdp-steps__lead {
    max-width: 520px;
    margin: 0;
    font-size: 1.03125rem;
  }

  .c-pdp-steps__words ol {
    display: grid;
    gap: 18px;
    margin: 28px 0 0;
    padding: 0;
    list-style: none;
    counter-reset: c-pdp-step;
  }

  .c-pdp-steps__words li {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 0 16px;
    align-items: start;
    counter-increment: c-pdp-step;
  }

  .c-pdp-steps__words li::before {
    content: counter(c-pdp-step);
    display: grid;
    grid-row: span 2;
    place-items: center;
    width: 36px;
    height: 36px;
    font: 600 0.9375rem var(--font-body, sans-serif);
    color: var(--color-text-inverse, #fff);
    background: var(--color-text-primary, #222);
    border-radius: 50%;
  }

  .c-pdp-steps__words li b {
    margin-top: 6px;
    font-size: 1rem;
    font-weight: 600;
  }

  .c-pdp-steps__words li span {
    font-size: 0.90625rem;
  }

  .c-pdp-steps__picture {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-bg-primary, #fff);
    border-radius: 16px;
  }

  .c-pdp-steps__picture .c-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  @media (max-width: 1000px) {
    .c-pdp-steps__tile {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-steps */

/* START_SNIPPET:c-pdp-upsell (INDEX:256) */
.c-pdp-upsell {
    padding-top: 88px;
  }

  .c-pdp-upsell__tile {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(28px, 4vw, 56px);
    align-items: center;
    padding: clamp(24px, 3.5vw, 44px);
    border: 1px solid var(--color-text-primary, #222);
    border-radius: 22px;
  }

  .c-pdp-upsell__tile--beige {
    background: var(--color-bg-secondary, #eee);
    border: 0;
  }

  .c-pdp-upsell__picture {
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--dkd-tile, #eee);
    border-radius: 12px;
  }

  .c-pdp-upsell__tile--beige .c-pdp-upsell__picture {
    background: var(--color-bg-primary, #fff);
  }

  .c-pdp-upsell__picture .c-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-pdp-upsell__words {
    display: grid;
    gap: 14px;
  }

  .c-pdp-upsell__words > * {
    margin: 0;
  }

  .c-pdp-upsell__words h2 {
    font-size: clamp(1.75rem, 2.8vw, 2.375rem);
    line-height: 1.1;
  }

  .c-pdp-upsell .c-pdp-upsell__points {
    display: grid;
    gap: 10px;
    margin: 6px 0;
    padding: 0;
    list-style: none;
  }

  .c-pdp-upsell__points li {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 12px;
    align-items: baseline;
    font-size: 0.9375rem;
  }

  .c-pdp-upsell__points li::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-dkd-hellblau, #ddd);
    border-radius: 50%;
    box-shadow: 0 0 0 2px var(--color-text-primary, #222);
  }

  .c-pdp-upsell__points b {
    font-weight: 600;
  }

  .c-pdp-upsell__small {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-upsell__buy {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    margin-top: 6px;
  }

  .c-pdp-upsell__price {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.75rem;
    font-weight: 500;
  }

  .c-pdp-upsell__price s {
    margin-left: 8px;
    font-family: var(--font-body, sans-serif);
    font-size: 1rem;
    font-weight: 400;
    color: var(--dkd-quiet, #666);
  }

  @media (max-width: 1000px) {
    .c-pdp-upsell__tile {
      grid-template-columns: 1fr;
    }
  }
/* END_SNIPPET:c-pdp-upsell */

/* START_SNIPPET:c-pdp-why (INDEX:257) */
.c-pdp-why {
    padding-top: 88px;
    padding-bottom: 40px;
  }

  .c-pdp-why--figures {
    padding-top: 40px;
  }

  .c-pdp-why__heading {
    max-width: 1080px;
    margin: 0;
    font-size: clamp(1.625rem, 2.9vw, 2.5rem);
    font-weight: 500;
    line-height: 1.22;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-why__heading em {
    font-style: normal;
    color: var(--color-text-primary, #222);
  }

  .c-pdp-why__text {
    max-width: 880px;
    margin: 22px 0 0;
    font-size: 0.96875rem;
    color: var(--dkd-quiet, #666);
  }

  .c-pdp-why__link {
    margin-top: 18px;
  }

  .c-pdp-why .c-pdp-why__figures {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 48px 0 0;
    padding: 0;
    overflow: hidden;
    list-style: none;
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 14px;
  }

  .c-pdp-why--figures .c-pdp-why__figures {
    margin-top: 0;
  }

  .c-pdp-why__figures li {
    display: grid;
    gap: 4px;
    padding: 30px 28px;
  }

  .c-pdp-why__figures li + li {
    border-left: 1px solid var(--dkd-line, #ddd);
  }

  .c-pdp-why__figures b {
    font-family: var(--font-heading, sans-serif);
    font-size: clamp(2.125rem, 3.4vw, 3rem);
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .c-pdp-why__figures span {
    font-size: 0.875rem;
    color: var(--dkd-quiet, #666);
  }

  @media (max-width: 1000px) {
    .c-pdp-why .c-pdp-why__figures {
      grid-template-columns: 1fr;
    }

    .c-pdp-why__figures li + li {
      border-top: 1px solid var(--dkd-line, #ddd);
      border-left: 0;
    }
  }
/* END_SNIPPET:c-pdp-why */

/* START_SNIPPET:c-portion-price (INDEX:258) */
.c-portion-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1, 4px);
    width: fit-content;
    margin: var(--space-4, 16px) 0 var(--space-2, 8px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-secondary, #f4f4f4);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
  }

  .c-portion-price .c-price {
    font-size: inherit;
    font-weight: 700;
  }
/* END_SNIPPET:c-portion-price */

/* START_SNIPPET:c-press-logos (INDEX:259) */
.c-press-logos {
    padding-top: 44px;
    padding-bottom: 4px;
  }

  .c-press-logos--caption {
    padding-top: 0;
    padding-bottom: 20px;
  }

  .c-press-logos__caption {
    margin: 0 0 14px;
    font-size: 0.8125rem;
    text-align: center;
    color: var(--dkd-quiet, #666);
  }

  .c-press-logos .c-image {
    width: 100%;
    max-width: 532px;
    height: auto;
    margin-inline: auto;
  }
/* END_SNIPPET:c-press-logos */

/* START_SNIPPET:c-price (INDEX:260) */
.c-price {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 var(--space-2, 8px);
  }

  .c-price__current {
    font-weight: 600;
  }

  .c-price__compare {
    color: var(--color-text-secondary, #666);
  }

  .c-price__unit,
  .c-price__subscription,
  .c-price__savings {
    flex-basis: 100%;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-price */

/* START_SNIPPET:c-product-card (INDEX:261) */
.c-product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
  }

  .c-product-card__info {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
  }

  .c-product-card__link {
    color: inherit;
    text-decoration: none;
  }

  .c-product-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
  }

  /* Was sich selbst bedienen lässt, liegt über dem gestreckten Link der Karte. */
  .c-product-card__info :is(a:not(.c-product-card__link), button, input, select, summary, quick-buy) {
    position: relative;
    z-index: 1;
  }

  @media (max-width: 767px) {
    .c-product-card > [data-reveal] {
      --reveal-offset: 10px;
    }
  }

  .c-product-card__media {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    background: var(--color-bg-secondary, #f4f4f4);
    border-radius: var(--radius-lg, 12px);
  }

  .c-product-card__hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.25s ease-in;
  }

  @media (hover: hover) {
    .c-product-card:hover .c-product-card__hover[data-loaded] {
      opacity: 1;
      transition-timing-function: ease-out;
    }
  }

  .c-product-card__media .c-image {
    height: 100%;
    object-fit: cover;
  }

  /* Auf dem Telefon stehen zwei Karten nebeneinander: Titel und Preis eine Stufe kleiner, wie live. */
  .c-product-card__title {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    line-height: 1.15;
  }

  .c-product-card__info > .c-price {
    font-size: var(--text-sm, 0.875rem);
  }

  /* In der Karte steht der Grundpreis wie live in der Zeile des Preises, nur kleiner. */
  .c-product-card__info > .c-price .c-price__unit {
    flex-basis: auto;
    font-size: var(--text-xs, 0.75rem);
  }

  @media (min-width: 768px) {
    .c-product-card__title {
      font-size: var(--text-base, 1rem);
    }
  }

  .c-product-card__note {
    margin: calc(-1 * var(--space-1, 4px)) 0 0;
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.3;
    color: var(--color-text-secondary, #666);
  }

  .c-product-card__badge {
    position: absolute;
    top: var(--space-3, 12px);
    left: var(--space-3, 12px);
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    border-radius: var(--radius-full, 9999px);
  }

  .c-product-card__badge--sale {
    color: var(--color-sale-text, #fff);
    background: var(--color-sale-bg, #222);
  }

  .c-product-card__badge--sold-out {
    color: var(--color-sold-out-text, #ddd);
    background: var(--color-sold-out-bg, #222);
  }
/* END_SNIPPET:c-product-card */

/* START_SNIPPET:c-product-field (INDEX:262) */
.c-product-field {
    display: grid;
    gap: var(--space-1, 4px) var(--space-6, 24px);
    padding-block: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .c-product-field__label {
    font-weight: 500;
  }

  .c-product-field__value {
    margin: 0;
    color: var(--color-text-secondary, #666);
  }

  @media (min-width: 768px) {
    .c-product-field {
      grid-template-columns: 1fr 2fr;
    }
  }
/* END_SNIPPET:c-product-field */

/* START_SNIPPET:c-product-fields (INDEX:263) */
.c-product-fields {
    padding-block: var(--space-10, 40px);
  }

  .c-product-fields__heading {
    margin: 0 0 var(--space-4, 16px);
  }

  .c-product-fields__list {
    margin: 0;
  }
/* END_SNIPPET:c-product-fields */

/* START_SNIPPET:c-product-tabs (INDEX:265) */
.c-product-tabs {
    padding-block: var(--space-12, 48px);
  }

  .c-product-tabs__eyebrow {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-product-tabs__heading {
    margin: var(--space-2, 8px) 0 var(--space-6, 24px);
  }

  .c-product-tabs__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px) var(--space-6, 24px);
  }

  .c-product-tabs__label {
    order: 1;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding-block: var(--space-2, 8px);
    font-weight: 500;
    cursor: pointer;
    /* Dimming by opacity put this label at 2.46:1; the muted colour is a token that holds AA. */
    color: var(--color-text-secondary, #666);
  }

  .c-product-tabs__radio:checked + .c-product-tabs__label {
    color: var(--color-text-primary, #222);
  }

  .c-product-tabs__radio:focus-visible + .c-product-tabs__label {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-product-tabs__panel {
    order: 2;
    display: none;
    flex: 0 0 100%;
    min-width: 0;
    padding-top: var(--space-6, 24px);
  }

  .c-product-tabs__radio:checked + .c-product-tabs__label + .c-product-tabs__panel {
    display: block;
  }

  .c-product-tabs__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70%;
    gap: var(--space-5, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .c-product-tabs__item {
    scroll-snap-align: start;
  }

  @media (min-width: 768px) {
    .c-product-tabs__list {
      grid-auto-columns: calc((100% - 2 * var(--space-5, 20px)) / 3);
    }
  }

  @media (min-width: 1024px) {
    .c-product-tabs__list {
      grid-auto-columns: calc((100% - 3 * var(--space-5, 20px)) / 4);
    }
  }
/* END_SNIPPET:c-product-tabs */

/* START_SNIPPET:c-promise-box (INDEX:266) */
.c-promise-box {
    display: grid;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 20px);
    background: var(--promise-tone, var(--color-bg-secondary, #eee));
    border-radius: var(--radius-xl, 16px);
  }

  .c-promise-box__top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4, 16px);
  }

  @media (min-width: 600px) {
    .c-promise-box__top {
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
    }
  }

  .c-promise-box__heading {
    margin: 0;
    font-size: var(--text-2xl, 1.5rem);
  }

  .c-promise-box__seals {
    display: flex;
    flex: none;
    align-items: stretch;
    gap: var(--space-2, 8px);
  }

  /* Ein Siegel ist eine gerahmte Kachel mit Beschriftung; der Text steht daneben, nicht im Bild. */
  .c-promise-box__seal {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-2, 8px);
    width: 96px;
    padding: var(--space-3, 12px) var(--space-2, 8px);
    border: 1px solid var(--color-border-strong, #222);
    border-radius: var(--radius-xl, 16px);
    text-align: center;
  }

  .c-promise-box__seal img {
    width: 40px;
    height: auto;
  }

  .c-promise-box__seal-label {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0.02em;
    text-transform: uppercase;
  }

  .c-promise-box__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2, 8px) var(--space-4, 16px);
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* END_SNIPPET:c-promise-box */

/* START_SNIPPET:c-promise-panel (INDEX:267) */
/* 80 px on every width, as .versprechen-sektion of the draft (the sections around it shrink on the phone, it does not). */
  .c-promise-panel {
    margin-bottom: 80px;
  }

  .c-promise-panel__panel {
    display: grid;
    gap: 32px;
    padding: clamp(28px, 4vw, 52px) clamp(24px, 5vw, 64px);
    background: var(--color-bg-accent, #f4f4f4);
    border-radius: 18px;
  }

  .c-promise-panel__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
  }

  .c-promise-panel__heading {
    margin: 0;
    font-size: clamp(1.5rem, 2.55vw, 2.125rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.02em;
  }

  .c-promise-stamp {
    display: block;
  }

  .c-promise-panel__badges {
    display: flex;
    gap: 10px;
    --badge-bg: var(--color-card, #fff);
    --badge-size: 120px;
  }

  .c-promise-panel__checks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 32px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-promise-panel__checks li {
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .c-promise-panel__checks li::before {
    content: '✔';
    font-size: 0.9375rem;
  }

  .c-promise-panel__story {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: clamp(24px, 4vw, 56px);
    align-items: center;
    margin-top: 12px;
    padding-top: 36px;
    border-top: 1px solid color-mix(in srgb, var(--color-text-primary, #222) 12%, transparent);
  }

  .c-promise-panel__video {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-base-black, #111);
    border-radius: 16px;
  }

  .c-promise-panel__video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .c-promise-panel__words {
    display: grid;
    gap: 12px;
    max-width: 500px;
  }

  .c-promise-panel__words > *,
  .c-promise-panel__text > * {
    margin: 0;
  }

  .c-promise-panel__text {
    display: grid;
    gap: 12px;
    font-size: 0.96875rem;
  }

  .c-promise-panel__greeting {
    margin-top: 4px;
    font-size: 2.125rem;
    line-height: 1.1;
  }

  .c-promise-panel__role {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  @media (max-width: 1000px) {
    .c-promise-panel__checks {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-promise-panel__story {
      grid-template-columns: minmax(0, 1fr);
    }

    .c-promise-panel__words {
      max-width: none;
    }
  }

  @media (max-width: 560px) {
    .c-promise-panel__checks {
      grid-template-columns: minmax(0, 1fr);
    }

    .c-promise-panel__head {
      flex-direction: column;
      align-items: flex-start;
    }
  }
/* END_SNIPPET:c-promise-panel */

/* START_SNIPPET:c-promise-point (INDEX:268) */
.c-promise-point {
    display: flex;
    align-items: start;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
  }

  .c-promise-point__mark .icon {
    flex: none;
    width: 16px;
    height: 16px;
    stroke-width: 3;
  }
/* END_SNIPPET:c-promise-point */

/* START_SNIPPET:c-purchase-options (INDEX:270) */
.c-purchase-options {
    display: block;
  }

  .c-purchase-options__group {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    border: 0;
  }

  .c-purchase-options__legend {
    margin-bottom: var(--space-2, 8px);
    padding: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
  }

  .c-purchase-options__label {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1, 4px) var(--space-4, 16px);
    min-height: 44px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
    transition: border-color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
  }

  .c-purchase-options__label .c-price {
    justify-content: flex-end;
    text-align: right;
  }

  .c-purchase-options__input:checked + .c-purchase-options__label {
    border-color: var(--color-border-strong, #222);
    box-shadow: inset 0 0 0 1px var(--color-border-strong, #222);
  }

  .c-purchase-options__input:focus-visible + .c-purchase-options__label {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-purchase-options__name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    font-weight: 500;
  }

  .c-purchase-options__saving {
    padding: 2px var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-primary, #222);
    background: var(--color-brand-highlight, #eee);
    border-radius: var(--radius-full, 9999px);
  }

  .c-purchase-options__apply {
    justify-self: start;
    margin-top: var(--space-1, 4px);
  }

  .c-purchase-options__benefits {
    margin-top: var(--space-4, 16px);
    padding: var(--space-4, 16px);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-lg, 12px);
  }

  .c-purchase-options__benefits-title {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-base, 1rem);
  }

  .c-purchase-options__benefits ul {
    display: grid;
    gap: var(--space-1, 4px);
    margin: 0;
    padding: 0;
    font-size: var(--text-sm, 0.875rem);
    list-style: none;
  }

  .c-purchase-options__terms {
    margin: var(--space-3, 12px) 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
  /* Zwei Reiter auf einer grauen Spur; der gewählte steht als dunkle Pille darauf. */
  .c-purchase-options__tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-secondary, #eee);
  }

  .c-purchase-options__tab {
    display: grid;
    place-items: center;
    min-height: 44px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    cursor: pointer;
    transition: color 0.18s ease, background-color 0.18s ease;
  }

  .c-purchase-options__tab--active {
    background: var(--color-action-primary, #222);
    color: var(--color-action-primary-text, #fff);
  }

  .c-purchase-options__input:focus-visible + .c-purchase-options__tabs .c-purchase-options__tab--active {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-purchase-options__plans {
    display: grid;
    gap: var(--space-2, 8px);
  }

  .c-purchase-options__plans:empty {
    display: none;
  }

  /* Im Einmalkauf steht der Preis der Wahl groß in der Karte, darunter was eine Packung hält und eine Portion kostet. */
  .c-purchase-options__one-time {
    display: grid;
    gap: var(--space-1, 4px);
    padding: var(--space-1, 4px) 0;
  }

  .c-purchase-options__one-time > .c-price {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 600;
  }

  .c-purchase-options__subline {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-purchase-options__subline .c-price__current,
  .c-purchase-options__teaser-price .c-price__current {
    font-weight: inherit;
  }

  .c-purchase-options__subline .c-price {
    display: inline;
    font-size: inherit;
    font-weight: 400;
    color: inherit;
  }

  .c-purchase-options__teaser {
    position: relative;
    display: grid;
    gap: var(--space-1, 4px);
    min-height: 44px;
    padding: var(--space-3, 12px) var(--space-10, 40px) var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    background: var(--color-brand-accent, #f4f4f4);
    cursor: pointer;
  }

  .c-purchase-options__teaser-title {
    font-weight: 600;
  }

  .c-purchase-options__teaser-price {
    display: block;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-purchase-options__teaser-price .c-price {
    display: inline;
    font-size: inherit;
    font-weight: 400;
  }

  .c-purchase-options__teaser-mark {
    position: absolute;
    top: 50%;
    right: var(--space-4, 16px);
    display: grid;
    transform: translateY(-50%);
  }

  .c-purchase-options__teaser-mark svg {
    width: 14px;
    height: 14px;
  }

  /* Kacheln: eine Zeile je Kaufart mit einem runden Merkzeichen, die Pläne als Kacheln mit ihrem Rabatt-Schild. */
  .c-purchase-options__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px) var(--space-3, 12px);
    min-height: 44px;
    cursor: pointer;
  }

  .c-purchase-options__row > .c-price,
  .c-purchase-options__head-price {
    margin-inline-start: auto;
    text-align: right;
  }

  .c-purchase-options__head-price {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: baseline;
    gap: 0 var(--space-2, 8px);
  }

  /* Ein eingebetteter Flex-Preis erbt den Strich nicht, darum trägt ihn der Betrag selbst. */
  .c-purchase-options__head-compare .c-price__current {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 400;
    color: var(--color-text-secondary, #666);
    text-decoration: line-through;
  }

  .c-purchase-options__head-price > .c-price .c-price__current {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-xl, 1.25rem);
  }

  .c-purchase-options__row-title {
    font-weight: 700;
  }

  .c-purchase-options__mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-border-strong, #222);
    border-radius: 50%;
    background: var(--color-bg-secondary, #fff);
  }

  .c-purchase-options__row--active .c-purchase-options__mark,
  .c-purchase-options--tiles:has(.c-purchase-options__input:checked) .c-purchase-options__row--head .c-purchase-options__mark,
  .c-purchase-options__input:checked + .c-purchase-options__row .c-purchase-options__mark {
    box-shadow: inset 0 0 0 3px var(--color-bg-secondary, #fff);
    background: var(--color-border-strong, #222);
  }

  .c-purchase-options__input:focus-visible + .c-purchase-options__row {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-purchase-options--one-time .c-purchase-options__row {
    padding: var(--space-4, 16px) var(--space-5, 20px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
  }

  .c-purchase-options--one-time .c-purchase-options__row-title {
    font-weight: 400;
  }

  .c-purchase-options__tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr));
    gap: var(--space-3, 12px);
    padding-top: var(--space-3, 12px);
  }

  .c-purchase-options__tile {
    position: relative;
    display: grid;
    place-items: center;
    gap: var(--space-2, 8px);
    min-height: 64px;
    padding: var(--space-5, 20px) var(--space-3, 12px) var(--space-3, 12px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-primary, #f4f4f4);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
  }

  .c-purchase-options__input:checked + .c-purchase-options__tile {
    border: 2px solid var(--color-border-strong, #222);
    background: var(--color-bg-secondary, #fff);
    font-weight: 700;
  }

  .c-purchase-options__input:focus-visible + .c-purchase-options__tile {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-purchase-options__badge {
    position: absolute;
    top: -12px;
    padding: 2px var(--space-2, 8px);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-brand-highlight, #eee);
    color: var(--color-text-primary, #222);
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    white-space: nowrap;
  }

  .c-purchase-options__input:checked + .c-purchase-options__tile .c-purchase-options__badge {
    background: var(--color-action-primary, #222);
    color: var(--color-action-primary-text, #fff);
  }

  .c-purchase-options__tile-art {
    display: flex;
    gap: 3px;
  }

  /* Mit Skript wählt schon der Klick auf eine Kachel; der Knopf bleibt für Seiten ohne Skript. */
  @media (scripting: enabled) {
    .c-purchase-options--tiles .c-purchase-options__apply {
      display: none;
    }
  }

  .c-purchase-options__terms--tiles {
    margin: 0;
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
  }
/* END_SNIPPET:c-purchase-options */

/* START_SNIPPET:c-quick-buy (INDEX:271) */
.c-quick-buy {
    display: block;
  }

  .c-quick-buy__sheet {
    width: min(420px, 100%);
    max-width: 100%;
    padding: var(--space-5, 20px);
    color: inherit;
    background: var(--color-bg-primary, #fff);
    border: 0;
    border-radius: var(--radius-xl, 16px);
  }

  .c-quick-buy__sheet::backdrop {
    background: var(--color-overlay-default, #666);
  }

  .c-quick-buy__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3, 12px);
  }

  .c-quick-buy__title {
    margin: 0;
    font-weight: 600;
  }

  .c-quick-buy__group {
    display: grid;
    gap: var(--space-2, 8px);
    margin: var(--space-4, 16px) 0 0;
    padding: 0;
    border: 0;
  }

  .c-quick-buy__legend {
    margin-bottom: var(--space-2, 8px);
    padding: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
  }

  .c-quick-buy__option {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-1, 4px) var(--space-4, 16px);
    min-height: 44px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
  }

  .c-quick-buy__input:checked + .c-quick-buy__option {
    border-color: var(--color-border-strong, #222);
    box-shadow: inset 0 0 0 1px var(--color-border-strong, #222);
  }

  .c-quick-buy__input:focus-visible + .c-quick-buy__option {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .c-quick-buy__input:disabled + .c-quick-buy__option {
    opacity: 0.45;
    cursor: not-allowed;
  }

  .c-quick-buy__name {
    font-weight: 500;
  }

  .c-quick-buy__sheet .button {
    margin-top: var(--space-4, 16px);
  }
/* END_SNIPPET:c-quick-buy */

/* START_SNIPPET:c-restock-notice (INDEX:274) */
.c-restock-notice {
    padding-block: var(--space-5, 20px);
  }

  .c-restock-notice__card {
    display: grid;
    gap: var(--space-6, 24px);
    align-items: center;
    padding: var(--space-6, 24px);
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-xl, 16px);
  }

  .c-restock-notice__content > * {
    margin-block: 0;
  }

  .c-restock-notice__content > * + * {
    margin-top: var(--space-4, 16px);
  }

  .c-restock-notice__status {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }

  .c-restock-notice__status::before {
    content: '';
    width: 8px;
    height: 8px;
    background: var(--color-text-secondary, #666);
    border-radius: var(--radius-full, 9999px);
  }

  .c-restock-notice__status--available::before {
    background: var(--color-status-available, #666);
  }

  .c-restock-notice__hints {
    display: grid;
    gap: var(--space-1, 4px);
    padding: 0;
    font-size: var(--text-sm, 0.875rem);
    list-style: none;
    color: var(--color-text-secondary, #666);
  }

  .c-restock-notice__media {
    overflow: hidden;
    border-radius: var(--radius-lg, 12px);
  }

  @media (min-width: 900px) {
    .c-restock-notice__card {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: var(--space-10, 40px);
      padding: var(--space-10, 40px);
    }
  }
/* END_SNIPPET:c-restock-notice */

/* START_SNIPPET:c-review-badge (INDEX:275) */
.c-review-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: var(--space-4, 16px) 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-review-badge .icon {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--color-success-500, #888);
  }
/* END_SNIPPET:c-review-badge */

/* START_SNIPPET:c-review-strip (INDEX:277) */
.c-review-strip {
    padding-top: 20px;
    padding-bottom: var(--section-space, 80px);
    text-align: center;
  }

  /* One row as in the draft: on the phone the count wraps inside its own span, the row never breaks. */
  .c-review-strip__head {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0 0 36px;
    font-size: 0.9375rem;
  }

  .c-review-strip__head b {
    font-size: 1.0625rem;
    font-weight: 600;
  }

  /* The list reset of the core (ul[role='list']) weighs more than one class. */
  .c-review-strip .c-review-strip__photos {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 10px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
  }

  .c-review-strip__photos .c-image {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 6px;
  }

  .c-review-strip__voices {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
  }

  /* The rows stretch to the tallest voice of the line, as .stimme of the draft does. */
  .c-review-note {
    display: grid;
    gap: 8px;
    font-size: 0.875rem;
  }

  .c-review-note > * {
    margin: 0;
  }

  .c-review-note__who {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8125rem;
  }

  .c-review-note__who b {
    font-weight: 600;
  }

  .c-review-note__verified {
    font-size: 0.75rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .c-review-note__verified::before {
    content: '✓ ';
  }

  .c-review-note__title {
    font-family: var(--font-body, sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: 0;
  }

  @media (max-width: 1000px) {
    .c-review-strip .c-review-strip__photos {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .c-review-strip__photos > li:nth-child(n + 5) {
      display: none;
    }

    .c-review-strip__voices {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (max-width: 560px) {
    .c-review-strip__voices {
      grid-template-columns: minmax(0, 1fr);
    }
  }
/* END_SNIPPET:c-review-strip */

/* START_SNIPPET:c-review-wall-card (INDEX:279) */
.c-review-wall-card {
    display: block;
    overflow: hidden;
    margin: 0 0 20px;
    break-inside: avoid;
    background: var(--color-card, #fff);
    border: 1px solid var(--color-dkd-kante);
    border-radius: 16px;
  }

  .c-review-wall-card .c-image {
    display: block;
    width: 100%;
    height: auto;
  }

  .c-review-wall-card__photo .c-image {
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top;
  }

  .c-review-wall-card__body {
    display: grid;
    gap: 10px;
    padding: 20px 22px 22px;
  }

  .c-review-wall-card__body > p {
    margin: 0;
  }

  .c-review-wall-card__stars {
    font-size: 0.9375rem;
    line-height: 1.3;
    letter-spacing: 2px;
    color: var(--color-dkd-orange);
  }

  .c-review-wall-card__title {
    font: 600 1.0625rem / 1.3 var(--font-heading);
    color: var(--color-text-primary, #222);
  }

  .c-review-wall-card__text {
    display: grid;
    gap: 10px;
  }

  .c-review-wall-card__text p {
    margin: 0;
    font-size: 0.9375rem;
    line-height: 1.6;
  }

  .c-review-wall-card__text mark {
    margin: 0 -0.1em;
    padding: 0.05em 0.2em;
    color: inherit;
    background: var(--color-dkd-gelb);
    border-radius: 4px;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }

  .c-review-wall-card__who {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84375rem;
    color: var(--dkd-quiet, #666);
  }

  .c-review-wall-card__avatar,
  .c-review-wall-card__avatar .c-image,
  .c-review-wall-card__initials {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
  }

  .c-review-wall-card__avatar .c-image {
    height: 28px;
    object-fit: cover;
    object-position: 50% 25%;
  }

  .c-review-wall-card__avatar {
    display: block;
    overflow: hidden;
  }

  .c-review-wall-card__initials {
    display: grid;
    place-items: center;
    font: 600 0.75rem var(--font-body);
    color: var(--color-text-primary, #222);
    background: var(--color-dkd-hellblau);
  }

  .c-review-wall-card__verified {
    margin-left: auto;
    font-weight: 500;
    color: var(--color-dkd-gruen);
  }

  .c-review-wall-card--photo .c-image {
    aspect-ratio: auto;
  }
/* END_SNIPPET:c-review-wall-card */

/* START_SNIPPET:c-review-wall (INDEX:280) */
.c-review-wall__grid {
    columns: 3;
    column-gap: 20px;
    padding-bottom: 80px;
  }

  @media (max-width: 1000px) {
    .c-review-wall__grid {
      columns: 2;
    }
  }

  @media (max-width: 640px) {
    .c-review-wall__grid {
      columns: 1;
    }
  }
/* END_SNIPPET:c-review-wall */

/* START_SNIPPET:c-reviews-carousel (INDEX:281) */
.c-reviews-carousel {
    padding-block: var(--space-12, 48px);
  }

  .c-reviews-carousel__heading,
  .c-reviews-carousel__text {
    margin: 0 0 var(--space-2, 8px);
  }

  .c-reviews-carousel__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    gap: var(--space-5, 20px);
    margin: var(--space-6, 24px) 0 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
  }

  .c-review-voice {
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-5, 20px);
    scroll-snap-align: start;
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
  }

  .c-review-voice > * {
    margin: 0;
  }

  .c-review-voice__quote {
    flex: 1;
  }

  .c-review-voice__author {
    font-weight: 600;
  }

  .c-review-voice__detail {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  @media (min-width: 768px) {
    .c-reviews-carousel__list {
      grid-auto-columns: calc((100% - 2 * var(--space-5, 20px)) / 3);
    }
  }
/* END_SNIPPET:c-reviews-carousel */

/* START_SNIPPET:c-shop-row (INDEX:282) */
/* Heading as .abschnitt h2 of the draft, the cards in the grid of .produkte. */
  .c-shop-row {
    padding-block: 24px var(--section-space, 80px);
  }

  .c-shop-row__heading {
    margin: 0 0 28px;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  /* The list reset of the core (ul[role='list']) weighs more than one class. */
  .c-shop-row .c-shop-row__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 44px var(--dkd-grid-gap, 20px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 1000px) {
    .c-shop-row .c-shop-row__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* In zwei Spalten keine einzelne Karte in der letzten Reihe. */
    .c-shop-row__list > :last-child:nth-child(odd):not(:first-child) {
      display: none;
    }
  }
/* END_SNIPPET:c-shop-row */

/* START_SNIPPET:c-shop-tab (INDEX:283) */
.c-shop-tab__list {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* One row that is swiped: it runs out to the right edge of the screen, 4.25 cards in view (.produkte.scroll). */
  /* The list reset of the core (ul[role='list']) weighs more than one class. */
  .c-shop-tabs__panel .c-shop-tab__list--scroll {
    display: flex;
    margin-right: calc(-1 * max(24px, (100vw - 1320px) / 2 + 24px));
    padding-right: max(24px, (100vw - 1320px) / 2 + 24px);
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .c-shop-tab__list--scroll::-webkit-scrollbar {
    display: none;
  }

  .c-shop-tab__list--scroll > .c-shop-tab__item {
    flex: 0 0 calc((min(100vw, 1320px) - 48px - 60px) / 4.25);
    scroll-snap-align: start;
  }

  @media (max-width: 1000px) {
    .c-shop-tab__list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .c-shop-tab__list--scroll > .c-shop-tab__item {
      flex-basis: calc((100vw - 48px - 20px) / 2.2);
    }
  }
/* END_SNIPPET:c-shop-tab */

/* START_SNIPPET:c-shop-tabs (INDEX:284) */
.c-shop-tabs {
    padding-block: var(--section-space, 80px);
  }

  /* Right under the press line the range moves up (.presse + .abschnitt of the draft). */
  .c-press-logos + .c-shop-tabs,
  .shopify-section:has(.c-press-logos) + .shopify-section .c-shop-tabs {
    padding-top: 56px;
  }

  .c-shop-tabs__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 28px;
  }

  .c-shop-tabs__heading {
    margin: 10px 0 0;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  .c-shop-tabs__tabs {
    display: flex;
    flex-wrap: wrap;
    column-gap: 30px;
  }

  .c-shop-tabs__label {
    position: relative;
    z-index: 1;
    order: 1;
    padding: 0 0 12px;
    font-size: 0.9375rem;
    white-space: nowrap;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
    border-bottom: 2px solid transparent;
    cursor: pointer;
  }

  .c-shop-tabs__radio:checked + .c-shop-tabs__label {
    color: var(--color-text-primary, #222);
    border-bottom-color: var(--color-text-primary, #222);
  }

  .c-shop-tabs__radio:focus-visible + .c-shop-tabs__label {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  /* The hairline under the labels; the mark of the chosen tab lies on it. */
  .c-shop-tabs__line {
    order: 1;
    flex: 0 0 100%;
    height: 1px;
    margin: -1px 0 28px;
    background: var(--dkd-line, var(--color-border-default, #ddd));
  }

  .c-shop-tabs__panel {
    order: 2;
    display: none;
    flex: 0 0 100%;
    min-width: 0;
  }

  .c-shop-tabs__radio:checked + .c-shop-tabs__label + .c-shop-tabs__panel {
    display: block;
  }

  @media (max-width: 1000px) {
    .c-shop-tabs__head {
      flex-direction: column;
      align-items: flex-start;
    }
  }
/* END_SNIPPET:c-shop-tabs */

/* START_SNIPPET:c-sources (INDEX:286) */
.c-sources {
    margin-top: var(--space-10, 40px);
  }

  .c-sources__heading {
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--text-lg, 1.125rem);
  }

  .c-sources__list {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding-left: var(--space-5, 20px);
    font-size: var(--text-sm, 0.875rem);
    overflow-wrap: anywhere;
  }
/* END_SNIPPET:c-sources */

/* START_SNIPPET:c-statement (INDEX:287) */
.c-statement {
    position: relative;
    padding-block: var(--block-space, var(--section-space, 56px));
    overflow: hidden;
    background: var(--color-bg-secondary, #f4f4f4);
    text-align: center;
  }

  .c-statement__inner {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin-inline: auto;
    padding-inline: var(--space-5, 20px);
  }

  .c-statement__mark img {
    width: 32px;
    height: auto;
    margin: 0 auto var(--space-5, 20px);
  }

  .c-statement__heading {
    margin: 0 0 var(--space-4, 16px);
  }

  .c-statement__text {
    margin: 0;
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 500;
    line-height: 1.4;
  }

  .c-statement__sides {
    display: flex;
    flex-direction: column;
    gap: var(--space-5, 20px);
    align-items: center;
    margin-top: var(--space-8, 32px);
  }

  .c-statement__side {
    width: 45vw;
    max-width: 225px;
  }

  .c-statement__side img {
    width: 100%;
    border-radius: var(--radius-lg, 12px);
  }

  /* Auf dem Telefon steht ein Schmuckbild unter der Aussage; ein zweites wäre eine Galerie. */
  @media (max-width: 768px) {
    .c-statement__side--end {
      display: none;
    }
  }

  @media (min-width: 769px) {
    .c-statement__text {
      font-size: var(--text-3xl, 1.875rem);
    }

    /* Die Schmuckbilder liegen über der ganzen Fläche, damit die Aussage in der Mitte allein steht. */
    .c-statement__sides {
      position: absolute;
      inset: 0;
      z-index: 1;
      display: block;
      margin: 0;
      pointer-events: none;
    }

    .c-statement__side {
      position: absolute;
      width: 225px;
      max-width: 20%;
    }

    .c-statement__side--start {
      top: 5%;
      left: 2%;
    }

    .c-statement__side--end {
      top: 20%;
      right: 3%;
    }
  }
/* END_SNIPPET:c-statement */

/* START_SNIPPET:c-step-stage (INDEX:288) */
.c-step-stage {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-full, 999px);
  }
/* END_SNIPPET:c-step-stage */

/* START_SNIPPET:c-step (INDEX:289) */
.c-step {
    display: grid;
    gap: var(--space-2, 8px);
    padding-block: var(--space-4, 16px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .c-step__title {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
  }

  .c-step__stages {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-step__text {
    margin: 0;
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-step */

/* START_SNIPPET:c-steps (INDEX:290) */
.c-steps {
    display: block;
    padding-block: var(--space-12, 48px);
  }

  .c-steps__eyebrow {
    margin: 0 0 var(--space-2, 8px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-steps__heading {
    margin: 0 0 var(--space-3, 12px);
  }

  .c-steps__lead {
    margin: 0 0 var(--space-6, 24px);
    max-width: 68ch;
    color: var(--color-text-secondary, #666);
  }

  .c-steps__grid {
    display: grid;
    gap: var(--space-6, 24px);
  }

  .c-steps__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl, 16px);
  }

  .c-steps__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-steps__note {
    margin: var(--space-4, 16px) 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  @media (min-width: 900px) {
    .c-steps__grid--media {
      grid-template-columns: 4fr 6fr;
      align-items: start;
    }
  }
/* END_SNIPPET:c-steps */

/* START_SNIPPET:c-sticky-buy (INDEX:291) */
.c-sticky-buy {
    position: fixed;
    right: 0;
    /* Mobile: above the home indicator; bars outside the page, like the preview bar, are not in the safe area. */
    bottom: env(safe-area-inset-bottom, 0px);
    left: 0;
    z-index: 20;
    padding-block: var(--space-2, 8px);
    background: var(--color-bg-primary, #fff);
    border-top: 1px solid var(--color-border-default, #ddd);
    animation: c-sticky-buy-in 0.2s ease;
  }

  .c-sticky-buy__inner {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
  }

  .c-sticky-buy__media {
    flex: none;
    width: 56px;
    height: 56px;
    overflow: hidden;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .c-sticky-buy__media .c-image {
    width: 56px;
    height: 56px;
    object-fit: cover;
  }

  .c-sticky-buy__text {
    display: none;
    min-width: 0;
  }

  .c-sticky-buy__title,
  .c-sticky-buy__variant {
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .c-sticky-buy__title {
    font-weight: 600;
  }

  .c-sticky-buy__variant {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-sticky-buy__price {
    margin-left: auto;
  }

  .c-sticky-buy__timer {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-variant-numeric: tabular-nums;
    color: var(--color-text-secondary, #666);
  }

  .c-sticky-buy__button {
    flex: none;
  }

  @keyframes c-sticky-buy-in {
    from {
      transform: translateY(100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @media (min-width: 900px) {
    .c-sticky-buy {
      top: 0;
      bottom: auto;
      border-top: 0;
      border-bottom: 1px solid var(--color-border-default, #ddd);
      animation-name: c-sticky-buy-down;
    }

    .c-sticky-buy__text {
      display: block;
    }
  }

  @keyframes c-sticky-buy-down {
    from {
      transform: translateY(-100%);
    }

    to {
      transform: translateY(0);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-sticky-buy {
      animation: none;
    }
  }
/* END_SNIPPET:c-sticky-buy */

/* START_SNIPPET:c-story-chapter (INDEX:292) */
.c-story-chapter {
    display: grid;
    flex: 0 0 min(1040px, 86vw);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    overflow: hidden;
    min-height: 520px;
    background: var(--color-bg-secondary, #eee);
    border-radius: 24px;
    scroll-snap-align: start;
  }

  .c-story-chapter__media {
    position: relative;
    overflow: hidden;
    margin: 16px 0 16px 16px;
    border-radius: 16px;
  }

  .c-story-chapter__media .c-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    transform: scale(1.06);
    transition: transform 1.2s ease;
  }

  .c-story-chapter.is-active .c-story-chapter__media .c-image {
    transform: scale(1);
  }

  .c-story-chapter__text {
    display: grid;
    align-content: center;
    gap: 16px;
    justify-items: start;
    padding: clamp(28px, 4vw, 56px);
  }

  .c-story-chapter__text > p {
    margin: 0;
  }

  .c-story-chapter__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra);
  }

  .c-story-chapter__heading {
    margin: 0;
    font-size: clamp(1.625rem, 2.6vw, 2.25rem);
    font-weight: 500;
    line-height: 1.1;
  }

  .c-story-chapter__lead {
    display: grid;
    gap: 16px;
  }

  .c-story-chapter__lead p {
    margin: 0;
  }

  .c-story-chapter__greeting {
    font-family: var(--font-highlight, cursive);
    font-size: 1.875rem;
    line-height: 1;
    color: var(--color-text-primary, #222);
  }

  @media (max-width: 1000px) {
    .c-story-chapter {
      grid-template-columns: minmax(0, 1fr);
      min-height: 0;
    }

    .c-story-chapter__media {
      aspect-ratio: 4 / 3;
      margin: 12px 12px 0;
    }

    .c-story-chapter__media .c-image {
      object-position: 50% 35%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-story-chapter__media .c-image {
      transform: none;
      transition: none;
    }
  }
/* END_SNIPPET:c-story-chapter */

/* START_SNIPPET:c-story (INDEX:293) */
.c-story {
    display: block;
    padding-top: 56px;
    padding-bottom: 80px;
  }

  .c-story__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 28px;
  }

  .c-story__eyebrow {
    margin: 0 0 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra);
  }

  .c-story__heading {
    margin: 0;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  .c-story__arrows {
    display: flex;
    gap: 10px;
  }

  .c-story__arrow {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: var(--color-text-primary, #222);
    background: var(--color-card, #fff);
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
  }

  .c-story__arrow:hover {
    color: var(--color-text-inverse, #fff);
    background: var(--color-bg-inverse, #222);
  }

  .c-story__arrow svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  /* The row starts on the line of the page and runs out to the edge of the window, like .story of the draft. */
  .c-story .c-story__track {
    --story-edge: max(var(--page-gutter, 24px), calc((100% - var(--page-width, 1272px)) / 2));
    display: flex;
    gap: 20px;
    margin: 0;
    padding: 0 var(--story-edge);
    overflow-x: auto;
    list-style: none;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--story-edge);
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .c-story__track::-webkit-scrollbar {
    display: none;
  }

  .c-story__steps {
    display: flex;
    gap: 16px;
    margin-top: 26px;
  }

  .c-story__step {
    display: grid;
    flex: 1;
    gap: 4px;
    padding: 0;
    font: inherit;
    text-align: left;
    color: var(--dkd-quiet, #666);
    background: none;
    border: 0;
    cursor: pointer;
  }

  .c-story__bar {
    position: relative;
    overflow: hidden;
    height: 3px;
    margin-bottom: 10px;
    background: var(--dkd-line, #ddd);
    border-radius: 99px;
  }

  .c-story__bar i {
    position: absolute;
    inset: 0;
    width: 0;
    background: var(--color-text-primary, #222);
    border-radius: inherit;
  }

  .c-story__year {
    font: 600 0.9375rem var(--font-heading);
    transition: color 0.3s;
  }

  .c-story__what {
    font-size: 0.84375rem;
  }

  .c-story__step.is-done,
  .c-story__step[aria-current='true'] {
    color: var(--color-text-primary, #222);
  }

  .c-story__step.is-done .c-story__bar i {
    width: 100%;
  }

  .c-story__step.is-running .c-story__bar i {
    animation: c-story-fill 7s linear forwards;
  }

  .c-story:hover .c-story__step.is-running .c-story__bar i,
  .c-story.is-paused .c-story__step.is-running .c-story__bar i {
    animation-play-state: paused;
  }

  @keyframes c-story-fill {
    to {
      width: 100%;
    }
  }

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

    .c-story__step[aria-current='true'] .c-story__bar i {
      width: 100%;
      animation: none;
    }
  }
/* END_SNIPPET:c-story */

/* START_SNIPPET:c-study-link (INDEX:294) */
.c-study-link {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-1, 4px) var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #f4f4f4);
    font-size: var(--text-sm, 0.875rem);
  }

  .c-study-link__anchor {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
  }

  .c-study-link__anchor .icon {
    width: 16px;
    height: 16px;
  }

  .c-study-link__mark {
    display: inline-block;
    margin-inline-end: var(--space-2, 8px);
    vertical-align: -1px;
    color: var(--color-text-secondary, #666);
  }

  .c-study-link__mark .icon {
    display: block;
    width: 12px;
    height: 12px;
  }
/* END_SNIPPET:c-study-link */

/* START_SNIPPET:c-subscription-label (INDEX:295) */
.c-subscription-label {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-subscription-label */

/* START_SNIPPET:c-team-member (INDEX:296) */
.c-team-member {
    display: grid;
    align-content: start;
    gap: 10px;
  }

  .c-team-member > p {
    margin: 0;
  }

  .c-team-member__media {
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--dkd-tile, #eee);
    border-radius: 14px;
  }

  .c-team-member__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  .c-team-member__name {
    font: 600 1rem var(--font-body);
  }

  .c-team-member__role {
    margin-top: -6px !important;
    font-size: 0.84375rem;
    color: var(--dkd-quiet, #666);
  }
/* END_SNIPPET:c-team-member */

/* START_SNIPPET:c-team (INDEX:297) */
.c-team {
    padding-top: 40px;
    padding-bottom: 80px;
  }

  .c-team__head {
    display: grid;
    gap: 14px;
    max-width: 720px;
    margin-bottom: 40px;
  }

  .c-team__head > p {
    margin: 0;
  }

  .c-team__eyebrow {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dkd-terra);
  }

  .c-team__heading {
    margin: 0;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  .c-team__text {
    font-size: 1.03125rem;
  }

  .c-team__note {
    font-size: 0.9375rem;
    color: var(--dkd-quiet, #666);
  }

  .c-team__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (max-width: 1000px) {
    .c-team__list {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scrollbar-width: none;
    }

    .c-team__list::-webkit-scrollbar {
      display: none;
    }

    .c-team__list > * {
      flex: 0 0 62%;
      scroll-snap-align: start;
    }
  }
/* END_SNIPPET:c-team */

/* START_SNIPPET:c-tldr (INDEX:298) */
.c-tldr {
    display: grid;
    gap: var(--space-2, 8px);
    margin-block: var(--space-6, 24px);
    padding: var(--space-5, 20px);
    border-left: 3px solid var(--color-brand-primary, #888);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .c-tldr__label {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .c-tldr__text > :first-child {
    margin-top: 0;
  }

  .c-tldr__text > :last-child {
    margin-bottom: 0;
  }
/* END_SNIPPET:c-tldr */

/* START_SNIPPET:c-trust-benefits (INDEX:300) */
.c-trust-benefits {
    padding-block: var(--space-10, 40px);
  }

  .c-trust-benefits__heading {
    margin: 0 0 var(--space-6, 24px);
    text-align: center;
  }

  .c-trust-benefits__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6, 24px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-trust-benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1, 4px);
    text-align: center;
  }

  .c-trust-benefit__icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
  }

  .c-trust-benefit__title,
  .c-trust-benefit__text {
    margin: 0;
  }

  .c-trust-benefit__title {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
  }

  .c-trust-benefit__text {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #666);
  }

  @media (min-width: 768px) {
    .c-trust-benefits__list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .c-trust-benefit__icon {
      width: 72px;
      height: 72px;
    }
  }
/* END_SNIPPET:c-trust-benefits */

/* START_SNIPPET:c-trust-row (INDEX:302) */
.c-trust-row {
    border-block: 1px solid var(--dkd-line, var(--color-border-default, #ddd));
  }

  /* The list reset of the core (ul[role='list']) weighs more than one class. */
  .c-trust-row .c-trust-row__list {
    display: grid;
    /* 1fr as in the draft, not minmax(0, 1fr): a column gives way to its longest word, the four never share alike. */
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding-block: 30px;
  }

  .c-trust-point {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 14px;
    align-items: center;
  }

  .c-trust-point__icon {
    width: 34px;
    height: 34px;
    color: var(--color-text-link, #222);
  }

  .c-trust-point__body {
    margin: 0;
  }

  .c-trust-point__body b {
    display: block;
    font-size: 0.90625rem;
    font-weight: 500;
  }

  .c-trust-point__body span {
    font-size: 0.8125rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  @media (max-width: 1000px) {
    .c-trust-row .c-trust-row__list {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* Am Telefon: kleineres Symbol neben der Überschrift statt mittig neben dem Text, engere Zeilen. */
  @media (max-width: 560px) {
    .c-trust-row .c-trust-row__list {
      gap: 20px 16px;
    }

    .c-trust-point {
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
    }

    .c-trust-point__icon {
      width: 28px;
      height: 28px;
    }

    .c-trust-point__body {
      line-height: 1.4;
    }

    .c-trust-point__body span {
      display: block;
      margin-top: 2px;
    }
  }
/* END_SNIPPET:c-trust-row */

/* START_SNIPPET:c-values (INDEX:304) */
.c-values {
    padding-top: 72px;
    padding-bottom: 80px;
  }

  .c-values__heading {
    margin: 0 0 36px;
    text-align: center;
    font-size: clamp(1.875rem, 3.2vw, 2.625rem);
    line-height: 1.1;
  }

  .c-values__list {
    --badge-size: clamp(112px, 12.8vw, 160px);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(20px, 4vw, 56px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .c-values__list > :nth-child(odd) {
    transform: rotate(-4deg);
  }

  .c-values__list > :nth-child(even) {
    transform: rotate(4deg);
  }
/* END_SNIPPET:c-values */

/* START_SNIPPET:c-variant-note (INDEX:305) */
.c-variant-note {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:c-variant-note */

/* START_SNIPPET:c-variant-notes (INDEX:306) */
.c-variant-notes {
    margin-block: var(--space-2, 8px);
  }

  .c-variant-notes__note {
    margin: 0 0 var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-variant-notes__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }
/* END_SNIPPET:c-variant-notes */

/* START_SNIPPET:c-verdict (INDEX:307) */
.c-verdict {
    display: grid;
    gap: var(--space-2, 8px);
    margin-block: var(--space-6, 24px);
    padding: var(--space-5, 20px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
  }

  .c-verdict__claim {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-verdict__phrase {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
  }

  .c-verdict__light {
    flex: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-text-secondary, #888);
  }

  .c-verdict--green .c-verdict__light {
    background: var(--color-success-500, #888);
  }

  .c-verdict--yellow .c-verdict__light {
    background: var(--color-warm-500, #888);
  }

  .c-verdict--red .c-verdict__light {
    background: var(--color-error-600, #888);
  }

  .c-verdict__text > :first-child {
    margin-top: 0;
  }

  .c-verdict__text > :last-child {
    margin-bottom: 0;
  }
/* END_SNIPPET:c-verdict */

/* START_SNIPPET:c-video-tile (INDEX:308) */
.c-video-tile {
    position: relative;
    min-width: 0;
  }

  .c-video-tile__button {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 12px);
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    background: none;
    border: 0;
    border-radius: var(--radius-lg, 12px);
    cursor: pointer;
  }

  .c-video-tile__button:focus-visible {
    outline: 3px solid var(--color-border-focus, currentColor);
    outline-offset: 4px;
  }

  .c-video-tile__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-bg-accent, #eee);
    border-radius: var(--radius-lg, 12px);
  }

  /* Hochkant gedrehte Clips stehen ruhiger als 4:5-Ausschnitt; der Player zeigt danach das ganze Bild. */
  .c-video-tile--portrait .c-video-tile__media {
    aspect-ratio: 4 / 5;
  }

  .c-video-tile__still {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
    transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .c-video-tile__play {
    position: absolute;
    left: var(--space-4, 16px);
    bottom: var(--space-4, 16px);
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: var(--color-text-link, #222);
    background: var(--color-card, #fff);
    border-radius: 50%;
    box-shadow: var(--shadow-md, none);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
  }

  .c-video-tile__play .icon {
    width: 20px;
    height: 20px;
    margin-left: 3px;
    fill: currentColor;
    stroke: none;
  }

  .c-video-tile__length {
    position: absolute;
    top: var(--space-3, 12px);
    right: var(--space-3, 12px);
    padding: 3px 10px;
    font-size: 0.8125rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    color: var(--color-text-primary, #222);
    background: var(--color-card, #fff);
    border-radius: var(--radius-full, 9999px);
  }

  .c-video-tile__title {
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--color-text-primary, #222);
  }

  .c-video-tile__fallback {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-lg, 12px);
  }

  @media (hover: hover) and (pointer: fine) {
    .c-video-tile__button:hover .c-video-tile__still {
      transform: scale(1.03);
    }

    .c-video-tile__button:hover .c-video-tile__play {
      color: var(--color-action-primary-text, #fff);
      background: var(--color-action-primary, #222);
      transform: scale(1.06);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-video-tile__still,
    .c-video-tile__play {
      transition: none;
    }
  }

  /* Der Player im Dialog: eine Bühne in Tinte, Titel und Schließen darüber. Das Skript legt ihn beim ersten Klick an. */
  .c-video-dialog {
    width: min(960px, calc(100vw - 32px));
    max-width: none;
    max-height: none;
    margin: auto;
    padding: 6px;
    overflow: visible;
    color: var(--color-text-inverse, #fff);
    background: transparent;
    border: 0;
  }

  .c-video-dialog--portrait {
    width: min(420px, calc(100vw - 32px), calc((100dvh - 120px) * 9 / 16));
  }

  .c-video-dialog::backdrop {
    background: var(--color-dkd-navy, #000);
    opacity: 0.94;
  }

  .c-video-dialog__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-3, 12px);
  }

  .c-video-dialog__title {
    margin: 0;
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-text-inverse, #fff);
  }

  .c-video-dialog__close {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    color: var(--color-text-primary, #222);
    background: var(--color-card, #fff);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
  }

  .c-video-dialog__close:focus-visible {
    outline: 3px solid var(--color-dkd-himmel, currentColor);
    outline-offset: 3px;
  }

  .c-video-dialog__close .icon {
    width: 18px;
    height: 18px;
  }

  .c-video-dialog__stage {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-dkd-navy, #000);
    border-radius: var(--radius-md, 8px);
  }

  .c-video-dialog--portrait .c-video-dialog__stage {
    aspect-ratio: 9 / 16;
  }

  .c-video-dialog__stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }

  html:has(.c-video-dialog[open]) {
    overflow: hidden;
  }
/* END_SNIPPET:c-video-tile */

/* START_SNIPPET:c-waitlist (INDEX:309) */
.c-waitlist {
    display: grid;
    gap: var(--space-4, 16px);
    padding-block: var(--space-12, 48px);
  }

  .c-waitlist__eyebrow {
    margin: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-waitlist__heading {
    margin: 0;
  }

  .c-waitlist__text {
    margin: 0;
  }

  .c-waitlist__quote {
    margin: 0;
    padding-inline-start: var(--space-4, 16px);
    font-size: var(--text-lg, 1.125rem);
    border-inline-start: 2px solid var(--color-border-strong, #222);
  }

  .c-waitlist__author {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    margin: 0;
  }

  .c-waitlist__portrait .c-image {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: var(--radius-full, 999px);
  }

  .c-waitlist__author-name {
    font-weight: 600;
  }

  .c-waitlist__author-role {
    color: var(--color-text-secondary, #666);
  }

  .c-waitlist__signup {
    padding: var(--space-5, 20px);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-xl, 16px);
  }
/* END_SNIPPET:c-waitlist */

/* START_SNIPPET:cart-addon (INDEX:310) */
.cart-addon {
    display: grid;
    gap: var(--space-1, 4px);
  }

  .cart-addon__card {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-lg, 12px);
  }

  .cart-addon__media {
    flex: none;
    width: 52px;
    height: 52px;
    overflow: hidden;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .cart-addon__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .cart-addon__body {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
    font-size: var(--text-sm, 0.875rem);
  }

  .cart-addon__title {
    font-weight: 600;
    line-height: 1.3;
  }

  .cart-addon__add {
    flex: none;
    min-height: 44px;
    padding-inline: var(--space-4, 16px);
    border-radius: var(--radius-full, 999px);
  }

  .cart-addon__deal {
    margin: 0;
    font-family: var(--font-highlight, serif);
    font-size: var(--text-xl, 1.25rem);
    line-height: 1.2;
    text-align: center;
  }

  .cart-addon .form-message:empty {
    display: none;
  }
/* END_SNIPPET:cart-addon */

/* START_SNIPPET:cart-body (INDEX:311) */
.cart-body {
    display: block;
  }

  .cart-body__empty {
    display: grid;
    gap: var(--space-6, 24px);
    justify-items: center;
    padding-block: var(--space-6, 24px);
    text-align: center;
  }

  .cart-body__empty > p {
    margin: 0;
  }

  /* Die Kachel steht live in der linken Hälfte eines mittigen Felds für zwei Kacheln; auf dem Telefon links. */
  .cart-body__collection {
    display: grid;
    justify-self: center;
    gap: var(--space-2, 8px);
    width: 200px;
    margin-inline-end: min(200px, calc(100% - 200px));
    color: inherit;
    text-align: left;
    text-decoration: none;
  }

  .cart-body__collection .c-image {
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-lg, 12px);
  }

  .cart-body__lines {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart-body > .cart-rewards--progress {
    margin-block: var(--space-2, 8px) var(--space-1, 4px);
  }

  .cart-body > .cart-rewards--offers,
  .cart-body > .cart-rewards--gifts,
  .cart-body > .cart-upsell {
    margin-top: var(--space-4, 16px);
  }

  .cart-body__form {
    display: grid;
    gap: var(--space-4, 16px);
    margin-top: var(--space-4, 16px);
  }

  .cart-body__note {
    margin-top: var(--space-4, 16px);
  }

  /* The lines end on their own rule; after an offer the note draws one. */
  .cart-body:has(> .cart-rewards--offers, > .cart-rewards--gifts, > .cart-upsell:not([hidden])) > .cart-body__note {
    padding-top: var(--space-3, 12px);
    border-top: 1px solid var(--color-border-default, #ddd);
  }

  .cart-body__note-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 24px;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    cursor: pointer;
    list-style: none;
  }

  .cart-body__note-toggle::-webkit-details-marker {
    display: none;
  }

  .cart-body__note-toggle .icon {
    width: 16px;
    height: 16px;
    margin-inline-start: auto;
  }

  .cart-body__note[open] > .cart-body__note-toggle .icon {
    transform: rotate(45deg);
  }

  .cart-body__note > .field__input {
    margin-top: var(--space-2, 8px);
  }

  /* With script every change is sent at once, so the update button leaves before the script runs and nothing moves. */
  @media (scripting: enabled) {
    .cart-body [data-cart-update] {
      display: none;
    }
  }

  .cart-body__foot {
    display: grid;
    gap: var(--space-3, 12px);
  }

  .cart-body__totals > *,
  .cart-body__discounts {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart-body__row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px);
  }

  .cart-body__total {
    margin-top: var(--space-2, 8px);
    font-size: var(--text-lg, 1.125rem);
    font-weight: 600;
  }

  .cart-body__hint {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .cart-body__hint--center {
    margin: 0;
    text-align: center;
  }

  /* The saving reads as a gain: in the colour of success, the mark of free shipping in line with the words. */
  .cart-body__savings {
    margin: 0;
    color: var(--color-success-700, #333);
  }

  .cart-body__savings > :last-child {
    font-weight: 600;
  }

  .cart-body__free {
    white-space: nowrap;
  }

  .cart-body__free .icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
  }

  .cart-body__actions {
    display: grid;
    gap: var(--space-2, 8px);
  }

  /* The total in the checkout button speaks in the button's own type and colour. */
  .cart-body__checkout .c-price,
  .cart-body__checkout .c-price__current {
    color: inherit;
    font-weight: inherit;
  }

  .cart-body__foot-note {
    font-size: var(--text-sm, 0.875rem);
  }

  /* The compact cart: sums as quiet rows, the total in larger type, a round checkout in green and the foot note centred under it. */
  .cart-body--compact .cart-body__totals {
    display: grid;
    gap: var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
  }

  .cart-body--compact .cart-body__total {
    margin-top: var(--space-1, 4px);
    font-size: var(--text-base, 1rem);
  }

  .cart-body--compact .cart-body__total .c-price__current {
    font-size: var(--text-xl, 1.25rem);
  }

  .cart-body--compact .cart-body__checkout {
    min-height: 56px;
    color: var(--color-text-inverse, #fff);
    background: var(--color-success-700, #333);
    border-color: var(--color-success-700, #333);
    border-radius: var(--radius-full, 999px);
  }

  .cart-body--compact .cart-body__foot-note {
    font-size: var(--text-xs, 0.75rem);
    text-align: center;
    color: var(--color-text-secondary, #666);
  }

  .cart-body--compact .cart-body__foot > .cart-body__hint {
    margin: 0;
    font-size: var(--text-xs, 0.75rem);
    text-align: center;
    color: var(--color-text-secondary, #666);
  }

  .cart-body[aria-busy='true'] {
    opacity: 0.6;
  }
/* END_SNIPPET:cart-body */

/* START_SNIPPET:cart-line (INDEX:313) */
.cart-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: var(--space-3, 12px);
    padding-block: var(--space-3, 12px);
    border-bottom: 1px solid var(--color-border-default, #ddd);
  }

  .cart-line__media {
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .cart-line__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-line__body > * {
    margin-block: 0;
  }

  .cart-line__title {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
  }

  .cart-line__gift {
    margin-inline-end: var(--space-1, 4px);
    padding: 0 var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-full, 999px);
  }

  .cart-line__title a {
    color: inherit;
    text-decoration: none;
  }

  .cart-line__variant,
  .cart-line__details,
  .cart-line__discounts {
    margin: 0;
    padding: 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
    list-style: none;
  }

  .cart-line__discounts {
    color: var(--color-text-primary, #222);
  }

  .cart-line__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-top: var(--space-1, 4px);
  }

  .cart-line__quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border-strong, #222);
    border-radius: var(--radius-full, 999px);
  }

  .cart-line__quantity .icon-button {
    width: 32px;
    height: 32px;
  }

  .cart-line__quantity-input {
    width: 2.5rem;
    padding: var(--space-1, 4px) 0;
    font: inherit;
    color: inherit;
    text-align: center;
    background: transparent;
    border: 0;
    appearance: textfield;
  }

  .cart-line__quantity-input::-webkit-inner-spin-button {
    appearance: none;
  }

  .cart-line__remove-button {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0;
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    background: none;
    border: 0;
    cursor: pointer;
  }

  /* The compact cart: picture, then name with the price under it and the discount in the same column, the stepper as a pill on the right with remove under it. */
  .cart-body--compact .cart-line {
    grid-template-columns: 64px minmax(0, 1fr) auto;
    column-gap: var(--space-3, 12px);
    row-gap: 0;
    align-items: center;
  }

  .cart-body--compact .cart-line__media {
    grid-row: 1 / span 8;
    align-self: center;
    border-radius: var(--radius-lg, 12px);
  }

  .cart-body--compact .cart-line__body {
    display: contents;
  }

  .cart-body--compact .cart-line__body > *,
  .cart-body--compact .cart-line__price {
    grid-column: 2;
  }

  .cart-body--compact .cart-line__title {
    order: 1;
  }

  .cart-body--compact .cart-line__price {
    order: 2;
    max-width: none;
    font-size: var(--text-sm, 0.875rem);
    text-align: start;
  }

  .cart-body--compact .cart-line__price .c-price {
    justify-content: flex-start;
  }

  .cart-body--compact .cart-line__body > :not(.cart-line__title, .cart-line__foot) {
    order: 3;
  }

  .cart-body--compact .cart-line__discounts {
    margin-top: var(--space-1, 4px);
    color: var(--color-success-700, #333);
  }

  .cart-body--compact .cart-line__foot {
    grid-column: 3;
    grid-row: 1 / span 8;
    flex-direction: column;
    gap: var(--space-1, 4px);
    margin: 0;
  }

  .cart-body--compact .cart-line__quantity {
    border-color: var(--color-border-default, #ddd);
  }

  .cart-body--compact .cart-line__remove-button {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #666);
  }

  /* The table form (cart_classic_table): name and price on one line, the stepper and remove under them at both ends, no rule between the rows. */
  .cart-body--table .cart-line {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    column-gap: var(--space-5, 20px);
    row-gap: 0;
    align-items: start;
    border-bottom: 0;
  }

  .cart-body--table .cart-line__media {
    grid-row: 1 / span 6;
  }

  .cart-body--table .cart-line__body {
    display: contents;
  }

  .cart-body--table .cart-line__body > * {
    grid-column: 2;
  }

  .cart-body--table .cart-line__title {
    grid-row: 1;
  }

  .cart-body--table .cart-line__price {
    grid-column: 3;
    grid-row: 1;
  }

  .cart-body--table .cart-line__body > .cart-line__foot {
    grid-column: 2 / -1;
    justify-content: space-between;
    margin-top: 10px;
  }

  /* A price with its former price and its unit wraps inside a narrow column, so the stepper beside it keeps its room and its hit area. */
  .cart-line__price {
    max-width: 7rem;
    text-align: right;
  }

  .cart-line__price .c-price {
    justify-content: flex-end;
  }
/* END_SNIPPET:cart-line */

/* START_SNIPPET:cart-offer (INDEX:315) */
.cart-offer {
    display: grid;
    gap: var(--space-2, 8px);
    margin-block: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-lg, 12px);
  }

  /* The price keeps its place beside the name; a long name wraps instead. */
  .cart-offer__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
  }

  .cart-offer__title,
  .cart-offer__total {
    margin: 0;
  }

  .cart-offer__title {
    flex: 1;
    min-width: 0;
    font-weight: 600;
  }

  .cart-offer__total {
    flex: none;
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
  }

  .cart-offer__total .c-price {
    flex-wrap: nowrap;
  }

  .cart-offer__remove .cart-line__remove-button {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #666);
  }

  .cart-offer__list {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .cart-offer__row {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
  }

  .cart-offer__thumb {
    flex: none;
    overflow: hidden;
    width: 40px;
    height: 40px;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-md, 8px);
  }

  .cart-offer__thumb .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-offer__name {
    flex: 1;
    min-width: 0;
  }

  .cart-offer__price {
    flex: none;
    color: var(--color-text-secondary, #666);
  }

  .cart-offer__price .c-price__current {
    color: inherit;
    font-weight: inherit;
  }
/* END_SNIPPET:cart-offer */

/* START_SNIPPET:cart-rewards-gift (INDEX:316) */
/* A locked gift waits behind a dashed frame in muted type; an open one stands solid with its check. */
  .cart-rewards__gift {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px);
    color: var(--color-text-secondary, #666);
    background: var(--color-bg-secondary, #eee);
    border: 1.5px dashed var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
  }

  .cart-rewards__gift--reached {
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border-style: solid;
    border-color: var(--color-brand-primary, #333);
  }

  .cart-rewards__gift-media {
    display: grid;
    place-items: center;
    overflow: hidden;
    width: 72px;
    height: 72px;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-md, 8px);
  }

  .cart-rewards__gift-media .c-image {
    width: 72px;
    height: 72px;
    object-fit: contain;
  }

  .cart-rewards__gift-media .icon {
    width: 24px;
    height: 24px;
  }

  .cart-rewards__gift-body {
    display: grid;
    gap: var(--space-1, 4px);
    min-width: 0;
  }

  .cart-rewards__gift-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .cart-rewards__badge,
  .cart-rewards__gift-state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    padding: 2px var(--space-2, 8px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    border-radius: var(--radius-full, 999px);
  }

  .cart-rewards__badge {
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-primary, #222);
    background: var(--color-brand-highlight, #eee);
  }

  .cart-rewards__gift-state {
    white-space: nowrap;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-default, #ddd);
  }

  .cart-rewards__gift--reached .cart-rewards__gift-state {
    color: var(--color-status-available, #444);
    border-color: currentColor;
  }

  .cart-rewards__gift-state .icon {
    width: 14px;
    height: 14px;
  }

  .cart-rewards__gift-title {
    font-weight: 600;
    line-height: 1.3;
  }

  .cart-rewards__gift-price .c-price {
    font-size: var(--text-sm, 0.875rem);
  }
/* END_SNIPPET:cart-rewards-gift */

/* START_SNIPPET:cart-rewards (INDEX:321) */
.cart-rewards {
    display: grid;
    gap: var(--space-3, 12px);
  }

  .cart-rewards--offers,
  .cart-rewards--gifts {
    gap: var(--space-2, 8px);
  }

  /* The goal stands on the accent surface of the brand, so it reads as one promise and not as another row of the cart. */
  .cart-rewards__progress {
    display: grid;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
    background: var(--color-brand-accent, #eee);
    border-radius: var(--radius-lg, 12px);
  }

  .cart-rewards__status,
  .cart-rewards__heading {
    margin: 0;
  }

  .cart-rewards__status {
    font-size: var(--text-base, 1rem);
    line-height: 1.5;
    text-align: center;
  }

  .cart-rewards__amount {
    display: inline-block;
    padding: 0 var(--space-2, 8px);
    font-weight: 600;
    background: var(--color-brand-highlight, #fff);
    border-radius: var(--radius-full, 999px);
  }

  .cart-rewards__heading {
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .cart-rewards__bar {
    position: relative;
    height: 8px;
    margin-block: var(--space-6, 24px) var(--space-10, 40px);
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-full, 999px);
  }

  .cart-rewards__fill {
    display: block;
    width: var(--cart-rewards-progress, 0%);
    height: 100%;
    background: var(--color-brand-primary, #333);
    border-radius: inherit;
    transition: width 0.3s ease;
  }

  .cart-rewards__marker {
    position: absolute;
    top: 50%;
    left: var(--cart-rewards-position, 50%);
    display: grid;
    justify-items: center;
    gap: var(--space-1, 4px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: 600;
    color: var(--color-text-secondary, #666);
    transform: translate(-50%, -20px);
  }

  .cart-rewards__dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 2px solid var(--color-brand-accent, #eee);
    border-radius: var(--radius-full, 999px);
  }

  .cart-rewards__dot .icon {
    width: 20px;
    height: 20px;
  }

  .cart-rewards__marker--reached .cart-rewards__dot {
    border-color: var(--color-brand-primary, #333);
  }

  .cart-rewards__done {
    position: absolute;
    right: -4px;
    bottom: -4px;
    display: grid;
    place-items: center;
    width: 18px;
    height: 18px;
    color: var(--color-text-inverse, #fff);
    background: var(--color-brand-primary, #333);
    border-radius: var(--radius-full, 999px);
  }

  .cart-rewards__done .icon {
    width: 12px;
    height: 12px;
  }

  .cart-rewards__gifts {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  /* The compact cart: the goal first and left, a thin bar with small marks, under it the add-on and, at the end, a note in hand. */
  .cart-body--compact .cart-rewards__progress {
    gap: var(--space-3, 12px);
    padding: var(--space-4, 16px);
    border-radius: var(--radius-xl, 20px);
  }

  .cart-body--compact .cart-rewards__status {
    order: -1;
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    line-height: 1.35;
    text-align: start;
  }

  .cart-body--compact .cart-rewards__amount {
    padding: 0;
    background: none;
  }

  .cart-body--compact .cart-rewards__bar {
    height: 4px;
    margin: var(--space-4, 16px) 4% var(--space-6, 24px);
  }

  .cart-body--compact .cart-rewards__marker {
    font-size: 0.625rem;
    color: var(--color-text-primary, #222);
    transform: translate(-50%, -15px);
  }

  .cart-body--compact .cart-rewards__dot {
    width: 30px;
    height: 30px;
    border-width: 1.5px;
    border-color: var(--color-border-default, #ddd);
  }

  .cart-body--compact .cart-rewards__dot .icon {
    width: 14px;
    height: 14px;
  }

  .cart-body--compact .cart-rewards__marker--reached .cart-rewards__dot {
    background: var(--color-brand-highlight, #eee);
    border-color: var(--color-brand-highlight, #eee);
  }

  .cart-body--compact .cart-rewards__done {
    display: none;
  }

  .cart-rewards__hand {
    margin: 0;
    font-family: var(--font-highlight, serif);
    font-size: var(--text-xl, 1.25rem);
    text-align: center;
    transform: rotate(-1.5deg);
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-rewards__fill {
      transition: none;
    }
  }
/* END_SNIPPET:cart-rewards */

/* START_SNIPPET:cart-set-offer (INDEX:324) */
.cart-set-offer {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-1, 4px) var(--space-3, 12px);
    padding: var(--space-3, 12px);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .cart-set-offer__media {
    overflow: hidden;
    width: 72px;
    height: 72px;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-sm, 4px);
  }

  .cart-set-offer__media .c-image {
    width: 72px;
    height: 72px;
    object-fit: cover;
  }

  .cart-set-offer__body {
    display: grid;
    gap: var(--space-1, 4px);
  }

  .cart-set-offer__title,
  .cart-set-offer__pieces {
    margin: 0;
    padding: 0;
    font-size: var(--text-sm, 0.875rem);
    list-style: none;
  }

  .cart-set-offer__title {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
  }

  .cart-set-offer__pieces,
  .cart-set-offer__variant {
    color: var(--color-text-secondary, #666);
  }

  .cart-set-offer__add {
    grid-column: 3;
    min-height: 40px;
    padding: var(--space-2, 8px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
  }

  .cart-set-offer .form-message--error {
    grid-column: 1 / -1;
  }
/* END_SNIPPET:cart-set-offer */

/* START_SNIPPET:cart-subtotal (INDEX:326) */
.cart-body__subtotal {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    margin: 0;
  }

  .cart-body__subtotal-label {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .cart-body__subtotal-amount .c-price__current {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 500;
  }
/* END_SNIPPET:cart-subtotal */

/* START_SNIPPET:cart-upsell (INDEX:330) */
/* The column holds the row that scrolls; without the zero floor the cards would widen the page. */
  .cart-upsell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2, 8px);
  }

  .cart-upsell[hidden] {
    display: none;
  }

  /* One card at a time, as the eye takes it in the drawer; the dots below say how many follow. Positioned, so the visually hidden texts of a price stay inside the row it clips. */
  .cart-upsell__list {
    position: relative;
    display: grid;
    grid-auto-columns: 100%;
    grid-auto-flow: column;
    gap: var(--space-3, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .cart-upsell__list::-webkit-scrollbar {
    display: none;
  }

  .cart-upsell__item {
    display: grid;
    scroll-snap-align: start;
  }

  /* Each card keeps its own height; the script sets the row to the card in view, so a short card leaves no band below. */
  .cart-upsell__list {
    align-items: start;
    transition: height 0.2s ease;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-upsell__list {
      transition: none;
    }
  }

  /* A big picture beside eyebrow, name, price and button: the picture sets the height, so the card holds no empty band. */
  .cart-upsell__card {
    display: grid;
    grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr auto;
    gap: var(--space-1, 4px) var(--space-4, 16px);
    padding: var(--space-3, 12px);
    background: var(--color-bg-secondary, #eee);
    border: 1px solid var(--color-border-strong, #222);
    border-radius: var(--radius-lg, 12px);
  }

  .cart-upsell__media {
    grid-row: 1 / -1;
    align-self: center;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--color-bg-primary, #fff);
    border-radius: var(--radius-md, 8px);
  }

  .cart-upsell__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cart-upsell__eyebrow {
    font-size: var(--text-xs, 0.75rem);
    color: var(--color-text-secondary, #666);
  }

  .cart-upsell__name {
    display: -webkit-box;
    overflow: hidden;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  .cart-upsell__name:hover {
    text-decoration: underline;
  }

  .cart-upsell__price {
    font-size: var(--text-sm, 0.875rem);
  }

  .cart-upsell__actions {
    display: flex;
    flex-wrap: wrap;
    align-self: end;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
  }

  .cart-upsell__variant {
    flex: 1 1 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 var(--space-3, 12px);
    font: inherit;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-strong, #222);
    border-radius: var(--radius-full, 999px);
  }

  .cart-upsell__add {
    flex: 1 1 100%;
    gap: var(--space-1, 4px);
    min-height: 40px;
    padding: var(--space-2, 8px) var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
  }

  .cart-upsell__add .icon {
    width: 16px;
    height: 16px;
  }

  @media (pointer: coarse) {
    .cart-upsell__variant,
    .cart-upsell__add {
      min-height: 44px;
    }
  }

  .cart-upsell__error {
    grid-column: 2;
    margin: 0;
  }

  .cart-upsell__error:empty {
    display: none;
  }

  .cart-upsell__dots {
    display: flex;
    justify-content: center;
    gap: var(--space-1, 4px);
  }

  .cart-upsell__dots[hidden] {
    display: none;
  }

  /* The hit area is 24 px, the mark inside it small; the current card is a wider pill. */
  .cart-upsell__dot {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
  }

  .cart-upsell__dot::before {
    content: '';
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--color-border-strong, #222);
    border-radius: var(--radius-full, 999px);
    transition: width 0.2s ease;
  }

  .cart-upsell__dot[aria-current='true'] {
    width: 36px;
  }

  .cart-upsell__dot[aria-current='true']::before {
    width: 28px;
  }

  .cart-upsell__dot:focus-visible {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .cart-upsell__dot::before {
      transition: none;
    }
  }
/* END_SNIPPET:cart-upsell */

/* START_SNIPPET:cluster-rail (INDEX:331) */
.cluster-rail {
    display: grid;
    gap: var(--space-4, 16px);
    margin-bottom: var(--space-8, 32px);
  }

  .cluster-rail__start {
    display: grid;
    gap: var(--space-1, 4px);
    padding: var(--space-5, 20px);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg-secondary, #f4f4f4);
    color: inherit;
    text-decoration: none;
  }

  .cluster-rail__label {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .cluster-rail__title {
    font-weight: 600;
  }
/* END_SNIPPET:cluster-rail */

/* START_SNIPPET:consent-banner (INDEX:332) */
.consent {
    position: fixed;
    inset-inline: var(--space-3, 12px);
    bottom: var(--space-3, 12px);
    z-index: 150;
    max-width: 420px;
    padding: var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.4;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-default, #ccc);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  }

  .consent[hidden] {
    display: none;
  }

  .consent__title,
  .consent-prefs__title {
    margin: 0;
    font-weight: 600;
  }

  .consent__text,
  .consent__more {
    margin: var(--space-1, 4px) 0 0;
  }

  .consent__more {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 16px);
  }

  .consent__link {
    min-height: 24px;
    padding: 0;
    color: inherit;
    font: inherit;
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
  }

  .consent__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2, 8px);
    margin-top: var(--space-3, 12px);
  }

  .consent__actions .button {
    min-height: 44px;
    padding-inline: var(--space-3, 12px);
  }

  .consent__actions .button--full {
    grid-column: 1 / -1;
  }

  .consent-prefs {
    width: min(480px, 100vw - var(--space-6, 24px));
    max-height: calc(100dvh - var(--space-6, 24px));
    padding: var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 0;
    border-radius: var(--radius-lg, 12px);
    overflow-y: auto;
  }

  .consent-prefs::backdrop {
    background: var(--color-overlay-default, rgba(0, 0, 0, 0.3));
  }

  .consent-prefs__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
  }

  .consent-prefs__list {
    display: grid;
    gap: var(--space-3, 12px);
    margin: var(--space-3, 12px) 0 0;
    padding: 0;
    list-style: none;
  }

  .consent-prefs__option {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-2, 8px);
    min-height: 24px;
  }

  .consent-prefs__option input {
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-action-primary, #222);
  }

  .consent-prefs__option strong {
    display: block;
  }

  @media (min-width: 768px) {
    .consent {
      right: auto;
      bottom: var(--space-6, 24px);
      left: var(--space-6, 24px);
    }
  }
/* END_SNIPPET:consent-banner */

/* START_SNIPPET:dkd-app-banner (INDEX:340) */
.dkd-app-banner {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 20px;
    align-items: center;
    margin-block: 44px;
    padding: 30px 26px 30px 30px;
    overflow: hidden;
    color: var(--color-dkd-navy);
    background: var(--color-dkd-papier);
    border: 1px solid var(--color-dkd-linie);
    border-radius: 28px;
  }

  .dkd-app-banner > * + *,
  .dkd-app-banner__text > * + * {
    margin-top: 0;
  }

  .dkd-app-banner__text {
    position: relative;
    display: grid;
    gap: 10px;
    justify-items: start;
  }

  .dkd-app-banner__text > p {
    margin: 0;
  }

  .dkd-app-banner__k {
    font: 800 0.6875rem var(--font-body);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-dkd-leise);
  }

  .dkd-app-banner__title {
    font: 650 clamp(1.5rem, 2.6vw, 1.875rem) / 1.08 var(--font-heading);
    letter-spacing: -0.015em;
  }

  .dkd-app-banner__hand {
    font-family: var(--font-highlight);
    font-size: 1.25rem;
    line-height: 1.2;
    color: var(--color-dkd-blau);
  }

  .dkd-app-banner .dkd-app-banner__features,
  .dkd-article__text .dkd-app-banner__features {
    display: grid;
    gap: 12px;
    width: 100%;
    margin: 8px 0 4px;
    padding: 0;
    list-style: none;
  }

  .dkd-article__text .dkd-app-banner__f::marker {
    content: none;
  }

  .dkd-app-banner__f {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    line-height: 1.35;
  }

  .dkd-app-banner__f b {
    font: 650 0.9375rem var(--font-heading);
  }

  .dkd-app-banner__f b::after {
    content: " · ";
    font-weight: 400;
    color: var(--color-dkd-leise);
  }

  .dkd-app-banner__f span:last-child {
    color: var(--color-dkd-leisetext);
  }

  .dkd-app-banner__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .dkd-app-banner__icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dkd-app-banner__f--reise .dkd-app-banner__icon {
    color: var(--color-dkd-orangetief);
    background: var(--color-dkd-creme);
  }

  .dkd-app-banner__f--wissen .dkd-app-banner__icon {
    color: var(--color-dkd-blau);
    background: var(--color-dkd-hellblau);
  }

  .dkd-app-banner__f--sos .dkd-app-banner__icon {
    color: var(--color-dkd-weiss);
    background: var(--color-dkd-rot);
  }

  .dkd-app-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    margin-top: 6px;
  }

  .dkd-app-banner__cta {
    display: inline-block;
    padding: 13px 24px;
    font: 700 0.9375rem var(--font-body);
    color: var(--color-dkd-weiss);
    text-decoration: none;
    background: var(--color-dkd-navy);
    border-radius: 999px;
  }

  .dkd-app-banner__cta:hover {
    background: var(--color-dkd-blau);
  }

  .dkd-app-banner__note {
    font-size: 0.8125rem;
    color: var(--color-dkd-leise);
  }

  .dkd-app-banner__stage {
    position: relative;
    height: 330px;
  }

  .dkd-app-banner__phone {
    position: absolute;
    width: 158px;
    padding: 6px;
    background: var(--color-dkd-navy);
    border-radius: 32px;
    box-shadow: 0 18px 36px color-mix(in srgb, var(--color-dkd-navy) 16%, transparent);
  }

  .dkd-app-banner__phone--front {
    top: 12px;
    left: 10px;
    z-index: 2;
    transform: rotate(-2deg);
  }

  .dkd-app-banner__phone--back {
    top: 40px;
    right: 0;
    z-index: 1;
    width: 140px;
    transform: rotate(4deg);
  }

  .dkd-app-banner__screen {
    position: relative;
    display: grid;
    gap: 7px;
    align-content: start;
    min-height: 296px;
    padding: 30px 11px 10px;
    background: var(--color-dkd-papier);
    border-radius: 26px;
  }

  .dkd-app-banner__phone--back .dkd-app-banner__screen {
    min-height: 262px;
  }

  .dkd-app-banner__island {
    position: absolute;
    top: 8px;
    left: 50%;
    width: 46px;
    height: 13px;
    background: var(--color-dkd-navy);
    border-radius: 999px;
    transform: translateX(-50%);
  }

  .dkd-app-banner__ctx {
    font: 800 6.5px var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-dkd-leise);
  }

  .dkd-app-banner__h {
    font: 700 20px var(--font-heading);
  }

  .dkd-app-banner__task {
    display: grid;
    gap: 3px;
    padding: 10px;
    background: var(--color-dkd-hellblau);
    border-radius: 14px;
  }

  .dkd-app-banner__task small {
    font: 800 6px var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .dkd-app-banner__task b {
    font: 650 11.5px var(--font-heading);
  }

  .dkd-app-banner__task i {
    margin-top: 4px;
    padding: 5px 0;
    font: 700 8px var(--font-body);
    font-style: normal;
    text-align: center;
    color: var(--color-dkd-weiss);
    background: var(--color-dkd-blau);
    border-radius: 999px;
  }

  .dkd-app-banner__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .dkd-app-banner__tiles em {
    height: 46px;
    border-radius: 11px;
  }

  .dkd-app-banner__tiles em:nth-child(1) { background: var(--color-dkd-creme); }
  .dkd-app-banner__tiles em:nth-child(2) { background: var(--color-dkd-mint); }
  .dkd-app-banner__tiles em:nth-child(3) { background: var(--color-dkd-zartblau); }

  .dkd-app-banner__tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 6px;
    padding: 6px;
    background: var(--color-dkd-weiss);
    border-radius: 999px;
  }

  .dkd-app-banner__tab em {
    width: 11px;
    height: 11px;
    background: var(--color-dkd-linie);
    border-radius: 4px;
  }

  .dkd-app-banner__tab em.sos {
    width: 17px;
    height: 17px;
    background: var(--color-dkd-rot);
    border-radius: 50%;
  }

  .dkd-app-banner__screen--sos {
    justify-items: center;
    padding-top: 34px;
    color: var(--color-dkd-weiss);
    background: var(--color-dkd-navy);
  }

  .dkd-app-banner__screen--sos .dkd-app-banner__island {
    background: color-mix(in srgb, var(--color-dkd-weiss) 14%, var(--color-dkd-navy));
  }

  .dkd-app-banner__screen--sos small {
    font: 800 7px var(--font-body);
    letter-spacing: 0.12em;
    color: var(--color-dkd-rosa);
  }

  .dkd-app-banner__sos-btn {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin: 8px 0 10px;
    font: 750 17px var(--font-heading);
    background: var(--color-dkd-rot);
    border-radius: 50%;
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-dkd-rot) 25%, transparent);
  }

  .dkd-app-banner__sos-row {
    width: 100%;
    padding: 7px 0;
    font: 650 10px var(--font-heading);
    text-align: center;
    background: color-mix(in srgb, var(--color-dkd-weiss) 10%, transparent);
    border-radius: 10px;
  }


  @media (prefers-reduced-motion: no-preference) {
    @media (max-width: 720px) {
    .dkd-app-banner {
      grid-template-columns: minmax(0, 1fr);
      padding: 24px 20px 0;
    }

    .dkd-app-banner__stage {
      height: 230px;
      margin: 4px -20px 0;
      overflow: hidden;
    }

    .dkd-app-banner__phone--front {
      left: 50%;
      margin-left: -120px;
    }

    .dkd-app-banner__phone--back {
      right: 50%;
      margin-right: -130px;
    }
  }
/* END_SNIPPET:dkd-app-banner */

/* START_SNIPPET:dkd-app-teaser (INDEX:341) */
/* Farben und Formen aus der App-Vorschau 2026, Grund „Hell": var(--color-dkd-papier), Karten weiß, Aufgabenkarte Vorsorge-Lila. */
  .dkd-app-teaser {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 190px;
    gap: 24px;
    align-items: center;
    margin-block: 40px;
    padding: 26px 26px 26px 28px;
    color: var(--color-dkd-navy);
    background: var(--color-dkd-papier);
    border: 1px solid var(--color-dkd-linie);
    border-radius: 26px;
    overflow: hidden;
  }

  .dkd-app-teaser > * + *,
  .dkd-app-teaser__text > * + * {
    margin-top: 0;
  }

  .dkd-app-teaser__text {
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  .dkd-app-teaser__k {
    margin: 0;
    font: 800 0.6875rem var(--font-body);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-dkd-leise);
  }

  .dkd-app-teaser__title {
    margin: 0;
    font: 600 clamp(1.375rem, 2.2vw, 1.625rem) / 1.15 var(--font-heading);
    letter-spacing: -0.01em;
    color: var(--color-dkd-navy);
  }

  .dkd-app-teaser__hand {
    margin: 0;
    font-family: var(--font-highlight);
    font-size: 1.1875rem;
    color: var(--color-dkd-blau);
  }

  .dkd-app-teaser__list {
    display: grid;
    gap: 6px;
    margin: 6px 0 4px;
    padding: 0;
    font-size: 0.9375rem;
    list-style: none;
  }

  .dkd-app-teaser__list li {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
  }

  .dkd-app-teaser__dot {
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  }

  .dkd-app-teaser__cta {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 22px;
    font: 700 0.9375rem var(--font-body);
    color: var(--color-dkd-weiss);
    text-decoration: none;
    background: var(--color-dkd-blau);
    border-radius: 999px;
  }

  .dkd-app-teaser__cta:hover {
    background: var(--color-dkd-navy);
  }

  .dkd-app-teaser__phone {
    justify-self: center;
    width: 170px;
    padding: 8px;
    background: var(--color-dkd-navy);
    border-radius: 30px;
    transform: rotate(4deg);
    box-shadow: 0 18px 40px color-mix(in srgb, var(--color-dkd-navy) 18%, transparent);
  }

  .dkd-app-teaser__screen {
    display: grid;
    gap: 8px;
    padding: 18px 12px 10px;
    background: var(--color-dkd-papier);
    border-radius: 23px;
  }

  .dkd-app-teaser__ctx {
    font: 800 7px var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-dkd-leise);
  }

  .dkd-app-teaser__h {
    font: 700 19px var(--font-heading);
    color: var(--color-dkd-navy);
  }

  .dkd-app-teaser__task {
    display: grid;
    gap: 3px;
    padding: 10px;
    background: var(--color-dkd-hellblau);
    border-radius: 14px;
  }

  .dkd-app-teaser__task small {
    font: 800 6.5px var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
  }

  .dkd-app-teaser__task b {
    font: 600 11px var(--font-heading);
    color: var(--color-dkd-navy);
  }

  .dkd-app-teaser__task i {
    margin-top: 4px;
    padding: 5px 0;
    font: 700 8px var(--font-body);
    font-style: normal;
    text-align: center;
    color: var(--color-dkd-weiss);
    background: var(--color-dkd-blau);
    border-radius: 999px;
  }

  .dkd-app-teaser__row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }

  .dkd-app-teaser__row em {
    height: 44px;
    border-radius: 10px;
  }

  .dkd-app-teaser__tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 4px;
    padding: 6px;
    background: var(--color-dkd-weiss);
    border-radius: 999px;
  }

  .dkd-app-teaser__tab em {
    width: 12px;
    height: 12px;
    background: var(--color-dkd-linie);
    border-radius: 4px;
  }

  .dkd-app-teaser__tab em.sos {
    width: 18px;
    height: 18px;
    background: var(--color-dkd-rot);
    border-radius: 50%;
  }

  /* Rechte Spalte: oben das kleine Telefon auf Papier, darunter Titel, Handschrift, zwei Punkte, Knopf. */
  .dkd-app-teaser--rail {
    display: block;
    margin-block: 0;
    padding: 0;
    border-radius: 18px;
  }

  .dkd-app-teaser__mini {
    display: grid;
    place-items: center;
    height: 150px;
    overflow: hidden;
    background: color-mix(in srgb, var(--color-dkd-hellblau) 55%, var(--color-dkd-papier));
  }

  .dkd-app-teaser__mini .dkd-app-teaser__phone {
    width: 128px;
    margin-top: 48px;
    transform: rotate(-6deg);
  }

  .dkd-app-teaser--rail .dkd-app-teaser__text {
    gap: 6px;
    padding: 14px 16px 16px;
  }

  .dkd-app-teaser--rail .dkd-app-teaser__k {
    font-size: 0.625rem;
  }

  .dkd-app-teaser--rail .dkd-app-teaser__title {
    font-size: 1.0625rem;
  }

  .dkd-app-teaser--rail .dkd-app-teaser__hand {
    font-size: 0.9375rem;
  }

  .dkd-app-teaser__checks {
    display: grid;
    gap: 3px;
    margin: 2px 0 0;
    padding: 0;
    font-size: 0.8125rem;
    list-style: none;
  }

  .dkd-app-teaser__checks li {
    position: relative;
    margin: 0;
    padding-left: 18px;
  }

  .dkd-app-teaser__checks li::before {
    content: "✓";
    position: absolute;
    left: 0;
    font-weight: 700;
    color: var(--color-dkd-blau);
  }

  .dkd-app-teaser--rail .dkd-app-teaser__cta {
    justify-self: stretch;
    padding: 10px 14px;
    font-size: 0.875rem;
    text-align: center;
  }

  @media (max-width: 640px) {
    .dkd-app-teaser {
      grid-template-columns: minmax(0, 1fr);
      padding: 22px;
    }

    .dkd-app-teaser__phone {
      display: none;
    }
  }
/* END_SNIPPET:dkd-app-teaser */

/* START_SNIPPET:dkd-article-cta (INDEX:342) */
.dkd-article__text .dkd-article-cta {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
    margin: 40px 0;
    padding: 20px;
    color: inherit;
    text-decoration: none;
    background: var(--color-bg-secondary, #eee);
    border-radius: 14px;
  }

  .dkd-article__text .dkd-article-cta + * {
    margin-top: 0;
  }

  .dkd-article-cta__media .c-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
  }

  .dkd-article-cta__text {
    display: grid;
    gap: 6px;
    justify-items: start;
  }

  .dkd-article-cta .dkd-tag {
    padding: 4px 7px;
    font-size: 0.625rem;
    line-height: 1;
    letter-spacing: 0.07em;
  }

  .dkd-article-cta__title {
    font: 500 1.25rem / 1.25 var(--font-heading);
    color: var(--color-text-primary, #222);
  }

  .dkd-article-cta__lead {
    font-size: 0.90625rem;
    line-height: 1.5;
  }

  .dkd-article-cta:hover .text-link,
  .dkd-article-cta:focus-visible .text-link {
    background-size: calc(100% - 18px) 1px;
  }

  .dkd-article-cta:focus-visible {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  @media (max-width: 640px) {
    .dkd-article__text .dkd-article-cta {
      grid-template-columns: 96px minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .dkd-article-cta .dkd-tag {
      padding: 5px 8px;
      font-size: 0.6875rem;
    }
  }
/* END_SNIPPET:dkd-article-cta */

/* START_SNIPPET:dkd-article-rail (INDEX:344) */
.dkd-rail {
    display: none;
  }

  @media (min-width: 1200px) {
    .dkd-rail {
      display: block;
      align-self: stretch;
    }

    .dkd-rail__sticky {
      position: sticky;
      top: 100px;
      display: grid;
      gap: 14px;
    }
  }

  /* Notfall-Karte kompakt (Johannes 06.11.2026): je Nummer eine Zeile, Nummer links, Stichwort rechts. */
  .dkd-rail__sos {
    display: grid;
    gap: 0;
    padding: 12px 14px 6px;
    color: var(--color-dkd-weiss);
    background: var(--color-dkd-navy);
    border-radius: 16px;
  }

  .dkd-rail__sos-k {
    margin: 0 0 4px;
    font: 800 0.625rem var(--font-body);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-dkd-rosa);
  }

  .dkd-rail__sos-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 7px 0;
    color: var(--color-dkd-weiss);
    text-decoration: none;
    border-top: 1px solid color-mix(in srgb, var(--color-dkd-weiss) 12%, transparent);
  }

  .dkd-rail__sos-row b {
    font: 700 1rem var(--font-heading);
    letter-spacing: -0.01em;
  }

  .dkd-rail__sos-row--rot b {
    color: var(--color-dkd-rosa);
  }

  .dkd-rail__sos-row span {
    font-size: 0.75rem;
    color: color-mix(in srgb, var(--color-dkd-weiss) 75%, transparent);
  }

  .dkd-rail__sos-row:hover span {
    color: var(--color-dkd-weiss);
  }
/* END_SNIPPET:dkd-article-rail */

/* START_SNIPPET:dkd-cart-empty (INDEX:347) */
.dkd-cart-empty {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-4, 16px);
    align-items: center;
    margin-top: var(--space-6, 24px);
    padding: var(--space-3, 12px);
    color: inherit;
    text-decoration: none;
    background: var(--color-card, #fff);
    border: 1px solid var(--dkd-line, #ddd);
    border-radius: 14px;
  }

  .dkd-cart-empty__media {
    display: block;
    width: 96px;
    height: 96px;
    overflow: hidden;
    background: var(--dkd-tile, #eee);
    border-radius: 6px;
  }

  .dkd-cart-empty__media .c-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .dkd-cart-empty__text {
    display: grid;
    gap: 2px;
    min-width: 0;
  }

  .dkd-cart-empty__eyebrow {
    font-size: 0.75rem;
    color: var(--dkd-quiet, #666);
  }

  .dkd-cart-empty__title {
    font-family: var(--font-heading, sans-serif);
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.3;
  }

  .dkd-cart-empty__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    font-size: 0.875rem;
  }

  .dkd-cart-empty__meta .c-price__current {
    font-weight: 400;
    color: inherit;
  }

  .dkd-cart-empty:hover .dkd-cart-empty__title {
    text-decoration: underline;
    text-underline-offset: 3px;
  }
/* END_SNIPPET:dkd-cart-empty */

/* START_SNIPPET:dkd-cart-trust (INDEX:348) */
/* Summen und Fußnote geben ihre Kinder an das Raster des Fußes ab, damit order die Zusagen unter den Knopf stellt
     (Muster happyhug hh-hugs.css). Reihenfolge: Gesamt, Hinweise, Knopf, Zahlungsarten und Zusagen. */
  .cart-body__foot:has(.dkd-cart-trust) {
    gap: 2px;
  }

  .cart-body__foot:has(.dkd-cart-trust) .cart-body__totals,
  .cart-body__foot:has(.dkd-cart-trust) .cart-body__foot-note {
    display: contents;
  }

  .cart-body__foot:has(.dkd-cart-trust) .cart-body__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 var(--space-1, 4px);
    font-family: var(--font-heading, sans-serif);
    font-size: var(--text-xl, 1.5rem);
    font-weight: 500;
    letter-spacing: -0.015em;
  }

  .cart-body__foot:has(.dkd-cart-trust) .cart-body__hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
  }

  .cart-body__foot:has(.dkd-cart-trust) .cart-body__actions {
    order: 1;
    margin-top: var(--space-4, 16px);
  }

  .dkd-cart-trust {
    order: 2;
    display: grid;
    gap: var(--space-4, 16px);
    margin-top: var(--space-3, 12px);
  }

  .dkd-cart-trust .c-payment-icons {
    text-align: center;
  }

  .dkd-cart-trust .c-payment-icons__item {
    margin: 0 2px 4px;
  }

  /* Neun Zeichen in einer Reihe auch auf 390 px, im Maß der Fußzeile von happyhug. */
  .dkd-cart-trust .c-payment-icons__icon {
    width: 32px;
    height: 20px;
  }

  /* Zwei Klassen: der Listen-Reset des Kerns (ul[role=list]) schlägt eine allein. */
  .dkd-cart-trust .dkd-cart-trust__list {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: var(--space-2, 8px);
    margin: 0;
    padding: var(--space-4, 16px) 0 0;
    list-style: none;
    border-top: 1px solid var(--color-border-soft, #ddd);
  }

  .dkd-cart-trust__list li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--color-text-primary, #222);
  }

  .dkd-cart-trust__list svg {
    box-sizing: content-box;
    width: 16px;
    height: 16px;
    padding: 7px;
    color: var(--color-bg-inverse, #222);
    background: var(--color-bg-accent, #eee);
    border-radius: 50%;
  }

  .cart-line li.dkd-gift-prop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 6px 8px;
    font-size: 0.78125rem;
    line-height: 1.35;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-secondary, #eee);
    border-radius: 6px;
  }

  .dkd-gift-prop__tag {
    padding: 1px 6px;
    font-size: 0.65625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: var(--color-brand-accent, #ddd);
    border-radius: 3px;
  }

  /* In der Schublade nur die Zahlungsarten, eng unter dem Knopf: so passen Zeile und „Passt dazu" ins Bild. Die
     Zusagen stehen auf der Seite /cart. */
  .drawer .dkd-cart-trust {
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
  }

  .drawer .dkd-cart-trust .dkd-cart-trust__list {
    display: none;
  }

  /* Die Summenkarte von /cart ist innen schmaler als die Schublade: kleinere Zeichen, damit alle neun in eine Reihe
     passen. */
  .main-cart .dkd-cart-trust .c-payment-icons__icon {
    width: 28px;
    height: 18px;
  }

  .main-cart .dkd-cart-trust .c-payment-icons__item {
    margin: 0 1px 4px;
  }
/* END_SNIPPET:dkd-cart-trust */

/* START_SNIPPET:dkd-crumbs (INDEX:350) */
/* .brot of the draft: 13 px in the quiet colour, 18 px above and below, the links without a line. */
  .dkd-crumbs {
    padding-block: 18px;
    font-size: 0.8125rem;
    color: var(--dkd-quiet, #666);
  }

  .dkd-crumbs a {
    color: inherit;
    text-decoration: none;
  }

  .dkd-crumbs a:hover {
    color: var(--color-text-primary, #222);
  }

  /* Am Telefon bleibt der Pfad einzeilig: ein langer Titel endet mit Auslassung, die h1 darunter trägt ihn ganz.
     white-space: pre hält die Leerzeichen um die Schrägstriche, die als eigene Teile im Flex stehen. */
  @media (max-width: 640px) {
    .dkd-crumbs {
      display: flex;
      min-width: 0;
      white-space: pre;
    }

    .dkd-crumbs > a {
      flex-shrink: 0;
    }

    .dkd-crumbs > [aria-current] {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
/* END_SNIPPET:dkd-crumbs */

/* START_SNIPPET:dkd-lead-magnet (INDEX:352) */
/* Rechte Spalte: Bild des Werkzeugs oben, darunter die Frage als Titel, was man bekommt, ein Knopf mit dem Tun. */
  .dkd-lead-magnet.dkd-lead-magnet--rail {
    display: block;
    margin-block: 0;
    padding: 0;
    overflow: hidden;
    background: var(--color-dkd-weiss);
    border: 1px solid var(--color-dkd-linie);
    border-radius: 18px;
  }

  .dkd-lm-rail__picture {
    display: block;
    background: var(--color-dkd-papier);
  }

  .dkd-lm-rail__picture img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }

  .dkd-lm-rail__body {
    display: grid;
    gap: 6px;
    padding: 14px 16px 16px;
  }

  .dkd-lm-rail__body > * {
    margin: 0;
  }

  .dkd-lead-magnet--rail .dkd-lead-magnet__eyebrow {
    font-size: 0.6875rem;
  }

  .dkd-lm-rail__tool {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-dkd-leise);
  }

  .dkd-lead-magnet.dkd-lead-magnet--rail .dkd-lead-magnet__title {
    font-size: 1.0625rem;
    line-height: 1.25;
  }

  .dkd-lm-rail__meta {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--color-dkd-leise);
  }

  .dkd-lm-rail__cta {
    display: block;
    margin-top: 6px;
    padding: 10px 14px;
    font: 700 0.875rem var(--font-body);
    text-align: center;
    color: var(--color-dkd-weiss);
    text-decoration: none;
    background: var(--color-dkd-blau);
    border-radius: 999px;
  }

  .dkd-lm-rail__cta:hover {
    background: var(--color-dkd-navy);
  }

  /* In der Sprache der Kästen des Entwurfs 11/2026: Zartblau, Radius 14, die Augenbraue klein in Blau wie „In 30 Sekunden". */
  .dkd-lead-magnet {
    display: grid;
    gap: 10px;
    justify-items: start;
    margin-block: 48px 0;
    padding: 24px 26px 26px;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-accent, #eee);
    border-radius: 14px;
  }

  .dkd-lead-magnet__eyebrow {
    margin: 0;
    font: 600 0.78125rem var(--font-body);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--color-text-link, #222);
  }

  .dkd-lead-magnet__title {
    margin: 0;
    font-size: clamp(1.375rem, 2.2vw, 1.75rem);
    line-height: 1.15;
  }

  .dkd-lead-magnet__question {
    margin: 0;
    font-size: 1.0625rem;
    font-weight: 600;
  }

  .dkd-lead-magnet__quote {
    margin: 0;
    padding-left: 16px;
    border-left: 3px solid var(--color-dkd-hellblau);
  }

  .dkd-lead-magnet__quote p {
    margin: 0;
    font-family: var(--font-heading);
    font-size: 1.0625rem;
    line-height: 1.5;
  }

  .dkd-lead-magnet__link {
    margin-top: 8px;
  }
/* END_SNIPPET:dkd-lead-magnet */

/* START_SNIPPET:dkd-review-box (INDEX:358) */
.dkd-review-box {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: inherit;
    line-height: 1.4;
    color: var(--color-text-primary, #222);
  }

  .dkd-review-box a {
    color: inherit;
    text-decoration: none;
  }

  .dkd-review-box__sign {
    flex: none;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dkd-review-box__next {
    margin-left: 12px;
    color: var(--dkd-quiet, #666);
  }

  .dkd-review-box--pending {
    padding: 2px 8px;
    color: var(--dkd-quiet, #666);
    border: 1px dashed var(--dkd-line, #ddd);
    border-radius: 6px;
  }
/* END_SNIPPET:dkd-review-box */

/* START_SNIPPET:dkd-shop-card (INDEX:361) */
.dkd-shop-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
  }

  .dkd-shop-card__media {
    position: relative;
    aspect-ratio: 1;
    margin-bottom: 10px;
    overflow: hidden;
    background: var(--dkd-tile, var(--color-bg-secondary, #f4f4f4));
    border-radius: 6px;
  }

  .dkd-shop-card__media > .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
  }

  .dkd-shop-card__tag {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
  }

  /* "Gepackt von" with the logo of the partner, top right on a white card (.apo-logo of the draft). */
  .dkd-shop-card__partner {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 1;
    display: grid;
    gap: 2px;
    width: clamp(78px, 34%, 118px);
    padding: 5px 8px 6px;
    background: var(--color-card, #fff);
    border-radius: 8px;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-text-primary, #222) 8%, transparent);
  }

  .dkd-shop-card__partner small {
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .dkd-shop-card__partner .c-image {
    width: 100%;
    height: auto;
  }

  /* Lange Wörter („Austrocknungs/Dehydration") trennen an der Silbe statt mitten im Wort (lang="de"). */
  .dkd-shop-card__title {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.3;
    hyphens: auto;
  }

  .dkd-shop-card__link {
    color: inherit;
    text-decoration: none;
  }

  /* The title carries the one link; it stretches over the whole card, picture included. */
  .dkd-shop-card__link::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
  }

  .dkd-shop-card__link:focus-visible {
    outline: none;
  }

  .dkd-shop-card__link:focus-visible::after {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 2px;
    border-radius: 6px;
  }

  .dkd-shop-card__line {
    margin: 0;
    font-size: 0.8125rem;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  /* On a collection page the longer line stops after two lines (.produkt .unter of kollektion.html). */
  .dkd-shop-card--collection .dkd-shop-card__line {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .dkd-shop-card__price {
    margin: 2px 0 0;
    font-size: 0.875rem;
  }

  .dkd-shop-card__price .c-price__current {
    color: inherit;
    font-weight: 400;
  }

  .dkd-shop-card__price .c-price__compare {
    margin-left: 6px;
    color: var(--dkd-quiet, var(--color-text-secondary, #666));
  }

  .dkd-shop-card__hints {
    align-items: flex-start;
  }

  /* In der Zweierreihe am Telefon deckte die Karte „Gepackt von" das Kennzeichen oben links ab: sie rückt kleiner
     nach unten rechts. */
  @media (max-width: 599px) {
    .dkd-shop-card__partner {
      top: auto;
      right: 8px;
      bottom: 8px;
      width: 64px;
      padding: 4px 6px;
    }

    .dkd-shop-card__partner small {
      font-size: 0.4375rem;
    }
  }

  @media (hover: hover) {
    .dkd-shop-card:hover .dkd-shop-card__media > .c-image {
      transform: scale(1.03);
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .dkd-shop-card__media > .c-image {
      transition: none;
    }
  }
/* END_SNIPPET:dkd-shop-card */

/* START_SNIPPET:dkd-wissen-card (INDEX:364) */
.dkd-wissen-card {
    display: grid;
    align-content: start;
    gap: 8px;
    color: inherit;
    text-decoration: none;
  }

  .dkd-wissen-card__media {
    overflow: hidden;
    aspect-ratio: 16 / 10;
    margin-bottom: 8px;
    border-radius: 10px;
  }

  .dkd-wissen-card__media .c-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
  }

  .dkd-wissen-card:hover .dkd-wissen-card__media .c-image {
    transform: scale(1.03);
  }

  .dkd-wissen-card__media--empty {
    display: grid;
    place-items: center;
    color: var(--dkd-quiet, #666);
    background: var(--color-dkd-platzhalter);
  }

  .dkd-wissen-card__media--empty svg {
    width: 40px;
    height: 40px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .dkd-wissen-card__text {
    display: grid;
    gap: 8px;
    justify-items: start;
  }

  .dkd-wissen-card__text > * {
    margin: 0;
  }

  .dkd-wissen-card__meta {
    font-size: 0.78125rem;
    color: var(--dkd-quiet, #666);
  }

  .dkd-wissen-card__title {
    font-size: 1.1875rem;
    font-weight: 600;
    line-height: 1.28;
  }

  .dkd-wissen-card:hover .dkd-wissen-card__title {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--color-dkd-orange) 45%, transparent);
    text-decoration-thickness: 1px;
    text-underline-offset: 5px;
  }

  .dkd-wissen-card__teaser {
    display: -webkit-box;
    overflow: hidden;
    font-size: 0.90625rem;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .dkd-wissen-card:focus-visible {
    outline: 3px solid var(--color-border-focus, #222);
    outline-offset: 4px;
  }

  /* .w-top: the newest article large, picture left (1.25 parts), text right, a hairline under it. */
  .dkd-wissen-card--featured {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(28px, 4vw, 64px);
    align-items: center;
    padding-bottom: 72px;
    border-bottom: 1px solid var(--dkd-line, #ddd);
  }

  .dkd-wissen-card--featured .dkd-wissen-card__media {
    margin: 0;
    border-radius: 14px;
  }

  .dkd-wissen-card--featured:hover .dkd-wissen-card__media .c-image {
    transform: scale(1.02);
  }

  .dkd-wissen-card--featured .dkd-wissen-card__text {
    gap: 12px;
  }

  .dkd-wissen-card--featured .dkd-wissen-card__title {
    font-size: clamp(1.75rem, 2.8vw, 2.375rem);
    font-weight: 500;
    line-height: 1.12;
    /* .w-top-text h2 breaks only between words, also on the phone. */
    hyphens: manual;
  }

  .dkd-wissen-card--featured:hover .dkd-wissen-card__title {
    text-decoration: none;
  }

  .dkd-wissen-card--featured .dkd-wissen-card__teaser {
    display: block;
    max-width: 520px;
    font-size: 1rem;
    -webkit-line-clamp: none;
  }

  .dkd-wissen-card--featured .text-link {
    margin-top: 6px;
  }

  @media (max-width: 1000px) {
    .dkd-wissen-card--featured {
      grid-template-columns: minmax(0, 1fr);
      gap: 24px;
      padding-bottom: 48px;
    }
  }
/* END_SNIPPET:dkd-wissen-card */

/* START_SNIPPET:facets (INDEX:370) */
.facets {
    display: grid;
    gap: var(--space-6, 24px);
  }

  .facets__form {
    display: grid;
  }

  /* Live: kleine versale Überschrift, rechts Plus oder Minus, kein Dreieck und keine Linie zwischen den Gruppen. */
  .facets__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2, 8px);
    min-height: 38px;
    font-size: var(--text-xs, 0.75rem);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    list-style: none;
    cursor: pointer;
  }

  .facets__label::-webkit-details-marker {
    display: none;
  }

  .facets__label .icon {
    flex: none;
    width: 14px;
    height: 14px;
  }

  .facets__group[open] > .facets__label .icon--plus,
  .facets__group:not([open]) > .facets__label .icon--minus {
    display: none;
  }

  .facets__values {
    display: grid;
    margin: var(--space-1, 4px) 0 var(--space-2, 8px);
  }

  .facets__choice {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    min-height: 24px;
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
  }

  .facets__choice input[type='checkbox'] {
    flex: none;
    width: 14px;
    height: 14px;
    margin: 0;
    border: 1px solid var(--color-border-strong, #222);
    border-radius: 2px;
    background: var(--color-bg-primary, #fff);
    appearance: none;
    cursor: inherit;
  }

  .facets__choice input[type='checkbox']:checked {
    background: var(--color-text-primary, #222);
    box-shadow: inset 0 0 0 2px var(--color-bg-primary, #fff);
  }

  .facets__choice input[type='checkbox']:focus-visible {
    outline: 2px solid var(--color-border-focus, #222);
    outline-offset: 2px;
  }

  .facets__choice:has(input:disabled) {
    color: var(--color-text-secondary, #666);
    cursor: not-allowed;
  }

  .facets__choice input[type='checkbox']:disabled {
    border-color: var(--color-border-default, #ddd);
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .facets__range {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2, 8px) var(--space-5, 20px);
    margin: var(--space-1, 4px) 0 var(--space-5, 20px);
  }

  /* Das Währungszeichen steht im Feld, der Betrag rechtsbündig. */
  .facets__price {
    position: relative;
  }

  .facets__currency {
    position: absolute;
    top: 50%;
    left: var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    transform: translateY(-50%);
    pointer-events: none;
  }

  .facets__price .field__input {
    min-height: 40px;
    padding: var(--space-1, 4px) var(--space-4, 16px) var(--space-1, 4px) calc(var(--space-4, 16px) + 1em);
    font-size: var(--text-sm, 0.875rem);
    text-align: right;
    border-radius: var(--radius-md, 8px);
    appearance: textfield;
  }

  .facets__price .field__input::-webkit-inner-spin-button,
  .facets__price .field__input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
  }

  .facets__apply {
    margin-top: var(--space-4, 16px);
  }

  /* Zwei Regler auf einer Bahn: nur ihre Griffe nehmen Zeiger an, sonst verdeckte der obere den unteren. */
  .facets__slider {
    position: relative;
    grid-column: 1 / -1;
    height: 24px;
  }

  .facets__slider::before {
    content: "";
    position: absolute;
    inset: 10px 0 auto;
    height: 4px;
    background: var(--color-text-primary, #222);
  }

  .facets__slider input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 24px;
    margin: 0;
    background: none;
    pointer-events: none;
    appearance: none;
  }

  .facets__slider input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-text-primary, #222);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-primary, #fff);
    pointer-events: auto;
    cursor: pointer;
    appearance: none;
  }

  .facets__slider input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 2px solid var(--color-text-primary, #222);
    border-radius: var(--radius-full, 9999px);
    background: var(--color-bg-primary, #fff);
    pointer-events: auto;
    cursor: pointer;
  }

  .facets__slider input::-moz-range-track {
    background: none;
  }

  /* With script every change loads at once, so the button that sends the form is not needed. */
  .facets[data-enhanced] .facets__apply {
    display: none;
  }

  .facets__main {
    min-width: 0;
  }

  .facets__bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
    margin-bottom: var(--space-4, 16px);
  }

  /* Mit Skript zieht die Form auf dem Telefon in den Dialog: sie steht dort nie im Fluss, und bis der Knopf kommt, hält die Leiste seinen Platz frei. */
  @media (max-width: 767px) and (scripting: enabled) {
    .facets__side {
      display: none;
    }

    .facets__bar {
      justify-content: flex-end;
      min-height: 44px;
    }

    .facets:not([data-enhanced]) .facets__bar .facets__sort {
      display: none;
    }
  }

  .facets__sort-menu {
    position: relative;
  }

  .facets__sort-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-height: 24px;
    font-size: var(--text-sm, 0.875rem);
    cursor: pointer;
    list-style: none;
  }

  .facets__sort-toggle::-webkit-details-marker {
    display: none;
  }

  .facets__sort-toggle .icon {
    width: 14px;
    height: 14px;
    transform: rotate(90deg);
  }

  .facets__sort-menu[open] .facets__sort-toggle .icon {
    transform: rotate(-90deg);
  }

  .facets__sort-options {
    display: grid;
    gap: var(--space-1, 4px);
    margin: var(--space-2, 8px) 0 0;
    padding: 0;
    list-style: none;
  }

  /* Über dem Raster klappt die Liste über die Karten; im Dialog steht sie im Fluss. */
  .facets__bar .facets__sort-options {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    min-width: 220px;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-md, none);
  }

  .drawer .facets__sort {
    margin-bottom: var(--space-4, 16px);
  }

  .facets__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
    margin-bottom: var(--space-4, 16px);
  }

  .facets__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 4px);
    min-height: 32px;
    padding: 0 var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-secondary, #f4f4f4);
    border-radius: var(--radius-full, 9999px);
  }

  .facets__chip .icon {
    width: 14px;
    height: 14px;
  }

  .facets__results:focus {
    outline: none;
  }

  .facets[aria-busy='true'] .facets__results {
    opacity: 0.5;
  }

  .facets__title {
    margin: 0;
    font-size: var(--text-lg, 1.125rem);
  }

  @media (min-width: 768px) {
    .facets__bar:not(:has(.facets__sort)) {
      display: none;
    }

    /* Live: 270 px Filterspalte, 60 px bis zum Raster, die Filter etwas tiefer als die Sortierung. */
    .facets {
      grid-template-columns: 270px minmax(0, 1fr);
      gap: calc(var(--space-12, 48px) + var(--space-3, 12px));
      align-items: start;
    }

    /* Die Filterspalte klebt am Schreibtisch mit, höchstens so hoch wie der Schirm unter dem Kopf, sonst wäre ihr Ende unerreichbar. */
    .facets__side {
      position: sticky;
      top: var(--header-height, 0px);
      max-height: calc(100vh - var(--header-height, 0px));
      overflow-y: auto;
      overscroll-behavior: contain;
      /* Der Rollbereich schnitte sonst Fokusring und Regler am Rand ab. */
      margin-inline: calc(-1 * var(--space-1, 4px));
      padding: var(--space-2, 8px) var(--space-1, 4px) 0;
    }
  }
/* END_SNIPPET:facets */

/* START_SNIPPET:gallery-slide (INDEX:375) */
.gallery-slide {
    display: flex;
    flex-direction: column;
    aspect-ratio: 1;
    /* A tile is square; where the entry carries more than fits, it grows downwards instead of cutting. */
    min-height: fit-content;
    overflow: hidden;
    background: var(--color-bg-primary, #fff);
  }

  .gallery-slide[data-tone='offwhite'] {
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .gallery-slide[data-tone='beige'] {
    background: var(--color-bg-accent, #f4f4f4);
  }

  .gallery-slide[data-tone='lavender'] {
    background: var(--color-brand-accent, #eee);
  }

  .gallery-slide__media {
    display: flex;
    flex: none;
    justify-content: center;
    gap: var(--space-3, 12px);
    max-height: 50%;
  }

  .gallery-slide__media img,
  .gallery-slide__footer-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .gallery-slide__content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-3, 12px);
    padding: var(--space-6, 24px);
  }

  .gallery-slide__content > * {
    margin: 0;
  }

  .gallery-slide__eyebrow {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-secondary, #666);
  }

  .gallery-slide__headline {
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-xl, 1.25rem);
    font-weight: 500;
  }

  .gallery-slide__sub,
  .gallery-slide__footnote {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .gallery-slide__bullets ul,
  .gallery-slide__bullets ol {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
    padding-left: 1.2em;
  }

  .gallery-slide__scroll {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .gallery-slide__table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.875rem);
  }

  .gallery-slide__table th,
  .gallery-slide__table td {
    padding: var(--space-2, 8px);
    text-align: left;
    font-weight: 400;
  }

  .gallery-slide__table tr:first-child th {
    font-weight: 500;
  }

  .gallery-slide__table tr:nth-child(even) {
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .gallery-slide__tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3, 12px);
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .gallery-slide__tile {
    display: grid;
    gap: var(--space-1, 4px);
    font-size: var(--text-sm, 0.875rem);
  }

  .gallery-slide__tile img {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md, 8px);
    object-fit: cover;
  }

  .gallery-slide--proof-wall .gallery-slide__tiles {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .gallery-slide--proof-wall .gallery-slide__tile img {
    aspect-ratio: 1;
    border-radius: var(--radius-full, 999px);
  }

  .gallery-slide--proof-wall .gallery-slide__content,
  .gallery-slide--checklist .gallery-slide__headline {
    text-align: center;
  }

  .gallery-slide__author,
  .gallery-slide__note,
  .gallery-slide__footnote {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2, 8px);
  }

  .gallery-slide__note,
  .gallery-slide__warning {
    padding: var(--space-3, 12px);
    border-radius: var(--radius-md, 8px);
    background: var(--color-brand-accent, #eee);
    font-size: var(--text-sm, 0.875rem);
  }

  .gallery-slide__warning {
    background: var(--color-brand-highlight, #eee);
  }

  .gallery-slide__labels {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
  }

  .gallery-slide__label {
    padding: var(--space-1, 4px) var(--space-3, 12px);
    border: 1px solid var(--color-border-strong, #222);
    border-radius: var(--radius-full, 999px);
    font-size: var(--text-sm, 0.875rem);
  }

  .gallery-slide--photo-overlay-claims .gallery-slide__media {
    position: absolute;
    inset: 0;
    max-height: none;
  }

  .gallery-slide--photo-overlay-claims .gallery-slide__content {
    position: relative;
    justify-content: flex-end;
  }

  .gallery-slide--photo-overlay-claims[data-text='light'] .gallery-slide__content {
    background: var(--color-overlay-default, rgb(0 0 0 / 0.3));
    color: var(--color-text-inverse, #fff);
  }

  .gallery-slide--photo-overlay-claims[data-text='light'] .gallery-slide__sub {
    color: inherit;
  }
/* END_SNIPPET:gallery-slide */

/* START_SNIPPET:legal-guarantee (INDEX:385) */
.legal-guarantee {
    width: min(640px, 100vw - var(--space-6, 24px));
    max-height: calc(100dvh - var(--space-6, 24px));
    padding: 0;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 0;
    border-radius: var(--radius-lg, 12px);
    overflow-y: auto;
  }

  .legal-guarantee::backdrop {
    background: var(--color-overlay-default, rgba(0, 0, 0, 0.3));
  }

  .legal-guarantee__close {
    position: sticky;
    top: var(--space-2, 8px);
    float: right;
    margin: var(--space-2, 8px) var(--space-2, 8px) -44px 0;
    z-index: 1;
    background: var(--color-bg-primary, #fff);
    box-shadow: 0 1px 4px var(--color-overlay-default, rgba(0, 0, 0, 0.3));
    border-radius: var(--radius-full, 9999px);
  }

  .legal-guarantee__notice {
    display: block;
    width: 100%;
    height: auto;
  }

  .legal-guarantee__more {
    display: block;
    padding: var(--space-3, 12px) var(--space-4, 16px) var(--space-4, 16px);
    font-size: var(--text-sm, 0.875rem);
    text-align: center;
  }

  .legal-guarantee__trigger {
    min-height: 24px;
    padding: 0;
    color: inherit;
    font: inherit;
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
  }
/* END_SNIPPET:legal-guarantee */

/* START_SNIPPET:locale-note (INDEX:388) */
.locale-note {
    display: grid;
    gap: var(--space-1, 4px);
    margin-block: var(--space-6, 24px);
    padding: var(--space-4, 16px);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-md, 8px);
    font-size: var(--text-sm, 0.875rem);
  }

  .locale-note__label {
    margin: 0;
    font-weight: 600;
  }

  .locale-note__text {
    margin: 0;
    color: var(--color-text-secondary, #666);
  }
/* END_SNIPPET:locale-note */

/* START_SNIPPET:no-blocks (INDEX:393) */
.no-blocks {
    margin: 0;
    padding: var(--space-8, 32px) var(--space-4, 16px);
    text-align: center;
    color: var(--color-text-secondary, #555);
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-lg, 12px);
  }
/* END_SNIPPET:no-blocks */

/* START_SNIPPET:page-numbers (INDEX:399) */
.page-numbers {
    margin-top: var(--space-10, 40px);
  }

  .page-numbers__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 8px);
  }

  .page-numbers__page,
  .page-numbers__step,
  .page-numbers__gap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-3, 12px);
    text-decoration: none;
    color: inherit;
    border-radius: var(--radius-full, 9999px);
  }

  .page-numbers__page:hover,
  .page-numbers__step:hover {
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .page-numbers__page--current {
    font-weight: 600;
    color: var(--color-action-primary-text, #fff);
    background: var(--color-action-primary, #222);
  }
/* END_SNIPPET:page-numbers */

/* START_SNIPPET:product-grid-item--onboarding (INDEX:404) */
.onboarding-tile__media {
    aspect-ratio: 1;
    background: var(--color-bg-secondary, #eee);
    border-radius: var(--radius-md, 8px);
  }

  .onboarding-tile__title {
    margin: var(--space-3, 12px) 0 0;
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #555);
  }

  .onboarding-tile--carousel {
    flex: 0 0 auto;
    width: 70%;
  }

  @media (min-width: 768px) {
    .onboarding-tile--carousel {
      width: 30%;
    }
  }
/* END_SNIPPET:product-grid-item--onboarding */

/* START_SNIPPET:purchase-lock (INDEX:408) */
.purchase-lock {
    position: sticky;
    top: 0;
    z-index: 101;
    padding: 10px 16px;
    background: var(--color-brand-highlight);
    color: var(--color-text-primary, #111);
    font: 500 14px/1.4 var(--font-body, system-ui, sans-serif);
    text-align: center;
  }

  .purchase-lock__toast {
    display: none;
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 10000;
    max-width: 90vw;
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--color-bg-inverse, #111);
    color: var(--color-text-inverse, #fff);
    font: 500 14px/1.4 var(--font-body, system-ui, sans-serif);
    transform: translateX(-50%);
  }

  .purchase-lock__toast.is-shown {
    display: block;
  }

  /* Every way to buy the core draws: the buy forms (product page, featured product, bundle, upsell, add-ons), the
     sticky buy bar, quick buy on cards, offer cards, the bundle builder, the checkout of drawer and cart page, Shopify's
     payment buttons and every link into the cart or the checkout. A brand adds the controls of its own sections. */
  .purchase-lock ~ * :is(
    form[action*="/cart/add"] [type="submit"],
    form[action*="/cart/add"] [name="add"],
    .shopify-payment-button,
    .additional-checkout-buttons,
    [name="checkout"],
    a[href*="/checkout"],
    a[href*="/cart/"],
    .c-sticky-buy,
    .c-quick-buy,
    .c-offer-cards__cta,
    .c-bundle-builder [data-add],
    .c-bundle-builder [data-submit]
  ) {
    display: none !important;
  }
/* END_SNIPPET:purchase-lock */

/* START_SNIPPET:rating-line (INDEX:409) */
/* Live steht die Zahl der Stimmen unter den Sternen, nicht neben ihnen — und die Sterne sind groß. */
  .c-rating-row {
    display: grid;
    justify-items: start;
    gap: var(--space-1, 4px);
    margin: 0 0 var(--space-3, 12px);
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-secondary, #666);
  }

  .c-rating-row__stars {
    display: inline-flex;
    gap: 1px;
  }

  .c-rating-row__star .icon {
    width: 22px;
    height: 22px;
    color: var(--color-border-primary, #ccc);
  }

  .c-rating-row__star--full .icon,
  .c-rating-row__fill .icon {
    color: var(--color-brand-primary, #444);
    fill: currentColor;
  }

  /* Ein angebrochener Stern ist der leere Stern mit einem gefüllten darüber, der nach seinem Viertel endet. */
  .c-rating-row__star {
    position: relative;
    display: inline-flex;
  }

  /* Unter dem gefüllten Teil steht wie bei Reviews.io nur der Umriss. */
  .c-rating-row__star--half > .icon {
    color: var(--color-brand-primary, #444);
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
  }

  .c-rating-row__fill {
    position: absolute;
    inset: 0;
    display: inline-flex;
    clip-path: inset(0 calc(100% - var(--rating-part, 50%)) 0 0);
  }

  /* In einer Karte steht die Zeile kleiner und wie live Sterne und Zahl im Textfluss hintereinander. */
  .c-rating-row--compact {
    display: block;
    margin: 0;
    font-size: var(--text-xs, 0.75rem);
  }

  .c-rating-row--compact .c-rating-row__stars {
    margin-inline-end: var(--space-1, 4px);
    vertical-align: middle;
  }

  .c-rating-row--compact .c-rating-row__star .icon {
    width: 18px;
    height: 18px;
  }

  /* Die Zahl bricht als Ganzes: passt sie nicht neben die Sterne, steht sie in einer eigenen Zeile darunter. */
  .c-rating-row--compact .c-rating-row__count {
    display: inline-block;
    white-space: nowrap;
  }
/* END_SNIPPET:rating-line */

/* START_SNIPPET:search-field (INDEX:413) */
.search-field {
    position: relative;
    display: block;
    flex: 1;
  }

  .search-field__form {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Eine gefüllte Leiste mit der Lupe links wie live; die Unterkante trägt die 3:1-Grenze des Feldes. */
  .search-field .field__input {
    min-height: 44px;
    padding-left: 52px;
    background: var(--color-bg-secondary, #f4f4f4);
    border-color: transparent transparent var(--color-border-strong, #222);
    border-radius: var(--radius-md, 8px);
  }

  .search-field__form .icon-button {
    position: absolute;
    top: 0;
    left: var(--space-1, 4px);
  }

  .search-field__form .icon {
    width: 24px;
    height: 24px;
  }

  .search-field__list {
    position: absolute;
    inset: calc(100% + var(--space-2, 8px)) 0 auto;
    z-index: 10;
    max-height: 70vh;
    overflow-y: auto;
    padding: var(--space-3, 12px);
    text-align: left;
    background: var(--color-bg-primary, #fff);
    border: 1px solid var(--color-border-default, #ddd);
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
  }
/* END_SNIPPET:search-field */

/* START_SNIPPET:signup-popup (INDEX:422) */
.signup-popup {
    width: min(720px, 100vw - var(--space-6, 24px));
    max-width: none;
    max-height: calc(100dvh - var(--space-6, 24px));
    padding: 0;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border: 0;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.1));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .signup-popup:not(.signup-popup--media) {
    width: min(480px, 100vw - var(--space-6, 24px));
  }

  .signup-popup[open] {
    display: grid;
  }

  .signup-popup::backdrop {
    background: var(--color-overlay-default, rgba(0, 0, 0, 0.45));
  }

  html.signup-popup-open {
    overflow: hidden;
  }

  .signup-popup__close {
    position: absolute;
    top: var(--space-2, 8px);
    right: var(--space-2, 8px);
    z-index: 1;
    min-width: 44px;
    min-height: 44px;
    color: var(--color-text-primary, #222);
    background: var(--color-bg-primary, #fff);
    border-radius: 999px;
  }

  .signup-popup__media {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-bg-secondary, #f4f4f4);
  }

  .signup-popup__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .signup-popup__body {
    display: grid;
    align-content: start;
    gap: var(--space-3, 12px);
    padding: var(--space-6, 24px) var(--space-5, 20px);
  }

  .signup-popup__eyebrow,
  .signup-popup__text,
  .signup-popup__consent {
    margin: 0;
  }

  .signup-popup__eyebrow {
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    color: var(--color-text-secondary, #555);
  }

  .signup-popup__title {
    margin: 0;
    padding-right: var(--space-8, 32px);
    font-family: var(--font-heading, system-ui, sans-serif);
    font-size: var(--text-2xl, 1.5rem);
    line-height: 1.2;
  }

  /* Beim Öffnen steht der Fokus auf der Überschrift (autofocus), nicht auf „Schließen": Screenreader lesen sie zuerst,
     und kein Fokusring springt ins Auge, bevor jemand Tab drückt. */
  .signup-popup__title:focus {
    outline: none;
  }

  .signup-popup--media .signup-popup__title {
    padding-right: 0;
  }

  .signup-popup__form {
    display: grid;
    gap: var(--space-2, 8px);
    margin: 0;
  }

  .signup-popup__form[hidden],
  .signup-popup__done[hidden],
  .signup-popup__message[hidden] {
    display: none;
  }

  .signup-popup__submit {
    min-height: 48px;
  }

  .signup-popup .field__input {
    font-size: max(16px, 1rem);
  }

  .signup-popup__message {
    margin: 0;
  }

  .signup-popup .field__label {
    margin-bottom: 0;
  }

  .signup-popup__consent {
    font-size: var(--text-xs, 0.75rem);
    line-height: 1.4;
    color: var(--color-text-secondary, #555);
  }

  .signup-popup__consent a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
  }

  .signup-popup__link {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    min-height: 44px;
    font-weight: 600;
  }

  .signup-popup__done {
    display: grid;
    gap: var(--space-2, 8px);
  }

  /* Telefon: kein Grid, damit ein hoher Inhalt den Dialog scrollen lässt statt über das Bild zu quellen; das Bild
     bleibt flach, damit Überschrift und Feld auch auf kleinen Geräten (375 × 667) im ersten Blick stehen. */
  @media (max-width: 767px) {
    .signup-popup[open] {
      display: block;
    }

    .signup-popup__media {
      aspect-ratio: auto;
      height: min(26dvh, 52vw);
    }
  }

  @media (min-width: 768px) {
    .signup-popup--media[open] {
      grid-template-columns: 2fr 3fr;
    }

    .signup-popup--media .signup-popup__media {
      aspect-ratio: auto;
      min-height: 100%;
    }

    .signup-popup--media .signup-popup__close {
      background: var(--color-bg-primary, #fff);
    }

    .signup-popup__body {
      padding: var(--space-8, 32px);
    }
  }
/* END_SNIPPET:signup-popup */

/* START_SNIPPET:title-text-reveal-and-highlights (INDEX:428) */
.text-highlight__break {
    display: block;
  }
/* END_SNIPPET:title-text-reveal-and-highlights */