/*
 * Plattform-E · Stylesheet
 *
 * Übernommen aus dem freigegebenen V4-Prototyp (04-konzept/plattform-e-projektbereich-v4-prototyp.html).
 * Tokens, Rollen und Komponenten: 04-konzept/DESIGN-SYSTEM.md. Ab der Übernahme ist diese Datei
 * die gepflegte Quelle.
 */

@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Aspekta';
  src: url('../fonts/aspekta-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
  color-scheme: light;
  --pe-ink: #000;
  --pe-soft: var(--pe-paper);
  --pe-line: var(--pe-ink);
  --pe-muted: #4b4946;
  --pe-blue: #bbe9ff;
  --pe-mint: #c0d9ce;
  --pe-yellow: #f9c432;
  --pe-orange: #ef9e49;
  --pe-grey: #d1d3d4;
  --pe-white: #fff;
  --pe-black: var(--pe-ink);
  --pe-black-text: var(--pe-white);
  --pe-dark-line: #63615e;
  --pe-dark-muted: var(--pe-grey);
  --pe-evidence-open: var(--pe-yellow);
  --pe-evidence-simulated: var(--pe-blue);
  --pe-focus: #156c8b;
  /* Verbindliches V2-Designsystem: 04-konzept/DESIGN-SYSTEM.md */ --pe-surface-page: var(--pe-paper);
  --pe-surface-card: var(--pe-white);
  --pe-text-primary: var(--pe-ink);
  --pe-text-secondary: var(--pe-muted);
  --pe-rule-dashed: 1px dashed color-mix(in srgb, var(--pe-ink) 72%, transparent);
  --pe-rule-dashed-inverse: 1px dashed color-mix(in srgb, var(--pe-white) 72%, transparent);
  --pe-content-max: 80rem;
  --pe-space-0: .25rem;
  --pe-space-1: .5rem;
  --pe-space-2: .75rem;
  --pe-space-3: 1rem;
  --pe-space-4: 1.5rem;
  --pe-space-5: 2rem;
  --pe-space-6: 3rem;
  --pe-space-7: 4rem;
  --pe-space-8: 6rem;
  --pe-section-x: max(2.5rem, calc((100% - var(--pe-content-max)) / 2));
  --pe-section-y: clamp(5.5rem, 8vw, 8rem);
  --pe-radius-control: .75rem;
  --pe-radius-card: 1rem;
  --pe-radius-marker: .25rem;
  --pe-radius-pill: 999px;
  --pe-radius-circle: 50%;
  --pe-shadow-low: 0 .5rem 1.25rem rgba(0, 0, 0, .06);
  --pe-shadow-medium: 0 .8rem 2rem rgba(0, 0, 0, .12);
  --pe-shadow-high: 0 2rem 6rem rgba(0, 0, 0, .25);
  --pe-ring-selected: inset 0 0 0 2px var(--pe-ink);
  --pe-ring-marker: 0 0 0 .2rem color-mix(in srgb, var(--pe-blue) 65%, transparent);
  --pe-transition-micro: 180ms ease;
  --pe-transition-layout: 350ms ease;
  /* Verbindliche Typografierollen */ --pe-type-display: clamp(3rem, 4.2vw, 4rem);
  --pe-type-h1: clamp(2.75rem, 4vw, 3.75rem);
  --pe-type-h2: clamp(1.875rem, 2.5vw, 2.5rem);
  --pe-type-h3-large: 1.75rem;
  --pe-type-h3: 1.5rem;
  --pe-type-card-small: 1.5rem;
  --pe-type-metric: 2.25rem;
  --pe-type-lead: 1.25rem;
  --pe-type-body: 1.0625rem;
  --pe-type-nav: 1rem;
  --pe-type-small: .875rem;
  --pe-type-label: .8125rem;
  --pe-type-category: 1.125rem;
  --pe-leading-display: 1.02;
  --pe-leading-h1: 1.02;
  --pe-leading-h2: .98;
  --pe-leading-h3-large: 1.05;
  --pe-leading-h3: 1.08;
  --pe-leading-card-small: 1.2;
  --pe-leading-lead: 1.45;
  --pe-leading-body: 1.5;
  --pe-leading-nav: 1.25;
  --pe-leading-small: 1.4;
  --pe-leading-label: 1.3;
  --pe-icon-small: 1.25rem;
  --pe-icon-large: 1.6rem;
  --pe-version-bar-height: 0px;
  --pe-font-nav: var(--pe-type-nav);
  --pe-font-section-copy: var(--pe-type-body);
  width: 100%;
  color: var(--pe-ink);
  font-family: 'Aspekta', Verdana, sans-serif;
  font-size: var(--pe-type-body);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

* {
  box-sizing: border-box;
}

button,
select {
  font: inherit;
}

.pe-site {
  overflow: clip;
  background: var(--pe-paper);
  color: var(--pe-ink);
  border: 1px solid var(--pe-grey);
}

.pe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pe-space-4);
  min-height: var(--pe-space-8);
  padding: var(--pe-space-4) max(var(--pe-space-5), calc((100% - var(--pe-content-max)) / 2));
}

.pe-logo {
  display: block;
  width: 14rem;
  flex: 0 0 auto;
  text-decoration: none;
}

.pe-logo-image {
  display: block;
  width: 100%;
  height: auto;
}

.pe-nav {
  display: flex;
  align-items: center;
  gap: var(--pe-space-3);
  color: var(--pe-ink);
  font-size: var(--pe-type-body);
}

.pe-global-link {
  white-space: nowrap;
  text-decoration: none;
}

.pe-global-link.is-current {
  color: var(--pe-ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45rem;
}

.pe-project-nav {
  position: sticky;
  top: var(--pe-version-bar-height);
  z-index: 20;
  padding: var(--pe-space-3) max(var(--pe-space-5), calc((100% - var(--pe-content-max)) / 2));
  border-block: 1px solid color-mix(in srgb, var(--pe-ink) 14%, transparent);
  background: var(--pe-blue);
  color: var(--pe-ink);
}

.pe-project-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pe-space-4) var(--pe-space-6);
}

.pe-project-nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pe-space-2) var(--pe-space-4);
  font-size: var(--pe-type-nav);
}

.pe-project-nav-link {
  border: 0;
  background: transparent;
  color: var(--pe-ink);
  padding: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.pe-project-nav-link:focus-visible {
  text-decoration: none;
  text-underline-offset: 5px;
}

@media (hover: hover) {
  .pe-project-nav-link:hover {
    text-decoration: none;
    text-underline-offset: 5px;
  }
}

.pe-project-nav-link[aria-current="location"] {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 5px;
}

.pe-section[id] {
  scroll-margin-top: var(--pe-space-8);
}

.pe-section {
  padding: var(--pe-section-y) var(--pe-section-x);
}

.pe-section + .pe-section {
  border-top: 0;
}

.pe-dark-section {
  background: var(--pe-black);
  color: var(--pe-black-text);
}

.pe-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pe-space-7) var(--pe-space-7);
  align-items: start;
}

.pe-hero > * {
  min-width: 0;
}

.pe-kicker {
  color: inherit;
  margin: 0 0 var(--pe-space-4);
  font-size: var(--pe-type-label);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .065em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

p {
  line-height: 1.5;
}

h1 {
  max-width: none;
  margin-bottom: var(--pe-space-5);
  font-size: var(--pe-type-h1);
  line-height: var(--pe-leading-h1);
  letter-spacing: -0.02em;
  font-weight: 500;
}

h2 {
  margin-bottom: var(--pe-space-5);
  font-size: var(--pe-type-h2);
  line-height: var(--pe-leading-h2);
  letter-spacing: -0.02em;
  font-weight: 600;
}

h3 {
  margin-bottom: var(--pe-space-3);
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
  letter-spacing: -0.02em;
  font-weight: 600;
}

.pe-lead {
  max-width: 56ch;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-2);
  margin-top: var(--pe-space-5);
}

.pe-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--pe-space-1) var(--pe-space-3);
  border-radius: var(--pe-radius-pill);
  background: var(--pe-blue);
  color: var(--pe-ink);
  font-size: var(--pe-type-small);
  line-height: 1.1;
  font-weight: 600;
  white-space: nowrap;
}

.pe-tag[data-tag-type="context"] {
  background: var(--pe-blue);
}

.pe-tag[data-tag-type="use"] {
  background: var(--pe-white);
}

.pe-tag[data-tag-type="approach"] {
  background: var(--pe-yellow);
}

.pe-media {
  margin: 0;
  min-height: 0;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--pe-radius-card);
  background: linear-gradient(145deg, transparent 0 45%, color-mix(in srgb, var(--pe-white) 74%, transparent) 46% 64%, transparent 65%), linear-gradient(28deg, var(--pe-mint), var(--pe-blue));
}

.pe-media::before,
.pe-media::after {
  content: "";
  position: absolute;
  border: 2px solid color-mix(in srgb, var(--pe-ink) 55%, transparent);
  background: color-mix(in srgb, var(--pe-paper) 62%, transparent);
}

.pe-media::before {
  width: 62%;
  height: 44%;
  left: 18%;
  bottom: 17%;
  transform: skewY(-5deg);
}

.pe-media::after {
  width: 42%;
  height: 57%;
  right: 11%;
  bottom: 12%;
  transform: skewY(7deg);
}

.pe-media.has-image::before,
.pe-media.has-image::after {
  display: none;
}

.pe-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pe-editorial {
  margin: var(--pe-space-6) 0 0;
  max-width: 34ch;
  font-size: var(--pe-type-h3);
  line-height: 1;
  letter-spacing: -0.02em;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.pe-highlight {
  width: 100%;
  min-width: 0;
  min-height: 20rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: left;
  padding: var(--pe-space-4);
  border: 0;
  border-radius: var(--pe-radius-card);
  background: var(--pe-blue);
  color: var(--pe-ink);
}

.pe-highlight > span {
  display: block;
  min-width: 0;
  max-width: 100%;
}

.pe-highlight span {
  min-width: 0;
}

button.pe-highlight {
  cursor: pointer;
}

@media (hover: hover) {
  button.pe-highlight:hover {
    background: var(--pe-blue);
  }
}

.pe-highlight[data-ready="false"] {
  background: var(--pe-soft);
}

.pe-footer {
  display: flex;
  justify-content: space-between;
  gap: var(--pe-space-4);
  padding: var(--pe-space-5);
  background: var(--pe-black);
  color: var(--pe-black-text);
}

@media (max-width: 1100px) {
  .pe-project-nav-inner {
    gap: var(--pe-space-4);
  }

  .pe-project-nav-links {
    gap: var(--pe-space-2) var(--pe-space-3);
    font-size: var(--pe-type-nav);
  }
}

@media (max-width: 991px) {
  h1 {
    font-size: var(--pe-type-h1);
    font-weight: 600;
  }

  .pe-header {
    min-height: auto;
    padding: var(--pe-space-5) var(--pe-space-5);
    align-items: flex-start;
    flex-direction: column;
  }

  .pe-nav {
    flex-wrap: wrap;
  }

  .pe-project-nav-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pe-space-2);
  }

  .pe-project-nav-links {
    width: 100%;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow-x: visible;
    scrollbar-width: none;
  }

  .pe-section[id] {
    scroll-margin-top: var(--pe-space-8);
  }

  .pe-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-7);
  }
}

@media (max-width: 767px) {
  .pe-header,
  .pe-footer {
    min-height: auto;
    padding: var(--pe-space-4) var(--pe-space-4);
    align-items: flex-start;
    flex-direction: column;
  }

  .pe-nav {
    flex-wrap: wrap;
  }

  .pe-project-nav {
    padding: var(--pe-space-3) var(--pe-space-4);
  }

  .pe-project-nav-inner {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pe-space-2);
  }

  .pe-project-nav-links {
    width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .pe-section {
    padding: var(--pe-space-7) var(--pe-space-4);
  }

  h1 {
    font-size: var(--pe-type-h1);
    font-weight: 600;
  }

  h2 {
    font-size: var(--pe-type-h2);
  }

  h3 {
    font-size: var(--pe-type-h3);
  }

  h1,
  h2,
  h3 {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }

  .pe-hero {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* V3: project microsite, page-based navigation and editorial layout */

.pe-site {
  border: 0;
}

button {
  letter-spacing: inherit;
}

.pe-logo,
.pe-global-link {
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
}

.pe-logo,
.pe-global-link[data-route] {
  cursor: pointer;
}

.pe-global-link[href] {
  cursor: pointer;
  text-decoration: none;
}

.pe-global-link:not([data-route]):not([href]) {
  cursor: default;
}

.pe-global-link {
  font-size: inherit;
}

.pe-global-link[data-route]:focus-visible,
.pe-global-link[href]:focus-visible {
  color: var(--pe-ink);
}

@media (hover: hover) {
  .pe-global-link[data-route]:hover,
  .pe-global-link[href]:hover {
    color: var(--pe-ink);
  }
}

:focus-visible {
  outline: 3px solid var(--pe-focus);
  outline-offset: 4px;
}

.pe-cta-link,
.pe-download-highlight,
.pe-contributor-link,
.pe-footer-socials a,
.pe-footer-legal a,
.pe-podcast-player a,
.pe-newsletter-consent a,
.pe-knowledge-map-marker {
  min-width: 2.75rem;
  min-height: 2.75rem;
}

.pe-download-highlight,
.pe-contributor-link,
.pe-footer-socials a,
.pe-footer-legal a,
.pe-podcast-player a,
.pe-newsletter-consent a {
  display: inline-flex;
  align-items: center;
}

.pe-button:active,
.pe-filter-option:active,
.pe-knowledge-filter:active,
.pe-project-nav-link:active,
.pe-nav-dropdown-item:active,
.pe-download-action:active,
.pe-knowledge-initiative-pagination button:active,
.pe-hero-slider-controls button:active,
.pe-lightbox-close:active {
  transform: translateY(1px);
}

.pe-story-card:active,
.pe-catalog-card:active,
.pe-start-feature:active,
.pe-related-card:active,
.pe-knowledge-card.has-link:active {
  transform: translateY(0);
}

.pe-cta-link:active,
.pe-contributor-link:active,
.pe-footer-socials a:active,
.pe-footer-legal a:active,
.pe-filter-toggle:active,
.pe-filter-clear:not(:disabled):active,
.pe-supporter-controls button:active,
.pe-knowledge-map-marker:active,
.pe-wiki-item summary:active {
  opacity: .72;
}

.pe-button:disabled,
[aria-disabled="true"] {
  opacity: .45;
  cursor: not-allowed;
}

.pe-project-nav {
  padding-block: 0;
  border: 0;
  box-shadow: none;
}

.pe-project-nav-inner {
  position: relative;
  min-height: 5.1rem;
  display: grid;
  grid-template-columns: minmax(13rem, 1fr) auto;
  align-items: center;
  gap: var(--pe-space-5);
}

.pe-project-nav-links {
  gap: var(--pe-space-0);
}

.pe-project-nav-link {
  padding: var(--pe-space-2) var(--pe-space-2);
  border-radius: var(--pe-radius-control);
  font-size: var(--pe-type-nav);
}

.pe-project-nav-link:focus-visible {
  background: transparent;
  color: var(--pe-ink);
  opacity: 1;
  text-decoration: none;
}

@media (hover: hover) {
  .pe-project-nav-link:hover {
    background: transparent;
    color: var(--pe-ink);
    opacity: 1;
    text-decoration: none;
  }
}

.pe-project-nav-link[aria-current="page"] {
  background: transparent;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .45rem;
}

.pe-nav-dropdown {
  position: relative;
}

.pe-nav-dropdown-menu {
  position: absolute;
  z-index: 50;
  top: calc(100% + 0.65rem);
  right: 0;
  width: min(25rem, 82vw);
  padding: var(--pe-space-1) 0;
  border: 0;
  border-radius: var(--pe-radius-control);
  background: var(--pe-paper);
  box-shadow: var(--pe-shadow-low);
}

.pe-nav-dropdown-menu[hidden] {
  display: none;
}

.pe-nav-dropdown-item {
  width: 100%;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--pe-space-2);
  align-items: center;
  min-height: 44px;
  padding: var(--pe-space-2) calc(var(--pe-space-1) + var(--pe-space-2));
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pe-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pe-nav-dropdown-item:focus-visible {
  background: color-mix(in srgb, var(--pe-grey) 35%, var(--pe-paper));
}

@media (hover: hover) {
  .pe-nav-dropdown-item:hover {
    background: color-mix(in srgb, var(--pe-grey) 35%, var(--pe-paper));
  }
}

.pe-nav-dropdown-item[aria-current="page"] {
  background: var(--pe-yellow);
}

.pe-nav-dropdown-item strong {
  font-weight: 400;
}

.pe-nav-dropdown-item > span {
  font-size: var(--pe-type-small);
  color: var(--pe-muted);
  font-variant-numeric: tabular-nums;
}

.pe-nav-dropdown > .pe-project-nav-link {
  border-radius: var(--pe-radius-marker);
}

.pe-nav-dropdown > .pe-project-nav-link:focus-visible {
  outline-offset: 0;
  opacity: 1;
}

.pe-project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pe-space-7);
  min-height: 0;
  padding: var(--pe-space-8) var(--pe-section-x);
  padding-top: var(--pe-space-7);
  background: var(--pe-paper);
}

