/* ===== Grundlayout ===== */
.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  font:16px/1.2 sans-serif;
  margin:0;
  padding:0;

  /* Geometrie-Variablen */
  --arrow:12px;         /* Breite Pfeilspitze */
  --pad-x:22px;         /* Freiraum links vor dem Text, Element Pading */
  --pad-right:28px;     /* Freiraim vor dem Pfeil resp nach dem Text, Element Pading*/
  --pad-y:5px;          /* Freiraum vertikal (über und unten dem Text), Element Pading */
  --pad-0:3px;			/* Luft Element Pading */
  --icon-size:22px;     /* Home-Icon Größe */
  --translateY-home:2px; /* Y Position der Schrift im Home Crumbs bestimmen */
  --translateY-all:2px; /* Y Position der Schrift in allen Crumbs ausser Home bestimmen */
  
}

/* ===== Kachel-Optik für JEDEN Link ===== */
.breadcrumb a{
  position:relative;
  display:flex;
  align-items:center;
  box-sizing:border-box;
  white-space: nowrap;   /* alles in einer Zeile behalten */
  column-gap: 8px;       /* Platz zwischen Icon und Text (zusätzlich zur Icon-Margin) */
  
  height:calc(var(--icon-size) + 2 * var(--pad-y));
  padding:var(--pad-0) var(--pad-right) var(--pad-y) var(--pad-x);
  margin-right:calc(-1 * var(--arrow));

  /* Pfeilform */
  clip-path:polygon(
    0 0, calc(100% - var(--arrow)) 0, 100% 50%,
    calc(100% - var(--arrow)) 100%, 0 100%, var(--arrow) 50%
  );

  background:var(--breadcrumb-bg);
  color:var(--breadcrumb-text);
  text-decoration:none;
  transition:background-color .2s ease, color .2s ease;
  border:none !important;
  box-shadow:none !important;
  z-index:0;
}

/* Hover nur auf dem Link */
.breadcrumb a:hover{
  background:var(--breadcrumb-bg-hover);
  color:var(--breadcrumb-text-hover);
  z-index:2;
}

/* ===== Aktueller/letzter Eintrag (ohne Link) ===== */
.breadcrumb span.current-item{
  display:flex;
  align-items:center;
  box-sizing:border-box;

  height:calc(var(--icon-size) + 2 * var(--pad-y));
  padding:3px var(--pad-right) var(--pad-y) var(--pad-x);
  margin-right:0; /* keine Überlappung am Ende */

  clip-path:polygon(
    0 0, calc(100% - var(--arrow)) 0, 100% 50%,
    calc(100% - var(--arrow)) 100%, 0 100%, var(--arrow) 50%
  );

  background:var(--breadcrumb-last-bg);
  color:var(--breadcrumb-last-text);
}
.breadcrumb span.current-item:hover{
  background:var(--breadcrumb-last-bg-hover);
  color:var(--breadcrumb-last-text-hover);
}

/* ===== Varianten: biegen NUR die Tokens am <a> um ===== */
.breadcrumb a.home{
  --breadcrumb-bg:var(--breadcrumb-home-bg);
  --breadcrumb-bg-hover:var(--breadcrumb-home-bg-hover);
  --breadcrumb-text:var(--breadcrumb-home-text);
  --breadcrumb-text-hover:var(--breadcrumb-home-text-hover);
  --pad-right:26px; /* optional mehr Luft vorm Pfeil */
}

.breadcrumb a.custom{
  --breadcrumb-bg:var(--breadcrumb-virtual-bg);
  --breadcrumb-bg-hover:var(--breadcrumb-virtual-bg-hover);
  --breadcrumb-text:var(--breadcrumb-virtual-text);
  --breadcrumb-text-hover:var(--breadcrumb-virtual-text-hover);
}

/* ===== Home-SVG ===== */
.breadcrumb .home-svg{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
  margin-right:8px;
  flex:0 0 auto;
  display: inline-block;   /* statt display:block; */
  margin-right: 8px;
}

/* ===== Kinder nie überschreiben ===== */
.breadcrumb a * ,
.breadcrumb span.current-item *{
  background:transparent !important;
  color:inherit !important;
}

/* ===== Chrome-Minheight-Fix ===== */
@supports (-webkit-hyphens:none){
  .breadcrumb a,
  .breadcrumb span.current-item{
    height:calc(var(--icon-size) + 2 * var(--pad-y) + 1px);
  }
}

/* Optional: Home-Text separat feinjustieren */
.breadcrumb a.home .crumb-label {
  transform: translateY(var(--translateY-home));
}


/* Nur den reinen Titel-Text vertikal schieben – NICHT die Kachel */
.breadcrumb .crumb-label,
.breadcrumb [property="v:title"] {
  display: inline-block;
  transform: translateY(var(--translateY-all)); /* + runter, - rauf */
}

/* Verlinkter letzter/aktueller Crumb (wenn du ihn per last_link aktivierst) */
.breadcrumb a[aria-current="page"]{
  /* dieselben “Last”-Farben wie beim span.current-item */
  --breadcrumb-bg: var(--breadcrumb-last-bg);
  --breadcrumb-bg-hover: var(--breadcrumb-last-bg-hover);
  --breadcrumb-text: var(--breadcrumb-last-text);
  --breadcrumb-text-hover: var(--breadcrumb-last-text-hover);

  /* letzter Kachel-Block darf nicht in den Pfeil überlappen */
  margin-right: 0;
}

/* (optional) falls NavXT statt "page" ein anderes aria-current setzt */
.breadcrumb a[aria-current="step"]{
  --breadcrumb-bg: var(--breadcrumb-last-bg);
  --breadcrumb-bg-hover: var(--breadcrumb-last-bg-hover);
  --breadcrumb-text: var(--breadcrumb-last-text);
  --breadcrumb-text-hover: var(--breadcrumb-last-text-hover);
  margin-right: 0;
}


/* 1) Letzter Crumb als Link – unabhängig von aria/current oder Klassen */
.breadcrumb > span:last-child > a{
  --breadcrumb-bg: var(--breadcrumb-last-bg);
  --breadcrumb-bg-hover: var(--breadcrumb-last-bg-hover);
  --breadcrumb-text: var(--breadcrumb-last-text);
  --breadcrumb-text-hover: var(--breadcrumb-last-text-hover);
  margin-right: 0; /* kein Pfeil-Überlappung am Ende */
}

/* 2) Falls dein Template dem letzten Link die Klasse "current-item" gibt */
.breadcrumb a.current-item{
  --breadcrumb-bg: var(--breadcrumb-last-bg);
  --breadcrumb-bg-hover: var(--breadcrumb-last-bg-hover);
  --breadcrumb-text: var(--breadcrumb-last-text);
  --breadcrumb-text-hover: var(--breadcrumb-last-text-hover);
  margin-right: 0;
}