/* =========================================================
   Projektseite (fotos.html): Einleitung, Skizze mit Zoom, drei
   kurze Notizen. Farben und Schriften kommen aus style.css, den
   Zurueck-Link der Kopfzeile liefert galerie.css.
   ========================================================= */

.pj-intro{padding:clamp(7.5rem,16vh,11rem) 0 clamp(2.5rem,5vw,4rem)}
.pj-title{
  font-size:clamp(2.2rem,1.2rem + 3.6vw,4.2rem);
  line-height:1.04;letter-spacing:-.04em;font-weight:700;margin-bottom:clamp(1.4rem,2.6vw,2rem);
}
.pj-lead{color:var(--muted);max-width:56ch;font-size:clamp(1.05rem,1rem + .4vw,1.26rem);line-height:1.7}

/* ---- Skizze ---- */
.pj-plan{padding-bottom:clamp(4rem,9vw,7rem)}
.plan{margin:0}
.plan__open{
  position:relative;display:block;width:100%;padding:clamp(.6rem,1.6vw,1.4rem);cursor:zoom-in;
  border:1px solid var(--line);border-radius:var(--radius);
  background:rgba(10,11,13,.86);
  transition:border-color .3s ease;
}
.plan__open:hover,.plan__open:focus-visible{border-color:rgba(226,101,58,.42)}
.plan__open img{display:block;width:100%;height:auto}
/* kleines Schild unten rechts, wie ein Link der Kacheln */
.plan__hint{
  position:absolute;right:clamp(.8rem,1.6vw,1.2rem);bottom:clamp(.8rem,1.6vw,1.2rem);
  display:inline-flex;align-items:center;gap:.55rem;padding:.4rem .8rem;border-radius:999px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);background:rgba(10,11,13,.9);border:1px solid var(--line);
  transition:border-color .25s ease;
}
.plan__hint::before{
  content:"";width:9px;height:9px;border:1.5px solid currentColor;border-radius:50%;
  box-shadow:4px 4px 0 -3px currentColor;
}
.plan__open:hover .plan__hint{border-color:rgba(226,101,58,.5)}
.plan figcaption{
  margin-top:.9rem;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.74rem;
  letter-spacing:.02em;color:var(--muted);
}

/* ---- Notizen ---- */
.pj-notes{padding-bottom:clamp(4rem,9vw,7rem)}
.pj-notes__grid{display:grid;gap:clamp(2rem,4vw,3rem)}
.pj-note{border-top:1px solid var(--line);padding-top:1.4rem}
.pj-note__nr{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.24em;color:var(--accent);margin-bottom:.9rem}
.pj-note h2{font-size:clamp(1.25rem,1.05rem + .7vw,1.6rem);font-weight:500;letter-spacing:-.02em;line-height:1.2;margin-bottom:.8rem}
.pj-note p:not(.pj-note__nr){color:var(--muted);line-height:1.7;max-width:46ch}
.pj-note code{
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.86em;color:var(--text);
  overflow-wrap:anywhere;
}
@media (min-width:900px){.pj-notes__grid{grid-template-columns:repeat(3,1fr)}}

.pj-end{padding-bottom:clamp(5rem,10vw,8rem)}
.pj-back{margin-top:0}

/* ---- Zoom: Skizze in voller Groesse, verschieben per Ziehen oder Wischen ---- */
.zoom{
  position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;
  background:var(--bg);
  opacity:0;transition:opacity .25s ease;
}
.zoom[hidden]{display:none}
.zoom.is-open{opacity:1}
.zoom__bar{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  padding:.8rem clamp(1rem,3vw,2rem);border-bottom:1px solid var(--line-soft);
}
.zoom__hint{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.72rem;letter-spacing:.06em;color:var(--muted)}
.zoom__actions{display:flex;gap:.4rem}
.zoom__close{border-color:rgba(226,101,58,.5);color:var(--accent)}
.zoom__pane{flex:1;overflow:auto;overscroll-behavior:contain;cursor:grab;padding:clamp(1rem,3vw,2rem)}
.zoom__pane.is-dragging{cursor:grabbing;user-select:none}
.zoom__pane img{display:block;width:1941px;max-width:none;height:auto;margin:0 auto}
.zoom.is-fit .zoom__pane{cursor:zoom-in;display:flex;align-items:center}
.zoom.is-fit .zoom__pane img{width:100%;max-height:100%;object-fit:contain}

@media (prefers-reduced-motion:reduce){
  .zoom{transition:none}
}