.pe-project-hero-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-self: start;
  padding: 0;
}

.pe-project-hero h1 {
  margin-bottom: var(--pe-space-5);
  max-width: 11ch;
  font-size: var(--pe-type-display);
  line-height: var(--pe-leading-display);
}

.pe-project-hero .pe-lead {
  max-width: 35rem;
  margin-bottom: 0;
  line-height: 1.38;
}

.pe-project-hero-media {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: var(--pe-radius-card);
}

.pe-project-hero-media img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: cover;
}

.pe-project-statement {
  background: var(--pe-blue);
}

.pe-project-description-copy {
  min-width: 0;
  max-width: 46rem;
  display: grid;
  gap: var(--pe-space-5);
}

.pe-project-description-copy > p {
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-project-description-copy > h3 {
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
  font-weight: 700;
}

.pe-project-statement figure {
  width: 100%;
  max-width: 52ch;
  margin: 0;
  font-size: var(--pe-type-h3-large);
  font-weight: 500;
  line-height: var(--pe-leading-lead);
}

.pe-project-statement blockquote {
  margin: 0;
  font: inherit;
}

.pe-project-statement figcaption {
  margin-top: var(--pe-space-3);
  font-size: var(--pe-type-small);
  font-weight: 400;
  line-height: var(--pe-leading-small);
}

.pe-story-section {
  background: var(--pe-mint);
}

.pe-measure-switch {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-1);
  margin: var(--pe-space-6) 0 var(--pe-space-5);
}

.pe-measure-switch button {
  min-height: 44px;
  padding: var(--pe-space-2) var(--pe-space-4);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-pill);
  background: transparent;
  color: var(--pe-ink);
  font-size: var(--pe-type-nav);
  font-weight: 700;
  cursor: pointer;
}

@media (hover: hover) {
  .pe-measure-switch button:hover {
    background: var(--pe-paper);
  }
}

.pe-measure-switch button[aria-pressed="true"] {
  background: var(--pe-ink);
  color: var(--pe-white);
}

.pe-dark-section .pe-measure-switch button {
  border-color: var(--pe-white);
  color: var(--pe-white);
}

.pe-dark-section .pe-measure-switch button[aria-pressed="true"] {
  background: var(--pe-white);
  color: var(--pe-ink);
}

@media (hover: hover) {
  .pe-dark-section .pe-measure-switch button:hover {
    background: var(--pe-white);
    color: var(--pe-ink);
  }
}

.pe-dark-section .pe-measure-switch button:focus-visible {
  outline-color: var(--pe-yellow);
}

[data-measure-panel][hidden] {
  display: none;
}

[data-measure-panel="table"] {
  border-radius: var(--pe-radius-card);
  overflow: hidden;
}

.pe-measure-switch + .pe-story-grid {
  margin-top: 0;
}

.pe-measure-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  background: var(--pe-paper);
  color: var(--pe-ink);
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-measure-table th,
.pe-measure-table td {
  padding: var(--pe-space-4);
  vertical-align: top;
  text-align: left;
  border-bottom: 1px solid transparent;
  overflow-wrap: anywhere;
}

.pe-measure-table tr {
  position: relative;
}

.pe-measure-table tr::after {
  content: "";
  position: absolute;
  inset: auto var(--pe-space-4) 0;
  border-bottom: var(--pe-rule-dashed);
  pointer-events: none;
}

.pe-measure-table tbody tr:last-child::after {
  display: none;
}

.pe-measure-table thead th:first-child {
  width: 28%;
}

.pe-measure-table thead th:not(:first-child) {
  width: 36%;
}

.pe-measure-table tbody tr:last-child > * {
  border-bottom: 0;
}

.pe-measure-table a,
.pe-measure-table summary {
  color: inherit;
  cursor: pointer;
  min-height: 44px;
  padding: var(--pe-space-2) 0;
}

.pe-measure-table a:not(.pe-cta-link) {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
  font-size: var(--pe-type-small);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (hover: hover) {
  .pe-measure-table a:not(.pe-cta-link):hover {
    text-decoration-thickness: 2px;
  }
}

.pe-measure-table .pe-cta-link {
  text-decoration: none;
  font-weight: 400;
}

.pe-measure-table .pe-measure-highlight-link {
  max-width: 100%;
  margin-top: var(--pe-space-2);
  padding: var(--pe-space-2);
  border: 1px solid currentColor;
  border-radius: var(--pe-radius-pill);
  background: transparent;
  font-size: var(--pe-type-small);
  font-weight: 700;
  line-height: var(--pe-leading-body);
  white-space: normal;
}

.pe-measure-table .pe-measure-highlight-link:focus-visible {
  background: var(--pe-ink);
  color: var(--pe-white);
  opacity: 1;
}

@media (hover: hover) {
  .pe-measure-table .pe-measure-highlight-link:hover {
    background: var(--pe-ink);
    color: var(--pe-white);
    opacity: 1;
  }
}

.pe-measure-highlight-number {
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.pe-measure-table .pe-measure-summary {
  margin: 0;
  font-weight: 400;
}

.pe-measure-table summary {
  display: flex;
  align-items: center;
  gap: var(--pe-space-1);
  width: fit-content;
  max-width: 100%;
  font-size: var(--pe-type-nav);
  font-weight: 400;
  text-decoration: none;
  list-style: none;
}

.pe-measure-table summary::-webkit-details-marker {
  display: none;
}

.pe-measure-table summary::marker {
  content: '';
}

@media (hover: hover) {
  .pe-measure-table summary:hover {
    opacity: .68;
  }
}

.pe-measure-table :is(summary, .pe-measure-explanation-row a) .pe-icon {
  flex: 0 0 auto;
  width: var(--pe-icon-small);
  height: var(--pe-icon-small);
}

.pe-measure-table details[open] > summary .pe-icon-chevron-down {
  transform: rotate(180deg);
}

.pe-measure-explanation-row p {
  margin: var(--pe-space-2) 0 0;
}

/* Erläuterung als eigene Zeile: Bautechnisches und Rechtliches stehen in ihren Spalten
   und beginnen auf gleicher Höhe (BSY-Feedback 15.10.2026). Sichtbar, solange »Erläuterung« offen ist. */
.pe-measure-table tr:not(:has(details[open])) + .pe-measure-explanation-row {
  display: none;
}

.pe-measure-table tr:has(details[open])::after,
.pe-measure-table tbody tr:has(+ .pe-measure-explanation-row:last-child)::after {
  display: none;
}

.pe-measure-table tr:has(details[open]) > * {
  padding-bottom: 0;
}

.pe-measure-table .pe-measure-explanation-row > * {
  padding-top: 0;
}

.pe-measure-mobile-label {
  display: none;
}

@media (max-width: 767px) {
  .pe-measure-switch button {
    padding-inline: var(--pe-space-3);
  }

  .pe-measure-table,
  .pe-measure-table tbody,
  .pe-measure-table tr,
  .pe-measure-table th,
  .pe-measure-table td {
    display: block;
    width: 100%;
  }

  .pe-measure-table thead {
    display: none;
  }

  .pe-measure-table tbody tr {
    padding: var(--pe-space-4);
    border-bottom: 1px solid transparent;
  }

  .pe-measure-table tbody tr:last-child {
    border-bottom: 0;
  }

  .pe-measure-table tbody th,
  .pe-measure-table tbody td {
    padding: 0;
    border: 0;
  }

  .pe-measure-table tbody td {
    margin-top: var(--pe-space-4);
  }

  .pe-measure-table tbody tr:has(details[open]) {
    padding-bottom: 0;
  }

  .pe-measure-table tbody .pe-measure-explanation-row {
    padding-top: 0;
  }

  .pe-measure-explanation-row td:empty {
    display: none;
  }

  .pe-measure-mobile-label {
    display: block;
    font-weight: 700;
    margin-bottom: var(--pe-space-1);
  }
}

.pe-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pe-space-4);
  margin-top: var(--pe-space-7);
}

.pe-story-card {
  grid-column: auto;
  min-width: 0;
  min-height: 25rem;
  display: grid;
  grid-template-columns: minmax(18rem, .72fr) minmax(0, 1.28fr);
  align-self: start;
  padding: 0;
  border: 0;
  border-radius: var(--pe-radius-card);
  overflow: hidden;
  background: var(--pe-white);
  color: var(--pe-ink);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pe-story-card:nth-child(n),
.pe-story-grid[data-count="3"] .pe-story-card:nth-child(3) {
  grid-column: auto;
  margin-top: 0;
}

.pe-story-visual {
  position: relative;
  display: block;
  min-height: 25rem;
  overflow: hidden;
  background: var(--pe-mint);
}

/* Das Bild füllt die Fläche, bestimmt aber nicht die Kartenhöhe: Hochformate
   werden zugeschnitten statt die Karte zu strecken (BSY-Feedback 15.10.2026). */
.pe-story-visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--pe-transition-layout);
}

@media (hover: hover) {
  .pe-story-card:hover .pe-story-visual img {
    transform: scale(1.025);
  }
}

.pe-story-number {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: var(--pe-radius-circle);
  background: var(--pe-paper);
}

/* Bildnachweis unten links im Bild: weiße Schrift auf halbtransparentem dunklen Feld,
   lesbar auf Fotos und hellen Plänen (BSY-Feedback 15.10.2026) */
.pe-image-credit {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  max-width: calc(100% - 2rem);
  padding: .2rem .5rem;
  border-radius: var(--pe-radius-marker);
  background: rgb(0 0 0 / .45);
  color: var(--pe-white);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.3;
  text-align: left;
  pointer-events: none;
}

.pe-image-credit[hidden] {
  display: none;
}

/* Im Kopfbild nie unter die Bildsteuerung rechts unten laufen */
.pe-hero-slider .pe-image-credit {
  max-width: calc(100% - 20rem);
}

/* Mobil belegt die Bildsteuerung fast die ganze untere Kante des Kopfbilds */
@media (max-width: 767px) {
  .pe-hero-slider .pe-image-credit {
    top: .75rem;
    bottom: auto;
    left: .75rem;
    max-width: calc(100% - 5rem);
  }
}

.pe-image-credit--small {
  left: .5rem;
  bottom: .5rem;
  max-width: calc(100% - 1rem);
  font-size: .75rem;
}

.pe-story-copy {
  min-height: 25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pe-space-5);
  padding: var(--pe-space-5);
}

.pe-story-card .pe-story-copy {
  background: var(--pe-white);
}

.pe-story-copy h3 {
  max-width: 14ch;
  font-size: var(--pe-type-h3-large);
  line-height: var(--pe-leading-h3-large);
}

.pe-story-copy p {
  max-width: 36rem;
  color: color-mix(in srgb, var(--pe-ink) 72%, transparent);
  font-size: var(--pe-type-body);
}

.pe-story-relation {
  display: grid;
  gap: var(--pe-space-4);
  margin-top: var(--pe-space-4);
}

.pe-story-relation-effect {
  display: grid;
  gap: var(--pe-space-2);
}

.pe-story-relation-effect {
  padding-top: var(--pe-space-4);
  border-top: var(--pe-rule-dashed);
}

.pe-story-relation-label {
  color: var(--pe-muted);
  font-size: var(--pe-type-small);
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.pe-story-relation-effect-head {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--pe-space-2);
}

.pe-story-relation-effect-head .pe-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.pe-story-relation strong {
  max-width: 38rem;
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
  line-height: 1.32;
}

.pe-story-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--pe-space-3) var(--pe-space-4);
  margin-top: auto;
}

.pe-story-footer .pe-highlight-tags {
  margin-top: 0;
}

.pe-story-action {
  display: flex;
  justify-content: flex-end;
  gap: var(--pe-space-3);
  font-size: var(--pe-type-nav);
}

.pe-decision-story {
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr);
  column-gap: var(--pe-space-7);
  background: var(--pe-paper);
}

.pe-decision-story > .pe-section-heading {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.pe-decision-arc {
  --pe-decision-progress: 0;
  --pe-decision-line-start: .78rem;
  --pe-decision-track-height: calc(100% - 4.25rem);
  --pe-decision-line-x: -2.875rem;
  position: relative;
  grid-column: 2;
  width: 100%;
  margin: var(--pe-space-7) 0 0;
}

.pe-decision-arc::before,
.pe-decision-arc::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: var(--pe-decision-line-start);
  bottom: auto;
  left: var(--pe-decision-line-x);
  width: 3px;
  height: var(--pe-decision-track-height);
  transform-origin: top;
  pointer-events: none;
}

.pe-decision-arc::before {
  background: var(--pe-yellow);
  transform: translateX(-50%);
}

.pe-decision-arc::after {
  background: var(--pe-ink);
  transform: translateX(-50%) scaleY(var(--pe-decision-progress));
  transition: none;
}

.pe-decision-step {
  position: relative;
  display: block;
  padding: 0 0 var(--pe-space-7);
}

.pe-decision-step-number {
  position: absolute;
  z-index: 1;
  top: 0;
  left: var(--pe-decision-line-x);
  width: 1.25rem;
  height: 1.25rem;
  margin-top: var(--pe-space-0);
  padding: 0;
  border-radius: var(--pe-radius-circle);
  background: transparent;
  color: transparent;
  font-size: 0;
  transform: translateX(-50%);
}

.pe-decision-step-number::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pe-yellow);
  transform: scale(1);
  transform-origin: 50% 50%;
  will-change: transform;
}

.pe-decision-step:first-child .pe-decision-step-number::before,
.pe-decision-step.is-passed .pe-decision-step-number::before {
  background: var(--pe-ink);
}

.pe-decision-step.is-current .pe-decision-step-number::before {
  animation: pe-decision-node-arrival 420ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes pe-decision-node-arrival {
  0%, 100% { transform: scale(1); }
  42% { transform: scale(1.38); }
  70% { transform: scale(.94); }
}

.pe-decision-step-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pe-space-2);
  align-items: start;
}

.pe-decision-step-copy h3 {
  font-size: var(--pe-type-h3-large);
  line-height: var(--pe-leading-h3-large);
  text-wrap: balance;
}

.pe-decision-step-copy p {
  max-width: 42rem;
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: 1.5;
}

.pe-decision-step-copy p + p {
  margin-top: var(--pe-space-3);
}

.pe-deep-dive-section {
  background: var(--pe-paper);
}

.pe-deep-dive-copy {
  display: grid;
  gap: var(--pe-space-4);
  max-width: 46rem;
}

.pe-deep-dive-copy p {
  margin: 0;
  line-height: 1.55;
}

.pe-project-overview-layout {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--pe-space-7);
  align-items: start;
}

.pe-project-overview-layout .pe-category-title {
  margin: var(--pe-space-0) 0 0;
}

.pe-project-profile-list {
  margin: 0;
}

.pe-project-profile-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(10rem, .42fr) minmax(0, 1fr);
  gap: var(--pe-space-5);
  padding: var(--pe-space-3) 0;
  border-bottom: var(--pe-rule-dashed);
}

.pe-project-profile-row:first-child {
  padding-top: 0;
}

