#tp-planbuilder{
  --tp-text: rgba(10,12,16,.92);
  --tp-muted: rgba(10,12,16,.62);
  --tp-border: rgba(16,24,40,.10);
  --tp-border-strong: rgba(16,24,40,.16);
  --tp-shadow: 0 12px 30px rgba(16,24,40,.08);

  --tp-primary: #111;
  --tp-primary-ink: #ffffff;
  --tp-primary-hover: #333;
  --tp-primary-soft: rgba(17,17,17,.10);

  --tp-radius: 18px;
  --tp-radius-sm: 14px;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Card */
#tp-planbuilder .tp-card{
  max-width: 1120px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--tp-border);
  border-radius: var(--tp-radius);
  box-shadow: var(--tp-shadow);
  padding: clamp(18px, 2.2vw, 30px);
  box-sizing: border-box;
}

/* Title */
#tp-planbuilder .tp-title{
  margin: 0 0 18px;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.12;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--tp-text);
}

/* Labels & inputs */
#tp-planbuilder .tp-label{
  display: block;
  font-size: 12.5px;
  font-weight: 900;
  color: rgba(10,12,16,.70);
  margin-bottom: 8px;
}

#tp-planbuilder .tp-input{
  width: 100%;
  margin-top: 0;
  padding: 12px 12px;
  border-radius: var(--tp-radius-sm);
  border: 1px solid var(--tp-border-strong);
  font-size: 14.5px;
  outline: none;
  background: #fff;
  color: var(--tp-text);
  box-sizing: border-box;
  transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

#tp-planbuilder .tp-input::placeholder{
  color: rgba(10,12,16,.42);
}

#tp-planbuilder .tp-input:focus{
  border-color: rgba(17,17,17,.55);
  box-shadow: 0 0 0 4px var(--tp-primary-soft);
}

/* Tabs */
#tp-tabs{
  display: flex;
  max-width: 720px;
  margin: 0 auto 22px;
  padding: 5px;
  background: #F6F6F4;
  border: 1px solid rgba(17,17,17,.16);
  border-radius: 999px;
  gap: 4px;
}

#tp-tabs .tp-tab{
  flex: 1;
  border: 0;
  background: transparent;
  padding: 12px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  letter-spacing: .01em;
  cursor: pointer;
  color: rgba(10,12,16,.60);
  transition: color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

#tp-tabs .tp-tab:hover{
  color: rgba(10,12,16,.85);
  background: rgba(17,17,17,.10);
}

#tp-tabs .tp-tab:active{ transform: translateY(1px); }

#tp-tabs .tp-tab.tp-active{
  background: none;
  color: #fff;
  box-shadow: 0 6px 16px rgba(17,17,17,.34), inset 0 1px 0 rgba(255,255,255,.16);
}

#tp-tabs .tp-tab.tp-active:hover{
  color: #fff;
  background: none;
}

/* =========================================
   Wettkampf: 2 Spalten / 2 Zeilen
   ========================================= */
#tp-planbuilder div.tp-only-race{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 16px 18px;
  align-items: end;
  margin: 4px 0 10px;
}

/* Kilometer kürzer */
#tp-planbuilder #tp-distance{
  max-width: 300px;
  justify-self: start;
}

/* Datum etwas kompakter */
#tp-planbuilder #tp-date{
  max-width: 320px;
  justify-self: start;
}

/* Terrain/Level etwas luftiger */
#tp-planbuilder #tp-terrain,
#tp-planbuilder #tp-level{
  max-width: 420px;
}

/* Build grid */
#tp-planbuilder div.tp-only-build{
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 14px 18px;
  align-items: end;
  margin: 4px 0 10px;
}

/* Straßenlauf-Felder */
#tp-planbuilder div.tp-str-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px 18px;
  align-items: end;
  margin: 4px 0 10px;
}

#tp-planbuilder .tp-str-tip{
  margin: 2px 0 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(17,17,17,.08);
  border: 1px solid rgba(17,17,17,.20);
  color: rgba(0,0,0,.72);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.45;
}

/* Level row */
#tp-planbuilder .tp-level-row{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 6px 0 6px;
}

#tp-planbuilder .tp-linkbtn{
  background: none;
  border: 0;
  padding: 0;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
  color: rgba(10,12,16,.78);
}

#tp-planbuilder .tp-linkbtn:hover{
  text-decoration: underline;
  color: rgba(10,12,16,.92);
}

