/* ==========================================================================
   Deine Partner › Epassi Deutschland (Hansefit)
   Werte aus "Website (verschoben) 8.pdf" gemessen.
   Bezugsrahmen: Container = x 169.1–1192.1 pt (Breite 1023 pt).

   Sections:
     #section21 – Eversports  (Text li, Anleitung re, 2 Fotos, Helpcenter-Btn)
     #section23 – Hansefit    (Text li, Anleitung re)

   Zweispaltiges Raster laut PDF:
     linke Spalte  x 170–647   -> left 0%,    width 46%
     rechte Spalte x 740–1211  -> left 55.8%, width 46.1%

   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);
}

#section21 h3,
#section23 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 */
#section21 .text p,
#section23 .text p {
    text-align: left;
}

/* QR-Codes / Bilder in den Textspalten */
#section21 .text figure,
#section23 .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;   /* statt z. B. 100px – hier 3x */
  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 21 – Eversports
   ========================================================================== */

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

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

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


/* ==========================================================================
   Section 23 – Hansefit
   ========================================================================== */

/* Trennlinie oben – Breite folgt immer der Container-Breite, unabhängig
   von der Zone, daher nicht viewport-gebunden */


@media (max-width: 999px) {
    #section23 .container {
        aspect-ratio: auto;
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    #section23 [class^="feld"] {
        position: static;
        width: 100%;
        height: auto;
    }
}

@media (min-width: 1000px) and (max-width: 1600px) {
    #section23 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 2321;
        margin: 0 auto;
    }
    #section23 [class^="feld"] {
        position: absolute;
    }
    /* linke Spalte: Einleitung, QR, Kursnutzung, Abmeldung */
    #section23 .feld0 {
        left: 0%;
        top: 2.5%;
        width: 46%;
        height: 67.4%;
    }
    /* rechte Spalte: Registrierung, Check-in, Check-in vergessen */
    #section23 .feld1 {
        left: 55.8%;
        top: 3.4%;
        width: 46.1%;
        height: 92.4%;
    }
}

@media (min-width: 1600px) {
    #section23 .container {
        position: relative;
        width: calc(100% - 2 * var(--gutter));
        max-width: var(--container-max-width);
        aspect-ratio: 1862 / 2321;
        margin: 0 auto;
    }
    #section23 [class^="feld"] {
        position: absolute;
    }
    #section23 .feld0 {
        left: 0%;
        top: 2.5%;
        width: 46%;
        height: 67.4%;
    }
    #section23 .feld1 {
        left: 55.8%;
        top: 3.4%;
        width: 46.1%;
        height: 92.4%;
    }
}