/*
  ZwischenBlog AP-11
  Datei: assets/styles/public.css
  Rolle: führende Public-Komposition für Startseite, Archiv, Suche, Beitragkarten und Artikelstruktur.
  Grenze: keine Shell- und Navigationsdefinition, keine Contentdaten.
*/
.zb-public-wrap { max-width: var(--zb-max); margin: 0 auto; }
.zb-editorial-hero {
  min-height: clamp(360px, 48vh, 620px);
  position: relative;
  overflow: hidden;
  border: 1px solid var(--zb-line);
  border-radius: clamp(30px, 4vw, 52px);
  background: var(--zb-surface);
  box-shadow: var(--zb-shadow-soft);
}
.zb-editorial-hero__media { position: absolute; inset: 0; }
.zb-editorial-hero__media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.94) contrast(1.04) brightness(.70); }
.zb-editorial-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16,15,19,.88), rgba(16,15,19,.28) 72%, rgba(16,15,19,.12)); }
.zb-editorial-hero__content { position: relative; z-index: 1; min-height: inherit; display: grid; align-content: end; gap: 14px; padding: clamp(34px, 6vw, 78px); max-width: 820px; }
.zb-eyebrow { margin: 0; color: var(--zb-brand); font-weight: 780; letter-spacing: .02em; }
.zb-editorial-hero h1 { margin: 0; max-width: 11ch; font-size: clamp(3.2rem, 8.5vw, 7rem); line-height: .92; letter-spacing: -.065em; font-weight: 780; text-wrap: balance; }
.zb-editorial-hero p:last-child { margin: 0; max-width: 44ch; color: var(--zb-ink-soft); font-size: clamp(1.05rem, 1.6vw, 1.34rem); line-height: 1.55; }
.zb-home-rubrics { margin: 22px auto 0; display: flex; gap: 10px; flex-wrap: wrap; }
.zb-home-rubrics a { border: 1px solid var(--zb-line); background: color-mix(in srgb, var(--zb-surface) 82%, transparent); border-radius: var(--zb-radius-full); min-height: 42px; display: inline-flex; align-items: center; gap: 9px; padding: 0 15px; color: var(--zb-ink-soft); font-weight: 720; }
.zb-home-rubrics a:hover { color: var(--zb-ink); background: var(--zb-surface-2); }
.zb-public-layout { max-width: var(--zb-max); margin: clamp(48px, 7vw, 92px) auto 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 220px); gap: clamp(34px, 6vw, 82px); align-items: start; }
.zb-public-stream { display: grid; gap: clamp(44px, 7vw, 78px); }
.zb-section { display: grid; gap: clamp(20px, 3vw, 32px); }
.zb-section h2 { margin: 0; font-size: clamp(2rem, 4.2vw, 4.2rem); line-height: 1; letter-spacing: -.052em; font-weight: 760; }
.zb-onpage { position: sticky; top: calc(var(--zb-header-height) + 26px); display: grid; gap: 10px; padding-top: 28px; color: var(--zb-ink-muted); }
.zb-onpage__label { font-size: .82rem; font-weight: 780; }
.zb-onpage a { min-height: 38px; width: fit-content; border-radius: var(--zb-radius-full); display: inline-flex; align-items: center; padding: 0 13px; color: var(--zb-ink-soft); }
.zb-onpage a:hover, .zb-onpage a[aria-current="true"] { background: var(--zb-surface-2); color: var(--zb-ink); }
.zb-post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.zb-post-card { overflow: hidden; display: grid; grid-template-rows: auto 1fr; background: var(--zb-surface); border: 1px solid var(--zb-line); border-radius: var(--zb-radius-lg); }
.zb-post-card__image { aspect-ratio: 16 / 9; background: var(--zb-surface-2); overflow: hidden; }
.zb-post-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.zb-post-card:hover .zb-post-card__image img { transform: scale(1.025); }
.zb-post-card__body { padding: clamp(18px, 2vw, 26px); display: grid; gap: 12px; align-content: start; }
.zb-post-card__body h2, .zb-post-card__body h3 { margin: 0; font-size: 1.18rem; line-height: 1.22; letter-spacing: -.026em; font-weight: 760; }
.zb-post-card__body p { margin: 0; color: var(--zb-ink-soft); line-height: 1.68; }
.zb-post-card--feature { grid-column: 1 / -1; min-height: 330px; grid-template-columns: minmax(260px, .9fr) minmax(320px, 1.1fr); grid-template-rows: 1fr; background: transparent; border: 0; overflow: visible; }
.zb-post-card--feature .zb-post-card__image { min-height: 330px; aspect-ratio: auto; border-radius: var(--zb-radius-lg) 0 0 var(--zb-radius-lg); }
.zb-post-card--feature .zb-post-card__body { margin-left: -18px; border-radius: var(--zb-radius-lg); background: var(--zb-surface-2); padding: clamp(28px, 4vw, 54px); align-content: center; }
.zb-post-card--feature h2, .zb-post-card--feature h3 { font-size: clamp(1.8rem, 3.2vw, 3.1rem); line-height: 1.04; letter-spacing: -.052em; }
.zb-page-panel { max-width: var(--zb-max); margin: 0 auto 42px; border-radius: var(--zb-radius-xl); background: var(--zb-surface); border: 1px solid var(--zb-line); padding: clamp(30px, 5vw, 72px); }
.zb-page-panel h1 { margin: 0; font-size: clamp(3rem, 7vw, 6.4rem); line-height: .96; letter-spacing: -.065em; text-wrap: balance; }
.zb-page-panel p { max-width: 760px; margin: 14px 0 0; color: var(--zb-ink-soft); line-height: 1.7; }
.zb-article-layout { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 780px) minmax(190px, 220px); gap: clamp(38px, 7vw, 84px); align-items: start; }
.zb-article { display: grid; gap: 34px; }
.zb-article__head { display: grid; gap: 18px; }
.zb-article__head h1 { margin: 0; font-size: clamp(2.4rem, 5.6vw, 5.6rem); line-height: .98; letter-spacing: -.06em; text-wrap: balance; }
.zb-article__subtitle { margin: 0; color: var(--zb-ink-soft); font-size: clamp(1.08rem, 1.9vw, 1.34rem); line-height: 1.65; }
.zb-article__cover { margin: 0; overflow: hidden; border-radius: var(--zb-radius-lg); border: 1px solid var(--zb-line); background: var(--zb-surface-2); }
.zb-article__cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.zb-article__cover figcaption { padding: 10px 14px 14px; color: var(--zb-ink-muted); font-size: .9rem; }
.zb-article__body { max-width: var(--zb-readable); color: var(--zb-ink-soft); font-size: clamp(1.08rem, 1.55vw, 1.2rem); line-height: 1.9; }
.zb-article__body p { margin: 0 0 1.45em; }
.zb-article__body h2, .zb-article__body h3 { color: var(--zb-ink); line-height: 1.13; letter-spacing: -.04em; margin: 2.1em 0 .65em; }
.zb-article__body h2 { font-size: clamp(1.8rem, 3vw, 2.8rem); }
.zb-article__body h3 { font-size: clamp(1.4rem, 2.3vw, 2rem); }
@media (max-width: 1180px) {
  .zb-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zb-public-layout, .zb-article-layout { grid-template-columns: 1fr; }
  .zb-onpage { display: none; }
}
@media (max-width: 760px) {
  .zb-editorial-hero { min-height: 330px; border-radius: 30px; }
  .zb-editorial-hero::after { background: linear-gradient(90deg, rgba(16,15,19,.75), rgba(16,15,19,.20)); }
  .zb-editorial-hero__content { padding: 26px 22px; }
  .zb-editorial-hero h1 { font-size: clamp(2.75rem, 13vw, 4.3rem); max-width: 10ch; }
  .zb-home-rubrics { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 6px; }
  .zb-post-grid { grid-template-columns: 1fr; }
  .zb-post-card--feature { grid-template-columns: 1fr; min-height: 0; }
  .zb-post-card--feature .zb-post-card__image { min-height: 0; aspect-ratio: 16 / 10; border-radius: var(--zb-radius-lg) var(--zb-radius-lg) 0 0; }
  .zb-post-card--feature .zb-post-card__body { margin-left: 0; margin-top: -8px; border-radius: 0 0 var(--zb-radius-lg) var(--zb-radius-lg); }
  .zb-page-panel { border-radius: 32px; padding: 28px 22px; }
  .zb-page-panel h1 { font-size: clamp(2.7rem, 13vw, 4.2rem); }
}