/* CLAUDE: Navigations-Bausteine des Blogs - Breadcrumb und Blaetterfunktion */
/* CLAUDE: Warum getrennt von pages/blog.css: Projektregel max. 200 Zeilen je Datei. */
/* CLAUDE: Beide erscheinen auf Uebersicht, Kategorie-Archiv und Einzelbeitrag - */
/* CLAUDE: darum eine Komponente statt Seiten-CSS. */
/* CLAUDE: Anpassen: Alle Werte stammen aus den Tokens in base.css. */

/* CLAUDE: Breadcrumb - horizontale Liste ohne Aufzaehlungszeichen */
.lhi-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--lhi-space-xs);
    list-style: none;
    margin: 0 0 var(--lhi-space-md);
    padding: 0;
    font-family: var(--lhi-font-sans);
    font-size: var(--lhi-font-size-xs);
    color: var(--lhi-color-graphite);
}

/* CLAUDE: Einzelnes Glied - Flex, damit Text und Trenner auf einer Linie sitzen */
.lhi-breadcrumb__item {
    display: flex;
    gap: var(--lhi-space-xs);
}

.lhi-breadcrumb__item a {
    color: var(--lhi-color-graphite);
}

/* CLAUDE: Trennzeichen - blasser als der Text, rein dekorativ */
.lhi-breadcrumb__sep {
    color: var(--lhi-color-border);
}

/* CLAUDE: Blaetterfunktion - zentriert unter dem Kartenraster */
.lhi-blog-pagination {
    margin-block-start: var(--lhi-space-lg);
    font-family: var(--lhi-font-sans);
}

.lhi-blog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--lhi-space-xs);
}

/* CLAUDE: Seitenzahlen als Schaltflaechen - 44x44px ist die WCAG-Mindestgroesse */
/* CLAUDE: fuer Touch-Ziele (Erfolgskriterium 2.5.8 Target Size). */
.lhi-blog-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding-inline: var(--lhi-space-xs);
    border: 1px solid var(--lhi-color-border);
    border-radius: var(--lhi-radius-sm);
    color: var(--lhi-color-text);
    text-decoration: none;
}

.lhi-blog-pagination .page-numbers:hover {
    border-color: var(--lhi-color-gold);
}

/* CLAUDE: Aktuelle Seite hervorheben - Kontrast weiss auf Akzentrot */
.lhi-blog-pagination .page-numbers.current {
    background: var(--lhi-color-accent);
    border-color: var(--lhi-color-accent);
    color: var(--lhi-color-white);
}