/* ═══════════════════════════════════════════════════════
   So sieht es aus, wenn es läuft  ·  Präfix bsp-

   Vier Karten im 2×2-Raster, auf dem Handy untereinander.
   Hierarchie je Karte: Bild → Vorher → Nachher → Ergebnis.
   Eigener Klassenraum, keine globale Regel, kein absolute,
   kein transform, kein negativer Rand.
   ═══════════════════════════════════════════════════════ */

.bsp{width:min(1240px,calc(100% - 48px));margin-inline:auto}

.bsp__intro{max-width:62ch;margin-bottom:clamp(34px,3.6vw,48px)}
.bsp__sub{font-size:1.04rem;line-height:1.6;color:var(--ink2);margin:0;max-width:58ch}

.bsp__grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(20px,2.2vw,30px);
}

.bsp__karte{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;
  box-shadow:0 1px 2px rgba(20,17,14,.03);
}

/* ── Bild ─────────────────────────────────────────── */
.bsp__bild{margin:0;aspect-ratio:16/10;overflow:hidden;background:var(--sand-d)}
.bsp__bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Ausschnitt je Motiv: Kopf soll nicht angeschnitten werden */
.bsp__bild--beratung img{object-position:48% 26%}
.bsp__bild--angebot img{object-position:52% 34%}
.bsp__bild--termine img{object-position:50% 26%}
.bsp__bild--pruefung img{object-position:46% 24%}

/* ── Text ─────────────────────────────────────────── */
.bsp__text{
  display:flex;flex-direction:column;flex:1;
  padding:clamp(22px,2.4vw,30px);
}
.bsp__eyebrow{
  font-family:var(--body);font-weight:600;font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  margin:0 0 10px;
}
.bsp__h{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.12rem,1.35vw,1.34rem);line-height:1.22;
  letter-spacing:-.026em;margin:0 0 clamp(16px,1.8vw,22px);
}

.bsp__schritt{margin:0 0 13px;font-size:.95rem;line-height:1.5;color:var(--ink2)}
.bsp__schritt b{
  display:block;font-family:var(--display);font-weight:700;
  font-size:.73rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink3);margin-bottom:4px;
}
.bsp__schritt--neu b{color:var(--blau)}

/* Das Ergebnis trägt die Karte — deshalb als Einziges
   hervorgehoben, mit der gelben Marke als Akzent. */
.bsp__erg{
  margin:auto 0 0;padding-top:clamp(16px,1.8vw,20px);
  border-top:1px solid var(--line);
  position:relative;padding-left:26px;
  font-family:var(--display);font-weight:700;
  font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.4;
  letter-spacing:-.018em;color:var(--ink);
}
.bsp__erg::before,.bsp__erg::after{
  content:'';position:absolute;background:var(--gelb);border-radius:2px;
}
.bsp__erg::before{left:0;top:calc(clamp(16px,1.8vw,20px) + .6em);width:7px;height:3px;transform:rotate(45deg)}
.bsp__erg::after{left:4px;top:calc(clamp(16px,1.8vw,20px) + .44em);width:14px;height:3px;transform:rotate(-48deg)}

/* ── Tablet ───────────────────────────────────────── */
@media (max-width:1000px){
  .bsp__grid{gap:18px}
  .bsp__text{padding:22px}
}

/* ── Mobil ────────────────────────────────────────── */
@media (max-width:760px){
  .bsp__grid{grid-template-columns:1fr}
  .bsp__bild{aspect-ratio:16/9}
}

/* ── Kennzahl je Ablauf ───────────────────────────── */
/* Werte aus demselben Modell wie der Potenzial-Rechner
   (AUFGABEN in app.js: Stunden pro Woche × Quote), auf den
   Monat gerechnet mit 45 Arbeitswochen. Nichts frei gesetzt. */
.bsp__wert{
  display:grid;grid-template-columns:auto 1fr;
  column-gap:8px;row-gap:4px;align-items:baseline;
  margin:clamp(15px,1.7vw,19px) 0 0;
  padding:clamp(13px,1.4vw,16px) clamp(14px,1.5vw,18px);
  border-radius:14px;background:var(--sand);border:1px solid var(--line);
}
.bsp__wert b{
  font-family:var(--display);font-weight:800;
  font-size:clamp(1.34rem,1.7vw,1.6rem);letter-spacing:-.035em;
  line-height:1;color:var(--ink);
}
.bsp__wert i{
  font-style:normal;font-size:.86rem;color:var(--ink2);
  font-weight:600;letter-spacing:-.006em;
}
.bsp__wert span{
  grid-column:1/-1;
  font-size:.87rem;line-height:1.42;color:var(--ink3);
}

.bsp__basis{
  margin:clamp(22px,2.4vw,30px) 0 0;
  font-size:.85rem;line-height:1.5;color:var(--ink3);max-width:70ch;
}