/* CLAUDE: assets/css/blog.css – Blog-spezifische Styles */
/* CLAUDE: Enthält: Blog-Layout (Main + Sidebar), Sidebar-Widgets, Themen-Liste, Badges, etc. */
/* CLAUDE: Max. 200 Zeilen, nur Blog-spezifische Styles (wiederverwendet .ddi-grid/.ddi-card aus cards.css) */
/* CLAUDE: Ändern: Farben, Spacing, Breakpoints nach Bedarf anpassen */

/* ===== BLOG-LAYOUT (MAIN + SIDEBAR) ===== */

/* CLAUDE: Grid-Wrapper – 70% Main + 30% Sidebar */
/* CLAUDE: Ändert: grid-template-columns für andere Aufteilung (z.B. 60/40) */
.blog-grid-wrapper {
  display: grid; /* CLAUDE: CSS Grid für flexibles Layout */
  grid-template-columns: 1fr 350px; /* CLAUDE: Main (fluid) + Sidebar (350px) */
  gap: clamp(24px, 3vw, 48px); /* CLAUDE: Fluid Gap (24px Mobil, 48px Desktop) */
  margin: 0 30px; /* CLAUDE: 30px Margin links/rechts (Anforderung) */
  margin-top: clamp(32px, 4vw, 64px); /* CLAUDE: Abstand zum Header */
}

/* CLAUDE: Main-Bereich (Blog-Artikel-Grid) */
/* CLAUDE: min-width: 0 verhindert Grid-Overflow (verhindert, dass lange Wörter Grid sprengen) */
.blog-main {
  min-width: 0; /* CLAUDE: Grid-Overflow-Fix */
}

/* CLAUDE: Sidebar */
.blog-sidebar {
  position: relative; /* CLAUDE: Für Sticky-Positionierung */
}

/* ===== STICKY SIDEBAR (AB TABLET) ===== */

/* CLAUDE: Sticky Sidebar (klebt beim Scrollen am Top) */
/* CLAUDE: Nur ab 1025px (Desktop), nicht auf Mobil/Tablet */
/* CLAUDE: Ändern: Breakpoint anpassen (z.B. 1200px für größere Screens) */
@media (min-width: 1025px) {
  .blog-sidebar__inner[data-sticky-sidebar] {
    position: sticky; /* CLAUDE: Sticky-Positionierung */
    top: 100px; /* CLAUDE: 100px vom Top (Platz für Header) */
    /* CLAUDE: max-height entfernt – Sidebar soll ihre natürliche Höhe haben */
    /* CLAUDE: overflow-y entfernt – kein Scrollbalken in Sidebar */
  }
}

/* ===== SIDEBAR-WIDGETS ===== */

/* CLAUDE: Widget-Container (Basis-Styles für alle Widgets) */
/* CLAUDE: Ändern: padding, border-radius, box-shadow nach Design anpassen */
.sidebar-widget {
  margin-bottom: 32px; /* CLAUDE: Abstand zwischen Widgets */
  padding: clamp(16px, 2vw, 20px); /* CLAUDE: Fluid Padding (16px Mobil, 20px Desktop) */
  background: #fff; /* CLAUDE: Weißer Hintergrund */
  border-radius: 8px; /* CLAUDE: Abgerundete Ecken */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); /* CLAUDE: Sanfter Schatten */
}

/* CLAUDE: Widget-Titel */
/* CLAUDE: Ändern: font-size, color nach Design anpassen */
.sidebar-widget__title {
  margin-top: 0; /* CLAUDE: Entfernt Standard-Margin oben */
  margin-bottom: 16px; /* CLAUDE: Abstand zum Widget-Inhalt */
  font-size: 1.25rem; /* CLAUDE: Etwas größer als Fließtext */
  font-weight: 600; /* CLAUDE: Fett (Semi-Bold) */
  color: #333; /* CLAUDE: Dunkles Grau (nicht Schwarz, besser lesbar) */
}

/* ===== THEMEN-LISTE ===== */

/* CLAUDE: Themen-Liste (UL) */
.themen-list {
  list-style: none; /* CLAUDE: Entfernt Standard-Bullets */
  padding: 0; /* CLAUDE: Entfernt Standard-Padding */
  margin: 0; /* CLAUDE: Entfernt Standard-Margin */
}

/* CLAUDE: Themen-Item (LI) */
.themen-list li {
  margin-bottom: 8px; /* CLAUDE: Abstand zwischen Items */
}

/* CLAUDE: Themen-Item mit Children (hat Unterkategorien) */
.themen-list li.has-children {
  margin-bottom: 12px; /* CLAUDE: Mehr Abstand wenn Accordion vorhanden */
}

