/** Shopify CDN: Minification failed

Line 349:0 Unexpected "}"

**/
/* ZINKE — Aufbau der Produktseite, 17.09.2026
   ============================================

   Geladen von sections/main-product.liquid (nach zinke-beschreibung.css).

   Anlass (Pascal, 17.09.): Beim Auf- und Zuklappen von „Die Details" rutschte
   der Bereich „Das macht den Unterschied" mit nach unten. Und „Passt dazu"
   hatte mehr Präsenz als die eigenen Merkmale — Cross-Selling bringt nichts,
   wenn sich das Produkt selbst nicht verkauft.

   Ursache des Rutschens: Die ganze rechte Spalte (.product-info) klebte mit
   position: sticky. Mit aufgeklappter Beschreibung war sie über 2.300 px hoch,
   also viel höher als der Bildschirm. Eine klebende Spalte, die höher ist als
   das Fenster, bleibt beim Scrollen stehen — Kacheln und Beschreibung wanderten
   mit nach unten und waren erst erreichbar, als die linke Spalte zu Ende war.

   Neuer Aufbau am Laptop (Stand 17.09.2026, zweite Runde):

     ┌────────────────────┬──────────────┐
     │ Galerie            │ Kaufbereich  │
     ├────────────────────┤──────────────┤
     │ Das macht den      │ Passt dazu   │  ← kompakte Liste, per Skript
     │ Unterschied (groß) │ (4 Zeilen)   │    hierher verschoben
     │ Die Details        │              │
     │ Versand, Rückgabe  │              │
     └────────────────────┴──────────────┘

   Nichts klebt mehr. Der Kaufbereich hatte zuerst noch position: sticky —
   mit „Passt dazu" darunter wäre die rechte Spalte wieder so hoch geworden,
   dass derselbe Rutsch-Effekt zurückkommt.

   Auf dem Handy bleibt die Reihenfolge: Galerie, Kaufbereich, Merkmale,
   Details, Passt dazu (am Seitenende). */


/* --- Raster am Laptop ---------------------------------------------------- */
@media screen and (min-width: 750px) {
  .product-layout {
    grid-template-areas:
      "galerie rechts"
      "mehr    rechts";
    grid-template-rows: auto 1fr;
    row-gap: 0;
  }

  .product-layout > .product-gallery { grid-area: galerie; }

  .product-layout > .product-rechts {
    grid-area: rechts;
    align-self: start;
    min-width: 0;
  }

  .product-layout > .product-mehr {
    grid-area: mehr;
    min-width: 0;
    padding-top: clamp(2.4rem, 3.6vw, 3.4rem);
  }
}

/* zinke.css lässt .product-info kleben (sticky, top 130px). Das bleibt aus. */
.product-rechts > .product-info {
  position: static;
  top: auto;
}

@media screen and (max-width: 749px) {
  .product-layout > .product-rechts > .product-info { margin-top: 0; padding-top: 0; }
}


