/* css/50-blog-archive.css
   -----------------------
   Blog-, Kategorie- und Archivansichten (Teaser/Archive-Boxen)
   Ziel: Titel/Linie/Kategorie/Excerpt/Weiterlesen/Meta bündig + klare Typo
   Hinweis: Variablen (z. B. --titel, --heading-indent, --space-*, --heading-line-thickness)
            kommen aus 00-variables.css

   WICHTIGES VERTRAGSPRINZIP (gegen Doppellinien):
   - Blog/Archiv:    Linie sitzt an der KATEGORIE (border-top).
   - Single-Ansicht: Linie sitzt NUR am H1 (border-bottom); Kategorie hat KEINE Linie.
   => Diese Trennung nicht vermischen, sonst entstehen wieder 2 Linien.
*/

/* ============================================================
   BLOCK A: EINHEITLICHE HEADINGS (Special, Sidebar, Tag-Cloud)
   ============================================================ */
.av-special-heading h2.av-special-heading-tag,
.sidebar h3.widgettitle,
#tag_cloud-3 .widgettitle {
  position: relative;
  padding-left: var(--heading-indent, 15px) !important;
  padding-right: 0 !important;
  padding-bottom: var(--space-2, 8px) !important;
  margin-bottom: var(--space-2, 8px) !important;
  font-size: 1em !important;
  font-weight: 700 !important;
  color: var(--titel) !important;
  text-align: left !important;
  background: none !important; /* alte Theme-Linien raus */
}
.av-special-heading h2.av-special-heading-tag::after,
.sidebar h3.widgettitle::after,
#tag_cloud-3 .widgettitle::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: var(--heading-line-thickness, 4px);
  background: linear-gradient(120deg, var(--titel) 0%, var(--hell) 100%);
  pointer-events: none;
}

/* Sonderfall: h3.usw – nur Typo, KEINE Linie */
h3.usw {
  font-size: 1em !important;
  font-weight: 700 !important;
  color: var(--titel) !important;
  text-align: center !important;
  padding-left: var(--heading-indent, 15px) !important;
  padding-right: 0 !important;
  margin-bottom: var(--space-2, 8px) !important;
  background: none !important;
  position: relative;
}
h3.usw::after { content: none !important; }

/* ============================================================
   BLOCK B: CONTENT-HEADINGS (Artikel/Kategorien im Content)
   (KEIN h1 hier, damit Single-H1 keine Gradient-Linie bekommt)
   ============================================================ */
.archive h3.author-title,
.entry-content h2,
.linklistcatname,
.slide-entry-title,
.entry-content-wrapper .post-title,
h2.cattitel {
  font-size: 1em !important;
  color: var(--titel) !important;
}
.archive h3.author-title,
.entry-content h2,
.linklistcatname,
h2.cattitel {
  background: linear-gradient(120deg, var(--titel) 0%, var(--hell) 100%)
              no-repeat 0 100% / 100% 4px;
  padding-bottom: 8px !important;
  margin-bottom: var(--space-2, 8px) !important;
}

/* ============================================================
   BLOCK C: EINLEITUNG & BEITRAGS-TITEL
   ============================================================ */
.archive .category-term-description { width: 94%; }
.category-term-description p { text-align: justify; padding: 0 10px; }

/* Beitragstitel (Archiv/Blog + Single) – NUR 1 rote Linie am Titel */
.archive h2.post-title.entry-title,
.blog    h2.post-title.entry-title,
.template-blog h2.post-title.entry-title,
.single-post h1.post-title.entry-title {
  padding-left: 0 !important;
  padding-right: 0 !important;
  color: var(--titel) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.03em !important;
  border-bottom: 2px solid var(--titel) !important;
  padding-bottom: 6px !important;
  margin-bottom: 12px !important;
  background: none !important;
}
.single-post h1.post-title.entry-title::before,
.single-post h1.post-title.entry-title::after {
  content: none !important; /* mögliche Pseudo-Linien entfernen */
}

/* Kategoriezeile unter Titel – Blog/Archiv MIT Linie */
/* (In Single unten separat OHNE Linie; siehe "Single: Kategorie-Zeile") */
#top .post-entry .blog-categories.minor-meta {
  text-align: right !important;
  position: relative;
  top: -18px;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 4px !important;
  border-top: 2px solid var(--titel) !important;
  font-size: 1.0em;
  font-weight: 500;
  letter-spacing: 0.02em;
}
#top .post-entry .blog-categories.minor-meta a {
  color: var(--titel) !important;
  text-transform: none !important;
}

/* ============================================================
   BLOCK D: EXCERPT + WEITERLESEN + META
   ============================================================ */
#top .slide-entry .slide-entry-excerpt.entry-content {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: left !important;
  padding-bottom: var(--space-2, 8px) !important; /* Puffer zum Footer */
}

/* „Weiterlesen“: eigene Zeile, links, nicht abgeschnitten */
#top .slide-entry .slide-entry-excerpt.entry-content .read-more-link,
#top .slide-entry .slide-entry-excerpt.entry-content .more-link,
#top .slide-entry .slide-entry-excerpt.entry-content .read-more,
#top .slide-entry .slide-entry-excerpt.entry-content .link_weiterlesen {
  display: block !important;
  clear: both !important;
  float: none !important;
  width: 100% !important;
  text-align: left !important;
  margin: var(--space-1, 4px) 0 var(--space-2, 8px) 0 !important;
  padding: 0 !important;
  font-size: 1.0em !important;
  font-weight: 500;
  color: var(--marker);
}
#top .slide-entry .slide-entry-excerpt.entry-content .read-more-link:hover,
#top .slide-entry .slide-entry-excerpt.entry-content .more-link:hover,
#top .slide-entry .slide-entry-excerpt.entry-content .read-more:hover,
#top .slide-entry .slide-entry-excerpt.entry-content .link_weiterlesen:hover {
  color: var(--titel);
  opacity: 1;
}