/* CLAUDE: Themen-Item-Header (Toggle + Link zusammen) */
.thema-item__header {
  display: flex; /* CLAUDE: Flexbox für Toggle + Link nebeneinander */
  align-items: center; /* CLAUDE: Vertikal zentrieren */
  gap: 4px; /* CLAUDE: Abstand zwischen Toggle und Link */
}

/* CLAUDE: Toggle-Button (Accordion) */
.thema-toggle {
  flex-shrink: 0; /* CLAUDE: Breite nicht verkleinern */
  width: 24px; /* CLAUDE: Feste Breite */
  height: 24px; /* CLAUDE: Feste Höhe */
  padding: 0; /* CLAUDE: Kein Padding */
  border: none; /* CLAUDE: Kein Border */
  background: transparent; /* CLAUDE: Transparenter Hintergrund */
  cursor: pointer; /* CLAUDE: Pointer-Cursor */
  display: flex; /* CLAUDE: Flexbox für Icon-Zentrierung */
  align-items: center; /* CLAUDE: Vertikal zentrieren */
  justify-content: center; /* CLAUDE: Horizontal zentrieren */
  transition: background 0.2s ease; /* CLAUDE: Smooth Hover */
  border-radius: 4px; /* CLAUDE: Leichte Abrundung */
}

/* CLAUDE: Toggle-Button Hover */
.thema-toggle:hover {
  background: #f0f0f0; /* CLAUDE: Heller Hintergrund bei Hover */
}

/* CLAUDE: Toggle-Icon (Pfeil ▶) */
.thema-toggle__icon {
  font-size: 10px; /* CLAUDE: Kleine Pfeil-Größe */
  color: #666; /* CLAUDE: Mittleres Grau */
  transition: transform 0.3s ease; /* CLAUDE: Smooth Rotation */
  display: inline-block; /* CLAUDE: Nötig für Transform */
}

/* CLAUDE: Toggle-Icon wenn aufgeklappt (90° Rotation) */
.thema-toggle[aria-expanded="true"] .thema-toggle__icon {
  transform: rotate(90deg); /* CLAUDE: Pfeil zeigt nach unten */
}

/* CLAUDE: Themen-Link (A) */
/* CLAUDE: Ändern: padding, color, hover-color nach Design anpassen */
.thema-link {
  flex: 1; /* CLAUDE: Nimmt restlichen Platz ein */
  display: block; /* CLAUDE: Block-Element */
  padding: 8px 12px; /* CLAUDE: Padding für größere Klickfläche */
  color: #333; /* CLAUDE: Dunkles Grau */
  text-decoration: none; /* CLAUDE: Entfernt Standard-Unterstrich */
  border-radius: 4px; /* CLAUDE: Leichte Abrundung */
  transition: background 0.2s ease; /* CLAUDE: Smooth Hover-Effekt */
}

/* CLAUDE: Themen-Link Hover */
.thema-link:hover {
  background: #f5f5f5; /* CLAUDE: Helles Grau bei Hover */
}

/* CLAUDE: Themen-Link Aktiv (aktuell gefiltertes Thema) */
/* CLAUDE: Ändern: background, color nach Brand-Farben anpassen */
.thema-item--active .thema-link {
  background: var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldene Heritage-Farbe */
  color: #fff; /* CLAUDE: Weißer Text auf goldenem Hintergrund */
  font-weight: 600; /* CLAUDE: Fetter Text */
}

/* CLAUDE: Themen-Count (Artikel-Anzahl) */
.thema-count {
  font-size: 0.875rem; /* CLAUDE: Etwas kleiner als Text */
  opacity: 0.7; /* CLAUDE: Leicht transparent (sekundäre Info) */
}

/* CLAUDE: Sub-Themen-Liste (verschachtelt) */
.themen-list--sub {
  margin-top: 8px; /* CLAUDE: Abstand zum Parent */
  margin-left: 20px; /* CLAUDE: Einrückung (zeigt Hierarchie) */
  font-size: 0.9rem; /* CLAUDE: Etwas kleiner als Parent-Themen */
  overflow: hidden; /* CLAUDE: Nötig für Slide-Animation */
  transition: max-height 0.3s ease-out, opacity 0.3s ease; /* CLAUDE: Smooth Accordion */
}

/* CLAUDE: Sub-Themen-Liste versteckt (via [hidden] Attribut) */
.themen-list--sub[hidden] {
  display: block; /* CLAUDE: Überschreibt display:none von [hidden], damit Transition funktioniert */
  max-height: 0; /* CLAUDE: Höhe 0 (versteckt) */
  opacity: 0; /* CLAUDE: Transparent */
  margin-top: 0; /* CLAUDE: Kein Margin wenn versteckt */
}

