/* ============================================================
   HIRE ME — design system
   One accent (violet) used systematically: accent word in every
   heading, primary CTA, active borders, links — and nowhere else.
   Status-scale colors (Blau→Rot) live ONLY in the status bar +
   its FAQ legend; they are data, not decoration.
   One card grammar: same radius, same border, same surface.
   Dark theme default (poster traffic scans at night).
   ============================================================ */

:root {
  /* mint — the site's single theme (owner-picked 2026-07-05, locked as the
     only theme 2026-07-13). role-model dark mode: neutral near-black canvas,
     charcoal cards behind a green-cast hairline, mint spring-green accent,
     cool grey metadata. owner-sampled values, all AA-clean. */
  --bg: #0c0d0e;
  --surface: #131516;
  --surface-2: #191c1e;
  --border: #1f3a2e;        /* the reference's signature green-cast hairline */
  --text: #f5f7f8;          /* ~16:1 on bg */
  --muted: #9aa3ad;         /* AA for normal text on bg */
  --accent: #2ad57f;        /* mint spring-green */
  --accent-ink: #05130c;    /* text on accent surfaces */
  /* status scale — used only by the status bar + legend */
  --st-blau: #4c8dff;
  --st-gruen: #14b8a6;      /* teal so accent green ≠ status-Grün */
  --st-gelb: #e8b410;
  --st-orange: #f07f2d;
  --st-rot: #e5484d;
  --radius: 14px;
  --topbar-h: 0px; /* pinned bar removed 2026-07-05 — token kept for scroll-margin/padding math */
  /* font tokens — system stack everywhere (mint ships no webfonts) */
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.55;
}

/* display voice: headings + the two topbar display elements
   (main h3, not bare h3 — keeps hands off the isolated story overlay) */
h1, .h2, main h3, .cd-val, .status-pct { font-family: var(--font-display); }

/* pinned status bar needs anchor offset */
section, footer { scroll-margin-top: calc(var(--topbar-h) + 8px); }

img, svg { max-width: 100%; }

a { color: var(--accent); }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-ink);
  padding: .5rem 1rem;
  z-index: 100;
}
.skip-link:focus { left: 8px; top: calc(var(--topbar-h) + 8px); }

/* ---------- utility row (language switch) ---------- */
/* the old pinned topbar is gone (owner, 2026-07-05) — the language
   switch sits in a plain utility row, status lives in #status */
.util-row {
  display: flex;
  justify-content: flex-end;
  padding-top: .25rem;
}

/* odometer roll — each digit is a clipped 1-row window; on change a
   2-row column (new over old) starts shifted up one row and glides
   down, so the new glyph enters from above */
.cd-digit,
.cd-colon {
  display: inline-block;
  height: 1.15em;
  line-height: 1.15;
}
.cd-digit {
  overflow: hidden;
}
.cd-flow {
  display: flex;
  flex-direction: column;
  transform: translateY(-1.15em);  /* start: old row in the window */
  transition: transform .45s cubic-bezier(.16, 1, .3, 1); /* expo-out: fast start, feather-soft landing */
  will-change: transform;
}
.cd-flow > span {
  display: block;
  height: 1.15em;
  transition: opacity .45s ease;
}
.cd-flow > span:first-child { opacity: 0; }   /* new glyph fades in while rolling in */
.cd-flow.go {
  transform: translateY(0);        /* slide down: new row takes over */
}
.cd-flow.go > span:first-child { opacity: 1; }
.cd-flow.go > span:last-child  { opacity: 0; } /* old glyph fades out on exit */

.lang-btn {
  min-width: 44px;
  min-height: 36px;
  padding: .3rem .55rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.lang-btn:active { border-color: var(--accent); }

/* ---------- layout ---------- */
main {
  max-width: 44rem;
  margin: 0 auto;
  padding: calc(var(--topbar-h) + 1rem) 1rem 0;
}

section { padding: 2.25rem 0; }

/* two-tone heading motif — identical in every section */
.h2 {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0 0 .35rem;
}
.accent { color: var(--accent); }

.h2-sub {
  color: var(--muted);
  font-size: .95rem;
  margin: 0 0 1.25rem;
}

/* ---------- the one card grammar ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.card--highlight { border-color: var(--border); } /* owner 2026-07-12: LinkedIn glueht nicht mehr im Ruhezustand, Akzent erst on hover wie jede Karte */

/* role-model pattern: every card lifts to the accent highlight on hover.
   Hover-only — touch (≈100% of traffic) keeps flat cards, so nothing lights
   up under a thumb; the countdown keeps its permanent glow there too. */
@media (hover: hover) {
  .card:hover,
  .card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
    box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
  }
}

