/* Zen SEO Blog-Roll Shortcode (Stephan 23.08.2026) -- 3 Spalten Desktop / 2 Tablet /
   1 Mobile, keine Luecke zwischen den Breakpoints (768/1100px, siehe Memory
   pattern-enfold-header-breakpoint-990 -- gleiche Lektion: Grenzen luecken-frei anlegen). */
.cz-br {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: #0b0c10;
}
/* Mobile: CTA-Banner erst NACH dem Featured-Post statt direkt darueber (Stephan
   23.08.2026: "mobile Platz sparen" -- above the fold soll zuerst redaktioneller
   Inhalt stehen). Reine Praesentations-Reihenfolge per CSS order, DOM-Reihenfolge
   bleibt unveraendert (wichtig fuer SEO/Lesereihenfolge fuer Screenreader/Crawler).
   Jedes direkte Kind von .cz-br braucht einen expliziten order-Wert, sonst faellt es
   auf den Default 0 zurueck und rutscht vor alles andere. */
/* Lead-Post-Duplikat bei Filter/Suche (kein "featured"-Hero verfuegbar): nur auf
   Mobile als Hero gezeigt, auf Desktop bleibt die reine Grid-Ansicht unveraendert --
   dafuer wird dort stattdessen die identische Karte an Grid-Position 1 ausgeblendet,
   damit der Post nicht doppelt erscheint. */
@media (min-width: 701px) {
  /* !important: .cz-br-hero{display:grid} steht spaeter in dieser Datei und wuerde
     bei gleicher Spezifitaet (beide einfache Klassen-Selektoren) sonst gewinnen --
     live so gefunden (Hero blieb trotz dieser Regel auf Desktop sichtbar). */
  .cz-br-hero--mobile-only { display: none !important; }
}
@media (max-width: 700px) {
  .cz-br-grid--hide-first-mobile .cz-br-card:first-child { display: none; }
}
@media (max-width: 700px) {
  .cz-br { display: flex; flex-direction: column; }
  .cz-br-page-title  { order: 1; }
  .cz-br-intro       { order: 2; }
  .cz-br-search      { order: 3; }
  .cz-br-filterbar   { order: 4; }
  .cz-br-hero        { order: 5; }
  .cz-br-cta         { order: 6; }
  .cz-br-grid        { order: 7; }
  .cz-br-pagination  { order: 8; }
}
.cz-br-page-title {
  font-size: 28px;
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -.3px;
}
.cz-br-intro {
  font-size: 14.5px;
  line-height: 1.6;
  color: #5b616e;
  max-width: 720px;
  margin: 0 0 10px;
}
/* Suchfeld -- echtes GET-<form>, crawlbar, kein JS noetig (Stephans eigene Prioritaet
   23.08.2026: "Suche + 'Alle Themen' + Sortierung"). Breiter als im ersten Entwurf
   (war 420px) -- bei ~2000 Artikeln ist die Suche das wichtigste Werkzeug auf der
   Seite und soll nicht wie ein kleines Nebenfeld wirken (Aussen-Review-Feedback). */
/* Button fuellt jetzt die komplette Hoehe der Pille aus (Stephan 23.08.2026: "Button
   so gross wie Outline") -- kein eigenes Padding/Radius am Button mehr noetig, weil
   overflow:hidden + der Radius der AEUSSEREN Pille die quadratischen Ecken des
   Buttons automatisch passend abrundet. Rechts daher kein Padding mehr auf der Box,
   der Button geht bis zum Rand. */
