/* ==========================================================================
   blog.css – Darstellung von Blogübersicht und Beitrag (nur auf blog.php)
   Gesteuert über Admin → Website → Blog-Darstellung (includes/blog-design.php).
   Ergänzt style.css; dort bleiben .blog-grid/.blog-card/.article-body die
   Grundlage, eigene Anpassungen weiterhin über den CSS-Editor (custom.css).
   ========================================================================== */

.blog-view {
  --blog-ratio: 16 / 9;
  --blog-fit: cover;
  --blog-text: 74ch;
}
.blog-view[data-bild-format="3x2"] { --blog-ratio: 3 / 2; }
.blog-view[data-bild-format="4x3"] { --blog-ratio: 4 / 3; }
.blog-view[data-bild-format="1x1"] { --blog-ratio: 1 / 1; }
.blog-view[data-bild-anpassung="einpassen"] { --blog-fit: contain; }
.blog-view[data-breite="schmal"] { --blog-text: 65ch; }
.blog-view[data-breite="breit"] { --blog-text: 90ch; }
/* Volle Breite des Inhaltsbereichs (.container, max. 1180 px) */
.blog-view[data-breite="voll"] { --blog-text: none; }

/* ---- Bildfläche (Karten, Kopfbereich, Titelbild) ----------------------- */
.blog-media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: var(--blog-ratio);
  background: var(--soft);
}
.blog-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--blog-fit);
  transition: transform .45s ease;
}
.blog-view[data-bild-anpassung="einpassen"] .blog-media img { padding: 6px; }
/* Ohne Beitragsbild: ruhige Markenfläche statt Lücke */
.blog-media--leer {
  background: linear-gradient(125deg, var(--blue-dark), var(--blue));
}
.blog-media--leer::after {
  position: absolute; right: -18%; bottom: -45%; width: 70%; aspect-ratio: 1;
  border: 14px solid rgba(255, 212, 0, .55); border-radius: 50%; content: "";
}
.blog-media__label {
  position: absolute; left: 20px; bottom: 16px; z-index: 1;
  color: var(--white); font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem;
}

/* ---- Übersicht ----------------------------------------------------------- */
.blog-view .blog-grid { align-items: stretch; }
.blog-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.blog-card--bild { padding: 0; overflow: hidden; }
.blog-card--bild .blog-card__body { display: flex; flex: 1 1 auto; flex-direction: column; padding: 22px 24px 24px; }
.blog-card--bild .blog-media { border-bottom: 1px solid var(--line); }
.blog-card:hover .blog-media img { transform: scale(1.04); }
.blog-card__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.blog-card__meta time { color: var(--muted); font-weight: 600; letter-spacing: 0; text-transform: none; }
.blog-card__excerpt { margin-bottom: 0; }
.blog-card .blog-card__link { margin-top: auto; padding-top: 16px; }

/* Ganze Karte klickbar, Fokus sichtbar auf der Karte */
.blog-card { position: relative; }
.blog-card h2 a::after, .blog-card h3 a::after { position: absolute; inset: 0; z-index: 1; content: ""; }
.blog-card:focus-within { outline: 3px solid var(--yellow); outline-offset: 3px; }
.blog-card a:focus-visible { outline: none; }

/* Liste: Bild links, Text rechts */
.blog-grid--liste { grid-template-columns: 1fr; gap: 24px; }
.blog-grid--liste .blog-card--bild { display: grid; grid-template-columns: minmax(220px, 36%) 1fr; }
.blog-grid--liste .blog-card--bild .blog-media { height: 100%; min-height: 200px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
.blog-grid--liste .blog-card h2 { font-size: 1.45rem; }
/* Bild bestimmt die Zeilenhöhe nicht (Hochformate würden die Karte strecken) */
.blog-grid--liste .blog-card--bild .blog-media img,
.blog-grid--magazin .blog-card--top .blog-media img { position: absolute; inset: 0; }

/* Magazin: neuester Beitrag über die ganze Breite */
.blog-grid--magazin .blog-card--top { grid-column: 1 / -1; display: grid; grid-template-columns: 1.15fr 1fr; }
.blog-grid--magazin .blog-card--top .blog-media { height: 100%; min-height: 280px; aspect-ratio: auto; border-bottom: 0; border-right: 1px solid var(--line); }
.blog-grid--magazin .blog-card--top .blog-card__body { justify-content: center; padding: 34px 36px; }
.blog-grid--magazin .blog-card--top h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }

