/* RuhrBau: Kopfzeile, Mega-Menü, Aktionsleiste, Fußzeile, Unterseiten. Stand 16.10.2026 */

/* Kopfzeile bleibt beim Scrollen stehen */
.xpro-theme-builder-header{position:sticky;top:0;z-index:120}
.admin-bar .xpro-theme-builder-header{top:32px}
#rb-header{transition:box-shadow .25s ease}
.rb-scrolled #rb-header{box-shadow:0 8px 28px rgba(13,31,60,.10)}
#rb-header-logo img{transition:transform .25s cubic-bezier(.22,.7,.3,1);transform-origin:left center}
.rb-scrolled #rb-header-logo img{transform:scale(.84)}
#rb-header::after{content:"";position:absolute;left:0;bottom:-1px;width:100%;height:2px;background:#1B3A6B;transform:scaleX(var(--rb-progress,0));transform-origin:left center;pointer-events:none;z-index:2}

/* Mega-Menü unter Leistungen (Desktop) */
@media (min-width:1025px){
  #rb-header .xpro-elementor-dropdown-menu.rb-mega{width:880px!important;display:grid;grid-template-columns:1fr 1fr 280px;grid-auto-flow:column;grid-template-rows:repeat(4,auto);padding:18px 0 0 14px!important;border-top:2px solid #1B3A6B}
  #rb-header .rb-mega > li{grid-column:auto}
  #rb-header .rb-mega > li > a{display:flex!important;align-items:flex-start;gap:14px;padding:11px 14px!important;border-left:0!important;white-space:normal!important;border-radius:2px}
  #rb-header .rb-mega > li:hover > a,#rb-header .rb-mega > li.current-menu-item > a{background:#F4F6F8!important}
  #rb-header .rb-mega > li.rb-mega__aside{grid-column:3;grid-row:1 / span 4;background:#F4F6F8;padding:20px 22px 22px;margin:-18px 0 0 14px;display:flex;flex-direction:column;gap:10px}
}
.rb-mega__ic{width:40px;height:40px;flex:none;border-radius:2px;background:#F4F6F8;color:#1B3A6B;display:flex;align-items:center;justify-content:center}
#rb-header .rb-mega > li:hover .rb-mega__ic{background:#fff}
.rb-mega__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rb-mega__tx{display:flex;flex-direction:column;gap:2px}
.rb-mega__n{font-size:15px;font-weight:600;line-height:1.3;color:#14181E}
.rb-mega__d{font-size:13px;font-weight:400;line-height:1.45;color:#4A5361}
.rb-mega__h{font-size:13px;font-weight:600;color:#14181E}
.rb-mega__w{font-size:15px;font-weight:600;color:#14181E!important;padding:9px 0;border-bottom:1px solid #E2E6EC;text-decoration:none!important}
.rb-mega__w span,.rb-mega__all{color:#3D6098}
.rb-mega__card{margin-top:8px;background:#1B3A6B;border-radius:2px;padding:16px 16px 18px;display:flex;flex-direction:column;gap:6px}
.rb-mega__ct{font-family:'Source Serif 4',Georgia,serif;font-weight:600;font-size:18px;line-height:1.25;color:#fff}
.rb-mega__cx{font-size:13px;line-height:1.5;color:rgba(255,255,255,.82)}
.rb-mega__tel{margin-top:6px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;background:#fff;color:#1B3A6B!important;border-radius:2px;font-size:14px;font-weight:600;text-decoration:none!important}
.rb-mega__all{font-size:14px;font-weight:600;text-decoration:none!important;margin-top:4px}
@keyframes rbMegaIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (min-width:1025px){
  #rb-header li:hover > .rb-mega > li{animation:rbMegaIn .3s cubic-bezier(.22,.7,.3,1) both}
  #rb-header li:hover > .rb-mega > li:nth-child(2){animation-delay:.03s}
  #rb-header li:hover > .rb-mega > li:nth-child(3){animation-delay:.06s}
  #rb-header li:hover > .rb-mega > li:nth-child(4){animation-delay:.09s}
  #rb-header li:hover > .rb-mega > li:nth-child(5){animation-delay:.12s}
  #rb-header li:hover > .rb-mega > li:nth-child(6){animation-delay:.15s}
  #rb-header li:hover > .rb-mega > li:nth-child(7){animation-delay:.18s}
  #rb-header li:hover > .rb-mega > li:nth-child(8){animation-delay:.12s}
}
/* Im Handy-Menü nur Namen zeigen */
@media (max-width:1024px){
  .rb-mega__ic,.rb-mega__d,.rb-mega__aside{display:none!important}
}

/* Handy-Menü: Anruf und Anfrage am Daumen */
.rb-mm{display:none}
@media (max-width:1024px){
  .rb-mm{display:flex;flex-direction:column;gap:10px;margin:18px 0 24px;padding:18px;background:#F4F6F8;border-radius:2px}
  .rb-mm__tel{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;background:#1B3A6B;color:#fff!important;border-radius:2px;font-size:17px;font-weight:600;text-decoration:none!important}
  .rb-mm__anf{display:flex;align-items:center;justify-content:center;min-height:52px;border:2px solid #1B3A6B;color:#1B3A6B!important;border-radius:2px;font-size:16px;font-weight:600;text-decoration:none!important}
  .rb-mm__z{text-align:center;font-size:13px;color:#4A5361}
}

/* Feste Aktionsleiste am Handy */
.rb-bar{display:none}
@media (max-width:767px){
  .rb-bar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:110;gap:8px;padding:10px 12px calc(12px + env(safe-area-inset-bottom));background:rgba(255,255,255,.97);border-top:1px solid #E2E6EC;box-shadow:0 -8px 24px rgba(13,31,60,.16);transform:translateY(110%);transition:transform .35s cubic-bezier(.22,.7,.3,1)}
  .rb-bar-on .rb-bar{transform:none}
  .rb-bar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;border-radius:2px;font-family:'Inter',sans-serif;font-size:15px;font-weight:600;text-decoration:none!important}
  .rb-bar__tel{background:#1B3A6B;color:#fff!important}
  .rb-bar__anf{border:2px solid #1B3A6B;color:#1B3A6B!important}
  body{padding-bottom:76px}
}
@media (prefers-reduced-motion:reduce){.rb-bar,#rb-header-logo img{transition:none}}
/* ---------- Akkordeon Häufige Fragen ---------- */
.rb-acc .elementor-heading-title[role=button]{position:relative;cursor:pointer;padding-right:44px;transition:color .2s}
.rb-acc .elementor-heading-title[role=button]:hover{color:#1B3A6B}
.rb-acc .elementor-heading-title[role=button]:focus-visible{outline:2px solid #3D6098;outline-offset:4px}
.rb-acc .elementor-heading-title[role=button]::before,.rb-acc .elementor-heading-title[role=button]::after{content:"";position:absolute;right:6px;top:50%;width:14px;height:2px;margin-top:-1px;background:#1B3A6B;transition:transform .25s ease}
.rb-acc .elementor-heading-title[role=button]::after{transform:rotate(90deg)}
.rb-acc.is-open .elementor-heading-title[role=button]::after{transform:rotate(0)}
.rb-acc:not(.is-open)>.elementor-widget-text-editor{display:none}
.rb-acc.is-open>.elementor-widget-text-editor{animation:rbAcc .3s ease both}
@keyframes rbAcc{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rb-acc.is-open>.elementor-widget-text-editor{animation:none}}
/* ---------- Leistungsseiten: Typische Aufträge ---------- */
.rb-chips{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin:6px 0 4px}
.rb-chips__l{font:600 11px/1 Inter,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#9FB8DE}
.rb-chips ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.rb-chips li{padding:8px 13px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07);border-radius:2px;font:500 14px/1.2 Inter,sans-serif;color:#fff}
.rb-chips.is-in li{animation:rbChip .45s cubic-bezier(.2,.8,.3,1.2) both;animation-delay:calc(.25s + var(--i) * .08s)}
@keyframes rbChip{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rb-chips.is-in li{animation:none}}
/* ---------- Formulare: Auswahlliste im RuhrBau-Stil ---------- */
.forminator-select-dropdown-container--open .forminator-select-dropdown{background:#fff!important;border:1px solid #1B3A6B!important;border-radius:2px!important;box-shadow:0 16px 36px rgba(13,31,60,.16)!important;overflow:hidden;font-family:Inter,sans-serif!important}
.forminator-select-dropdown-container--open .forminator-select-dropdown--below{margin-top:4px!important}
.forminator-select-dropdown-container--open .forminator-select-dropdown--above{margin-top:-4px!important}
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results__options{max-height:280px!important;padding:4px 0!important}
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option{margin:0!important;padding:11px 15px!important;border-radius:0!important;background:#fff!important;color:#14181E!important;font:400 15px/1.4 Inter,sans-serif!important;transition:background-color .15s,color .15s}
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--highlighted:not(.select2-results__option--selected){background:#F4F6F8!important;color:#1B3A6B!important}
.forminator-select-dropdown-container--open .forminator-select-dropdown .select2-results .select2-results__options .select2-results__option.select2-results__option--selected{background:#1B3A6B!important;color:#fff!important;font-weight:600!important}
.forminator-ui.forminator-custom-form .forminator-select2 + .select2-container--open .select2-selection,.forminator-ui.forminator-custom-form .select2-container--open .select2-selection{border-color:#1B3A6B!important;background:#fff!important}
/* ---------- Lange Wörter am Handy umbrechen (Datenschutzerklärung, Verbraucherstreitbeilegung) ---------- */
@media (max-width:767px){.elementor-heading-title,.elementor-widget-text-editor{overflow-wrap:break-word}}
/* ---------- Kalender im Datumsfeld (Vorlage: Entwurf "Vorschlag") ---------- */
.rb-datum-kalender .ui-datepicker{padding:18px 18px 14px!important;background:#fff!important;border:1px solid #E2E6EC!important;border-radius:2px!important;font-family:Inter,sans-serif!important;box-sizing:border-box}
.rb-datum-kalender .ui-datepicker-header{display:flex!important;align-items:center!important;gap:12px!important;padding:0 0 14px!important;border:0!important;background:none!important}
.rb-datum-kalender .ui-datepicker-prev,.rb-datum-kalender .ui-datepicker-next{position:relative!important;flex:none!important;width:44px!important;height:44px!important;background:#1B3A6B!important;border-radius:2px!important;font-size:0!important;text-indent:0!important;color:transparent!important;transition:background-color .15s}
.rb-datum-kalender .ui-datepicker-prev:hover,.rb-datum-kalender .ui-datepicker-next:hover{background:#12294D!important}
.rb-datum-kalender .ui-datepicker-prev .ui-icon,.rb-datum-kalender .ui-datepicker-next .ui-icon{display:none!important}
.rb-datum-kalender .ui-datepicker-prev::after,.rb-datum-kalender .ui-datepicker-next::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border:solid #fff;border-width:0 0 2px 2px}
.rb-datum-kalender .ui-datepicker-prev::after{transform:translate(-30%,-50%) rotate(45deg)}
.rb-datum-kalender .ui-datepicker-next::after{transform:translate(-70%,-50%) rotate(-135deg)}
.rb-datum-kalender .ui-datepicker-prev.ui-state-disabled,.rb-datum-kalender .ui-datepicker-next.ui-state-disabled{opacity:.35;cursor:default}
.rb-datum-kalender .ui-datepicker-title{display:flex!important;gap:12px!important;flex:1!important;margin:0!important;min-width:0}
.rb-datum-kalender .ui-datepicker-title select{flex:1 1 0!important;min-width:0!important;height:44px!important;padding:0 28px 0 12px!important;border:1px solid #E2E6EC!important;border-radius:2px!important;text-overflow:clip;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2314181E' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 10px center!important;-webkit-appearance:none!important;appearance:none!important;font:400 16px/1 Inter,sans-serif!important;color:#14181E!important;cursor:pointer}
.rb-datum-kalender .ui-datepicker-title select:focus{outline:none;border-color:#1B3A6B!important}
.rb-datum-kalender table.ui-datepicker-calendar{width:100%!important;margin:0!important;border:0!important;border-collapse:separate!important;border-spacing:0 4px!important;table-layout:fixed;background:none!important}
.rb-datum-kalender .ui-datepicker-calendar th,.rb-datum-kalender .ui-datepicker-calendar td{border:0!important;background:none!important;padding:0!important}
.rb-datum-kalender .ui-datepicker-calendar th{padding:4px 0 8px!important;font:600 12px/1 Inter,sans-serif!important;letter-spacing:.08em!important;text-transform:uppercase;color:#79828F!important;text-align:center}
.rb-datum-kalender .ui-datepicker-calendar td{text-align:center!important}
.rb-datum-kalender .ui-datepicker-calendar td a,.rb-datum-kalender .ui-datepicker-calendar td span{display:flex!important;align-items:center;justify-content:center;width:100%;max-width:52px;height:44px;margin:0 auto;padding:0!important;border:1.5px solid transparent!important;border-radius:2px!important;background:none!important;font:400 16px/1 Inter,sans-serif!important;color:#14181E!important;text-decoration:none!important;box-sizing:border-box;transition:background-color .15s,color .15s}
.rb-datum-kalender .ui-datepicker-calendar td a:hover{background:#F4F6F8!important;color:#1B3A6B!important}
.rb-datum-kalender .ui-datepicker-calendar td span{color:#C9D2DF!important}
.rb-datum-kalender .ui-datepicker-calendar td.ui-datepicker-today a{border-color:#1B3A6B!important;color:#1B3A6B!important;font-weight:600!important}
.rb-datum-kalender.rb-gewaehlt .ui-datepicker-calendar td.ui-datepicker-current-day a{background:#1B3A6B!important;border-color:#1B3A6B!important;color:#fff!important;font-weight:600!important}
@media (max-width:400px){.rb-datum-kalender .ui-datepicker{padding:14px 10px 10px!important}.rb-datum-kalender .ui-datepicker-header{gap:8px!important}.rb-datum-kalender .ui-datepicker-title{gap:8px!important}.rb-datum-kalender .ui-datepicker-prev,.rb-datum-kalender .ui-datepicker-next{width:40px!important;height:40px!important}.rb-datum-kalender .ui-datepicker-title select{height:40px!important;font-size:15px!important;padding-left:10px!important}.rb-datum-kalender .ui-datepicker-calendar td a,.rb-datum-kalender .ui-datepicker-calendar td span{height:40px;font-size:15px!important}}
/* Kalender in engen Spalten: Monat/Jahr in eigene Zeile */
.rb-datum-kalender{container-type:inline-size}
.rb-datum-kalender .ui-datepicker-title select{width:auto!important;max-width:none!important}
@container (max-width:330px){
  .rb-datum-kalender .ui-datepicker-header{flex-wrap:wrap!important;gap:10px!important}
  .rb-datum-kalender .ui-datepicker-prev{order:0!important}
  .rb-datum-kalender .ui-datepicker-next{order:1!important;margin-left:auto!important}
  .rb-datum-kalender .ui-datepicker-title{order:2!important;flex:1 1 100%!important;gap:10px!important}
  .rb-datum-kalender .ui-datepicker-prev,.rb-datum-kalender .ui-datepicker-next{width:40px!important;height:40px!important}
  .rb-datum-kalender .ui-datepicker-title select{height:42px!important;font-size:15px!important}
  .rb-datum-kalender .ui-datepicker{padding:14px 12px 10px!important}
}
@container (max-width:300px){
  .rb-datum-kalender .ui-datepicker-calendar th{font-size:10.5px!important;letter-spacing:.02em!important}
  .rb-datum-kalender .ui-datepicker-calendar td a,.rb-datum-kalender .ui-datepicker-calendar td span{height:36px;font-size:14px!important}
}
/* ---------- Formulare: Kontrollkästchen im RuhrBau-Stil ---------- */
.forminator-ui.forminator-custom-form .forminator-checkbox .forminator-checkbox-box{width:22px!important;height:22px!important;background:#fff!important;border:1.5px solid #9AA3AF!important;border-radius:2px!important;box-shadow:none!important;transition:background-color .15s,border-color .15s}
.forminator-ui.forminator-custom-form .forminator-checkbox:hover .forminator-checkbox-box{border-color:#1B3A6B!important}
.forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box{background:#1B3A6B!important;border-color:#1B3A6B!important;color:#fff!important}
.forminator-ui.forminator-custom-form .forminator-checkbox input:checked + .forminator-checkbox-box:before{color:#fff!important}
.forminator-ui.forminator-custom-form .forminator-checkbox input:focus-visible + .forminator-checkbox-box{outline:2px solid #3D6098;outline-offset:2px}
.forminator-ui.forminator-custom-form .forminator-has_error .forminator-checkbox .forminator-checkbox-box{border-color:#B3261E!important}
/* ---------- Seitlichen Überlauf sicher abschneiden (ohne Sticky zu brechen) ---------- */
.rka,.rbu.rka{overflow-x:clip}
.elementor-widget-shortcode:has(.forminator-custom-form){overflow-x:clip}
/* ---------- Einheitliche Schrift: Kopfbereich aller Unterseiten wie Startseite ---------- */
body:not(.home) .elementor-widget-heading:has(+ .elementor-widget-heading h1) .elementor-heading-title{font-size:13px!important;letter-spacing:2.4px!important;line-height:1.5!important}
body:not(.home) .elementor-widget-heading h1.elementor-heading-title{font-size:59.2px!important;line-height:1.18!important;letter-spacing:-.59px!important}
@media (max-width:1024px){body:not(.home) .elementor-widget-heading h1.elementor-heading-title{font-size:44px!important}}
@media (max-width:767px){
  body:not(.home) .elementor-widget-heading:has(+ .elementor-widget-heading h1) .elementor-heading-title{font-size:11.5px!important;letter-spacing:1.6px!important}
  body:not(.home) .elementor-widget-heading h1.elementor-heading-title{font-size:32px!important}
}
body:not(.home) .elementor-widget-heading:has(h1) + .elementor-widget-text-editor{max-width:640px!important}
/* ---------- Schliessen-X ohne Font Awesome (18.10.2026) ---------- */
.fas.fa-times{display:inline-block;width:1em;height:1em;vertical-align:middle;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat}
.fas.fa-times::before{content:none!important}