/* Behandlungsablauf: Linienplan. Jede Behandlung ist eine Linie, jeder Punkt ein Termin in Sopron,
   die gestrichelte Strecke die Wartezeit. Desktop waagrecht, unter 760 px senkrecht. */
.ba-section .sm-head{max-width:760px}
.ba-lines{list-style:none;margin:40px 0 0;padding:0;counter-reset:none}
.ba-line{display:grid;grid-template-columns:1fr;gap:22px;padding:30px 0;border-top:1px solid rgba(23,58,66,.16)}
.ba-line:last-child{border-bottom:1px solid rgba(23,58,66,.16)}
.ba-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
.ba-icon{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#fff;color:var(--treatment-color-teal-deep);border:1px solid rgba(22,139,128,.25)}
.ba-head h3{margin:0;font-size:1.2rem;line-height:1.3}
.ba-head h3 a{color:var(--treatment-color-ink);text-decoration:underline;text-decoration-color:rgba(22,139,128,.45);text-underline-offset:4px;text-decoration-thickness:2px}
.ba-head h3 a:hover,.ba-head h3 a:focus-visible{text-decoration-color:var(--treatment-color-teal)}
.ba-count{margin:0;font-weight:700;color:var(--treatment-color-teal-deep);font-size:1rem}

.ba-route{list-style:none;margin:0;padding:0;display:flex;align-items:flex-start}
/* feste Breiten: alle Linien folgen demselben Raster */
.ba-stop,.ba-wait{position:relative;flex:0 1 132px;min-width:0;padding-top:34px}
.ba-wait{flex-basis:104px}
.ba-wait.is-long{flex-basis:190px}
/* Verbindung: durchgezogen bei kurzen Abständen (Tage, Wochen), gestrichelt bei langen Pausen (.is-long) */
.ba-stop::before{content:"";position:absolute;top:10px;left:10px;right:0;height:3px;background:var(--treatment-color-teal)}
.ba-stop:last-child::before{display:none}
.ba-wait::before{content:"";position:absolute;top:10px;left:0;right:0;height:3px;background:var(--treatment-color-teal)}
.ba-wait.is-long::before{height:0;background:none;border-top:3px dashed rgba(71,100,107,.6);left:6px;right:6px}
.ba-wait.is-long span{font-weight:600;font-style:normal;color:var(--treatment-color-ink)}
.ba-dot{position:absolute;top:1px;left:0;width:21px;height:21px;box-sizing:border-box;border-radius:50%;background:#fff;border:5px solid var(--treatment-color-teal);z-index:1}
.ba-stop.is-repeat .ba-dot,.ba-stop.is-optional .ba-dot{border-style:dashed;border-width:3px;border-color:var(--treatment-color-teal-deep)}
.ba-what{display:block;font-weight:600;color:var(--treatment-color-ink);font-size:.95rem;line-height:1.35;padding-right:14px;hyphens:manual}
.ba-time{display:block;margin-top:4px;color:var(--treatment-color-ink-soft);font-size:.9rem;font-variant-numeric:tabular-nums}
.ba-wait span{display:block;color:var(--treatment-color-ink-soft);font-size:.88rem;line-height:1.35;font-style:italic;padding-right:14px}
/* Desktop: der Abstand steht über der Linie, mittig, damit er nicht mit den Terminen verwechselt wird */
@media (min-width:761px){.ba-route{padding-top:38px}.ba-wait span{position:absolute;left:2px;right:2px;bottom:calc(100% - 6px);padding:0;text-align:center}}
.ba-note{margin:22px 0 0;color:var(--treatment-color-ink-soft);font-size:.92rem;line-height:1.55;max-width:62ch}
.ba-note a{color:var(--treatment-color-teal-deep)}

/* "So planen Sie Ihre Termine": dasselbe Spaltenraster wie der FAQ-Block darunter (1fr 1.3fr, 8 % Abstand) */
@media (min-width:761px){#planung.sm-split{grid-template-columns:1fr 1.3fr;column-gap:8%}}

@media (max-width:760px){
  .ba-lines{margin-top:28px}
  .ba-line{gap:18px;padding:24px 0}
  .ba-route{flex-direction:column}
  .ba-stop,.ba-wait{flex:none;padding:0 0 18px 38px}
  .ba-stop::before{top:20px;bottom:0;left:9px;right:auto;width:3px;height:auto}
  .ba-wait::before{top:0;bottom:0;left:9px;right:auto;width:3px;height:auto}
  .ba-wait.is-long::before{width:0;height:auto;top:4px;bottom:4px;left:9px;right:auto;border-top:0;border-left:3px dashed rgba(71,100,107,.6)}
  .ba-wait.is-long{flex-basis:auto;padding-top:18px;padding-bottom:34px}
  .ba-wait{padding-top:2px;padding-bottom:20px}
  .ba-what,.ba-wait span{padding-right:0}
  .ba-time{margin-top:2px}
  .ba-note{margin-top:6px}
}