/* CLAUDE: Sub-Themen-Liste sichtbar (ohne [hidden]) */
.themen-list--sub:not([hidden]) {
  max-height: 1000px; /* CLAUDE: Große Höhe (für lange Listen) */
  opacity: 1; /* CLAUDE: Voll sichtbar */
}

/* CLAUDE: "Filter zurücksetzen"-Button */
/* CLAUDE: Ändern: padding, background, color nach Design anpassen */
.btn-reset-filter {
  display: inline-block; /* CLAUDE: Inline-Block für Padding */
  margin-top: 16px; /* CLAUDE: Abstand zur Themen-Liste */
  padding: 8px 16px; /* CLAUDE: Padding für Button-Look */
  font-size: 0.875rem; /* CLAUDE: Etwas kleiner */
  font-weight: 600; /* CLAUDE: Fett */
  color: #666; /* CLAUDE: Mittleres Grau */
  text-decoration: none; /* CLAUDE: Entfernt Unterstrich */
  border: 1px solid #ddd; /* CLAUDE: Graue Umrandung */
  border-radius: 4px; /* CLAUDE: Abgerundete Ecken */
  transition: all 0.2s ease; /* CLAUDE: Smooth Hover-Effekt */
}

/* CLAUDE: Reset-Button Hover */
.btn-reset-filter:hover {
  background: #f5f5f5; /* CLAUDE: Helles Grau bei Hover */
  border-color: #ccc; /* CLAUDE: Dunklere Umrandung */
}

/* ===== TAG-CLOUD ===== */

/* CLAUDE: Tag-Cloud-Container */
.tag-cloud {
  display: flex; /* CLAUDE: Flexbox für flexible Tags-Anordnung */
  flex-wrap: wrap; /* CLAUDE: Umbrechen wenn zu lang */
  gap: 8px; /* CLAUDE: Abstand zwischen Tags */
}

/* CLAUDE: Tag-Link */
/* CLAUDE: Ändern: padding, background, color nach Design anpassen */
.tag-link {
  display: inline-block; /* CLAUDE: Inline-Block für Padding */
  padding: 6px 12px; /* CLAUDE: Padding für Tag-Look */
  font-size: 0.875rem; /* CLAUDE: Basis-Größe (wird dynamisch überschrieben) */
  color: #666; /* CLAUDE: Mittleres Grau */
  text-decoration: none; /* CLAUDE: Entfernt Unterstrich */
  background: #f5f5f5; /* CLAUDE: Helles Grau */
  border-radius: 16px; /* CLAUDE: Stark abgerundete Ecken (Pill-Form) */
  transition: all 0.2s ease; /* CLAUDE: Smooth Hover-Effekt */
}

/* CLAUDE: Tag-Link Hover */
/* CLAUDE: Ändern: background, color nach Brand-Farben anpassen */
.tag-link:hover {
  background: var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldene Heritage-Farbe */
  color: #fff; /* CLAUDE: Weißer Text */
}

/* ===== RECENT-POSTS ===== */

/* CLAUDE: Recent-Posts-Liste */
.recent-posts-list {
  list-style: none; /* CLAUDE: Entfernt Standard-Bullets */
  padding: 0; /* CLAUDE: Entfernt Standard-Padding */
  margin: 0; /* CLAUDE: Entfernt Standard-Margin */
}

/* CLAUDE: Recent-Post-Item */
.recent-post-item {
  margin-bottom: 16px; /* CLAUDE: Abstand zwischen Items */
}

/* CLAUDE: Recent-Post-Link */
.recent-post-link {
  display: flex; /* CLAUDE: Flexbox für Thumbnail + Text nebeneinander */
  gap: 12px; /* CLAUDE: Abstand zwischen Thumbnail und Text */
  text-decoration: none; /* CLAUDE: Entfernt Unterstrich */
  color: inherit; /* CLAUDE: Erbt Textfarbe (verhindert blaue Links) */
  transition: opacity 0.2s ease; /* CLAUDE: Smooth Hover-Effekt */
}

/* CLAUDE: Recent-Post-Link Hover */
.recent-post-link:hover {
  opacity: 0.8; /* CLAUDE: Leicht transparent bei Hover */
}

