/* =====================================================================
   PROJEKT-FELD — echte 3D-Würfelarchitektur der Referenz auf Port 8081.
   Geometrie, Raster, Perspektive und Animation entsprechen der Referenz;
   Material und Farbwelt bleiben im Graphit-Look der aktuellen Website.
   ===================================================================== */

.pf-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  contain: layout paint style;
  perspective: 5200px;
  perspective-origin: 50% 30%;
  --e: clamp(104px, 9vw, 175px);
  --h: calc(var(--e) / 2);
  --rx: 54deg;
  --rz: 45deg;
  --lift: calc(var(--e) * .5);
  background: linear-gradient(135deg, #070809 0%, #0d0e10 52%, #17181a 100%);
}

.pf-stage::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4%;
  width: 135%;
  height: 56%;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(ellipse 48% 100% at 50% 0%, rgb(150 152 158 / .05), transparent 60%),
    radial-gradient(ellipse 85% 100% at 50% 4%, rgb(120 122 130 / .035), transparent 74%);
}

.pf-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse 82% 86% at 50% 44%, transparent 54%, rgb(4 5 7 / .42) 100%);
}

/* ---------- Exaktes 8081-Raster ---------- */
.pf-field {
  position: absolute;
  left: 50%;
  top: 56%;
  z-index: 1;
  display: grid;
  grid-auto-rows: var(--e);
  grid-auto-columns: var(--e);
  gap: 2px;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(var(--rx)) rotateZ(var(--rz));
}

.pf-field::before {
  content: '';
  position: absolute;
  inset: -30% -20%;
  transform: translateZ(-260px);
  pointer-events: none;
  background: radial-gradient(ellipse 50% 42% at 50% 55%, rgb(0 0 0 / .6), transparent 72%);
}

.pf-cube {
  position: relative;
  width: var(--e);
  height: var(--e);
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--e) * var(--restf, 0) * var(--gf, 1)));
  transition: transform .5s cubic-bezier(.2, .9, .25, 1);
}

.pf-field.pf-building .pf-cube { transition: none; }
.pf-field.pf-building .pf-hit { pointer-events: none; }
.pf-cube.pf-empty { cursor: default; pointer-events: none; }

.pf-slot {
  position: relative;
  width: var(--e);
  height: var(--e);
  transform-style: preserve-3d;
}

.pf-cube.pf-proj {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.pf-hit {
  position: absolute;
  left: -25%;
  top: -50%;
  width: 150%;
  height: 250%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
  transform: translateZ(calc(var(--e) * var(--restf, 0) + var(--h)));
}

.pf-hit:focus-visible { outline: none; }

/* ---------- Graphit-Material der aktuellen Seite ---------- */
.pf-face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
}

