/* BB - CSS Unterseiten mit TW - US_V2 */

      h1.text-center {text-align:left}
      
      main p, main h2, main h3 {margin-bottom:1rem !important;}
      
      h2, h3 {color: rgb(213 105 132 / var(--tw-text-opacity, 1));font-weight:700!important;}
      
      h3 {font-size:18px!important;}
      
      main ol {list-style-type:decimal; padding-left:40px;}
      
      main ol li {margin-top:1em;margin-bottom:0.5em;}
      
      main ul {list-style-type:circle; padding-left:40px;}
      
      main a, 
      .border_bt {border-bottom:1px solid rgb(213 105 132); }
      
      main li p {margin-bottom:5px !important;}
      
      main li:last-child p {margin-bottom:15px !important;}
      
    .text-shadow {
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
    }
    .bg-blueish-light {
      background-color: #e8f0f7;
    }
    .active-menu-item {
      color: #D56984;
    }
    
    .hervorgeh {color:rgb(213 105 132)}
    /*
    .bg-right-image {
    background-image: url('/assets/images/bussgeld-ratgeber.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 9%;
  }
  */
    
    .bg-image-gradient {
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%), url('[[*bg_image_head]]');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 200px;
  }
  
  body#bb_doc_2 main div,
  body#bb_doc_2 main h2 {padding-left:0 !important}
  
  nav ul ul li a {color:#a1a1a1;}
  
  /* Anim. Menu-Links */
  
 .link-underline::after {
  content: "";
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width:0;
  height: 2px;
  background-color: rgb(213, 105, 132);
  transition: width 0.3s ease, left 0.3s ease;
  z-index: 10;
  overflow: visible;
}

.link-underline:hover::after {
  width: 100%;

}

.grid .rounded {border-radius:0.75rem}
/* Gemeinsame Breite für H1 + Breadcrumb */
.header-inner{
  max-width: 64rem;   /* z.B. Tailwind max-w-5xl – anpassen an dein H1-Gefühl */
  margin-left: auto;
  margin-right: auto;
  padding-top: 3rem;
  padding-bottom: 1.25rem;
}

/* Breadcrumb leicht unter die H1 rücken */
#breadcrumbs{
  margin-top: .75rem;
}

/* Breadcrumb wrapper: gleiche Breite wie dein Content (max-w-3xl) */
#breadcrumbs{
  max-width: none !important;   
  margin: 0.75rem auto 0;      /* Abstand nach dem H1-Block */
  padding: 0 1rem;             /* px-4 */
}

/* Liste horizontal, wrap auf mobile */
#breadcrumbs .breadcrumb {
    width: 100%;
  max-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* gap: .35rem .5rem; */
  font-size: .875rem;          /* text-sm */
  line-height: 1.2;
  color: rgba(31,41,55,.85);   /* text-gray-800-ish */
}

/* Separator zwischen den Breadcrumb-Items */
#breadcrumbs ol.breadcrumb > li + li::before{
  content: "›";               /* alternativ: ">" */
  margin: 0 .35rem 0 .15rem;
  opacity: .6;
}


/* LI reset */
#breadcrumbs .crumb{
  margin: 0;
  padding: 0;
}

/* Link-Style: dezent, wie deine link-underline Logik */
#breadcrumbs a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(91,45,71,.25); /* Primary-Farbton */
}

#breadcrumbs a:hover{
  border-bottom-color: rgba(91,45,71,.6);
}

/* Separator automatisch zwischen Items */
#breadcrumbs .crumb + .crumb::before{
  content: "›";
  margin: 0 .25rem 0 0;
  color: rgba(31,41,55,.45);
}

/* Aktuelle Seite */
#breadcrumbs .is-current{
  font-weight: 600;
  color: rgba(31,41,55,.75);
}

/* Falls in pagetitle <br> vorkommt: nicht umbrechen */
#breadcrumbs .is-current br{
  display: none;
}

/* Responsive Padding analog zum Layout */
@media (min-width: 640px){
  #breadcrumbs{ padding: 0 1.5rem; } /* sm:px-6 */
}
@media (min-width: 1024px){
  #breadcrumbs{ padding: 0; }   /* lg:px-8 */
}

@media (max-width:767px) {
    h1.text-4xl {
  font-size: 1.5rem;
  line-height: 1.75rem;
    }
    /* Liste horizontal, wrap auf mobile – mit kleinem Zeilenabstand */
#breadcrumbs ol.breadcrumbs,
#breadcrumbs ol.breadcrumb {
  width: 100%;
  max-width: none;
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  /* statt gap: getrennte Kontrolle */
  column-gap: .5rem;  /* horizontal */
  row-gap: .1rem;     /* vertikal (klein)
  font-size: .875rem;
  line-height: 1.2;
  color: rgba(31,41,55,.85);
}

/* LI reset */
#breadcrumbs ol.breadcrumbs > li,
#breadcrumbs ol.breadcrumb > li,
#breadcrumbs .crumb{
  margin: 0;
  padding: 0;
}

/* Separator: kein linker Margin (verhindert optischen „Einzug“ beim Zeilenumbruch) */
#breadcrumbs ol.breadcrumbs > li + li::before,
#breadcrumbs ol.breadcrumb > li + li::before{
  content: "›";          /* alternativ: ">" */
  margin: 0 .25rem 0 0;  /* nur rechts Abstand */
  opacity: .6;
}
#breadcrumbs .crumb.is-current{
    max-width: 280px;       /* gewünschte Kürzungsbreite */
    flex: 0 0 auto;         /* verhindert Stretch */
  }

  #breadcrumbs .crumb-current{
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
  }
}