/* ===========================================================================
   Archive, Suche und die 404
   ===========================================================================

   Gilt für /?s=…, /kategorie/…/, die Datumsarchive, die Beitragsseite und die
   Fehlerseite. Eigene Datei aus demselben Grund wie beim Videoarchiv: Die
   Regeln gelten nur auf diesen Seiten, und style.css bleibt frei von
   Seitenrecht. Geladen wird sie in functions.php.

   Der Anlass, 07.09.2026: „die suchergebnisseite dorf spielt fußball sieht
   richtig lame aus … auch die 404 ist nicht hübsch."
   ------------------------------------------------------------------------ */


/* ---------- 1  Der Kopf über allen Archiven ----------

   Ein dunkler Streifen, kein Foto. Ein Bild müsste zu jeder Kategorie und zu
   jeder Suche passen – das kann keins, und ein geliehenes Foto wäre eine
   Behauptung über den Inhalt. Das Wappen dahinter ist groß, sehr blass und
   angeschnitten: Es füllt die Fläche, ohne mit der Überschrift zu streiten. */
.archiv-kopf {
  position: relative;
  overflow: hidden;
  background: var(--green-900) var(--fill-flaeche);
  color: #fff;
  padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 5rem);
}
.archiv-kopf::after {                 /* Lichtschein aus der linken oberen Ecke */
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 8% 0%, rgb(22 180 90 / .35), transparent 62%);
  pointer-events: none;
}
.archiv-kopf__wappen {
  position: absolute;
  right: clamp(-2rem, -1rem + 2vw, 3rem);
  top: 50%;
  translate: 0 -50%;
  width: clamp(200px, 26vw, 420px);
  height: auto;
  opacity: .07;
  pointer-events: none;
}
.archiv-kopf__inner { position: relative; z-index: 1; }
.archiv-kopf .eyebrow { color: var(--accent); }

/* Kleine Zeile und Rückweg teilen sich die oberste Zeile. Der Rückweg ist ein
   Verweis, keine Kategorieleiste: Chris am 07.09.2026 zu /category/termine/ –
   „bei termine dann nur termine zeigen … ohne die anderen kategorien“. */
.archiv-kopf__oben {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
}
.archiv-kopf__zurueck { color: var(--green-100); border-bottom-color: rgb(255 255 255 / .35); }
.archiv-kopf__zurueck:hover { color: #fff; opacity: 1; border-bottom-color: var(--accent); }

/* Überschrift und Trefferzahl in einer Zeile: die Zahl gehört zur Überschrift,
   nicht in eine eigene Zeile darunter. Bei schmalen Fenstern bricht sie um. */
.archiv-kopf__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4) var(--sp-5); flex-wrap: wrap;
  margin-top: var(--sp-3);
}
.archiv-kopf__titel {
  font-size: var(--fs-2xl);
  line-height: 1;
  max-width: 24ch;
}
.archiv-kopf__titel .accent { color: var(--accent); }
.archiv-kopf__zahl {
  flex-shrink: 0;
  font-size: var(--fs-sm); font-weight: 800;
  letter-spacing: .04em;
  padding: .45rem 1rem;
  border: 1.5px solid rgb(255 255 255 / .25);
  border-radius: 999px;
  color: var(--green-100);
  font-variant-numeric: tabular-nums;
}
.archiv-kopf__sub {
  margin-top: var(--sp-4);
  max-width: 62ch;
  font-size: var(--fs-md);
  color: var(--green-100);
}

/* Große Wege weiter, auf den Kategorieseiten: „News der letzten 18 Monate“
   und „Newsarchiv“ (category.php). Nebeneinander, auf dem Handy untereinander,
   sobald die Zeile nicht mehr reicht. Der umrandete Knopf erbt Weiß vom Kopf. */
