/* Projektseite · Projekt-Bühne und Projektfarben (Owner: wdf-section-builder, Auftrag B-projekt-vorlage). Gilt für alle Projektseiten.
   Gespiegelt aus css/sections/referenzen-020-projekte.css (Stand des abgenommenen Entwurfs), ohne die Raster der Übersicht (.pk-abschnitt/-raster/-eintrag),
   damit der parallele Umbau der Referenzen-Übersicht diese Seite nicht verschiebt. Komponenten: projekt-buehne, browser-huelle, projekt-karte. */

/* Projektfarben (lokale Variable --pf; Werte wie referenzen-020-projekte.css, gemessen in den Live-Screenshots). Umzug als --color-projekt-<slug> in tokens.css kommt im Sammelauftrag.
   Krämer Immobilien (Nachtrag 42): Wert noch nicht gemessen → Vorlagenregel „fehlt: Fläche --color-surface-2“. */
[data-projekt="hautarzt-pawlowska"] { --pf: var(--color-projekt-hautarzt-pawlowska); }
[data-projekt="physiotherapie-mocker"] { --pf: var(--color-projekt-physiotherapie-mocker); }
[data-projekt="immobilien-kraemer"] { --pf: var(--color-projekt-immobilien-kraemer); }   /* Nachtrag 42: Gold aus Logo von immobilienmakler-kraemer.de */
[data-projekt="edelstahlbau-tannroda-projekt-iris"] { --pf: var(--color-projekt-edelstahlbau-tannroda-projekt-iris); }
[data-projekt="steuerberater-sieger"] { --pf: var(--color-projekt-steuerberater-sieger); }
[data-projekt="redesign-ines-zu-castel"] { --pf: var(--color-projekt-redesign-ines-zu-castel); }
[data-projekt="neue-website-markus-kortschak"] { --pf: var(--color-projekt-neue-website-markus-kortschak); }
[data-projekt="arbeitsmedizin-weiss"] { --pf: var(--color-projekt-arbeitsmedizin-weiss); }
[data-projekt="hubert-haustechnik"] { --pf: var(--color-projekt-hubert-haustechnik); }   /* Nachtrag 62: Grün der Kunden-Site (ermittelt von Worker X) */

.pk { display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--dur-base) var(--ease-out); }
.pk-buehne {
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  padding: 10% 7% 0;
  background:
    radial-gradient(80% 70% at 16% 0%, color-mix(in srgb, var(--color-white) 20%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--pf) 94%, var(--color-white)) 0%, var(--pf) 45%, color-mix(in oklab, var(--pf) 74%, var(--color-bg)) 100%);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--color-white) 38%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--color-bg) 35%, transparent); }
.pk-buehne::before {
  content: ""; position: absolute; left: 12%; right: 10%; bottom: -12%; height: 50%; z-index: -1;
  border-radius: var(--radius-round); background: color-mix(in srgb, var(--color-bg) 45%, transparent); filter: var(--blur-glow); }
.pk-screens { position: relative; padding-right: 13%; margin-bottom: -3%; }
.pk-browser { border-radius: var(--radius-device) var(--radius-device) 0 0; }
.pk-browser .chrome {
  height: max(var(--space-24), 100cqi / 64 * 3.4); gap: max(var(--space-8), 100cqi / 64 * 1.1); padding: 0 max(var(--space-10), 100cqi / 64 * 1.3);
  font-size: max(var(--font-size-mono-2xs), 100cqi / 64 * 1.05); }
.pk-browser .vp { top: max(var(--space-24), 100cqi / 64 * 3.4); }
.pk-browser .chrome .ampel { flex: none; gap: max(var(--space-4), 100cqi / 64 * .5); }
.pk-browser .chrome .ampel i { width: max(var(--space-6), 100cqi / 64 * .75); height: max(var(--space-6), 100cqi / 64 * .75); }
.pk-browser .chrome .tab { flex: 0 1 auto; min-width: 0; max-width: 38%; }
.pk-browser .chrome .tab i { flex: none; background: var(--pf); box-shadow: var(--ring-hairline); }
.pk-browser .chrome .tab span, .pk-browser .chrome .url b { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pk-browser .chrome .url { min-width: 0; margin: 0; }
.pk-browser .chrome .url svg { flex: none; }
.pk-browser .chrome .url b { font-family: var(--font-mono); font-weight: var(--font-weight-regular); letter-spacing: var(--tracking-mono); color: var(--color-device-chrome-text); }
.pk-browser .vp img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; background: var(--color-surface-2); }
@container (max-width: 300px) {
  .pk-browser .chrome .tab { display: none; }
}
.pk-screens .sc-m {
  position: absolute; right: 0; top: 16%; width: 23%; aspect-ratio: 420 / 909; object-fit: cover; object-position: top;
  border-radius: var(--radius-md); background: var(--color-surface-2); box-shadow: var(--shadow-screen-phone); }
