/* CSS Bootstrap Unterseiten */


/* 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 */
  background-color:transparent !important;
}

/* 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;
  }
}