/* ==========================================================================
   ZZD · Projektseiten (JustiZH und folgende)
   Gemeinsame Bausteine für Seiten, die ein einzelnes Projekt vorstellen.
   Baut auf zzd.css auf und benutzt nur dessen Token. Die Sprache ist die
   der 3SpeeCH-Seite: dunkler Kopf, Kapitel aus Linien statt Karten,
   Serif spricht, Grotesk beschriftet.

   Bewegung antwortet, sie führt nichts vor: 140 ms für Farbe und Kante,
   220 ms für kleine Wege (höchstens 3 px), Kurve --ease. Beim Scrollen
   erscheint nichts. Unter prefers-reduced-motion gilt der Endzustand.
   ========================================================================== */

.pj-section { padding: var(--sec-pad) var(--gutter) }
.pj-inner { max-width: var(--maxw); margin: 0 auto }
.pj-line { border-bottom: 1px solid var(--line) }
.pj-tinted { background: var(--surface-1) }

/* ── Kopf ──────────────────────────────────────────────────────────────── */

.pj-hero {
  margin-top: var(--nav-h);
  background: var(--panel);
  color: var(--panel-text);
  padding: clamp(1.75rem, 3.2vw, 3.25rem) var(--gutter) 0;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.pj-hero-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
}
.pj-hero-copy { padding-bottom: clamp(2rem, 3.6vw, 3.25rem); align-self: center }

.pj-back {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  color: var(--panel-muted);
  text-decoration: none;
  margin-bottom: var(--sp-3);
  transition: color var(--t-fast) var(--ease), gap var(--t-base) var(--ease);
}
.pj-back:hover, .pj-back:focus-visible { color: var(--panel-text); gap: 0.7rem }

.nw { white-space: nowrap }

/* Zustand und Kennzeile stehen in einer Zeile: erst die Tatsache, dann wer */
.pj-kennung {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.9rem;
  row-gap: 0.6rem;
  margin-bottom: var(--sp-2);
}
.pj-eyebrow {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--panel-muted);
}
/* Am Telefon wie jede Kennzeile, und wie der Stand daneben */
@media (max-width: 700px) {
  .pj-eyebrow { font-size: 0.73rem }
}

.pj-hero h1 {
  font-family: var(--font-head);
  font-size: clamp(2.1rem, 3.5vw, 3.3rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--panel-text);
  margin: 0.35rem 0 1rem;
  max-width: 19ch;
}
.pj-hero h1 em { font-style: normal; color: inherit }

.pj-hero-sub {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--panel-body);
  max-width: 50ch;
  margin-bottom: 1.4rem;
}
.pj-hero-btns { display: flex; flex-wrap: wrap; gap: var(--sp-2) }
.pj-hero-note {
  margin-top: 1.1rem;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--panel-body);
}
.pj-hero-cap { margin-top: 0.3rem; font-size: 0.8rem; color: var(--panel-muted) }

.pj-btn-light { background: var(--panel-text); color: var(--panel); border: 1px solid var(--panel-text) }
.pj-btn-light:hover, .pj-btn-light:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }
.pj-btn-ghost { background: transparent; color: var(--panel-text); border: 1px solid var(--panel-line) }
.pj-btn-ghost:hover, .pj-btn-ghost:focus-visible { border-color: var(--panel-text); background: rgba(255, 255, 255, 0.06) }
.btn .arrow { display: inline-block; transition: transform var(--t-base) var(--ease) }
.btn:hover .arrow, .btn:focus-visible .arrow { transform: translateX(3px) }

/* Echte Bildschirmfotos aus dem App Store. Das Gerät ist nur angedeutet:
   eine dunkle Kante, kein Zierrahmen. Das vordere Telefon steht auf dem
   Boden des Kopfes, das hintere leicht dahinter. */
.pj-phones {
  position: relative;
  height: clamp(22rem, 40vw, 34rem);
  align-self: end;
}
.pj-phone {
  position: absolute;
  bottom: -3.2rem;
  width: clamp(12.5rem, 21vw, 17.5rem);
  aspect-ratio: 1242 / 2688;
  border-radius: 2.1rem;
  padding: 0.55rem;
  background: #0B0C0D;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.pj-phone img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 1.6rem;
  background: #fff;
}
.pj-phone.vorne { right: 34%; z-index: 2 }
.pj-phone.hinten { right: 0; bottom: -1.2rem; width: clamp(11rem, 18.5vw, 15.5rem) }

/* ── Seitenleiste: Abschnitte dieser Seite ─────────────────────────────── */

