/* static/ressourcen.css — Ressourcen (Blog): Übersicht und Beitrag
 *
 * Runde 89: im Gestaltungssystem der CMS-Seiten. Grundlage sind
 * site_frame.css (Rahmen, Farben, Schrift) und site.css (hp-*-Bausteine:
 * Hero, Masskette, Überschriften, Knöpfe). Hier nur die eigenen Teile,
 * alle unter body.hp-res-page, Klassen hp-res-*.
 *
 * Wie die Startseite: Zeichenpapier, blaue Tinte, linksbündig, keine Karten,
 * keine Versalien. Bilder mit 16px-Rundung, Trennlinien in --hp-rule.
 * Markup: templates/ressourcen.html, templates/post_detail.html.
 */


/* Kleiner Kopfzeilen-Text über Listen („Meistgelesen“, „Neu“, „Inhalt“) */
body.hp-res-page .hp-res-label {
  font-family: var(--hp-font);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--hp-blue);
  margin: 0 0 14px;
  padding: 0;
}

/* ── Brotkrumen ────────────────────────────────────────────────────────── */
body.hp-res-page .hp-res-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--hp-graphite);
  margin: 0 0 clamp(18px, 2.5vw, 32px);
}
body.hp-res-page .hp-res-crumbs a { color: var(--hp-graphite); text-decoration: none; }
body.hp-res-page .hp-res-crumbs a:hover { color: var(--hp-blue); }
body.hp-res-page .hp-res-crumbs span[aria-hidden] { color: var(--hp-rule); }

/* ── Kopf der Übersicht ────────────────────────────────────────────────── */
.hp-res-hero { padding-bottom: clamp(20px, 3vw, 36px); }
.hp-res-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: end;
}
.hp-res-hero-text { grid-column: 1 / span 7; }
body.hp-res-page .hp-res-hero-text .hp-display { max-width: 11ch; overflow-wrap: anywhere; hyphens: auto; }
body.hp-res-page .hp-res-hero-text .hp-mass { max-width: 520px; }
.hp-res-top { grid-column: 9 / span 4; padding-bottom: 8px; }

/* Nummerierte Liste mit Linien — „Meistgelesen“ und Inhaltsverzeichnis */
body.hp-res-page .hp-res-top ol,
body.hp-res-page .hp-res-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--hp-ink);
}
body.hp-res-page .hp-res-top li,
body.hp-res-page .hp-res-toc > ol > li {
  list-style: none;
  border-bottom: 1px solid var(--hp-rule);
  margin: 0;
  padding: 0;
}
body.hp-res-page .hp-res-top li::marker,
body.hp-res-page .hp-res-toc li::marker { content: none; }
body.hp-res-page .hp-res-top a,
body.hp-res-page .hp-res-toc a {
  display: grid;
  grid-template-columns: 2.2em minmax(0, 1fr);
  gap: 8px;
  padding: 12px 0;
  font-family: var(--hp-font);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--hp-ink);
  text-decoration: none;
  transition: color .15s ease;
}
body.hp-res-page .hp-res-top a:hover,
body.hp-res-page .hp-res-toc a:hover,
body.hp-res-page .hp-res-toc a.is-aktiv { color: var(--hp-blue); }
.hp-res-nr {
  font-size: .85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--hp-blue);
  padding-top: .1em;
}

/* ── Themenfilter ──────────────────────────────────────────────────────── */
.hp-res-filter { padding: 0 0 clamp(24px, 4vw, 48px); }
body.hp-res-page .hp-res-filter ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
}
body.hp-res-page .hp-res-filter li { list-style: none; margin: 0; padding: 0; }
body.hp-res-page .hp-res-filter a {
  display: inline-block;
  font-family: var(--hp-font);
  font-size: .95rem;
  font-weight: 500;
  color: var(--hp-ink);
  background: var(--hp-white);
  padding: .5em 1em;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease;
}
body.hp-res-page .hp-res-filter a:hover { color: var(--hp-blue); }
body.hp-res-page .hp-res-filter a[aria-current="page"] { background: var(--hp-ink); color: var(--hp-white); }

