/* Beitrag "Deine erste 100 km Radtour" – Nachbau der Vollbreiten-Baender aus dem WordPress-Original
   (Cover-Bloecke: grau #686868, rot #d1362a, Bild mit 60 % Schwarz, schwarz #111). Prefix: .t100- */

/* Vollbreite: Baender brechen aus der Lesespalte aus (100vw); Scrollbalken-Ueberstand wird abgeschnitten. */
body { overflow-x: clip; }
.prose .t100-band {
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  color: #fbfaf3;
}
.prose > .t100-band + .t100-band { margin-top: 0; }
.prose > .t100-band:first-child { margin-top: 0; }
.prose > .t100-band:last-child { margin-bottom: 2.5rem; }

.t100-band p, .t100-band li {
  font-size: clamp(14px, .875rem + ((1vw - 3.2px) * .294), 17px);
  font-weight: 500; line-height: 1.4;
}
.t100-band p { margin: 0; }
.t100-band p + p, .t100-band p + ul, .t100-band h3 + p { margin-top: 1.2em; }
.prose .t100-band a { color: inherit; font-weight: inherit; text-decoration: underline; }
.prose .t100-band a:hover { color: #fff; text-decoration-thickness: 2px; }

.t100-inner { padding: 5vw; }
.prose .t100-h2 {
  margin: 0 0 30px; color: #fbfaf3;
  font-size: clamp(28px, 1.5rem + 1vw, 37px); font-weight: 700; line-height: 1.125; letter-spacing: -.1px;
}
.prose .t100-h3 {
  margin: 0; color: #fbfaf3;
  font-size: clamp(19px, 1.1rem + .3vw, 22px); font-weight: 700; line-height: 1.125;
}
.t100-cols { display: grid; gap: 30px; align-items: start; }
.t100-col > * { margin-top: 0; }
.prose .t100-fig { margin: 0; }
.prose .t100-fig img { width: 100%; height: auto; border-radius: 0; }
.prose .t100-band .t100-list { margin: 1.2em 0 0; padding-left: 1.3em; }
.prose .t100-band .t100-list li { margin: .5em 0 0; }
.prose .t100-band .t100-list li::marker { color: currentColor; }

@media (min-width: 782px) {
  .t100-cols--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 50px; }
}