.pe-project-profile-row dt,
.pe-project-profile-row dd {
  min-width: 0;
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.pe-project-profile-row dt {
  font-weight: 700;
}

.pe-project-profile-row dd {
  font-weight: 400;
}

.pe-media-open {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: var(--pe-black);
  color: var(--pe-black-text);
  text-align: left;
  cursor: zoom-in;
}

.pe-media-open img {
  transition: transform var(--pe-transition-micro);
}

.pe-media-open:focus-visible img {
  transform: scale(1.015);
}

@media (hover: hover) {
  .pe-media-open:hover img {
    transform: scale(1.015);
  }
}

.pe-media-open:focus-visible {
  outline: 3px solid var(--pe-ink);
  outline-offset: -3px;
}

.pe-media-open-label {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border-radius: var(--pe-radius-circle);
  background: var(--pe-black);
  color: var(--pe-black-text);
  transition: transform var(--pe-transition-micro), background var(--pe-transition-micro), color var(--pe-transition-micro);
}

.pe-media-open-label .pe-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.pe-media-open:focus-visible .pe-media-open-label {
  transform: scale(1.08);
  background: var(--pe-white);
  color: var(--pe-ink);
}

@media (hover: hover) {
  .pe-media-open:hover .pe-media-open-label {
    transform: scale(1.08);
    background: var(--pe-white);
    color: var(--pe-ink);
  }
}

.pe-download-groups {
  display: grid;
  gap: var(--pe-space-7);
}

.pe-download-group {
  min-width: 0;
}

.pe-download-group-head {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--pe-space-5);
  margin-bottom: var(--pe-space-4);
}

.pe-download-group-head h3 {
  margin: 0;
  font-size: var(--pe-type-h3-large);
  line-height: var(--pe-leading-h3-large);
}

.pe-download-group-head span {
  color: var(--pe-dark-muted);
  font-size: var(--pe-type-small);
}

.pe-download-list {
  display: grid;
  gap: var(--pe-space-2);
}

.pe-download-item {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr) auto;
  gap: var(--pe-space-4);
  align-items: center;
  min-width: 0;
  padding: var(--pe-space-4);
  border-radius: var(--pe-radius-control);
  background: var(--pe-black);
}

.pe-download-copy {
  min-width: 0;
}

.pe-download-copy > span {
  display: block;
  color: var(--pe-dark-muted);
  font-size: var(--pe-type-label);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pe-download-copy h4 {
  margin: 0 0 var(--pe-space-1);
  font-size: var(--pe-type-lead);
  line-height: 1.15;
}

.pe-download-highlight {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-0);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pe-black-text);
  font: inherit;
  font-size: var(--pe-type-nav);
  text-decoration: none;
  cursor: pointer;
}

.pe-download-context {
  color: var(--pe-dark-muted);
  font-size: var(--pe-type-small);
}

.pe-download-highlight .pe-icon {
  width: .95rem;
  height: .95rem;
}

.pe-download-highlight:focus-visible {
  text-decoration: underline;
  text-underline-offset: .22em;
}

@media (hover: hover) {
  .pe-download-highlight:hover {
    text-decoration: underline;
    text-underline-offset: .22em;
  }
}

.pe-download-actions {
  display: flex;
  gap: var(--pe-space-1);
  align-items: center;
}

.pe-download-action {
  min-height: 2.8rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pe-space-1);
  padding: var(--pe-space-2) var(--pe-space-3);
  border-radius: var(--pe-radius-pill);
  color: var(--pe-black-text);
  font-size: var(--pe-type-nav);
  font-weight: 700;
  text-decoration: none;
  transition: background var(--pe-transition-micro), color var(--pe-transition-micro), transform var(--pe-transition-micro);
}

.pe-download-action .pe-icon {
  width: 1rem;
  height: 1rem;
}

.pe-download-action:focus-visible {
  transform: translateY(-.1rem);
  background: var(--pe-white);
  color: var(--pe-ink);
}

@media (hover: hover) {
  .pe-download-action:hover {
    transform: translateY(-.1rem);
    background: var(--pe-white);
    color: var(--pe-ink);
  }
}

.pe-download-empty {
  padding: var(--pe-space-5);
  border-radius: var(--pe-radius-control);
  background: var(--pe-black);
  color: var(--pe-dark-muted);
}

.pe-empty-state {
  min-height: 20rem;
  display: grid;
  place-items: center;
  padding: var(--pe-space-6);
  border: var(--pe-rule-dashed);
  border-radius: var(--pe-radius-card);
  text-align: center;
}

.pe-media-library {
  padding: var(--pe-space-7) max(var(--pe-space-5), calc((100% - var(--pe-content-max)) / 2)) var(--pe-space-8);
  background: var(--pe-paper);
}

.pe-media-library-intro {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  align-items: start;
  margin-bottom: var(--pe-space-7);
}

.pe-media-chapter-marker {
  display: flex;
  margin: 0;
}

.pe-media-library-intro h1 {
  font-size: var(--pe-type-h1);
  line-height: var(--pe-leading-h1);
  margin: 0;
}

.pe-media-library-intro p {
  max-width: 65ch;
  margin: 0;
  color: var(--pe-ink);
}

.pe-media-library .pe-download-group-head h2 {
  margin: 0;
  font-size: var(--pe-type-h3-large);
  line-height: var(--pe-leading-h3-large);
}

.pe-media-library .pe-download-group-head span {
  color: var(--pe-ink);
}

.pe-media-library .pe-download-list {
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border-top: var(--pe-rule-dashed);
  border-bottom: var(--pe-rule-dashed);
}

.pe-media-library .pe-download-item {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--pe-space-7);
  padding: var(--pe-space-5) 0;
  border-radius: 0;
  background: transparent;
}

.pe-media-library .pe-download-item + .pe-download-item {
  border-top: var(--pe-rule-dashed);
}

.pe-media-library .pe-download-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 10rem;
  align-items: start;
  gap: var(--pe-space-4);
}

.pe-media-library .pe-download-title {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
  min-height: 44px;
  color: var(--pe-ink);
  text-decoration: none;
}

@media (hover: hover) {
  .pe-media-library .pe-download-title:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}

.pe-media-library .pe-download-title .pe-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
}

.pe-media-library .pe-download-copy h3 {
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-media-library .pe-download-highlight {
  min-height: 44px;
  color: var(--pe-ink);
}

.pe-media-library .pe-download-highlight .pe-icon {
  flex-shrink: 0;
}

.pe-media-library .pe-download-context {
  color: var(--pe-ink);
  font-size: var(--pe-type-small);
}

.pe-media-library .pe-download-actions {
  grid-column: auto;
  justify-content: flex-end;
  gap: var(--pe-space-4);
  align-self: start;
}

.pe-media-library .pe-download-action {
  font-weight: 400;
  min-height: 44px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--pe-ink);
}

@media (hover: hover) {
  .pe-media-library .pe-download-action:hover {
    transform: none;
    opacity: .68;
  }
}

.pe-media-library button.pe-download-action {
  border: 0;
  font-family: inherit;
  line-height: inherit;
  cursor: pointer;
}

.pe-media-library button.pe-download-action:disabled {
  cursor: wait;
}

@media (max-width: 767px) {
  .pe-media-library {
    padding: var(--pe-space-6) var(--pe-space-4) var(--pe-space-7);
  }

  .pe-media-library-intro {
    margin-bottom: var(--pe-space-5);
  }

  .pe-media-library .pe-download-list {
    padding: 0;
  }

  .pe-media-library .pe-download-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-1);
    padding: var(--pe-space-4) 0;
  }

  .pe-media-library .pe-download-action {
    flex: 0 0 auto;
  }

  .pe-media-library .pe-download-actions {
    justify-content: flex-start;
  }
}

.pe-media-library .pe-download-group-head {
  display: block;
}

.pe-media-library .pe-download-column-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pe-space-7);
  padding: var(--pe-space-3) 0;
  border-bottom: var(--pe-rule-dashed);
  font-size: var(--pe-type-body);
  font-weight: 700;
}

/* Tabellenköpfe folgen den Zwischenüberschriften im Fließtext. */

:is(th[scope="col"], [role="columnheader"]) {
  color: var(--pe-ink);
  font-family: inherit;
  font-size: var(--pe-type-body);
  font-weight: 700;
  line-height: var(--pe-leading-body);
  letter-spacing: 0;
  text-transform: none;
}

.pe-media-library .pe-download-action-heading {
  text-align: right;
}

.pe-media-library .pe-download-association {
  min-width: 0;
}

.pe-media-library .pe-download-mobile-prefix {
  display: none;
}

.pe-media-library .pe-download-highlight {
  justify-self: start;
  max-width: 100%;
}

.pe-media-library .pe-download-title span,
.pe-media-library .pe-download-highlight span {
  overflow-wrap: anywhere;
}

.pe-media-library .pe-download-empty-copy {
  margin-left: calc((100% - var(--pe-space-7)) * .275 + var(--pe-space-7));
}

@media (max-width: 767px) {
  .pe-media-library :is(.pe-media-library-intro, .pe-download-group-head, .pe-download-item) {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-3);
  }

  .pe-media-library .pe-download-actions {
    align-self: start;
  }

  .pe-media-library .pe-download-empty-copy {
    margin-left: 0;
  }
}

@media (max-width: 1023px) {
  .pe-media-library .pe-download-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-3);
  }

  .pe-media-library .pe-download-column-head {
    display: none;
  }

  .pe-media-library .pe-download-mobile-prefix {
    display: inline;
  }

  .pe-media-library .pe-download-actions {
    justify-content: flex-start;
  }
}

.pe-catalog-hero {
  padding: var(--pe-space-8) max(var(--pe-space-5), calc((100% - 80rem) / 2)) var(--pe-space-8);
  background: var(--pe-paper);
}

.pe-catalog-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(20rem, .8fr);
  gap: var(--pe-space-7);
  align-items: end;
}

.pe-catalog-hero h1 {
  max-width: 15ch;
  margin-bottom: 0;
  font-size: var(--pe-type-display);
  line-height: var(--pe-leading-display);
}

.pe-catalog-hero-copy {
  max-width: 38rem;
  margin-bottom: var(--pe-space-1);
  font-size: var(--pe-type-body);
  line-height: 1.48;
}

.pe-catalog-shell {
  padding: 0 max(var(--pe-space-5), calc((100% - 80rem) / 2)) var(--pe-space-8);
  background: var(--pe-paper);
}

.pe-catalog-toolbar {
  position: sticky;
  top: var(--pe-version-bar-height);
  z-index: 12;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pe-space-5);
  padding: var(--pe-space-4) 0;
  background: var(--pe-paper);
}

.pe-catalog-toolbar-copy {
  display: flex;
  align-items: baseline;
  gap: var(--pe-space-3);
}

.pe-catalog-toolbar-copy h2 {
  margin: 0;
  font-size: var(--pe-type-h3-large);
}

.pe-catalog-count {
  color: var(--pe-muted);
  font-size: var(--pe-type-small);
}

.pe-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-3);
  min-height: 3rem;
  padding: var(--pe-space-2) var(--pe-space-3);
  border: 0;
  border-radius: var(--pe-radius-pill);
  background: var(--pe-black);
  color: var(--pe-black-text);
  cursor: pointer;
}

.pe-filter-toggle span {
  display: grid;
  min-width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: var(--pe-radius-circle);
  background: var(--pe-yellow);
  color: var(--pe-ink);
  font-size: var(--pe-type-label);
  font-weight: 700;
}

.pe-filter-panel {
  position: absolute;
  top: calc(100% - .25rem);
  right: 0;
  left: 0;
  display: none;
  max-height: calc(100vh - var(--pe-version-bar-height) - 6.5rem);
  max-height: calc(100dvh - var(--pe-version-bar-height) - 6.5rem);
  margin: 0;
  padding: var(--pe-space-4);
  border: 1px solid color-mix(in srgb, var(--pe-ink) 20%, transparent);
  border-radius: var(--pe-radius-card);
  background: var(--pe-white);
  box-shadow: var(--pe-shadow-high);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.pe-filter-panel.is-open {
  display: block;
}

.pe-filter-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pe-space-3);
  margin-bottom: var(--pe-space-3);
}

.pe-filter-panel-head strong {
  font-size: var(--pe-type-nav);
}

.pe-filter-groups {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 var(--pe-space-4);
}

.pe-filter-group {
  min-width: 0;
  margin: 0;
  padding: var(--pe-space-3) 0 var(--pe-space-4);
  border: 0;
  border-top: var(--pe-rule-dashed);
}

.pe-filter-group legend {
  width: 100%;
  margin-bottom: var(--pe-space-2);
  padding: 0;
  font-size: var(--pe-type-nav);
  font-weight: 700;
  line-height: 1.25;
}

.pe-filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-1);
}

.pe-filter-option,
.pe-active-filter {
  min-height: 2.75rem;
  padding: var(--pe-space-1) var(--pe-space-2);
  border: 1px solid color-mix(in srgb, var(--pe-ink) 45%, transparent);
  border-radius: var(--pe-radius-pill);
  background: var(--pe-paper);
  color: var(--pe-ink);
  font-size: var(--pe-type-small);
  text-align: left;
  cursor: pointer;
}

.pe-filter-option:focus-visible {
  background: var(--pe-white);
}

@media (hover: hover) {
  .pe-filter-option:hover {
    background: var(--pe-white);
  }
}

.pe-filter-option[aria-pressed="true"] {
  border-color: var(--pe-black);
  background: var(--pe-black);
  color: var(--pe-black-text);
  font-weight: 700;
}

.pe-filter-clear {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: var(--pe-space-1) 0;
  border: 0;
  background: transparent;
  color: var(--pe-ink);
  text-decoration: underline;
  text-underline-offset: .35rem;
  cursor: pointer;
}

.pe-filter-clear:disabled {
  opacity: .38;
  cursor: default;
}

.pe-active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pe-space-1);
  min-height: 0;
  padding: var(--pe-space-3) 0;
}

.pe-active-filters:empty {
  display: none;
}

.pe-active-filters > span {
  color: var(--pe-muted);
  font-size: var(--pe-type-small);
}

.pe-active-filter {
  display: inline-flex;
  gap: var(--pe-space-1);
  align-items: center;
  border-radius: var(--pe-radius-pill);
  background: var(--pe-yellow);
}

.pe-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pe-space-6) var(--pe-space-5);
  padding-top: var(--pe-space-5);
}

.pe-catalog-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--pe-radius-card);
  overflow: hidden;
  background: var(--pe-white);
  color: var(--pe-ink);
  text-align: left;
  text-decoration: none;
}

.pe-catalog-card[href] {
  cursor: pointer;
}

/* Teaser ohne Projektseite: farbig, aber halb transparent (BSY-Feedback 15.10.2026) */
.pe-catalog-card--teaser {
  opacity: .5;
  cursor: default;
}

.pe-catalog-card--teaser .pe-catalog-card-cta {
  color: var(--pe-muted);
  font-weight: 400;
}

.pe-catalog-card-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pe-catalog-card-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--pe-transition-layout);
}

@media (hover: hover) {
  .pe-catalog-card[href]:hover .pe-catalog-card-media img {
    transform: scale(1.025);
  }
}

.pe-catalog-card-copy {
  min-height: 22rem;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pe-space-5);
  padding: var(--pe-space-4);
}

.pe-catalog-card-body {
  display: grid;
  gap: var(--pe-space-3);
  justify-items: start;
}

.pe-catalog-card-body .pe-kicker {
  margin: 0;
}

.pe-catalog-card h3 {
  max-width: 16ch;
  margin: 0;
  font-size: var(--pe-type-h3-large);
  line-height: var(--pe-leading-h3-large);
}

.pe-catalog-card-subtitle {
  max-width: 38rem;
  margin: 0;
  color: color-mix(in srgb, var(--pe-ink) 72%, transparent);
  line-height: 1.4;
}

.pe-catalog-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: var(--pe-space-3);
}

.pe-catalog-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-1);
}

.pe-catalog-card-tag {
  padding: var(--pe-space-1) var(--pe-space-2);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-pill);
  background: var(--pe-paper);
  font-size: var(--pe-type-nav);
  line-height: 1;
}

.pe-catalog-card-cta {
  flex: 0 0 auto;
  font-weight: 700;
  white-space: nowrap;
}

.pe-catalog-empty {
  min-height: 18rem;
  display: grid;
  place-items: center;
  padding: var(--pe-space-6);
  border-radius: var(--pe-radius-card);
  background: var(--pe-yellow);
  text-align: center;
}

/* Ergänzungen aus dem BSY-Konzept: Wirkung, Beteiligte, Weiterführung */

.pe-highlight-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-1);
  margin-top: var(--pe-space-4);
}

