/* Orientierungsseite — Kartenraster, Module, Bild-Leerzustand.
 * Ergaenzt die Quartz-Defaults; ueberschreibt keine.  Klassen
 * .pcw-home-* sind die vertraglich mit D1 vereinbarten Anker.
 *
 * §S3 (plans/wiki_verbesserung_v1.md §4): auf der Startseite
 * soll der Akuteinstieg (erste h2 = "Emergency") moeglichst nahe
 * am oberen Fold-Rand erscheinen — Plan-Schwelle y < 400 px.
 * Der Standard-h2-margin-top (≈ 42 px) drueckt das erste H2 nach
 * unten; der wird hier ueberschrieben. Greift NUR auf der
 * Startseite (.pcw-home-body), nicht auf Artikel- oder
 * Trickseiten — dort waere die Komprimierung ein Stilbruch. */
.pcw-home-body > .markdown-preview-view > h2:first-of-type,
.pcw-home-body > .markdown-preview-view > p + h2 {
  margin-top: 0.25rem;
}
.pcw-home-body > .markdown-preview-view > p:first-of-type {
  margin-bottom: 0.5rem;
  margin-top: 0;
}
.pcw-home-hero {
  margin: 0 0 1.5rem 0;
  padding: 1.5rem 1.25rem;
  border-radius: 8px;
  background: var(--light, #fafaf7);
  border: 1px solid var(--lightgray, #e6e4df);
}
.pcw-home-hero h1 {
  margin: 0 0 0.5rem 0;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--dark, #1c1a16);
}
.pcw-home-hero p {
  margin: 0 0 1rem 0;
  color: var(--darkgray, #5b564d);
  font-size: 1rem;
  line-height: 1.5;
}
.pcw-home-hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcw-home-hero-ctas a {
  display: inline-block;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--secondary, #1f6f5c);
  border-radius: 4px;
  text-decoration: none;
  color: var(--secondary, #1f6f5c);
  font-weight: 600;
}
.pcw-home-hero-ctas a:hover {
  background: var(--highlight, rgba(31, 111, 92, 0.12));
}
.pcw-home-module,
.pcw-home-recent,
.pcw-home-news,
.pcw-home-trick,
.pcw-home-browse,
.pcw-home-quick,
.pcw-home-about,
.pcw-home-howto {
  margin: 2rem 0;
  padding: 0;
}
.pcw-home-module > h2,
.pcw-home-recent > h2,
.pcw-home-news > h2,
.pcw-home-trick > h2,
.pcw-home-browse > h2,
.pcw-home-quick > h2,
.pcw-home-about > h2,
.pcw-home-howto > h2 {
  margin: 0 0 0.25rem 0;
  font-size: 1.4rem;
  color: var(--dark, #1c1a16);
}
.pcw-home-module > p.pcw-home-intro,
.pcw-home-recent > p.pcw-home-intro,
.pcw-home-news > p.pcw-home-intro,
.pcw-home-trick > p.pcw-home-intro,
.pcw-home-browse > p.pcw-home-intro,
.pcw-home-quick > p.pcw-home-intro {
  margin: 0 0 1rem 0;
  color: var(--darkgray, #5b564d);
  font-size: 0.95rem;
}
.pcw-home-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pcw-home-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--lightgray, #e6e4df);
  border-radius: 6px;
  background: var(--light, #fafaf7);
  text-decoration: none;
  color: inherit;
}
.pcw-home-card:hover {
  border-color: var(--secondary, #1f6f5c);
}
.pcw-home-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    45deg,
    var(--lightgray, #e6e4df),
    var(--lightgray, #e6e4df) 6px,
    transparent 6px,
    transparent 12px
  );
  border-radius: 4px;
  border: 1px dashed var(--gray, #9a948b);
  position: relative;
}
.pcw-home-card-image-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 0.75rem;
  color: var(--gray, #9a948b);
  padding: 0 0.5rem;
}
.pcw-home-card-title {
  font-weight: 600;
  color: var(--dark, #1c1a16);
  font-size: 1rem;
  line-height: 1.3;
}
.pcw-home-card-meta {
  font-size: 0.8rem;
  color: var(--darkgray, #5b564d);
}
.pcw-home-card-empty {
  display: block;
  padding: 0.75rem;
  border: 1px dashed var(--lightgray, #e6e4df);
  border-radius: 6px;
  color: var(--gray, #9a948b);
  font-size: 0.85rem;
  text-align: center;
}
.pcw-home-recent-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pcw-home-recent-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--lightgray, #e6e4df);
  border-radius: 4px;
  background: var(--light, #fafaf7);
}
.pcw-home-recent-item a {
  color: var(--secondary, #1f6f5c);
  text-decoration: none;
  font-weight: 600;
  /* Trefferflaeche, nicht Optik: die Schlagzeile war 26px hoch und damit
     unter der 44px-Regel der Abnahmetabelle (E2E-A11Y-008). Auf einem
     Telefon ist das genau die Sorte Link, die man dreimal antippt.
     inline-flex ist noetig, weil min-height auf einem Inline-Element
     wirkungslos bleibt — der haeufigste stille Fehlschlag bei dieser
     Regel. Das align-items: center der Elternregel gehoert dazu: mit
     baseline saesse das Datum an der Oberkante des hoeheren Links
     statt neben ihm. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pcw-home-recent-item a:hover { text-decoration: underline; }
.pcw-home-recent-date {
  font-size: 0.8rem;
  color: var(--darkgray, #5b564d);
}
.pcw-home-recent-stale {
  font-size: 0.75rem;
  padding: 0 0.4rem;
  border-radius: 3px;
  background: rgba(180, 106, 42, 0.18);
  color: var(--tertiary, #b46a2a);
}
.pcw-home-recent-expired {
  font-size: 0.75rem;
  padding: 0 0.4rem;
  border-radius: 3px;
  background: rgba(180, 42, 42, 0.18);
  color: #a02a2a;
}
.pcw-home-trick-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--lightgray, #e6e4df);
  border-left: 3px solid var(--tertiary, #b46a2a);
  border-radius: 4px;
  background: var(--light, #fafaf7);
}
.pcw-home-trick-title {
  font-weight: 600;
  color: var(--dark, #1c1a16);
  font-size: 1.1rem;
  margin: 0;
}
.pcw-home-trick-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0;
  font-size: 0.9rem;
}
.pcw-home-trick-fields dt {
  font-weight: 600;
  color: var(--darkgray, #5b564d);
}
.pcw-home-trick-fields dd {
  margin: 0;
  color: var(--dark, #1c1a16);
}
.pcw-home-trick-cta {
  margin-top: 0.25rem;
}
.pcw-home-trick-cta a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: var(--secondary, #1f6f5c);
  color: var(--light, #fafaf7);
  border-radius: 4px;
  text-decoration: none;
  font-weight: 600;
}
.pcw-home-trick-cta a:hover {
  background: var(--dark, #1c1a16);
}
.pcw-home-empty {
  padding: 0.75rem;
  border: 1px dashed var(--lightgray, #e6e4df);
  border-radius: 6px;
  color: var(--gray, #9a948b);
  font-size: 0.9rem;
}

/* "What's new"-Modul (post-build-inject-homepage.js, buildNewsModule).
 * Zwei Sub-Listen (neu aufgenommen / zuletzt nachgeprueft) plus ein
 * Stale-Hinweis, der sichtbar wird, wenn der juengste first_seen-Eintrag
 * aelter als 60 Tage ist.  Die Listen sind vertikal gestapelt, jede mit
 * eigenem h3 — die h2 der Sektion steht im Modul-HTML vor beiden Listen. */
.pcw-home-news-stale {
  margin: 0 0 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--lightgray, #e6e4df);
  border-left: 3px solid var(--gray, #9a948b);
  border-radius: 4px;
  background: var(--light, #fafaf7);
  color: var(--darkgray, #5b564d);
  font-size: 0.9rem;
  line-height: 1.5;
}
.pcw-home-news-subheading {
  margin: 1.25rem 0 0.4rem 0;
  font-size: 1.05rem;
  color: var(--dark, #1c1a16);
  font-weight: 600;
}
.pcw-home-news-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.pcw-home-news-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--lightgray, #e6e4df);
  border-radius: 4px;
  background: var(--light, #fafaf7);
}
.pcw-home-news-item a {
  color: var(--secondary, #1f6f5c);
  text-decoration: none;
  font-weight: 600;
  /* Trefferflaeche, nicht Optik: die Schlagzeile war 26px hoch und damit
     unter der 44px-Regel der Abnahmetabelle (E2E-A11Y-008). Auf einem
     Telefon ist das genau die Sorte Link, die man dreimal antippt.
     inline-flex ist noetig, weil min-height auf einem Inline-Element
     wirkungslos bleibt — der haeufigste stille Fehlschlag bei dieser
     Regel. Das align-items: center der Elternregel gehoert dazu: mit
     baseline saesse das Datum an der Oberkante des hoeheren Links
     statt neben ihm. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.pcw-home-news-item a:hover { text-decoration: underline; }
.pcw-home-news-date {
  font-size: 0.8rem;
  color: var(--darkgray, #5b564d);
}