/** Shopify CDN: Minification failed

Line 15:19 Unexpected "-"

**/
/* ==========================================================================
   Treupfote - Begleit-Sections der Produktseite
   Story (Problem, Loesung, Ergebnis), Vergleich, Zufriedenheitsgarantie und
   der Groessenratgeber (Tabelle + Finder im Fenster).

   Die Produktseite selbst (Galerie, Kaufkarte, Kaufleiste, Fenster-Rahmen)
   liegt seit dem Umbau "Stage & Sheet" in gw-pdp-v2.css.
   ========================================================================== */

   Treupfote Story - Problem, Loesung, Ergebnis

   Die Referenz lag nur als skalierter Screenshot vor, deshalb sind hier keine
   festen Pixel aus der Messung uebernommen. Groessen und Abstaende wachsen
   fluid mit dem Viewport (clamp), damit die Section beim Scrollen durch die
   Produktseite auf jeder Breite stimmig sitzt. Die Proportionen der Vorlage
   bleiben erhalten: 50-50-Split, warmer Grund, wechselnde Bildseite.
   ========================================================================== */

.gw-story {
  --story-warm: #f5f0eb;
  --story-cocoa: #41210a;
  --story-body: #4a4a4a;
  --story-orange: #f8931f;
  /* Textvarianten: das helle Orange erreicht als Schrift nur 2,02:1. */
  --story-orange-text: #a34f00;
  --story-orange-akzent: #c05f00;
  --story-red: #c41e3a;

  /* Eine Skala, an der alles haengt - so bleiben die Verhaeltnisse gleich. */
  --story-pad: clamp(20px, 3.2vw, 40px);
  --story-gap: clamp(16px, 1.8vw, 24px);
  --story-stack: clamp(20px, 3vw, 36px);
  --story-measure: 640px;
  --story-radius: clamp(10px, 1vw, 14px);
  --story-fs-body: clamp(14px, 0.35vw + 12.9px, 16px);
  --story-fs-title: clamp(20px, 1.1vw + 16.5px, 28px);
  --story-fs-lead: clamp(23px, 1.5vw + 18.2px, 34px);
  --story-fs-eyebrow: clamp(11px, 0.25vw + 10.2px, 14px);

  background: #fff;
  color: var(--story-cocoa);
}

.gw-story__heading {
  margin: 0 0 var(--story-gap);
  color: var(--story-cocoa);
  font-family: var(--font-heading-family);
  font-size: var(--story-fs-lead);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}

.gw-story__blocks {
  display: flex;
  flex-direction: column;
  gap: var(--story-stack);
}

/* --------------------------------------------------------------------------
   Bild-und-Text-Block
   -------------------------------------------------------------------------- */

/* Ein Container fuer Bild und Text. Das Bild sitzt buendig in seiner
   Haelfte und fuellt die volle Hoehe der Karte. */
.gw-story__split {
  display: grid;
  overflow: hidden;
  border-radius: var(--story-radius);
  background: var(--story-warm);
}

@media screen and (min-width: 750px) {
  .gw-story__split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  /* Ohne Bild bleibt nur der Text - dann keine leere zweite Spalte. */
  .gw-story__split--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--story-measure);
    margin-inline: auto;
  }

  /* Bild rechts: Reihenfolge tauschen, ohne die DOM-Ordnung zu aendern.
     Das Bild bleibt im Markup vorn, damit es zuerst geladen wird. */
  /* Beide Zellen ausdruecklich setzen. Ueberliess man eine Seite der
     automatischen Platzierung, landete sie in einer eigenen Zeile
     ohne Hoehe und das Bild blieb unsichtbar. */
  .gw-story__split:not(.gw-story__split--solo) > .gw-story__media {
    grid-area: 1 / 1;
  }

  .gw-story__split:not(.gw-story__split--solo) > .gw-story__text {
    grid-area: 1 / 2;
  }

  .gw-story__split--flip:not(.gw-story__split--solo) > .gw-story__media {
    grid-area: 1 / 2;
  }

  .gw-story__split--flip:not(.gw-story__split--solo) > .gw-story__text {
    grid-area: 1 / 1;
  }
}

/* Als gestrecktes Rasterelement richtete sich die Bildhoehe nach der
   Textspalte - bei langem Text wurde das Bild riesig. Jetzt behaelt es
   sein Seitenverhaeltnis und sitzt mittig. */
/* Beide Bildrahmen teilen sich Mass und Seitenverhaeltnis, damit alle
   Bilder der Section gleich gross sind - auch wenn die Ergebnis-Karte
   wegen ihres Innenpaddings schmalere Spalten hat. Die Spaltenbreite
   ist nur noch Obergrenze, nicht mehr das Mass. */
/* Der Rahmen bestimmt die Groesse, nicht das Bild. min-width: 0 hebt
   das voreingestellte min-width: auto von Rasterelementen auf; ohne
   das druecken Bilder die Spalte auseinander. Auf dem Handy gibt das
   Seitenverhaeltnis die Hoehe, daneben im Raster die Zeilenhoehe. */
.gw-story__media,
.gw-story__shotwrap {
  position: relative;
  align-self: center;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #e9e2d9;
}

