/*
 * Styles für Single-Templates und Archive-Listen:
 *  · Glossar-Liste + A-Z-Navigation
 *  · Glossar-Cards
 *  · Glossar-Single (Definition)
 *  · Insights-Grid
 */

/* ----------------------- Glossar-Suche ----------------------- */
/* Weniger Luft zwischen Hero-Text und Suchfeld (Standard-bf-section = 100px).
 * `.bf-glossary.bf-section` (0,2,0) schlägt `section.bf-section` (0,1,1). */
.bf-glossary.bf-section { padding-top: 24px; }

.bf-glossary__searchbox {
  position: relative;
  max-width: 540px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.bf-glossary__searchbox-icon {
  position: absolute;
  left: 18px;
  color: var(--bf-gray-60, #7D8487);
  pointer-events: none;
}
.bf-glossary__searchbox-input {
  width: 100%;
  padding: 14px 48px 14px 50px;
  border: 1.5px solid var(--bf-gray-20, #D4D6D7);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  color: var(--bf-gray-dark, #263237);
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.bf-glossary__searchbox-input:focus {
  border-color: var(--bf-turquoise, #00C3D6);
  box-shadow: 0 0 0 4px rgba(0, 195, 214, .14);
}
.bf-glossary__searchbox-clear {
  position: absolute;
  right: 14px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--bf-beige-light, #F7F7F5);
  border: 0;
  color: var(--bf-gray-dark, #263237);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .15s;
}
.bf-glossary__searchbox-clear:hover { background: var(--bf-gray-20, #D4D6D7); }
.bf-glossary__searchbox-clear[hidden] { display: none; }

.bf-glossary__no-results {
  max-width: 540px;
  margin: 32px auto 0;
  padding: 18px 22px;
  text-align: center;
  background: var(--bf-beige-light, #F7F7F5);
  border-radius: var(--radius-md, 20px);
  color: var(--bf-gray-80, #515B5F);
}
.bf-glossary__no-results[hidden] { display: none; }
.bf-glossary__group[hidden],
.bf-glossary-card[hidden] { display: none; }

/* =====================================================================
 * Glossar — Zwei-Spalten-App (Design: design/brainfood-glossar.html)
 * ===================================================================== */

/* Breadcrumb + Hero (Design .crumb / .ph) — transparent auf Beige, schlank. */
.bf-gloss-crumb { padding: 24px 0 8px; font-size: 13px; color: var(--bf-gray-60, #7D8487); }
.bf-gloss-crumb a { color: inherit; text-decoration: none; }
.bf-gloss-crumb a:hover { color: var(--bf-green-dark-1, #0B696E); }
.bf-gloss-crumb__sep { margin: 0 8px; opacity: .5; }

.bf-gloss-hero { padding: 24px 0 8px; text-align: center; }
.bf-gloss-hero__inner { max-width: 760px; margin: 0 auto; }
.bf-gloss-hero__eyebrow {
  display: inline-block;
  color: var(--bf-pink, #DD1F5A);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 16px;
}
.bf-gloss-hero__title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400; line-height: 1.04;
  letter-spacing: -0.025em;
  color: var(--bf-gray-dark, #263237);
  margin: 0 0 16px;
}
.bf-gloss-hero__title em { font-style: italic; color: var(--bf-turquoise-dark, #00A5B6); }
.bf-gloss-hero__lead {
  font-size: 18px; line-height: 1.55;
  color: var(--bf-gray-80, #515B5F);
  max-width: 600px; margin: 0 auto;
}

.bf-gloss.bf-section { padding-top: 40px; }
.bf-gloss__search { max-width: 640px; margin: 0 auto; }

/* A-Z Navigation (umbrechend, zentriert — kein horizontales Scrollen).
 * margin-top = Abstand unter dem Suchfeld (Suchfeld mittig zwischen Hero-Unterzeile
 * und A-Z-Leiste). */
.bf-gloss__az {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  align-items: center;
  max-width: 1100px;
  margin: 40px auto 36px;
}
.bf-gloss__az-btn {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 18px; line-height: 1;
  color: var(--bf-gray-40, #A8ADAF);
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  transition: all 0.18s var(--ease);
}
.bf-gloss__az-btn.is-available { color: var(--bf-gray-dark, #263237); }
.bf-gloss__az-btn.is-available:hover { color: var(--bf-turquoise-dark, #00A5B6); background: #fff; }
.bf-gloss__az-btn.is-active { color: var(--bf-turquoise, #00C3D6); transform: scale(1.15); }
.bf-gloss__az-btn.is-disabled { color: var(--bf-gray-20, #D4D6D7); cursor: not-allowed; }

/* Grid */
.bf-gloss__grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 24px;
  align-items: start;
}

/* Links: Begriffsliste */
.bf-gloss__terms {
  background: #fff;
  border-radius: var(--radius-lg, 28px);
  padding: 34px 32px 32px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(11,105,110,.05));
  border: 1px solid var(--bf-gray-20, #D4D6D7);
  position: sticky;
  top: 100px;
  max-height: calc(100vh - 124px);
  overflow-y: auto;
}
.bf-gloss__terms-letter {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 64px; line-height: 1;
  color: var(--bf-gray-dark, #263237);
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}
.bf-gloss__terms-rule {
  height: 2px;
  width: 100%;
  background: var(--bf-turquoise, #00C3D6);
  border-radius: 2px;
  margin-bottom: 22px;
}
.bf-gloss__terms-list { display: flex; flex-direction: column; gap: 2px; }
.bf-gloss__term {
  display: block;
  width: calc(100% + 24px);
  margin-left: -12px;
  padding: 9px 12px;
  border: 0;
  background: transparent;
  text-align: left;
  font-family: inherit;
  font-size: 15.5px; font-weight: 500;
  color: var(--bf-gray-80, #515B5F);
  border-radius: 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s var(--ease);
}
.bf-gloss__term:hover { color: var(--bf-gray-dark, #263237); background: var(--bf-beige-light, #F7F7F5); }
.bf-gloss__term.is-active { color: var(--bf-turquoise-dark, #00A5B6); font-weight: 700; }
.bf-gloss__term[hidden] { display: none; }
.bf-gloss__terms-group[hidden] { display: none; }
.bf-gloss__terms-empty {
  padding: 20px 0;
  font-size: 14px; font-style: italic;
  color: var(--bf-gray-60, #7D8487);
  text-align: center;
}
.bf-gloss__terms-empty[hidden] { display: none; }

/* Suchmodus: kleinere Buchstaben-Labels, mehrere Gruppen sichtbar */
.bf-gloss.is-searching .bf-gloss__terms-letter {
  font-size: 22px;
  color: var(--bf-turquoise-dark, #00A5B6);
  margin: 18px 0 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--bf-gray-20, #D4D6D7);
}
.bf-gloss.is-searching .bf-gloss__terms-rule { display: none; }
.bf-gloss.is-searching .bf-gloss__terms-group:first-child .bf-gloss__terms-letter { margin-top: 0; }

/* Rechts: Detail */
.bf-gloss__detail { display: flex; flex-direction: column; gap: 24px; }
.bf-gloss__detail-card {
  background: #fff;
  border-radius: var(--radius-lg, 28px);
  padding: 40px 44px;
  box-shadow: var(--shadow-sm, 0 2px 8px rgba(11,105,110,.05));
  border: 1px solid var(--bf-gray-20, #D4D6D7);
}
.bf-gloss__detail-card[hidden] { display: none; }
.bf-gloss__detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.bf-gloss__detail-term {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 400; line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--bf-gray-dark, #263237);
  margin: 0;
}
.bf-gloss__tag {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--bf-beige-light, #F7F7F5);
  color: var(--bf-gray-60, #7D8487);
  flex-shrink: 0;
}
.bf-gloss__tag--ki { background: var(--bf-turquoise-20, #CCF3F7); color: var(--bf-green-dark-1, #0B696E); }
.bf-gloss__tag--didaktik { background: rgba(221,31,90,.1); color: var(--bf-pink, #DD1F5A); }
.bf-gloss__tag--tech { background: rgba(38,50,55,.08); color: var(--bf-gray-dark, #263237); }
.bf-gloss__tag--brainfood { background: linear-gradient(135deg, var(--bf-turquoise-20, #CCF3F7), rgba(221,31,90,.1)); color: var(--bf-green-dark-1, #0B696E); }
.bf-gloss__tag--hosting { background: rgba(236,185,3,.18); color: var(--bf-orange, #F46721); }
.bf-gloss__def {
  font-size: 16.5px; line-height: 1.7;
  color: var(--bf-gray-80, #515B5F);
}
.bf-gloss__def p + p { margin-top: 14px; }
.bf-gloss__def strong { color: var(--bf-gray-dark, #263237); font-weight: 700; }
.bf-gloss__see {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed var(--bf-gray-20, #D4D6D7);
  font-size: 13.5px;
  color: var(--bf-gray-60, #7D8487);
}
.bf-gloss__see strong { color: var(--bf-gray-dark, #263237); }
.bf-gloss__permalink { margin: 18px 0 0; font-size: 14px; }
.bf-gloss__permalink a {
  color: var(--bf-green-dark-1, #0B696E);
  font-weight: 600;
  border-bottom: 1.5px solid var(--bf-turquoise, #00C3D6);
  text-decoration: none;
}
.bf-gloss__permalink a:hover { color: var(--bf-turquoise-dark, #00A5B6); }

/* Passende Microtrainings — Kacheln (Design: course-tile) */
.bf-gloss__courses {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px dashed var(--bf-gray-20, #D4D6D7);
}
.bf-gloss__courses-label {
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bf-pink, #DD1F5A);
  margin-bottom: 18px;
}
.bf-gloss__courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.bf-gloss__course {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--bf-gray-20, #D4D6D7);
  border-radius: var(--radius-md, 20px);
  overflow: hidden;
  text-decoration: none;
  transition: all 0.25s var(--ease);
}
.bf-gloss__course:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 8px 28px rgba(11,105,110,.08));
  border-color: transparent;
}
.bf-gloss__course:not([href]) { cursor: default; }
.bf-gloss__course:not([href]):hover { transform: none; box-shadow: none; border-color: var(--bf-gray-20, #D4D6D7); }
.bf-gloss__course-cover {
  aspect-ratio: 5 / 2.4;
  padding: 12px;
  position: relative;
  color: #fff;
  display: flex;
  align-items: flex-start;
  background-size: cover;
  background-position: center;
  background-color: var(--bf-gray-20, #D4D6D7);
}
.bf-gloss__course-cover--default {
  background-image: linear-gradient(155deg, var(--bf-gray-dark, #263237), var(--bf-green-dark-1, #0B696E));
}
.bf-gloss__course-type {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--bf-gray-dark, #263237);
}
.bf-gloss__course-body { padding: 14px 16px; flex-grow: 1; display: flex; flex-direction: column; }
.bf-gloss__course-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 17px; line-height: 1.2;
  color: var(--bf-gray-dark, #263237);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  flex-grow: 1;
}
.bf-gloss__course-meta {
  font-size: 11.5px;
  color: var(--bf-gray-60, #7D8487);
  padding-top: 10px;
  border-top: 1px solid var(--bf-gray-20, #D4D6D7);
}

@media (max-width: 1024px) {
  .bf-gloss__grid { grid-template-columns: 1fr; gap: 20px; }
  .bf-gloss__terms { position: static; max-height: none; padding: 28px; }
  .bf-gloss__terms-letter { font-size: 48px; }
  .bf-gloss__detail-card { padding: 32px 28px; }
}
@media (max-width: 768px) {
  .bf-gloss__az-btn { width: 32px; height: 32px; font-size: 16px; }
  .bf-gloss__courses-grid { grid-template-columns: 1fr; }
}

/* ----------------------- Glossar-Liste ----------------------- */
.bf-glossary__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-block: 24px 56px;
  padding-block: 18px;
  position: sticky;
  top: 64px;
  z-index: 50;
  background: rgba(247, 247, 245, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  border-radius: var(--radius-md);
}
.bf-glossary__letter {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  color: var(--bf-gray-dark);
  text-decoration: none;
  transition: all 0.15s var(--ease);
}
.bf-glossary__letter:hover {
  background: var(--bf-turquoise-20);
  color: var(--bf-green-dark-1);
}
.bf-glossary__letter--empty {
  color: var(--bf-gray-40);
  pointer-events: none;
}

.bf-glossary__group {
  scroll-margin-top: 120px;
  margin-bottom: 56px;
}
.bf-glossary__group-letter {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 48px;
  color: var(--bf-turquoise-40);
  margin-bottom: 18px;
  border-bottom: 2px solid var(--bf-gray-20);
  padding-bottom: 8px;
}

.bf-glossary__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 900px) { .bf-glossary__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bf-glossary__grid { grid-template-columns: 1fr; } }

.bf-glossary-card {
  background: var(--bf-white);
  border-radius: var(--radius-md);
  padding: 22px 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.bf-glossary-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.bf-glossary-card__tag {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-green-dark-1);
  background: var(--bf-turquoise-20);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  align-self: flex-start;
}
.bf-glossary-card--ki        .bf-glossary-card__tag { background: rgba(244,103,33,.12); color: var(--bf-orange); }
.bf-glossary-card--didaktik  .bf-glossary-card__tag { background: rgba(0,191,154,.14); color: var(--bf-green-dark-1); }
.bf-glossary-card--tech      .bf-glossary-card__tag { background: rgba(38,50,55,.10); color: var(--bf-gray-dark); }
.bf-glossary-card--brainfood .bf-glossary-card__tag { background: var(--bf-turquoise-20); color: var(--bf-green-dark-1); }
.bf-glossary-card--standard  .bf-glossary-card__tag { background: var(--bf-beige); color: var(--bf-gray-80); }
.bf-glossary-card--hosting   .bf-glossary-card__tag { background: rgba(236,185,3,.18); color: var(--bf-orange); }
.bf-glossary-card__term {
  margin: 0;
  font-size: 18px;
}
.bf-glossary-card__term a {
  color: var(--bf-gray-dark);
  text-decoration: none;
}
.bf-glossary-card__term a:hover {
  color: var(--bf-green-dark-1);
}
.bf-glossary-card__definition {
  margin: 0;
  color: var(--bf-gray-80);
  font-size: 14px;
  line-height: 1.55;
}

/* ----------------------- Glossar-Single ----------------------- */
.bf-glossary-single__definition p:first-child {
  font-size: 22px;
  line-height: 1.5;
  color: var(--bf-gray-dark);
  margin-block: 16px 12px;
}
.bf-glossary-single__definition p {
  font-size: 17px;
  color: var(--bf-gray-80);
  line-height: 1.7;
}

.bf-glossary-related .bf-glossary-card { padding: 16px 18px; }

/* ----------------------- Insights-Grid ----------------------- */
.bf-insights__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
@media (max-width: 1024px) { .bf-insights__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px)  { .bf-insights__grid { grid-template-columns: 1fr; } }

.bf-insight-card {
  background: var(--bf-white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.bf-insight-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.bf-insight-card__link { display: block; color: inherit; text-decoration: none; }
.bf-insight-card__thumb { aspect-ratio: 16/9; background: var(--bf-beige-light); }
.bf-insight-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bf-insight-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 8px; }
.bf-insight-card__date {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bf-gray-60);
}
.bf-insight-card__title { margin: 0; font-size: 19px; line-height: 1.3; }
.bf-insight-card__excerpt { margin: 0; color: var(--bf-gray-80); font-size: 14px; line-height: 1.6; }

/* ----------------------- Pagination ----------------------- */
.bf-pagination .page-numbers,
.wp-block-query-pagination .page-numbers {
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--bf-white);
  color: var(--bf-gray-dark);
  text-decoration: none;
  margin: 0 3px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: var(--shadow-sm);
}
.bf-pagination .page-numbers.current { background: var(--bf-gray-dark); color: var(--bf-white); }
.bf-pagination .page-numbers:hover    { background: var(--bf-turquoise-20); color: var(--bf-green-dark-1); }

/* ----------------------- Microtraining-Single Meta ----------------------- */
.bf-mt-meta__item { color: rgba(255,255,255,0.92); }
.bf-mt-hero .bf-hero__title { color: var(--bf-white); }
.bf-mt-hero .bf-hero__lead  { color: rgba(255,255,255,0.86); }

/* ----------------------- Topic-Story (Editor-Content unter Hero) ----------------------- */
.bf-topic-story { padding-block: 56px; }
.bf-topic-story p, .bf-topic-story h2, .bf-topic-story h3 { max-width: 760px; }