.pj-sub {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--gutter);
}
.pj-sub-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.1rem;
}
.pj-sub-name {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
  white-space: nowrap;
}
.pj-sub-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  flex: 1;
  min-width: 0;
}
.pj-sub-links::-webkit-scrollbar { display: none }
.pj-sub-links a {
  display: block;
  padding: 0.95rem 0 0.85rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pj-sub-links a:hover, .pj-sub-links a:focus-visible { color: var(--text); border-bottom-color: var(--line-strong) }
.pj-sub-links a[aria-current="true"] { color: var(--text); border-bottom-color: var(--accent) }
.pj-sub .btn { padding: 0.5rem 0.95rem; font-size: 0.86rem; white-space: nowrap }

/* ── Abschnitte ────────────────────────────────────────────────────────── */

.pj-section .section-head { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem) }
.pj-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.pj-text p { font-size: 1rem; line-height: 1.62; color: var(--text-body); max-width: 60ch }
.pj-text p + p { margin-top: 0.85rem }

/* Zitat aus einer amtlichen Quelle: keine Kursive (die gehört dem Statut),
   sondern ein roter Strich links, wie bei hervorgehobenen Sätzen. */
.pj-zitat {
  border-left: 2px solid var(--accent);
  padding: 0.15rem 0 0.15rem 1.1rem;
}
.pj-zitat blockquote {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  line-height: 1.45;
  color: var(--text);
}
.pj-zitat figcaption {
  margin-top: 0.7rem;
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  color: var(--text-muted);
}
.pj-zitat figcaption a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--accent-line); transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease) }
.pj-zitat figcaption a:hover { color: var(--accent-ink); border-color: var(--accent) }

/* Vier Stichworte unter farbigen Kanten, in Logo-Reihenfolge */
.pj-verbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.75rem);
  margin-top: clamp(1.8rem, 3.4vw, 2.8rem);
  list-style: none;
}
.pj-verbs li { border-top: 2px solid var(--accent); padding-top: 0.85rem }
.pj-verbs li:nth-child(2) { border-top-color: var(--brand-blue) }
.pj-verbs li:nth-child(3) { border-top-color: var(--brand-green) }
.pj-verbs li:nth-child(4) { border-top-color: var(--brand-yellow) }
.pj-verbs h3 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.pj-verbs p { font-size: 1rem; line-height: 1.55; color: var(--text-body) }

/* ── Ansichten: echte Bildschirmfotos mit laufender Nummer ─────────────── */

.pj-shots {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.6rem);
  list-style: none;
}
.pj-shot button {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  text-align: left;
  color: inherit;
  font: inherit;
}
.pj-shot-frame {
  display: block;
  border-radius: 1.15rem;
  padding: 0.35rem;
  background: #0B0C0D;
  transition: box-shadow var(--t-fast) var(--ease);
}
.pj-shot-frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1242 / 2688;
  border-radius: 0.85rem;
  background: #fff;
}
.pj-shot button:focus-visible { outline: none }
.pj-shot button:focus-visible .pj-shot-frame { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--accent) }
.pj-shot-cap {
  display: block;
  margin-top: 0.75rem;
  border-top: 1px solid var(--line);
  padding-top: 0.55rem;
}
.pj-shot-nr {
  display: block;
  font-size: 0.78rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.pj-shot-name {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--text);
  margin-top: 0.1rem;
}
.pj-shot-name { transition: color var(--t-fast) var(--ease) }
.pj-shot button:hover .pj-shot-name, .pj-shot button:focus-visible .pj-shot-name { color: var(--accent-ink) }
.pj-shot-desc { display: block; font-size: 0.9rem; line-height: 1.5; color: var(--text-body); margin-top: 0.2rem }
.pj-shots-note { margin-top: 1.1rem; font-size: 0.86rem; color: var(--text-muted) }

