/* Projektseite (Vorlage für alle 8 Projekte) · hero (Owner: wdf-section-builder, Auftrag B-projekt-vorlage).
   1:1 aus wdf/entwuerfe/projekt-vorlage/entwurf.css (r1), jede Regel im Abschnitt, in dessen Markup ihre Klassen vorkommen, Reihenfolge wie im Entwurf.
   Nur Tokens; freie Werte (Prozent-/svh-Maße der Bühne) wie im Entwurf. */

.pv-held { position: relative; padding: calc(var(--kopf-h) + var(--space-48)) 0 var(--space-64); }
.pv-held-raster { display: grid; gap: var(--space-32); }
.pv-held-text, .pv-held-titel, .pv-held-neben { display: grid; gap: var(--space-20); align-content: start; }
.pv-held-text .eyebrow { margin-bottom: calc(-1 * var(--space-4)); }
.pv-h1 { max-width: none; }
.pv-held-text .lead { max-width: 44ch; }
.pv-held-aktion { display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-4); }
.pv-held .pv-tags li {
  color: color-mix(in oklab, var(--pf) 42%, var(--color-text));
  background: color-mix(in srgb, var(--pf) 10%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf) 45%, transparent); }
.pv-held-buehne { border-radius: var(--radius-xl); box-shadow: var(--shadow-card-module); padding: 9% 7% 0; margin: 0; }
.pv-held-buehne .pk-screens { margin-bottom: -2%; }
.pv-held-buehne .sc-m { box-shadow: var(--shadow-screen-phone); }
.pv-held-buehne .pk-browser, .pv-held-buehne .sc-m { transition: none; }
.pv-steckbrief {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-16) var(--space-24);
  padding-top: var(--space-24); border-top: 1px solid var(--color-line); }
.pv-steckbrief div { display: grid; gap: var(--space-6); align-content: start; min-width: 0; }
.pv-steckbrief dt { color: var(--color-text-tertiary); }
.pv-steckbrief dd { font-size: var(--font-size-small); line-height: var(--leading-compact); color: var(--color-text); }
.pv-steckbrief .link-mono { overflow-wrap: anywhere; }
@media (min-width: 768px) {
  .pv-steckbrief { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .pv-held { padding-bottom: var(--space-96); }
  .pv-held-text { grid-template-columns: minmax(0, 13fr) minmax(0, 11fr); column-gap: var(--space-64); align-items: end; }
  .pv-held-neben { padding-bottom: var(--space-8); }
  .pv-held-raster { row-gap: var(--space-48); }
  .pv-held-buehne { padding: 5.5% 15% 0; }
  .pv-held-buehne .pk-screens { padding-right: 11%; }
}
@media (min-width: 1280px) {
  .pv-held-raster { column-gap: var(--space-96); }
}