.cz-br-search {
  display: flex;
  align-items: stretch;
  gap: 8px;
  max-width: 460px;
  margin-bottom: 14px;
  padding: 0 0 0 14px;
  border: 1px solid #eceef1;
  border-radius: 24px;
  background: #fff;
  overflow: hidden;
}
.cz-br-search svg { flex: 0 0 auto; align-self: center; color: #5b616e; }
.cz-br-search input[type="search"] {
  flex: 1;
  align-self: center;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 13.5px;
  /* War trotz "background: transparent" grau (rgb(248,248,248)) -- eine speziellere
     Regel (Theme-Default fuer input[type=search]) gewann ohne !important, live per
     getComputedStyle nachgewiesen. */
  background: transparent !important;
}
.cz-br-search button {
  flex: 0 0 auto;
  border: none;
  background: #0b0c10;
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  /* Vertikales Padding gibt der ganzen Zeile ihre Hoehe vor (Icon/Input haben
     align-self:center und tragen selbst nichts zur Hoehe bei) -- ohne das faellt
     die Box auf reine Text-Content-Hoehe zusammen (~19px statt der gewuenschten
     vollen Pillenhoehe, live so gemessen und sofort gefixt). */
  padding: 16px 20px;
  border-radius: 0;
  cursor: pointer;
}
.cz-br-search button:hover { background: #262626; }

.cz-br-filterbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}
/* Chips in einem eigenen Wrapper (siehe PHP-Kommentar) -- auf Desktop unsichtbar
   (display:contents, Kinder verhalten sich wie direkte Kinder von .cz-br-filterbar,
   identisches Ergebnis wie vorher). Erst auf Mobile wird daraus eine einzeilige,
   horizontal swipebare Leiste (Stephan 23.08.2026: "mobile Platz sparen, Tags in
   eine Reihe slide") -- "Alle Themen" bleibt ausserhalb, bleibt immer sichtbar. */
.cz-br-filter-scroll { display: contents; }
@media (max-width: 700px) {
  .cz-br-filterbar { flex-wrap: nowrap; }
  .cz-br-filter-scroll {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cz-br-filter-scroll::-webkit-scrollbar { display: none; }
  .cz-br-filter-scroll .cz-br-filter-chip { flex: 0 0 auto; white-space: nowrap; }
  .cz-br-more-topics { flex: 0 0 auto; }
}
/* "Alle Themen ▾" -- natives <details>/<summary>, damit die restlichen echten
   Kategorien nicht als 44 gleichrangige Chips die Leiste sprengen (Review-Wunsch,
   von Stephan selbst als "genau richtig" priorisiert). Das Panel haengt an
   .cz-br-filterbar (nicht am schmalen <details>-Chip selbst), sonst ragt es auf
   Mobile ueber den linken Viewport-Rand hinaus, wenn der Chip in eine eigene Zeile
   umbricht -- live per Puppeteer auf 390px Breite reproduziert und gefixt. */
.cz-br-more-topics { position: static; }
.cz-br-more-topics summary {
  list-style: none;
  cursor: pointer;
}
.cz-br-more-topics summary::-webkit-details-marker { display: none; }
.cz-br-more-topics summary::after { content: ' \25BE'; font-size: 10px; }
.cz-br-more-topics[open] summary::after { content: ' \25B4'; }
.cz-br-more-panel {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: min(480px, 90vw);
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid #eceef1;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(16, 20, 24, .1);
  padding: 14px 16px;
  /* Multicolumn statt Grid: Gruppen fliessen nacheinander in die Spalten statt in
     starre Zeilenpaare -- bei Grid liess eine kuerzere Gruppe (z.B. 3 Einträge) neben
     einer laengeren (4 Eintraege) einen haesslichen Leerraum, weil beide dieselbe
     Zeilenhoehe teilen mussten (per Screenshot von Stephan bemaengelt: "muss noch
     kompakter, schoener"). */
  column-count: 2;
  column-gap: 22px;
}
@media (max-width: 600px) {
  .cz-br-more-panel { column-count: 1; }
}
.cz-br-more-group {
  break-inside: avoid;
  margin-bottom: 14px;
}
/* !important noetig: Enfold setzt global eine grosse, nicht-uppercase h3-Groesse --
   ohne Override erschien "Medizin" etc. als grosse Ueberschrift statt als kompakte
   Caption (gleicher Override-Kampf wie an mehreren Stellen zuvor in diesem Plugin). */
.cz-br-more-group h3 {
  margin: 0 0 6px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  color: #9299a3 !important;
}
.cz-br-more-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cz-br-more-group a {
  display: block;
  padding: 3px 0;
  font-size: 13px;
  line-height: 1.3;
  color: #0b0c10;
  text-decoration: none;
}
.cz-br-more-group a:hover { color: #5b616e; }
.cz-br-more-group a.is-active { font-weight: 700; }

.cz-br-filter-chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  border: 1px solid #eceef1;
  background: #fff;
  color: #0b0c10;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.cz-br-filter-chip:hover { background: #f6f7f8; color: #0b0c10 !important; }
.cz-br-filter-chip.is-active {
  background: #0b0c10;
  color: #fff !important;
  border-color: #0b0c10;
}
.cz-br-filter-chip.is-active:hover { background: #262626; color: #fff !important; }
/* Conversion-Banner: schlanker Direct-Funnel-Anker zwischen Filterleiste und Content
   (Review-Wunsch: "Patient findet keinen direkten Startpunkt"). */
.cz-br-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #f6f7f8;
  border: 1px solid #eceef1;
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 20px;
}
.cz-br-cta-text {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  max-width: 640px;
}
.cz-br-cta-btn {
  flex: 0 0 auto;
  background: #0b0c10;
  color: #fff !important;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 24px;
  white-space: nowrap;
}
.cz-br-cta-btn:hover { background: #262626; color: #fff !important; }

/* Hero: EIN grosser Post, Bild links/Text rechts (Review-Wunsch: "klarer
   Einstiegspunkt statt Wall of Cards"). */
.cz-br-hero {
  display: grid;
  grid-template-columns: 1fr;
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 20, 24, .04), 0 8px 24px rgba(16, 20, 24, .06);
  margin-bottom: 24px;
}
.cz-br-hero-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: #eef1ee;
  overflow: hidden;
}
.cz-br-hero-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cz-br-hero-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; }
.cz-br-hero-title {
  font-size: 22px;
  font-weight: 800;
  margin: 0;
  line-height: 1.25;
}
.cz-br-hero-title a { color: inherit; text-decoration: none; }
.cz-br-hero-title a:hover { text-decoration: underline; }
.cz-br-hero-excerpt {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #5b616e;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cz-br-hero-link {
  color: #0b0c10;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 2px;
}
.cz-br-hero-link:hover { text-decoration: underline; }
@media (min-width: 900px) {
  .cz-br-hero { grid-template-columns: 1.1fr 1fr; }
  /* War aspect-ratio:auto;height:100% -- eine zirkulaere Bezugsgroesse (die Bildbox
     wollte 100% der Zeilenhoehe, die Zeilenhoehe wurde aber selbst wieder vom Inhalt
     bestimmt). Der Browser loeste das ueber die Bild-Eigengroesse auf und ergab dabei
     ~363px Hoehe -- der Hero wirkte dadurch ueberdimensioniert (Review-Wunsch: "20-30%
     weniger Hoehe"). Feste Hoehe ist vorhersagbar und ca. 23% kuerzer. */
  .cz-br-hero-thumb { aspect-ratio: auto; height: 280px; }
  .cz-br-hero-body { justify-content: center; padding: 24px 32px; }
  .cz-br-hero-title { font-size: 24px; }
}

.cz-br-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .cz-br-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .cz-br-grid { grid-template-columns: repeat(3, 1fr); }
}
.cz-br-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 20, 24, .04), 0 8px 24px rgba(16, 20, 24, .06);
  transition: transform .15s ease, box-shadow .15s ease;
}
.cz-br-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(16, 20, 24, .08), 0 16px 32px rgba(16, 20, 24, .1);
}
.cz-br-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: #eef1ee;
  overflow: hidden;
}
.cz-br-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Placeholder-Icon statt leerer grauer Flaeche, wenn ein Post kein Beitragsbild hat
   (echte Datenluecke bei ein paar Posts, siehe Kommentar im PHP) -- reines CSS, kein
   externes Platzhalterbild als Abhaengigkeit. */