.pf-top {
  transform: translateZ(var(--h));
  background:
    radial-gradient(ellipse 86% 50% at 46% 54%, rgb(255 255 255 / .05), transparent 66%),
    linear-gradient(128deg, transparent 0 43%, rgb(255 255 255 / .028) 44%, transparent 46%),
    linear-gradient(151deg, rgb(255 255 255 / .06), transparent 25%),
    linear-gradient(205deg, #1c1d1f 0%, #141517 48%, #0c0d0e 100%);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .065),
    inset 0 1px 0 rgb(255 255 255 / .095),
    0 0 0 1px rgb(0 0 0 / .34);
}

.pf-s {
  transform: rotateX(-90deg) translateZ(var(--h));
  background:
    linear-gradient(90deg, rgb(255 255 255 / .018), transparent 35%),
    linear-gradient(180deg, #141516 0%, #0d0e0f 20%, #060707 68%, #020303 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
}

.pf-e {
  transform: rotateY(90deg) translateZ(var(--h));
  background:
    linear-gradient(90deg, rgb(255 255 255 / .025), transparent 44%),
    linear-gradient(180deg, #181a1b 0%, #101112 20%, #070808 67%, #030404 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .045);
}

.pf-top.pf-empty-top {
  background:
    radial-gradient(ellipse 86% 50% at 46% 54%, rgb(255 255 255 / .05), transparent 66%),
    linear-gradient(128deg, transparent 0 43%, rgb(255 255 255 / .028) 44%, transparent 46%),
    linear-gradient(151deg, rgb(255 255 255 / .06), transparent 25%),
    linear-gradient(205deg, #1c1d1f 0%, #141517 48%, #0c0d0e 100%);
}

/* „Soon"-Platzhalter für künftige Projekte: schwarzer Deckel wie ein echter
   Projektwürfel, aber mit goldenem Rahmen und zentriertem „Soon". */
.pf-soon-top {
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 86% 60% at 50% 50%, rgb(200 168 120 / .05), transparent 72%),
    linear-gradient(205deg, #1c1d1f 0%, #141517 48%, #0c0d0e 100%);
  box-shadow:
    inset 0 0 0 1px rgb(200 168 120 / .30),
    inset 0 1px 0 rgb(255 255 255 / .05),
    0 0 0 1px rgb(0 0 0 / .34);
}

.pf-soon-label {
  color: #c8a878;
  font-size: calc(var(--e) * .13);
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .9;
}

/* Projektbilder sind echte Würfeldeckel, keine projizierten Karten. */
.pf-shot {
  background: #101112;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / .12),
    0 0 0 1px rgb(0 0 0 / .55),
    0 10px 26px rgb(0 0 0 / .26);
}

.pf-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  user-select: none;
  -webkit-user-drag: none;
  transform: scale(1.012);
  transition: filter .35s ease, transform .55s cubic-bezier(.2, .8, .2, 1);
}

.pf-shot::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .10), transparent 24%),
    linear-gradient(180deg, transparent 62%, rgb(0 0 0 / .16));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09);
}

.pf-wall-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: .7rem;
  color: #ece9e2;
  font-size: calc(var(--e) * .052);
  letter-spacing: .16em;
  text-transform: uppercase;
  opacity: .66;
}

.pf-wall-corner {
  position: absolute;
  top: .7rem;
  right: .7rem;
  color: #ece9e2;
  font-size: calc(var(--e) * .046);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .5;
}

.pf-cube.pf-proj .pf-s,
.pf-cube.pf-proj .pf-e {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--project-accent) 55%, transparent);
}

.pf-cube.pf-proj.pf-raised {
  transform: translateZ(calc(var(--e) * var(--restf, 0) * var(--gf, 1) + var(--lift)));
}

.pf-cube.pf-proj.pf-raised .pf-shot {
  box-shadow:
    inset 0 0 0 2px color-mix(in srgb, var(--project-accent) 68%, white 8%),
    0 18px 38px rgb(0 0 0 / .38);
}

.pf-cube.pf-proj.pf-raised .pf-shot img {
  filter: saturate(1.08) brightness(1.04);
  transform: scale(1.045);
}

/* ---------- Projektinfo: nur bei Hover/Fokus sichtbar ---------- */
.pf-panel {
  position: absolute;
  left: clamp(4.4rem, 6.4vw, 7rem);
  bottom: clamp(4.5rem, 8.5vh, 6rem);
  z-index: 7;
  width: min(350px, calc(100vw - 3rem));
  padding: 1rem 1.1rem .95rem 1.25rem;
  border: 1px solid rgb(255 255 255 / .10);
  border-left: 2px solid var(--project-accent, var(--accent));
  border-radius: 12px;
  background: rgb(8 9 10 / .80);
  box-shadow: 0 18px 50px rgb(0 0 0 / .36);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  pointer-events: none;
}

.pf-panel.pf-active {
  visibility: visible;
  pointer-events: auto;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pf-eyebrow {
  margin: 0 0 .3rem;
  color: var(--project-accent, var(--accent));
  font-size: .61rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
}

.pf-name {
  margin: 0 0 .2rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 600;
  line-height: 1.08;
}

.pf-meta {
  margin: 0;
  color: #aaa8a1;
  font-size: .76rem;
  line-height: 1.45;
}

.pf-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: .65rem 0 0;
  padding-top: .6rem;
  border-top: 1px solid rgb(255 255 255 / .08);
  color: #dad8d1;
  font-size: .7rem;
  letter-spacing: .06em;
  text-decoration: none;
}