.archiv-kopf__knoepfe {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* Die Chipleiste auf dunklem Grund. Dieselbe Größe und Zielfläche wie überall
   (WCAG 2.5.5, festgelegt an .filter-chip), nur die Farben kehren sich um. */
.filter-bar--dunkel { margin-bottom: 0; }
.filter-bar--dunkel .filter-chip {
  background: rgb(255 255 255 / .06);
  border-color: rgb(255 255 255 / .22);
  color: #fff;
}
.filter-bar--dunkel .filter-chip__n { color: rgb(255 255 255 / .55); }
.filter-bar--dunkel .filter-chip:hover {
  background: rgb(255 255 255 / .14);
  border-color: rgb(255 255 255 / .5);
  color: #fff;
}
.filter-bar--dunkel .filter-chip.is-active,
.filter-bar--dunkel a.filter-chip.is-active {
  background: var(--accent) var(--fill-accent); border-color: var(--accent); color: var(--accent-ink);
}
.filter-bar--dunkel .filter-chip.is-active .filter-chip__n { color: rgb(22 34 10 / .6); }


/* ---------- 2  Das große Suchfeld im Kopf ----------

   Steht in der Suche und auf der 404. Wer über eine tote Adresse kommt, weiß
   meistens, wonach er sucht – nur nicht mehr, wo es liegt. Deshalb gehört das
   Feld nach oben und nicht ans Seitenende. */
.archiv-suche {
  display: flex; align-items: center; gap: .5rem;
  margin-top: var(--sp-5);
  width: min(100%, 44rem);
  background: var(--surface);
  border-radius: 999px;
  padding: .4rem .4rem .4rem 1.15rem;
  box-shadow: var(--shadow);
}
.archiv-suche__icon { width: 22px; height: 22px; color: var(--ink-500); flex-shrink: 0; }
.archiv-suche input {
  flex: 1; min-width: 0;
  border: 0; background: transparent; outline: none;
  padding: .8rem .25rem;
  font-size: var(--fs-md); color: var(--ink);
}
.archiv-suche input::placeholder { color: var(--ink-300); }
.archiv-suche .btn { flex-shrink: 0; }
.archiv-suche:focus-within { box-shadow: var(--shadow-lg), 0 0 0 3px var(--accent); }
@media (max-width: 30rem) {
  .archiv-suche { flex-wrap: wrap; border-radius: var(--radius-lg); padding: .75rem; }
  .archiv-suche input { flex-basis: 60%; }
  .archiv-suche .btn { width: 100%; }
}


/* ---------- 3  Die Trefferliste ----------

   Zeilen statt Kacheln. Der Grund steht in template-parts/treffer.php: An
   „Unser Dorf spielt Fußball" hängt in fünf Beiträgen dasselbe Plakat, und
   fünf gleiche Bilder nebeneinander sagen nichts.

   Die Liste ist auf 68 rem begrenzt und bleibt links – bündig mit der
   Überschrift darüber. Über die vollen 2000 px gezogen wäre jede Zeile so
   breit, dass das Auge den Anfang der nächsten nicht mehr findet. */
.suche__liste {
  width: min(100%, 68rem);
  border-top: 1px solid var(--line);
}
.treffer {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: var(--sp-5);
  align-items: start;
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}
.treffer__media {
  display: block; overflow: hidden;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  background: var(--surface-3);
}
.treffer__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.treffer:hover .treffer__media img { transform: scale(1.05); }

/* Ohne Beitragsbild ein Symbol statt eines leeren Kastens: Seiten und
   Mannschaften haben oft keins, und ein grauer Fleck sähe nach Ladefehler aus. */
.treffer__icon {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--surface-2); color: var(--green-600);
}
.treffer__icon svg { width: 32%; height: auto; }
.treffer__icon--wappen { background: var(--green-900); }
.treffer__icon--wappen .crest { width: 56px; height: 56px; }