/* ---- Beitrag: Kopfbereich ------------------------------------------------ */
.blog-hero h1 { font-size: clamp(2rem, 4.2vw, 3.4rem); letter-spacing: -.035em; overflow-wrap: anywhere; hyphens: auto; }
.blog-hero__lead { max-width: 62ch; margin-top: 18px; color: var(--muted); font-size: 1.12rem; }
.blog-hero--bild { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.blog-hero--bild .crumb { grid-column: 1 / -1; }
.blog-hero__media { border-radius: 10px; box-shadow: var(--shadow); border: 6px solid var(--white); }
.crumb [aria-current="page"] { display: inline-block; max-width: 48ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* Breites Titelbild, ragt in den Kopfbereich */
.blog-cover { position: relative; z-index: 2; margin-top: -30px; }
/* Panorama-Zuschnitt: volle Inhaltsbreite, Höhe begrenzt (max-height würde mit
   aspect-ratio sonst die Breite verkleinern) */
.blog-cover .blog-media { aspect-ratio: auto; height: clamp(220px, 40vw, 520px); border-radius: 10px; box-shadow: var(--shadow); }
.blog-cover + .blog-article { padding-top: clamp(40px, 6vw, 70px); }

/* ---- Beitrag: Text ----------------------------------------------------- */
.blog-article .article-body { max-width: var(--blog-text); }
.blog-view[data-schrift="gross"] .article-body { font-size: 1.125rem; }
.blog-article .article-body > :first-child { margin-top: 0; }
.blog-article .article-body p, .blog-article .article-body li { line-height: 1.75; }
.blog-view[data-einleitung="an"] .article-body > p:first-of-type { color: var(--blue-dark); font-size: 1.2em; line-height: 1.6; }

.blog-figure { margin: 0 0 32px; }
.blog-figure .blog-media { border-radius: 10px; }
.blog-figure--umfliessen { float: left; width: min(44%, 380px); margin: 6px 32px 18px 0; }
.blog-figure--umfliessen .blog-media { aspect-ratio: auto; }
.blog-figure--umfliessen .blog-media img { height: auto; }
.blog-article .article-body::after { display: block; clear: both; content: ""; }

/* Bilder und Abbildungen im Inhalt (u. a. WordPress-Import) */
.blog-article .article-body img { max-width: 100%; height: auto; }
.blog-article .article-body figure { margin: 30px 0; }
.blog-article .article-body figure img { margin-bottom: 10px; }
.blog-article .article-body figcaption, .blog-article .article-body .wp-caption-text { color: var(--muted); font-size: .9rem; }
.blog-article .article-body .alignleft { float: left; max-width: 45%; margin: 6px 28px 16px 0; }
.blog-article .article-body .alignright { float: right; max-width: 45%; margin: 6px 0 16px 28px; }
.blog-article .article-body .aligncenter { display: block; margin-inline: auto; }
.blog-article .article-body iframe, .blog-article .article-body video { max-width: 100%; border: 0; border-radius: 8px; }
.blog-article .article-body table { display: block; overflow-x: auto; }

/* Im Editor gesetzte Abschnittsrahmen innerhalb eines Beitrags nicht mit
   dem vollen Seitenabstand darstellen (sonst entstehen große Lücken). */
.blog-article .article-body .content-section,
.blog-article .article-body .section { padding: clamp(18px, 3vw, 32px) 0; }
.blog-article .article-body .content-section[class*="--"]:not(.content-section--white),
.blog-article .article-body .section[class*="--"] { padding-inline: clamp(18px, 3vw, 32px); border-radius: 10px; margin: 28px 0; }
.blog-article .article-body .article-body,
.blog-article .article-body .container { width: auto; max-width: none; }

/* ---- Weitere Beiträge ---------------------------------------------------- */
.blog-more h2 { margin-bottom: 30px; }

/* ---- Responsiv ----------------------------------------------------------- */
@media (max-width: 980px) {
  .blog-hero--bild { grid-template-columns: 1fr; }
  .blog-hero--bild .blog-hero__media { max-width: 640px; }
  .blog-grid--magazin .blog-card--top { grid-template-columns: 1fr; }
  .blog-grid--magazin .blog-card--top .blog-media { min-height: 0; aspect-ratio: var(--blog-ratio); border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 720px) {
  .blog-grid--liste .blog-card--bild { grid-template-columns: 1fr; }
  .blog-grid--liste .blog-card--bild .blog-media { min-height: 0; aspect-ratio: var(--blog-ratio); border-right: 0; border-bottom: 1px solid var(--line); }
  .blog-grid--cols-2 { grid-template-columns: 1fr; }
  .blog-figure--umfliessen, .blog-article .article-body .alignleft, .blog-article .article-body .alignright { float: none; width: auto; max-width: 100%; margin: 0 0 24px; }
  .blog-cover { margin-top: 0; padding-top: 24px; }
  .crumb [aria-current="page"] { max-width: 22ch; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-media img { transition: none; }
  .blog-card:hover .blog-media img { transform: none; }
}