/* CLAUDE: assets/css/pagination.css – Pagination-Styles (serverseitig, crawlbar) */
/* CLAUDE: Enthält: Pagination-Wrapper, Seiten-Links, Prev/Next, Current-State */
/* CLAUDE: Max. 200 Zeilen, nur Pagination-Styles */
/* CLAUDE: Ändern: Farben, Spacing nach Brand-Design anpassen */

/* ===== PAGINATION-WRAPPER ===== */

/* CLAUDE: Pagination-Container */
/* CLAUDE: Ändern: margin-top für mehr/weniger Abstand */
.pagination-wrapper {
  margin-top: clamp(32px, 4vw, 48px); /* CLAUDE: Fluid Margin (32px Mobil, 48px Desktop) */
  text-align: center; /* CLAUDE: Zentriert Pagination */
}

/* CLAUDE: Pagination-Liste (UL) */
/* CLAUDE: WordPress paginate_links() generiert <ul><li><a> Struktur bei type='list' */
.pagination-wrapper ul {
  display: flex; /* CLAUDE: Flexbox für horizontale Anordnung */
  justify-content: center; /* CLAUDE: Zentriert Items */
  gap: 8px; /* CLAUDE: Abstand zwischen Seiten-Links */
  list-style: none; /* CLAUDE: Entfernt Standard-Bullets */
  padding: 0; /* CLAUDE: Entfernt Standard-Padding */
  margin: 0; /* CLAUDE: Entfernt Standard-Margin */
}

/* CLAUDE: Pagination-Item (LI) */
.pagination-wrapper li {
  display: inline-block; /* CLAUDE: Inline-Block für flexible Breite */
}

/* ===== PAGINATION-LINKS ===== */

/* CLAUDE: Pagination-Link (A) + Current-State (SPAN) */
/* CLAUDE: Ändern: padding, border, color nach Design anpassen */
.pagination-wrapper a,
.pagination-wrapper span {
  display: block; /* CLAUDE: Block-Element für volle Klickfläche */
  min-width: 44px; /* CLAUDE: Min-Breite für Touch-Target (44×44px = WCAG-konform) */
  padding: 10px 16px; /* CLAUDE: Padding für gute Klickfläche */
  font-size: 0.9375rem; /* CLAUDE: 15px (gut lesbar) */
  font-weight: 500; /* CLAUDE: Medium-Weight */
  color: #333; /* CLAUDE: Dunkles Grau */
  text-decoration: none; /* CLAUDE: Entfernt Standard-Unterstrich */
  border: 1px solid #ddd; /* CLAUDE: Graue Umrandung */
  border-radius: 4px; /* CLAUDE: Leichte Abrundung */
  transition: all 0.2s ease; /* CLAUDE: Smooth Hover-Effekt */
}

/* CLAUDE: Pagination-Link Hover (nur für Links, nicht Current-State) */
/* CLAUDE: Ändern: background, color, border-color nach Brand-Farben anpassen */
.pagination-wrapper a:hover {
  background: var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldene Heritage-Farbe */
  color: #fff; /* CLAUDE: Weißer Text auf goldenem Hintergrund */
  border-color: var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldene Umrandung */
}

/* CLAUDE: Pagination-Link Focus (Tastatur-Navigation) */
/* CLAUDE: Wichtig für Accessibility (WCAG 2.1) */
.pagination-wrapper a:focus {
  outline: 2px solid var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldener Fokus-Ring */
  outline-offset: 2px; /* CLAUDE: Abstand zwischen Element und Fokus-Ring */
}

/* ===== CURRENT-STATE (AKTUELLE SEITE) ===== */

/* CLAUDE: Current-State (WordPress nutzt .current Klasse) */
/* CLAUDE: Ändern: background, color, border-color nach Brand-Farben anpassen */
.pagination-wrapper .current {
  background: var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldene Heritage-Farbe */
  color: #fff; /* CLAUDE: Weißer Text */
  border-color: var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldene Umrandung */
  font-weight: 600; /* CLAUDE: Fetter Text (betont aktive Seite) */
  cursor: default; /* CLAUDE: Default-Cursor (nicht klickbar) */
}

/* ===== PREV/NEXT-LINKS ===== */

/* CLAUDE: Prev/Next-Links (WordPress nutzt .prev und .next Klassen) */
/* CLAUDE: Optionales Styling für "Zurück"/"Weiter"-Buttons */
.pagination-wrapper .prev,
.pagination-wrapper .next {
  font-weight: 600; /* CLAUDE: Fetter Text (betont Navigation) */
}

/* CLAUDE: Prev/Next-Links mit Pfeilen (← / →) */
/* CLAUDE: Pfeile werden im PHP-Template gesetzt (prev_text/next_text Parameter) */
/* CLAUDE: Hier optional: Icon-Styling oder zusätzliche Effekte */

/* ===== DOTS (ELLIPSIS) ===== */

/* CLAUDE: Dots (WordPress nutzt .dots Klasse für "...") */
/* CLAUDE: Zeigt Ellipsis zwischen nicht angezeigten Seiten (z.B. 1 ... 5 6 7 ... 20) */
.pagination-wrapper .dots {
  color: #999; /* CLAUDE: Helles Grau (sekundäre Info) */
  cursor: default; /* CLAUDE: Default-Cursor (nicht klickbar) */
  border-color: transparent; /* CLAUDE: Keine Umrandung bei Dots */
}

/* ===== RESPONSIVE (MOBIL) ===== */

/* CLAUDE: Mobil (≤680px) – Kleinere Pagination-Links */
/* CLAUDE: Ändern: Breakpoint anpassen (z.B. 768px) */
@media (max-width: 680px) {
  .pagination-wrapper a,
  .pagination-wrapper span {
    min-width: 40px; /* CLAUDE: Kleinere Min-Breite auf Mobil */
    padding: 8px 12px; /* CLAUDE: Kleineres Padding */
    font-size: 0.875rem; /* CLAUDE: Kleinere Schrift (14px) */
  }

  .pagination-wrapper ul {
    gap: 6px; /* CLAUDE: Kleinerer Gap auf Mobil */
  }
}

/* ===== ACCESSIBILITY-OPTIMIERUNGEN ===== */

/* CLAUDE: Screen-Reader-Text (unsichtbar, aber für Screenreader verfügbar) */
/* CLAUDE: Nutzen für aria-label Ergänzungen */
.sr-only {
  position: absolute; /* CLAUDE: Aus dem Dokumentfluss nehmen */
  width: 1px; /* CLAUDE: Winzige Größe (nicht 0, sonst ignoriert) */
  height: 1px;
  padding: 0;
  margin: -1px; /* CLAUDE: Negatives Margin versteckt Element */
  overflow: hidden; /* CLAUDE: Verhindert Overflow */
  clip: rect(0, 0, 0, 0); /* CLAUDE: Clip-Bereich = 0 (unsichtbar) */
  white-space: nowrap; /* CLAUDE: Kein Zeilenumbruch */
  border: 0; /* CLAUDE: Keine Umrandung */
}