/* CLAUDE: Recent-Post-Thumbnail */
.recent-post-thumb {
  flex-shrink: 0; /* CLAUDE: Thumbnail behält feste Größe */
  width: 60px; /* CLAUDE: Feste Breite */
  height: 60px; /* CLAUDE: Feste Höhe (quadratisch) */
  overflow: hidden; /* CLAUDE: Verhindert Overflow */
  border-radius: 4px; /* CLAUDE: Leichte Abrundung */
}

/* CLAUDE: Thumbnail-Bild */
.recent-post-thumb img {
  width: 100%; /* CLAUDE: Volle Breite */
  height: 100%; /* CLAUDE: Volle Höhe */
  object-fit: cover; /* CLAUDE: Bild wird beschnitten (verhindert Verzerrung) */
}

/* CLAUDE: Recent-Post-Info (Titel + Datum) */
.recent-post-info {
  flex: 1; /* CLAUDE: Nimmt restlichen Platz ein */
  min-width: 0; /* CLAUDE: Verhindert Overflow bei langen Titeln */
}

/* CLAUDE: Recent-Post-Titel */
.recent-post-title {
  margin: 0 0 4px; /* CLAUDE: Abstand zum Datum */
  font-size: 0.9rem; /* CLAUDE: Etwas kleiner als Standard */
  font-weight: 600; /* CLAUDE: Fett */
  line-height: 1.3; /* CLAUDE: Kompakte Line-Height */
  color: #333; /* CLAUDE: Dunkles Grau */
}

/* CLAUDE: Recent-Post-Datum */
.recent-post-date {
  font-size: 0.75rem; /* CLAUDE: Klein */
  color: #999; /* CLAUDE: Helles Grau (sekundäre Info) */
}

/* ===== BADGES (THEMEN IN CARDS) ===== */

/* CLAUDE: Badge-Container */
.ddi-card__categories {
  display: flex; /* CLAUDE: Flexbox für Badges nebeneinander */
  flex-wrap: wrap; /* CLAUDE: Umbrechen wenn zu lang */
  gap: 6px; /* CLAUDE: Abstand zwischen Badges */
  margin-bottom: 10px; /* CLAUDE: Abstand zum Titel */
  margin-top: 20px; /* CLAUDE: Abstand nach Foto (Anforderung: Abstand erhöhen) */
  justify-content: center; /* CLAUDE: Badges mittig anzeigen (Anforderung) */
}

/* CLAUDE: Badge */
/* CLAUDE: Ändern: padding, background, color nach Brand-Farben anpassen */
.badge {
  display: inline-block; /* CLAUDE: Inline-Block für Padding */
  padding: 4px 10px; /* CLAUDE: Padding für Badge-Look */
  font-size: 0.75rem; /* CLAUDE: Klein */
  font-weight: 600; /* CLAUDE: Fett */
  text-transform: uppercase; /* CLAUDE: Großbuchstaben */
  border-radius: 4px; /* CLAUDE: Leichte Abrundung */
  text-decoration: none; /* CLAUDE: Keine Unterstreichung (Anforderung) */
}

/* CLAUDE: Badge Thema (goldene Heritage-Farbe) */
/* CLAUDE: Ändern: background, color nach Brand-Farben anpassen */
.badge--thema {
  background: var(--color-heritage-gold, #C19A6B); /* CLAUDE: Goldene Heritage-Farbe */
  color: #fff; /* CLAUDE: Weißer Text */
  text-decoration: none; /* CLAUDE: Keine Unterstreichung (Anforderung) */
}

/* ===== RESPONSIVE (TABLET + MOBIL) ===== */

/* CLAUDE: Tablet (≤1024px) – Sidebar unter Main */
/* CLAUDE: Ändern: Breakpoint anpassen (z.B. 1200px) */
@media (max-width: 1024px) {
  .blog-grid-wrapper {
    grid-template-columns: 1fr; /* CLAUDE: Single-Column (Sidebar unter Main) */
  }

  .blog-sidebar {
    margin-top: 48px; /* CLAUDE: Abstand zu Main-Bereich */
  }

  /* CLAUDE: Sticky-Funktion deaktivieren (nur auf Desktop) */
  .blog-sidebar__inner[data-sticky-sidebar] {
    position: static; /* CLAUDE: Statische Positionierung auf Tablet/Mobil */
  }
}

/* CLAUDE: Mobil (≤680px) – Weitere Anpassungen */
/* CLAUDE: Ändern: Breakpoint anpassen (z.B. 768px) */
@media (max-width: 680px) {
  .blog-grid-wrapper {
    margin: 0 20px; /* CLAUDE: Kleinere Margins auf Mobil */
  }

  .sidebar-widget {
    padding: 16px; /* CLAUDE: Kleineres Padding auf Mobil */
  }
}