.gw-story__img,
.gw-story__shot {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gw-story__img--empty {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 10px;
  min-height: clamp(160px, 20vw, 260px);
  background: #ece4da;
  color: #b9ab9a;
}

.gw-story__img--empty svg {
  width: clamp(32px, 4vw, 48px);
  height: clamp(32px, 4vw, 48px);
}

.gw-story__ph-note {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gw-story__shot--empty svg {
  width: clamp(20px, 2.4vw, 30px);
  height: clamp(20px, 2.4vw, 30px);
}

.gw-story__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  min-width: 0;
  padding: var(--story-pad);
}

/* Vertikaler Rhythmus: die Kennzeile haengt an der Ueberschrift,
   danach wird der Abstand groesser. Ein einziger gap machte alles gleich. */
.gw-story .gw-story__text > * + * {
  margin-top: clamp(13px, 1.2vw, 18px);
}

.gw-story .gw-story__eyebrow + * {
  margin-top: clamp(6px, 0.6vw, 9px);
}

.gw-story .gw-story__body + .gw-story__list {
  margin-top: clamp(16px, 1.5vw, 22px);
}

/* --------------------------------------------------------------------------
   Kennzeile
   -------------------------------------------------------------------------- */

.gw-story__eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--story-fs-eyebrow);
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gw-story__eyebrow--problem {
  color: var(--story-red);
}

.gw-story__eyebrow--solution {
  color: var(--story-orange-text);
}

.gw-story__eyebrow--result {
  color: var(--story-cocoa);
}

.gw-story__eyebrow--result .gw-story__eyebrow-icon svg {
  width: 1em;
  height: 1em;
  fill: currentcolor;
  stroke: none;
}

.gw-story__eyebrow-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.35em;
  height: 1.35em;
  border-radius: 50%;
  background: currentcolor;
}

.gw-story__eyebrow-icon svg {
  width: 0.8em;
  height: 0.8em;
  color: #fff;
  stroke-width: 3;
}

/* --------------------------------------------------------------------------
   Ueberschrift und Text
   -------------------------------------------------------------------------- */

.gw-story__title {
  margin: 0;
  color: var(--story-cocoa);
  font-family: var(--font-heading-family);
  font-size: var(--story-fs-title);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: pretty;
}

.gw-story__title--lg {
  font-size: var(--story-fs-lead);
}

.gw-story__accent {
  color: var(--story-orange-akzent);
}

@media screen and (min-width: 750px) {
  .gw-story__accent {
    white-space: nowrap;
  }
}

.gw-story__body {
  color: var(--story-body);
  font-size: var(--story-fs-body);
  font-weight: 400;
  line-height: 1.65;
  text-wrap: pretty;
}

.gw-story__body p {
  margin: 0 0 0.9em;
}

.gw-story__body p:last-child {
  margin-bottom: 0;
}

.gw-story__body strong {
  color: var(--story-cocoa);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Aufzaehlung
   -------------------------------------------------------------------------- */

.gw-story__list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gw-story__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  margin: 0;
  color: var(--story-body);
  font-size: var(--story-fs-body);
  line-height: 1.45;
}

.gw-story__tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--story-orange);
}

.gw-story__tick svg {
  width: 0.75em;
  height: 0.75em;
  color: #fff;
  stroke-width: 3;
}

/* --------------------------------------------------------------------------
   Ergebnis mit Kundenstimme
   -------------------------------------------------------------------------- */

.gw-story__result {
  display: grid;
  overflow: hidden;
  border-radius: var(--story-radius);
  background: var(--story-warm);
}

@media screen and (min-width: 750px) {
  .gw-story__result {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .gw-story__result:not(.gw-story__result--solo) > .gw-story__text {
    grid-area: 1 / 1;
  }

  .gw-story__result:not(.gw-story__result--solo) > .gw-story__shotwrap {
    grid-area: 1 / 2;
  }

  /* Ohne Bild sonst eine leere zweite Spalte. */
  .gw-story__result--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--story-measure);
    margin-inline: auto;
  }
}

/* Erbt Grund und Radius von .gw-story__text, braucht also nur den
   normalen Innenabstand. */
.gw-story__text--wide {
  padding: var(--story-pad);
}