/* --- Merkmal-Kacheln mit mehr Gewicht ------------------------------------ */
.product-mehr .zinke-highlights-kompakt {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Ungerade Anzahl: die letzte Kachel nimmt die ganze Zeile, statt allein
   halb daneben zu stehen. */
.product-mehr .zinke-highlights-liste > .zinke-highlight:nth-child(odd):last-child {
  grid-column: 1 / -1;
}

@media screen and (min-width: 750px) {
  .product-mehr .zinke-highlights-kompakt .zinke-highlights-head {
    margin-bottom: 1.2rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid var(--line);
  }

  .product-mehr .zinke-highlights-kompakt h2 {
    font-size: clamp(1.4rem, 2.1vw, 1.9rem);
    line-height: 1.1;
    letter-spacing: -.01em;
  }

  .product-mehr .zinke-highlights-kompakt .zinke-highlights-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .product-mehr .zinke-highlights-kompakt .zinke-highlight {
    padding: 1.35rem 1.3rem 1.45rem;
    gap: .8rem;
  }

  .product-mehr .zinke-highlights-kompakt .zinke-highlight:hover {
    border-color: var(--accent, #a8763e);
  }

  .product-mehr .zinke-highlights-kompakt .zinke-highlight-symbol { width: 50px; height: 50px; }
  .product-mehr .zinke-highlights-kompakt .zinke-highlight-symbol .icon { width: 26px; height: 26px; }

  .product-mehr .zinke-highlights-kompakt .zinke-highlight-titel {
    font-size: 1.05rem;
    line-height: 1.3;
  }

  .product-mehr .zinke-highlights-kompakt .zinke-highlight-text {
    font-size: .9rem;
    line-height: 1.5;
  }

  /* Liegt die ganze Zeile bei einer Kachel, stehen Symbol und Text nebeneinander. */
  .product-mehr .zinke-highlights-liste > .zinke-highlight:nth-child(odd):last-child:not(:first-child) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1.1rem;
    row-gap: .25rem;
    align-items: center;
  }
  .product-mehr .zinke-highlights-liste > .zinke-highlight:nth-child(odd):last-child:not(:first-child) .zinke-highlight-symbol { grid-row: span 2; }
}

/* Breite Fenster: drei Kacheln nebeneinander, vier als 2 × 2. */
@media screen and (min-width: 1100px) {
  .product-mehr .zinke-highlights-kompakt .zinke-highlights-liste:has(> .zinke-highlight:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .product-mehr .zinke-highlights-liste:has(> .zinke-highlight:nth-child(3):last-child) > .zinke-highlight:nth-child(3) {
    grid-column: auto;
    display: flex;
    align-items: stretch;
    gap: .8rem;
  }
}


/* --- Beschreibung und Aufklapper unter den Kacheln ------------------------ */
@media screen and (min-width: 750px) {
  .product-mehr .zinke-highlights + .product-accordion,
  .product-mehr > .product-accordion:first-child {
    margin-top: 2.2rem;
    border-top: 1px solid var(--line);
  }

  .product-mehr .product-accordion summary {
    padding-block: 1.15rem;
    font-size: .95rem;
    letter-spacing: .02em;
  }

  .product-mehr .product-accordion .rte {
    max-width: 44rem;
  }
}


/* --- Handy ---------------------------------------------------------------
   Dieselben Regeln, die in zinke-produktseite.css für .product-info stehen —
   die Aufklapper liegen jetzt eine Ebene daneben. */
@media screen and (max-width: 749px) {
  .product-mehr { line-height: 1.5; }

  .product-mehr .zinke-highlights-kompakt {
    padding-top: .9rem;
    border-top: 1px solid var(--line);
  }

  .product-mehr .zinke-highlights-kompakt h2 { font-size: 1.12rem; }

  .product-mehr .product-accordion {
    margin-top: .5rem;
    padding-inline: .75rem;
    border: 1px solid rgba(168, 118, 62, .45);
    border-radius: var(--r, 4px);
    background: var(--card, transparent);
  }

  .product-mehr .zinke-highlights + .product-accordion { margin-top: 1rem; }

  .product-mehr .product-accordion[open] {
    border-color: var(--accent, #a8763e);
  }

  .product-mehr .product-accordion summary {
    padding-block: .7rem;
    font-weight: 500;
    letter-spacing: .04em;
  }

  .product-mehr .product-accordion summary .icon {
    color: var(--accent, #a8763e);
  }

  .product-mehr .product-accordion .rte {
    padding-bottom: .9rem;
    font-size: .9rem;
    line-height: 1.55;
  }
}


/* --- „Passt dazu" ---------------------------------------------------------
   Handy: eigener Abschnitt am Seitenende (Standard aus zinke-crosssell.css).
   Laptop: steht in .product-quer unter dem Kaufbereich, als ruhige Liste —
   kleines Bild links, Name und Preis rechts. Die eigenen Merkmale links
   bleiben das Größere auf der Seite. */
.template-product .crosssell {
  border-top: 1px solid var(--line);
}

.product-quer:empty { display: none; }

.product-quer > .crosssell {
  margin-top: 2rem;
  padding: 1.6rem 0 0;
}

.product-quer > .crosssell > .page-width {
  width: auto;
  max-width: none;
  margin: 0;
  padding-inline: 0;
}

.product-quer .crosssell-head { margin-bottom: 1rem; }
.product-quer .crosssell-head .eyebrow { margin-bottom: .35rem; }

.product-quer .crosssell-head h2 {
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: .01em;
}

.product-quer .crosssell-liste {
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}

.product-quer .crosssell-link {
  flex-direction: row;
  align-items: stretch;
}

.product-quer .crosssell-bild {
  flex: 0 0 5.4rem;
  width: 5.4rem;
  aspect-ratio: 1 / 1;
  padding: .35rem;
}

.product-quer .crosssell-text {
  justify-content: center;
  gap: .15rem;
  min-width: 0;
  padding: .55rem .9rem;
  border-top: 0;
  border-left: 1px solid var(--line);
}

.product-quer .crosssell-titel {
  font-size: .76rem;
  line-height: 1.35;
}

.product-quer .crosssell-preis {
  margin-top: .15rem;
  padding-top: 0;
  font-size: .9rem;
}

.product-quer .crosssell-frei:empty { display: none; }
.product-quer .crosssell-frei { font-size: .7rem; }


/* --- 4.4 (19.09.2026): Reihenfolge am Handy -------------------------------
   Pascal: „Die Erklärungen sind am Handy viel zu weit unten.“
   Vorher: Kaufknopf → Zahlungslogos → Lieferung/Vertrauen → Gründer →
   erst dann „Das macht den Unterschied“ (~1.190 px).
   Jetzt: Kaufknopf → „Das macht den Unterschied“ → (Espresso: „Drei
   Handgriffe“, per zinke-conversion.js hierher verschoben) → Zahlung,
   Lieferung, Vertrauen, Gründer → Details.
   Umsetzung ohne HTML-Umbau: Die Hüllen werden mit display: contents
   aufgelöst und die Teile per order sortiert. .product-info wird bei jedem
   Variantenwechsel ersetzt (zinke.js) – die Regeln hängen an Klassen und
   greifen danach sofort wieder. Laptop unverändert. */
@media screen and (max-width: 749px) {
  /* 4.6 (19.09.2026), Pascal: „Anordnung ist Chaos, spricht nicht fürs
     Produkt.“ Neu: erst das Produkt, dann das Kleingedruckte.
     Bild → Kaufbereich → Vorteile → (Espresso: Drei Handgriffe) →
     Beschreibung (offen) → Gründer → Versand/Rückgabe/Produktsicherheit →
     Vertrauensleiste mit Lieferzeit → Passt dazu.
     4.6b: direkt unter dem Kaufbereich Versandkostenfrei-Balken + kleine Zahlungslogos.
     align-items: stretch behebt die unterschiedlich breiten Aufklapper
     (4.4 hatte align-items: start aus dem Laptop-Raster geerbt). */
  [data-product-root] .product-layout { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  [data-product-root] .product-layout > .product-gallery { order: 0; margin-bottom: .6rem; }
  [data-product-root] .product-layout > .product-rechts,
  [data-product-root] .product-layout > .product-rechts > .product-info,
  [data-product-root] .product-layout > .product-mehr { display: contents; }
  [data-product-root] .product-info > * { order: 10; }
  [data-product-root] .product-layout > .z-versand-oben { order: 11; }
  [data-product-root] .product-info > .product-bezahlen { order: 12; margin-top: .9rem; }
  [data-product-root] .product-mehr > .zinke-highlights { order: 20; margin-top: 1.6rem; }
  [data-product-root] .product-layout > .z-schritte-oben { order: 30; }
  [data-product-root] .product-mehr > details.product-accordion:first-of-type { order: 40; margin-top: 1.8rem; }
  [data-product-root] .product-info > .z-gruender { order: 50; margin-top: 1.4rem; }
  [data-product-root] .product-mehr > :not(.zinke-highlights):not(details.product-accordion:first-of-type) { order: 60; }
  [data-product-root] .product-mehr > details.product-accordion:nth-of-type(2) { margin-top: 1.4rem; }
  [data-product-root] .product-info > .product-trust,
  [data-product-root] .product-info > .product-note { order: 70; }
  [data-product-root] .product-rechts > .product-quer { order: 90; }
  [data-product-root] .product-mehr > * { width: 100%; max-width: none; }
  /* Beschreibung als ruhiger Textblock statt Knopf */
  [data-product-root] .product-mehr > details.product-accordion:first-of-type[open] > summary { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent, #b8955a); }
  /* 4.6b: Versandkostenfrei-Balken und kleine Zahlungslogos direkt unter
     dem Kaufbereich (Pascal: „oben fehlen Zahlungsinfos, kleiner, und der
     Versandkostenfrei-Balken“). Der Balken ist die Sektion „versandhinweis“,
     zinke-lieferdatum.js hängt sie am Handy in die Produktspalte. */
  [data-product-root] .z-versand-oben { max-width: none; margin: .9rem 0 0; padding: 0; }
  [data-product-root] .z-versand-oben .versandhinweis-zeile { margin: 0; padding: .55rem .8rem; font-size: .85rem; }
  [data-product-root] .product-info > .product-bezahlen .product-bezahlen-titel { font-size: .75rem; margin-bottom: .4rem; }
  [data-product-root] .product-info > .product-bezahlen .product-payment { display: flex; flex-wrap: wrap; gap: 4px; }
  [data-product-root] .product-info > .product-bezahlen .product-payment li { margin: 0; line-height: 0; }
  [data-product-root] .product-info > .product-bezahlen .product-payment svg { height: 17px; width: auto; }
  /* „Drei Handgriffe“ oben: eigene Abstände statt der Abschnitts-Ränder */
  .z-schritte-oben { padding-block: 1.6rem 0 !important; border-top: 0; }
  .z-schritte-oben > .page-width { padding-inline: 0; max-width: none; }
  .z-schritte-oben .section-heading { margin-bottom: 1rem; }
  .z-schritte-oben .section-heading h2 { font-size: 1.5rem; }
}
}