/* ── Abschnitte ────────────────────────────────────────────────────────── */
.hp-res-section { padding: clamp(40px, 6vw, 88px) 0; }
.hp-res-section--lead { padding-top: clamp(8px, 2vw, 24px); }
.hp-res-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  border-bottom: 1px solid var(--hp-ink);
  padding-bottom: 14px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
body.hp-res-page .hp-res-section-head .hp-h2 { margin: 0; max-width: none; }

/* ── Beitrag in der Liste ──────────────────────────────────────────────── */
.hp-res-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(36px, 4vw, 56px) clamp(20px, 2.5vw, 36px);
}
/* lose wie auf dem Tisch: die mittlere Spalte etwas tiefer */
.hp-res-grid > .hp-res-item:nth-child(3n+2) { margin-top: clamp(0px, 3vw, 40px); }

.hp-res-item { margin: 0; min-width: 0; }
.hp-res-thumb { display: block; border-radius: 16px; overflow: hidden; background: var(--hp-white); }
.hp-res-thumb img,
.hp-res-thumb-leer {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.hp-res-thumb-leer {
  background-color: var(--hp-white);
  background-image:
    linear-gradient(to right, rgba(0, 7, 255, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 7, 255, .08) 1px, transparent 1px);
  background-size: 24px 24px;
}
.hp-res-item:hover .hp-res-thumb img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .hp-res-item:hover .hp-res-thumb img { transform: none; } }

.hp-res-text { padding-top: 16px; }
body.hp-res-page .hp-res-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--hp-graphite);
  margin: 0 0 8px;
  padding: 0;
  text-align: left;
}
body.hp-res-page .hp-res-meta span:first-child { color: var(--hp-blue); }
body.hp-res-page .hp-res-title {
  font-family: var(--hp-font);
  font-size: clamp(1.25rem, 1.6vw, 1.45rem);
  line-height: 1.18;
  font-weight: 600;
  font-stretch: 92%;
  letter-spacing: -.015em;
  text-transform: none;
  text-align: left;
  margin: 0 0 .45em;
  color: var(--hp-ink);
  overflow-wrap: anywhere;
  hyphens: auto;
}
body.hp-res-page .hp-res-title a { color: inherit; text-decoration: none; }
body.hp-res-page .hp-res-title a:hover { color: var(--hp-blue); }
body.hp-res-page .hp-res-excerpt {
  font-family: var(--hp-font);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--hp-graphite);
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Der neueste Beitrag groß: Bild links, Text rechts */
.hp-res-item--lead {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: center;
}
.hp-res-item--lead .hp-res-thumb { grid-column: 1 / span 7; border-radius: 20px; }
.hp-res-item--lead .hp-res-text { grid-column: 9 / span 4; padding-top: 0; }
body.hp-res-page .hp-res-item--lead .hp-res-title { font-size: clamp(1.7rem, 2.8vw, 2.6rem); line-height: 1.05; letter-spacing: -.025em; }
body.hp-res-page .hp-res-item--lead .hp-res-excerpt { font-size: clamp(1.02rem, 1.2vw, 1.15rem); }

/* ── Admin (nur für angemeldete Administratoren sichtbar) ──────────────── */
body.hp-res-page .hp-res-admin {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  padding: 10px;
  background: var(--hp-white);
  border-radius: 12px;
  font-size: .85rem;
}
body.hp-res-page .hp-res-admin form { margin: 0; display: inline; }
body.hp-res-page .hp-res-admin button {
  font-family: var(--hp-font);
  font-size: .85rem;
  font-weight: 500;
  padding: .4em .8em;
  border-radius: 999px;
  border: 0;
  background: var(--hp-paper);
  color: var(--hp-ink);
  cursor: pointer;
}
body.hp-res-page .hp-res-admin button:hover { background: var(--hp-ink); color: var(--hp-white); }
body.hp-res-page .hp-res-status {
  background: var(--hp-yellow);
  color: var(--hp-ink);
  font-weight: 600;
  padding: .3em .7em;
  border-radius: 6px;
}