.pe-highlight-tag {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: var(--pe-space-1) var(--pe-space-2);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-pill);
  background: color-mix(in srgb, var(--pe-white) 55%, transparent);
  font-size: var(--pe-type-small);
  font-weight: 600;
  line-height: 1.1;
}

.pe-contributors-section {
  background: var(--pe-blue);
}

.pe-contributor-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--pe-space-3);
}

.pe-contributor-card {
  grid-column: span 4;
  min-width: 0;
  min-height: 15rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pe-space-5);
  padding: var(--pe-space-4);
  border-radius: var(--pe-radius-card);
  background: var(--pe-white);
}

.pe-contributor-card > span {
  color: var(--pe-muted);
  font-size: var(--pe-type-label);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.pe-contributor-card h3 {
  margin-bottom: var(--pe-space-2);
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
}

.pe-contributor-card p {
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: 1.45;
}

.pe-contributor-card small {
  color: var(--pe-muted);
  line-height: 1.35;
}

.pe-related-section {
  background: var(--pe-paper);
}

.pe-related-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pe-space-3);
}

.pe-related-card {
  min-width: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--pe-radius-card);
  overflow: hidden;
  background: var(--pe-white);
  color: var(--pe-ink);
  text-align: left;
  text-decoration: none;
  transition: transform var(--pe-transition-micro), box-shadow var(--pe-transition-micro);
}

.pe-related-card[href] {
  cursor: pointer;
}

.pe-related-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  transition: transform var(--pe-transition-micro);
}

.pe-related-copy {
  min-height: 14.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pe-space-4);
  padding: var(--pe-space-4);
}

.pe-related-copy h3 {
  margin: var(--pe-space-1) 0 var(--pe-space-2);
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
}

.pe-related-copy p {
  margin: 0;
  font-size: var(--pe-type-small);
  line-height: 1.4;
}

.pe-related-copy strong {
  font-size: var(--pe-type-nav);
}

.pe-related-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-1);
  margin-top: var(--pe-space-3);
}

.pe-related-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.8rem;
  padding: var(--pe-space-0) var(--pe-space-2);
  border: 1px solid color-mix(in srgb, var(--pe-ink) 62%, transparent);
  border-radius: var(--pe-radius-pill);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.1;
}

.pe-related-copy .pe-related-pending {
  color: var(--pe-muted);
  font-weight: 600;
}

.pe-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1400;
  padding: var(--pe-space-4);
  background: var(--pe-black);
  color: var(--pe-black-text);
}

.pe-lightbox[hidden] {
  display: none;
}

.pe-lightbox-dialog {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.pe-lightbox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pe-space-3);
  padding-bottom: var(--pe-space-3);
}

.pe-lightbox-count {
  font-size: var(--pe-type-small);
  font-weight: 700;
  letter-spacing: .04em;
}

.pe-lightbox-close,
.pe-lightbox-nav {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--pe-white) 45%, transparent);
  border-radius: var(--pe-radius-circle);
  background: color-mix(in srgb, var(--pe-white) 8%, transparent);
  color: var(--pe-black-text);
  cursor: pointer;
  transition: background var(--pe-transition-micro), color var(--pe-transition-micro), border-color var(--pe-transition-micro);
}

.pe-lightbox-close .pe-icon {
  width: 1.3rem;
  height: 1.3rem;
}

.pe-lightbox-close:focus-visible,
.pe-lightbox-nav:focus-visible {
  border-color: var(--pe-white);
  background: var(--pe-white);
  color: var(--pe-ink);
}

@media (hover: hover) {
  .pe-lightbox-close:hover,
  .pe-lightbox-nav:hover {
    border-color: var(--pe-white);
    background: var(--pe-white);
    color: var(--pe-ink);
  }
}

.pe-lightbox-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 0 var(--pe-space-7) var(--pe-space-3);
  touch-action: pan-y;
}

.pe-lightbox-figure {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  place-items: center;
  gap: var(--pe-space-5);
  margin: 0;
}

.pe-lightbox-image {
  max-width: 100%;
  max-height: calc(100dvh - 10rem);
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
}

.pe-lightbox-caption {
  width: min(54rem, 100%);
  min-height: 2.6rem;
  color: var(--pe-black-text);
  line-height: 1.4;
  text-align: center;
}

.pe-lightbox-nav {
  position: absolute;
  top: 50%;
  z-index: 1;
  transform: translateY(-50%);
}

/* Druckbewegung ohne Verlust der Zentrierung: Mit translateY(1px) sprang der Pfeil beim
   Drücken unter dem Mauszeiger weg, der Klick traf die Fläche dahinter und schloss die
   Bildansicht (G3, 19.10.2026) */
.pe-lightbox-nav:active {
  transform: translateY(calc(-50% + 1px));
}

.pe-lightbox-nav .pe-icon {
  width: 1.4rem;
  height: 1.4rem;
}

.pe-lightbox-prev {
  left: 0;
}

.pe-lightbox-next {
  right: 0;
}

.pe-lightbox-nav[hidden] {
  display: none;
}

@media (max-width: 767px) {
  .pe-lightbox {
    padding: var(--pe-space-2);
  }

  .pe-lightbox-stage {
    padding: 0 0 var(--pe-space-3);
  }

  .pe-lightbox-image {
    max-height: calc(100dvh - 9rem);
  }

  .pe-lightbox-nav {
    width: 2.85rem;
    height: 2.85rem;
    background: color-mix(in srgb, var(--pe-ink) 72%, transparent);
  }

  .pe-lightbox-prev {
    left: .25rem;
  }

  .pe-lightbox-next {
    right: .25rem;
  }

  .pe-lightbox-figure {
    gap: var(--pe-space-4);
  }

  .pe-lightbox-caption {
    padding-inline: var(--pe-space-1);
    font-size: var(--pe-type-small);
  }
}

@media (max-width: 1100px) {
  .pe-project-nav-inner {
    grid-template-columns: minmax(10rem, .8fr) auto;
    gap: var(--pe-space-3);
  }

  .pe-project-nav-link {
    padding-inline: var(--pe-space-1);
    font-size: var(--pe-type-nav);
  }

  .pe-filter-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pe-contributor-card {
    grid-column: span 6;
  }

  .pe-related-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 991px) {
  .pe-project-nav {
    padding: var(--pe-space-2) var(--pe-space-5);
  }

  .pe-project-nav-inner {
    min-height: auto;
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .pe-project-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-download-item {
    grid-template-columns: 3.75rem minmax(0, 1fr);
  }

  .pe-download-actions {
    grid-column: 2;
    justify-content: flex-start;
  }

  .pe-story-card,
  .pe-story-card:nth-child(n) {
    grid-column: auto;
    margin-top: 0;
  }

  .pe-story-grid[data-count="3"] .pe-story-card:nth-child(n) {
    grid-column: auto;
    margin-top: 0;
  }

  .pe-story-card {
    grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr);
  }

  .pe-catalog-hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-6);
  }

  .pe-catalog-card,
  .pe-catalog-card[data-size="wide"],
  .pe-catalog-card[data-size="narrow"] {
    grid-column: span 6;
  }
}

@media (max-width: 991px) {
  .pe-decision-arc {
    --pe-decision-line-start: .65rem;
    --pe-decision-line-x: .5rem;
    width: 100%;
    margin-top: var(--pe-space-6);
  }

  .pe-decision-story {
    display: block;
  }

  .pe-decision-story > .pe-section-heading {
    margin-bottom: var(--pe-space-5);
  }

  .pe-decision-step {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr);
    gap: var(--pe-space-4);
    padding: 0 0 var(--pe-space-6);
  }

  .pe-decision-step-number {
    position: relative;
    top: auto;
    left: auto;
    width: 1rem;
    height: 1rem;
    transform: none;
  }

  .pe-decision-step-copy {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-3);
  }
}

@media (max-width: 767px) {
  body {
    font-size: var(--pe-type-body);
  }

  .pe-header {
    gap: var(--pe-space-4);
  }

  .pe-nav {
    gap: var(--pe-space-2) var(--pe-space-3);
  }

  .pe-project-nav {
    padding: var(--pe-space-2) var(--pe-space-4);
  }

  .pe-project-hero h1 {
    font-size: var(--pe-type-display);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .pe-story-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-4);
    margin-top: var(--pe-space-5);
  }

  .pe-story-card,
  .pe-story-card:nth-child(n) {
    grid-column: auto;
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .pe-story-grid[data-count="3"] .pe-story-card:nth-child(n) {
    grid-column: auto;
  }

  .pe-story-visual {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  .pe-story-copy {
    min-height: 16rem;
    padding: var(--pe-space-4);
  }

  .pe-story-copy h3 {
    font-size: var(--pe-type-h3-large);
  }

  .pe-detail-page h2,
  .pe-detail-page h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .pe-download-group-head {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pe-space-1);
  }

  .pe-download-item {
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: var(--pe-space-3);
    padding: var(--pe-space-3);
  }

  .pe-download-actions {
    grid-column: 1 / -1;
    flex-wrap: wrap;
  }

  .pe-download-action {
    flex: 1 1 auto;
  }

  .pe-contributor-grid,
  .pe-related-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-contributor-card {
    grid-column: auto;
    min-height: 13rem;
  }

  .pe-related-copy {
    min-height: 0;
  }

  .pe-catalog-hero {
    padding: var(--pe-space-7) var(--pe-space-4) var(--pe-space-7);
  }

  .pe-catalog-hero h1 {
    font-size: var(--pe-type-h1);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .pe-catalog-shell {
    padding: 0 var(--pe-space-4) var(--pe-space-7);
  }

  .pe-catalog-toolbar {
    align-items: flex-start;
  }

  .pe-catalog-toolbar-copy {
    display: grid;
    gap: var(--pe-space-0);
  }

  .pe-filter-toggle {
    min-height: 2.75rem;
  }

  .pe-filter-panel {
    padding: var(--pe-space-3);
  }

  .pe-filter-groups {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-active-filters {
    min-height: 3.5rem;
  }

  .pe-catalog-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-4);
  }

  .pe-catalog-card-copy {
    min-height: 15rem;
  }

  .pe-catalog-card h3 {
    max-width: none;
    font-size: var(--pe-type-h3-large);
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .pe-catalog-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* Rechtliche Leseseiten: gemeinsame Textachse, offener Satzspiegel. */

.pe-legal-page {
  background: var(--pe-paper);
}

.pe-legal-intro h1 {
  margin: 0;
  font-size: var(--pe-type-h1);
  line-height: var(--pe-leading-h1);
  overflow-wrap: anywhere;
  hyphens: auto;
}

.pe-legal-layout {
  align-items: start;
}

.pe-legal-toc {
  display: grid;
  min-width: 0;
}

.pe-legal-toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--pe-space-2) 0;
  border-bottom: var(--pe-rule-dashed);
  color: var(--pe-ink);
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
  text-decoration: none;
}

.pe-legal-toc a:first-child {
  border-top: var(--pe-rule-dashed);
}

.pe-legal-toc a[aria-current] {
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (hover: hover) {
  .pe-legal-toc a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}

.pe-legal-copy {
  min-width: 0;
  max-width: 70ch;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
  overflow-wrap: anywhere;
}

.pe-legal-chapter + .pe-legal-chapter {
  margin-top: var(--pe-space-7);
  padding-top: var(--pe-space-6);
  border-top: var(--pe-rule-dashed);
}

.pe-legal-chapter h2 {
  margin: 0 0 var(--pe-space-5);
  font-size: var(--pe-type-h3-large);
  line-height: var(--pe-leading-h3-large);
  scroll-margin-top: var(--pe-space-8);
}

.pe-legal-chapter h3 {
  margin: var(--pe-space-6) 0 var(--pe-space-3);
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
}

.pe-legal-chapter h4 {
  margin: var(--pe-space-5) 0 var(--pe-space-3);
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-legal-chapter h2 + h3 {
  margin-top: 0;
}

.pe-legal-chapter p {
  margin: 0 0 var(--pe-space-4);
}

.pe-legal-chapter ul {
  margin: var(--pe-space-4) 0;
  padding-left: var(--pe-space-4);
}

.pe-legal-chapter li + li {
  margin-top: var(--pe-space-2);
}

.pe-legal-chapter a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (hover: hover) {
  .pe-legal-chapter a:hover {
    text-decoration-thickness: 2px;
  }
}

.pe-legal-chapter > :last-child {
  margin-bottom: 0;
}

/* UI-System V4: verbindliche Überschriften, Flächenfolgen und Zustände */

.pe-section-heading {
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  align-items: start;
  margin-bottom: var(--pe-space-7);
}

.pe-section-heading .pe-kicker {
  margin: var(--pe-space-0) 0 0;
}

.pe-section-category-link {
  min-height: 2.75rem;
  color: inherit;
  text-decoration: none;
}

.pe-section-category-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: .2em;
}

@media (hover: hover) {
  .pe-section-category-link:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}

.pe-section-heading-copy h2 {
  max-width: 15ch;
  margin-bottom: 0;
  font-size: var(--pe-type-h2);
  line-height: .96;
}

.pe-section-heading-copy p {
  max-width: 42rem;
  margin: var(--pe-space-4) 0 0;
  color: var(--pe-text-secondary);
  font-size: var(--pe-type-body);
  line-height: 1.55;
}

.pe-dark-section .pe-section-heading-copy p {
  color: var(--pe-dark-muted);
}

.pe-project-hero-copy {
  justify-content: center;
  gap: var(--pe-space-7);
}

.pe-global-link[data-route],
.pe-global-link[href],
.pe-project-nav-link {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.pe-tag {
  min-height: 2.6rem;
  padding: var(--pe-space-2) var(--pe-space-3);
  border: 1px solid var(--pe-ink);
  font-size: var(--pe-type-nav);
}

.pe-contributors-section {
  background: var(--pe-blue);
}

.pe-contributor-card {
  background: var(--pe-white);
  transition: transform var(--pe-transition-micro), box-shadow var(--pe-transition-micro);
}

.pe-story-copy h3,
.pe-decision-step-copy h3 {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}

@media (max-width: 767px) {
  .pe-story-copy h3,
  .pe-decision-step-copy h3 {
    hyphens: auto;
  }
}

.pe-story-copy h3 {
  max-width: none;
  font-size: var(--pe-type-h3-large);
}

.pe-decision-step-copy h3 {
  max-width: none;
  font-size: var(--pe-type-h3-large);
}

.pe-related-section {
  background: var(--pe-paper);
}

.pe-related-card {
  background: var(--pe-surface-card);
}

.pe-story-card,
.pe-catalog-card {
  transition: transform var(--pe-transition-micro), box-shadow var(--pe-transition-micro);
}

.pe-catalog-hero-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .55fr);
  gap: var(--pe-space-7);
}

.pe-catalog-hero h1 {
  max-width: 16ch;
  font-size: var(--pe-type-display);
}

/* Feedbackrunde: einheitliche Navigation, Hierarchie und Magazindetails */

.pe-project-nav {
  background: color-mix(in srgb, var(--pe-grey) 50%, var(--pe-white));
  color: var(--pe-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--pe-ink) 14%, transparent);
}

.pe-project-nav-links,
.pe-project-nav-link {
  font-size: var(--pe-font-nav);
}

.pe-project-nav-link {
  padding-inline: var(--pe-space-2);
}

.pe-category-title {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--pe-space-3);
  font-size: var(--pe-type-category);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-transform: none;
}

.pe-category-title::before {
  content: '';
  width: .75rem;
  height: .75rem;
  flex: 0 0 auto;
  margin-top: .38em;
  border-radius: var(--pe-radius-marker);
  background: currentColor;
}

.pe-dark-section .pe-category-title {
  color: var(--pe-white);
}

.pe-section-heading-copy h2 {
  max-width: 18ch;
  font-size: var(--pe-type-h2);
  line-height: 1;
}

.pe-section-heading-copy p {
  max-width: 45rem;
  margin-top: var(--pe-space-4);
  color: var(--pe-ink);
  font-size: var(--pe-font-section-copy);
  line-height: 1.5;
}

.pe-dark-section .pe-section-heading-copy p {
  color: var(--pe-black-text);
}

.pe-story-copy .pe-kicker {
  display: block;
  margin-bottom: var(--pe-space-4);
}

.pe-tag[data-effect-tooltip] {
  cursor: help;
}

