/* Page scope */
/* .bck-kontakt { padding-bottom: 40px; } */

/* Hero (Ausbildung-style: background image + overlay) */
.bck-kontakt-hero.bcsr-hero{
  position: relative;
  min-height: 420px; /* adjust if you want taller */
  overflow: hidden;
  margin-top: 0px; /* keep your old spacing */
}

.bck-kontakt-hero .bcsr-hero-media{
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.02);
}

/* White hero overlay (same as other pages) */
.bcsr-hero{
  overflow: hidden;
}
.bcsr-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.82) 0%,
    rgba(255,255,255,0.45) 55%,
    rgba(255,255,255,0.10) 100%
  );
}


/* HERO – match other pages (white overlay + dark text) */
.bck-kontakt-hero .bcsr-hero-overlay{
  position: relative;
  z-index: 2;
  min-height: 420px;
  display: flex;
  align-items: center;
  /* IMPORTANT: remove dark overlay, let .bcsr-hero::after handle the white gradient */
  background: transparent;
  padding: 70px 0 40px; /* same as shared hero in Ausbildung CSS */
}

/* Make sure text sits above the ::after overlay */
.bck-kontakt-hero .bcsr-hero-overlay .container{
  position: relative;
  z-index: 2;
}

.bck-kontakt-hero .bcsr-kicker{
    margin: 0 0 .6rem;
    font-size: .85rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(15, 23, 42, 0.60);
}

.bck-kontakt-hero .bcsr-title{
    margin: 0;
    font-size: 2.6rem;
    line-height: 1.12;
    color: #0b1a26;
}

@media (max-width: 991px){
  .bck-kontakt-hero.bcsr-hero,
  .bck-kontakt-hero .bcsr-hero-overlay{
    min-height: 320px;
  }
  .bck-kontakt-hero .bcsr-title{ font-size: 34px; }
}
@media (max-width: 575px){
  .bck-kontakt-hero.bcsr-hero,
  .bck-kontakt-hero .bcsr-hero-overlay{
    min-height: 240px;
  }
  .bck-kontakt-hero .bcsr-title{ font-size: 28px; }
}

@media (max-width: 768px){
  .bck-kontakt-hero.bcsr-hero,
  .bck-kontakt-hero .bcsr-hero-overlay{
    min-height: 300px;
  }
  .bck-kontakt-hero .bcsr-title{ font-size: 36px; }
}


/* Title */
.bck-kontakt-title { margin: 18px 0 8px; }
.bck-kontakt-intro { max-width: 900px; margin: 0 auto; }

/* Tabs */
.bck-tabs-nav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  border-bottom: 1px solid #d9d9d9;
  margin-top: 18px;
}

.bck-tab {
  border: 1px solid #d9d9d9;
  border-bottom: none;
  background: #f7f7f7;
  padding: 10px 14px;
  font-size: 12px;
  text-transform: uppercase;
  cursor: pointer;
}

.bck-tab.is-active {
  background: #fff;
  position: relative;
  top: 1px;
}

.bck-panel {
  display: none;
  border: 1px solid #d9d9d9;
  border-top: none;
  padding: 22px;
  background: #fff;
}

.bck-panel.is-active { display: block; }

.bck-empty {
  padding: 14px;
  border: 1px dashed #bbb;
  background: #fafafa;
}

/* Section titles */
.bck-section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 18px 0 10px;
}
.bck-section-title--center { justify-content: center; }
.bck-section-title h2 { margin: 0; font-size: 18px; }
.bck-section-title-icon { font-size: 18px; }

/* Opening hours */
.bck-hours-col { text-align: left; }
.bck-hours-title { font-size: 16px; margin-bottom: 8px; }
.bck-hours-line { margin-bottom: 6px; }

/* Notdienst */
.bck-notdienst { display: inline-block; text-align: left; margin-top: 8px; }
.bck-notdienst-row { display: flex; gap: 10px; margin: 6px 0; }
.bck-notdienst-brand { min-width: 110px; font-weight: 600; }
.bck-notdienst-phone { text-decoration: none; }

