/* ==========================================================================
   Coreflow · Weitere Seiten (Thread „Referenzen, Projekte und Wissen“)
   Gemeinsame Bausteine der Seiten unter src/seiten/: Brotkrumen, Seitenkopf, Fließtext, Fragen, Einstieg, Querverweise.
   Präfix .pg-. Nur Tokens aus base.css, keine neuen Farben. Ein Grund, Karten eine Stufe heller, Rot nur als Akzent.
   ========================================================================== */

/* ---------------- Brotkrumen ---------------- */
.pg-crumbs { padding-top: clamp(6.75rem, 5.5rem + 3vw, 8.5rem); }
.pg-crumbs ol { display: flex; flex-wrap: wrap; gap: .35rem .6rem; font-size: var(--fs-meta); color: var(--text-3); }
.pg-crumbs li { display: inline-flex; align-items: center; gap: .6rem; }
.pg-crumbs li + li::before { content: ""; width: 5px; height: 5px; border-top: 1.4px solid var(--line-3); border-right: 1.4px solid var(--line-3); transform: rotate(45deg); }
.pg-crumbs a { color: var(--text-2); transition: color var(--t-fast); }
.pg-crumbs a:hover { color: var(--text); }
.pg-crumbs [aria-current] { color: var(--text-3); max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- Seitenkopf (Übersichten, Regionalseiten) ---------------- */
.pg-hero { padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.pg-hero__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: end; }
.pg-hero__txt { display: grid; gap: 1.25rem; justify-items: start; }
.pg-hero__h { max-width: 15em; }
.pg-hero__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: .5rem; }
.pg-hero__trust { margin-top: .5rem; }
@media (max-width: 899px) { .pg-hero__grid { grid-template-columns: 1fr; align-items: start; } }

/* ---------------- Fließtext (Beiträge, Studie, Projekttexte, Rechtliches) ----------------
   Lesebreite max. 42 rem. Überschriften in derselben Stimme wie die Seite, nur kleiner. */
.pg-prose { max-width: 42rem; color: var(--text-2); font-size: 1.0625rem; line-height: 1.72; }
.pg-prose > * + * { margin-top: 1.15em; }
.pg-prose h2 { margin-top: 2.6em; font-size: clamp(1.45rem, 1.2rem + .9vw, 2rem); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; color: var(--text); text-wrap: balance; scroll-margin-top: 7rem; }
.pg-prose h3 { margin-top: 2em; font-size: 1.2rem; line-height: 1.3; letter-spacing: -.015em; font-weight: 600; color: var(--text); text-wrap: balance; scroll-margin-top: 7rem; }
.pg-prose h4 { margin-top: 1.6em; font-size: 1.05rem; font-weight: 600; color: var(--text); }
.pg-prose h2 + *, .pg-prose h3 + *, .pg-prose h4 + * { margin-top: .7em; }
.pg-prose strong, .pg-prose b { color: var(--text); font-weight: 600; }
.pg-prose a:not(.tlink):not(.btn) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: .22em; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-fast); }
.pg-prose a:not(.tlink):not(.btn):hover { text-decoration-color: var(--red); }
.pg-prose ul, .pg-prose ol { display: grid; gap: .55em; padding-left: 0; }
.pg-prose ul > li { position: relative; padding-left: 1.4em; }
.pg-prose ul > li::before { content: ""; position: absolute; left: .2em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--line-3); }
.pg-prose ol { counter-reset: pg-ol; }
.pg-prose ol > li { position: relative; padding-left: 2em; counter-increment: pg-ol; }
.pg-prose ol > li::before { content: counter(pg-ol) "."; position: absolute; left: 0; color: var(--text-3); font-variant-numeric: tabular-nums; font-weight: 600; }
.pg-prose blockquote { padding-left: 1.25rem; border-left: 2px solid var(--line-3); color: var(--text); font-weight: 500; }
.pg-prose hr { border: 0; border-top: 1px solid var(--line-2); margin-block: 2.5em; }
.pg-prose figure { margin-block: 2em; }
.pg-prose figure img { width: 100%; border-radius: var(--r-md); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); }
.pg-prose figcaption { margin-top: .7rem; font-size: var(--fs-meta); color: var(--text-3); }
.pg-prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; line-height: 1.5; }
.pg-prose th, .pg-prose td { padding: .7rem .8rem .7rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-2); }
.pg-prose th { color: var(--text); font-weight: 600; }
.pg-table { overflow-x: auto; margin-block: 1.75em; -webkit-overflow-scrolling: touch; }
.pg-table table { min-width: 34rem; }

/* Hervorgehobene Kästen im Text (Das Wichtigste in Kürze, Zusammenfassung): Karte, keine rote Kante */
.pg-box { padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); color: var(--text-2); }
.pg-box > * + * { margin-top: .8em; }
.pg-box__h { font-size: var(--fs-small); font-weight: 600; color: var(--red-text); }
.pg-box dl { display: grid; gap: .9rem; }
.pg-box dt { font-weight: 600; color: var(--text); }
.pg-box dd { margin-top: .2rem; }