.pe-effect-tooltip {
  position: fixed;
  z-index: 200;
  width: max-content;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: var(--pe-space-2) var(--pe-space-3);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-control);
  background: var(--pe-paper);
  color: var(--pe-ink);
  box-shadow: var(--pe-shadow-medium);
  font-size: var(--pe-type-small);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, calc(-100% - .65rem));
  transition: opacity var(--pe-transition-micro);
}

.pe-effect-tooltip[data-placement="bottom"] {
  transform: translate(-50%, .65rem);
}

.pe-effect-tooltip.is-visible {
  opacity: 1;
}

.pe-effect-tooltip[hidden] {
  display: none;
}

.pe-project-hero-media {
  position: relative;
  width: 100%;
  min-height: 0;
  aspect-ratio: 922 / 499;
  align-self: center;
  background: var(--pe-grey);
}

.pe-hero-slides {
  position: absolute;
  inset: 0;
  touch-action: pan-y pinch-zoom;
}

.pe-project-hero-media .pe-hero-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 0;
  transition: opacity var(--pe-transition-layout);
  pointer-events: none;
}

/* Nur das sichtbare Bild nimmt Klicks an und öffnet die Bildansicht (G3, 19.10.2026) */
.pe-project-hero-media .pe-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  cursor: zoom-in;
}

/* »Bild vergrößern« oben rechts: unten liegen Bildnachweis und Bildsteuerung */
.pe-hero-zoom {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: var(--pe-radius-circle);
  background: var(--pe-black);
  color: var(--pe-black-text);
  cursor: zoom-in;
  transition: transform var(--pe-transition-micro), background var(--pe-transition-micro), color var(--pe-transition-micro);
}

.pe-hero-zoom .pe-icon {
  width: 1.15rem;
  height: 1.15rem;
}

.pe-hero-zoom:focus-visible {
  transform: scale(1.08);
  background: var(--pe-white);
  color: var(--pe-ink);
}

@media (hover: hover) {
  .pe-hero-zoom:hover,
  .pe-hero-slides:has(.pe-hero-slide.is-active:hover) ~ .pe-hero-zoom {
    transform: scale(1.08);
    background: var(--pe-white);
    color: var(--pe-ink);
  }
}

@media (max-width: 767px) {
  .pe-hero-zoom {
    top: .75rem;
    right: .75rem;
    width: 2.75rem;
    height: 2.75rem;
  }
}

.pe-hero-slider-controls {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--pe-space-0);
  min-height: 3rem;
  padding: var(--pe-space-0);
  border-radius: var(--pe-radius-pill);
  background: var(--pe-black);
  color: var(--pe-white);
}

.pe-hero-slider-controls button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--pe-radius-circle);
  background: transparent;
  color: inherit;
  cursor: pointer;
}

@media (hover: hover) {
  .pe-hero-slider-controls button:hover {
    background: color-mix(in srgb, var(--pe-white) 16%, transparent);
  }
}

.pe-hero-slider-controls button[data-hero-slide-toggle] {
  width: auto;
  min-width: 4rem;
  padding: 0 var(--pe-space-2);
  border-left: 1px solid color-mix(in srgb, var(--pe-white) 30%, transparent);
  border-radius: 0 var(--pe-radius-pill) var(--pe-radius-pill) 0;
  font-size: var(--pe-type-label);
  font-weight: 600;
}

.pe-hero-slider-count {
  min-width: 4.5rem;
  text-align: center;
  font-size: var(--pe-type-label);
  font-variant-numeric: tabular-nums;
}

.pe-icon {
  width: 1.15em;
  height: 1.15em;
  display: inline-block;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
  transition: transform var(--pe-transition-micro);
}

.pe-icon-left {
  transform: rotate(180deg);
}

.pe-project-nav-link[aria-expanded="true"] .pe-icon-chevron-down {
  transform: rotate(180deg);
}

.pe-project-nav-link {
  gap: var(--pe-space-1);
}

.pe-hero-slider-controls .pe-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.pe-cta-link {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
  font-size: var(--pe-type-nav);
  font-weight: 700;
  line-height: 1.25;
}

.pe-story-action {
  font-size: inherit;
}

.pe-contributor-link,
.pe-footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
}

.pe-contributor-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-1) var(--pe-space-3);
  margin-top: var(--pe-space-4);
}

.pe-contributor-link {
  color: inherit;
  font-size: var(--pe-type-nav);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .25rem;
}

.pe-footer {
  display: block;
  padding: var(--pe-section-y) var(--pe-section-x) var(--pe-space-5);
  background: var(--pe-black);
  color: var(--pe-white);
  font-size: var(--pe-type-body);
}

.pe-footer-top {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pe-space-5);
  padding-bottom: var(--pe-space-7);
}

.pe-footer-top > .pe-footer-group:first-child {
  grid-column: span 2;
}

.pe-footer-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pe-space-2);
}

.pe-footer-logos {
  width: 100%;
  display: flex;
  gap: var(--pe-space-5);
}

.pe-footer-logo {
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--pe-space-5);
  border: 1px solid var(--pe-black);
  border-radius: var(--pe-radius-control);
  background: var(--pe-paper);
  transition: background var(--pe-transition-micro);
}

@media (hover: hover) {
  .pe-footer-logo:hover {
    background: var(--pe-grey);
  }
}

.pe-footer-logo img {
  width: 100%;
  height: 2.5rem;
  display: block;
  object-fit: contain;
}

.pe-footer-socials {
  display: flex;
  gap: var(--pe-space-2);
}

.pe-footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-2);
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
}

.pe-footer-socials svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .pe-footer-top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pe-footer-socials {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pe-space-4);
  }
}

.pe-footer-socials a,
.pe-footer-legal a {
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .pe-footer-socials a:hover,
  .pe-footer-legal a:hover {
    text-decoration: underline;
    text-underline-offset: .25rem;
  }
}

.pe-footer-middle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pe-space-5);
  border-top: var(--pe-rule-dashed-inverse);
  padding-top: var(--pe-space-5);
}

.pe-footer-legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-3) var(--pe-space-4);
}

@media (hover: hover) {
  .pe-story-card:hover,
  .pe-catalog-card[href]:hover,
  .pe-start-feature:hover,
  .pe-related-card[href]:hover {
    transform: translateY(-.2rem);
    box-shadow: var(--pe-shadow-medium);
  }

  .pe-related-card[href]:hover img {
    transform: scale(1.025);
  }
}

@media (max-width: 991px) {
  .pe-section-heading {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-4);
  }

  .pe-section-heading .pe-kicker {
    margin-top: 0;
  }

  .pe-catalog-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-footer-top {
    gap: var(--pe-space-5);
  }
}

@media (max-width: 767px) {
  body {
    --pe-section-x: var(--pe-space-4);
    --pe-section-y: 4rem;
    --pe-type-display: 3rem;
    --pe-type-h1: 2.75rem;
    --pe-type-h2: 2rem;
    --pe-type-h3-large: 1.75rem;
    --pe-type-h3: 1.5rem;
    --pe-type-lead: 1.25rem;
    --pe-type-body: 1rem;
  }

  .pe-section-heading {
    margin-bottom: var(--pe-space-5);
  }

  .pe-section-heading-copy h2 {
    max-width: none;
    font-size: var(--pe-type-h2);
  }

  .pe-project-hero-copy {
    gap: var(--pe-space-6);
  }

  .pe-project-overview-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-5);
  }

  .pe-project-profile-row {
    grid-template-columns: minmax(8rem, .42fr) minmax(0, 1fr);
    gap: var(--pe-space-3);
    padding: var(--pe-space-3) 0;
  }

  .pe-story-copy h3 {
    font-size: var(--pe-type-h3-large);
  }

  .pe-catalog-hero h1 {
    max-width: none;
    font-size: var(--pe-type-h1);
    line-height: .98;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .pe-footer {
    padding-bottom: var(--pe-space-4);
  }

  .pe-footer-top {
    gap: var(--pe-space-6) var(--pe-space-3);
    padding-bottom: var(--pe-space-6);
  }

  .pe-footer-logos {
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--pe-space-3);
  }

  .pe-footer-logo {
    width: 100%;
    min-height: 0;
    padding: var(--pe-space-3);
  }

  .pe-footer-middle {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--pe-space-3);
  }

  .pe-footer-legal {
    gap: var(--pe-space-3);
  }
}

/* Plattform-Startseite */

.pe-start-hero {
  padding: var(--pe-space-8) max(var(--pe-space-5), calc((100% - 80rem) / 2)) var(--pe-space-8);
  background: var(--pe-paper);
}

.pe-start-hero-grid {
  min-height: clamp(24rem, 52vh, 34rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 1fr);
  gap: var(--pe-space-7);
  align-items: center;
}

.pe-start-hero-main {
  display: grid;
  gap: var(--pe-space-5);
  justify-items: start;
}

.pe-start-hero-main .pe-kicker {
  margin: 0;
}

.pe-start-hero-title {
  display: grid;
  gap: var(--pe-space-1);
  margin: 0;
  font-size: var(--pe-type-display);
  line-height: 1;
  overflow-wrap: normal;
  hyphens: none;
}

.pe-start-hero-light {
  color: var(--pe-ink);
}

.pe-start-hero-word {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}

.pe-start-hero-dash {
  margin-right: .25em;
}

.pe-start-hero-cursor {
  margin-left: .06em;
  font-weight: 400;
  animation: pe-cursor-blink 1.1s steps(1) infinite;
}

@keyframes pe-cursor-blink {
  0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; }
}

.pe-start-hero-copy .pe-lead {
  max-width: 34rem;
  margin-bottom: 0;
  font-size: var(--pe-type-h3);
}

@media (max-width: 767px) {
  .pe-start-hero-copy .pe-lead {
    font-size: var(--pe-type-lead);
  }
}

button.pe-cta-link {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--pe-type-nav);
  font-weight: 700;
  cursor: pointer;
}

.pe-button {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-2);
  padding: var(--pe-space-3) var(--pe-space-4);
  border: 0;
  border-radius: var(--pe-radius-card);
  background: var(--pe-yellow);
  color: var(--pe-ink);
  font: inherit;
  font-size: var(--pe-type-nav);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--pe-transition-micro), color var(--pe-transition-micro);
}

.pe-button:focus-visible {
  background: var(--pe-black);
  color: var(--pe-black-text);
}

@media (hover: hover) {
  .pe-button:hover {
    background: var(--pe-black);
    color: var(--pe-black-text);
  }
}

.pe-button .pe-icon {
  width: 1.1rem;
  height: 1.1rem;
}

.pe-start-features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pe-space-5);
}

.pe-start-practice {
  background: var(--pe-blue);
}

.pe-start-feature {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  border: 0;
  border-radius: var(--pe-radius-card);
  overflow: hidden;
  background: var(--pe-white);
  color: var(--pe-ink);
  text-align: left;
  text-decoration: none;
  transition: transform var(--pe-transition-micro), box-shadow var(--pe-transition-micro);
}

.pe-start-feature[href] {
  font: inherit;
  cursor: pointer;
}

.pe-start-feature-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.pe-start-feature img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--pe-transition-layout);
}

@media (hover: hover) {
  .pe-start-feature[href]:hover img {
    transform: scale(1.025);
  }
}

.pe-start-feature-copy {
  min-height: 21rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pe-space-5);
  padding: var(--pe-space-4);
}

.pe-start-feature-body {
  display: grid;
  gap: var(--pe-space-3);
  justify-items: start;
}

.pe-start-feature-copy .pe-kicker {
  margin-bottom: 0;
}

.pe-start-feature-copy h3 {
  max-width: 16ch;
  margin-bottom: 0;
  font-size: var(--pe-type-h3-large);
  line-height: var(--pe-leading-h3-large);
  overflow-wrap: normal;
  hyphens: none;
}

.pe-start-feature-body > p {
  max-width: 44ch;
  margin: 0;
  line-height: 1.5;
}

.pe-start-feature-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--pe-space-3);
}

.pe-start-feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-1);
}

.pe-start-feature-tag {
  padding: var(--pe-space-1) var(--pe-space-2);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-pill);
  background: var(--pe-paper);
  font-size: var(--pe-type-nav);
  line-height: 1;
}

.pe-start-feature-cta {
  flex: 0 0 auto;
}

.pe-start-more {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--pe-space-3);
  margin-top: var(--pe-space-5);
  padding-top: var(--pe-space-4);
  border-top: var(--pe-rule-dashed);
}

.pe-start-practice .pe-start-more {
  border-top: 0;
  padding-top: 0;
}

.pe-start-more .pe-cta-link {
  color: inherit;
}

.pe-supporter-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--pe-space-1);
  margin-bottom: var(--pe-space-4);
}

.pe-supporter-controls button {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--pe-white);
  border-radius: var(--pe-radius-circle);
  background: transparent;
  color: var(--pe-white);
  cursor: pointer;
  transition: background var(--pe-transition-micro), color var(--pe-transition-micro);
}

.pe-supporter-controls button:focus-visible {
  background: var(--pe-white);
  color: var(--pe-black);
}

@media (hover: hover) {
  .pe-supporter-controls button:hover {
    background: var(--pe-white);
    color: var(--pe-black);
  }
}

.pe-supporter-controls .pe-icon {
  width: 1.25rem;
  height: 1.25rem;
}

.pe-start-supporters {
  padding-left: 0;
  padding-right: 0;
}

.pe-start-supporters .pe-section-heading,
.pe-supporter-controls {
  padding-left: var(--pe-section-x);
  padding-right: var(--pe-section-x);
}

.pe-supporter-track {
  position: relative;
  overflow-anchor: none;
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: auto;
  gap: var(--pe-space-4);
  padding: 0 var(--pe-section-x) var(--pe-space-1);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 var(--pe-section-x);
  scrollbar-width: none;
  cursor: grab;
}

.pe-supporter-track.is-dragging {
  cursor: grabbing;
  scroll-snap-type: none;
  user-select: none;
}

.pe-supporter-track::-webkit-scrollbar {
  display: none;
}

.pe-supporter-card {
  width: clamp(26rem, 32vw, 32rem);
  min-width: 0;
  min-height: min-content;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--pe-space-5);
  padding: var(--pe-space-5);
  border-radius: var(--pe-radius-card);
  background: var(--pe-white);
  color: var(--pe-ink);
  scroll-snap-align: start;
}

.pe-supporter-card[data-tone="blue"] {
  background: var(--pe-blue);
}

.pe-supporter-card[data-tone="yellow"] {
  background: var(--pe-yellow);
}

.pe-supporter-video {
  flex: 0 0 auto;
  align-self: stretch;
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--pe-radius-card);
  background: var(--pe-black);
  color: var(--pe-white);
}

.pe-supporter-video::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 48%, color-mix(in srgb, var(--pe-ink) 30%, transparent));
  pointer-events: none;
}

.pe-supporter-video img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform var(--pe-transition-micro);
}

.pe-supporter-video-link:focus-visible img {
  transform: scale(1.025);
}

@media (hover: hover) {
  .pe-supporter-video:hover img {
    transform: scale(1.025);
  }
}

.pe-supporter-video-link {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
}

.pe-supporter-video-link:focus-visible {
  outline: 3px solid var(--pe-yellow);
  outline-offset: -3px;
}

.pe-supporter-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 3.75rem;
  height: 3.75rem;
  display: grid;
  place-items: center;
  border-radius: var(--pe-radius-circle);
  background: var(--pe-blue);
  color: var(--pe-ink);
  transform: translate(-50%, -50%);
  box-shadow: var(--pe-shadow-medium);
}

.pe-supporter-play .pe-icon {
  width: 1.4rem;
  height: 1.4rem;
  margin-left: var(--pe-space-0);
}

.pe-supporter-copy {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--pe-space-0);
  margin-top: auto;
  padding: 0;
}

.pe-supporter-card.has-video .pe-supporter-name {
  margin-top: 0;
}