/* ---------- VORBEREITUNG (grau) ---------- */
.t100-prep { background: #686868; }
.t100-prep .t100-inner { padding-top: calc(5vw + 100px); }
@media (max-width: 781px) { .t100-prep .t100-inner { padding-top: calc(5vw + 60px); } }

/* ---------- TIMING & PACING (rot) ---------- */
.t100-pacing { background: #d1362a; }
.t100-pacing__grid { display: grid; gap: 32px; min-height: 478px; align-items: start; }
.prose .t100-giant {
  margin: 0;
  font-size: clamp(67.975px, 4.248rem + ((1vw - 3.2px) * 7.846), 148px);
  font-weight: 700; line-height: .9; letter-spacing: -4px;
  overflow-wrap: normal; hyphens: none;
}
.t100-giant__a, .t100-giant__b { display: block; }
.t100-giant__a { color: #000; }
.t100-giant__b { color: #fff; }
.t100-pacing__cols { gap: 0; }
.t100-pacing__cols .t100-col { padding: 0 10px 20px; }
.t100-pacing .t100-fig { margin-top: 1.2em; }
@media (min-width: 782px) {
  .t100-pacing__grid { grid-template-columns: minmax(0, 40fr) minmax(0, 60fr); gap: 0; }
  .t100-pacing__cols { gap: 0; }
  /* Spaltenbreite 40 % reicht bei 1440px nicht fuer "PACING" in 148px -> leicht skaliert statt Wortumbruch */
  .prose .t100-giant { font-size: min(148px, 9.6vw); }
}
@media (max-width: 781px) {
  .t100-pacing__cols { gap: 28px; }
  .t100-pacing__cols .t100-col { padding-bottom: 0; }
}

/* ---------- Trainingsplan (Bild-Band) ---------- */
.t100-plan {
  display: flex; align-items: center; justify-content: flex-end;
  min-height: 739px; padding: 60px clamp(30px, 9.7vw, 140px);
  overflow: hidden; background: #000;
}
.prose .t100-plan__bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 73% 25%; border-radius: 0; max-width: none;
}
.t100-plan::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .6); }
.t100-plan__content { position: relative; z-index: 1; width: 426px; max-width: 100%; color: #fff; }
.prose .t100-plan__title { margin: 0; color: #fff; font-size: clamp(26px, 1.4rem + .6vw, 32px); font-weight: 400; line-height: 1.125; }
.t100-band .t100-plan__content p { font-size: clamp(18px, 1rem + .3vw, 22px); font-weight: 300; line-height: 1.4; margin-top: 10px; }
.t100-band .t100-plan__btn + .t100-plan__btn { margin-top: 10px; }
.t100-band .t100-plan__content p.t100-plan__btn:first-of-type { margin-top: 10px; }
.prose .t100-plan__btn a {
  display: block; padding: 12px 24px; border-radius: 30px; background: #fff; color: #111;
  font-size: 18px; font-weight: 300; line-height: 1.4; text-align: center; text-decoration: none;
  transition: background-color .2s;
}
.prose .t100-plan__btn a:hover { background: #f1f1f1; color: #111; }
@media (max-width: 781px) {
  .t100-plan { justify-content: center; min-height: 739px; }
  .prose .t100-plan__btn a { text-align: left; }
}

/* ---------- CHECKLISTEN ---------- */
.prose .t100-check { color: #111; padding: 0 20px 30px; }
.prose .t100-check__title {
  margin: 0; padding-top: 14px; text-align: center; color: #111;
  font-size: clamp(30px, 1.6rem + .9vw, 40px); font-weight: 700; line-height: 1.125;
}
.t100-check__grid { display: grid; gap: 20px; width: min(1005px, 100%); margin: 40px auto 0; align-items: start; }
.prose .t100-check__h3 { margin: 0; color: #111; font-size: clamp(24px, 1.3rem + .6vw, 30px); font-weight: 700; line-height: 1.125; }
.prose .t100-checklist { list-style: none; margin: 0; padding: 0; }
.t100-band.t100-check li, .t100-band.t100-check p {
  font-size: clamp(18px, 1rem + .3vw, 22px); font-weight: 300; line-height: 1.4;
}
.prose .t100-checklist li { position: relative; margin: 8px 0 0; padding-left: 28px; }
.prose .t100-checklist li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 400; }
.t100-check__h3 + .t100-checklist { margin-top: 14px; }
.t100-band .t100-check__opt { margin-top: 20px; }
@media (min-width: 782px) {
  .t100-check__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .t100-check__col { padding: 0 10px 0 60px; }
}
@media (max-width: 781px) {
  .t100-check__grid { gap: 40px; }
  .prose .t100-checklist { padding-left: 24px; }
}

/* ---------- und danach? (schwarz) ---------- */
.prose .t100-after { background: #111; color: #fff; min-height: 66vh; padding: 4vw; }
.prose .t100-after__title, .t100-band .t100-after__proud {
  margin: 0; font-weight: 700; line-height: 1; letter-spacing: -2px; text-transform: uppercase;
}
.prose .t100-after__title { color: #503aa8; font-size: clamp(68.676px, 4.292rem + ((1vw - 3.2px) * 7.973), 150px); }
.t100-after__group { max-width: 800px; margin-top: 19px; }
.t100-band p.t100-after__l {
  margin: 0; color: #fbfaf3;
  font-size: clamp(38.682px, 2.418rem + ((1vw - 3.2px) * 3.266), 72px);
  font-weight: 700; line-height: 1; text-transform: uppercase;
}
.t100-band p.t100-after__l:first-child { color: #fff; letter-spacing: -2px; }
.t100-band p.t100-after__l--right { text-align: right; }
.t100-band p.t100-after__proud {
  margin-top: 19px; color: #ffee58;
  font-size: clamp(67.975px, 4.248rem + ((1vw - 3.2px) * 7.846), 148px);
}