/* ---------- hero ---------- */
.hero { padding-top: 0; } /* follows #status — the section rule provides the gap */

.badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 600;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: .25rem .7rem;
  margin: 0 0 1rem;
}

.hero h1 {
  font-size: clamp(1.9rem, 7.5vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
  font-weight: 800;
}

.lede {
  color: var(--muted);
  font-size: 1.05rem;
  margin: 0 0 1.5rem;
  white-space: pre-line;
}

.cta-row {
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;                 /* thumb target */
  padding: .8rem 1.4rem;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: .02em;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.btn-ghost {
  border: 1px solid var(--border);
  color: var(--text);
  background: var(--surface);
}

.hero-tag {
  margin: 1.4rem 0 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- status section: timeline + countdown, one section two areas ---------- */
#status { padding-top: .5rem; } /* opens the page — cards sit right at the top */

.st-grid { display: grid; gap: .6rem; }
@media (min-width: 640px) {
  .st-grid { grid-template-columns: 1.4fr 1fr; }
}

.st-eyebrow {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .55rem;
}

.st-segs { display: grid; gap: 4px; margin: .4rem 0 .5rem; }
.st-seg { height: 10px; border-radius: 5px; background: var(--surface-2); }

.st-legend { display: flex; flex-wrap: wrap; gap: .3rem .85rem; }
.st-phase {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}
.st-phase.future { opacity: .45; }
.st-dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.st-next {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: .9rem 0 0;
}
.st-next-label { font-size: .72rem; color: var(--muted); }
.st-chip {
  font-size: .72rem;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: .18rem .6rem;
  opacity: .7;
}

/* countdown area: the one card allowed to glow */
.st-cd {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-decoration: none;
  color: inherit;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* the countdown's permanent glow is only for touch — on hover-capable
   devices it starts neutral and rises with every other card on hover
   (global .card:hover rule in the card grammar above). */
@media (hover: hover) {
  .st-cd {
    border-color: var(--border);
    box-shadow: none;
  }
}
.st-cd-val {
  display: inline-flex;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.15;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.st-cd-sub { font-size: .78rem; color: var(--muted); margin: .3rem 0 0; white-space: pre-line; }

/* ---------- at-a-glance ---------- */
/* sprite left, heading right — the runner looks across at his own pitch */
.glance-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.glance-sprite {
  width: auto;
  height: 104px;  /* owner 2026-07-12: all head figures share the Projekte size */
  flex: none;
}
.glance-head-text { text-align: right; }
.glance-head .h2-sub { margin-bottom: 0; }

.glance-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
}
.glance-grid .card { display: flex; flex-direction: column; gap: .4rem; }
/* odd card count: the last card takes the full row instead of dangling half-width */
.glance-grid .card:last-child:nth-child(odd) { grid-column: 1 / -1; }

.icon-tile {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  /* deep-green tile: 20% mix lands on the sampled reference #123b2a */
  background: color-mix(in srgb, var(--accent) 20%, transparent);
  color: var(--accent);
}
.glance-grid h3 { margin: 0; font-size: .95rem; font-weight: 800; }
.glance-grid p { margin: 0; font-size: .82rem; color: var(--muted); }

/* ---------- projects ---------- */
/* mirror of .glance-head: heading left, sitting sprite right */
.proj-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.proj-sprite {
  width: auto;
  height: 104px;
  flex: none;
}
.proj-head-text { text-align: left; }
.proj-head .h2-sub { margin-bottom: 0; }

/* twin of .glance-head for the contact strip: cafe scene left, GET IN TOUCH right */
.contact-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.25rem;
}
.contact-sprite {
  width: auto;
  height: 138px;  /* owner 2026-07-13: +15% (120->138), einen Schnaps nach rechts */
  flex: none;
  margin-left: 1.5rem;  /* owner 2026-07-13: leicht nach rechts gerueckt */
}
.contact-head-text { text-align: right; }
.contact-head .h2-sub { margin-bottom: 0; }

/* ---------- app video (owner 2026-07-14) ----------
   Zeiterfassungs-App im Video + 6 Highlight-Karten. Der Play-Button (#vidPlay)
   deckt den ganzen Screen ab: Klick irgendwo = Play/Pause, das Badge in der
   Mitte ist nur die Optik (beim Abspielen unsichtbar, on hover/focus als
   Pause-Glyph zurueck). Kein Ruhe-Glow (owner-Regel 2026-07-12).
   v3 (owner 2026-07-14): der Block lebt HINTER der SALUKI-Karte — #vidBlock
   parkt in #vidHome[hidden] und wird von js/projects.js in die Medien-Zone
   des Saluki-Fensters gehoben (.pj-vidslot). */
.pj-vid { margin-bottom: .2rem; }
.pj-vid .pj-themes-h { margin: 0 0 .35rem; }
.pj-vid .vid-wsub { color: var(--muted); font-size: .82rem; margin: 0 0 .8rem; }
.vid-frame {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #000;
}
.vid-frame video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1036; /* Platz steht vor dem Lazy-Load fest — kein Layout-Shift */
}
.vid-play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vid-badge {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--accent);
  color: #0c0d0e;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .2s ease, transform .2s ease;
}
.vid-badge .vid-ic-play { margin-left: 3px; } /* Dreieck optisch zentrieren */
.vid-badge .vid-ic-pause { display: none; }
.vid-frame.is-playing .vid-badge { opacity: 0; }
.vid-frame.is-playing .vid-badge .vid-ic-play { display: none; }
.vid-frame.is-playing .vid-badge .vid-ic-pause { display: block; }
@media (hover: hover) {
  .vid-frame.is-playing .vid-play:hover .vid-badge { opacity: .85; }
  .vid-play:hover .vid-badge { transform: scale(1.06); }
}
.vid-frame.is-playing .vid-play:focus-visible .vid-badge { opacity: .85; }
@media (prefers-reduced-motion: reduce) {
  .vid-badge { transition: none; }
  .vid-play:hover .vid-badge { transform: none; }
  .vid-bar, .vid-chap { transition: none; }
}
/* Kontrollleiste (owner 2026-07-14): Spulen + Zeit + Tempo + Vollbild.
   Sichtbar wenn pausiert; beim Abspielen NUR, wenn der Cursor direkt ueber
   dem Screen ist (hover) oder ein Control Tastatur-Fokus hat. */
.vid-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
  transition: opacity .18s ease;
}
.vid-frame.is-playing .vid-bar { opacity: 0; pointer-events: none; }
@media (hover: hover) {
  .vid-frame.is-playing:hover .vid-bar { opacity: 1; pointer-events: auto; }
}
.vid-frame.is-playing .vid-bar:focus-within { opacity: 1; pointer-events: auto; }
.vid-track {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
}
.vid-seek {
  width: 100%;
  height: 44px; /* volle Trefferflaeche, Track bleibt schmal */
  margin: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
.vid-seek::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: var(--vid-fill, rgba(255, 255, 255, .28));
}
.vid-seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
  margin-top: -4.5px;
}
.vid-seek::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: var(--vid-fill, rgba(255, 255, 255, .28));
}
.vid-seek::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--accent);
  border: 0;
}
/* Kapitel-Ticks auf dem Track; ★ = Wechsel in die Mitarbeiter-Welt */
.vid-mark {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 9px;
  transform: translate(-50%, -50%);
  border-radius: 1px;
  background: rgba(255, 255, 255, .75);
  pointer-events: none;
}
.vid-mark--star {
  width: auto;
  height: auto;
  background: none;
  color: var(--accent);
  font-size: 12px;
  line-height: 1;
  transform: translate(-50%, -55%);
  text-shadow: 0 0 4px rgba(0, 0, 0, .85);
}
.vid-time {
  font-size: .72rem;
  color: #fff;
  opacity: .85;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vid-rate {
  min-width: 44px;
  height: 44px;
  padding: 0 .5rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(12, 13, 14, .62);
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  cursor: pointer;
}
.vid-fs {
  flex: none;
  width: 44px;  /* thumb-reach Minimum */
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: rgba(12, 13, 14, .62);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vid-fs .vid-ic-min { display: none; }
.vid-frame.is-fs .vid-ic-max { display: none; }
.vid-frame.is-fs .vid-ic-min { display: block; }
/* Kapitel-Chips unterm Video (JS-gerendert aus VID_CHAPTERS) */
.vid-chaps {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.vid-chap {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  padding: .34rem .6rem;
  font-size: .72rem;
  cursor: pointer;
  transition: border-color .18s ease;
}
@media (hover: hover) {
  .vid-chap:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }
}
.vid-chap.is-on {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  color: inherit;
}
.vid-chap-t {
  color: var(--accent);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.vid-chap-star { color: var(--accent); }
/* im Vollbild fuellt der Frame den Screen, das Video letterboxt sauber */
.vid-frame:fullscreen { border: 0; border-radius: 0; }
.vid-frame:fullscreen video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.vid-frame:-webkit-full-screen { border: 0; border-radius: 0; }
.vid-frame:-webkit-full-screen video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; }
.vid-points {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: .6rem;
}
@media (min-width: 640px) {
  .vid-points { grid-template-columns: repeat(2, 1fr); }
}
.vid-point {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
}
.vid-point .icon-tile { flex: none; }
.vid-point p { margin: 0; font-size: .82rem; color: var(--muted); align-self: center; }

/* ---------- arcade (BREAK YOUR HIGHSCORE) ---------- */
/* owner 2026-07-12: ARCADE + BREAK YOUR HIGHSCORE on one level (BREAK right,
   ARCADE centered over the machine), subtitle under the machine in accent green */
.play-row {
  position: relative;
  margin: 0 0 2.6rem;   /* extra bottom clearance so the dropped HIGHSCORE line clears the machine */
}
/* BREAK YOUR HIGHSCORE stays in flow (right-aligned) and defines the row height.
   owner 2026-07-13: BREAK's TOP edge flush with ARCADE's TOP edge (YOUR + HIGHSCORE
   drop below). ARCADE is centered on the middle line; shifting the heading down one
   full line (1.08em) lines up the CENTERS, but BREAK's line box is taller than
   ARCADE's, so its top still pokes above. Box-top alignment (1.275em) still looked
   off because the GLYPHS sit at different offsets inside their boxes — ARCADE's
   letters ride higher in its smaller box. Measured the true ink-tops (canvas
   actualBoundingBoxAscent + the line's real baseline): BREAK's letters sat 3.53px
   (= 0.127em of the heading) LOWER, so pull the heading back up that much →
   top:1.148em makes the LETTER-tops of BREAK and ARCADE flush (owner's yellow line).
   em = own font-size, so it holds at any breakpoint; position:relative keeps the
   reserved height put, so ARCADE (top:50%) and the machine below don't move. */
.play-head { text-align: right; margin: 0; line-height: 1.08; position: relative; top: 1.148em; }
/* ARCADE floats centered — both axes — so it fluchts with the machine below
   and sits at the same vertical level as the three-line heading */
.play-arcade {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  font-size: 1.3rem;
  line-height: 1;      /* hug the ink so ARCADE stays inside the short middle line band */
  font-weight: 800;
  letter-spacing: .3em;
  text-indent: .3em;  /* letter-spacing trails each glyph — indent recenters */
  white-space: nowrap;
}
.arcade-btn {
  display: block;
  margin: 0 auto;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  /* transparent resting shadow: filter none -> drop-shadow can't interpolate
     and the glow snaps ("bricht") on hover; from transparent it fades cleanly */
  filter: drop-shadow(0 6px 18px transparent);
  transition: filter .15s ease;
}
/* subtitle under the machine, in the HIGHSCORE green */
.play-sub {
  text-align: center;
  color: var(--accent);
  margin: 1.25rem 0 0;
}
/* true pixel art at exact integer steps — pixelated keeps every edge hard
   (174 = 3x the 58px logical grid; owner asked +40%, 162 would wobble) */
.arcade-btn img {
  display: block;
  width: 174px;
  height: auto;
  image-rendering: pixelated;
  transition: transform .15s ease;
}
/* lift only the IMAGE — if the button itself moved, the hover hit area would
   shift away from the cursor at the bottom edge and the glow would flicker.
   glow ONLY while hovering (owner 2026-07-12): real hover devices only,
   so a phone tap can't leave a stuck glow behind */
@media (hover: hover) {
  .arcade-btn:hover img { transform: translateY(-3px); }
  .arcade-btn:hover {
    filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent));
  }
}
.arcade-btn:focus-visible img { transform: translateY(-3px); }
.arcade-btn:focus-visible {
  filter: drop-shadow(0 6px 18px color-mix(in srgb, var(--accent) 45%, transparent));
}
@media (prefers-reduced-motion: reduce) {
  .arcade-btn, .arcade-btn img { transition: none; }
  .arcade-btn:hover img, .arcade-btn:focus-visible img { transform: none; }
}