.gw-story__rating {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.gw-story__stars {
  display: inline-flex;
  gap: 2px;
  color: var(--story-orange);
}

.gw-story__stars svg {
  width: 1em;
  height: 1em;
  fill: currentcolor;
}

.gw-story__rating-text {
  color: var(--story-body);
  font-size: 0.85em;
}

.gw-story__quote {
  margin: 0.25em 0 0;
  padding: clamp(12px, 1.4vw, 18px);
  border-left: 3px solid var(--story-orange);
  border-radius: 0 8px 8px 0;
  background: rgba(255, 255, 255, 0.65);
}

.gw-story__quote-text {
  margin: 0.4em 0 0;
  color: var(--story-cocoa);
  font-size: calc(var(--story-fs-body) - 1px);
  line-height: 1.55;
}

.gw-story__quote-text p {
  margin: 0;
}

.gw-story__quote-author {
  margin-top: 0.6em;
  color: var(--story-body);
  font-size: calc(var(--story-fs-body) - 2px);
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Bildcollage
   -------------------------------------------------------------------------- */

/* Gleiche Begrenzung wie .gw-story__media, damit alle drei Bilder der
   Section exakt gleich gross sind. */
.gw-story__shot--empty {
  display: grid;
  place-items: center;
  color: #c9bfb2;
}

@media (prefers-reduced-motion: reduce) {
  .gw-story * {
    transition: none;
  }
}

/* ==========================================================================
   Treupfote Vergleich
   --------------------------------------------------------------------------
   Am Referenzentwurf gemessen (760px): Raster 380/96/96, Zeilenabstand 8,
   Spaltenabstand 12, Merkmalspille Radius 12 mit 14/18 Innenabstand und 47px
   Hoehe, Markenspille Radius 26 mit 2px Kontur, Kennzeile 13/600 mit 1px
   Laufweite, Ueberschrift 28/600 mit -1px Laufweite.

   Uebernommen sind die Proportionen, nicht die Farben - die kommen aus der
   Produktseite, damit beide Sections zusammengehoeren.
   ========================================================================== */

.gw-compare {
  --cmp-cocoa: #41210a;
  --cmp-orange: #f8931f;
  --cmp-orange-text: #a34f00;
  --cmp-orange-akzent: #c05f00;
  --cmp-body: #4a4a4a;
  --cmp-muted: #857b70;
  --cmp-no-fill: #ece6de;
  --cmp-no-dot: #d6ccbf;
  --cmp-no-ink: #5f574e;

  /* Eine Skala, damit die Tabelle beim Scrollen auf jeder Breite stimmt. */
  --cmp-measure: 640px;
  --cmp-col: clamp(68px, 12vw, 96px);
  --cmp-gap-x: clamp(8px, 1.4vw, 12px);
  --cmp-gap-y: clamp(6px, 0.9vw, 8px);
  --cmp-row: clamp(42px, 5.6vw, 47px);
  --cmp-bleed: clamp(4px, 1vw, 8px);
  --cmp-radius: clamp(10px, 1vw, 12px);
  --cmp-fs-label: clamp(13px, 0.5vw + 11.4px, 16px);
  --cmp-fs-title: clamp(21px, 1.3vw + 16.4px, 28px);
  --cmp-fs-eyebrow: clamp(11px, 0.25vw + 10.2px, 13px);

  background: #fff;
  color: var(--cmp-cocoa);
}

.gw-compare__head {
  max-width: var(--cmp-measure);
  margin-inline: auto;
  margin-bottom: clamp(16px, 2.2vw, 26px);
  text-align: center;
}

.gw-compare__eyebrow {
  margin: 0 0 clamp(5px, 0.6vw, 8px);
  color: var(--cmp-orange-text);
  font-size: var(--cmp-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gw-compare__title {
  margin: 0;
  color: var(--cmp-cocoa);
  font-family: var(--font-heading-family);
  font-size: var(--cmp-fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: pretty;
}

.gw-compare__table {
  display: grid;
  position: relative;
  grid-template-columns: minmax(0, 1fr) var(--cmp-col) var(--cmp-col);
  gap: var(--cmp-gap-y) var(--cmp-gap-x);
  max-width: var(--cmp-measure);
  margin-inline: auto;
}

/* Die helle Pille hinter der eigenen Spalte. Sie liegt als ::before im
   Raster und wird deshalb vor allen Zellen gezeichnet, also dahinter.
   Implizite Rasterzeilen lassen sich nicht mit "-1" ueberspannen, darum
   kommt die Zeilenzahl aus dem Liquid. */
.gw-compare__table::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -6px;
  bottom: -6px;
  right: calc(var(--cmp-col) + var(--cmp-gap-x) - var(--cmp-bleed));
  width: calc(var(--cmp-col) + var(--cmp-bleed) * 2);
  border: 2px solid var(--cmp-orange);
  border-radius: clamp(18px, 2.4vw, 26px);
  background: #fff;
}

/* Absolut Positioniertes zeichnet ueber nicht positionierten Geschwistern.
   Die Zellen brauchen deshalb eine eigene Ebene, damit sie auf der Pille
   liegen statt darunter. */
.gw-compare__row > * {
  position: relative;
  z-index: 1;
}

.gw-compare__row {
  display: contents;
}

.gw-compare__corner,
.gw-compare__brand,
.gw-compare__other {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  padding-bottom: clamp(8px, 1.2vw, 12px);
  overflow-wrap: break-word;
  text-align: center;
}

.gw-compare__brand {
  color: var(--cmp-cocoa);
  font-family: var(--font-heading-family);
  font-size: clamp(13px, 0.45vw + 11.6px, 16px);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.gw-compare__brand-img {
  display: block;
  width: 100%;
  max-width: 88px;
  height: auto;
}

.gw-compare__other {
  color: var(--cmp-muted);
  font-size: clamp(11px, 0.35vw + 9.9px, 14px);
  font-weight: 700;
  line-height: 1.2;
}

.gw-compare__label {
  display: flex;
  align-items: center;
  min-height: var(--cmp-row);
  padding: clamp(9px, 1.3vw, 14px) clamp(12px, 1.7vw, 18px);
  border-radius: var(--cmp-radius);
  background: var(--cmp-cocoa);
  color: #fff;
  font-size: var(--cmp-fs-label);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: pretty;
}

.gw-compare__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--cmp-row);
}

.gw-compare__mark--yes {
  color: var(--cmp-orange-akzent);
}

/* Bietet die Vergleichskategorie das Merkmal auch, steht dort derselbe Haken -
   nur zurueckgenommen, damit die eigene Spalte fuehrend bleibt. */
.gw-compare__mark--muted {
  border-radius: var(--cmp-radius);
  background: var(--cmp-no-fill);
  color: var(--cmp-no-ink);
}

.gw-compare__mark--no {
  border-radius: var(--cmp-radius);
  background: var(--cmp-no-fill);
}

.gw-compare__icon {
  width: clamp(22px, 3.4vw, 32px);
  height: clamp(22px, 3.4vw, 32px);
}

.gw-compare__no-dot {
  display: grid;
  place-items: center;
  width: clamp(24px, 3.6vw, 32px);
  height: clamp(24px, 3.6vw, 32px);
  border-radius: 50%;
  background: var(--cmp-no-dot);
  color: var(--cmp-no-ink);
}

.gw-compare__icon-sm {
  width: 0.48em;
  height: 0.48em;
  font-size: clamp(24px, 3.6vw, 32px);
}

.gw-compare__note {
  max-width: var(--cmp-measure);
  margin: clamp(12px, 1.6vw, 18px) auto 0;
  color: var(--cmp-muted);
  font-size: clamp(11px, 0.3vw + 10.1px, 13px);
  line-height: 1.5;
  text-align: center;
}

/* ==========================================================================
   Treupfote Zufriedenheitsgarantie
   --------------------------------------------------------------------------
   Der Referenzentwurf stellt ein Foto ueber den Text (Kennzeile 13/600 versal,
   Ueberschrift 26/600 mit -0.8px Laufweite, Fliesstext 15). Hier steht statt
   des Fotos ein gezeichnetes Siegel daneben.
   ========================================================================== */

.gw-promise {
  --pro-cocoa: #41210a;
  --pro-orange: #f8931f;
  --pro-orange-text: #a34f00;
  --pro-orange-akzent: #c05f00;
  --pro-warm: #f5f0eb;
  --pro-body: #4a4a4a;
  --pro-line: #e6ddd2;

  /* Volle Containerbreite - der Entwurf zeigt ein breites, flaches Band.
     Der fruehere Deckel von 720px liesz beide Spalten auf rund 340px
     schrumpfen; das Siegelbild wurde darin zusammengedrueckt. */
  --pro-measure: none;
  --pro-fs-body: clamp(14px, 0.35vw + 12.9px, 16px);
  --pro-fs-title: clamp(22px, 1.4vw + 17.2px, 32px);
  --pro-fs-eyebrow: clamp(11px, 0.25vw + 10.2px, 13px);

  background: var(--pro-warm);
  color: var(--pro-cocoa);
}

/* Ein durchgehendes Band, keine Karte - den Grund traegt die Section.
   Der Text steht links, das Bild rechts; auf dem Handy untereinander,
   Text zuerst. */
.gw-promise__card {
  display: grid;
  gap: clamp(20px, 3vw, 48px);
  justify-items: center;
  max-width: var(--pro-measure);
  margin-inline: auto;
  text-align: center;
}

.gw-promise__text {
  order: 1;
  min-width: 0;
}

.gw-promise__badge {
  display: grid;
  order: 2;
  place-items: center;
  min-width: 0;
}

.gw-promise__badge-img {
  display: block;
  width: 100%;
  max-width: clamp(220px, 30vw, 460px);
  height: auto;
}

@media screen and (min-width: 750px) {
  .gw-promise__card {
    /* Text bekommt mehr Gewicht als das Bild, so wie im Entwurf. */
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .gw-promise__badge {
    justify-self: center;
  }
}

/* Siegel ------------------------------------------------------------------ */

.gw-promise__seal-ring {
  display: grid;
  place-content: center;
  justify-items: center;
  width: clamp(112px, 15vw, 148px);
  height: clamp(112px, 15vw, 148px);
  padding: 8px;
  border: 2px solid var(--pro-orange);
  border-radius: 50%;
  outline: 1px solid var(--pro-orange);
  outline-offset: 5px;
  background: #fff;
  text-align: center;
}

.gw-promise__seal-paw {
  display: block;
  width: clamp(18px, 2.2vw, 24px);
  height: clamp(18px, 2.2vw, 24px);
  margin-bottom: 2px;
  color: var(--pro-orange);
}

.gw-promise__seal-paw svg {
  width: 100%;
  height: 100%;
  fill: currentcolor;
  stroke: none;
}

.gw-promise__seal-top {
  color: var(--pro-cocoa);
  font-family: var(--font-heading-family);
  font-size: clamp(19px, 2vw, 24px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.gw-promise__seal-bottom {
  color: var(--pro-cocoa);
  font-size: clamp(10px, 0.3vw + 9px, 12px);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Text -------------------------------------------------------------------- */

.gw-promise__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gw-promise__eyebrow {
  margin: 0;
  color: var(--pro-orange-text);
  font-size: var(--pro-fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.2;
  text-transform: uppercase;
}

.gw-promise__title {
  margin: clamp(6px, 0.6vw, 9px) 0 0;
  color: var(--pro-cocoa);
  font-family: var(--font-heading-family);
  font-size: var(--pro-fs-title);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-wrap: pretty;
}

.gw-promise__accent {
  color: var(--pro-orange-akzent);
}

.gw-promise__body {
  margin-top: clamp(11px, 1.1vw, 15px);
  color: var(--pro-body);
  font-size: var(--pro-fs-body);
  line-height: 1.65;
  text-wrap: pretty;
}

.gw-promise__body p {
  margin: 0 0 0.9em;
}

.gw-promise__body p:last-child {
  margin-bottom: 0;
}

.gw-promise__body strong {
  color: var(--pro-cocoa);
  font-weight: 700;
}

.gw-promise__list {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  padding: clamp(14px, 1.5vw, 20px) 0 0;
  border-top: 1px solid var(--pro-line);
  list-style: none;
}

.gw-promise__item {
  display: flex;
  align-items: flex-start;
  gap: 0.65em;
  margin: 0;
  color: var(--pro-body);
  font-size: var(--pro-fs-body);
  line-height: 1.45;
  text-align: left;
}

.gw-promise__tick {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.25em;
  height: 1.25em;
  margin-top: 0.1em;
  border-radius: 50%;
  background: var(--pro-orange);
}

.gw-promise__tick svg {
  width: 0.75em;
  height: 0.75em;
  color: #fff;
  stroke-width: 3;
}

.gw-promise__link {
  display: inline-flex;
  align-self: center;
  align-items: center;
  gap: 6px;
  margin-top: clamp(14px, 1.5vw, 20px);
  color: var(--pro-cocoa);
  font-size: var(--pro-fs-body);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gw-promise__link svg {
  width: 1em;
  height: 1em;
}

.gw-promise__link:hover {
  color: var(--pro-orange-akzent);
}

@media screen and (min-width: 750px) {
  .gw-promise__link {
    align-self: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gw-compare *,
  .gw-promise * {
    transition: none;
  }
}

/* ==========================================================================
   Treupfote Groessenratgeber - Tabelle und Groessenfinder
   --------------------------------------------------------------------------
   Die Kopfzeile der Tabelle nutzt #c05f00 statt des hellen Markenorange:
   weisse Schrift darauf erreicht 4,31:1, auf #f8931f waeren es nur 2,29:1.
   ========================================================================== */

.gw-size {
  --sz-cocoa: #41210a;
  --sz-orange: #f8931f;
  --sz-orange-text: #a34f00;
  --sz-kopf: #c05f00;
  --sz-warm: #f5f0eb;
  --sz-linie: #e6ddd2;
  --sz-body: #4a4a4a;
  --sz-fs: clamp(13px, 0.35vw + 11.9px, 15px);

  color: var(--sz-cocoa);
  font-size: var(--sz-fs);
}

.gw-size__intro {
  margin-bottom: clamp(12px, 1.6vw, 18px);
  color: var(--sz-body);
  line-height: 1.6;
}

/* Tabelle ----------------------------------------------------------------- */

.gw-size__table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.gw-size__table th,
.gw-size__table td {
  padding: clamp(8px, 1.1vw, 12px) clamp(6px, 0.9vw, 12px);
  text-align: center;
}

.gw-size__table thead th {
  background: var(--sz-kopf);
  color: #fff;
  font-size: clamp(12px, 0.3vw + 11.1px, 14px);
  font-weight: 700;
  line-height: 1.2;
}

.gw-size__table thead th:first-child {
  border-start-start-radius: 8px;
}

.gw-size__table thead th:last-child {
  border-start-end-radius: 8px;
}

.gw-size__table tbody tr + tr {
  border-top: 1px solid var(--sz-linie);
}

.gw-size__size {
  color: var(--sz-orange-text);
  font-weight: 700;
}

.gw-size__note {
  margin: clamp(10px, 1.4vw, 16px) 0 0;
  color: var(--sz-body);
  font-size: clamp(12px, 0.3vw + 11.1px, 13px);
  line-height: 1.5;
}

/* Umschalter -------------------------------------------------------------- */

.gw-size__switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(14px, 1.8vw, 20px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sz-cocoa);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gw-size__switch:hover {
  color: var(--sz-orange-text);
}

.gw-size__switch svg {
  width: 1em;
  height: 1em;
}

.gw-size__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: clamp(10px, 1.4vw, 16px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sz-body);
  cursor: pointer;
  font: inherit;
  font-size: clamp(12px, 0.3vw + 11.1px, 13px);
}

.gw-size__back:hover {
  color: var(--sz-cocoa);
}

.gw-size__lead {
  margin: 0 0 clamp(14px, 1.8vw, 20px);
  color: var(--sz-body);
  line-height: 1.6;
}

/* Formular ---------------------------------------------------------------- */

.gw-size__form {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 20px);
}

.gw-size__row {
  display: grid;
  gap: clamp(14px, 1.8vw, 20px);
}

@media screen and (min-width: 560px) {
  .gw-size__row {
    grid-template-columns: 1fr 1fr;
  }
}

.gw-size__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.gw-size__label {
  color: var(--sz-cocoa);
  font-size: clamp(12px, 0.3vw + 11.1px, 14px);
  font-weight: 700;
}

.gw-size__optional {
  color: var(--sz-body);
  font-weight: 400;
}

.gw-size__hint {
  margin: 0;
  color: var(--sz-body);
  font-size: clamp(11px, 0.25vw + 10.2px, 12px);
  line-height: 1.4;
}

.gw-size__input,
.gw-size__select {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d5cabd;
  border-radius: 8px;
  background: #fff;
  color: var(--sz-cocoa);
  font: inherit;
}

.gw-size__input:focus-visible,
.gw-size__select:focus-visible {
  outline: 2px solid var(--sz-orange-text);
  outline-offset: 1px;
}

.gw-size__pair {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gw-size__pair .gw-size__select {
  width: auto;
  flex: none;
}

.gw-size__unit {
  flex: none;
  color: var(--sz-body);
}

/* Rassensuche ------------------------------------------------------------- */

.gw-size__combo {
  position: relative;
}

.gw-size__options {
  position: absolute;
  z-index: 5;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 240px;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  border: 1px solid #d5cabd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 24px rgb(65 33 10 / 12%);
  list-style: none;
}

.gw-size__option {
  padding: 9px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.gw-size__option:hover,
.gw-size__option.is-active {
  background: var(--sz-warm);
}

/* Auswahlfelder ----------------------------------------------------------- */

.gw-size__choices {
  display: grid;
  gap: 8px;
}

.gw-size__choices--inline {
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.gw-size__choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid #d5cabd;
  border-radius: 8px;
  cursor: pointer;
}

.gw-size__choice:has(input:checked) {
  border-color: var(--sz-orange-text);
  background: var(--sz-warm);
}

.gw-size__choice input {
  flex: none;
  accent-color: var(--sz-orange-text);
}

.gw-size__choice span {
  display: flex;
  flex-direction: column;
}

.gw-size__choice small {
  color: var(--sz-body);
  font-size: 11px;
}

.gw-size__submit {
  min-height: 48px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--sz-cocoa);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.gw-size__submit:hover {
  background: #2e1706;
}

/* Ergebnis ---------------------------------------------------------------- */

.gw-size__result {
  margin-top: clamp(16px, 2vw, 22px);
  padding-top: clamp(16px, 2vw, 22px);
  border-top: 1px solid var(--sz-linie);
}

.gw-size__verdict {
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 10px;
  background: var(--sz-warm);
  text-align: center;
}

.gw-size__verdict--niedrig {
  background: #fbf1e4;
}

.gw-size__verdict-label {
  margin: 0;
  color: var(--sz-orange-text);
  font-size: clamp(11px, 0.25vw + 10.2px, 13px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gw-size__verdict-size {
  margin: 4px 0 0;
  color: var(--sz-cocoa);
  font-family: var(--font-heading-family);
  font-size: clamp(20px, 1.4vw + 15.5px, 28px);
  font-weight: 700;
  line-height: 1.15;
}

.gw-size__facts {
  display: grid;
  gap: 8px;
  margin: clamp(12px, 1.6vw, 16px) 0 0;
}

.gw-size__facts div {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  justify-content: space-between;
}

.gw-size__facts dt {
  color: var(--sz-body);
}

.gw-size__facts dd {
  margin: 0;
  color: var(--sz-cocoa);
  font-weight: 700;
  text-align: right;
}

.gw-size__tag {
  color: var(--sz-body);
  font-size: 11px;
  font-weight: 400;
}

.gw-size__warnings {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  padding-left: 1.1em;
  color: var(--sz-body);
  font-size: clamp(12px, 0.3vw + 11.1px, 13px);
  line-height: 1.5;
}

.gw-size__warnings li + li {
  margin-top: 5px;
}

.gw-size__disclaimer {
  margin: clamp(12px, 1.6vw, 16px) 0 0;
  color: var(--sz-body);
  font-size: clamp(11px, 0.25vw + 10.2px, 12px);
  line-height: 1.5;
}

.gw-size__fail {
  margin: 0;
  padding: clamp(12px, 1.6vw, 18px);
  border-radius: 10px;
  background: #fbf1e4;
  color: var(--sz-cocoa);
  line-height: 1.55;
}

/* ==========================================================================
   Bildmodus (Tabellenbild + Messanleitung), Finder-Karte, Uebernehmen
   --------------------------------------------------------------------------
   Die Bilder tragen Text. Am Handy ist die kleinste Schrift darin nur etwa
   7 px hoch - darum laesst sich jedes Bild auf das 2,2-Fache vergroessern
   (Desktop 1,7-fach, das entspricht ungefaehr der Originalbreite) und
   seitlich wischen. Der Knopf steht UNTER dem Bild: oben rechts laege er
   auf der Spalte "Empfehlung" bzw. auf der Ueberschrift der Anleitung.
   ========================================================================== */

.gw-size {
  --sz-zoom: 2.2;
}

@media screen and (min-width: 750px) {
  .gw-size {
    --sz-zoom: 1.7;
  }
}

/* Finder-Karte ueber den Bildern ------------------------------------------ */

.gw-size__cta {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 64px;
  margin: 0 0 14px;
  padding: 12px 14px 12px 12px;
  border: 1px solid #f1d9bd;
  border-radius: 14px;
  background: var(--gw-cream, #fff8f1);
  color: var(--sz-cocoa);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, transform 120ms ease;
  -webkit-tap-highlight-color: transparent;
}

/* Tipp-Feedback am Handy (die graue Standard-Hervorhebung ist aus). iOS
   wendet :active nur mit touchstart-Zuhoerer an - den setzt gw-size-quiz.js. */
.gw-size__cta:active {
  border-color: var(--sz-orange);
  background: #fff1df;
  transform: scale(0.985);
}

.gw-size__cta:hover {
  border-color: var(--sz-orange);
  box-shadow: 0 6px 18px -12px rgb(65 33 10 / 45%);
}

.gw-size__cta:focus-visible {
  outline: 2px solid var(--sz-orange-text);
  outline-offset: 2px;
}

.gw-size__cta-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--sz-orange);
  color: var(--sz-cocoa);
}

.gw-size__cta-icon svg {
  width: 20px;
  height: 20px;
}

.gw-size__cta-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gw-size__cta-title {
  font-family: var(--font-heading-family);
  font-size: clamp(14px, 0.3vw + 13px, 15px);
  font-weight: 600;
  line-height: 1.3;
}

.gw-size__cta-text {
  color: var(--sz-body);
  font-size: clamp(12px, 0.3vw + 11.1px, 13px);
  line-height: 1.4;
}

.gw-size__cta-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: var(--sz-cocoa);
  transition: transform 160ms ease;
}

.gw-size__cta-arrow svg {
  width: 16px;
  height: 16px;
}

.gw-size__cta:hover .gw-size__cta-arrow {
  transform: translateX(2px);
}

/* Bilder ------------------------------------------------------------------ */

.gw-size__figure {
  margin: 0;
}

.gw-size__figure + .gw-size__figure {
  margin-top: 10px;
}

.gw-size__frame {
  overflow: hidden;
  border-radius: 14px;
  background: #f7f2ec;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}

.gw-size__img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

.gw-size__figure.is-zoomed .gw-size__frame {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  cursor: zoom-out;
  scrollbar-width: thin;
}

.gw-size__figure.is-zoomed .gw-size__img {
  width: calc(var(--sz-zoom) * 100%);
  max-width: none;
}

.gw-size__frame:focus-visible {
  outline: 2px solid var(--sz-orange-text);
  outline-offset: 2px;
}

.gw-size__zoom {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--sz-cocoa);
  cursor: pointer;
  font: inherit;
  font-size: clamp(12px, 0.3vw + 11.1px, 13px);
  font-weight: 700;
}

.gw-size__zoom:hover {
  color: var(--sz-orange-text);
}

.gw-size__zoom:focus-visible {
  outline: 2px solid var(--sz-orange-text);
  outline-offset: 2px;
  border-radius: 6px;
}

.gw-size__zoom-icon {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
}

.gw-size__zoom-icon svg {
  width: 16px;
  height: 16px;
}

/* Lupe mit Plus; vergroessert wird daraus ein Minus. */
.gw-size__zoom-plus {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 160ms ease;
}

.gw-size__figure.is-zoomed .gw-size__zoom-plus {
  transform: scaleY(0);
}

/* Feste erste Spalte (size_chart_pin) ------------------------------------- */
/* Vergroessert liegen Bild und Spalten-Ausschnitt in derselben Rasterzelle.
   Der Ausschnitt klebt per sticky am linken Rand des wischbaren Rahmens -
   so bleibt S, M, L, XL neben Rassen und Empfehlung sichtbar. */

.gw-size__pin {
  display: none;
}

.gw-size__figure--pin.is-zoomed .gw-size__frame {
  display: grid;
  grid-template-columns: calc(var(--sz-zoom) * 100%);
}

.gw-size__figure--pin.is-zoomed .gw-size__img {
  grid-area: 1 / 1;
  width: 100%;
}

.gw-size__figure--pin.is-zoomed .gw-size__pin {
  position: sticky;
  z-index: 1;
  left: 0;
  display: block;
  grid-area: 1 / 1;
  align-self: start;
  width: calc(var(--sz-pin) * 1%);
  /* Prozent der Rasterzelle = der Bildhoehe (size_chart_pin_height). */
  height: calc(var(--sz-pin-h, 100) * 1%);
  overflow: hidden;
  box-shadow: 8px 0 12px -10px rgb(65 33 10 / 55%);
  pointer-events: none;
}

.gw-size__pin-img {
  display: block;
  width: calc(10000% / var(--sz-pin));
  max-width: none;
  height: auto;
}

/* Rassensuche am Handy ---------------------------------------------------- */

.gw-size__option {
  display: flex;
  align-items: center;
  min-height: 44px;
}

.gw-size__hint--status {
  color: var(--sz-orange-text);
}

/* Leer bleibt die Live-Region im Barrierefreiheitsbaum (nicht hidden oder
   display: none), nimmt aber keinen Platz ein - auch keinen Abstand im
   Flex-Stapel des Felds. */
.gw-size__hint--status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Fokusziel nach dem Rechnen (tabindex -1). Ring nur bei Tastaturbedienung,
   statt des box-shadow-Rings aus base.css eine ruhige Kontur. */
.gw-size__verdict:focus,
.gw-size__fail:focus {
  outline: none;
}

.gw-size__verdict:focus-visible,
.gw-size__fail:focus-visible {
  outline: 2px solid var(--sz-orange-text);
  outline-offset: 2px;
  box-shadow: none;
}

/* Fokusziel beim Umschalten (tabindex -1), kein Bedienelement - auch der
   Ring aus base.css (*:focus-visible mit box-shadow) entfaellt hier. */
.gw-size__lead:focus,
.gw-size__lead:focus-visible {
  outline: none;
  box-shadow: none;
}

@media screen and (max-width: 749px) {
  /* Im Fluss statt darueber: Die Liste schiebt die Felder darunter weg und
     scrollt mit dem Fenster - so bleibt sie ueber der Tastatur erreichbar,
     statt hinter ihr zu verschwinden. */
  .gw-size__options {
    position: static;
    max-height: 236px;
    margin-top: 6px;
  }
}

/* Uebernehmen ------------------------------------------------------------- */

.gw-size__apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  padding: 12px 20px;
  border: 0;
  border-radius: 10px;
  background: var(--sz-cocoa);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}

.gw-size__apply:hover {
  background: #2e1706;
}

.gw-size__apply:focus-visible,
.gw-size__submit:focus-visible {
  outline: 2px solid var(--sz-orange-text);
  outline-offset: 2px;
}

.gw-size__apply:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Bezug zum Tabellenbild im Ergebnis ("Laut unserer Groessentabelle: ...") */
.gw-size__verdict-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 10px 0 0;
  padding: 5px 12px 5px 9px;
  border-radius: 999px;
  background: #fff;
  color: var(--sz-cocoa);
  font-size: clamp(12px, 0.3vw + 11.1px, 13px);
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
}

.gw-size__haken {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--sz-orange-text);
}

/* Paket: fuer welche Stuecke uebernehmen ---------------------------------- */

.gw-size__targets {
  min-width: 0;
  margin: 14px 0 0;
  padding: 0;
  border: 0;
}

.gw-size__targets-legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--sz-cocoa);
  font-size: clamp(12px, 0.3vw + 11.1px, 14px);
  font-weight: 700;
}

.gw-size__targets-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.gw-size__target {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 12px;
  border: 1px solid #d5cabd;
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
}

.gw-size__target:has(input:checked) {
  border-color: var(--sz-orange-text);
  background: var(--sz-warm);
}

.gw-size__target:has(input:focus-visible) {
  outline: 2px solid var(--sz-orange-text);
  outline-offset: 2px;
}

.gw-size__target input {
  flex: none;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--sz-orange-text);
}

/* Bestaetigung am geaenderten Feld auf der Produktseite. Liegt ausserhalb
   von .gw-size - darum feste Farben statt der --sz-Variablen. */
.gw-size-done-host {
  position: relative;
}

.gw-size-done {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: calc(100% + 6px);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: #41210a;
  box-shadow: 0 8px 18px -10px rgb(65 33 10 / 60%);
  color: #fff;
  font-family: var(--font-heading-family);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
  animation: gw-size-done-in 220ms ease-out both;
  transition: opacity 320ms ease, transform 320ms ease;
}

.gw-size-done .gw-size__haken {
  width: 13px;
  height: 13px;
  color: #f7921f;
}

.gw-size-done.is-out {
  opacity: 0;
  transform: translateY(-4px);
}

@keyframes gw-size-done-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* Nach "Groesse uebernehmen": kurzer Ring um das geaenderte Feld. */
@keyframes gw-size-flash {
  0% { box-shadow: 0 0 0 0 rgb(247 146 31 / 0%); }
  20% { box-shadow: 0 0 0 4px rgb(247 146 31 / 60%); }
  100% { box-shadow: 0 0 0 0 rgb(247 146 31 / 0%); }
}

.gw-size-flash {
  animation: gw-size-flash 1.6s ease-out 1;
}

@media (prefers-reduced-motion: reduce) {
  .gw-size-flash {
    animation: none;
    box-shadow: 0 0 0 3px rgb(247 146 31 / 60%);
  }

  .gw-size__cta,
  .gw-size__cta-arrow,
  .gw-size__zoom-plus {
    transition: none;
  }

  .gw-size__cta:active {
    transform: none;
  }

  .gw-size-done {
    animation: none;
    transition: none;
  }
}