/** 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;
}