/* ── Abschluss ─────────────────────────────────────────────────────────── */
.hp-res-cta { padding-bottom: clamp(80px, 10vw, 140px); }
.hp-res-cta > .hp-wrap { border-top: 1px solid var(--hp-ink); padding-top: clamp(40px, 6vw, 80px); }

/* ══ Einzelner Beitrag ════════════════════════════════════════════════════ */
.hp-res-post-head { max-width: 1360px; }
body.hp-res-page .hp-res-post-head .hp-display--lang { max-width: 20ch; overflow-wrap: anywhere; hyphens: auto; }
body.hp-res-page .hp-res-post-head .hp-mass { max-width: 520px; }
.hp-res-cover { margin: clamp(24px, 3vw, 40px) 0 0; }
.hp-res-cover img {
  display: block;
  width: 100%;
  max-height: 560px;
  object-fit: cover;
  border-radius: 20px;
  background: var(--hp-white);
}

.hp-res-post { padding-top: clamp(16px, 3vw, 40px); }
.hp-res-post-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  align-items: start;
}
.hp-res-article { grid-column: 1 / span 8; min-width: 0; }
.hp-res-side {
  grid-column: 10 / span 3;
  position: sticky;
  top: 110px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.hp-res-top--side { margin-top: 40px; }
body.hp-res-page .hp-res-toc ol ol { border: 0; padding: 0 0 10px 2.2em; margin: -4px 0 0; }
body.hp-res-page .hp-res-toc ol ol li { list-style: none; border: 0; }
body.hp-res-page .hp-res-toc ol ol a { display: block; padding: 5px 0; font-size: .92rem; color: var(--hp-graphite); }

/* Der Beitragstext: ruhige Lesespalte (überschreibt die alten Regeln aus styles.css) */
body.hp-res-page article.hp-res-article {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  padding: 0;
  margin: 0;
  max-width: none;
  font-family: var(--hp-font);
  font-size: 1rem;
}
body.hp-res-page .hp-res-content {
  font-family: var(--hp-font);
  font-size: clamp(1.06rem, 1.2vw, 1.18rem);
  line-height: 1.68;
  color: var(--hp-ink);
  max-width: 40em;
  overflow-wrap: break-word;
  -webkit-user-select: text;
  user-select: text;
}
body.hp-res-page .hp-res-content > :first-child { margin-top: 0; }
body.hp-res-page .hp-res-content p,
body.hp-res-page .hp-res-content li {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  text-align: left;
  width: auto;
  max-width: none;
  padding: 0;
}
body.hp-res-page .hp-res-content p { margin: 0 0 1.15em; }
body.hp-res-page .hp-res-content h2,
body.hp-res-page .hp-res-content h3,
body.hp-res-page .hp-res-content h4 {
  font-family: var(--hp-font);
  color: var(--hp-ink);
  text-transform: none;
  text-align: left;
  scroll-margin-top: 110px;
  text-wrap: balance;
}
body.hp-res-page .hp-res-content h2 {
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  line-height: 1.1;
  font-weight: 600;
  font-stretch: 90%;
  letter-spacing: -.022em;
  margin: 2.2em 0 .6em;
  padding-top: .8em;
  border-top: 1px solid var(--hp-rule);
}
body.hp-res-page .hp-res-content h3 {
  font-size: clamp(1.2rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 1.8em 0 .5em;
}
body.hp-res-page .hp-res-content h4 { font-size: 1.05rem; font-weight: 600; margin: 1.5em 0 .4em; }
body.hp-res-page .hp-res-content a { color: var(--hp-blue); text-decoration: underline; text-underline-offset: .2em; }
body.hp-res-page .hp-res-content a:hover { text-decoration-color: var(--hp-yellow); text-decoration-thickness: .4em; text-underline-offset: -.05em; text-decoration-skip-ink: none; }
body.hp-res-page .hp-res-content strong { font-weight: 600; }
body.hp-res-page .hp-res-content ul,
body.hp-res-page .hp-res-content ol { padding-left: 1.3em; margin: 0 0 1.2em; }
body.hp-res-page .hp-res-content ul li { list-style: disc; }
body.hp-res-page .hp-res-content ol li { list-style: decimal; }
body.hp-res-page .hp-res-content li { margin: 0 0 .4em; }
body.hp-res-page .hp-res-content li::marker { color: var(--hp-blue); }
body.hp-res-page .hp-res-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.8em 0;
  border: 0;
  border-radius: 16px;
  background: var(--hp-white);
}
body.hp-res-page .hp-res-content blockquote {
  margin: 1.6em 0;
  padding: 0 0 0 1.1em;
  border-left: 3px solid var(--hp-blue);
  font-size: 1.12em;
  line-height: 1.5;
}
body.hp-res-page .hp-res-content hr { border: 0; border-top: 1px solid var(--hp-rule); margin: 2.4em 0; }
body.hp-res-page .hp-res-content table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95em; display: block; overflow-x: auto; }
body.hp-res-page .hp-res-content th,
body.hp-res-page .hp-res-content td { text-align: left; padding: .6em .8em; border-bottom: 1px solid var(--hp-rule); }
body.hp-res-page .hp-res-content th { font-weight: 600; border-bottom-color: var(--hp-ink); }
body.hp-res-page .hp-res-content pre,
body.hp-res-page .hp-res-content code { font-size: .9em; background: var(--hp-white); border-radius: 6px; }
body.hp-res-page .hp-res-content pre { padding: 1em; overflow-x: auto; }
body.hp-res-page .hp-res-content iframe,
body.hp-res-page .hp-res-content video { max-width: 100%; border-radius: 16px; }
body.hp-res-page .hp-res-content .instagram-media { margin: 1.8em 0 !important; }

