/* ══════════════════════════════════════════════════════════════════
   Beratungsstrecke — die Sportshop-Seite nach Renés Vorbild

   Sieben Blöcke untereinander, Bild und Text abwechselnd. Kein Shop,
   keine Preise: Die Seite erklärt, was im Laden steht, und lädt ein
   vorbeizukommen.
   ══════════════════════════════════════════════════════════════════ */

.beratung{display:flex;flex-direction:column;gap:clamp(46px,7vw,96px)}

.ber{
  display:grid;gap:clamp(22px,3.4vw,54px);align-items:center;
  grid-template-columns:1fr 1fr;
}
/* Jeder zweite Block spiegelt. Ohne das wandert das Auge bei sieben
   Blöcken in einer geraden Linie nach unten und liest keinen. */
.ber--rev .ber-bild{order:2}

.ber-text{min-width:0}
.ber-text .kicker{display:block;margin-bottom:10px}
.ber-text h3{margin:0 0 14px}
.ber-text p{margin:0 0 12px;max-width:52ch}
.ber-text p:last-of-type{margin-bottom:0}

/* BER_ZWISCHEN_V1 — Zwischenüberschriften nach dem Vorbild, das René
   genannt hat (bardill-sport.ch/sommer/wandern): ein Thema, drei Sätze,
   nächstes Thema. Bewusst klein und in der Leitfarbe, nicht als zweite
   große Überschrift — sonst kämpfen h3 und h4 um dieselbe Ebene. */
.ber-text h4{
  margin:22px 0 6px;font-family:var(--disp);font-weight:700;
  font-size:clamp(1rem,1.5vw,1.14rem);line-height:1.25;color:var(--snow);
}
.ber-text h4:first-of-type{margin-top:0}

/* Die Marken als ruhige Reihe — dieselbe Sprache wie das Markenband
   weiter unten auf der Seite, damit es nicht nach zwei Systemen
   aussieht. */
.ber-marken{
  list-style:none;margin:20px 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px 9px;
}
.ber-marken li{
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  color:var(--soft);padding:6px 11px;border-radius:999px;
  border:1px solid var(--line);background:rgba(255,255,255,.02);
}

.ber-schluss{
  margin:clamp(38px,5vw,64px) 0 0;max-width:60ch;
  padding-top:clamp(22px,3vw,32px);border-top:1px solid var(--line);
}

@media(max-width:900px){
  .ber{grid-template-columns:1fr;gap:20px}
  /* Auf dem Handy steht das Bild IMMER oben — die Spiegelung würde
     sonst dazu führen, dass mal Text und mal Bild zuerst kommt, und
     das liest sich wie ein Fehler. */
  .ber--rev .ber-bild{order:0}
}