.proj-stack {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* fixed internal grammar:
   status → metadata row → title → one-liner → action link */
.proj-status {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: .55rem;
}
.proj-status .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.meta {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .9rem;
  margin: 0 0 .55rem;
  padding: 0;
  font-size: .78rem;
  color: var(--muted);
}
.meta li { display: flex; align-items: center; gap: .3rem; }
.meta svg { flex: none; }

.proj h3 { margin: 0 0 .3rem; font-size: 1.1rem; font-weight: 800; color: var(--accent); }
.proj .one { margin: 0 0 .7rem; font-size: .9rem; color: var(--muted); }

.action {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--accent);
}

/* ---------- chips ---------- */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.chip {
  min-height: 44px;                 /* thumb target */
  padding: .55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
}
.chip:active, .chip[aria-expanded="true"] { border-color: var(--accent); }

/* ---------- FAQ ---------- */
.faq details {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: .6rem;
}
.faq details[open] { border-color: var(--accent); }

.faq summary {
  list-style: none;
  cursor: pointer;
  padding: .9rem 1rem;
  min-height: 48px;
  font-weight: 700;
  font-size: .95rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 800;
  flex: none;
}
.faq details[open] summary::after { content: "–"; }

.faq .answer {
  padding: 0 1rem .95rem;
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
}

