/* Schriften lokal - keine Anfrage an Google (17.09.2026) */
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/inter-400.woff2') format('woff2'), url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/inter-400.ttf') format('truetype'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/inter-500.woff2') format('woff2'), url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/inter-500.ttf') format('truetype'); }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/inter-600.woff2') format('woff2'), url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/inter-600.ttf') format('truetype'); }
@font-face{ font-family:'Source Serif 4'; font-style:normal; font-weight:400; font-display:swap; src:url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/source-serif-4-400.woff2') format('woff2'), url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/source-serif-4-400.ttf') format('truetype'); }
@font-face{ font-family:'Source Serif 4'; font-style:normal; font-weight:600; font-display:swap; src:url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/source-serif-4-600.woff2') format('woff2'), url('https://ruhrbau-projektservice.de/wp-content/uploads/ruhrbau/fonts/source-serif-4-600.ttf') format('truetype'); }


:root{
  --navy:        #1B3A6B;
  --navy-deep:   #12294D;
  --navy-900:    #0D1F3C;
  --accent:       #3D6098;   
  --accent-light: #9FB8DE;   
  --ink:         #14181E;
  --body:        #4A5361;
  --muted:       #79828F;
  --line:        #E2E6EC;
  --stone:       #F4F6F8;
  --white:       #FFFFFF;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --wrap: 1200px;
  --pad: 24px;
}
body.page-id-448 *, body.page-id-448 *::before, body.page-id-448 *::after{ box-sizing:border-box; }
body.page-id-448{ scroll-behavior:smooth; scroll-padding-top:104px; }
body.page-id-448{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.75;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
body.page-id-448 img{ max-width:100%; height:auto; display:block; }
body.page-id-448 figure{ margin:0; }
body.page-id-448 a{ color:var(--navy); text-decoration:none; }
body.page-id-448 a:hover{ color:var(--accent); }
body.page-id-448 h1, body.page-id-448 h2, body.page-id-448 h3, body.page-id-448 h4{
  font-family:var(--serif);
  color:var(--ink);
  font-weight:600;
  line-height:1.18;
  margin:0 0 .5em;
  letter-spacing:-.01em;
}
body.page-id-448 h1{ font-size:clamp(2.2rem, 5vw, 3.7rem); }
body.page-id-448 h2{ font-size:clamp(1.8rem, 3.6vw, 2.7rem); }
body.page-id-448 h3{ font-size:clamp(1.2rem, 2vw, 1.45rem); }
body.page-id-448 h4{ font-size:1.05rem; }
body.page-id-448 p{ margin:0 0 1.15em; }
body.page-id-448 p:last-child{ margin-bottom:0; }
body.page-id-448 .container{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 var(--pad); }
body.page-id-448 .section{ padding:96px 0; }
body.page-id-448 .section--tight{ padding:64px 0; }
body.page-id-448 .section--stone{ background:var(--stone); }
body.page-id-448 .section--navy{ background:var(--navy); color:rgba(255,255,255,.82); }
body.page-id-448 .section--navy h2, body.page-id-448 .section--navy h3, body.page-id-448 .section--navy h4{ color:#fff; }
body.page-id-448 .section--deep{ background:var(--navy-900); color:rgba(255,255,255,.78); }
body.page-id-448 .section--deep h2, body.page-id-448 .section--deep h3{ color:#fff; }
body.page-id-448 .row{ display:flex; flex-wrap:wrap; gap:48px; }
body.page-id-448 .row--center{ align-items:center; }
body.page-id-448 .row--tight{ gap:28px; }
body.page-id-448 .row--wide{ gap:64px; }
body.page-id-448 .col{ flex:1 1 0; min-width:0; }
body.page-id-448 .col-half{ flex:1 1 440px; min-width:0; }
body.page-id-448 .col-third{ flex:1 1 300px; min-width:0; }
body.page-id-448 .col-quarter{ flex:1 1 220px; min-width:0; }
body.page-id-448 .row > .col-third{ max-width:calc((100% - 96px) / 3); }
body.page-id-448 .row--tight > .col-third{ max-width:calc((100% - 56px) / 3); }
body.page-id-448 .row--wide > .col-third{ max-width:calc((100% - 128px) / 3); }
body.page-id-448 .eyebrow{
  font-family:var(--sans);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 18px;
  display:flex;
  align-items:center;
}
body.page-id-448 .section--navy .eyebrow, body.page-id-448 .section--deep .eyebrow{ color:var(--accent-light); }
body.page-id-448 .lead{ font-size:1.2rem; line-height:1.7; color:var(--ink); }
body.page-id-448 .section--navy .lead, body.page-id-448 .section--deep .lead{ color:#fff; }
body.page-id-448 .measure{ max-width:62ch; }
body.page-id-448 .center{ text-align:center; }
body.page-id-448 .center .eyebrow{ justify-content:center; }
body.page-id-448 .section-head{ max-width:760px; margin-bottom:56px; }
body.page-id-448 .section-head.center{ margin-left:auto; margin-right:auto; }
body.page-id-448 .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--sans); font-size:.95rem; font-weight:600;
  letter-spacing:.02em;
  padding:17px 34px;
  border:2px solid transparent;
  border-radius:2px;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
  cursor:pointer;
}
body.page-id-448 .btn--primary{ background:var(--accent); color:#fff; border-color:var(--accent); }
body.page-id-448 .btn--primary:hover{ background:var(--navy); border-color:var(--navy); color:#fff; }
body.page-id-448 .btn--navy{ background:var(--navy); color:#fff; border-color:var(--navy); }
body.page-id-448 .btn--navy:hover{ background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; }
body.page-id-448 .btn--ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45); }
body.page-id-448 .btn--ghost:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }
body.page-id-448 .btn--light{ background:#fff; color:var(--navy); border-color:#fff; }
body.page-id-448 .btn--light:hover{ background:var(--stone); color:var(--navy-deep); border-color:var(--stone); }
body.page-id-448 .btn--outline{ background:transparent; color:var(--navy); border-color:var(--line); }
body.page-id-448 .btn--outline:hover{ border-color:var(--navy); color:var(--navy); }
body.page-id-448 .btn-group{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
body.page-id-448 .site-header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid var(--line);
}
body.page-id-448 .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:92px; }
body.page-id-448 .brand{ display:flex; align-items:center; flex:none; }
body.page-id-448 .brand img{ height:60px; width:auto; }
body.page-id-448 .nav{ display:flex; align-items:center; align-self:stretch; gap:26px; margin-left:auto; }
body.page-id-448 .nav > a, body.page-id-448 .nav-item > a{
  font-size:.9rem; font-weight:500; color:var(--ink);
  padding:8px 0; position:relative; white-space:nowrap;
  transition:color .2s ease;
}
body.page-id-448 .nav > a::after, body.page-id-448 .nav-item > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--navy);
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s cubic-bezier(.22,.7,.3,1);
}
body.page-id-448 .nav > a:hover, body.page-id-448 .nav-item > a:hover{ color:var(--navy); }
body.page-id-448 .nav > a:hover::after, body.page-id-448 .nav-item > a:hover::after, body.page-id-448 .nav-item:hover > a::after, body.page-id-448 .nav-item:focus-within > a::after{ transform:scaleX(1); }
body.page-id-448 .nav > a[aria-current="page"], body.page-id-448 .nav-item > a[aria-current="page"]{ color:var(--navy); font-weight:600; }
body.page-id-448 .nav > a[aria-current="page"]::after, body.page-id-448 .nav-item > a[aria-current="page"]::after{ transform:scaleX(1); transition:none; }
body.page-id-448 .nav-item:has(.subnav a[aria-current="page"]) > a{ color:var(--navy); font-weight:600; }
body.page-id-448 .nav-item:has(.subnav a[aria-current="page"]) > a::after{ transform:scaleX(1); transition:none; }
body.page-id-448 .nav-item{
  position:relative;
  align-self:stretch;          
  display:flex; align-items:center;
  padding-right:15px;          
}
body.page-id-448 .nav-item::after{              
  content:""; position:absolute; right:0; top:50%;
  width:6px; height:6px; margin-top:-5px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .25s ease, border-color .25s ease;
  pointer-events:none;
}
body.page-id-448 .nav-item:hover::after, body.page-id-448 .nav-item:focus-within::after{
  border-color:var(--navy);
  transform:rotate(225deg); margin-top:-1px;
}
body.page-id-448 .subnav-toggle{ display:none; }
body.page-id-448 .subnav{
  position:absolute; top:100%; left:-20px;
  display:flex; flex-direction:column;
  min-width:284px;
  background:#fff;
  border:1px solid var(--line);
  border-top:2px solid var(--navy);
  box-shadow:0 20px 44px rgba(13,31,60,.16);
  padding:8px 0;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .22s ease, transform .22s cubic-bezier(.22,.7,.3,1), visibility .22s;
  z-index:120;
}
body.page-id-448 .nav-item:hover .subnav, body.page-id-448 .nav-item:focus-within .subnav{ opacity:1; visibility:visible; transform:translateY(0); }
body.page-id-448 .subnav a{
  display:block;
  padding:11px 24px;
  font-size:.88rem; font-weight:500; color:var(--body);
  white-space:nowrap;
  border-left:2px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
body.page-id-448 .subnav a:hover{ background:var(--stone); color:var(--navy); border-left-color:var(--navy); }
body.page-id-448 .subnav a[aria-current="page"]{ color:var(--navy); font-weight:600; border-left-color:var(--navy); background:var(--stone); }
body.page-id-448 .nav-cta{ display:none; }
body.page-id-448 .header-cta{ display:flex; align-items:stretch; gap:12px; flex:none; }
body.page-id-448 .header-phone{
  display:flex; flex-direction:column;
  justify-content:center; align-items:center; text-align:center;
  line-height:1.25;
  font-size:.88rem; font-weight:600; color:var(--navy);
  padding:12px 22px;
  border:2px solid transparent;
  border-radius:2px;
  transition:background .18s ease, color .18s ease,
             border-color .18s ease, transform .14s ease;
}
body.page-id-448 .header-phone small{
  font-size:.7rem; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  transition:color .22s ease;
}
body.page-id-448 .header-phone:hover{
  background:var(--navy);
  color:#fff;
  transform:translateY(-1px);
}
body.page-id-448 .header-phone:hover small{ color:rgba(255,255,255,.72); }
body.page-id-448 .header-phone:active{
  background:var(--navy-deep);
  color:#fff;
  transform:translateY(1px);
  transition-duration:.06s;
}
body.page-id-448 .header-phone:active small{ color:rgba(255,255,255,.72); }
body.page-id-448 .header-phone:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  background:var(--navy);
  color:#fff;
}
body.page-id-448 .header-phone:focus-visible small{ color:rgba(255,255,255,.72); }
body.page-id-448 .btn--sm{ padding:12px 22px; font-size:.88rem; }
body.page-id-448 .header-cta .btn{
  transition:background .18s ease, color .18s ease, border-color .18s ease,
             transform .14s ease;
}
body.page-id-448 .header-cta .btn:hover{ transform:translateY(-1px); }
body.page-id-448 .header-cta .btn:active{ transform:translateY(1px); transition-duration:.06s; }
body.page-id-448 .header-cta .btn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
body.page-id-448 .nav-toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:46px; height:46px; padding:0 11px;
  background:var(--navy); border:0; border-radius:2px; cursor:pointer;
}
body.page-id-448 .nav-toggle span{ display:block; height:2px; background:#fff; transition:transform .2s ease, opacity .2s ease; }
body.page-id-448 .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.page-id-448 .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
body.page-id-448 .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
body.page-id-448 .hero{ position:relative; background:var(--navy-900); overflow:hidden; }
body.page-id-448 .hero img.hero-bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.72;
}
body.page-id-448 .hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(13,31,60,.94) 0%, rgba(13,31,60,.76) 40%, rgba(13,31,60,.18) 100%);
}
body.page-id-448 .hero-inner{ position:relative; z-index:2; padding:130px 0 118px; max-width:820px; }
body.page-id-448 .hero .eyebrow{ color:rgba(255,255,255,.72); letter-spacing:.2em; }
body.page-id-448 .hero h1{ color:#fff; margin-bottom:26px; }
body.page-id-448 .hero p{ color:rgba(255,255,255,.88); font-size:1.22rem; line-height:1.72; max-width:60ch; }
body.page-id-448 .hero--page .hero-inner{ padding:96px 0 84px; max-width:840px; }
body.page-id-448 .hero--page h1{ font-size:clamp(2rem,4.2vw,3.1rem); }
body.page-id-448 .trustbar{ background:var(--navy-deep); border-top:1px solid rgba(255,255,255,.1); }
body.page-id-448 .trustbar .row{ gap:0; }
body.page-id-448 .trustbar .tb-item{
  flex:1 1 200px; padding:26px 28px;
  border-right:1px solid rgba(255,255,255,.1);
}
body.page-id-448 .trustbar .tb-item:last-child{ border-right:0; }
body.page-id-448 .tb-value{ font-family:var(--serif); font-size:1.5rem; color:#fff; line-height:1.2; margin-bottom:2px; }
body.page-id-448 .tb-label{ font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.6); }
body.page-id-448 .icon-box{
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:38px 32px; height:100%;
  transition:border-color .2s ease, transform .2s ease;
}
body.page-id-448 .icon-box:hover{ border-color:var(--accent); transform:translateY(-3px); }
body.page-id-448 .icon-box .ib-icon{
  width:46px; height:46px; margin-bottom:22px;
  display:flex; align-items:center; justify-content:center;
  background:var(--stone); border-radius:2px; color:var(--navy);
}
body.page-id-448 .icon-box .ib-icon svg{ width:24px; height:24px; }
body.page-id-448 .icon-box h2, body.page-id-448 .icon-box h3{
  font-size:clamp(1.12rem, 1.8vw, 1.32rem);
  line-height:1.25;
  margin-bottom:10px;
  overflow-wrap:break-word;
  hyphens:auto;
}
body.page-id-448 .icon-box p{ font-size:.97rem; }
body.page-id-448 .icon-box .ib-link{ display:inline-block; margin-top:16px; font-size:.9rem; font-weight:600; color:var(--navy); }
body.page-id-448 .icon-box .ib-link::after{ content:" →"; color:var(--accent); }
body.page-id-448 .section--navy .icon-box, body.page-id-448 .section--deep .icon-box{
  background:transparent; border-color:rgba(255,255,255,.16);
}
body.page-id-448 .section--navy .icon-box:hover, body.page-id-448 .section--deep .icon-box:hover{ border-color:var(--accent-light); }
body.page-id-448 .section--navy .icon-box p, body.page-id-448 .section--deep .icon-box p{ color:rgba(255,255,255,.78); }
body.page-id-448 .section--navy .icon-box .ib-icon, body.page-id-448 .section--deep .icon-box .ib-icon{
  background:rgba(255,255,255,.08); color:var(--accent-light);
}
body.page-id-448 .step{ display:flex; gap:24px; align-items:flex-start; }
body.page-id-448 .step-num{
  font-family:var(--serif); font-size:2.6rem; line-height:1;
  color:var(--accent); flex:none; width:64px;
  
}
body.page-id-448 .step-body h3{ margin-bottom:8px; }
body.page-id-448 .step-body p{ font-size:.97rem; }
body.page-id-448 .flow{ position:relative; padding-left:92px; }
body.page-id-448 .flow-rail{
  position:absolute; left:29px; top:14px; bottom:14px; width:2px;
  background:var(--line); overflow:hidden;
}
body.page-id-448 .flow-rail-fill{
  position:absolute; inset:0; background:var(--navy);
  transform:scaleY(1); transform-origin:top center;
}
body.page-id-448 .flow-steps{ list-style:none; margin:0; padding:0; }
body.page-id-448 .flow-step{ position:relative; padding-bottom:64px; }
body.page-id-448 .flow-step:last-child{ padding-bottom:0; }
body.page-id-448 .flow-marker{
  position:absolute; left:-92px; top:4px;
  width:60px; height:60px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  
  font-family:var(--serif); font-size:1.5rem; line-height:1;
  background:var(--navy); border:2px solid var(--navy); color:#fff;
  z-index:2;
}
body.page-id-448 .flow-card{
  display:flex; flex-wrap:wrap; gap:26px; align-items:center;
  background:#fff; border:1px solid var(--line); border-radius:2px;
  padding:22px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
body.page-id-448 .flow-card:hover{ border-color:var(--navy); box-shadow:0 12px 32px rgba(13,31,60,.08); }
body.page-id-448 .flow-card figure{ flex:0 0 250px; margin:0; overflow:hidden; border-radius:2px; }
body.page-id-448 .flow-card img{ width:100%; height:165px; object-fit:cover; }
body.page-id-448 .flow-text{ flex:1 1 300px; min-width:0; }
body.page-id-448 .flow-text h3{ margin-bottom:8px; }
body.page-id-448 .flow-text p{ font-size:.98rem; margin:0; }
body.page-id-448 .flow-phase{
  font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent); margin:0 0 6px;
}

@media (max-width:760px){
body.page-id-448 .flow{ padding-left:0; }
body.page-id-448 .flow-rail{ display:none; }
body.page-id-448 .flow-marker{
    position:static; width:48px; height:48px; margin-bottom:14px;
    font-size:1.05rem;
  }
body.page-id-448 .flow-step{ padding-bottom:40px; }
body.page-id-448 .flow-card{ padding:18px; }
body.page-id-448 .flow-card figure{ flex:1 1 100%; }
body.page-id-448 }
body.page-id-448 .media-row{ display:flex; flex-wrap:wrap; gap:64px; align-items:center; }
body.page-id-448 .media-row + .media-row{ margin-top:104px; }
body.page-id-448 .media-row .mr-media{ flex:1 1 430px; min-width:0; }
body.page-id-448 .media-row .mr-body{ flex:1 1 430px; min-width:0; }
body.page-id-448 .media-row--flip .mr-media{ order:2; }
body.page-id-448 .media-figure{ position:relative; }
body.page-id-448 .media-figure img{ width:100%; border-radius:2px; }
body.page-id-448 .media-figure figcaption{ margin-top:14px; }
body.page-id-448 .media-figure figcaption, body.page-id-448 .gallery figcaption{
  color:var(--navy);
  font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
}
body.page-id-448 .section--navy .media-figure figcaption, body.page-id-448 .section--deep .media-figure figcaption, body.page-id-448 .section--navy .gallery figcaption, body.page-id-448 .section--deep .gallery figcaption{ color:var(--accent-light); }
body.page-id-448 .check-list{ list-style:none; margin:24px 0 0; padding:0; }
body.page-id-448 .check-list li{
  position:relative; padding-left:34px; margin-bottom:13px; font-size:1rem;
}
body.page-id-448 .check-list li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:16px; height:9px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent);
  transform:rotate(-45deg);
}
body.page-id-448 .section--navy .check-list li, body.page-id-448 .section--deep .check-list li{ color:rgba(255,255,255,.86); }
body.page-id-448 .gallery{ display:flex; flex-wrap:wrap; gap:20px; }
body.page-id-448 .gallery figure{ flex:1 1 300px; margin:0; position:relative; }
body.page-id-448 .gallery img{ width:100%; height:260px; object-fit:cover; border-radius:2px; }
body.page-id-448 .gallery figcaption{ margin-top:12px; }
body.page-id-448 .accordion{ border-top:1px solid var(--line); }
body.page-id-448 .accordion details{ border-bottom:1px solid var(--line); }
body.page-id-448 .accordion summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; justify-content:space-between; gap:24px;
  padding:26px 0;
  font-family:var(--serif); font-size:1.16rem; font-weight:600; color:var(--ink);
}
body.page-id-448 .accordion summary::-webkit-details-marker{ display:none; }
body.page-id-448 .accordion summary::after{
  content:"+"; flex:none; font-family:var(--sans); font-size:1.5rem; font-weight:300;
  color:var(--accent); line-height:1; transition:transform .2s ease;
}
body.page-id-448 .accordion details[open] summary::after{ transform:rotate(45deg); }
body.page-id-448 .accordion .acc-body{ padding:0 0 28px; max-width:74ch; font-size:1rem; }
body.page-id-448 .contact-card{ background:#fff; border:1px solid var(--line); padding:44px 40px; border-radius:2px; }
body.page-id-448 .contact-line{ display:flex; gap:16px; align-items:flex-start; padding:18px 0; border-bottom:1px solid var(--line); }
body.page-id-448 .contact-line:last-child{ border-bottom:0; }
body.page-id-448 .contact-line .cl-icon{ flex:none; width:22px; color:var(--accent); margin-top:3px; }
body.page-id-448 .contact-line .cl-icon svg{ width:20px; height:20px; }
body.page-id-448 .contact-line dt{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:3px; }
body.page-id-448 .contact-line dd{ margin:0; font-size:1.05rem; color:var(--ink); font-weight:500; }
body.page-id-448 .contact-line dd a{ color:var(--ink); }
body.page-id-448 .contact-line dd a:hover{ color:var(--accent); }
body.page-id-448 .phone-block{ background:var(--navy); color:#fff; padding:40px; border-radius:2px; }
body.page-id-448 .phone-block .pb-num{ font-family:var(--serif); font-size:2rem; color:#fff; display:block; margin:8px 0 4px; }
body.page-id-448 .phone-block .pb-num:hover{ color:var(--accent-light); }
body.page-id-448 .form-row{ display:flex; flex-wrap:wrap; gap:20px; }
body.page-id-448 .form-field{ flex:1 1 240px; display:flex; flex-direction:column; margin-bottom:20px; }
body.page-id-448 .form-field label{ font-size:.85rem; font-weight:600; color:var(--ink); margin-bottom:7px; }
body.page-id-448 .form-field input, body.page-id-448 .form-field textarea, body.page-id-448 .form-field select{
  font-family:var(--sans); font-size:1rem; color:var(--ink);
  padding:13px 15px; border:1px solid var(--line); border-radius:2px; background:#fff;
}
body.page-id-448 .form-field input:focus, body.page-id-448 .form-field textarea:focus, body.page-id-448 .form-field select:focus{
  outline:none; border-color:var(--navy);
}
body.page-id-448 .form-note{
  background:#FFF8EC; border-left:3px solid var(--accent);
  padding:16px 20px; font-size:.92rem; margin-bottom:28px;
}
body.page-id-448 .callback-box{
  background:var(--stone);
  border:1px solid var(--line);
  border-left:3px solid var(--navy);
  border-radius:2px;
  padding:20px 22px;
  margin-bottom:24px;
}
body.page-id-448 .callback-toggle{
  display:flex; gap:12px; align-items:flex-start;
  font-size:.95rem; font-weight:400; color:var(--ink);
  cursor:pointer;
}
body.page-id-448 .callback-toggle input{ width:auto; margin-top:5px; flex:none; }
body.page-id-448 .callback-box .form-field label{ font-size:.8rem; }
body.page-id-448 .form-block{ border:0; margin:0 0 42px; padding:0; }
body.page-id-448 .form-block > legend{
  padding:0; margin-bottom:6px;
  font-family:var(--serif); font-size:1.3rem; color:var(--ink);
}
body.page-id-448 .form-block .fb-note{ font-size:.92rem; color:var(--body); margin:0 0 24px; }
body.page-id-448 .cg-block{ border:0; margin:0 0 26px; padding:0; }
body.page-id-448 .cg-legend{
  padding:0; margin-bottom:13px;
  font-size:.85rem; font-weight:600; color:var(--ink);
}
body.page-id-448 .cg-items{ display:flex; flex-wrap:wrap; gap:12px 24px; }
body.page-id-448 .cg-items label{
  flex:1 1 230px; display:flex; gap:11px; align-items:flex-start;
  font-size:.95rem; font-weight:400; color:var(--ink);
  margin-bottom:0; cursor:pointer;
}
body.page-id-448 .cg-items input{ width:auto; flex:none; margin-top:4px; accent-color:var(--navy); }
body.page-id-448 .form-field input[type="file"]{
  padding:10px 12px; font-size:.9rem;
  background:var(--stone); cursor:pointer;
}
body.page-id-448 .form-field input[type="file"]::file-selector-button{
  font-family:var(--sans); font-size:.8rem; font-weight:600; letter-spacing:.04em;
  color:#fff; background:var(--navy);
  border:0; border-radius:2px; padding:9px 15px; margin-right:14px;
  min-width:148px;
  cursor:pointer; transition:background .18s ease;
}
body.page-id-448 .form-field input[type="file"]:hover::file-selector-button{ background:var(--navy-deep); }
body.page-id-448 .field-hint{ font-size:.8rem; color:var(--muted); margin-top:7px; }
body.page-id-448 .req{ color:var(--accent); font-weight:600; }
body.page-id-448 .ph{
  background:#FFF1D0;
  border-bottom:2px dotted #B8863B;
  padding:0 4px;
  font-family:var(--sans);
  color:#8A5D12;
  font-weight:600;
  white-space:nowrap;
}
body.page-id-448 .notice{
  border:1px solid var(--line); border-left:3px solid var(--accent);
  background:var(--stone); padding:30px 34px; border-radius:2px;
}
body.page-id-448 .notice h3{ margin-bottom:10px; }
body.page-id-448 .statement{
  font-family:var(--serif); font-size:clamp(1.4rem,2.8vw,2.05rem);
  line-height:1.42; color:#fff; max-width:24ch;
}
body.page-id-448 .statement--dark{ color:var(--ink); }
body.page-id-448 .place-list{ display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 0; padding:0; list-style:none; }
body.page-id-448 .place-list li{
  border:1px solid rgba(255,255,255,.22); color:#fff;
  padding:10px 20px; font-size:.93rem; border-radius:2px;
  transition:background-color .25s ease, border-color .25s ease,
             color .25s ease, transform .25s cubic-bezier(.22,.7,.3,1);
}
body.page-id-448 .place-list li:hover{
  background:#fff; border-color:#fff; color:var(--navy);
  transform:translateY(-3px);
}
body.page-id-448 .place-list--light li{ border-color:var(--line); color:var(--ink); background:#fff; }
body.page-id-448 .place-list--light li:hover{
  background:var(--navy); border-color:var(--navy); color:#fff;
  transform:translateY(-3px);
}
body.page-id-448 .legal{ max-width:78ch; }
body.page-id-448 .legal h2{ font-size:1.5rem; margin-top:44px; }
body.page-id-448 .legal h3{ font-size:1.12rem; margin-top:30px; }
body.page-id-448 .legal p, body.page-id-448 .legal li{ font-size:.99rem; }
body.page-id-448 .legal ul{ padding-left:22px; }
body.page-id-448 .legal li{ margin-bottom:8px; }
body.page-id-448 .cta-band{ background:var(--navy); color:#fff; }
body.page-id-448 .cta-band .row{ align-items:center; }
body.page-id-448 .cta-band h2{ color:#fff; margin-bottom:12px; }
body.page-id-448 .cta-band p{ color:rgba(255,255,255,.82); }
body.page-id-448 .site-footer{ background:var(--navy-900); color:rgba(255,255,255,.68); padding:80px 0 0; font-size:.95rem; }
body.page-id-448 .site-footer h4{ color:#fff; font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; margin-bottom:20px; }
body.page-id-448 .site-footer a{ color:rgba(255,255,255,.68); }
body.page-id-448 .site-footer a:hover{ color:var(--accent-light); }
body.page-id-448 .site-footer .footer-logo{ height:56px; width:auto; margin-bottom:22px; }
body.page-id-448 .footer-list{ list-style:none; margin:0; padding:0; }
body.page-id-448 .footer-list li{ margin-bottom:11px; }
body.page-id-448 .footer-bottom{
  margin-top:64px; border-top:1px solid rgba(255,255,255,.12);
  padding:26px 0 30px;
  display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between;
  font-size:.87rem; color:rgba(255,255,255,.5);
}
body.page-id-448 .footer-bottom nav{ display:flex; gap:22px; flex-wrap:wrap; }



@keyframes rb-rise {
  from { opacity:0; transform:translateY(22px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes rb-settle {
  from { transform:scale(1.10); }
  to   { transform:scale(1); }
}
@keyframes rb-fade {
  from { opacity:0; }
  to   { opacity:1; }
}
body.page-id-448 .hero img.hero-bg{
  animation:rb-settle 16s cubic-bezier(.16,.68,.34,1) both;
  will-change:transform;
}
body.page-id-448 .hero-inner > *{
  opacity:0;
  animation:rb-rise .85s cubic-bezier(.22,.7,.3,1) both;
}
body.page-id-448 .hero-inner > .eyebrow{ animation-delay:.20s; }
body.page-id-448 .hero-inner > h1{ animation-delay:.34s; }
body.page-id-448 .hero-inner > p{ animation-delay:.50s; }
body.page-id-448 .hero-inner > .btn-group{ animation-delay:.66s; }
body.page-id-448 .trustbar .tb-item{
  opacity:0;
  animation:rb-rise .7s cubic-bezier(.22,.7,.3,1) both;
}
body.page-id-448 .trustbar .tb-item:nth-child(1){ animation-delay:.80s; }
body.page-id-448 .trustbar .tb-item:nth-child(2){ animation-delay:.90s; }
body.page-id-448 .trustbar .tb-item:nth-child(3){ animation-delay:1.00s; }
body.page-id-448 .trustbar .tb-item:nth-child(4){ animation-delay:1.10s; }
body.page-id-448 .site-header{ animation:rb-fade .6s ease both; }




@keyframes flow-fill   { from { transform:scaleY(0); } to { transform:scaleY(1); } }
@keyframes flow-marker { from { background:#fff; border-color:var(--line); color:var(--muted); }
                         to   { background:var(--navy); border-color:var(--navy); color:#fff; } }
@keyframes flow-card   { from { opacity:0; transform:translateY(26px); }
                         to   { opacity:1; transform:translateY(0); } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
body.page-id-448 .flow{ timeline-scope:--flow; }
body.page-id-448 .flow-steps{ view-timeline-name:--flow; }
body.page-id-448 .flow-rail-fill{
      animation:flow-fill linear both;
      animation-timeline:--flow;
      animation-range:cover 12% cover 88%;
    }
body.page-id-448 .flow-marker{
      animation:flow-marker linear both;
      animation-timeline:view();
      animation-range:entry 40px entry 260px;
    }
body.page-id-448 .flow-card{
      animation:flow-card linear both;
      animation-timeline:view();
      animation-range:entry 0px entry 300px;
    }
body.page-id-448 }
}


.media-figure img, body.page-id-448 .gallery img{ transition:transform .5s cubic-bezier(.22,.7,.3,1); }
body.page-id-448 .media-figure:hover img, body.page-id-448 .gallery figure:hover img{ transform:scale(1.03); }
body.page-id-448 .media-figure, body.page-id-448 .gallery figure{ overflow:hidden; border-radius:2px; }


@media (prefers-reduced-motion: reduce){
body.page-id-448 .hero img.hero-bg, body.page-id-448 .hero-inner > *, body.page-id-448 .trustbar .tb-item, body.page-id-448 .site-header{ animation:none !important; opacity:1 !important; transform:none !important; }
body.page-id-448 .place-list li{ transition:none; }
body.page-id-448 .media-figure img, body.page-id-448 .gallery img{ transition:none; }
body.page-id-448 .media-figure:hover img, body.page-id-448 .gallery figure:hover img{ transform:none; }
body.page-id-448 .header-phone:hover, body.page-id-448 .header-phone:active, body.page-id-448 .header-cta .btn:hover, body.page-id-448 .header-cta .btn:active{ transform:none; }
body.page-id-448{ scroll-behavior:auto; }
body.page-id-448 }
body.page-id-448 .skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:12px 20px;
}
body.page-id-448 .skip-link:focus{ left:0; color:#fff; }



@media (max-width:1240px){
body.page-id-448 .nav{ gap:18px; }
body.page-id-448 .nav a{ font-size:.85rem; }
}
@media (max-width:1140px){
body.page-id-448 .header-phone{ display:none; }
}

@media (max-width:940px){
body.page-id-448 .section{ padding:72px 0; }
body.page-id-448 .nav-toggle{ display:flex; }
body.page-id-448 .nav{
    display:none;
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:#fff; border-bottom:1px solid var(--line);
    padding:8px 0 20px;
    box-shadow:0 18px 40px rgba(13,31,60,.12);
    max-height:calc(100vh - 84px); overflow-y:auto;
  }
body.page-id-448 .nav.is-open{ display:flex; }
body.page-id-448 .nav > a, body.page-id-448 .nav-item > a{ display:block; padding:15px var(--pad); font-size:1rem; border-bottom:1px solid var(--line); }
body.page-id-448 .nav > a::after, body.page-id-448 .nav-item > a::after{ display:none; }
body.page-id-448 .nav > a[aria-current="page"], body.page-id-448 .nav-item > a[aria-current="page"]{ background:var(--stone); }
body.page-id-448 .nav-item{
    display:flex; flex-wrap:wrap; align-items:stretch;
    align-self:auto; position:static; padding-right:0;
  }
body.page-id-448 .nav-item > a{ flex:1 1 auto; min-width:0; }
body.page-id-448 .nav-item::after{ display:none; }
body.page-id-448 .subnav{
    display:none;
    position:static; opacity:1; visibility:visible; transform:none;
    flex:1 0 100%;            
    min-width:0; background:var(--stone);
    border:0; box-shadow:none; padding:0;
  }
body.page-id-448 .nav-item.is-expanded > .subnav{ display:block; }
body.page-id-448 .subnav-toggle{
    display:flex; align-items:center; justify-content:center;
    flex:none; width:58px;
    padding:0; border:0; border-bottom:1px solid var(--line);
    background:none; color:var(--navy); cursor:pointer;
  }
body.page-id-448 .subnav-toggle svg{
    width:18px; height:18px;
    transition:transform .2s ease;
  }
body.page-id-448 .nav-item.is-expanded > .subnav-toggle svg{ transform:rotate(180deg); }
body.page-id-448 .subnav-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
body.page-id-448 .subnav a{
    padding:13px var(--pad) 13px calc(var(--pad) + 18px);
    font-size:.94rem;
    border-left:0;
    border-bottom:1px solid var(--line);
  }
body.page-id-448 .subnav a[aria-current="page"]{ background:#fff; }
body.page-id-448 .nav .nav-cta{ display:flex; flex-direction:column; gap:10px; margin:18px var(--pad) 0; }
body.page-id-448 .nav .nav-cta .btn{ width:100%; }
body.page-id-448 .header-cta{ display:none; }
body.page-id-448 .header-inner{ position:relative; min-height:78px; }
body.page-id-448 .brand img{ height:50px; }
body.page-id-448 .hero-inner{ padding:88px 0 76px; }
body.page-id-448 .media-row{ gap:40px; }
body.page-id-448 .media-row + .media-row{ margin-top:72px; }
body.page-id-448 .media-row--flip .mr-media{ order:0; }
body.page-id-448 .row{ gap:32px; }
body.page-id-448 .row > .col-third, body.page-id-448 .row--tight > .col-third, body.page-id-448 .row--wide > .col-third{ max-width:none; }
body.page-id-448 .trustbar .tb-item{ flex:1 1 50%; border-bottom:1px solid rgba(255,255,255,.1); }
body.page-id-448 .trustbar .tb-item:nth-child(2n){ border-right:0; }
body.page-id-448 .gallery img{ height:220px; }
}

@media (max-width:620px){
body.page-id-448{ font-size:16px; }
body.page-id-448 .section{ padding:58px 0; }
body.page-id-448 .section--tight{ padding:44px 0; }
body.page-id-448 .hero-inner{ padding:66px 0 58px; }
body.page-id-448 .hero p{ font-size:1.08rem; }
body.page-id-448 .lead{ font-size:1.08rem; }
body.page-id-448 .btn{ width:100%; padding:16px 24px; }
body.page-id-448 .btn-group{ gap:12px; }
body.page-id-448 .contact-card, body.page-id-448 .phone-block{ padding:30px 24px; }
body.page-id-448 .icon-box{ padding:30px 26px; }
body.page-id-448 .step{ gap:18px; }
body.page-id-448 .step-num{ width:48px; font-size:2.1rem; }
body.page-id-448 .trustbar .tb-item{ flex:1 1 100%; border-right:0; padding:20px 24px; }
body.page-id-448 .gallery figure{ flex:1 1 100%; }
body.page-id-448 .footer-bottom{ flex-direction:column; gap:14px; }
}


@media print{
body.page-id-448 .site-header, body.page-id-448 .nav-toggle, body.page-id-448 .cta-band, body.page-id-448 .btn{ display:none !important; }
body.page-id-448{ color:#000; font-size:12pt; }
body.page-id-448 .hero::after{ display:none; }
}

/* === RuhrBau: Kopfzeile bleibt stehen (entspricht .site-header im Entwurf) === */
.xpro-theme-builder-header-nav{ position:sticky; top:0; z-index:100; }
.admin-bar .xpro-theme-builder-header-nav{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .xpro-theme-builder-header-nav{ top:46px; } }
html{ scroll-behavior:smooth; scroll-padding-top:92px; }


/* === RuhrBau: Menue einzeilig halten === */
#rb-header .xpro-elementor-horizontal-navbar-nav{ flex-wrap:nowrap; }
#rb-header .xpro-elementor-horizontal-navbar-nav > li > a{ white-space:nowrap; }
#rb-header .elementor-widget-xpro-horizontal-menu{ min-width:0; }

/* === RuhrBau: Aufklappmenue - 1:1 nach Entwurf (.subnav) === */
#rb-header .xpro-elementor-dropdown-menu{
  background:#FFFFFF;
  border:1px solid #E2E6EC;
  border-top:2px solid #1B3A6B;
  border-radius:0;
  box-shadow:0 20px 44px rgba(13,31,60,.16);
  padding:8px 0;
  z-index:120;
}
#rb-header .xpro-elementor-horizontal-navbar-nav > li > .xpro-elementor-dropdown-menu:after{ display:none; }
#rb-header .xpro-elementor-dropdown-menu > li > a{
  padding:11px 24px;
  font-size:14.08px; font-weight:500; color:#4A5361;
  border-left:2px solid transparent;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
#rb-header .xpro-elementor-dropdown-menu > li:hover > a{ background:#F4F6F8; color:#1B3A6B; border-left-color:#1B3A6B; }
#rb-header .xpro-elementor-dropdown-menu > li.current-menu-item > a{ background:#F4F6F8; color:#1B3A6B; font-weight:600; border-left-color:#1B3A6B; }
@media (min-width:1025px){
  /* Kopfzeile 80px, Menuelink 37,6px, mittig -> 21px bis zur Unterkante.
     Dort sitzt der Navy-Balken im Entwurf, buendig mit der Trennlinie der Kopfzeile. */
  #rb-header .xpro-elementor-dropdown-menu{ width:284px !important; min-width:0; margin-top:21px; left:-9px; }
  #rb-header .xpro-elementor-dropdown-menu > li > a{ white-space:nowrap; border-bottom:0; }
  /* Bruecke ueber die 21px, damit das Menue beim Hinuntergehen offen bleibt */
  #rb-header .xpro-elementor-dropdown-menu::before{ content:""; position:absolute; left:0; right:0; top:-23px; height:23px; }
}

/* === RuhrBau: Kopfzeile - Aufbau nach Hochtief-Vorbild (17.09.2026) ===
   Logo links, Menue daneben, rechts eine ruhige Reihe aus Telefon und Anfrage
   mit Trennstrichen 1 x 24 px. Wird es eng, fallen zuerst die Texte weg, die
   Symbole bleiben. Unter 1025 px schaltet Xpro das Menue auf den Knopf um;
   der steht dann als "Menue" ganz rechts. */

#rb-header-logo a, #rb-header-logo img{ display:block; height:auto; }

/* Telefon und Anfrage als Textlink mit Symbol */
#rb-header-tel, #rb-header-anfrage, #rb-header-anfrage-link, #rb-header-menu{ position:relative; }
#rb-header-tel .elementor-icon-list-item > a,
#rb-header-anfrage-link .elementor-icon-list-item > a{ display:inline-flex; align-items:center; min-height:44px; text-decoration:none !important; border-bottom:0 !important; }
#rb-header-tel .elementor-icon-list-text,
#rb-header-anfrage-link .elementor-icon-list-text{ white-space:nowrap; }
#rb-header-tel a:focus-visible,
#rb-header-anfrage-link a:focus-visible{ outline:2px solid #3D6098; outline-offset:4px; }
#rb-header-tel{ padding-right:20px; }
#rb-header-anfrage, #rb-header-anfrage-link{ padding-left:20px; }

/* Trennstrich links vor dem Element */
#rb-header-anfrage::before,
#rb-header-anfrage-link::before,
#rb-header-menu::before{ content:""; position:absolute; left:0; top:50%; width:1px; height:24px; margin-top:-12px; background:#E2E6EC; }

/* Nur sichtbar fuer Screenreader */
@media (min-width:1025px) and (max-width:1199px), (max-width:767px){
  #rb-header-tel .elementor-icon-list-text{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0 !important; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  #rb-header-tel .elementor-icon-list-item > a{ min-width:44px; justify-content:center; }
}

/* === Desktop === */
@media (min-width:1025px){
  #rb-header-menu::before{ display:none; }
  #rb-header .xpro-elementor-horizontal-navbar-nav > li > a{ margin-left:6px; margin-right:6px; }
}
/* Schmaler Desktop: Nummer wird zum Symbol, Menue rueckt enger */
@media (min-width:1025px) and (max-width:1199px){
  #rb-header .xpro-elementor-horizontal-navbar-nav > li > a{ margin-left:3px; margin-right:3px; }
  #rb-header-tel{ padding-right:8px; }
}

/* === Tablet und Handy: Telefon | Anfrage | Menue === */
@media (max-width:1024px){
  #rb-header-tel{ margin-left:auto; }
  #rb-header-anfrage-link{ padding-right:20px; }
  #rb-header-menu{ padding-left:20px; }
  #rb-header .xpro-elementor-horizontal-menu-toggler{
    position:relative; display:inline-flex !important; align-items:center; justify-content:center; gap:10px;
    width:auto !important; height:44px !important; padding:0 !important; margin:0 !important;
    background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important;
    color:#1B3A6B !important; font-family:"Inter",sans-serif; font-size:14.4px; font-weight:600; line-height:1; cursor:pointer;
    transition:color .18s ease;
  }
  #rb-header .xpro-elementor-horizontal-menu-toggler i,
  #rb-header .xpro-elementor-horizontal-menu-toggler svg{ display:none !important; }
  #rb-header .xpro-elementor-horizontal-menu-toggler::before{
    content:""; display:block; width:22px; height:14px;
    background:
      linear-gradient(currentColor,currentColor) 0 0 / 100% 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 6px / 100% 2px no-repeat,
      linear-gradient(currentColor,currentColor) 0 12px / 100% 2px no-repeat;
  }
  #rb-header .xpro-elementor-horizontal-menu-toggler::after{ content:"Men\00FC"; }
  #rb-header .xpro-elementor-horizontal-menu-toggler:hover{ color:#3D6098 !important; }
  #rb-header .xpro-elementor-horizontal-menu-toggler:focus-visible{ outline:2px solid #3D6098; outline-offset:4px; }
  /* Seitenmenue: geschlossen auch fuer Tastatur und Screenreader weg, Ausblenden bleibt animiert */
  #rb-header .xpro-elementor-horizontal-navbar-wrapper{ visibility:hidden; transition:transform .5s, visibility 0s linear .5s; }
  #rb-header .xpro-elementor-horizontal-navbar-wrapper.active{ visibility:visible; transition:transform .5s; }
  /* Schliessen-Knopf passend zum Menue-Knopf: ohne Flaeche, Navy */
  #rb-header .xpro-elementor-horizontal-menu-close{ width:44px !important; height:44px !important; padding:0 !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:#1B3A6B !important; font-size:22px !important; }
  #rb-header .xpro-elementor-horizontal-menu-close:hover{ color:#3D6098 !important; }
  #rb-header .xpro-elementor-horizontal-menu-close:focus-visible{ outline:2px solid #3D6098; outline-offset:2px; }
}

/* === Handy: nur Symbole === */
@media (max-width:767px){
  #rb-header-tel{ padding-right:4px; }
  #rb-header-anfrage-link{ padding-left:4px; padding-right:4px; }
  #rb-header-menu{ padding-left:4px; }
  #rb-header-anfrage-link .elementor-icon-list-text{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0 !important; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
  #rb-header-anfrage-link .elementor-icon-list-item > a{ min-width:44px; justify-content:center; }
  #rb-header .xpro-elementor-horizontal-menu-toggler{ min-width:44px; }
  #rb-header .xpro-elementor-horizontal-menu-toggler::after{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
}

/* === RuhrBau: Anfrage-Knopf === */
#rb-header .elementor-button{ transition:background-color .18s ease, color .18s ease, border-color .18s ease, transform .14s ease; }
#rb-header .elementor-button:hover{ transform:translateY(-1px); }
#rb-header .elementor-button:active{ transform:translateY(1px); transition-duration:.06s; }


/* === RuhrBau: Kacheln: Abstaende wie im Entwurf (.icon-box) === */
[id^="rb-card-"] .elementor-widget-text-editor p:last-child{ margin-bottom:0; }
[id^="rb-card-"] h3.elementor-heading-title{ margin-bottom:10px; }

/* === RuhrBau: Kacheln - Schweben beim Ueberfahren === */
[id^="rb-card-"]{ transition:border-color .2s ease, transform .2s ease; }
[id^="rb-card-"]:hover{ border-color:#3D6098; transform:translateY(-3px); }
.rb-dunkel [id^="rb-card-"]:hover{ border-color:#9FB8DE; }


/* === RuhrBau: Ortsmarken - Zustand beim Ueberfahren === */
[id^="rb-ort-"],[id^="rb-chip-"]{ transition:background-color .25s ease, border-color .25s ease, color .25s ease, transform .25s cubic-bezier(.22,.7,.3,1); }
[id^="rb-ort-"]:hover,[id^="rb-chip-"]:hover{ background-color:#FFFFFF; border-color:#FFFFFF; transform:translateY(-3px); }
.rb-hell [id^="rb-chip-"]:hover{ background-color:#1B3A6B; border-color:#1B3A6B; }
/* Die Beschriftung traegt eine eigene Elementor-Regel mit vier Klassen
   (weisse Schrift). Ohne !important gewinnt sie, und die Kachel waere beim
   Ueberfahren weiss auf weiss — also leer. */
[id^="rb-ort-"]:hover .elementor-heading-title,[id^="rb-chip-"]:hover .elementor-heading-title{ color:#1B3A6B !important; }


/* === RuhrBau: Formulare (Forminator) nach Entwurf .form-field === */
.forminator-ui.forminator-custom-form .forminator-label{ font-family:"Inter",sans-serif !important; font-size:13.6px !important; font-weight:600 !important; color:#14181E !important; margin-bottom:7px !important; }
.forminator-ui.forminator-custom-form .forminator-required{ color:#3D6098 !important; font-weight:600 !important; }
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea,
.forminator-ui.forminator-custom-form .forminator-select2 .select2-selection{ font-family:"Inter",sans-serif !important; font-size:16px !important; color:#14181E !important; padding:13px 15px !important; border:1px solid #E2E6EC !important; border-radius:2px !important; background:#FFFFFF !important; box-shadow:none !important; height:auto !important; }
.forminator-ui.forminator-custom-form .forminator-input:focus,
.forminator-ui.forminator-custom-form .forminator-textarea:focus,
.forminator-ui.forminator-custom-form .forminator-select2 .select2-selection:focus{ outline:none !important; border-color:#1B3A6B !important; box-shadow:none !important; }
.forminator-ui.forminator-custom-form .forminator-description{ font-family:"Inter",sans-serif !important; font-size:12.8px !important; color:#79828F !important; margin-top:7px !important; }
.forminator-ui.forminator-custom-form .forminator-button-submit{ font-family:"Inter",sans-serif !important; font-size:15.2px !important; font-weight:600 !important; background:#1B3A6B !important; color:#FFFFFF !important; border:2px solid #1B3A6B !important; border-radius:2px !important; padding:15px 30px !important; box-shadow:none !important; transition:background-color .18s ease, border-color .18s ease, transform .14s ease; }
.forminator-ui.forminator-custom-form .forminator-button-submit:hover{ background:#12294D !important; border-color:#12294D !important; transform:translateY(-1px); }
.forminator-ui.forminator-custom-form .forminator-button-submit:active{ transform:translateY(1px); transition-duration:.06s; }
/* Datei-Uploads: Knopf in Navy wie ::file-selector-button im Entwurf */
.forminator-ui.forminator-custom-form .forminator-button-upload{ font-family:"Inter",sans-serif !important; font-size:12.8px !important; font-weight:600 !important; letter-spacing:.04em !important; background:#1B3A6B !important; color:#FFFFFF !important; border:0 !important; border-radius:2px !important; padding:9px 15px !important; min-width:148px; }
.forminator-ui.forminator-custom-form .forminator-button-upload:hover{ background:#12294D !important; }
.forminator-ui.forminator-custom-form .forminator-file-upload{ background:#F4F6F8 !important; border:1px solid #E2E6EC !important; border-radius:2px !important; }
/* Haken und Zustimmung */
.forminator-ui.forminator-custom-form .forminator-checkbox-box{ border:1px solid #E2E6EC !important; border-radius:2px !important; }
.forminator-ui.forminator-custom-form input:checked + .forminator-checkbox-box{ background:#1B3A6B !important; border-color:#1B3A6B !important; }
/* Der Haken ist ein Zeichen aus Forminators Symbolschrift (::before) und erbt
   seine Farbe. Auf der Navy-Flaeche muss er weiss sein. */
.forminator-ui.forminator-custom-form input:checked + .forminator-checkbox-box,
.forminator-ui.forminator-custom-form input:checked + .forminator-checkbox-box::before{ color:#FFFFFF !important; }
.forminator-ui.forminator-custom-form .forminator-checkbox{ font-family:"Inter",sans-serif !important; font-size:15.2px !important; color:#14181E !important; }
/* Fehlermeldungen in Markenfarben statt Plugin-Rot */
.forminator-ui.forminator-custom-form .forminator-error-message{ font-family:"Inter",sans-serif !important; font-size:12.8px !important; }

/* Vorspann im Titelbereich ohne Absatzabstand (wie .hero p im Entwurf) */
[data-elementor-type="wp-page"] > .e-con:first-child .elementor-widget-text-editor p:last-child{ margin-bottom:0; }

/* Kacheln auf hellem Grund: beim Ueberfahren Navy fuellen (.place-list--light).
   -g = Gewerke auf der Leistungsuebersicht, -h = Orte auf Ueber uns.
   Ohne das "h" greift die allgemeine Regel weiter oben: weisse Fuellung, auf weissem Grund also unsichtbar. */
[id^="rb-chip-g"]:hover,[id^="rb-chip-h"]:hover{ background-color:#1B3A6B !important; border-color:#1B3A6B !important; }
[id^="rb-chip-g"]:hover .elementor-heading-title,[id^="rb-chip-h"]:hover .elementor-heading-title{ color:#FFFFFF !important; }

/* === RuhrBau: Formulare - Abschnitte, Hinweise, Rueckruf-Box wie im Entwurf (17.09.2026) ===
   Werte aus der statischen Fassung: .form-block > legend, .fb-note, .callback-box, .cg-items. */
.forminator-ui.forminator-custom-form .rb-form-legend{ font-family:"Source Serif 4",Georgia,serif; font-size:20.8px; font-weight:400; line-height:1.75; color:#14181E; margin:0 0 6px; }
.forminator-ui.forminator-custom-form .rb-form-legend--weiter{ margin-top:18px; }
.forminator-ui.forminator-custom-form .rb-form-hinweis{ font-family:"Inter",sans-serif; font-size:14.72px; line-height:1.75; color:#4A5361; margin:0; }
/* Rueckruf-Box: Haken und Wunschzeit stehen in derselben Formularreihe */
.forminator-ui.forminator-custom-form .forminator-row:has(> #checkbox-1):has(> #select-3){
  background:#F4F6F8; border:1px solid #E2E6EC; border-left:3px solid #1B3A6B; border-radius:2px;
  padding:20px 22px 4px; margin-left:0; margin-right:0;
}
.forminator-ui.forminator-custom-form .forminator-row:has(> #checkbox-1):has(> #select-3){ flex-wrap:wrap; row-gap:16px; }
/* Absendeknopf wie im Entwurf ohne erzwungene Grossbuchstaben am Wortanfang */
.forminator-ui.forminator-custom-form .forminator-button-submit,
.forminator-ui.forminator-custom-form .forminator-button-upload{ text-transform:none !important; }
.forminator-ui.forminator-custom-form .forminator-row:has(> #checkbox-1):has(> #select-3) > .forminator-col{ flex:1 0 100%; max-width:100%; padding-left:0; padding-right:0; }
.forminator-ui.forminator-custom-form .forminator-row:has(> #checkbox-1):has(> #select-3) .forminator-checkbox-label{ font-size:15.2px !important; color:#14181E !important; }
.forminator-ui.forminator-custom-form .forminator-row:has(> #checkbox-1):has(> #select-3) #select-3 .forminator-label{ font-size:12.8px !important; }
/* Auswahlfelder nie breiter als ihre Spalte (Handy: Rueckruf-Box lief 5 px ueber) */
.forminator-ui.forminator-custom-form .select2-container,
.forminator-ui.forminator-custom-form .forminator-select,
.forminator-ui.forminator-custom-form .forminator-input,
.forminator-ui.forminator-custom-form .forminator-textarea{ max-width:100% !important; box-sizing:border-box !important; }
@media (max-width:767px){
  .forminator-ui.forminator-custom-form .forminator-row:has(> #checkbox-1):has(> #select-3){ padding:16px 14px 4px; }
}

/* Gewerke der Nachunternehmer zweispaltig */
.forminator-custom-form-398 #checkbox-1 > .forminator-field{ display:flex; flex-wrap:wrap; gap:12px 24px; }
.forminator-custom-form-398 #checkbox-1 > .forminator-field > .forminator-label{ flex:1 0 100%; margin-bottom:1px !important; }
.forminator-custom-form-398 #checkbox-1 > .forminator-field > .forminator-checkbox{ flex:1 1 230px; margin:0 !important; }

/* === RuhrBau: Ablauf, fuenf Schritte wie im Entwurf (.flow) - 17.09.2026 ===
   Senkrechte Linie hinter den Marken, Schweben der Karten und die
   scrollgesteuerten Animationen aus der statischen Fassung. */
#rb-ablauf-schritte{ position:relative; }
#rb-ablauf-schritte::before,
#rb-ablauf-schritte::after{ content:""; position:absolute; left:29px; top:14px; bottom:14px; width:2px; }
#rb-ablauf-schritte::before{ background:#E2E6EC; }
#rb-ablauf-schritte::after{ background:#1B3A6B; transform-origin:top center; }
[id^="rb-ablauf-karte-"]{ transition:border-color .25s ease, box-shadow .25s ease; }
[id^="rb-ablauf-karte-"]:hover{ border-color:#1B3A6B !important; box-shadow:0 12px 32px rgba(13,31,60,.08); }
[id^="rb-ablauf-bild-"] img{ transition:transform .5s cubic-bezier(.22,.7,.3,1); }
[id^="rb-ablauf-bild-"]{ overflow:hidden; border-radius:2px; }
[id^="rb-ablauf-karte-"]:hover [id^="rb-ablauf-bild-"] img{ transform:scale(1.03); }

@keyframes rb-flow-fill{ from{ transform:scaleY(0); } to{ transform:scaleY(1); } }
@keyframes rb-flow-marke{ from{ background-color:#FFFFFF; border-color:#E2E6EC; } to{ background-color:#1B3A6B; border-color:#1B3A6B; } }
@keyframes rb-flow-karte{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
@keyframes rb-flow-ziffer{ from{ color:#79828F; } to{ color:#FFFFFF; } }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    #rb-ablauf-schritte{ timeline-scope:--rb-flow; }
    #rb-ablauf-liste{ view-timeline-name:--rb-flow; }
    #rb-ablauf-schritte::after{ animation:rb-flow-fill linear both; animation-timeline:--rb-flow; animation-range:cover 12% cover 88%; }
    [id^="rb-ablauf-marke-"]{ animation:rb-flow-marke linear both; animation-timeline:view(); animation-range:entry 40px entry 260px; }
    [id^="rb-ablauf-marke-"] .elementor-heading-title{ animation:rb-flow-ziffer linear both; animation-timeline:view(); animation-range:entry 40px entry 260px; }
    /* Karten: einmaliges Einblenden ueber rb-motion.js statt scrollgekoppelt (18.10.2026) */
  }
}

@media (max-width:767px){
  #rb-ablauf-schritte::before, #rb-ablauf-schritte::after{ display:none; }
}

/* === RuhrBau: Kacheln auf volle Spaltenhoehe (lokal .icon-box{height:100%}) === */
/* Die Reihe streckt die Spalten, die weisse Kachel darin wuchs aber nicht mit:
   fuer verschachtelte Container schreibt Elementor kein flex-grow. */
body .e-con > [id^='rb-card-']{ flex-grow:1; }

/* === RuhrBau: Knoepfe wie im Entwurf (.btn) === */
/* Elementor reicht die globale Schrift "Auszeichnung" des Kits an jeden Knopf
   durch - Versalien mit 1,6px Sperrung. Lokal ist kein Knopf in Versalien.
   Astra setzt zusaetzlich line-height:1, dadurch kleben die Zeilen langer,
   umbrechender Beschriftungen aneinander. */
body .elementor-widget-button .elementor-button{
  text-transform:none;
  letter-spacing:.02em;
  line-height:1.4;
}

/* === RuhrBau: Datumsfeld "Gewuenschte Fertigstellung" (Formular 397) === */
/* Forminator setzt die Beschreibung ueber das Eingabefeld. Lokal stehen
   Hinweise darunter, deshalb hier die Reihenfolge drehen. */
#date-1 .forminator-field{ display:flex; flex-direction:column; }
#date-1 .forminator-label{ order:0; }
#date-1 .forminator-input-with-icon{ order:1; }
#date-1 .forminator-description{ order:3; margin-top:6px; }
/* Das Kalendersymbol liegt absolut bei left:10px und ist 16px breit. */
#date-1 input.forminator-datepicker{ padding-left:38px !important; }

/* Fest sichtbarer Kalender unter dem Feld (rb-formular-datum.php). */
#date-1 .rb-datum-wochentag{
  order:2; margin:8px 0 0;
  font-family:"Inter", sans-serif; font-size:14.4px; font-weight:600; color:#1B3A6B;
}
#date-1 .rb-datum-kalender{ order:4; margin-top:12px; }
#date-1 .rb-datum-kalender .ui-datepicker{
  width:100%; padding:8px;
  background:#FFFFFF; border:1px solid #E2E6EC; border-radius:2px;
  font-family:"Inter", sans-serif; font-size:13px;
}
#date-1 .rb-datum-kalender .ui-datepicker-calendar{ width:100%; border-collapse:collapse; }
#date-1 .rb-datum-kalender .ui-datepicker-calendar th{
  font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:#79828F; padding:2px 0 4px;
}
#date-1 .rb-datum-kalender .ui-datepicker-calendar td{ padding:1px; text-align:center; }
#date-1 .rb-datum-kalender .ui-datepicker-calendar td a,
#date-1 .rb-datum-kalender .ui-datepicker-calendar td span{
  display:block; padding:5px 0; line-height:1.25; border-radius:2px;
  color:#14181E; text-decoration:none; border:1px solid transparent;
}
#date-1 .rb-datum-kalender .ui-datepicker-calendar td a:hover{ background:#F4F6F8; }
/* Heute: nur farbig umrandet. Gewaehlter Tag: Navy gefuellt. */
#date-1 .rb-datum-kalender .ui-datepicker-calendar td.ui-datepicker-today a{ color:#3D6098; font-weight:600; border-color:#3D6098; }
#date-1 .rb-datum-kalender.rb-gewaehlt .ui-datepicker-current-day a{
  background:#1B3A6B !important; border-color:#1B3A6B !important; color:#FFFFFF !important; font-weight:600;
}
#date-1 .rb-datum-kalender .ui-datepicker-calendar td span{ color:#B9C0C9; }
#date-1 .rb-datum-kalender .ui-datepicker-header{ display:flex; align-items:center; gap:6px; padding:0 0 6px; }
#date-1 .rb-datum-kalender .ui-datepicker-title{ display:flex; gap:6px; flex:1; order:1; }
#date-1 .rb-datum-kalender .ui-datepicker-title select{
  flex:1; padding:3px 5px; border:1px solid #E2E6EC; border-radius:2px;
  font-family:"Inter", sans-serif; font-size:12.5px; color:#14181E; background:#FFFFFF;
}
#date-1 .rb-datum-kalender .ui-datepicker-prev{ order:0; }
#date-1 .rb-datum-kalender .ui-datepicker-next{ order:2; }
#date-1 .rb-datum-kalender .ui-datepicker-prev,
#date-1 .rb-datum-kalender .ui-datepicker-next{
  width:26px; height:26px; cursor:pointer; position:static;
  background:#1B3A6B; border-radius:2px; text-indent:-9999px; overflow:hidden; flex:none;
}
#date-1 .rb-datum-kalender .ui-datepicker-prev:hover,
#date-1 .rb-datum-kalender .ui-datepicker-next:hover{ background:#12294D; }

/* === RuhrBau: Auftauchen beim Scrollen === */
/* 18.10.2026: Das scrollgekoppelte Auftauchen (animation-timeline: view()) wurde entfernt.
   Es band Deckkraft und Lage jedes Abschnitts an die Scrollposition: Inhalte hingen der
   Bewegung hinterher und blendeten beim Hochscrollen wieder aus. Ersatz: einmaliges, kurzes
   Einblenden beim ersten Sichtbarwerden - siehe uploads/ruhrbau/motion/rb-motion.js
   (Funktion auftauchen) und rb-motion.css (.rb-auf). Sicherung des alten Blocks:
   Option rb_sicherung_custom_css_20261018_scroll. */

/* === RuhrBau: Telefonnummer auf /kontakt/ als Karte === */
/* Vorbild ist die Kontaktkarte der Wartungsseite (.karte--hell):
   weisse Flaeche, Telefonsymbol, Beschriftung ueber der Nummer.
   Das Markup bleibt unveraendert — die Nummer ist schon ein tel:-Link
   in einem Heading-Widget. Symbol und Beschriftung kommen aus CSS. */
#rb-kontakt-nummer .elementor-heading-title{
  display:inline-flex; align-items:center; gap:16px; min-width:260px;
  background:#FFFFFF; border:2px solid #FFFFFF; border-radius:2px;
  padding:16px 24px 16px 18px;
  transition:background-color .18s ease, border-color .18s ease, transform .14s ease;
}
#rb-kontakt-nummer .elementor-heading-title::before{
  content:""; width:22px; height:22px; flex:0 0 auto;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%231B3A6B%27%20stroke-width%3D%271.8%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M22%2016.92v3a2%202%200%200%201-2.18%202%2019.8%2019.8%200%200%201-8.63-3.07%2019.5%2019.5%200%200%201-6-6A19.8%2019.8%200%200%201%202.1%204.18%202%202%200%200%201%204.1%202h3a2%202%200%200%201%202%201.72c.13.96.36%201.9.7%202.81a2%202%200%200%201-.45%202.11L8.1%209.9a16%2016%200%200%200%206%206l1.27-1.27a2%202%200%200%201%202.11-.45c.91.34%201.85.57%202.81.7A2%202%200%200%201%2022%2016.92z%27%2F%3E%3C%2Fsvg%3E") center/contain no-repeat;
}
#rb-kontakt-nummer a{
  display:flex; flex-direction:column; text-decoration:none;
  font-family:"Inter", sans-serif; font-size:1.05rem; font-weight:600; line-height:1.35;
  color:#1B3A6B;
}
#rb-kontakt-nummer a::before{
  content:"Telefon";
  font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  line-height:1.3; color:#5A6B85;
}
#rb-kontakt-nummer .elementor-heading-title:hover{
  background:#F4F6F8; border-color:#F4F6F8; transform:translateY(-1px);
}
#rb-kontakt-nummer .elementor-heading-title:active{ transform:translateY(1px); transition-duration:.06s; }
@media (prefers-reduced-motion: reduce){
  #rb-kontakt-nummer .elementor-heading-title,
  #rb-kontakt-nummer .elementor-heading-title:hover,
  #rb-kontakt-nummer .elementor-heading-title:active{ transition:none; transform:none; }
}

/* === RuhrBau: Erreichbarkeit auf /kontakt/ als kleine Tabelle === */
/* Tage links in fester Breite, Zeiten rechts buendig untereinander.
   tabular-nums gibt allen Ziffern dieselbe Breite, sonst stehen 07:00 und
   15:00 nicht exakt uebereinander. */
#rb-kontakt-zeiten .elementor-heading-title{ font-variant-numeric:tabular-nums; }
#rb-kontakt-zeiten .elementor-heading-title span{
  display:inline-block; min-width:4.2em; color:#4A5361; font-weight:400;
}
#rb-kontakt-rueckruf{ margin-top:6px; }
#rb-kontakt-rueckruf p{ margin:0; font-family:"Inter", sans-serif; font-size:14.4px; line-height:1.6; color:#79828F; }
#rb-kontakt-rueckruf a{ color:#3D6098; font-weight:600; text-decoration:none; white-space:nowrap; }
#rb-kontakt-rueckruf a::after{ content:" \2192"; }
#rb-kontakt-rueckruf a:hover{ color:#1B3A6B; text-decoration:underline; text-underline-offset:3px; }

/* === RuhrBau: Aufsatz-Kalender von jQuery UI verbergen === */
/* WordPress laedt das Datepicker-Skript ohne das jQuery-UI-Stylesheet, das
   #ui-datepicker-div sonst verbirgt. Sobald etwas den Behaelter an den body
   haengt, stand ein unformatierter Kalender unter der Fusszeile. Wir nutzen
   den Aufsatz ohnehin nicht — der Kalender steht fest im Feld. */
#ui-datepicker-div{ display:none !important; }

/* === RuhrBau: Leistungsliste im Kontaktformular zweispaltig === */
/* Acht Punkte untereinander waren 359px hoch. Auf /hausverwaltungen/ bleibt
   die Liste einspaltig, dort steht sie in einer halben Spalte neben dem
   Kalender — deshalb haengt diese Regel am Formular 491. Flexbox statt Grid. */
.forminator-custom-form-491 #checkbox-2 .forminator-field{ display:flex; flex-wrap:wrap; column-gap:0; row-gap:10px; }
.forminator-custom-form-491 #checkbox-2 .forminator-label,
.forminator-custom-form-491 #checkbox-2 .forminator-description{ flex:0 0 100%; max-width:100%; }
/* Zwei feste Spalten, damit die zweite buendig steht. Die linke ist breiter,
   weil 'Rueckbau, Entkernung & Entsorgung' sonst umbricht. Die Spans mit
   Beschriftung und Hinweis zaehlen bei nth-of-type nicht mit, gezaehlt werden
   nur die LABEL-Elemente. */
.forminator-custom-form-491 #checkbox-2 .forminator-checkbox{ margin:0; box-sizing:border-box; }
.forminator-custom-form-491 #checkbox-2 .forminator-checkbox:nth-of-type(odd){ flex:0 0 58%; max-width:58%; padding-right:12px; }
.forminator-custom-form-491 #checkbox-2 .forminator-checkbox:nth-of-type(even){ flex:0 0 42%; max-width:42%; }
@media (max-width:767px){
  .forminator-custom-form-491 #checkbox-2 .forminator-field{ column-gap:0; row-gap:8px; }
  .forminator-custom-form-491 #checkbox-2 .forminator-checkbox:nth-of-type(odd),
  .forminator-custom-form-491 #checkbox-2 .forminator-checkbox:nth-of-type(even){ flex:0 0 100%; max-width:100%; padding-right:0; }
}

/* Statement auf Navy, Ueber uns — entspricht .statement in der statischen Fassung.
   Der Konverter hatte daraus einen gewoehnlichen Absatz gemacht: Inter 17 px auf
   einer Zeile, dadurch wirkte die linke Spalte leer. Die Groesse waechst hier per
   clamp() stufenlos mit, was Elementor selbst nicht kann. */
#rb-statement > p{
  font-family:"Source Serif 4",Georgia,serif;
  font-weight:400;
  font-size:clamp(1.4rem,2.8vw,2.05rem);
  line-height:1.42;
  color:#FFFFFF;
  max-width:24ch;
}

/* Ablauf-Grafiken auf dem Handy ganz zeigen. Die Bild-Widgets haben feste
   165 px Hoehe mit object-fit:cover - fuer Fotos richtig, eine Grafik wuerde
   bei voller Breite oben und unten abgeschnitten. */
@media (max-width:767px){
  [id^="rb-ablauf-bild-"] img{ height:auto!important; aspect-ratio:500/330; }
}

/* Grafiken ohne Bildunterschrift: Stehen die Spalten untereinander, fehlt der
   Abstand, den vorher die Bildunterschrift gab. Ablauf-Karten ausgenommen. */
@media (max-width:1024px){
  .elementor-widget-image img[src*="/grafik-"]:not([src*="grafik-ablauf"]){ margin-bottom:32px; }
}


/* === RuhrBau: Absaetze in Folge (Durchsicht 29.09.2026) ===
   Jeder Absatz ist ein eigenes Text-Widget: 18 px Widget-Abstand plus
   rund 30 px Absatzabstand von Astra ergaben 48 px. Lokal sind es rund 30 px. */
[data-elementor-type="wp-page"] .elementor-widget-text-editor:has(+ .elementor-widget-text-editor) p:last-child{ margin-bottom:12px; }

/* === RuhrBau: Querkarte (Durchsicht 29.09.2026) ===
   Eine Leistung ueber die ganze Breite unter dem Raster, damit keine Kachel
   allein in einer Reihe steht. Startseite und /leistungen/, Projektsteuerung. */
body [id="rb-card-quer"]{ border-left:3px solid #1B3A6B !important; }
@media (min-width:1025px){
  body [id="rb-card-quer"]{ padding:30px 36px !important; }
  body [id="rb-card-quer"] > .elementor-widget{ margin:0 !important; }
  body [id="rb-card-quer"] > .elementor-widget-icon,
  body [id="rb-card-quer"] > .elementor-widget-button{ flex:0 0 auto; width:auto !important; }
  body [id="rb-card-quer"] > .elementor-widget-heading{ flex:0 0 230px; width:auto !important; }
  body [id="rb-card-quer"] > .elementor-widget-text-editor{ flex:1 1 0; width:auto !important; }
}


/* === RuhrBau: Linien-Symbole (29.09.2026) ===
   Eigene SVG-Symbole im Icon-Widget. Elementor setzt fill auf das SVG,
   Linien-Symbole duerfen keine Flaeche bekommen. */
.elementor-icon svg[stroke="currentColor"]{ fill:none !important; }


/* === RuhrBau: Kacheln auf dem Handy kompakt (29.09.2026) ===
   Symbol und Ueberschrift nebeneinander, Text darunter. Spart je Kachel
   rund 70 px, bei sieben Leistungen fast eine Bildschirmhoehe. */
@media (max-width:767px){
  body [id^="rb-card-"]{ flex-direction:row !important; flex-wrap:wrap !important; align-items:center !important; padding:28px 24px !important; }
  body [id^="rb-card-"] > .elementor-widget{ flex:0 0 100%; max-width:100%; }
  body [id^="rb-card-"] > .elementor-widget-icon{ flex:0 0 auto; width:auto !important; margin:0 16px 0 0 !important; }
  body [id^="rb-card-"] > .elementor-widget-icon + .elementor-widget-heading{ flex:1 1 0; min-width:0; width:auto !important; margin-bottom:0 !important; }
  body [id^="rb-card-"] > .elementor-widget-icon + .elementor-widget-heading .elementor-heading-title{ margin-bottom:0 !important; }
  body [id^="rb-card-"] > .elementor-widget-icon + .elementor-widget-heading + .elementor-widget{ margin-top:16px !important; }
}

/* === RuhrBau: Kein Leerraum nach dem letzten Absatz (29.09.2026) ===
   Der Abstand zum naechsten Element kommt aus dem Container, nicht aus dem
   Absatz. Vorher hing an jedem letzten Absatz ein Abstand von rund 30 px. */
[data-elementor-type="wp-page"] .elementor-widget-text-editor:last-child p:last-child{ margin-bottom:0; }


/* === RuhrBau: Häufige Fragen (30.09.2026) ===
   Links im Schlusssatz in Markenfarbe statt Browser-Blau. */
#rb-faq .elementor-widget-text-editor a{ color:#1B3A6B; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
#rb-faq .elementor-widget-text-editor a:hover{ color:#3D6098; }


/* === RuhrBau: Ratgeber-Artikel (01.10.2026) === */
#rb-artikel .elementor-widget-text-editor ul, #rb-artikel .elementor-widget-text-editor ol{ margin:0; padding-left:22px; }
#rb-artikel .elementor-widget-text-editor li{ margin:0 0 8px; padding-left:4px; }
#rb-artikel .elementor-widget-text-editor li::marker{ color:#3D6098; }
#rb-artikel .elementor-widget-text-editor ol li::marker{ font-weight:600; }
#rb-artikel .elementor-widget-text-editor strong{ color:#14181E; font-weight:600; }
#rb-artikel .elementor-widget-text-editor a{ color:#1B3A6B; font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; }
#rb-artikel .elementor-widget-text-editor a:hover{ color:#3D6098; }
#rb-card-ratgeber-1 .elementor-heading-title a{ color:inherit; }


/* Grafik-Reihen: letzter Baustein ohne Abstand nach unten. Elementor gibt jedem
   Widget 18 px Abstand nach unten, auch dem letzten. Endet die Textspalte neben
   einer Grafik mit Text statt mit Knoepfen, ist die Spalte 18 px hoeher als der
   sichtbare Text, und die mittig gesetzte Grafik steht 9 px zu tief.
   Ablauf-Karten ausgenommen. (01.10.2026) */
body :is(.e-con, .e-con-inner):has(> .e-con > .elementor-widget-image img[src*="/grafik-"]:not([src*="grafik-ablauf"])) > .e-con > .elementor-widget:last-child{ margin-bottom:0; }