/* Footer/Datum bündig */
#top .slide-entry .entry-footer {
  clear: both !important;
  margin-top: var(--space-2, 8px) !important;
  padding-top: 0 !important;
}
#top .slide-entry .entry-footer .post-meta-infos,
#top .slide-entry .entry-footer .slide-meta,
#top .slide-entry .entry-footer .text-sep {
  padding: 0 !important;
  margin: 0 !important;
}

/* Trenner (|) im Footer */
.slide-meta-del,
.text-sep { color: transparent !important; }
.slide-meta-del::before,
.text-sep::before {
  content: "|" !important;
  color: var(--titel) !important;
  font-size: 1.1em !important;
  vertical-align: middle !important;
  font-weight: 900 !important;
}

/* ============================================================
   BLOCK E: TEASER-BILDER (bereinigt – keine Container-Overrides)
   ------------------------------------------------------------
   WICHTIG:
   - Keine margin/overflow/border-radius/box-shadow-Regeln
     auf .post-entry oder .slide-image (Container) setzen.
   - Container-/Kartenlogik bleibt vollständig in 20-layout-containers.css.
   - Hier nur Bilddarstellung + Overlay-Kosmetik.
   ============================================================ */

/* Teaser-Bilder (Blog/Kategorie/Archiv): Bilddarstellung */
.post-entry .slide-image > img,
.post-entry .slide-image picture > img,
.post-entry .slide-image > img.wp-post-image {
  display: block;
  width: 90%;
  height: auto;
  margin: 12px auto 28px;
  transform: translateY(4px);
  border-radius: var(--radius-small);
  -webkit-box-shadow: var(--shadow-soft-webkit);
  box-shadow: var(--shadow-soft);
}

/* Overlays dürfen den Schatten/Radius nicht stören */
.post-entry .slide-image .image-overlay,
.post-entry .slide-image .image-overlay-inside {
  border-radius: var(--radius-small);
  pointer-events: none;
  background: transparent !important;
  box-shadow: none !important;
}

/* ============================================================
   Startseite – Blog-Teaser (Speziallayout)
   ------------------------------------------------------------
   Darf Container-Eigenschaften setzen, da es bewusst ein
   anderes Layout ist. Kollisionen mit 20.css sind hier
   nicht zu erwarten.
   ============================================================ */
.home .template-blog .post-entry .slide-image,
.home .slide-entry .slide-image {
  display: block;
  width: 95% !important;
  max-width: 95% !important;
  height: 300px !important;
  margin: 24px auto 32px !important;
  line-height: 0;
  overflow: hidden;
  border-radius: var(--radius-small);
  position: relative;
  -webkit-box-shadow: var(--shadow-soft-webkit) !important;
  box-shadow: var(--shadow-soft) !important;
}

.home .template-blog .post-entry .slide-image > img,
.home .slide-entry .slide-image > img,
.home .template-blog .post-entry .slide-image picture > img,
.home .slide-entry .slide-image picture > img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center center;
  margin: 0 !important;
  transform: none !important;
  border-radius: inherit;
  box-shadow: none !important;
}

.home .slide-image .image-overlay,
.home .slide-image .image-overlay-inside {
  border-radius: inherit;
  pointer-events: none;
  background: transparent !important;
  box-shadow: none !important;
}

/* ===== SINGLE-POST: exakt EINE Linie unter dem H1, keine zweite darunter =====
   (Kritische Trennung: H1 hat die Linie, Kategorie NICHT) */
.single-post #top .post-entry .blog-categories.minor-meta,
#top.single-post .post-entry .blog-categories.minor-meta{
  border-top: 0 !important; /* <- verhindert zweite Linie */
  padding-top: 0 !important;
  margin-top: 0 !important;
  top: -6px !important;      /* optisch näher an den Titel */
  padding-bottom: 15px;
  background: none !important;
  box-shadow: none !important;
}
.single-post #top .post-entry .blog-categories.minor-meta::before,
.single-post #top .post-entry .blog-categories.minor-meta::after{
  content: none !important;
}

/* Titel behält die EINE Linie */
.single-post h1.post-title.entry-title{
  border-bottom: 2px solid var(--titel) !important;
  padding-bottom: 6px !important;
  margin-bottom: 12px !important;
  background: none !important;
  box-shadow: none !important;
}
.single-post h1.post-title.entry-title::before,
.single-post h1.post-title.entry-title::after{
  content: none !important;
}

/* === cat_list: eigenständige, nicht-Heading-Optik ======================= */
div.cat_list{
  margin: 1em 0;
  padding: 0.5em 0;
  font-size: 0.95em;
  font-weight: 400;
  color: var(--text, #333);
  line-height: 1.4;
  background: none !important;   /* sicherheitshalber */
  border: 0 !important;
}
div.cat_list a{
  color: var(--marker, #900);
  text-decoration: none;
  font-size: 1.1em;
  margin-right: 0;
}
div.cat_list a:hover{
  text-decoration: underline;
  color: var(--titel, #000);
}