/* status-criteria legend inside FAQ */
.scale-legend {
  list-style: none;
  padding: 0;
  margin: .6rem 1rem .95rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  font-size: .88rem;
  color: var(--muted);
}
.scale-legend .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: .5rem;
  vertical-align: baseline;
}
.dot-blau { background: var(--st-blau); }
.dot-gruen { background: var(--st-gruen); }
.dot-gelb { background: var(--st-gelb); }
.dot-orange { background: var(--st-orange); }
.dot-rot { background: var(--st-rot); }

/* ---------- contact ---------- */
.contact-stack { display: flex; flex-direction: column; gap: .75rem; }

.contact-link {
  display: flex;
  align-items: center;
  gap: .8rem;
  min-height: 56px;                 /* thumb target */
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
}
.contact-link small {
  display: block;
  font-weight: 400;
  color: var(--muted);
}

button.contact-link {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  font-size: 1rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.soon {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 6px;
  padding: .1rem .45rem;
  margin-left: .4rem;
}

/* ---------- collapsible contact cards — all four collapse to a head row
   (owner 2026-07-11). CV keeps its cv-* names; the other three cards use
   the tg-* twins, same rules. ---------- */
.cv-card, .tg-card { padding: 0; }  /* the header row carries the padding */
button.cv-head,
button.tg-head {                    /* looks like a plain contact row … */
  width: 100%;
  background: transparent;          /* … but the card behind provides the surface */
  border: none;
  border-radius: var(--radius);
  padding: 1rem;
  font-size: 1rem;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.cv-caret, .tg-caret {
  margin-left: auto;
  flex: none;
  display: flex;
  color: var(--muted);
  transition: transform .18s ease;
}
.cv-head[aria-expanded="true"] .cv-caret,
.tg-head[aria-expanded="true"] .tg-caret { transform: rotate(180deg); }
/* open card lifts to the accent border, FAQ grammar */
.cv-card:has(> [aria-expanded="true"]),
.tg-card:has(> [aria-expanded="true"]) { border-color: var(--accent); }
#cvBody, .tg-body { padding: 0 1rem 1rem; }
.cv-field { display: block; margin: 0 0 .65rem; }
.cv-field > span {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: .25rem;
}
.cv-field textarea,
.cv-field input {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;                  /* ≥16px — no iOS focus zoom */
  line-height: 1.4;
  color: var(--text);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: .5rem .6rem;
}
.cv-field textarea { resize: vertical; min-height: 2.8em; }
.cv-field textarea:focus-visible,
.cv-field input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
/* honeypot: kept out of sight AND out of the tab order (bots still see it) */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cv-hint { margin: 0 0 .65rem; font-size: .78rem; color: var(--muted); }
.cv-btn {
  width: 100%;
  min-height: 44px;                 /* thumb target */
  border: none;
  font-family: inherit;
  cursor: pointer;
}
a.cv-btn { display: block; text-align: center; }
.cv-btn:disabled { opacity: .5; cursor: default; }
.cv-thanks { margin-top: .6rem; }
/* admin.html section headings (CSP forbids inline styles) */
.adm-sec { margin: 2.25rem 0 .35rem; }
.adm-back { margin: 0 0 1rem; font-size: .9rem; }
.adm-back a { color: var(--accent); text-decoration: none; }
.adm-back a:hover { text-decoration: underline; }

/* honest send-failure line (mirrors booking's .book-err: bold, no red) */
.cv-status { margin: .6rem 0 0; font-size: .85rem; font-weight: 700; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--border);
  margin-top: 2rem;
  padding: 1.5rem 1rem 2.5rem;
  text-align: center;
  color: var(--muted);
  font-size: .82rem;
}
footer nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  margin-bottom: .6rem;
}
footer nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- legal pages ---------- */
.legal-page main { padding-top: 1.5rem; }
.legal-page h1 { font-size: 1.5rem; }