/* Badge + flash */
#tp-planbuilder .tp-level-badge{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(0,0,0,.08);
  color: rgba(0,0,0,.75);
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s ease, transform .18s ease;
}

#tp-planbuilder .tp-level-badge.is-on{
  opacity: 1;
  transform: translateY(0);
}

#tp-planbuilder #tp-level.tp-level-flash{
  animation: tpLevelFlash 1.2s ease;
  border-color: rgba(0,0,0,.55);
  box-shadow: 0 0 0 4px rgba(0,0,0,.10);
}

@keyframes tpLevelFlash{
  0%   { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
  20%  { box-shadow: 0 0 0 5px rgba(0,0,0,.15); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); }
}

/* Full width fix */
#tp-planbuilder .tp-fullrow{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box;
}

#tp-planbuilder .tp-level-helper{
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

#tp-planbuilder .tp-slide{
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .30s ease;
}

#tp-planbuilder .tp-slide.is-open{
  max-height: 1600px;
}

#tp-planbuilder .tp-slide-inner{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-top: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fafafa;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  box-sizing: border-box;
}

#tp-planbuilder .tp-q{
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 14px;
  box-sizing: border-box;
}

#tp-planbuilder .tp-q-title{
  font-weight: 900;
  margin-bottom: 8px;
}

#tp-planbuilder .tp-radio{
  display: flex;
  gap: 8px;
  font-size: 14px;
  padding: 5px 0;
}

#tp-planbuilder .tp-level-result,
#tp-planbuilder .tp-level-actions{
  grid-column: 1 / -1;
}

/* Buttons */
#tp-planbuilder .tp-btn,
#tp-planbuilder .tp-extra-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  padding: 12px 16px;
  font-weight: 900;
  font-size: 15px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--tp-primary);
  color: var(--tp-primary-ink);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}

/* Kompakter Timeline-Button */
#tp-planbuilder .tp-loadbtn{
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 13px;
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 900;
  background: transparent;
  color: var(--tp-primary);
  border: 1px solid rgba(17,17,17,.45);
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
}

#tp-planbuilder .tp-loadbtn:hover{
  background: rgba(17,17,17,.10);
  border-color: rgba(17,17,17,.65);
  transform: translateY(-1px);
}

#tp-planbuilder .tp-loadbtn:active{ transform: translateY(0); }

#tp-planbuilder .tp-loadbtn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--tp-primary-soft);
}

/* Kompakter Timeline-Button – Ende */

#tp-planbuilder .tp-btn{
  margin-top: 14px;
  width: auto;
  border-radius: 16px;
  padding: 13px 18px;
  font-weight: 950;
  box-shadow: 0 12px 26px rgba(16,24,40,.14);
}

#tp-planbuilder .tp-btn:hover,
#tp-planbuilder .tp-extra-btn:hover{
  background: var(--tp-primary-hover);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  transform: translateY(-1px);
}

#tp-planbuilder .tp-btn:active,
#tp-planbuilder .tp-extra-btn:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(0,0,0,.12);
}

#tp-planbuilder .tp-btn:focus-visible,
#tp-planbuilder .tp-extra-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px var(--tp-primary-soft), 0 12px 26px rgba(0,0,0,.14);
}

#tp-planbuilder .tp-btn-small{
  padding: 10px 14px;
  font-size: 14px;
}

/* Ghost button */
#tp-planbuilder .tp-btn-ghost{
  background: transparent;
  color: var(--tp-primary);
  border: 1px solid rgba(17,17,17,.45);
  box-shadow: none;
}

#tp-planbuilder .tp-btn-ghost:hover{
  background: rgba(17,17,17,.08);
  border-color: rgba(17,17,17,.55);
  transform: none;
  box-shadow: none;
}

/* Indicator */
#tp-planbuilder .tp-indicator{
  margin-top: 14px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fafafa;
}

#tp-planbuilder .tp-ind-row{
  display: flex;
  gap: 10px;
  align-items: center;
}

#tp-planbuilder .tp-ind-sub{
  margin-top: 6px;
  color: rgba(0,0,0,.68);
  font-weight: 700;
}

#tp-planbuilder .tp-spinner{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.25);
  border-top-color: #000;
  animation: tpSpin .9s linear infinite;
}

@keyframes tpSpin{
  to{ transform: rotate(360deg); }
}

#tp-planbuilder .tp-error{
  color: #b00020;
  font-weight: 900;
}

#tp-planbuilder .tp-muted{
  color: rgba(0,0,0,.62);
  font-weight: 700;
}