.pk-buehne .pk-por {
  position: absolute; left: 4%; bottom: 7%; z-index: var(--z-device-overlay);
  width: clamp(var(--space-48), 16%, var(--space-96)); height: auto; aspect-ratio: 1;
  box-shadow: var(--ring-portrait), var(--shadow-screen-phone); }
.pk-text { flex: 1; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-24) var(--space-20) var(--space-16); }
.pk-text .meta { color: var(--color-text-tertiary); }
.pk-titel { font: var(--font-weight-display) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); text-wrap: balance; }
.pk-kurz { color: var(--color-text-secondary); text-wrap: pretty; max-width: 60ch; }
.pk .inhaber { margin-top: 0; }
.pk .inhaber span { display: grid; gap: var(--space-2); }
.pk-links { margin-top: auto; padding-top: var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-24); }
.pk .tags li {
  color: color-mix(in oklab, var(--pf) 42%, var(--color-text));
  background: color-mix(in srgb, var(--pf) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf) 40%, transparent); }
.pk-case {
  display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--size-target); color: var(--color-text); text-decoration: none;
  font-weight: var(--font-weight-medium); font-size: var(--font-size-ui); border-bottom: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-fast) var(--ease-out); }
.pk-case svg { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent); transition: transform var(--dur-fast) var(--ease-out); }
.pk-case::after { content: ""; position: absolute; inset: 0; z-index: var(--z-raised); border-radius: inherit; }
.pk-case:focus-visible { outline: none; }
.pk:has(.pk-case:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 3px; }
.pk .link-mono { position: relative; z-index: calc(var(--z-raised) + 1); }
.pk-screens .sc-m, .pk-browser { transition: transform var(--dur-base) var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .pk:has(.pk-case:hover) { box-shadow: var(--shadow-card-module), var(--ring-accent); }
  .pk:has(.pk-case:hover) .pk-case { border-bottom-color: var(--color-accent); }
  .pk:has(.pk-case:hover) .pk-case svg { transform: translateX(var(--space-3)); }
  .pk:has(.pk-case:hover) .pk-browser { transform: translateY(calc(-1 * var(--space-4))); }
  .pk:has(.pk-case:hover) .pk-screens .sc-m { transform: translateY(calc(-1 * var(--space-8))); }
}
@media (min-width: 768px) {
  .pk-text { padding: var(--space-32) var(--space-32) var(--space-24); }
}
@media (min-width: 1024px) {
  .pk-screens .sc-m { border-radius: var(--radius-lg); }
  .pk-text { padding: var(--space-32) var(--space-40) var(--space-32); }
}
@media (prefers-reduced-motion: reduce) {
  .pk-screens .sc-m, .pk-browser { transition: none; }
}
.rf-projekte { position: relative; padding: var(--space-32) 0 var(--space-section); }
.rf-filter { position: relative; z-index: var(--z-raised); display: grid; gap: var(--space-12); margin-bottom: var(--space-48); }
:root:not(.js) .rf-filter { display: none; }
.rf-filter-reihe {
  display: flex; align-items: center; gap: var(--space-8); overflow-x: auto; scrollbar-width: none;
  margin: 0 calc(-1 * var(--rand)); padding: var(--space-4) var(--rand); }
