/* Beitrag "Verpflegung auf laengeren Radausfahrten" – Bild-Bloecke mit halbtransparenten Textkaesten
   (Original: Spectra-Container 1340px mit Hintergrundbild) + schwarzer Fazit-Kasten. Prefix: .vpf- */

/* ---------- Bild-Baender (brechen auf max. 1340px aus der Lesespalte aus) ---------- */
.prose .vpf-band {
  --bw: min(1340px, calc(100vw - 2 * var(--gutter)));
  position: relative; isolation: isolate; overflow: hidden;
  width: var(--bw);
  margin: 0 0 0 calc(50% - var(--bw) / 2);
  background: #2a2a2a;
}
.prose > .vpf-band:first-child { margin-top: 0; }
.prose > .vpf-band + .vpf-band { margin-top: 0; }
.prose > .vpf-band + * { margin-top: 2.2em; }
.prose .vpf-band__bg {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 72% 32%; border-radius: 0;
}
.prose .vpf-band__bg--energy { object-position: 48% 55%; }

.vpf-band--intro { padding: 149px 0 150px; }
.vpf-band--energy { padding: 100px 0 400px; }
@media (max-width: 781px) {
  .vpf-band--intro { padding: 180px 0 210px; }
  .vpf-band--energy { padding: 120px 0 440px; }
}

/* Textkaesten */
.vpf-box { width: min(1200px, 100% - 140px); margin-inline: auto; padding: 70px; color: #fbfaf3; }
.vpf-box--grey { background: rgba(55, 55, 55, .59); }
.vpf-box--rust { background: rgba(119, 38, 17, .59); padding-inline: 50px; }
@media (max-width: 781px) {
  .vpf-box, .vpf-box--rust { width: 100%; padding: 70px 30px; }
}
.prose .vpf-box p {
  margin: 10px 0; color: #fbfaf3;
  font-size: clamp(17px, 1rem + .3vw, 22px); font-weight: 300; line-height: 1.4;
}
.prose .vpf-box p:first-child { margin-top: 0; }
.prose .vpf-box p:last-child { margin-bottom: 0; }
.prose .vpf-box a { color: #fbfaf3; text-decoration: underline; }
.prose .vpf-box a:hover { color: #fff; text-decoration-thickness: 2px; }
.prose .vpf-box h2, .prose .vpf-box .vpf-rule {
  margin: 0 0 10px; color: #fbfaf3;
  font-size: clamp(26px, 1.4rem + .5vw, 32px); font-weight: 700; line-height: 1.125;
}
.prose .vpf-box .vpf-rule { margin-top: 50px; text-align: right; }
.prose .vpf-box .vpf-right { text-align: right; }

/* ---------- Haeufige Fehler: Bild-Spalte wie im Original schmaler (30 %) ---------- */
@media (min-width: 700px) {
  .prose .vpf-errors { grid-auto-flow: row; grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); grid-auto-columns: auto; }
}

/* ---------- ZUSAMMENGEFASST (schwarzer Kasten) ---------- */
.prose .vpf-summary {
  margin-top: 2.6em; padding: 60px 40px; background: #111; color: #fbfaf3;
}
.prose .vpf-summary h2 { margin: 0; color: #ff8c00; font-size: clamp(22px, 1.2rem + .7vw, 32px); }
.prose .vpf-summary p { margin: 19px 0 0; color: #fbfaf3; font-size: clamp(17px, 1rem + .3vw, 22px); font-weight: 300; line-height: 1.4; }
@media (max-width: 781px) { .prose .vpf-summary { padding: 50px 30px; } }