/* ============================================================
   j-tec.de - Ergänzung für den Blog
   ------------------------------------------------------------
   Baut auf style.css auf und wird IMMER danach eingebunden:
     <link rel="stylesheet" href="fonts/fonts.css">
     <link rel="stylesheet" href="style.css">
     <link rel="stylesheet" href="blog.css">
     <link rel="stylesheet" href="cookie-consent.css">

   Definiert keine eigenen Farben, sondern verwendet
   ausschliesslich die Variablen aus style.css (Tidemark Navy).
   ============================================================ */

/* ============================================================
   Übersichtsseite blog.html
   ============================================================ */

.posts{
  margin:34px 0 0;
  display:flex;flex-direction:column;gap:20px;
  list-style:none;padding:0;
}

.post-card{
  display:block;text-decoration:none;color:inherit;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden;
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.post-card:hover,.post-card:focus-visible{
  border-color:var(--secondary);
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(0,20,53,.16);
}

.post-card-img{
  display:block;width:100%;height:auto;
  aspect-ratio:1200/630;object-fit:cover;
  background:var(--subtle);
  border-bottom:1px solid var(--border);
}

.post-card-body{padding:22px 24px 24px}

.post-card-title{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(1.9rem,5.2vw,2.4rem);line-height:1.1;
  margin:2px 0 10px;color:var(--text);
  transition:color .2s;
}
.post-card:hover .post-card-title,
.post-card:focus-visible .post-card-title{color:var(--secondary)}

.post-card-teaser{
  margin:0;font-size:.84rem;line-height:1.52;color:var(--text-muted);
}

.post-card-more{
  display:inline-flex;align-items:center;gap:9px;
  margin:16px 0 0;
  font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--secondary);
}
.post-card-more svg{transition:transform .2s}
.post-card:hover .post-card-more svg,
.post-card:focus-visible .post-card-more svg{transform:translateX(4px)}

/* Hinweis, wenn noch kein Beitrag vorhanden ist */
.posts-empty{
  margin:34px 0 0;padding:26px;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);
  font-size:.84rem;color:var(--text-muted);text-align:center;
}

/* ============================================================
   Einzelner Beitrag blog/JJJJ-MM-TT.html
   ============================================================ */

/* Datumszeile über der Überschrift — zentriert wie der übrige Seitenkopf. */
header.sub .post-date{margin:22px 0 0;text-align:center}

/* Aufmacherbild */
.post-hero{
  margin:26px 0 0;
  border:1px solid var(--border);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
  background:var(--subtle);
}
.post-hero img{
  display:block;width:100%;height:auto;
  aspect-ratio:1200/630;object-fit:cover;
}
.post-hero figcaption{
  padding:10px 16px;font-size:.7rem;color:var(--text-muted);
  border-top:1px solid var(--border);
}

/* Fliesstext des Beitrags. Etwas grösser als die Rechtsseiten, aber mit
   demselben ruhigen Zeilenabstand — sonst wird ein langer Beitrag zur
   Scrollstrecke. */
.post-body{margin-top:20px}
.post-body p{font-size:.9rem;line-height:1.58;margin:0 0 13px}
.post-body p:last-child{margin-bottom:0}

/* Weiterführender Link am Ende des Beitrags */
.post-link{
  display:inline-flex;align-items:center;gap:12px;
  margin:20px 0 0;padding:14px 22px;
  background:var(--primary);color:var(--on-primary);
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  text-decoration:none;border:2px solid var(--primary);
  border-radius:var(--radius-pill);
  transition:background .2s,border-color .2s,transform .2s;
}
.post-link:hover,.post-link:focus-visible{
  background:var(--primary-hover);border-color:var(--primary-hover);
  transform:translateY(-2px);
}
.post-link svg{flex:0 0 auto}

/* Fussbereich eines Beitrags */
.post-foot{
  margin:34px 0 0;padding:20px 0 0;
  border-top:1px solid var(--border);
}

@media (max-width:620px){
  .post-card-body{padding:18px 18px 20px}
  .post-body p{font-size:.86rem}
}