.rf-filter-reihe::-webkit-scrollbar { display: none; }
.rf-filter-label { flex: none; margin-left: var(--space-12); color: var(--color-text-tertiary); font-size: var(--font-size-mono-xs); }
.rf-chip {
  flex: none; display: inline-flex; align-items: center; gap: var(--space-8); min-height: var(--size-target); padding: 0 var(--space-16);
  border: 0; border-radius: var(--radius-pill); background: transparent; box-shadow: var(--ring-hairline); cursor: pointer;
  font: var(--font-weight-medium) var(--font-size-small) / var(--leading-none) var(--font-text); color: var(--color-text-secondary); white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.rf-chip-n { font: var(--font-weight-mono) var(--font-size-mono-xs) / var(--leading-none) var(--font-mono); color: var(--color-text-tertiary); }
.rf-chip[aria-pressed="true"] { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 14%, transparent); box-shadow: var(--ring-accent); }
.rf-chip[aria-pressed="true"] .rf-chip-n { color: var(--color-accent-soft); }
.rf-chip:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
  .rf-chip:hover { color: var(--color-text); box-shadow: var(--ring-field-hover); }
  .rf-chip[aria-pressed="true"]:hover { box-shadow: var(--ring-accent); }
}
.rf-filter-status { color: var(--color-text-secondary); }
.rf-leer { color: var(--color-text-secondary); }
.rf-liste { display: grid; gap: var(--space-80); }
.rf-eintrag { scroll-margin-top: calc(var(--kopf-h) + var(--space-24)); }
.rf-eintrag[hidden] { display: none; }
.rf-projekt { position: relative; display: grid; gap: var(--space-24); }
.rf-buehne { margin: 0; border-radius: var(--radius-xl); }
.rf-buehne .pk-browser, .rf-buehne .sc-m { transition: transform var(--dur-base) var(--ease-out); }
.rf-text { position: relative; display: grid; gap: var(--space-12); align-content: center; min-width: 0; isolation: isolate; }
.rf-nr { right: 0; pointer-events: none; }
.rf-text-a, .rf-text-b { display: contents; }
.rf-text .meta { color: var(--color-text-tertiary); }
.rf-titel { font: var(--font-weight-display) var(--font-size-h3) / var(--leading-h3) var(--font-display); letter-spacing: var(--tracking-h3); text-wrap: balance; max-width: 22ch; }
.rf-satz { color: var(--color-text-secondary); text-wrap: pretty; max-width: 52ch; }
.rf-projekt .tags li {
  color: color-mix(in oklab, var(--pf) 42%, var(--color-text));
  background: color-mix(in srgb, var(--pf) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pf) 40%, transparent); }
.rf-stimme blockquote { font-size: var(--font-size-body); }
.rf-inhaber span, .rf-stimme figcaption span { display: grid; gap: var(--space-2); }
.rf-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-24); margin-top: var(--space-4); }
.rf-case {
  display: inline-flex; align-items: center; gap: var(--space-6); min-height: var(--size-target); color: var(--color-text); text-decoration: none;
  font-weight: var(--font-weight-medium); font-size: var(--font-size-ui); border-bottom: 1px solid var(--color-line-strong);
  transition: border-color var(--dur-fast) var(--ease-out); }
.rf-case svg { width: var(--size-icon-sm); height: var(--size-icon-sm); color: var(--color-accent); transition: transform var(--dur-fast) var(--ease-out); }
.rf-buehne-link { display: block; border-radius: var(--radius-xl); }
.rf-case:focus-visible { outline: none; box-shadow: 0 2px 0 var(--color-focus); }
.rf-projekt:has(.rf-case:focus-visible) .rf-buehne { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .rf-projekt:has(.rf-case:hover, .rf-buehne-link:hover) .rf-case { border-bottom-color: var(--color-accent); }
  .rf-projekt:has(.rf-case:hover, .rf-buehne-link:hover) .rf-case svg { transform: translateX(var(--space-3)); }
  .rf-projekt:has(.rf-case:hover, .rf-buehne-link:hover) .pk-browser { transform: translateY(calc(-1 * var(--space-6))); }
  .rf-projekt:has(.rf-case:hover, .rf-buehne-link:hover) .sc-m { transform: translateY(calc(-1 * var(--space-12))); }
}
@media (max-width: 767px) {
  .rf-liste { gap: var(--space-64); }
  .rf-projekt .tags { display: none; }
}
@media (min-width: 768px) {
  .rf-filter-reihe { flex-wrap: wrap; overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1024px) {
  .rf-liste { gap: var(--space-128); }
  .rf-projekt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-64); align-items: center; }
  .rf-eintrag--rechts .rf-projekt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .rf-eintrag--rechts .rf-buehne-link { order: 2; }
  .rf-nr { top: -.75em; }
  .rf-titel { font-size: var(--font-size-h2); line-height: var(--leading-h2); letter-spacing: var(--tracking-h2); max-width: 18ch; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .rf-projekt, .rf-eintrag--rechts .rf-projekt { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-32); }
  .rf-eintrag--rechts .rf-buehne-link { order: 0; }
  .rf-text { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: var(--space-48); align-items: start; }
  .rf-text-a, .rf-text-b { display: grid; gap: var(--space-12); align-content: start; }
  .rf-text-b { padding-top: calc(var(--font-size-index) * .62); }
  .rf-text-b > .rf-stimme, .rf-text-b > .rf-inhaber { margin-top: 0; }
  .rf-nr { top: -.4em; }
  .rf-liste { gap: var(--space-96); }
}
@media (prefers-reduced-motion: reduce) {
  .rf-buehne .pk-browser, .rf-buehne .sc-m, .rf-case svg { transition: none; }
}