/* ---------- wider screens (progressive enhancement) ---------- */
@media (min-width: 640px) {
  .cta-row { flex-direction: row; }
  .cta-row .btn { flex: 1; }
  .glance-grid { grid-template-columns: repeat(3, 1fr); }
  .glance-grid .card:last-child:nth-child(odd) { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cd-flow { transition: none; }
}

/* ---------- closing — the site's last words (content/closing.md) ----------
   Build-up in body voice, then the owner-locked display line in the
   two-tone heading grammar: plain ink + one accent word. */
.closing { padding-bottom: 3.5rem; }
.closing p {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
}
.closing .closing-punch { color: var(--text); font-weight: 600; }
.closing .closing-lead {
  margin: 1.9rem 0 .6rem;
  font-size: .95rem;
  font-weight: 600;
  color: var(--text);
}
.closing .closing-final {
  margin: 0;
  font-family: var(--font-display);
  /* 10.5vw: "THIS IS YOUR" stays one line down to 320px-wide phones */
  font-size: clamp(2.1rem, 10.5vw, 3.75rem);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: var(--text);
}
/* deliberate two-line drop at every width: THIS IS YOUR / MAN. */
.closing .closing-l1 { display: block; }

/* email card in its coming state — #mailBtn ships disabled until the
   Hide-My-Email alias lands (contact.md) */
button.contact-link:disabled { cursor: default; opacity: .72; }

/* ============================================================
   Projekte v3: Karten + Projekt-Fenster
   Spec: content/projekte-fenster-spec.md (owner-locked 2026-07-11).
   Karten bleiben in der einen Karten-Grammatik (.card); Status =
   flacher Punkt + Text (.proj-status + is-*-Modifier, keine
   gedrehten Stempel); Label = Body-Font-Versalien mit
   letter-spacing — KEIN Monospace. Farben nur über Tokens.
   ============================================================ */
/* Warn-Gelb für IN ENTWICKLUNG/IN ARBEIT — als Token, nicht hart.
   Seit 2026-07-14 trägt die ¥ield-Karte den is-warn-Punkt (owner:
   gelber Punkt für in development). */
:root { --proj-warn: #e8c56a; }

/* status modifiers: dot + text share currentColor, soft glow like the
   approved prototype; base .proj-status grammar lives above */
.proj-status.is-live  { color: var(--accent); }
.proj-status.is-muted { color: var(--muted); }
.proj-status.is-warn  { color: var(--proj-warn); }
.proj-status.is-live .dot,
.proj-status.is-muted .dot,
.proj-status.is-warn .dot {
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
}

/* ---------- the cards (1–5 = <button>, 6 = <article> with link) ---------- */
button.pj-card,
a.pj-card {
  width: 100%;
  display: block;
  font-family: inherit;
  font-size: 1rem;
  line-height: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
a.pj-card { text-decoration: none; }
.pj-card .proj-status { margin: 0 0 .5rem; }
/* Flaggschiff (owner 2026-07-12): kein Ruhe-Glow mehr, Akzent erst on hover wie jede Karte */
.pj-flag { border-color: var(--border); }
.pj-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  margin: 0;
  color: var(--accent);
}
.pj-sub {
  display: block;
  font-size: .82rem;
  color: var(--muted);
  margin: .15rem 0 0;
}
/* AI-Factory-Kartenbullets mit Piktogrammen (owner 2026-07-14) */
.pj-bullets {
  list-style: none;
  margin: .5rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.pj-bullets li {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--muted);
}
.pj-bullets svg {
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: .12rem;
  color: var(--accent);
}
/* "ANTIPPEN → PROJEKT-FENSTER" / QWB-Link-Platzhalter */
.pj-open {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: .6rem 0 0;
}

/* flagship vignette preview — decorative skeleton (aria-hidden) */
.pj-shot {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface-2);
  padding: .55rem;
  margin-top: .6rem;
}
.pj-chrome { display: flex; gap: .28rem; margin-bottom: .15rem; }
.pj-chrome i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
  display: block;
}
.pj-frow {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.pj-frow.pj-dim { opacity: .55; }
.pj-frow.pj-dim .pj-fdot { background: var(--muted); }
.pj-fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; }
.pj-fbar { height: 8px; border-radius: 4px; background: var(--surface-2); flex: 1; }
.pj-fchip {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .1rem .45rem;
  flex: none;
  font-variant-numeric: tabular-nums;
}