#tp-planbuilder .tp-note-warn{
  color: #8a5a00;
  font-weight: 800;
}

/* Checkbox "bereits vorbereitet" */
#tp-planbuilder .tp-prepared-row{
  margin: 4px 0 2px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

#tp-planbuilder .tp-prepared-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 28px;
  font-size: 13px;
  font-weight: 800;
  color: var(--tp-primary);
  text-decoration: none;
  transition: color .16s ease;
}

#tp-planbuilder .tp-prepared-link::after{
  content: "\2192";
  font-size: 14px;
  line-height: 1;
  transition: transform .16s ease;
}

#tp-planbuilder .tp-prepared-link:hover{
  color: #111;
  text-decoration: underline;
}

#tp-planbuilder .tp-prepared-link:hover::after{
  transform: translateX(3px);
}

#tp-planbuilder .tp-check{
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-weight: 800;
  font-size: 14px;
  color: rgba(0,0,0,.74);
}

#tp-planbuilder .tp-check input[type="checkbox"]{
  width: 18px;
  height: 18px;
  accent-color: var(--tp-primary);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}

#tp-planbuilder .tp-toshort-cta{
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: rgba(17,17,17,.06);
  color: rgba(0,0,0,.72);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* Divider / meta */
#tp-planbuilder .tp-meta{
  margin-top: 14px;
  color: rgba(0,0,0,.78);
  font-weight: 700;
  line-height: 1.4;
}

#tp-planbuilder .tp-divider{
  height: 1px;
  background: rgba(0,0,0,.10);
  margin: 16px 0;
}

/* Modules */
/* Timeline: Startpunkt (verzögerter/Bridge-Start) */
#tp-planbuilder .tp-plan-start{
  position: relative;
  padding: 11px 16px;
  border: 1px dashed rgba(17,17,17,.45);
  border-radius: 14px;
  background: rgba(17,17,17,.06);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

#tp-planbuilder .tp-plan-start.tp-visible{
  opacity: 1;
  transform: translateY(0);
}

#tp-planbuilder .tp-plan-start::before{
  content: "";
  position: absolute;
  left: -26px;
  top: 14px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(17,17,17,.75);
  z-index: 2;
}

#tp-planbuilder .tp-plan-start::after{
  content: "";
  position: absolute;
  left: -20.5px;
  top: 20px;
  bottom: -42px;
  width: 2px;
  background: rgba(0,0,0,.14);
  z-index: 1;
}

#tp-planbuilder .tp-plan-start-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  color: rgba(17,17,17,.95);
  text-transform: uppercase;
}

#tp-planbuilder .tp-plan-start-date{
  font-size: 14px;
  font-weight: 900;
  color: rgba(0,0,0,.82);
  margin-top: 2px;
}

#tp-planbuilder .tp-modules{
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-left: 30px;
  position: relative;
}

#tp-planbuilder .tp-module{
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

/* Timeline: Punkt auf der Linie */
#tp-planbuilder .tp-module::before{
  content: "";
  position: absolute;
  left: -26px;
  top: 20px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid rgba(0,0,0,.28);
  z-index: 2;
}

/* Timeline: graue Verbindungslinie zum nächsten Block */
#tp-planbuilder .tp-module::after{
  content: "";
  position: absolute;
  left: -20.5px;
  top: 26px;
  bottom: -40px;
  width: 2px;
  background: rgba(0,0,0,.14);
  z-index: 1;
}

#tp-planbuilder .tp-module:last-child::after{ display: none; }

#tp-planbuilder .tp-module.tp-visible{
  opacity: 1;
  transform: translateY(0);
}

#tp-planbuilder .tp-module-main{
  min-width: 0;
}

#tp-planbuilder .tp-module-name{
  font-weight: 900;
  font-size: 15px;
  color: rgba(0,0,0,.88);
  line-height: 1.2;
}

#tp-planbuilder .tp-module-range{
  font-size: 12.5px;
  font-weight: 700;
  color: rgba(0,0,0,.55);
  margin-top: 3px;
}

#tp-planbuilder .tp-module-side{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

#tp-planbuilder .tp-module-weeks{
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
  background: rgba(17,17,17,.12);
  color: rgb(74,77,42);
}

/* Terminale Wettkampf-Kachel (Ziel-Datum, kein Button) */
#tp-planbuilder .tp-race-day{
  position: relative;
  padding: 12px 16px;
  border: 1px solid rgba(17,17,17,.45);
  border-radius: 14px;
  background: rgba(17,17,17,.08);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease;
}

