/* Übergänge der Projektseite (Motion-Design) – wird nur auf architektur-projekte.html geladen */

/* ==========================================================================
   Schwebendes Dock: Blätter-Navigation – einziger Filter der Seite.
   Unten mittig, dunkel (Schwarz 72 %, kräftiger Blur – Kundenwunsch 16.10., fällt mobil besser auf),
   ohne Rahmen und Schatten. Zeigt nur den aktiven Filter, feine Pfeile links/rechts,
   (Position und Unterstreichung auf Kundenwunsch entfernt – reduziert).
   ========================================================================== */
.projektseite .pk-filter { display: none; }   /* bleibt im HTML als Quelle, sichtbar ist nur das Dock */
.pk-dock {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 60;
  max-width: calc(100vw - 32px);
  transform: translate3d(-50%, calc(100% + 40px), 0); opacity: 0; pointer-events: none;
  transition: transform .9s cubic-bezier(0.32, 0.72, 0, 1), opacity .5s cubic-bezier(0.23, 1, 0.32, 1);
}
.pk-dock.sichtbar { transform: translate3d(-50%, 0, 0); opacity: 1; pointer-events: auto; }
.pk-dock-spur { display: flex; align-items: stretch; gap: 1px; }   /* drei Felder mit 1 px Lücke: Pfeile als eigene Quadrate */
.pk-dock-pfeil, .pk-dock-mitte {
  background: rgba(14, 14, 13, .72);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
}

/* Pfeile: feine Linie mit Spitze, echte Buttons */
.pk-dock-pfeil {
  flex: 0 0 auto; display: grid; place-items: center; width: 3.4rem; height: 3.4rem;   /* quadratisch */
  color: rgba(255, 255, 255, .85); transition: color .45s cubic-bezier(0.23, 1, 0.32, 1), background-color .4s cubic-bezier(0.23, 1, 0.32, 1);
}
.pk-dock-pfeil svg { display: block; overflow: visible; transition: translate .5s cubic-bezier(0.23, 1, 0.32, 1); }
.pk-dock-pfeil--zurueck svg { scale: -1 1; }
.pk-dock-pfeil:hover, .pk-dock-pfeil:focus-visible { color: #fff; }
@media (hover: hover) {                        /* Rollover: Feld wird heller, der Pfeil bleibt stehen */
  .pk-dock-pfeil:hover { background-color: rgba(58, 58, 56, .82); }
}
.pk-dock-pfeil:active { background-color: rgba(80, 80, 77, .86); }
.pk-dock-pfeil:focus-visible { outline: 1px solid rgba(255, 255, 255, .8); outline-offset: -6px; }

/* Mitte: Name im Fenster (Breite per Skript, weich), Haarlinie, Position */
.pk-dock-mitte { position: relative; display: flex; align-items: center; padding: 0 1.4rem; }
.pk-dock-name {
  font-family: var(--font); font-size: .86rem; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase;
  white-space: nowrap; color: #fff;
}
.pk-dock-fenster {
  position: relative; display: block; flex: 0 0 auto; overflow: hidden;
  height: calc(.86rem * 1.3);                                 /* nur die Zeile – reduziert, ohne Unterstreichung */
  transition: width .7s cubic-bezier(0.32, 0.72, 0, 1);
}
.pk-dock-fenster .pk-dock-name { position: absolute; left: 0; right: 0; top: 0; text-align: center; will-change: transform, clip-path; }   /* mittig im festen Fenster */
.pk-dock-mass { position: absolute; left: 0; top: 0; visibility: hidden; pointer-events: none; }

.pk-dock-zahl {                                /* Position (2 / 5) – vom Kunden nicht gewünscht, ausgeblendet */
  display: none; flex: 0 0 auto; align-items: baseline; white-space: nowrap; margin-left: .85rem; margin-bottom: .45rem;   /* auf Schrifthöhe des Namens */
  font-family: var(--mono); font-size: .62rem; line-height: 1; letter-spacing: .04em;
  color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums;
}
.pk-dock-ziffer { position: relative; display: inline-block; overflow: hidden; height: 1em; width: 1ch; }
.pk-dock-ziffer span { position: absolute; left: 0; top: 0; }

@media (max-width: 480px) {
  .pk-dock-pfeil { width: 3.1rem; height: 3.1rem; }   /* quadratisch, Trefferfläche ≈ 50 px */
  .pk-dock-mitte { padding: 0 1rem; }
  .pk-dock-name { font-size: .76rem; letter-spacing: .1em; }
  .pk-dock-fenster { height: calc(.76rem * 1.3); }
  .pk-dock-zahl { margin-left: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-dock { transition: opacity .2s linear; }
  .pk-dock-fenster, .pk-dock-pfeil svg { transition: none; }
}

/* ==========================================================================
   Karten: dezent einblenden und einfahren (statt Maske).
   Auslöser bleibt .visible aus includes.js (auf .pk und .maske); die Bewegung liegt
   auf der ganzen Karte (.pk), nicht auf dem img – die Parallaxe bleibt ungestört.
   Filterwechsel und Rücksprung steuert projekte.js (WAAPI, .pk-still).
   ========================================================================== */
.projektseite .pk-bild.maske { clip-path: none; transition: none; }
.js .projektseite .pk {
  opacity: 0; transform: translate3d(0, 48px, 0);
  transition: opacity 1.1s cubic-bezier(0.23, 1, 0.32, 1), transform 1.1s cubic-bezier(0.32, 0.72, 0, 1);
}
.js .projektseite .pk.visible { opacity: 1; transform: none; }
.js .projektseite .pk--paar-b.visible { transition-delay: .12s; }   /* zweite Paar-Karte leicht versetzt */
.js .projektseite .pk-liste.pk-still .pk { transition: none; }      /* Filter-Tausch, Rücksprung: ohne CSS-Übergang */

@media (prefers-reduced-motion: reduce) {   /* sofort sichtbar */
  .js .projektseite .pk { opacity: 1; transform: none; transition: none; }
}

/* Sehr schmale Telefone (≤ 360 px, z. B. iPhone SE 1. Gen.): Dock passte nicht, rechter Pfeil ragte hinaus (Prüfung 19.10.) */
@media (max-width: 360px) {
  .pk-dock-pfeil { width: 2.9rem; height: 2.9rem; }
  .pk-dock-mitte { padding: 0 .75rem; }
  .pk-dock-name { font-size: .75rem; letter-spacing: .05em; }
  .pk-dock-fenster { height: calc(.75rem * 1.3); }
}