/* ==========================================================================
   Deine Partner › Eversports (eigenständige Partnerseite)
   Übertragen aus special4.css (Seite "Epassi Deutschland (Hansefit)"),
   dort ursprünglich #section21 (Eversports-Block, Text li / Anleitung re /
   2 Fotos / Helpcenter-Btn). Hansefit-Anteile (ehem. #section23) entfernt,
   da diese Seite nur den Eversports-Partner zeigt.

   Ziel-Section auf test.teufel-graphics.de/deine-partner/eversports/: #section88
   (per HTML-Ausschnitt vom 16.08. bestätigt, Struktur "container zweispaltig"
   mit feld0–feld4 ist 1:1 identisch zum Original #section21).

   Bezugsrahmen (aus dem Original, unverändert übernommen):
     Container = x 169.1–1192.1 pt (Breite 1023 pt).
   3 Zonen wie special4.css: max-width:999px / 1000–1600px / min-width:1600px.
   Zone 1000–1600px und min-width:1600px sind aktuell identisch (Platzhalter
   für spätere Differenzierung, wie im Vorbild special4.css).
   ========================================================================== */

/* --- h3: Zwischenüberschriften (REGISTRIERUNG, KURSNUTZUNG …) -------------
   Im PDF 20pt, gesperrt, Fließtext-Font – nicht die Display-Type.
   Größe kommt aus --font-size-h3 (default.css). */
h1, h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-h);
  letter-spacing: var(--letter-spacing-h);
  font-weight: var(--font-weight-a);
  color: var(--brand-primary);
  text-transform: uppercase;
  line-height: var(--line-height-h);
}
section a {
  text-decoration: none;
  color: var(--brand-primary);
}
#section88 h3 {
  font-family: var(--font-body);
  font-size: var(--font-size-h3);
  font-weight: normal;
  letter-spacing: var(--letter-spacing-b);
  text-transform: uppercase;
  color: var(--brand-primary);
  line-height: var(--line-height-p);
  margin: 0 0 1.4em;
}

/* Absätze linksbündig wie im PDF */
#section88 .text p {
  text-align: left;
}

/* QR-Codes / Bilder in den Textspalten */
#section88 .text figure {
  margin: 2rem 0;
}

@media (min-width: 1000px) {
  a.button + a.button {
    margin-left: 20px;
  }
}

/* QR-Code / Button-Layout-Utilities (sectionübergreifend, nicht
   viewport-abhängig) */
.text figure {
  display: inline-block;
  vertical-align: middle;
  margin: 0 20px 0px 0;
}
.text figure + p {
  display: inline-block;
  vertical-align: bottom;
  margin: 0;
}
.text figure img {
  width: 100px;
  height: auto;
  max-width: none; /* falls eine globale max-width greift */
}
img.qr {
  width: 100px;
  height: auto;
  position: relative;
  display: inline-block;
}
.qrp {
  display: inline-flex;
  align-items: end;
  gap: 1rem;
  height: 100px;
}
.qrp .qr {
  width: 102px;
  height: auto;
  vertical-align: baseline;
  align-self: baseline;
}
.qrp .button {
  display: inline-block;
}

/* ==========================================================================
   Section 88 – Eversports
   ========================================================================== */
@media (max-width: 999px) {
  #section88 .container {
    aspect-ratio: auto;
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }
  #section88 [class^="feld"] {
    position: static;
    width: 100%;
    height: auto;
  }
  #section88 .feld2,
  #section88 .feld3 {
    aspect-ratio: 3 / 2;
  }
  #section88 .feld2 {
    width: 65%;
    margin-left: 0;
    background-size: cover;
  }
  #section88 .feld3 {
    aspect-ratio: 3 / 2;
    width: 65%;
    margin-right: 0;
    margin-left: auto;
    background-size: cover;
  }
  #section88 .feld4 .text p {
    margin-block: 0;
  }
}

@media (min-width: 1000px) and (max-width: 1600px) {
  #section88 .container {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--container-max-width);
    aspect-ratio: 1862 / 2439;
    margin: 0 auto;
  }
  #section88 [class^="feld"] {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
  }
  /* Fließtext + QR + Registrieren-Button */
  #section88 .feld0 {
    left: 0.6%;
    top: 1.9%;
    width: 46.1%;
    height: 49.5%;
  }
  /* Anleitung "REGISTRIERUNG" mit Store-Buttons */
  #section88 .feld1 {
    left: 55.3%;
    top: 4.7%;
    width: 46.1%;
    height: 31.1%;
  }
  /* Foto quer rechts – ragt über die rechte Containerkante */
  #section88 .feld2 {
    left: 54.5%;
    top: 49.2%;
    width: 62%;
    height: 31.7%;
    background-size: cover;
  }
  /* Foto hoch, Mitte – liegt über dem Querfoto */
  #section88 .feld3 {
    left: 25.3%;
    top: 70.6%;
    width: 24.7%;
    height: 26%;
    background-size: cover;
    z-index: 2;
  }
  /* Button "Eversport Helpcenter" */
  #section88 .feld4 {
    left: 55.8%;
    top: 85.1%;
    width: 30%;
    height: 6%;
  }
}

@media (min-width: 1600px) {
  #section88 .container {
    position: relative;
    width: calc(100% - 2 * var(--gutter));
    max-width: var(--container-max-width);
    aspect-ratio: 1862 / 2439;
    margin: 0 auto;
  }
  #section88 [class^="feld"] {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center;
  }
  #section88 .feld0 {
    left: 0.6%;
    top: 1.9%;
    width: 46.1%;
    height: 49.5%;
  }
  #section88 .feld1 {
    left: 55.3%;
    top: 4.7%;
    width: 46.1%;
    height: 31.1%;
  }
  #section88 .feld2 {
    left: 54.5%;
    top: 49.2%;
    width: 62%;
    height: 31.7%;
    background-size: cover;
  }
  #section88 .feld3 {
    left: 25.3%;
    top: 70.6%;
    width: 24.7%;
    height: 26%;
    background-size: cover;
    z-index: 2;
  }
  #section88 .feld4 {
    left: 55.8%;
    top: 85.1%;
    width: 30%;
    height: 6%;
  }
}