#tp-planbuilder .tp-race-day.tp-visible{
  opacity: 1;
  transform: translateY(0);
}

#tp-planbuilder .tp-race-day::before{
  content: "";
  position: absolute;
  left: -27px;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #111;
  border: 3px solid #111;
  box-shadow: 0 0 0 3px rgba(17,17,17,.18);
  z-index: 2;
}

#tp-planbuilder .tp-race-day-label{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: rgba(17,17,17,.95);
}

#tp-planbuilder .tp-race-day-date{
  font-size: 15px;
  font-weight: 900;
  color: rgba(0,0,0,.85);
  margin-top: 2px;
}

/* Timeline-Summenzeile */
#tp-planbuilder .tp-plan-summary{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.10);
  text-align: center;
  font-size: 13.5px;
  font-weight: 800;
  color: rgba(0,0,0,.62);
}

/* Extra */
#tp-planbuilder .tp-extra{
  margin-top: 14px;
}

#tp-planbuilder .tp-extra-toplink{
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 18px;
}

#tp-planbuilder .tp-extra-overview{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 15px;
  border-radius: 12px;
  background: #fff;
  color: var(--tp-primary);
  font-weight: 800;
  font-size: 13.5px;
  border: 1px solid rgba(17,17,17,.28);
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}

#tp-planbuilder .tp-extra-overview::after{
  content: "\2192";
  font-size: 15px;
  line-height: 1;
  transition: transform .18s ease;
}

#tp-planbuilder .tp-extra-overview:hover{
  background: rgba(17,17,17,.06);
  border-color: rgba(17,17,17,.45);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0,0,0,.07);
}

#tp-planbuilder .tp-extra-overview:hover::after{
  transform: translateX(3px);
}

#tp-planbuilder .tp-extra-overview:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px var(--tp-primary-soft);
}

#tp-planbuilder .tp-extra-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

#tp-planbuilder .tp-extra-tile{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  background: #fff;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.05);
  opacity: 0;
  transform: translateY(10px);
  animation: tpExtraIn .34s ease forwards;
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}

#tp-planbuilder .tp-extra-tile::before{
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--tp-primary);
  opacity: .85;
}

#tp-planbuilder .tp-extra-tile:hover{
  transform: translateY(-2px);
  border-color: rgba(17,17,17,.30);
  box-shadow: 0 16px 34px rgba(0,0,0,.08);
}

#tp-planbuilder .tp-extra-tile-wide{
  grid-column: 1 / -1;
}

@keyframes tpExtraIn{
  to{ opacity: 1; transform: translateY(0); }
}

#tp-planbuilder .tp-extra-head{
  padding: 0;
  background: none;
  border-bottom: 0;
}

#tp-planbuilder .tp-extra-title{
  font-weight: 900;
  font-size: 18px;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: rgba(0,0,0,.90);
}

#tp-planbuilder .tp-extra-body{
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#tp-planbuilder .tp-extra-desc{
  color: rgba(0,0,0,.66);
  font-size: 14px;
  line-height: 1.45;
}

#tp-planbuilder .tp-extra-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: auto;
}

/* Schmale Kacheln: Button volle Breite; breite Einzel-Kachel: kompakter Button */
#tp-planbuilder .tp-extra-actions .tp-extra-btn{
  flex: 1;
  min-width: 0;
  justify-content: center;
  text-align: center;
}

#tp-planbuilder .tp-extra-tile-wide:not(.tp-extra-tile-variants) .tp-extra-actions .tp-extra-btn{
  flex: 0 0 auto;
  min-width: 220px;
}

#tp-planbuilder .tp-extra-muted{
  color: rgba(0,0,0,.60);
  font-weight: 700;
}

/* Übergangspläne: Varianten nebeneinander als Mini-Karten */
#tp-planbuilder .tp-extra-variants{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 2px;
}

#tp-planbuilder .tp-extra-variant{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 14px;
  background: rgba(17,17,17,.05);
}

#tp-planbuilder .tp-extra-variant-copy{
  min-width: 0;
  flex: 1;
}

#tp-planbuilder .tp-extra-variant-title{
  font-size: 15px;
  font-weight: 900;
  color: rgba(0,0,0,.88);
  margin-bottom: 5px;
}

#tp-planbuilder .tp-extra-variant-desc{
  font-size: 13px;
  line-height: 1.42;
  color: rgba(0,0,0,.64);
}

#tp-planbuilder .tp-extra-variant-action{
  display: flex;
  align-items: center;
}