/* Map + Form */
.bck-map iframe { border-radius: 2px; }
.bck-contact-h2 { font-size: 18px; margin-bottom: 8px; }
.bck-contact-p { margin-bottom: 14px; }
.bck-form { margin-top: 8px; }


section.bcsr-section.bcsr-section--tight {
    margin-top: 40px;
}

section.bcsr-section {
    margin-top: 40px;
}




/* Kontakt page – center section headings like live (Öffnungszeiten + 24h-Notdienst) */
.bck-kontakt .bck-section-title{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center !important;
  gap: 0;                 /* so icon + title can look like one badge */
  text-align: center;
  position: relative;
  margin: 34px 0 22px;
}

/* the horizontal lines left + right */
.bck-kontakt .bck-section-title::before,
.bck-kontakt .bck-section-title::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e6e6e6;
}
.bck-kontakt .bck-section-title::before{ margin-right: 14px; }
.bck-kontakt .bck-section-title::after{  margin-left: 14px; }

/* badge style (icon + title) */
.bck-kontakt .bck-section-title-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-right: 0;
  padding: 10px 10px;
  border-radius: 6px 0 0 6px;
  line-height: 1;
}

.bck-kontakt .bck-section-title h2{
  margin: 0;
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-left: 0;
  padding: 8px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

/* if the icon is an emoji <img>, keep it aligned nicely */
.bck-kontakt .bck-section-title-icon img{
  display: block;
  width: 18px;
  height: 18px;
}



/* --- FORCE LIVE-LIKE CENTERED BADGE TITLE (Kontakt) --- */

/* 1) Remove the "full width bar" styling if any exists */
.bck-kontakt .bck-section-title,
.bck-kontakt .bck-section-title.bck-section-title-center{
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* 2) Make the title row a centered flex line */
.bck-kontakt .bck-section-title,
.bck-kontakt .bck-section-title.bck-section-title-center{
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center !important;
  text-align: center;
  gap: 0 !important;
  margin: 34px 0 22px;
}

/* 3) Horizontal lines like live site */
.bck-kontakt .bck-section-title::before,
.bck-kontakt .bck-section-title::after{
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: #e6e6e6;
}
.bck-kontakt .bck-section-title::before{ margin-right: 16px; }
.bck-kontakt .bck-section-title::after{  margin-left: 16px; }

/* 4) Icon + Title badge in the center */
.bck-kontakt .bck-section-title-icon{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-right: 0;
  padding: 10px 10px;
  border-radius: 6px 0 0 6px;
  line-height: 1;
  margin: 0 !important;
}

.bck-kontakt .bck-section-title h2{
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-left: 0;
  padding: 8px 14px;
  border-radius: 0 6px 6px 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}

/* 5) If your icon is an emoji <img>, keep it aligned */
.bck-kontakt .bck-section-title-icon img{
  display: block;
  width: 18px;
  height: 18px;
}

/* 6) Safety: prevent any "auto push" that can break centering */
.bck-kontakt .bck-section-title-icon,
.bck-kontakt .bck-section-title h2{
  flex: 0 0 auto !important;
}


/* Fix: icon + heading should be centered together */
.bck-kontakt .bck-section-title{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* IMPORTANT: prevent h2 from taking full width / growing */
.bck-kontakt .bck-section-title h2{
  width:auto !important;
  flex:0 0 auto !important;
  margin:0 !important;
  text-align:left !important; /* so it's not "centered inside full width" */
}

/* icon spacing */
.bck-kontakt .bck-section-title-icon{
  flex:0 0 auto !important;
  margin:0 0 0 0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
}

/* ===========================
   Shared Disclaimer (Rinnetal)
   =========================== */

.bcsr-section.bcsr-section--tight{
  padding: 2.6rem 0;
}

.bcsr-disclaimer{
  /* keep same width behavior as other templates */
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 16px 18px;
  border-radius: 14px;
  background: #fff;
  border: 1px dashed rgba(15, 23, 42, 0.18);
}

/* IMPORTANT: disclaimer.php uses bcgh-disclaimer-text */
.bcgh-disclaimer-text{
  margin: 0 0 12px;
  font-size: .92rem;
  color: rgba(15, 23, 42, 0.60);
  line-height: 1.85;
}

.bcgh-disclaimer-text:last-child{
  margin-bottom: 0;
}





/* ==========================================
   CONTACT (Kontakt page) — match Homepage CF7
   ========================================== */

.bck-kontakt .bcvh-contact-card{
  background:#fff;
  border-radius:26px;
  padding:10px 30px;
  box-shadow:0 18px 50px rgba(16,24,40,0.10);
}

.bck-kontakt .bcvh-contact-title{
  margin:0 0 26px;
  font-size:40px;
  line-height:1.12;
  color:#0b1a26;
}

/* CF7 reset + spacing */
.bck-kontakt .bcvh-contact-form .wpcf7 form{ margin:0; }
.bck-kontakt .bcvh-contact-form .wpcf7 p{ margin:0 0 12px !important; }
.bck-kontakt .bcvh-contact-form .wpcf7 br{ display:none; }

.bck-kontakt .bcvh-contact-form .wpcf7 label{
  display:block;
  margin:0 0 8px;
  font-size:13px;
  font-weight:600;
  color:#1a1f26;
}

.bck-kontakt .bcvh-contact-form .wpcf7 input[type="text"],
.bck-kontakt .bcvh-contact-form .wpcf7 input[type="email"],
.bck-kontakt .bcvh-contact-form .wpcf7 input[type="tel"],
.bck-kontakt .bcvh-contact-form .wpcf7 textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #e3e6eb;
  border-radius:12px;
  background:#fff;
  font-size:14px;
  outline:none;
  box-shadow:none;
}

.bck-kontakt .bcvh-contact-form .wpcf7 textarea{
  min-height:150px;
  resize:none;
}

.bck-kontakt .bcvh-contact-form .wpcf7 input:focus,
.bck-kontakt .bcvh-contact-form .wpcf7 textarea:focus{
  border-color: rgba(10, 91, 133, .45);
  box-shadow:0 0 0 4px rgba(10, 91, 133, .12);
}

/* Submit button */
.bck-kontakt .bcvh-contact-form .wpcf7 input[type="submit"]{
  width:auto !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 16px;
  border-radius:12px !important;
  border:0;
  background: var(--bcvh-primary, #0a5b85);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}

.bck-kontakt .bcvh-contact-form .wpcf7 input[type="submit"]:hover{
  background: var(--bcvh-primary-dark, #084a6b);
}

/* CF7 messages */
.bck-kontakt .bcvh-contact-form .wpcf7-spinner{ display:none; }
.bck-kontakt .bcvh-contact-form .wpcf7-response-output{
  margin:14px 0 0 !important;
  border-radius:14px;
  font-size:14px;
}

/* Map card */
.bck-kontakt .bcvh-contact-map{
  background:#fff;
  border-radius:26px;
  overflow:hidden;
  box-shadow:0 18px 50px rgba(16,24,40,0.10);
  min-height:520px;
}

/* Make iframe fill */
.bck-kontakt .bcvh-contact-map iframe{
  width:100%;
  height:100%;
  min-height:520px;
  border:0;
  display:block;
}

/* Responsive */
@media (max-width: 991px){
  .bck-kontakt .bcvh-contact-card{ padding:34px 22px; }
  .bck-kontakt .bcvh-contact-title{ font-size:32px; }
  .bck-kontakt .bcvh-contact-map,
  .bck-kontakt .bcvh-contact-map iframe{
    min-height:360px;
  }
}



/* FIX: prevent map from overlapping the disclaimer */
.bck-kontakt .bcvh-contact-map.h-100{
  height: auto !important; /* stop Bootstrap forcing 100% height */
}

.bck-kontakt .bcvh-contact-map{
  position: relative;
  overflow: hidden; /* keep the iframe clipped inside */
}

/* Use an explicit height instead of height:100% */
.bck-kontakt .bcvh-contact-map iframe{
  height: 520px !important;
  min-height: 520px !important;
  width: 100%;
  display: block;
  border: 0;
}

@media (max-width: 991px){
  .bck-kontakt .bcvh-contact-map iframe{
    height: 360px !important;
    min-height: 360px !important;
  }
}


.rnh-staff-ov-line {
    font-size: 14px;
}