.pe-supporter-card.has-video {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.pe-supporter-card.has-video .pe-supporter-video {
  border-radius: 0;
}

.pe-supporter-card.has-video .pe-supporter-copy {
  padding: var(--pe-space-5);
}

.pe-supporter-quote {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: var(--pe-type-lead);
  line-height: 1.35;
}

.pe-supporter-name {
  margin: 0;
  font-size: var(--pe-type-body);
  font-weight: 700;
  line-height: 1.3;
}

.pe-supporter-role {
  margin: 0;
  color: var(--pe-ink);
  font-size: var(--pe-type-body);
  line-height: 1.4;
}

.pe-start-mission {
  background: var(--pe-paper);
}

.pe-content-columns,
.pe-start-section-content,
.pe-start-topic {
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  align-items: start;
}

.pe-start-section-content > div {
  grid-column: 2;
  max-width: 46rem;
}

.pe-start-mission-copy {
  display: grid;
  gap: var(--pe-space-4);
}

.pe-start-mission-copy p,
.pe-start-newsletter-action p {
  margin: 0;
  color: var(--pe-ink);
  line-height: var(--pe-leading-body);
}

.pe-start-mission-copy .pe-button {
  justify-self: start;
  margin-top: var(--pe-space-1);
}

.pe-start-knowledge {
  background: var(--pe-mint);
}

.pe-start-topics {
  display: grid;
  gap: var(--pe-space-5);
}

.pe-start-topic {
  padding-top: var(--pe-space-5);
  border-top: var(--pe-rule-dashed);
}

.pe-start-topic h3 {
  margin: 0;
  font-size: var(--pe-type-category);
  line-height: 1.3;
}

.pe-start-topic p {
  max-width: 46rem;
  margin: 0;
  line-height: var(--pe-leading-body);
}

.pe-start-newsletter {
  background: var(--pe-paper);
}

.pe-start-newsletter > .pe-section-heading,
.pe-community-contact > .pe-section-heading {
  margin-bottom: var(--pe-space-5);
}

.pe-start-newsletter-action {
  display: grid;
  justify-items: start;
  gap: var(--pe-space-5);
}

/* Globale Inhaltsseiten: ruhiger beiger Einstieg, Farbe erst im Inhalt. */

.pe-global-page-hero {
  padding: var(--pe-space-8) var(--pe-section-x);
  background: var(--pe-paper);
}

.pe-global-page-hero[data-tone="paper"] {
  background: var(--pe-paper);
}

.pe-global-page-hero[data-tone="yellow"] {
  background: var(--pe-yellow);
}

.pe-global-page-hero[data-tone="mint"] {
  background: var(--pe-mint);
}

.pe-global-page-hero[data-tone="blue"] {
  background: var(--pe-blue);
}

.pe-global-page-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr);
  gap: var(--pe-space-7);
  align-items: end;
}

.pe-global-page-hero h1 {
  max-width: none;
  text-wrap: balance;
  margin: var(--pe-space-2) 0 0;
  font-size: var(--pe-type-display);
  line-height: var(--pe-leading-display);
  overflow-wrap: normal;
  hyphens: none;
}

.pe-global-page-hero-copy {
  max-width: 38rem;
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: 1.45;
}

.pe-global-intro-copy {
  display: grid;
  gap: var(--pe-space-4);
  justify-items: start;
}

.pe-global-intro-copy p {
  max-width: 42rem;
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: 1.5;
}

.pe-community-hero {
  background: var(--pe-paper);
}

.pe-community-story {
  background: var(--pe-blue);
}

.pe-community-story .pe-section-heading-copy h2 {
  max-width: none;
  text-wrap: balance;
}

.pe-community-story-grid {
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  align-items: start;
}

.pe-community-story-copy {
  grid-column: 2;
  grid-row: 1;
  max-width: 46rem;
  display: grid;
  justify-items: start;
  gap: var(--pe-space-5);
}

.pe-community-story-copy > p {
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-community-video {
  align-self: center;
  justify-self: center;
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--pe-radius-card);
  background: var(--pe-black);
}

.pe-community-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

.pe-community-events {
  background: var(--pe-black);
  color: var(--pe-black-text);
}

.pe-event-more[hidden] {
  display: none;
}

.pe-event-card:focus-visible {
  outline-color: var(--pe-yellow);
}

.pe-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--pe-space-4);
  align-items: stretch;
}

.pe-event-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: var(--pe-space-5);
  padding: var(--pe-space-5);
  border-radius: var(--pe-radius-card);
  background: var(--pe-white);
  color: var(--pe-ink);
}

.pe-event-card[data-tone="blue"] {
  background: var(--pe-blue);
}

.pe-event-card[data-tone="yellow"] {
  background: var(--pe-yellow);
}

.pe-event-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
  border-radius: var(--pe-radius-card);
}

.pe-event-card-copy {
  max-width: 46rem;
  display: grid;
  gap: var(--pe-space-3);
}

.pe-event-card h3 {
  margin: 0;
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
}

.pe-event-card p {
  margin: 0;
  line-height: var(--pe-leading-body);
}

.pe-event-date {
  color: inherit;
  font-size: var(--pe-type-small);
  font-weight: 400;
}

.pe-event-card.pe-card-edge-image {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.pe-event-card.pe-card-edge-image > img {
  border-radius: 0;
  flex-shrink: 0;
}

.pe-card-edge-image > .pe-event-card-copy {
  padding: var(--pe-space-5);
}

.pe-community-contact {
  background: var(--pe-paper);
}

.pe-community-contact .pe-global-intro-copy {
  gap: var(--pe-space-4);
}

.pe-community-contact .pe-global-intro-copy p {
  font-size: var(--pe-type-body);
}

.pe-community-contact .pe-button {
  margin-top: var(--pe-space-1);
}

.pe-knowledge-hero {
  padding-bottom: var(--pe-space-7);
}

.pe-community-hero .pe-global-page-hero-grid,
.pe-knowledge-hero .pe-global-page-hero-grid {
  align-items: stretch;
}

.pe-community-hero-copy,
.pe-knowledge-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pe-community-hero-copy .pe-global-page-hero-copy,
.pe-knowledge-hero-copy .pe-global-page-hero-copy {
  margin-top: var(--pe-space-5);
}

.pe-knowledge-hero-visual {
  min-width: 0;
  margin: 0;
}

.pe-knowledge-hero-visual img {
  width: 100%;
  height: 100%;
  min-height: 34rem;
  display: block;
  object-fit: cover;
  border-radius: var(--pe-radius-card);
}

#wissen-bibliothek,
#wissen-podcast,
#wissen-initiativen,
#wissen-wiki,
#wissen-learning-report {
  scroll-margin-top: var(--pe-space-7);
}

.pe-knowledge-library {
  background: var(--pe-blue);
}

.pe-knowledge-filterbar {
  display: flex;
  justify-content: space-between;
  gap: var(--pe-space-4);
  align-items: center;
  margin-bottom: var(--pe-space-5);
}

.pe-knowledge-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pe-space-2);
}

.pe-knowledge-filter {
  display: inline-flex;
  gap: var(--pe-space-1);
  align-items: center;
  padding: var(--pe-space-2) var(--pe-space-3);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--pe-type-nav);
  cursor: pointer;
}

.pe-knowledge-filter[aria-pressed="true"] {
  background: var(--pe-black);
  color: var(--pe-black-text);
  font-weight: 700;
}

.pe-knowledge-filter:focus-visible {
  outline: 3px solid var(--pe-ink);
  outline-offset: 3px;
}

.pe-knowledge-filter-count {
  display: inline-grid;
  min-width: 1.45rem;
  height: 1.45rem;
  place-items: center;
  padding-inline: var(--pe-space-0);
  border-radius: var(--pe-radius-pill);
  background: color-mix(in srgb, currentColor 12%, transparent);
  font-size: .75rem;
  line-height: 1;
}

.pe-knowledge-filter[aria-pressed="true"] .pe-knowledge-filter-count {
  background: color-mix(in srgb, var(--pe-white) 18%, transparent);
}

.pe-knowledge-count {
  flex: 0 0 auto;
  margin: 0;
  color: var(--pe-text-secondary);
  font-size: var(--pe-type-small);
}

.pe-knowledge-grid {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pe-knowledge-card {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  padding: var(--pe-space-5) 0;
  border-bottom: var(--pe-rule-dashed);
  color: var(--pe-ink);
}

.pe-knowledge-card:first-child {
  border-top: var(--pe-rule-dashed);
}

.pe-knowledge-card[hidden] {
  display: none;
}

.pe-knowledge-card-meta {
  display: flex;
  flex-direction: column;
  gap: var(--pe-space-1);
  font-size: var(--pe-type-body);
}

.pe-knowledge-card h3 {
  margin: 0;
  font-size: var(--pe-type-card-small);
  line-height: var(--pe-leading-card-small);
}

.pe-knowledge-card h3 a {
  display: inline-block;
  min-height: 2.75rem;
  padding-block: var(--pe-space-1);
  color: inherit;
  text-decoration: none;
}

@media (hover: hover) {
  .pe-knowledge-card h3 a:hover {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}

.pe-knowledge-card h3 a:focus-visible {
  outline: 3px solid var(--pe-ink);
  outline-offset: 4px;
}

.pe-knowledge-card h3 svg {
  display: inline-block;
  vertical-align: middle;
  margin-left: var(--pe-space-1);
}

.pe-knowledge-card-source {
  margin: var(--pe-space-2) 0 0;
  line-height: 1.5;
}

.pe-knowledge-card-note {
  margin: var(--pe-space-1) 0 0;
  font-size: var(--pe-type-small);
}

.pe-knowledge-empty {
  margin-top: var(--pe-space-3);
  padding: var(--pe-space-4);
  border: var(--pe-rule-dashed);
  border-radius: var(--pe-radius-card);
}

.pe-knowledge-empty[hidden] {
  display: none;
}

.pe-knowledge-empty p {
  margin: 0;
  line-height: 1.5;
}

.pe-knowledge-podcast {
  background: var(--pe-mint);
}

.pe-podcast-grid {
  display: grid;
  gap: var(--pe-space-7);
}

.pe-podcast-intro {
  margin-bottom: 0;
}

.pe-podcast-intro .pe-section-heading-copy p {
  max-width: 48rem;
  font-size: var(--pe-type-body);
  line-height: 1.55;
}

.pe-podcast-player {
  display: grid;
  gap: var(--pe-space-3);
  padding: var(--pe-space-4);
  border-radius: var(--pe-radius-card);
  background: var(--pe-black);
}

.pe-podcast-embed {
  position: relative;
  min-height: 352px;
}

.pe-podcast-embed:not(.is-ready) iframe {
  visibility: hidden;
}

.pe-podcast-loading {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--pe-space-4);
  padding: var(--pe-space-4);
  color: var(--pe-black-text);
  text-align: center;
}

.pe-podcast-loading[hidden] {
  display: none;
}

.pe-podcast-loading p {
  margin: 0;
}

.pe-podcast-player iframe {
  width: 100%;
  min-height: 22rem;
  display: block;
  border: 0;
  border-radius: var(--pe-radius-control);
}

.pe-podcast-player a {
  justify-self: end;
  display: inline-flex;
  gap: var(--pe-space-1);
  align-items: center;
  color: var(--pe-black-text);
  font-weight: 700;
  text-decoration: none;
}

.pe-podcast-player a:focus-visible {
  text-decoration: underline;
}

@media (hover: hover) {
  .pe-podcast-player a:hover {
    text-decoration: underline;
  }
}

.pe-knowledge-initiatives {
  background: var(--pe-blue);
}

.pe-knowledge-initiative-body {
  min-width: 0;
  align-items: end;
}

.pe-knowledge-map-stage {
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pe-ink);
}

.pe-knowledge-map-canvas {
  position: relative;
  width: min(100%, 31rem);
  aspect-ratio: 4 / 5;
  align-self: center;
  margin-top: 0;
}

.pe-knowledge-map-canvas > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.pe-knowledge-map-markers {
  position: absolute;
  inset: 0;
  /* Zwischen den Markern gehen Klicks an die Länderflächen darunter */
  pointer-events: none;
}

.pe-knowledge-map-markers > * {
  pointer-events: auto;
}

/* Ganze Länderfläche wählt die Initiative (19.10.2026): unsichtbar über der Karte, unter den
   Markern; dieselbe viewBox wie die Kartendatei, daher deckungsgleich mit object-fit: contain */
.pe-knowledge-map-regions {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pe-knowledge-map-regions path {
  fill: transparent;
  cursor: pointer;
  transition: fill var(--pe-transition-micro);
}

@media (hover: hover) {
  .pe-knowledge-map-regions path:hover {
    fill: color-mix(in srgb, var(--pe-yellow) 40%, transparent);
  }
}

.pe-knowledge-map-marker {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pe-ink);
  font: inherit;
  cursor: pointer;
  justify-content: center;
  /* Der Punkt sitzt genau auf der Position im Land (left/top aus KnowledgePage::REGIONS) */
  transform: translate(-50%, -50%);
}

.pe-knowledge-map-marker[data-marker-scope="national"] {
  left: .35rem;
  top: auto;
  bottom: .35rem;
  transform: none;
}

/* Beschriftung neben dem Punkt, ohne die Position zu verschieben; sichtbar nur am aktiven
   Marker und beim Überfahren oder Fokussieren (BSY-Feedback 15.10.2026, Variante B) */
.pe-knowledge-map-marker-label {
  position: absolute;
  top: 50%;
  left: calc(100% + var(--pe-space-1));
  transform: translateY(-50%);
}

.pe-knowledge-map-marker[data-label-side="left"] .pe-knowledge-map-marker-label {
  left: auto;
  right: calc(100% + var(--pe-space-1));
}

.pe-knowledge-map-marker:not([aria-checked="true"]):not(:hover):not(:focus-visible) .pe-knowledge-map-marker-label {
  display: none;
}

.pe-knowledge-map-marker[aria-checked="true"],
.pe-knowledge-map-marker:focus-visible {
  z-index: 2;
}

@media (hover: hover) {
  .pe-knowledge-map-marker:hover {
    z-index: 2;
  }
}

.pe-knowledge-map-marker-dot {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-circle);
  background: var(--pe-white);
  font-size: var(--pe-type-small);
  font-weight: 700;
  line-height: 1;
  box-shadow: var(--pe-ring-marker);
  transition: transform var(--pe-transition-micro), background-color var(--pe-transition-micro);
}

.pe-knowledge-map-marker-label {
  padding: var(--pe-space-1) var(--pe-space-2);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-pill);
  background: var(--pe-white);
  font-size: var(--pe-type-small);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--pe-transition-micro), color var(--pe-transition-micro);
}

@media (hover: hover) {
  .pe-knowledge-map-marker:hover .pe-knowledge-map-marker-dot {
    transform: scale(1.08);
  }
}

.pe-knowledge-map-marker[data-marker-scope="national"] .pe-knowledge-map-marker-dot {
  border-radius: var(--pe-radius-control);
  box-shadow: none;
}

.pe-knowledge-map-marker[aria-checked="true"] .pe-knowledge-map-marker-dot {
  background: var(--pe-yellow);
}

.pe-knowledge-map-marker[aria-checked="true"] .pe-knowledge-map-marker-label {
  background: var(--pe-black);
  color: var(--pe-black-text);
}

.pe-knowledge-map-marker:focus-visible {
  outline: 3px solid var(--pe-ink);
  outline-offset: 4px;
  border-radius: var(--pe-radius-pill);
}

.pe-knowledge-initiative-panel {
  min-width: 0;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  gap: var(--pe-space-4);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pe-knowledge-initiative-panel .pe-feature-title {
  max-width: none;
  text-wrap: wrap;
  margin: 0;
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
}

.pe-knowledge-initiative-panel > [data-knowledge-initiative-text] {
  max-width: 46rem;
  margin: 0;
  padding-top: var(--pe-space-4);
  border-top: var(--pe-rule-dashed);
  font-size: var(--pe-type-body);
  line-height: 1.45;
}

.pe-knowledge-initiative-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pe-space-3);
  padding-top: var(--pe-space-0);
}