/* Grossansicht: ein natives <dialog>, geöffnet mit einem Klick auf ein Foto */
.pj-lupe {
  margin: auto;
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 30rem);
  max-height: 94vh;
  overflow: visible;
}
.pj-lupe::backdrop { background: rgba(20, 18, 15, 0.82) }
.pj-lupe[open] { animation: pjAuf 0.34s var(--ease-out) }
.pj-lupe img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(94vh - 3.5rem);
  border-radius: 1.4rem;
  border: 0.45rem solid #0B0C0D;
  background: #fff;
}
.pj-lupe-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 0.7rem;
  color: #F2EFE8;
  font-size: 0.9rem;
}
.pj-lupe-bar button {
  font: inherit;
  font-weight: 600;
  color: inherit;
  background: none;
  border: 1px solid rgba(242, 239, 232, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.9rem;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pj-lupe-bar button:hover, .pj-lupe-bar button:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff }
@keyframes pjAuf { from { opacity: 0; transform: translateY(12px) scale(0.985) } to { opacity: 1; transform: none } }

/* ── Funktionen: Einträge statt Karten ─────────────────────────────────── */

.pj-list { list-style: none; border-top: 1px solid var(--text); counter-reset: pj }
.pj-list > li {
  display: grid;
  grid-template-columns: 3rem minmax(0, 17rem) minmax(0, 1fr);
  gap: 0.5rem clamp(1rem, 3vw, 2.5rem);
  padding: 1.15rem 0 1.2rem;
  border-bottom: 1px solid var(--line);
  counter-increment: pj;
}
.pj-list > li::before {
  content: counter(pj, decimal-leading-zero);
  font-size: 0.78rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
  padding-top: 0.3rem;
}
.pj-list h3 { font-family: var(--font-head); font-weight: 600; font-size: 1.12rem; line-height: 1.3; color: var(--text) }
.pj-list p { font-size: 1rem; line-height: 1.6; color: var(--text-body) }
.pj-list p + p { margin-top: 0.5rem }

/* ── Dunkles Kapitel: der Ablauf in Schritten ──────────────────────────── */

.pj-panel { background: var(--panel); color: var(--panel-text) }
.pj-panel .section-eyebrow { color: var(--panel-muted) }
.pj-panel .section-h { color: var(--panel-text) }
.pj-panel .section-head p { color: var(--panel-body) }
.pj-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--panel-line);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-sm);
  list-style: none;
}
.pj-steps li { background: var(--panel); padding: 1.4rem 1.2rem 1.5rem }
.pj-step-zeit {
  display: block;
  font-family: var(--font-head);
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--panel-text);
  font-variant-numeric: tabular-nums;
}
.pj-steps h3 { font-size: 0.95rem; font-weight: 600; color: var(--panel-text); margin: 0.7rem 0 0.35rem }
.pj-steps p { font-size: 0.98rem; line-height: 1.55; color: var(--panel-body) }
.pj-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-4, 1.5rem);
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  border-top: 1px solid var(--panel-line);
  padding-top: 1.2rem;
}
.pj-facts dt { font-size: 0.875rem; letter-spacing: 0.01em; color: var(--panel-muted); margin-bottom: 0.35rem }
.pj-facts dd { margin: 0; font-size: 0.98rem; line-height: 1.55; color: var(--panel-body) }
.pj-verbindlich {
  margin-top: 1.4rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent-on-ink);
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--panel-body);
  max-width: 70ch;
}

/* ── Fragen: offen, nicht zugeklappt ───────────────────────────────────── */

.pj-faq {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  border-top: 2px solid var(--line-strong);
}
.pj-faq > div { padding: 1.15rem 0; border-bottom: 1px solid var(--line) }
.pj-faq dt { font-family: var(--font-head); font-weight: 600; font-size: 1rem; color: var(--text); margin-bottom: 0.35rem }
.pj-faq dd { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text-body) }
.pj-faq a, .pj-text a, .pj-list a {
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid var(--accent-line);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.pj-faq a:hover, .pj-text a:hover, .pj-list a:hover { color: var(--accent-ink); border-bottom-color: var(--accent) }

/* ── Laden ─────────────────────────────────────────────────────────────── */

.pj-laden {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}
.pj-stores { display: flex; gap: 1.6rem }
.pj-store {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
}
.pj-store img {
  width: 6.5rem;
  height: 6.5rem;
  background: #fff;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) var(--ease);
}
.pj-store span { font-size: 0.86rem; font-weight: 600; display: inline-flex; gap: 0.35rem; align-items: baseline }
.pj-store .arrow { transition: transform var(--t-base) var(--ease) }
.pj-store:hover img, .pj-store:focus-visible img { border-color: var(--line-strong) }
.pj-store:hover .arrow, .pj-store:focus-visible .arrow { transform: translate(2px, -2px) }

/* ── Mittlere und kleine Breiten ───────────────────────────────────────── */

@media (max-width: 1140px) {
  .pj-shots { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}
@media (max-width: 960px) {
  .pj-hero-inner { grid-template-columns: minmax(0, 1fr) }
  .pj-hero-copy { padding-bottom: 0 }
  .pj-phones { height: 22rem; margin-top: 0.5rem }
  .pj-phone.vorne { right: auto; left: 50%; transform: translateX(-72%) }
  .pj-phone.hinten { right: auto; left: 50%; transform: translateX(8%) }
  .pj-cols { grid-template-columns: minmax(0, 1fr) }
  .pj-verbs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 1.4rem }
  .pj-steps { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pj-facts { grid-template-columns: minmax(0, 1fr) }
  .pj-faq { grid-template-columns: minmax(0, 1fr) }
  .pj-list > li { grid-template-columns: 2.2rem minmax(0, 1fr) }
  .pj-list > li > p, .pj-list > li > div { grid-column: 2 }
  .pj-laden { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .pj-hero h1 { max-width: none }
  .pj-hero-btns .btn { flex: 1 1 100%; justify-content: center; font-size: 0.95rem }
  .pj-phones { height: 19rem }
  .pj-phone { width: 11rem; border-radius: 1.6rem; padding: 0.4rem; bottom: -2.6rem }
  .pj-phone img { border-radius: 1.25rem }
  .pj-phone.hinten { width: 9.6rem; bottom: -1rem }
  .pj-shots { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .pj-verbs { grid-template-columns: minmax(0, 1fr) }
  .pj-steps { grid-template-columns: minmax(0, 1fr) }
  .pj-sub-name { display: none }
  .pj-sub .btn { display: none }
  .pj-stores { gap: 1rem }
}

@media (prefers-reduced-motion: reduce) {
  .pj-lupe[open] { animation: none }
  .pj-shot-frame { transition: none }
}