/* 2er-Mini-Grid (Karten 4+5) — stacks on narrow phones */
.pj-mini2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 430px) { .pj-mini2 { grid-template-columns: 1fr; } }

/* ---------- das Projekt-Fenster (overlay) ----------
   Bottom-Sheet auf Mobile, zentriertes Modal ab 640px. */
.pj-ovl {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  align-items: flex-end;
  justify-content: center;
}
.pj-ovl[data-open="true"] { display: flex; }
.pj-ovl-card {
  width: 100%;
  max-width: 560px;
  max-height: 94vh;   /* fallback */
  max-height: 94dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -10px 60px rgba(0, 0, 0, .55),
    0 0 40px color-mix(in srgb, var(--accent) 8%, transparent);
}
@media (min-width: 640px) {
  .pj-ovl { align-items: center; padding: 2rem; }
  .pj-ovl-card { border-radius: 18px; max-height: 88vh; max-height: 88dvh; }
}
.pj-ovl-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .7rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: .8rem 1rem .7rem;
}
/* Name + Status gestapelt — lange Status-Zeilen brechen auf 390px nicht aus */
.pj-ovl-headtxt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.pj-ovl-title {
  font-family: var(--font-display);
  font-size: .98rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent);
}
.pj-ovl-head .proj-status { margin: 0; }
.pj-ovl-close {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.pj-ovl-body { padding: 1rem 1rem 1.5rem; }

/* media zone: device frame + skeleton vignette + dummy tab pills */
.pj-media {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  margin-bottom: .6rem;
}
.pj-media .pj-chrome { padding: .5rem .6rem; border-bottom: 1px solid var(--border); margin: 0; }
.pj-view {
  aspect-ratio: 16 / 10;
  background: var(--surface-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem;
}
.pj-view .pj-frow { width: min(100%, 340px); }
.pj-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .45rem .6rem;
  border-top: 1px solid var(--border);
}
.pj-tabs button {
  min-height: 40px;                 /* thumb target */
  padding: .3rem .8rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .08em;
  cursor: pointer;
}
.pj-tabs button[aria-pressed="true"],
.pj-tabs .pj-viewbtn {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}
.pj-tabs button:disabled { opacity: .55; cursor: default; }

.pj-one { color: var(--muted); font-size: .88rem; margin: .8rem 0 1.3rem; }

/* themed <details> toggles — native, keyboard-able, zero JS */
.pj-themes-h {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .6rem;
}
details.pj-theme {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  margin-bottom: .55rem;
  overflow: hidden;
}
details.pj-theme[open] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}
.pj-theme summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;                 /* thumb target */
  padding: .7rem .85rem;
}
.pj-theme summary::-webkit-details-marker { display: none; }
.pj-th-icons { display: flex; gap: .3rem; flex: none; color: var(--text); }
.pj-th-icons svg { width: 18px; height: 18px; display: block; }
.pj-th-title { font-weight: 700; font-size: .88rem; flex: 1; min-width: 0; }
.pj-th-time {
  flex: none;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .15rem .5rem;
  font-variant-numeric: tabular-nums;
}
.pj-th-caret { flex: none; color: var(--muted); font-size: .7rem; transition: transform .18s ease; }
details.pj-theme[open] .pj-th-caret { transform: rotate(90deg); }
.pj-th-body { border-top: 1px solid var(--border); padding: .7rem .85rem .85rem; }
.pj-th-body ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-size: .85rem;
}
.pj-th-body li::marker { color: var(--accent); }