.pe-knowledge-initiative-pagination button {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
  padding: var(--pe-space-2) var(--pe-space-3);
  border: 1px solid currentColor;
  border-radius: var(--pe-radius-pill);
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.pe-knowledge-initiative-pagination button:focus-visible {
  background: var(--pe-black);
  color: var(--pe-black-text);
}

@media (hover: hover) {
  .pe-knowledge-initiative-pagination button:hover {
    background: var(--pe-black);
    color: var(--pe-black-text);
  }
}

.pe-knowledge-initiative-pagination button:focus-visible {
  outline: 3px solid var(--pe-ink);
  outline-offset: 3px;
}

.pe-knowledge-initiative-pagination button:first-child svg {
  transform: rotate(180deg);
}

.pe-knowledge-initiative-pagination p {
  margin: 0;
  font-size: var(--pe-type-small);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.pe-knowledge-wiki {
  background: var(--pe-paper);
}

.pe-knowledge-wiki > .pe-section-heading {
  margin-bottom: 0;
}

.pe-wiki-groups {
  min-width: 0;
  display: grid;
  gap: var(--pe-space-7);
}

.pe-wiki-group {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--pe-space-5);
}

.pe-wiki-group-intro {
  display: grid;
  align-content: start;
  gap: var(--pe-space-4);
}

.pe-wiki-group-intro h2 {
  margin: 0;
}

.pe-wiki-group-intro > p:last-child {
  max-width: 46rem;
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-wiki-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  align-content: start;
  align-items: start;
  border-top: var(--pe-rule-dashed);
}

.pe-wiki-item {
  border-bottom: var(--pe-rule-dashed);
}

.pe-wiki-item summary {
  display: flex;
  justify-content: space-between;
  gap: var(--pe-space-4);
  align-items: center;
  padding: var(--pe-space-4) 0;
  cursor: pointer;
  list-style: none;
}

.pe-wiki-item summary::-webkit-details-marker {
  display: none;
}

.pe-wiki-item summary h3 {
  margin: 0;
  font-size: var(--pe-type-card-small);
  line-height: var(--pe-leading-card-small);
}

.pe-wiki-item summary svg {
  flex: 0 0 auto;
  transition: transform var(--pe-transition-micro);
}

.pe-wiki-item summary:focus-visible {
  outline: 3px solid var(--pe-ink);
  outline-offset: -4px;
  border-radius: var(--pe-radius-control);
}

.pe-wiki-item[open] summary svg {
  transform: rotate(180deg);
}

.pe-wiki-answer {
  padding: 0 0 var(--pe-space-4);
}

.pe-wiki-answer p {
  max-width: 48rem;
  margin: 0;
  line-height: 1.55;
}

.pe-newsletter-form input[aria-invalid="true"] {
  border-width: 2px;
}

.pe-newsletter-form input[type="checkbox"][aria-invalid="true"] {
  outline: 2px solid var(--pe-ink);
  outline-offset: 3px;
}

.pe-field-error {
  margin: 0;
  color: var(--pe-ink);
  font-size: var(--pe-type-small);
  font-weight: 700;
  line-height: var(--pe-leading-small);
}

.pe-newsletter-consent .pe-field-error {
  grid-column: 1 / -1;
}

form[aria-busy="true"] {
  cursor: progress;
}

form[aria-busy="true"] input {
  opacity: .62;
}

.pe-newsletter-hero {
  padding-bottom: var(--pe-space-7);
}

.pe-newsletter-hero .pe-global-page-hero-grid {
  align-items: stretch;
}

.pe-newsletter-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pe-newsletter-hero-copy .pe-global-page-hero-copy {
  margin-top: var(--pe-space-5);
}

.pe-newsletter-visual {
  min-width: 0;
  margin: 0;
  align-self: stretch;
}

.pe-newsletter-visual img {
  width: 100%;
  height: 100%;
  min-height: 28rem;
  display: block;
  object-fit: cover;
  border-radius: var(--pe-radius-card);
}

.pe-newsletter-form-section {
  background: var(--pe-paper);
}

.pe-newsletter-form-grid {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  align-items: start;
}

.pe-newsletter-form-grid h2 {
  max-width: 12ch;
  margin: 0;
  font-size: var(--pe-type-h2);
  line-height: .98;
}

.pe-newsletter-form {
  display: grid;
  gap: var(--pe-space-4);
}

.pe-newsletter-form > .pe-button {
  justify-self: start;
}

.pe-newsletter-name-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pe-space-3);
}

.pe-newsletter-form label:not(.pe-newsletter-consent) {
  display: grid;
  gap: var(--pe-space-1);
  font-weight: 700;
}

.pe-newsletter-form input[type="text"],
.pe-newsletter-form input[type="email"] {
  width: 100%;
  min-height: 3rem;
  padding: var(--pe-space-2) var(--pe-space-3);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-control);
  background: var(--pe-paper);
  color: inherit;
  font: inherit;
}

.pe-newsletter-form input::placeholder {
  color: var(--pe-ink);
  opacity: 1;
}

.pe-newsletter-consent {
  min-height: 2.75rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pe-space-2);
  align-items: center;
  font-size: var(--pe-type-small);
  line-height: 1.45;
}

.pe-newsletter-consent input {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0;
  accent-color: var(--pe-black);
}

.pe-newsletter-consent a {
  color: inherit;
}

.pe-newsletter-form-status {
  margin: 0;
  font-weight: 700;
  line-height: 1.4;
}

.pe-newsletter-form-status:empty {
  display: none;
}

/* Erfolgskarte: ersetzt das Formular nach dem Absenden (»Fast geschafft«) und nach der Bestätigung in
   Mailchimp (?bestaetigt=1, »Geschafft«). Weiße Karte mit Rahmen wie die übrigen Karten, ohne Schatten. */
.pe-newsletter-form-area {
  min-width: 0;
}

.pe-newsletter-success {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--pe-space-4);
  align-items: start;
  padding: var(--pe-space-5);
  border: 1px solid var(--pe-ink);
  border-radius: var(--pe-radius-card);
  background: var(--pe-surface-card);
  color: var(--pe-ink);
}

.pe-newsletter-success[hidden] {
  display: none;
}

.pe-newsletter-success:focus {
  outline: none;
}

.pe-newsletter-success:focus-visible {
  outline: 2px solid var(--pe-ink);
  outline-offset: 4px;
}

.pe-newsletter-success-icon {
  display: grid;
  place-items: center;
  inline-size: 3rem;
  block-size: 3rem;
  border-radius: var(--pe-radius-circle);
  background: var(--pe-yellow);
}

.pe-newsletter-success-icon .pe-icon {
  inline-size: 1.5rem;
  block-size: 1.5rem;
}

.pe-newsletter-success-copy {
  display: grid;
  gap: var(--pe-space-2);
  justify-items: start;
}

.pe-newsletter-success-copy h3 {
  margin: 0;
  font-size: var(--pe-type-h3);
  line-height: 1.15;
}

.pe-newsletter-success-copy p {
  margin: 0;
  line-height: 1.45;
}

.pe-newsletter-success-copy strong {
  overflow-wrap: anywhere;
}

.pe-newsletter-success-hint {
  font-size: var(--pe-type-small);
}

.pe-newsletter-success .pe-cta-link {
  margin-top: var(--pe-space-1);
  color: inherit;
}

.pe-newsletter-again {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}

@media (max-width: 767px) {
  .pe-newsletter-success {
    grid-template-columns: minmax(0, 1fr);
    padding: var(--pe-space-4);
  }
}

.pe-newsletter-expectation-section {
  background: var(--pe-blue);
}

.pe-newsletter-expectation-grid {
  display: grid;
  grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  align-items: start;
}

.pe-newsletter-expectation-grid > h2 {
  margin: 0;
  font-size: var(--pe-type-h2);
  line-height: var(--pe-leading-h2);
}

@media (max-width: 991px) {
  .pe-start-hero {
    padding: var(--pe-space-7) max(var(--pe-space-4), calc((100% - 80rem) / 2));
  }

  .pe-start-hero-grid {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-5);
  }

  .pe-start-features {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-start-feature-copy {
    padding: var(--pe-space-5);
  }

  .pe-start-feature-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .pe-supporter-card {
    width: min(84vw, 24rem);
    padding: var(--pe-space-4);
  }

  .pe-supporter-card.has-video .pe-supporter-copy {
    padding: var(--pe-space-4);
  }

  .pe-content-columns,
  .pe-start-section-content,
  .pe-start-topic {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-4);
  }

  .pe-start-section-content > div {
    grid-column: auto;
  }

  .pe-start-topics {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-project-hero,
  .pe-global-page-hero {
    padding-block: var(--pe-space-7);
  }

  .pe-project-hero,
  .pe-project-overview-layout,
  .pe-global-page-hero-grid,
  .pe-community-story-grid,
  .pe-podcast-intro,
  .pe-wiki-group,
  .pe-newsletter-form-grid,
  .pe-newsletter-expectation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-global-page-hero h1 {
    max-width: none;
    font-size: var(--pe-type-h1);
  }

  .pe-knowledge-hero {
    padding-bottom: var(--pe-space-7);
  }

  .pe-knowledge-hero-visual img {
    min-height: 24rem;
    border-radius: var(--pe-radius-card);
  }

  .pe-knowledge-filterbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .pe-knowledge-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-3);
  }

  .pe-knowledge-card-meta {
    flex-direction: row;
    justify-content: space-between;
  }

  .pe-knowledge-grid > .pe-knowledge-card {
    min-height: 0;
    grid-column: auto;
  }

  .pe-community-story-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-5);
  }

  .pe-event-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-event-card {
    padding: var(--pe-space-4);
    gap: var(--pe-space-4);
  }

  .pe-card-edge-image > .pe-event-card-copy {
    padding: var(--pe-space-4);
  }

  .pe-community-story-copy {
    grid-column: auto;
    grid-row: auto;
  }

  .pe-community-video {
    justify-self: start;
  }

  .pe-knowledge-initiative-body {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  .pe-knowledge-map-canvas {
    width: min(100%, 28rem);
  }

  .pe-knowledge-map-marker {
    gap: var(--pe-space-0);
  }

  .pe-knowledge-map-marker-dot {
    width: 1.85rem;
    height: 1.85rem;
  }

  .pe-knowledge-map-marker-label {
    padding: var(--pe-space-1) var(--pe-space-1);
    font-size: .75rem;
  }

  .pe-knowledge-initiative-panel {
    min-height: 0;
  }

  .pe-knowledge-initiative-pagination button {
    padding: var(--pe-space-2) var(--pe-space-2);
  }

  .pe-wiki-groups {
    gap: var(--pe-space-6);
  }

  .pe-wiki-group {
    gap: var(--pe-space-5);
  }

  .pe-wiki-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-newsletter-name-fields,
  .pe-newsletter-expectation-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-newsletter-visual img {
    min-height: 20rem;
  }
}

@media (max-width: 767px) {
  .pe-knowledge-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pe-knowledge-card,
  .pe-knowledge-card[data-tone="black"] {
    min-height: 0;
  }
}

/* Highlight detail: one continuous reading surface, shared by both projects. */

.pe-project-navigation-region {
  background: var(--pe-paper);
}

.pe-project-nav {
  position: relative;
  top: auto;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.pe-project-nav-inner::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  border-top: var(--pe-rule-dashed);
  pointer-events: none;
}

.pe-project-nav-links > .pe-project-nav-link:last-child {
  padding-right: 0;
}

.pe-highlight-stage {
  padding: var(--pe-space-5) 0 var(--pe-space-8);
  background: var(--pe-paper);
}

.pe-highlight-sheet {
  --pe-section-x: max(var(--pe-space-5), calc((100% - var(--pe-content-max)) / 2));
  width: 100%;
  max-width: none;
  margin-inline: auto;
  background: var(--pe-paper);
  border-radius: 0;
  overflow: clip;
}

.pe-highlight-navigation {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--pe-space-4);
  margin-inline: var(--pe-section-x);
  padding-block: var(--pe-space-3);
  background: transparent;
}

.pe-highlight-navigation--bottom {
  margin-inline: var(--pe-space-5);
  padding-top: 0;
}

@media (max-width: 991px) {
  .pe-highlight-navigation--bottom {
    margin-inline: var(--pe-space-3);
  }
}

.pe-highlight-position {
  margin: 0;
  font-size: var(--pe-type-small);
  font-weight: 700;
  white-space: nowrap;
}

.pe-highlight-navigation-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--pe-space-4);
}

.pe-highlight-navigation-links .pe-cta-link {
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  white-space: nowrap;
  color: var(--pe-ink);
  text-decoration: none;
}

@media (hover: hover) {
  .pe-highlight-navigation-links a:hover {
    opacity: .68;
  }
}

.pe-highlight-navigation-links [aria-disabled="true"] {
  color: var(--pe-muted);
  font-weight: 400;
}

.pe-highlight-intro {
  --pe-section-x: var(--pe-space-6);
  width: calc(100% - 2 * var(--pe-space-5));
  max-width: calc(var(--pe-content-max) + 2 * var(--pe-space-6));
  margin: 0 auto var(--pe-space-8);
  padding-top: var(--pe-space-3);
  overflow: clip;
  border-radius: var(--pe-radius-card);
  background: var(--pe-mint);
}

.pe-highlight-hero {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: var(--pe-space-7);
  align-items: start;
  padding: var(--pe-space-5) var(--pe-section-x) 0;
}

.pe-highlight-hero-media {
  position: relative;
  min-width: 0;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--pe-radius-card);
  background: var(--pe-grey);
}

.pe-highlight-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Kopfbild öffnet die Bildansicht (G3, 19.10.2026); Nummer und Nachweis liegen darüber */
.pe-highlight-hero-open {
  position: absolute;
  inset: 0;
  height: 100%;
}

.pe-highlight-hero-open:focus-visible {
  outline-color: var(--pe-focus);
}

.pe-highlight-hero-copy {
  min-width: 0;
  display: grid;
  gap: var(--pe-space-5);
}

.pe-highlight-hero-copy h1 {
  margin: 0;
  font-size: var(--pe-type-h1);
  line-height: var(--pe-leading-h1);
  letter-spacing: -.04em;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.pe-highlight-hero-copy p {
  max-width: 42rem;
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

.pe-highlight-hero-copy .pe-highlight-tags {
  margin: 0;
}

.pe-highlight-intro .pe-decision-story {
  background: transparent;
}

@media (max-width: 991px) {
  .pe-highlight-intro {
    --pe-section-x: var(--pe-space-4);
    width: calc(100% - 2 * var(--pe-space-2));
    margin-bottom: var(--pe-space-7);
  }

  .pe-highlight-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-5);
  }
}

.pe-highlight-sheet .pe-deep-dive-section {
  padding-inline: 0;
  border-radius: 0;
}

@media (max-width: 767px) {
  .pe-highlight-stage {
    padding: var(--pe-space-4) 0 var(--pe-space-6);
  }

  .pe-highlight-navigation {
    position: relative;
    top: auto;
    flex-wrap: wrap;
    gap: var(--pe-space-2);
  }

  .pe-highlight-navigation-links {
    gap: var(--pe-space-2);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}

/* Editorial deep-dive pilot: shared chapter grid, compact contextual resources. */

/* Persistent project identity shared by overview, highlights and downloads. */

.pe-project-return {
  padding: 0 max(var(--pe-space-5), calc((100% - var(--pe-content-max)) / 2));
  background: var(--pe-paper);
}

.pe-project-return a {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-2);
  min-height: 44px;
  color: var(--pe-ink);
  text-decoration: none;
  font-size: var(--pe-type-small);
}

@media (hover: hover) {
  .pe-project-return a:hover {
    text-decoration: underline;
  }
}

.pe-project-navigation-region {
  position: sticky;
  top: var(--pe-version-bar-height);
  z-index: 25;
  background: var(--pe-paper);
  border-bottom: var(--pe-rule-dashed);
}

.pe-project-nav-inner {
  min-height: 88px;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--pe-space-4);
}

.pe-project-nav-inner::before {
  display: none;
}

.pe-project-identity {
  display: flex;
  align-items: center;
  gap: var(--pe-space-3);
  min-width: 0;
  color: var(--pe-ink);
  text-decoration: none;
}

.pe-project-identity img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
}

.pe-project-identity > span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.pe-project-identity strong {
  font-size: var(--pe-type-lead);
  line-height: 1.2;
  font-weight: 600;
}

.pe-project-identity span span {
  font-size: var(--pe-type-small);
}

@media (max-width: 767px) {
  /* Projektbild und Titel scrollen hinaus, nur die Linkzeile bleibt stehen.
     Den Versatz misst plattform-e.js; ohne Script bleibt die ganze Leiste sticky. */
  .pe-project-navigation-region {
    top: calc(var(--pe-version-bar-height) - var(--pe-project-nav-collapse, 0px));
  }

  .pe-project-nav-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--pe-space-2);
    padding-top: var(--pe-space-3);
  }

  .pe-project-identity strong {
    font-size: var(--pe-type-nav);
  }

  .pe-project-nav-links {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0;
    overflow: visible;
    padding: 0;
    background: transparent;
  }

  .pe-project-nav-link {
    font-size: var(--pe-type-small);
    padding-inline: 0;
  }

  .pe-project-nav .pe-nav-dropdown {
    position: static;
  }

  .pe-project-nav .pe-nav-dropdown-menu {
    position: absolute;
    width: 100%;
    min-width: 0;
    max-width: none;
    left: 0;
    right: 0;
    top: 100%;
    max-height: 45vh;
    overflow-y: auto;
    background: var(--pe-paper);
    border: var(--pe-rule-dashed);
  }
}

