.gps-btn{
  --gps-color:#CF2E2E;                     /* H&H Primärfarbe Rot */
  --gps-dark:#27282E;                      /* Anthrazit */
  --gps-gray:#54595F;                      /* Grau */
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:14px;
  padding:12px 12px 12px 22px;
  border:1.5px solid var(--gps-color);
  border-radius:4px;background:#fff;
  text-decoration:none;font:inherit;line-height:1.25;max-width:100%;
  transition:box-shadow .25s ease,transform .25s ease;
}
.gps-btn:focus-visible{outline:3px solid var(--gps-color);outline-offset:3px}

/* Füllung läuft von links ein */
.gps-btn::after{
  content:"";position:absolute;inset:0;z-index:0;background:var(--gps-color);
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.65,0,.35,1);
}
.gps-btn:hover::after{transform:scaleX(1)}
.gps-btn:hover{box-shadow:0 6px 18px rgba(39,40,46,.16)}
.gps-btn:active{transform:translateY(1px)}

.gps-btn__g{flex:0 0 auto;width:22px;height:22px;position:relative;z-index:1}
.gps-btn__text{position:relative;z-index:1;color:var(--gps-dark);
  font-size:17px;font-weight:600;transition:color .3s ease .08s}
.gps-btn:hover .gps-btn__text{color:#fff}

/* Plus aus zwei Balken – unabhängig von der Schrift exakt zentriert */
.gps-btn__plus{
  flex:0 0 auto;margin-left:auto;position:relative;z-index:1;
  width:28px;height:28px;border-radius:4px;background:var(--gps-color);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s ease;
}
.gps-btn__plus::before,.gps-btn__plus::after{
  content:"";position:absolute;left:50%;top:50%;background:#fff;border-radius:2px;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1),background .3s ease;
}
.gps-btn__plus::before{width:11px;height:2px;transform:translate(-50%,-50%)}
.gps-btn__plus::after{width:2px;height:11px;transform:translate(-50%,-50%)}
.gps-btn:hover .gps-btn__plus{background:#fff;transform:rotate(90deg)}
.gps-btn:hover .gps-btn__plus::before,
.gps-btn:hover .gps-btn__plus::after{background:var(--gps-color)}

/* Kompakte Variante (Footer) */
.gps-btn--sm{padding:9px 9px 9px 16px;gap:10px}
.gps-btn--sm .gps-btn__text{font-size:14.5px}
.gps-btn--sm .gps-btn__g{width:18px;height:18px}
.gps-btn--sm .gps-btn__plus{width:23px;height:23px}
.gps-btn--sm .gps-btn__plus::before{width:9px}
.gps-btn--sm .gps-btn__plus::after{height:9px}

/* Invertiert – von Anfang an in Anthrazit gefüllt */
.gps-btn--invert{border-color:var(--gps-dark);background:var(--gps-dark)}
.gps-btn--invert .gps-btn__text{color:#fff}
.gps-btn--invert .gps-btn__plus{background:var(--gps-color)}
.gps-btn--invert .gps-btn__plus::before,
.gps-btn--invert .gps-btn__plus::after{background:#fff}
.gps-btn--invert::after{background:#fff}
.gps-btn--invert:hover .gps-btn__text{color:var(--gps-dark)}
.gps-btn--invert:hover .gps-btn__plus{background:var(--gps-color)}
.gps-btn--invert:hover .gps-btn__plus::before,
.gps-btn--invert:hover .gps-btn__plus::after{background:#fff}

/* Dunkel-Variante – Umriss in Anthrazit, für helle Grauflächen #F7F7F7 */
.gps-btn--dark{border-color:var(--gps-dark)}
.gps-btn--dark::after{background:var(--gps-dark)}
.gps-btn--dark .gps-btn__plus{background:var(--gps-dark)}
.gps-btn--dark:hover .gps-btn__text{color:#fff}
.gps-btn--dark:hover .gps-btn__plus::before,
.gps-btn--dark:hover .gps-btn__plus::after{background:var(--gps-dark)}

/* Abstand am Artikelende + Einblenden beim Scrollen */
.gps-btn__wrap{margin:44px 0 8px;opacity:0;transform:translateY(14px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1)}
.gps-btn__wrap.in{opacity:1;transform:none}

@media(max-width:520px){
  .gps-btn{width:100%;padding:12px 12px 12px 18px;gap:10px}
  .gps-btn__text{font-size:15px}
  .gps-btn__text .long{display:none}     /* langer Text nur am Desktop */
}
@media(min-width:521px){
  .gps-btn__text .short{display:none}
}
@media (prefers-reduced-motion: reduce){
  .gps-btn,.gps-btn *,.gps-btn::after,
  .gps-btn__plus::before,.gps-btn__plus::after{
    transition:none!important;animation:none!important}
  .gps-btn__wrap{opacity:1;transform:none}
}