.cz-br-noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: #eef1ee;
}
.cz-br-noimg::before {
  content: '';
  width: 34px;
  height: 34px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c4c9cf' stroke-width='1.6'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-5-5-9 9'/%3E%3C/svg%3E");
}
/* Badge-Farbe variiert nach Themen-Silo statt immer schwarz (Review-Wunsch: "fast
   jedes Bild zeigt CANNABIS" -- die generische Wurzelkategorie wurde vorher blind
   als Badge genommen; jetzt zeigt cz_blog_roll_cat_silo() eine spezifischere
   Kategorie UND faerbt das Badge nach Themenfamilie ein). */
/* War kurz farbig nach Themen-Silo variiert -- auf Wunsch 23.08.2026 wieder einheitlich
   schwarz ("nicht blau, auch schwarz") und etwas kleiner. */
.cz-br-cat {
  position: absolute;
  left: 10px;
  top: 10px;
  background: rgba(11, 12, 16, .78);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
/* Karten-Ausrichtung (Review-Wunsch: "alle Karten auf einer Linie abschliessen"):
   min-/max-height DIREKT auf line-clamp-Elemente kollidierte mit dem Clamp selbst
   (Chromium liess dann eine dritte Zeile leicht durchscheinen -- Stephan 23.08.2026
   per Screenshot gemeldet, live reproduziert und wieder verworfen). Stattdessen
   strecken sich die Grid-Zeilen ohnehin gleich hoch (Grid-Default align-items:stretch),
   .cz-br-body wird dadurch pro Karte automatisch gleich hoch, und die Meta-Zeile wird
   per .cz-br-card .cz-br-meta{margin-top:auto} (siehe unten) ans Kartenende gedrueckt --
   Titel/Excerpt behalten ihr eigenes, unangetastetes line-clamp, keine Konflikte moeglich. */
.cz-br-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
  padding: 14px 16px 16px;
}
.cz-br-title {
  font-size: 15px;
  font-weight: 700 !important;
  line-height: 1.3;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cz-br-title a {
  color: inherit;
  text-decoration: none;
}
.cz-br-title a:hover { text-decoration: underline; }
.cz-br-excerpt {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #5b616e;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.cz-br-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: #48505c;
  padding-top: 2px;
}
/* margin-top:auto NUR fuer Cards (drueckt die Meta-Zeile ans Kartenende, damit alle
   Karten trotz unterschiedlich langer Titel/Excerpts buendig abschliessen). War
   vorher auf .cz-br-meta allgemein gesetzt -- .cz-br-meta wird aber per
   cz_blog_roll_meta_html() AUCH im Hero verwendet, der ebenfalls ein Flex-Container
   ist. Dort riss margin-top:auto die Meta-Zeile an den unteren Rand und liess
   zwischen Exzerpt und Datum eine grosse Luecke entstehen -- live per
   getBoundingClientRect nachgewiesen (Luecke ~138px) und genau das vom Aussen-Review
   bemaengelte "Text wirkt nach oben verloren, zu viel Leerraum". */
.cz-br-card .cz-br-meta { margin-top: auto; }
.cz-br-dot { opacity: .6; }
.cz-br-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 0;
  color: #5b616e;
  font-size: 14px;
}
/* Statische Pagination (/blog/, /blog/page/2/, ...) statt "Mehr laden" per AJAX. */
.cz-br-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 32px;
}
.cz-br-page-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: 10px;
  border: 1px solid #eceef1;
  background: #fff;
  color: #0b0c10;
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
}
a.cz-br-page-link:hover { background: #f6f7f8; }
.cz-br-page-current {
  background: #0b0c10;
  color: #fff;
  border-color: #0b0c10;
}
.cz-br-page-link.prev, .cz-br-page-link.next { padding: 0 16px; }
.cz-br-page-dots {
  border: none;
  background: none;
  color: #5b616e;
}