/* Abschnitt „Wie startest du?" mit dem Bahn-Builder (Shortcode [dtf_builder_start]).
   Nutzt die Klassen des Themes (dtf-chooser, dtf-pathcard, dtf-tag, dtf-btn) und ergänzt nur, was neu ist. */
.dtfbs .dtf-paths-grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
.dtfbs .dtfbs-builder { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 28px; align-items: center; }
.dtfbs .dtfbs-builder > div:first-child { display: flex; flex-direction: column; align-items: flex-start; height: 100%; min-width: 0; }
.dtfbs .dtfbs-builder .dtf-tag { background: #1d1d1f; color: #fff; }
.dtfbs .dtfbs-builder ul { margin-bottom: 30px; }
.dtfbs-sheet { border-radius: 8px; background: #ececef; box-shadow: 0 8px 24px rgba(0, 0, 0, .16); padding: 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; align-content: start; }
.dtfbs-sheet b { display: block; aspect-ratio: 1; border-radius: 50%; background: #1f6b4e; }
.dtfbs-sheet b.s { border-radius: 2px; background: #d5532f; aspect-ratio: 2 / 1; grid-column: span 2; }
.dtfbs-sheet b.y { border-radius: 2px; background: #f0c02e; }

.dtfbs-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1200px; margin: 20px auto 0; text-align: left; }
.dtfbs-step { border-radius: 22px; background: #f5f5f5; overflow: hidden; }
.dtfbs-pic { height: 176px; padding: 18px; background: linear-gradient(135deg, #e3ece6, #c9dcd0); }
.dtfbs-pic.is-center { display: grid; place-items: center; }
.dtfbs-pic .dtfbs-sheet { width: 136px; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 8px; }
.dtfbs-cap { padding: 22px 26px 28px; }
.dtfbs-n { font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: 15px; color: #8fbba4; }
.dtfbs-cap h3 { margin: 2px 0 6px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.2px; color: #1d1d1f; }
.dtfbs-cap p { margin: 0; color: #6e6e73; font-size: 14.5px; line-height: 1.5; }
.dtfbs-row { display: flex; gap: 11px; align-items: center; padding: 10px 12px; margin-bottom: 8px; border-radius: 14px; background: #fff; font-size: 12.5px; line-height: 1.35; color: #1d1d1f; }
.dtfbs-th { flex: none; width: 40px; height: 40px; border-radius: 9px; background: #9c9ca2; display: grid; place-items: center; }
.dtfbs-th b { display: block; width: 20px; height: 20px; border-radius: 50%; background: #1f6b4e; }
.dtfbs-th b.y { width: 16px; height: 16px; border-radius: 3px; background: #f0c02e; transform: rotate(45deg); }
.dtfbs-bd { display: inline-block; margin-left: 5px; padding: 1px 8px; border-radius: 99px; color: #fff; font-size: 10px; font-weight: 700; }
.dtfbs-bd.ok { background: #1a8a4a; } .dtfbs-bd.w { background: #b86e00; }
.dtfbs-row small { display: block; color: #6e6e73; font-size: 11.5px; }
.dtfbs-sum { padding: 11px 13px; margin-bottom: 8px; border-radius: 14px; background: #fff; font-size: 12.5px; color: #1d1d1f; }
.dtfbs-sum b { display: block; font-family: "Inter Tight", Inter, sans-serif; font-size: 15px; }
.dtfbs p.dtfbs-more { display: block; margin: 30px auto 0; max-width: 860px; text-align: center; color: #6e6e73; font-size: 14.5px; line-height: 1.6; }
.dtfbs-more b { color: #1d1d1f; font-weight: 600; }
.dtfbs-new { display: inline-block; margin-left: 7px; padding: 1px 7px; border-radius: 99px; background: #1d1d1f; color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .6px; vertical-align: 1px; }

@media (max-width: 900px) {
  .dtfbs .dtf-paths-grid, .dtfbs-steps { grid-template-columns: minmax(0, 1fr); }
  .dtfbs .dtfbs-builder { grid-template-columns: minmax(0, 1fr); }
  .dtfbs .dtfbs-builder .dtfbs-sheet { max-width: 210px; }
}
.dtfbs .dtf-path-action { box-sizing: border-box; max-width: 100%; }
.dtfbs .dtfbs-builder > div:first-child { width: 100%; }

/* ---------- Abschnitt „Der Bahn-Builder" (Shortcode [dtf_builder_feature]), heller Stil ---------- */
.dtfbf { padding: 64px 22px 68px; background: linear-gradient(180deg, #f6f8f7 0%, #fff 60%); text-align: center; }
.dtfbf-eyebrow { display: inline-block; padding: 6px 13px; border-radius: 99px; background: #1d1d1f; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.dtfbf h2 { margin: 16px auto 0; max-width: 900px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: clamp(28px, 4.5vw, 46px); line-height: 1.1; letter-spacing: -1.5px; color: #1d1d1f; }
.dtfbf h2 em { font-style: normal; color: #8fbba4; }
.dtfbf p.dtfbf-sub { display: block; margin: 12px auto 0 !important; max-width: 640px; font-size: 17px; line-height: 1.55; color: #6e6e73; }
.dtfbf-stage { max-width: 1200px; margin: 32px auto 0; padding: 26px; border-radius: 26px; background: linear-gradient(160deg, #cfe2d6 0%, #a9d0ba 55%, #93c2a7 100%); }
.dtfbf-app { display: grid; grid-template-columns: minmax(0, 1fr) 200px; gap: 22px; align-items: center; max-width: 800px; margin: 0 auto; padding: 20px; border-radius: 22px; background: #fff; box-shadow: 0 24px 60px rgba(20, 60, 40, .18); text-align: left; }
.dtfbf-t { margin-bottom: 10px; font-size: 11px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase; color: #6e6e73; }
.dtfbf-app .dtfbs-row { border: 1px solid #e8e8ea; font-size: 13px; padding: 8px 12px; margin-bottom: 6px; }
.dtfbf-app .dtfbs-row small { font-size: 12.5px; }
.dtfbf-app .dtfbs-th { width: 38px; height: 38px; }
.dtfbf-app .dtfbs-th b.s { border-radius: 3px; background: #d5532f; }
.dtfbf-app .dtfbs-sum { background: #f5f5f5; font-size: 13px; padding: 10px 14px; margin: 0; }
.dtfbf-app .dtfbs-sum b { font-size: 16px; }
.dtfbf-app .dtfbs-sheet { padding: 9px; gap: 5px; }
.dtfbf-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 1200px; margin: 16px auto 0; text-align: left; }
.dtfbf-tile { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 14px; align-items: start; padding: 20px 22px; border-radius: 20px; background: #f5f5f5; }
.dtfbf-tile i { grid-row: 1 / span 2; display: grid; place-items: center; width: 36px; height: 36px; margin: 0; border: 2px solid #8fbba4; border-radius: 50%; color: #5f9a7c; font-style: normal; font-weight: 700; font-size: 17px; }
.dtfbf-tile h3 { margin: 0; font-family: "Inter Tight", Inter, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.3px; color: #1d1d1f; }
.dtfbf-tile p { margin: 0; font-size: 13.5px; line-height: 1.45; color: #6e6e73; }
.dtfbf-cta { display: flex; flex-wrap: wrap; gap: 14px 22px; justify-content: center; align-items: center; margin-top: 30px; }
.dtfbf-cta small { color: #6e6e73; font-size: 14.5px; }
@media (max-width: 1000px) { .dtfbf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .dtfbf { padding: 48px 20px 52px; }
  .dtfbf-stage { padding: 16px; border-radius: 22px; margin-top: 32px; }
  .dtfbf-app { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .dtfbf-app .dtfbs-sheet { max-width: 240px; }
  .dtfbf-tiles { grid-template-columns: minmax(0, 1fr); }
  .dtfbf-sub { font-size: 16px; }
}
.dtfbf-stage, .dtfbf-app, .dtfbf-tile { box-sizing: border-box; }
/* wie die Abschnitte des Themes über die volle Fensterbreite */
.dtfbf { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); box-sizing: border-box; }

/* Hinweis auf der Profi-Karte: hier gibt es keine automatische Prüfung */
.dtfbs .dtf-pathcard p.dtfbs-note { margin: 0 0 26px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid #e3e3e6; font-size: 14px; line-height: 1.5; color: #4d4d52; }
.dtfbs .dtf-pathcard p.dtfbs-note strong { color: #1d1d1f; }
.dtfbs .dtf-pathcard p.dtfbs-note a { color: #1d1d1f; font-weight: 600; text-decoration: underline; }
.dtfbs .dtf-pathcard.is-pro ul { margin-bottom: 18px; }