#tp-planbuilder .tp-extra-variant-action .tp-extra-btn{
  width: 100%;
  justify-content: center;
}

/* Responsive */
@media (max-width: 900px){
  #tp-planbuilder .tp-slide-inner{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px){
  #tp-planbuilder div.tp-only-race{
    grid-template-columns: 1fr;
  }

  #tp-planbuilder div.tp-only-build{
    grid-template-columns: 1fr;
  }

  #tp-planbuilder .tp-only-race .tp-label:nth-child(1),
  #tp-planbuilder .tp-only-race .tp-label:nth-child(2),
  #tp-planbuilder #tp-date,
  #tp-planbuilder #tp-distance,
  #tp-planbuilder #tp-terrain,
  #tp-planbuilder #tp-level{
    max-width: 100%;
  }

  #tp-planbuilder .tp-btn{
    width: 100%;
  }

  #tp-planbuilder .tp-extra-grid{
    grid-template-columns: 1fr;
  }

  #tp-planbuilder .tp-extra-tile-wide{
    grid-column: span 1;
  }

  #tp-planbuilder .tp-extra-variant{
    grid-template-columns: 1fr;
    align-items: start;
  }

  #tp-planbuilder .tp-extra-variant-action{
    width: 100%;
  }

  #tp-planbuilder .tp-extra-variant-action .tp-extra-btn{
    width: 100%;
  }

  /* Timeline-Karten: auf schmalen Screens Chip+Button unter den Namen */
  #tp-planbuilder .tp-module{
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  #tp-planbuilder .tp-module-side{
    justify-content: space-between;
  }

  #tp-planbuilder .tp-module-side .tp-loadbtn{
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* ===== two peaks Website-Look (überschreibt die Variablen oben) ===== */
#tp-planbuilder{
  --tp-text:#111;--tp-muted:#6A6A6A;--tp-border:#DDDDDA;--tp-border-strong:#111;--tp-shadow:none;
  --tp-primary:#111;--tp-primary-ink:#fff;--tp-primary-hover:#333;--tp-primary-soft:#F6F6F4;
  --tp-radius:0;--tp-radius-sm:0;
  font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;
}
#tp-planbuilder *{border-radius:0!important}
#tp-planbuilder .tp-card{box-shadow:none;border:0;padding:0;max-width:1120px;margin:0}
#tp-planbuilder .tp-label,#tp-planbuilder .tp-module-weeks,#tp-planbuilder .tp-plan-start-label,#tp-planbuilder .tp-race-day-label{font-family:'IBM Plex Mono',monospace}
#tp-planbuilder input,#tp-planbuilder select,#tp-planbuilder button{font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif}
#tp-planbuilder .tp-mode,#tp-planbuilder .tp-tab{font-family:'IBM Plex Sans',Helvetica,Arial,sans-serif;letter-spacing:0;text-transform:none}
#tp-planbuilder *{box-shadow:none!important}
#tp-planbuilder .tp-mode{display:block;margin:0}
#tp-planbuilder .tp-tabs{margin-left:0!important;background:#fff!important;border:1.5px solid #111;padding:0;gap:0;display:inline-flex;flex-wrap:wrap}
#tp-planbuilder .tp-tab{background:#fff!important;background-image:none!important;color:#111!important;border:0;padding:12px 22px;font-weight:600}
#tp-planbuilder .tp-tab+.tp-tab{border-left:1.5px solid #111}
#tp-planbuilder .tp-tab.tp-active{background:#111!important;color:#fff!important}
#tp-planbuilder .tp-btn,#tp-planbuilder .tp-loadbtn,#tp-planbuilder .tp-extra-btn{background:#111!important;background-image:none!important;color:#fff!important;border:2px solid #111!important}
#tp-planbuilder .tp-btn:hover,#tp-planbuilder .tp-loadbtn:hover,#tp-planbuilder .tp-extra-btn:hover{background:#333!important;border-color:#333!important}
#tp-planbuilder .tp-btn-ghost{background:#fff!important;color:#111!important}
#tp-planbuilder .tp-only-race .tp-label,#tp-planbuilder .tp-only-build .tp-label{display:flex;flex-direction:column;gap:6px}
#tp-planbuilder .tp-input{width:100%;box-sizing:border-box}
#tp-planbuilder .tp-tabs{display:flex!important;flex-wrap:wrap;width:max-content;max-width:100%}
#tp-planbuilder .tp-tab{white-space:nowrap;flex:0 0 auto}