/* ---------------- Fragen (details/summary, ohne JS bedienbar) ---------------- */
.pg-faq__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: start; }
.pg-faq__head { position: sticky; top: 7rem; margin-bottom: 0; }
.pg-faq__list { border-bottom: 1px solid var(--line-2); }
.pg-faq__item { border-top: 1px solid var(--line-2); }
.pg-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: 1.3rem; cursor: pointer; list-style: none; font-size: 1.1rem; font-weight: 600; line-height: 1.35; letter-spacing: -.012em; color: var(--text); }
.pg-faq__item summary::-webkit-details-marker { display: none; }
.pg-faq__item summary i { position: relative; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--r-sm); background: var(--surface-2); box-shadow: var(--ring); transition: background var(--t-fast); }
.pg-faq__item summary i::before, .pg-faq__item summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: .8rem; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--t-mid) var(--ease); }
.pg-faq__item summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.pg-faq__item[open] summary i::after { transform: translate(-50%, -50%) rotate(0deg); }
.pg-faq__item summary:hover i { background: var(--surface-3); }
.pg-faq__item summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.pg-faq__a { display: grid; gap: .9rem; padding: 0 3.75rem 1.5rem 0; color: var(--text-2); }
.pg-faq__a p { max-width: 38em; text-wrap: pretty; }
.pg-faq__a a:not(.tlink) { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: .22em; }
.pg-faq--inline .pg-faq__item summary { font-size: 1.05rem; }
@media (max-width: 899px) {
  .pg-faq__grid { grid-template-columns: 1fr; gap: 0; }
  .pg-faq__head { position: static; margin-bottom: var(--head-gap); }
  .pg-faq__a { padding-right: 0; }
  .pg-faq__item summary { font-size: 1.025rem; }
}

/* ---------------- Einstieg (Abschluss-Section ohne Block, wie auf den Leistungsseiten) ---------------- */
.pg-start__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 1rem + 4vw, 6rem); align-items: center; }
.pg-start__txt { display: grid; gap: 1.25rem; justify-items: start; }
.pg-start__acts { margin-top: .75rem; }
.pg-who { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 1.25rem; align-items: center; margin: 0; padding: 1.25rem; }
.pg-who img { width: 5.5rem; height: 5.5rem; border-radius: var(--r-md); object-fit: cover; }
.pg-who figcaption { display: grid; gap: .2rem; justify-items: start; }
.pg-who b { font-weight: 650; font-size: 1.05rem; }
.pg-who span { font-size: var(--fs-small); color: var(--text-2); margin-bottom: .35rem; }
@media (max-width: 899px) { .pg-start__grid { grid-template-columns: 1fr; } .pg-who { max-width: 26rem; } }

/* ---------------- Querverweise (Leistungen, weiterlesen) ----------------
   Ganze Karte klickbar, Aktiv-/Hover-Muster .sel aus base.css. */
.pg-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.pg-link { --sel-r: var(--r-lg); display: grid; align-content: start; gap: .45rem; padding: 1.35rem 1.4rem 1.4rem 1.5rem; border-radius: var(--r-lg); background: var(--surface-2); box-shadow: var(--ring), var(--shadow-1); }
.pg-link small { font-size: var(--fs-meta); color: var(--text-3); font-variant-numeric: tabular-nums; }
.pg-link b { font-size: 1.1rem; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; }
.pg-link span { font-size: var(--fs-small); color: var(--text-2); line-height: 1.5; }
.pg-link svg { width: 1rem; height: 1rem; margin-top: .4rem; color: var(--text-2); transition: transform var(--t-mid) var(--ease), color var(--t-mid); }
.pg-link:hover svg { transform: translateX(3px); color: var(--red-text); }

/* Badges der Projekte (gleiche Sprache wie die Referenzbühnen der Startseite) */
.pg-feat { display: flex; flex-wrap: wrap; gap: .45rem; }
.pg-feat li { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .65rem; border-radius: var(--r-sm); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); font-size: .8125rem; font-weight: 550; color: #fff; }
.pg-feat svg { width: 15px; height: 15px; opacity: .85; }
.pg-feat--quiet li { background: var(--surface-2); box-shadow: var(--ring); color: var(--text); }

/* Abschnittsnavigation auf langen Seiten (Inhaltsverzeichnis) */
.pg-toc { display: grid; gap: .1rem; font-size: var(--fs-small); }
.pg-toc__h { margin-bottom: .6rem; font-size: var(--fs-meta); font-weight: 600; color: var(--text-3); }
.pg-toc a { --sel-r: var(--r-sm); display: block; padding: .5rem .75rem .5rem .9rem; border-radius: var(--r-sm); color: var(--text-2); line-height: 1.4; }
.pg-toc a[aria-current="true"] { color: var(--text); }