.pf-open span { color: var(--project-accent, var(--accent)); }
.pf-legend[hidden] { display: none !important; }

/* ---------- Allgemeiner Einstieg zur Projektübersicht ---------- */
.work-summary {
  position: absolute;
  left: clamp(4.4rem, 6.4vw, 7rem);
  right: clamp(1.4rem, 3vw, 2.6rem);
  bottom: clamp(4.5rem, 8.5vh, 6rem);
  z-index: 8;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  pointer-events: none;
}

.work-summary__copy {
  width: min(380px, 44vw);
  padding-left: .95rem;
  border-left: 1px solid rgb(200 168 120 / .52);
  text-shadow: 0 2px 18px rgb(0 0 0 / .9);
  transition: opacity .22s ease, transform .22s ease;
}

.work-summary__eyebrow {
  margin: 0 0 .3rem;
  color: var(--accent);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.work-summary__text {
  margin: 0;
  color: rgb(232 230 224 / .7);
  font-size: .78rem;
  line-height: 1.5;
}

.btn--work-more {
  min-height: 42px;
  padding: .62rem 1.35rem;
  color: var(--accent);
  background: rgb(12 12 13 / .86);
  border: 1px solid rgb(200 168 120 / .58);
  box-shadow: 0 12px 36px rgb(0 0 0 / .22);
  font-size: .82rem;
  letter-spacing: .08em;
  pointer-events: auto;
}

.btn--work-more span {
  margin-left: .55rem;
  transition: transform .25s ease;
}

.btn--work-more:hover {
  color: #14110b;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 14px 38px rgb(200 168 120 / .2);
  transform: translateY(-2px);
}

.btn--work-more:hover span { transform: translate(2px, -2px); }

.pf-stage.pf-project-active .work-summary__copy {
  opacity: 0;
  transform: translateY(8px);
}

@media (max-width: 900px) {
  .pf-panel { left: 1.25rem; }
}

@media (max-width: 720px) {
  /* min(…, 18dvh): bei Display-Zoom (320 × 540) passte sonst kein Projektpaar zwischen Header und Text */
  .pf-stage { --e: clamp(80px, min(26vw, 18dvh), 140px); }
  .pf-panel { bottom: 6rem; width: calc(100vw - 2.5rem); }
  .pf-name { font-size: 1.35rem; }

  .work-summary {
    left: 1.25rem;
    right: 1.25rem;
    bottom: 1.25rem;
    gap: 1rem;
  }

  .work-summary__copy { width: min(54vw, 300px); }
  /* .69rem = 11 px war am Handy zu klein (Mobil-Check 04.10.2026) */
  .work-summary__text { font-size: .76rem; }
  .btn--work-more { min-height: 44px; padding: .58rem 1rem; font-size: .75rem; }
}

/* Niedrige Fenster (Handy quer, Fold quer; Mobil-Check 04.10.2026): Die Würfel wachsen mit der
   Höhe statt mit der Breite, sonst passt kein Projektwürfel zwischen Header und Zusammenfassung
   (852 × 342: Würfel 104 px, freies Band 136 px). Die Zusammenfassung rückt an den unteren Rand,
   weil dort keine Bottom-Bar mehr steht (layout.css). Welche Zellen die Projekte tragen, wählt
   js/projektfeld.js (fitSlots) aus diesem Band. */
@media (max-height: 500px) {
  .pf-stage { --e: clamp(60px, 21dvh, 104px); }
  .work-summary { left: 1.25rem; right: 1.25rem; bottom: .8rem; gap: 1.2rem; }
  .work-summary__copy { width: min(440px, 52vw); }
  .pf-panel { left: 1.25rem; bottom: .8rem; }
}

body.is-reduced .pf-stage {
  position: static;
  overflow: visible;
  perspective: none;
  background: transparent;
}

body.is-reduced .pf-field,
body.is-reduced .pf-panel,
body.is-reduced .pf-legend { display: none; }

body.is-reduced .work-summary {
  position: static;
  width: min(var(--container), calc(100% - 2rem));
  margin: 2rem auto;
}

@media (prefers-reduced-motion: reduce) {
  .pf-field,
  .pf-cube,
  .pf-shot img { transition: none; }
}