.pe-deep-dive-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pe-space-4);
  margin-block: var(--pe-space-2);
}

.pe-deep-dive-gallery[data-count="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pe-deep-dive-image {
  min-width: 0;
  border-radius: var(--pe-radius-card);
  background: var(--pe-white);
}

.pe-deep-dive-image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}

.pe-deep-dive-image img[data-fit="cover"] {
  object-fit: cover;
}

.pe-deep-dive-gallery[data-layout="photos"] img {
  aspect-ratio: 1 / 1;
}

.pe-deep-dive-image .pe-media-open-label {
  top: var(--pe-space-2);
  right: var(--pe-space-2);
  width: 2rem;
  height: 2rem;
  background: color-mix(in srgb, var(--pe-white) 72%, transparent);
  color: var(--pe-ink);
}

.pe-deep-dive-image .pe-media-open-label .pe-icon {
  width: .875rem;
  height: .875rem;
}

.pe-deep-dive-image:focus-visible .pe-media-open-label {
  transform: none;
  background: var(--pe-white);
}

@media (hover: hover) {
  .pe-deep-dive-image:hover .pe-media-open-label {
    transform: none;
    background: var(--pe-white);
  }
}

.pe-deep-dive-image:focus-visible {
  outline: 3px solid var(--pe-focus);
  outline-offset: 3px;
}

.pe-lightbox-image {
  border-radius: var(--pe-radius-card);
}

@media (max-width: 767px) {
  .pe-deep-dive-gallery[data-count] {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-3);
  }
}

.pe-editorial-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.pe-highlight-intro .pe-deep-dive-section--editorial {
  padding: 0 var(--pe-space-5) var(--pe-space-5);
  background: transparent;
}

.pe-editorial-chapters {
  display: grid;
  gap: var(--pe-space-5);
}

.pe-editorial-chapter {
  display: grid;
  grid-template-columns: minmax(12rem, .55fr) minmax(0, 1.45fr);
  gap: var(--pe-space-7);
  align-items: start;
  padding: var(--pe-space-5);
  border-radius: var(--pe-radius-card);
  background: var(--pe-white);
}

.pe-editorial-label {
  margin: var(--pe-space-0) 0 0;
}

.pe-editorial-content {
  min-width: 0;
  width: 100%;
  max-width: 46rem;
}

.pe-editorial-content > h3 {
  margin: 0 0 var(--pe-space-4);
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
}

.pe-editorial-subsection {
  margin-top: var(--pe-space-6);
  padding-top: var(--pe-space-5);
  border-top: var(--pe-rule-dashed);
}

.pe-editorial-subsection > h4 {
  margin: 0 0 var(--pe-space-4);
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
}

.pe-measure-resources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--pe-space-4);
  margin: var(--pe-space-5) 0 0;
  padding: 0;
  list-style: none;
}

.pe-measure-resource {
  min-width: 0;
  min-height: 18rem;
  display: flex;
  flex-direction: column;
  gap: var(--pe-space-3);
  padding: var(--pe-space-4);
  border: 1px solid color-mix(in srgb, var(--pe-ink) 15%, transparent);
  border-radius: var(--pe-radius-card);
  background: var(--pe-white);
  color: var(--pe-ink);
  overflow-wrap: anywhere;
}

.pe-measure-resource-description {
  margin: 0;
  font-size: var(--pe-type-body);
  line-height: var(--pe-leading-body);
}

/* Unterlagen (Dokumente, Quellen, ausstehende Unterlagen) immer beige, Personen bleiben weiß
   (BSY-Feedback 15.10.2026). Ein Vorschaubild behält seine weiße Fläche. */
.pe-measure-resource--document {
  background: var(--pe-paper);
}

.pe-measure-resource--preview {
  padding: 0;
  gap: 0;
  overflow: hidden;
}

.pe-measure-resource-preview {
  display: block;
  width: 100%;
  height: 12rem;
  padding: var(--pe-space-3);
  object-fit: contain;
  background: var(--pe-white);
}

.pe-measure-resource-caption {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--pe-space-2);
  padding: var(--pe-space-4);
  background: var(--pe-paper);
}

.pe-measure-resource-kind {
  font-size: var(--pe-type-small);
  line-height: var(--pe-leading-body);
}

.pe-measure-resource-title {
  font-size: var(--pe-type-h3);
  line-height: var(--pe-leading-h3);
  font-weight: 700;
}

.pe-measure-resource-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pe-space-1) var(--pe-space-3);
  margin-top: auto;
}

.pe-measure-resource-actions :is(a, button) {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
  min-height: 44px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--pe-type-nav);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.pe-measure-resource-actions :is(a, button) span {
  min-width: 0;
}

@media (hover: hover) {
  .pe-measure-resource-actions :is(a, button):hover {
    text-decoration: underline;
    text-underline-offset: .2em;
  }
}

.pe-measure-resource-actions :is(a, button):focus-visible {
  outline: 2px solid var(--pe-ink);
  outline-offset: 4px;
}

.pe-measure-resource-actions .pe-icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

.pe-measure-resource-status {
  margin-top: auto;
  font-size: var(--pe-type-small);
}

@media (max-width: 991px) {
  .pe-highlight-intro .pe-deep-dive-section--editorial {
    padding: 0 var(--pe-space-3) var(--pe-space-3);
  }

  .pe-editorial-chapter {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-4);
    padding: var(--pe-space-4);
  }
}

@media (max-width: 767px) {
  .pe-measure-resources {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pe-space-3);
  }
}

/* Gemeinsame Projektkategorien auf Hero-, Start- und Katalogkarten. */

[data-tag-type="context"] {
  background: var(--pe-blue);
  color: var(--pe-ink);
}

[data-tag-type="approach"] {
  background: var(--pe-yellow);
  color: var(--pe-ink);
}

.pe-tag[data-tag-type="use"],
[data-tag-type="use"] {
  background: var(--pe-ink);
  color: var(--pe-white);
}

/* Produktionsanpassungen gegenüber dem Prototyp-Rahmen */
[hidden] {
  display: none !important;
}

/* Bilder tragen Breite und Höhe gegen Layoutsprünge; die Höhe folgt der Breite. */
img {
  height: auto;
}

html {
  background: var(--pe-paper, #f4efe4);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--pe-paper, #f4efe4);
  /* Trennt nur lange Komposita und lässt mindestens fünf Zeichen je Zeile stehen. */
  hyphenate-limit-chars: 12 5 5;
  -webkit-hyphenate-limit-before: 5;
  -webkit-hyphenate-limit-after: 5;
}

:root {
  --pe-paper: #f4efe4;
}

.pe-site {
  border: 0;
}

.pe-skip-link {
  position: absolute;
  left: var(--pe-space-3);
  top: -100px;
  z-index: 200;
  padding: var(--pe-space-2) var(--pe-space-3);
  border-radius: var(--pe-radius-control);
  background: var(--pe-yellow);
  color: var(--pe-ink);
  font-weight: 600;
}

.pe-skip-link:focus {
  top: var(--pe-space-3);
}

.pe-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ===== Ergänzungen nach der V4-Übernahme ===== */

/* Eingebettete Dienste laden erst nach Zustimmung (Vimeo, Spotify) */
.pe-embed-consent {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--pe-space-4);
  color: var(--pe-white);
}

.pe-podcast-embed .pe-embed-consent {
  justify-content: center;
  align-items: center;
  text-align: center;
}

.pe-podcast-embed .pe-embed-consent-panel {
  justify-items: center;
  max-width: 28rem;
  background: none;
}

.pe-embed-consent-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pe-embed-consent-panel {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--pe-space-2);
  padding: var(--pe-space-4);
  border-radius: var(--pe-radius-control);
  background: color-mix(in srgb, var(--pe-ink) 78%, transparent);
}

.pe-embed-consent-note {
  margin: 0;
  font-size: var(--pe-type-small);
  line-height: var(--pe-leading-small);
}

.pe-embed-consent-note a {
  color: inherit;
}

.pe-embed-consent-remember {
  display: inline-flex;
  align-items: center;
  gap: var(--pe-space-1);
  min-height: 44px;
  font-size: var(--pe-type-small);
  line-height: var(--pe-leading-small);
  cursor: pointer;
}

/* Mit CCM19 fragt CCM19 selbst im Player nach der Zustimmung: nur Vorschaubild und Button */
.has-ccm19 .pe-embed-consent-note,
.has-ccm19 .pe-embed-consent-remember {
  display: none;
}

.pe-embed-consent-remember input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--pe-yellow);
}

/* Rechtstexte: lange Begriffe in Überschriften nur an weichen Trennstellen (­) umbrechen */
.pe-legal-chapter h2,
.pe-legal-chapter h3 {
  hyphens: manual;
}

/* Maßnahmenübersicht: längere Erläuterungen mit Absätzen, Listen und Zwischenzeilen */
.pe-measure-explanation + .pe-measure-explanation {
  margin-top: var(--pe-space-4);
}

.pe-measure-explanation-row .pe-measure-explanation-label {
  margin-top: var(--pe-space-3);
  font-size: var(--pe-type-small);
  font-weight: 700;
}

.pe-measure-explanation ul {
  margin: var(--pe-space-2) 0 0;
  padding-left: 1.25em;
  list-style: disc;
}

.pe-measure-explanation li + li {
  margin-top: var(--pe-space-1);
}

.pe-measure-explanation a:not(.pe-cta-link) {
  display: inline;
  font-size: inherit;
}

/* CCM19: kein schwebendes Cookie-Symbol, die Einstellungen öffnet »Cookies Settings« im Footer */
.ccm-settings-summoner {
  display: none !important;
}

/* CCM19-Banner im Stil der Website (19.10.2026): kompakte Karte unten rechts auf Papier-Beige,
   beide Entscheidungen gleich gewichtet; Sprachauswahl ausgeblendet. Die Ids haben Vorrang vor dem
   CCM19-Theme, das nach dieser Datei geladen werden kann. */
#ccm-widget.ccm-modal {
  top: auto !important;
  right: 1rem !important;
  bottom: 1rem !important;
  left: auto !important;
  width: min(30rem, calc(100vw - 2rem)) !important;
  max-width: none !important;
  height: auto !important;
  max-height: calc(100dvh - 2rem) !important;
  margin: 0 !important;
  transform: none !important;
  background: transparent !important;
}

#ccm-widget .ccm-modal-inner {
  position: relative;
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  padding: 1.25rem 1.25rem 1rem !important;
  border: 1px solid var(--pe-ink) !important;
  border-radius: var(--pe-radius-card) !important;
  background: var(--pe-paper, #f4efe4) !important;
  box-shadow: none !important;
  color: var(--pe-ink) !important;
  font-family: inherit !important;
}

/* Keine Schatten aus dem CCM19-Theme, weder auf Text noch auf Buttons, auch im Einstellungsdialog */
.ccm-root,
.ccm-root * {
  text-shadow: none !important;
}

.ccm-root .ccm-modal-inner,
.ccm-root button {
  box-shadow: none !important;
}

#ccm-widget .ccm-widget--language-switch {
  display: none !important;
}

#ccm-widget .ccm-modal--header {
  position: static !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

#ccm-widget .ccm-dismiss-button {
  position: absolute !important;
  top: .75rem !important;
  right: .75rem !important;
  left: auto !important;
  margin: 0 !important;
}

#ccm-widget .ccm-modal--body,
#ccm-widget .ccm-widget--text,
#ccm-widget .ccm-inner-overflow {
  max-height: none !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Grauer Verlauf über der letzten Textzeile (Scroll-Hinweis von CCM19) entfällt, der Text bleibt ganz lesbar */
#ccm-widget .ccm-widget--text::before,
#ccm-widget .ccm-widget--text::after {
  display: none !important;
}

#ccm-widget .ccm-widget--title {
  margin: 0 2rem .5rem 0 !important;
  color: var(--pe-ink) !important;
  font-size: 1.125rem !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  text-align: left !important;
}

#ccm-widget .ccm-widget--introduction,
#ccm-widget .ccm-widget--introduction p {
  margin: 0 !important;
  color: var(--pe-ink) !important;
  font-size: var(--pe-type-small) !important;
  line-height: 1.45 !important;
  text-align: left !important;
}

#ccm-widget .ccm-widget--buttons {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin: 1rem 0 0 !important;
  padding: 0 !important;
}

/* Akzeptieren und Ablehnen sehen gleich aus, damit keine Entscheidung bevorzugt wirkt */
#ccm-widget .ccm-widget--buttons button {
  width: 100% !important;
  min-height: 2.75rem;
  margin: 0 !important;
  padding: .75rem 1rem !important;
  border: 1px solid var(--pe-ink) !important;
  border-radius: var(--pe-radius-pill) !important;
  background: var(--pe-black) !important;
  color: var(--pe-black-text) !important;
  font: inherit !important;
  font-size: var(--pe-type-small) !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  white-space: nowrap;
  cursor: pointer;
}

#ccm-widget .ccm-widget--buttons button:hover,
#ccm-widget .ccm-widget--buttons button:focus-visible {
  background: var(--pe-white) !important;
  color: var(--pe-ink) !important;
}

#ccm-widget .ccm-modal--footer {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem 1rem;
  margin: .75rem 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  font-size: .75rem !important;
  text-align: left !important;
}

#ccm-widget .ccm-link-container,
#ccm-widget .ccm-powered-by {
  margin: 0 !important;
  padding: 0 !important;
}

#ccm-widget .ccm-modal--footer a {
  color: var(--pe-ink) !important;
}

#ccm-widget .ccm-link-container,
#ccm-widget .ccm-powered-by {
  justify-content: flex-start !important;
  text-align: left !important;
}

@media (max-width: 767px) {
  #ccm-widget.ccm-modal {
    right: .75rem !important;
    bottom: .75rem !important;
    width: calc(100vw - 1.5rem) !important;
  }

  #ccm-widget .ccm-modal-inner {
    padding: 1rem 1rem .75rem !important;
  }

  #ccm-widget .ccm-widget--title {
    font-size: 1rem !important;
  }

  #ccm-widget .ccm-widget--introduction,
  #ccm-widget .ccm-widget--introduction p {
    font-size: .8125rem !important;
    line-height: 1.4 !important;
  }

  #ccm-widget .ccm-widget--buttons button {
    padding: .75rem .5rem !important;
    font-size: .8125rem !important;
  }
}

/* Stimmen-Karussell: Video in der Karte, vorher Hinweis zur Übertragung an YouTube */
.pe-supporter-video iframe {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  border: 0;
}

.pe-supporter-video.is-playing::after {
  display: none;
}

.pe-supporter-consent {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--pe-space-2);
  padding: var(--pe-space-4);
  background: color-mix(in srgb, var(--pe-black) 82%, transparent);
  color: var(--pe-white);
  font-size: var(--pe-type-small);
  line-height: var(--pe-leading-small);
}

.pe-supporter-consent p {
  margin: 0;
}

.pe-supporter-consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Schreibmaschinen-Titel (Mobile-Review 19.10.2026): Das längste Wort »experimentell«
   passt immer in die Spalte, und die Wortzeile reserviert zwei Zeilen, damit die Seite
   beim Wortwechsel nicht springt. */
@media (max-width: 767px) {
  .pe-start-hero-title {
    font-size: min(var(--pe-type-display), calc((100vw - 2 * var(--pe-space-4)) / 6.6));
  }

  .pe-start-hero-word {
    min-height: 2em;
    align-content: flex-start;
  }
}

/* Schmale Smartphones (Mobile-Review 19.10.2026): Hauptnavigation bleibt einzeilig,
   die Projektlinks stoßen nicht aneinander und laufen nicht über den Rand. */
@media (max-width: 374px) {
  .pe-nav {
    font-size: clamp(.875rem, 4.3vw, 1rem);
    column-gap: clamp(.5rem, 2.8vw, 1rem);
  }
}

@media (max-width: 359px) {
  .pe-project-nav-links {
    column-gap: var(--pe-space-0);
  }

  .pe-project-nav-link {
    font-size: .8125rem;
  }
}