/* Summenzeile: ⟦Kontext⟧ | GESAMT: ⟦x Monate⟧ */
.pj-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px dashed var(--border);
  margin-top: 1rem;
  padding-top: .8rem;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--muted);
}
.pj-total b {
  flex: none;
  color: var(--accent);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Anhang-Zeile: Verkaufspräsentation (PowerPoint) — FOLGT (Platzhalter) */
.pj-attach {
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: .7rem .85rem;
  margin-top: .9rem;
}
.pj-attach-ico { display: flex; flex: none; color: var(--muted); }
.pj-attach-ico svg { width: 18px; height: 18px; display: block; }
.pj-attach-t { font-size: .85rem; color: var(--muted); flex: 1; min-width: 0; }
.pj-attach-pill {
  flex: none;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px dashed var(--border);
  border-radius: 999px;
  padding: .15rem .5rem;
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .pj-th-caret { transition: none; }
}

/* ---------- site banner (owner backend: optionale Ansage, an/aus + Text) ----------
   Erste Zeile im main-Fluss; erbt die Content-Breite. Akzent-Rahmen = Ansage,
   nie schreiend. Sichtbar nur wenn der Owner sie im Backend einschaltet. */
.site-banner {
  margin: .5rem 0 0;
  padding: .6rem 1rem;
  border: 1px solid var(--accent);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-size: .92rem;
  line-height: 1.4;
  text-align: center;
}

/* ---------- Nur-Arcade-Modus: WIP-Hinweis unten rechts (owner backend) ----------
   Sichtbar nur bei features.arcadeOnly (main.js). Unter dem Spiel-Overlay (90),
   ueber dem Seiteninhalt; kein Ruhe-Glow (Owner-Regel 2026-07-12). */
.wip-note {
  position: fixed;
  right: 1rem;
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  z-index: 80;
  max-width: min(20rem, calc(100vw - 2rem));
  padding: .6rem .9rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.4;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

/* ---------- admin: Website verwalten (owner backend) ---------- */
.adm-cfg-h { font-size: .95rem; margin: 1.1rem 0 .4rem; color: var(--text); }
.adm-cfg-toggles { display: flex; flex-wrap: wrap; gap: .5rem .9rem; }
.adm-cfg-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; }
.adm-cfg-banner { display: flex; flex-direction: column; gap: .5rem; }
.adm-cfg-faq { border: 1px solid var(--border); border-radius: 10px; padding: .5rem .7rem; margin: .4rem 0; }
.adm-cfg-faq > summary { cursor: pointer; font-weight: 600; display: flex; align-items: center; gap: .5rem; }
.adm-cfg-faq .cv-field { margin-top: .5rem; }
.adm-cfg-faq.dragging { opacity: .5; }
.adm-cfg-faq .adm-faq-q { flex: 1; min-width: 0; }
.adm-faq-grip { cursor: grab; user-select: none; color: var(--muted); font-size: 1.1rem; line-height: 1; padding: 0 .1rem; flex: none; }
.adm-faq-grip:active { cursor: grabbing; }
.adm-faq-moves { display: inline-flex; gap: .2rem; flex: none; }
.adm-faq-move { border: 1px solid var(--border); background: transparent; color: var(--text); border-radius: 7px; width: 1.9rem; height: 1.9rem; font-size: .85rem; cursor: pointer; line-height: 1; }
.adm-faq-move:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Projekt-Fenster v4: echte Screenshots + Großansicht (2026-07-14) ----------
   Galerie-Kästen im Fenster (Tipp = Großansicht #shotOvl mit "Das siehst du"-
   Bullets); Hero-Screenshot füllt die Medien-Zone im ECHT-SCREENSHOT-Tab.
   Akzent nur bei Hover/Fokus (Owner-Regel 2026-07-12: kein Ruhe-Glow). */
.pj-view.has-shot { padding: 0; }
.pj-hero {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.pj-hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.pj-hero:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.pj-shots-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin: 0 0 .6rem;
}
.pj-shots-head .pj-themes-h { margin: 0; }
.pj-shots-n { color: var(--accent); }
.pj-shots-hint {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.pj-shots {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
  margin: 0 0 1.35rem;
}
@media (min-width: 560px) { .pj-shots { grid-template-columns: repeat(3, 1fr); } }
.pj-shotbtn {
  display: flex;
  flex-direction: column;
  padding: 0;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  overflow: hidden;
  cursor: zoom-in;
  color: inherit;
  font: inherit;
}
.pj-shotbtn:hover,
.pj-shotbtn:focus-visible { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.pj-shotbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pj-shotimg {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
  display: block;
  background: var(--surface-2);
}
.pj-shotcap {
  display: flex;
  gap: .45rem;
  align-items: baseline;
  padding: .5rem .6rem .55rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted);
}
.pj-shotnum { flex: none; color: var(--accent); font-variant-numeric: tabular-nums; }

/* Großansicht — liegt über dem Projekt-Fenster (z 50) */
.shot-ovl {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: .7rem;
}
.shot-ovl[data-open="true"] { display: flex; }
.shot-card {
  width: 100%;
  max-width: 1060px;
  max-height: 96vh;   /* fallback */
  max-height: 96dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 60px rgba(0, 0, 0, .55),
    0 0 40px color-mix(in srgb, var(--accent) 8%, transparent);
}
.shot-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem .8rem;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.shot-title {
  flex: 1;
  min-width: 0;
  font-family: var(--font-display);
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--accent);
}
.shot-count {
  flex: none;
  font-size: .7rem;
  letter-spacing: .08em;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.shot-close {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
}
.shot-stage {
  position: relative;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}
.shot-stage img {
  display: block;
  max-width: 100%;
  max-height: 58vh;   /* fallback */
  max-height: 58dvh;
  width: auto;
  height: auto;
}
.shot-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.shot-nav:hover, .shot-nav:focus-visible { border-color: var(--accent); color: var(--accent); }
.shot-prev { left: .45rem; }
.shot-next { right: .45rem; }
.shot-facts { padding: .85rem .9rem 1.05rem; border-top: 1px solid var(--border); }
.shot-facts-h {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 .55rem;
}
.shot-facts ul {
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
  font-size: .85rem;
}
.shot-facts li::marker { color: var(--accent); }
@media (min-width: 900px) {
  .shot-main { display: flex; align-items: stretch; }
  .shot-stage { flex: 1.55; min-width: 0; }
  .shot-stage img { max-height: 76vh; max-height: 76dvh; }
  .shot-facts {
    flex: 1;
    min-width: 260px;
    max-width: 360px;
    border-top: 0;
    border-left: 1px solid var(--border);
  }
}