.roadmap__road--desktop,
.roadmap__road--tablet { display: none; }

/* Farbe pro Schritt (aus dem Index, kein ACF-Feld) */
.roadmap__step:nth-child(1) { --step-color: #0c8383; } 
.roadmap__step:nth-child(2) { --step-color: #f3ae1b; } 
.roadmap__step:nth-child(3) { --step-color: #e08123; } 
.roadmap__step:nth-child(4) { --step-color: #8f1414; }
.roadmap__step:nth-child(5) { --step-color: #003399; } 
.roadmap__step:nth-child(6) { --step-color: #9747ff; } 
.roadmap__step:nth-child(7) { --step-color: #ff53e0; } 

.roadmap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  max-width: none;
  overflow: hidden;
  aspect-ratio: 2314 / 1170;
  --bubble-bg: #f9f6f2;
}
.roadmap__road svg { width: 100%; height: 100%; display: block; }

.roadmap__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.roadmap__step {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

/* Kreis auf der Straße */
.roadmap__num {
  flex: 0 0 auto;
  width: 72px;         
  height: 72px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--step-color);
  color: #fff;
  font-weight: 700;
  font-size: 2rem;
  border: 6px solid #fff;                 
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Bubble / Kachel */
.roadmap__bubble {
  position: relative;
  background: #f9f6f2;
  border-radius: 16px;
  padding: 1.5rem 1.6rem 1.5rem 1.8rem;  
  width: 340px;                          
  min-height: 150px;                     
  box-sizing: border-box;
}


.roadmap__bubble::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 24px;
  width: 0; height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid #f9f6f2;
}

.roadmap__icon {
  width: 28px;
  height: 28px;
  color: var(--step-color);               /* Icon in Schrittfarbe */
  margin-bottom: .6rem;
}

.roadmap__title {
  margin: 0 0 .35rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #191a1c;
  line-height: 1.25;
}

.roadmap__desc {
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: #6b625d;
}

.roadmap__link {
  display: block;
  text-decoration: none;
  color: inherit;          
  cursor: pointer;
}

.roadmap__step .roadmap__num,
.roadmap__step .roadmap__bubble {
  transition: filter 0.25s ease;
}

.roadmap__step:hover .roadmap__num {
  filter: drop-shadow(0 0 12px var(--step-color));
}

.roadmap__step:hover .roadmap__bubble {
  filter: drop-shadow(0 0 12px var(--step-color));
}

@media (min-width: 1200px) {
  
  .roadmap {
    background-image: url('/wp-content/themes/ki-in-der-altenpflege/assets/svg/roadmap-strasse.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
  }
  .roadmap__road { position: absolute; inset: 0; z-index: 0; }
  .roadmap__road svg { width: 100%; height: 100%; display: block; }

  /* Steps-Ebene füllt den Container */
  .roadmap__steps {
    position: absolute; inset: 0;
    display: block; list-style: none; margin: 0; padding: 0;
    z-index: 1;
  }

  /* Jeder Schritt = 0-Punkt-Anker auf der Straße */
  .roadmap__step {
    position: absolute;
    left: var(--x); top: var(--y);
    width: 0; height: 0; margin: 0; display: block;
  }

  /* Positionen (deine Illustrator-Werte schlagen diese Schätzungen) */
  .roadmap__step:nth-child(1) { --x: 5%;  --y: 67%; }
  .roadmap__step:nth-child(2) { --x: 32%; --y: 48%; }
  .roadmap__step:nth-child(3) { --x: 46%; --y: 68%; }
  .roadmap__step:nth-child(4) { --x: 59%; --y: 41%; }
  .roadmap__step:nth-child(5) { --x: 69%; --y: 30%; }
  .roadmap__step:nth-child(6) { --x: 82%; --y: 57%; }
  .roadmap__step:nth-child(7) { --x: 93%; --y: 39%; }

  /* Kreis zentriert auf dem Anker */
  .roadmap__num {
    position: absolute; left: 0; top: 0;
    transform: translate(-50%, -50%); margin: 0;
  }

  /* Bubble: hängt per translate am Anker – %-Werte fangen variable Höhe ab */
  .roadmap__bubble {
    --gap: 44px; --circle-r: 28px; --arrow-inset: 44px; --bubble-w: 340px;
    position: absolute; left: 0; top: 0;
    width: var(--bubble-w);
    transform: translate(var(--bx), var(--by));
  }

  /* --- Bubble OBEN (1,2,4,5,7): Pfeil zeigt nach unten --- */
  .roadmap__step:nth-child(1) .roadmap__bubble,
  .roadmap__step:nth-child(2) .roadmap__bubble,
  .roadmap__step:nth-child(4) .roadmap__bubble,
  .roadmap__step:nth-child(5) .roadmap__bubble,
  .roadmap__step:nth-child(7) .roadmap__bubble {
    --by: calc(-100% - var(--circle-r) - var(--gap));
  }
  .roadmap__step:nth-child(1) .roadmap__bubble::after,
  .roadmap__step:nth-child(2) .roadmap__bubble::after,
  .roadmap__step:nth-child(4) .roadmap__bubble::after,
  .roadmap__step:nth-child(5) .roadmap__bubble::after,
  .roadmap__step:nth-child(7) .roadmap__bubble::after {
    top: 100%; border-top: 12px solid var(--bubble-bg);
  }

  /* --- Bubble UNTEN (3,6): Pfeil zeigt nach oben --- */
  .roadmap__step:nth-child(3) .roadmap__bubble,
  .roadmap__step:nth-child(6) .roadmap__bubble {
    --by: calc(var(--circle-r) + var(--gap));
  }
  .roadmap__step:nth-child(3) .roadmap__bubble::after,
  .roadmap__step:nth-child(6) .roadmap__bubble::after {
    bottom: 100%; border-bottom: 12px solid var(--bubble-bg);
  }

  /* --- Pfeil LINKS (1,6) --- */
  .roadmap__step:nth-child(1) .roadmap__bubble,
  .roadmap__step:nth-child(6) .roadmap__bubble {
    --bx: calc(-1 * var(--arrow-inset));
  }
  .roadmap__step:nth-child(1) .roadmap__bubble::after,
  .roadmap__step:nth-child(6) .roadmap__bubble::after {
    left: calc(var(--arrow-inset) - 11px);
  }

  /* --- Pfeil RECHTS (2,3,4,5,7) --- */
  .roadmap__step:nth-child(2) .roadmap__bubble,
  .roadmap__step:nth-child(3) .roadmap__bubble,
  .roadmap__step:nth-child(4) .roadmap__bubble,
  .roadmap__step:nth-child(5) .roadmap__bubble,
  .roadmap__step:nth-child(7) .roadmap__bubble {
    --bx: calc(-1 * (var(--bubble-w) - var(--arrow-inset)));
  }
  .roadmap__step:nth-child(2) .roadmap__bubble::after,
  .roadmap__step:nth-child(3) .roadmap__bubble::after,
  .roadmap__step:nth-child(4) .roadmap__bubble::after,
  .roadmap__step:nth-child(5) .roadmap__bubble::after,
  .roadmap__step:nth-child(7) .roadmap__bubble::after {
    right: calc(var(--arrow-inset) - 11px);
  }

  /* gemeinsame Pfeil-Basis (Dreieck-Seiten) */
  .roadmap__bubble::after {
    content: ""; position: absolute; width: 0; height: 0;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
  }
  
  .roadmap__step:nth-child(4) .roadmap__bubble {
  --bx: calc(-1 * (var(--bubble-w) - var(--arrow-inset)) - 100px);
  --by: calc(-1 * (var(--bubble-w) - var(--arrow-inset)) + 140px);
  }
  
  .roadmap__step:nth-child(4) .roadmap__bubble::after {
  right: calc(var(--arrow-inset) - 11px - 100px);
 }
 .roadmap__bubble::after {
  display: none;
}
}

@media (min-width: 768px) and (max-width: 1199px) {

  .roadmap {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    max-width: none;
    aspect-ratio: auto;
    overflow: hidden;                 

    background-image: url('/wp-content/themes/ki-in-der-altenpflege/assets/svg/Roadmap_Tablet.svg');
    background-repeat: no-repeat;
    background-position: calc(100% + 570px) center;
    background-size: 1600px 100%;      /* FESTE Breite – skaliert nicht mit */
  }

  .roadmap__steps {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 auto;
    max-width: 620px;
    width: 100%;
    box-sizing: border-box;
    padding: 2rem;
  }

  .roadmap__step {
    position: relative;          
    display: block;
    width: 60%;  
    margin: 0;
    left: auto; top: auto;       
    transform: none;
  }

  /* Straße hängt sich an den (jetzt aufgespannten) Container */
  .roadmap__road--tablet {
    display: none !important;
    position: absolute;
    top: 0;
    left: auto;
    right: 0;
    width: 40%;
    height: 100%;        
    z-index: 0;
    pointer-events: none;
  }
  .roadmap__road--tablet svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .roadmap__bubble {
    position: relative;
    width: 100%;
    transform: none;
  }

  /* Kreis nach rechts auf die Straße schieben, auf Bubble-Höhe */
  .roadmap__num {
    position: absolute;
    top: 50%;                       
    left: 100%;                     
    transform: translateY(-50%);
    margin-left: 22%;               
  }

  .roadmap__step:nth-child(1) .roadmap__num { margin-left: 40%; }
  .roadmap__step:nth-child(2) .roadmap__num { margin-left: 40%; }
  .roadmap__step:nth-child(3) .roadmap__num { margin-left: 55%; }
  .roadmap__step:nth-child(4) .roadmap__num { margin-left: 53%; }
  .roadmap__step:nth-child(5) .roadmap__num { margin-left: 39%; }
  .roadmap__step:nth-child(6) .roadmap__num { margin-left: 27%; }
  .roadmap__step:nth-child(7) .roadmap__num { margin-left: 40%; }

  /* Pfeil der Bubble zeigt nach rechts zum Kreis */
  .roadmap__bubble::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -10px;              
    left: auto;                
    bottom: auto;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-top: 11px solid transparent;
    border-bottom: 11px solid transparent;
    border-left: 11px solid var(--bubble-bg, #f9f6f2);   
    border-right: none;       
  }

}

/* ---- MOBILE: Kacheln untereinander, Punkt rechts, zentriert ---- */
@media (max-width: 767px) {

  .roadmap__road { display: none; }

  .roadmap {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0;
    aspect-ratio: auto;
    overflow: visible;
  }

  .roadmap__steps {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;      
    gap: 2rem;
    padding: 1rem;
  }

  .roadmap__step {
    position: static;
    inset: auto;
    transform: none;
    display: flex;
    flex-wrap: nowrap;       
    gap: 1rem;
    width: 100%;
    max-width: 420px;
  }

  .roadmap__bubble {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;           
    width: auto;
    min-height: 0;
    transform: none;
  }

  .roadmap__num {
    position: static;
    transform: none;
    order: 2;
    flex: 0 0 auto;          
  }

  .roadmap__step,
  .roadmap__link {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 1rem;
    width: 100%;
  }

  /* Pfeil zeigt nach rechts (zum Kreis) */
  .roadmap__bubble::after {
    top: 50%;
    right: -9px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    border: 10px solid transparent;
    border-left-color: #f9f6f2;
  }
}

/* ---- SEHR SCHMAL: Nummern weg, Bubble volle Breite ---- */
@media (max-width: 365px) {
  .roadmap__num {
    display: none;           
  }
  .roadmap__bubble::after {
    display: none;           
  }
  .roadmap__bubble {
    flex: 1 1 100%;         
  }
  .roadmap__step {
    padding-inline: .5rem;   
  }
}