.treffer__body { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.treffer__meta { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.treffer__zusatz { font-size: var(--fs-xs); color: var(--ink-500); font-weight: 600; }
.treffer__titel { font-size: var(--fs-md); line-height: 1.25; }
.treffer__titel a:hover { color: var(--green-700); }
.treffer__text { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.6; }

/* Die Markierung im Ausschnitt. Lime auf dunkler Schrift – dasselbe Paar wie
   bei .btn--major, 12,8:1, und es funktioniert auch, wenn jemand die Seite
   ausdruckt oder in hohem Kontrast liest. */
.treffer mark {
  background: var(--accent);
  color: var(--accent-ink);
  border-radius: 3px;
  padding: 0 .15em;
  font-weight: 700;
}

@media (max-width: 40rem) {
  .treffer { grid-template-columns: 5.5rem minmax(0, 1fr); gap: var(--sp-4); }
}


/* ---------- 4  Suche ohne Treffer ---------- */
.suche__leer { width: min(100%, 68rem); }
.suche__leer-titel { font-size: var(--fs-lg); margin-top: var(--sp-3); }
.suche__tipps {
  margin-top: var(--sp-4);
  display: grid; gap: .5rem;
  font-size: var(--fs-sm); color: var(--ink-700);
}
.suche__tipps li { padding-left: 1.4rem; position: relative; }
.suche__tipps li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .5rem; height: .5rem; border-radius: 50%; background: var(--green-500);
}
.suche__leer-lead { margin-top: var(--sp-6); font-weight: 800; }


/* ---------- 5  Die Wege weiter (404 und leere Suche) ---------- */
.wege {
  display: grid; gap: clamp(.75rem, 1.2vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  margin-top: var(--sp-4);
}
.wege__link {
  display: flex; align-items: center; gap: var(--sp-4);
  height: 100%;
  padding: clamp(1rem, 1.5vw, 1.4rem);
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  transition: border-color .18s, box-shadow .18s, transform .18s var(--ease);
}
.wege__link:hover {
  border-color: var(--green-500);
  box-shadow: var(--shadow);
  transform: translateY(-3px);
}
.wege__icon {
  display: grid; place-items: center; flex-shrink: 0;
  width: 3rem; height: 3rem; border-radius: var(--radius);
  background: var(--green-50); color: var(--green-700);
}
.wege__icon svg { width: 1.5rem; height: 1.5rem; }
.wege__text { display: grid; gap: .2rem; min-width: 0; }
.wege__titel { font-size: var(--fs-base); line-height: 1.25; }
.wege__lead { font-size: var(--fs-xs); color: var(--ink-500); }
.wege__pfeil {
  width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-left: auto;
  color: var(--ink-300); transition: transform .18s var(--ease), color .18s;
}
.wege__link:hover .wege__pfeil { color: var(--green-600); transform: translateX(4px); }


/* ---------- 6  Der neueste Beitrag im Kategoriearchiv ----------

   Groß und quer, damit die Kategorie einen Anfang hat. Ab Seite zwei fällt er
   weg – dort ist nichts mehr „das Neueste“, dort blättert man. */
.lead-post {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  margin-bottom: clamp(2rem, 3vw, 3.5rem);
  padding-bottom: clamp(2rem, 3vw, 3.5rem);
  border-bottom: 1px solid var(--line);
}
.lead-post__media {
  position: relative;
  display: block; overflow: hidden;
  /* 16:10 wie die Karten darunter, nicht 16:9: Viele Beitragsbilder sind
     Plakate im Hochformat-Anschnitt, und jedes Grad flacher schneidet mehr vom
     Motiv weg. */
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-lg);
  background: var(--surface-3);
}
.lead-post__cat { position: absolute; left: 0; bottom: 0; }
.lead-post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.lead-post:hover .lead-post__media img { transform: scale(1.04); }
.lead-post__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
.lead-post__titel { font-size: var(--fs-lg); line-height: 1.1; }
.lead-post__titel a:hover { color: var(--green-700); }
.lead-post__teaser { font-size: var(--fs-md); color: var(--ink-700); max-width: 52ch; }
.lead-post__meta { font-size: var(--fs-xs); color: var(--ink-300); font-weight: 600; }
.lead-post .link-more { color: var(--green-700); margin-top: var(--sp-2); }

@media (max-width: 55rem) {
  .lead-post { grid-template-columns: 1fr; }
}


/* ---------- 7  Kleinigkeiten ---------- */

/* Drei Karten auf der 404: auto-fill ließe sie in 300 px am linken Rand
   kleben, während rechts daneben 1400 px frei bleiben. */
@media (min-width: 60rem) {
  .news-grid-static--drei { grid-template-columns: repeat(3, 1fr); }
}

/* Der Filter steht direkt unter dem dunklen Kopf und braucht dort keinen
   eigenen Vorlauf mehr. */
.fehler .section-head { margin-bottom: var(--sp-5); }

/* Unter /news/: der Weg zu den älteren Beiträgen. Mittig unter „Mehr laden“,
   weil man dort ankommt, wenn die 18 Monate durch sind. */
.news-weiter {
  margin-top: var(--sp-6);
  text-align: center;
  font-size: var(--fs-sm); color: var(--ink-500);
}
.news-weiter .link-more { color: var(--green-700); margin-left: .35rem; }

/* /news/ hat keine Zeile mit Jahr und Monat mehr (news-filter.php). Der
   Vorlauf der Schaltflächen war der Abstand zu dieser Zeile – ohne sie
   rutscht er unter den Kopf und die Lücke ist größer als im Newsarchiv. */
#main > .wrap > .filter-bar--kompakt:first-child { margin-top: 0; }