.hp-res-post-foot { padding-top: clamp(32px, 4vw, 56px); }
body.hp-res-page .hp-res-post-foot .hp-res-admin { margin-bottom: 20px; max-width: 40em; }

/* ── Kleine Bildschirme ────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hp-res-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-res-grid > .hp-res-item:nth-child(3n+2) { margin-top: 0; }
  .hp-res-grid > .hp-res-item:nth-child(2n) { margin-top: clamp(0px, 3vw, 40px); }
  .hp-res-article { grid-column: 1 / span 8; }
  .hp-res-side { grid-column: 9 / span 4; }
}
@media (max-width: 900px) {
  .hp-res-hero-text, .hp-res-top { grid-column: 1 / -1; }
  .hp-res-top { margin-top: 32px; }
  .hp-res-item--lead .hp-res-thumb,
  .hp-res-item--lead .hp-res-text { grid-column: 1 / -1; }
  .hp-res-item--lead .hp-res-text { padding-top: 18px; }
  .hp-res-article, .hp-res-side { grid-column: 1 / -1; }
  .hp-res-side { position: static; max-height: none; overflow: visible; order: -1; margin-bottom: 36px; }
  .hp-res-top--side { display: none; }  /* steht auf dem Handy nicht vor dem Text */
}
@media (max-width: 600px) {
  .hp-res-grid { grid-template-columns: minmax(0, 1fr); }
  .hp-res-grid > .hp-res-item:nth-child(n) { margin-top: 0; }
  body.hp-res-page .hp-res-content { font-size: 1.04rem; line-height: 1.62; }
  .hp-res-cover img { border-radius: 16px; }
}