/* RuhrBau Motion-System und Bausteine (rbu-). Stand 16.10.2026 */
.rbu,.rbu *{box-sizing:border-box}
.rbu{font-family:'Inter',sans-serif;color:#4A5361;-webkit-font-smoothing:antialiased}
.rbu ol,.rbu ul{list-style:none;margin:0;padding:0}
.rbu li{margin:0}
.rbu a{text-decoration:none!important;border-bottom:0!important}
.rbu-h{font-size:13px;font-weight:600;line-height:1.4;color:#14181E;margin:0 0 14px}
.rb-js .rbu-anim:not(.is-in){visibility:hidden}

/* Ansprechpartner */
.rbu-ap{background:#F4F6F8;border-radius:2px;padding:26px 26px 22px;display:flex;flex-direction:column;gap:16px;margin-top:8px}
.rbu-ap__top{display:flex;align-items:center;gap:18px}
.rbu-ap__av{width:88px;height:88px;flex:none;border-radius:50%;background:#E2E6EC;display:flex;align-items:center;justify-content:center}
.rbu-ap__t{display:block;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:20px;line-height:1.2;color:#14181E;margin-bottom:4px}
.rbu-ap__x{display:block;font-size:14px;line-height:1.5;color:#4A5361}
.rbu-ap__tel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:50px;background:#1B3A6B;color:#fff!important;border-radius:2px;font-size:16px;font-weight:600;transition:background-color .18s ease}
.rbu-ap__tel:hover{background:#12294D}
.rbu-ap__tel:focus-visible,.rbu-ap__cb:focus-visible{outline:2px solid #3D6098;outline-offset:3px}
.rbu-ap__foot{display:flex;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;font-size:13px;line-height:1.5;color:#4A5361}
.rbu-ap__cb{color:#1B3A6B!important;font-weight:600}

/* Zeitleiste */
.rbu-tl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.rbu-tl__step{position:relative;min-width:0}
.rbu-tl__rail{position:relative;height:62px}
.rbu-tl__stake{position:absolute;left:8px;top:10px;width:1.5px;height:25px;background:#1B3A6B;transform-origin:top}
.rbu-tl__step.is-run .rbu-tl__stake,.rbu-tl__step.is-next .rbu-tl__stake{background:#C9D2DF}
.rbu-tl__seg{position:absolute;left:18px;right:0;top:47px;height:2px;background:#E2E6EC}
.rbu-tl__seg::before{content:"";position:absolute;left:0;right:0;top:-3px;height:8px;background:repeating-linear-gradient(90deg,#C9D2DF 0 1.5px,transparent 1.5px 16px)}
.rbu-tl__fill{position:absolute;left:0;top:-.25px;width:100%;height:2.5px;background:#1B3A6B;transform-origin:left center}
.rbu-tl__step.is-run .rbu-tl__fill{width:50%}
.rbu-tl__node{position:absolute;left:0;top:39px;width:18px;height:18px;border-radius:50%;background:#1B3A6B;display:flex;align-items:center;justify-content:center;z-index:2}
.rbu-tl__node svg{width:11px;height:11px;overflow:visible}
.rbu-tl__step.is-run .rbu-tl__node{background:#fff;box-shadow:inset 0 0 0 2px #1B3A6B}
.rbu-tl__step.is-next .rbu-tl__node{background:#fff;box-shadow:inset 0 0 0 2px #C9D2DF}
.rbu-tl__half{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,#1B3A6B 50%,transparent 50%)}
.rbu-tl__ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid #1B3A6B;opacity:0}
.rbu-tl__mark{position:absolute;left:50%;top:-21px;width:0;height:0;z-index:3}
.rbu-tl__mark::after{content:"";position:absolute;left:-6px;top:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid #B8863B}
.rbu-tl__marklbl{position:absolute;left:0;top:-17px;transform:translateX(-50%);font-size:11px;font-weight:600;line-height:1;color:#8A6428;white-space:nowrap}
.rbu-tl__body{padding:0 20px 0 0}
.rbu-tl__t{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font-size:14px;font-weight:600;line-height:1.35;color:#14181E;margin:0 0 4px}
.rbu-tl__step.is-next .rbu-tl__t{color:#79828F}
.rbu .rbu-tl__x{margin:0;font-size:13px;line-height:1.55;color:#4A5361}
.rbu-chip{font-size:10.5px;font-weight:600;letter-spacing:.04em;padding:2px 7px;border:1px solid #1B3A6B;border-radius:2px;color:#1B3A6B;line-height:1.3}

/* Bauablauf */
.rbu-gw__head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 24px;flex-wrap:wrap;margin-bottom:14px}
.rbu-gw__head .rbu-h{margin:0}
.rbu-gw__sub{font-size:13px;line-height:1.45;color:#79828F}
.rbu-gw__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rbu-gw__k{position:relative;display:flex;align-items:center;gap:12px;padding:12px 30px 14px 14px;border:1px solid #E2E6EC;border-radius:2px;background:#fff;overflow:hidden;min-height:58px}
.rbu-gw__nr{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:15px;line-height:1;color:#1B3A6B;width:22px;flex:none}
.rbu-gw__k svg.rbu-gw__ic{width:26px;height:26px;flex:none;fill:none;stroke:#1B3A6B;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rbu-gw__name{font-size:13.5px;line-height:1.3;color:#14181E}
.rbu-gw__ok{position:absolute;right:8px;top:8px;width:16px;height:16px;border-radius:50%;background:#1B3A6B;display:flex;align-items:center;justify-content:center}
.rbu-gw__bar{position:absolute;left:0;bottom:0;width:100%;height:3px;background:#1B3A6B;transform-origin:left center}
.rbu .rbu-gw__note{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:#79828F}

/* Bautafel */
.rbu-gs{background:#0D1F3C;border-radius:2px;padding:28px 30px 30px;color:#fff}
.rbu-gs__head{display:flex;justify-content:space-between;align-items:baseline;gap:6px 20px;flex-wrap:wrap}
.rbu .rbu-gs__title{margin:0;font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:24px;line-height:1.2;letter-spacing:0;text-transform:none;color:#fff}
.rbu-gs__sub{font-size:13px;color:#9FB8DE}
.rbu-gs__line{height:1px;background:rgba(255,255,255,.28);margin:18px 0 22px;transform-origin:left center}
.rbu-gs__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 32px}
.rbu-gs__p{display:flex;flex-direction:column;gap:8px}
.rbu-gs__p svg{width:28px;height:28px;fill:none;stroke:#9FB8DE;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rbu-gs__pt{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:17px;line-height:1.25;color:#fff}
.rbu-gs__px{font-size:14px;line-height:1.55;color:rgba(255,255,255,.8)}

/* Bewegung: einmal, beim ersten Sichtbarwerden */
@keyframes rbuPop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes rbuDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes rbuUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rbuX{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes rbuY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes rbuFade{from{opacity:0}to{opacity:1}}
@keyframes rbuMarkX{0%{left:0;opacity:0}12%{opacity:1}100%{left:50%;opacity:1}}
@keyframes rbuMarkY{0%{top:0;opacity:0}12%{opacity:1}100%{top:50%;opacity:1}}
@keyframes rbuRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.4);opacity:0}}
@keyframes rbuK{0%{background:#fff;border-color:#E2E6EC}6%,94%{background:#F4F6F8;border-color:#1B3A6B}100%{background:#fff;border-color:#E2E6EC}}
@keyframes rbuNr{from{color:#C9D2DF}to{color:#1B3A6B}}
@keyframes rbuName{from{color:#79828F}to{color:#14181E}}
@keyframes rbuIc{from{stroke-dashoffset:1;stroke:#9FB8DE}to{stroke-dashoffset:0;stroke:#1B3A6B}}
.rbu-draw,.rbu-gw__ic path,.rbu-gs__p path{stroke-dasharray:1}
.is-in .rbu-tl__stake{animation:rbuY .35s cubic-bezier(.22,.7,.3,1) calc(var(--n) - .3s) both}
.is-in .rbu-tl__node{animation:rbuPop .45s cubic-bezier(.2,.9,.3,1.3) var(--n) both}
.is-in .rbu-tl__node .rbu-draw{animation:rbuDraw .4s ease calc(var(--n) + .35s) both}
.is-in .rbu-tl__fill{animation:rbuX var(--fd) cubic-bezier(.45,0,.25,1) var(--f) both}
.is-in .rbu-tl__body{animation:rbuUp .5s cubic-bezier(.22,.7,.3,1) var(--t) both}
.is-in .rbu-tl__half{animation:rbuFade .3s linear 6.4s both}
.is-in .rbu-tl__ring{animation:rbuRing 2.4s ease-out 5.2s 3}
.is-in .rbu-tl__mark{animation:rbuMarkX .8s cubic-bezier(.45,0,.25,1) 5.6s both}
.is-in .rbu-tl__marklbl{animation:rbuFade .3s linear 6.3s both}
.is-in .rbu-gw__k{animation:rbuK .8s linear calc(var(--i) * .8s + .3s) both}
.is-in .rbu-gw__nr{animation:rbuNr .3s linear calc(var(--i) * .8s + .3s) both}
.is-in .rbu-gw__ic path{animation:rbuIc .7s cubic-bezier(.22,.7,.3,1) calc(var(--i) * .8s + .3s) both}
.is-in .rbu-gw__name{animation:rbuName .3s linear calc(var(--i) * .8s + .3s) both}
.is-in .rbu-gw__bar{animation:rbuX .8s linear calc(var(--i) * .8s + .3s) both}
.is-in .rbu-gw__ok{animation:rbuPop .3s cubic-bezier(.2,.9,.3,1.3) calc(var(--i) * .8s + 1s) both}
.is-in .rbu-gs__line{animation:rbuX .6s cubic-bezier(.22,.7,.3,1) .2s both}
.is-in .rbu-gs__p{animation:rbuUp .5s cubic-bezier(.22,.7,.3,1) calc(var(--i) * .14s + .5s) both}
.is-in .rbu-gs__p path{animation:rbuDraw .8s cubic-bezier(.22,.7,.3,1) calc(var(--i) * .14s + .6s) both}

@media (max-width:1024px){.rbu-gs__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){
  .rbu-tl{grid-template-columns:1fr}
  .rbu-tl__step{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:14px}
  .rbu-tl__rail{height:auto}
  .rbu-tl__stake{display:none}
  .rbu-tl__node{top:1px}
  .rbu-tl__seg{left:8px;right:auto;top:21px;bottom:0;width:2px;height:auto}
  .rbu-tl__seg::before{left:-3px;right:auto;top:0;bottom:0;width:8px;height:auto;background:repeating-linear-gradient(180deg,#C9D2DF 0 1.5px,transparent 1.5px 16px)}
  .rbu-tl__fill{left:-.25px;top:0;width:2.5px;height:100%;transform-origin:center top}
  .rbu-tl__step.is-run .rbu-tl__fill{width:2.5px;height:50%}
  .rbu-tl__step.is-next .rbu-tl__seg{display:none}
  .rbu-tl__mark{left:1px;top:50%}
  .rbu-tl__mark::after{left:-6px;top:-5px;border:0;width:12px;height:2.5px;background:#B8863B}
  .rbu-tl__marklbl{display:none}
  .rbu-tl__body{padding:0 0 22px}
  .is-in .rbu-tl__fill{animation-name:rbuY}
  .is-in .rbu-tl__mark{animation-name:rbuMarkY}
  .rbu-gs{padding:24px 22px 26px}
  .rbu-gs__grid{grid-template-columns:1fr;gap:22px}
  .rbu-ap{padding:22px 20px 20px}
  .rbu-ap__av{width:72px;height:72px}
}
@media (max-width:600px){
  .rbu-gw__grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .rbu-gw__k{flex-direction:column;align-items:flex-start;gap:8px;padding:12px 12px 14px}
  .rbu-gw__name{font-size:13px}
}
@media (prefers-reduced-motion:reduce){.rbu-anim,.rbu-anim *{animation:none!important}}

/* 18.10.2026: Abschnitte und Karten tauchen einmal kurz auf (ersetzt das scrollgekoppelte Auftauchen). Ausloesung: rb-motion.js, Funktion auftauchen. */
.rb-auf{opacity:0;transform:translateY(18px)}
.rb-auf.rb-da{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.e-con:nth-child(3n+2)>.rb-auf.rb-da[id^="rb-card-"]{transition-delay:.08s}
.e-con:nth-child(3n+3)>.rb-auf.rb-da[id^="rb-card-"]{transition-delay:.16s}
@media (prefers-reduced-motion:reduce){.rb-auf{opacity:1;transform:none}}