/* lightview – nur Projekte */

/* ---------- Seitenkopf mit Lichtstrahlen ---------- */
.page { position: relative; isolation: isolate; }
.page::before { /* dekorative Lichtkegel oben rechts */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; right: 0; width: min(70vw, 60rem); height: 46rem;
  background:
    conic-gradient(from 200deg at 62% -8%, transparent 0deg, rgb(120 150 255 / .22) 6deg, transparent 12deg,
      transparent 20deg, rgb(150 120 255 / .14) 25deg, transparent 31deg, transparent 40deg, rgb(110 140 255 / .12) 44deg, transparent 50deg),
    radial-gradient(ellipse 60% 55% at 60% 0%, rgb(60 70 190 / .35), transparent 70%);
  filter: blur(2px);
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 62% 0%, #000 35%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 90% at 62% 0%, #000 35%, transparent 75%);
}

.page-intro {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: 2rem 4rem;
  padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad-x) clamp(2.5rem, 4vw, 3.5rem);
}
.page-intro h1 {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(2.5rem, 1.5rem + 3.3vw, 4.4rem); line-height: 1.06; letter-spacing: -.01em;
}
.page-lead { margin: 0 0 .6rem; max-width: 34ch; justify-self: end; color: var(--text-soft); font-size: .98rem; line-height: 1.65; }

/* ---------- Filter ---------- */
.projects { padding: 0 var(--pad-x) clamp(5rem, 9vw, 7rem); }
.filter {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-bottom: 1.5rem; border-bottom: 1px solid rgb(244 242 248 / .12);
}
.filter-buttons { display: flex; flex-wrap: wrap; gap: 0 2.25rem; }
.filter button {
  position: relative; background: none; border: 0; cursor: pointer;
  padding: 1rem 0 1.1rem; font: 500 .9rem var(--sans); color: var(--text-dim);
  transition: color .25s;
}
.filter button::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.filter button:hover { color: var(--text-soft); }
.filter button[aria-pressed="true"] { color: var(--text); }
.filter button[aria-pressed="true"]::after { transform: scaleX(1); }
.filter button[hidden] { display: none; }
.filter-count {
  margin: 0 0 .4rem; padding: .35rem .9rem; border: 1px solid rgb(244 242 248 / .2); border-radius: 999px;
  font-size: .75rem; color: var(--text-soft); font-variant-numeric: tabular-nums;
}

/* ---------- Raster ----------
   6 Spalten: groß = 6, halb = 3, normal = 2 (Klassen setzt projekte.js) */
.project-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(.6rem, 1vw, 1rem);
}
.card {
  position: relative; overflow: hidden; grid-column: span 2; aspect-ratio: 4 / 3;
  background: var(--glow), #0e0e12;
  --glow: radial-gradient(ellipse 60% 80% at 50% 15%, rgb(60 100 220 / .55), transparent 70%);
}
.card.is-wide { grid-column: span 3; aspect-ratio: 16 / 9; }
.card.is-featured { grid-column: 1 / -1; aspect-ratio: auto; min-height: clamp(22rem, 38vw, 32rem); }
.card[hidden] { display: none; }
.card[data-category="theater"]     { --glow: radial-gradient(ellipse 70% 80% at 55% 10%, rgb(120 70 230 / .55), transparent 70%); }
.card[data-category="event"]       { --glow: radial-gradient(ellipse 60% 80% at 45% 40%, rgb(210 30 30 / .6), transparent 70%); }
.card[data-category="architektur"] { --glow: radial-gradient(ellipse 70% 70% at 40% 45%, rgb(220 150 70 / .5), transparent 70%); }

.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease), opacity .5s; }
.card img.is-missing { opacity: 0; }
.card::after { /* Lesbarkeit unten */
  content: ""; position: absolute; inset: 35% -1px -1px; pointer-events: none;
  background: linear-gradient(transparent, rgb(0 0 0 / .8));
}
.card.is-featured::after { inset: 0 -1px -1px; background: linear-gradient(90deg, rgb(0 0 0 / .65), transparent 55%), linear-gradient(transparent 60%, rgb(0 0 0 / .5)); }
.card:hover img { transform: scale(1.03); }
.card-link { position: absolute; inset: 0; z-index: 2; }
.card-link:focus-visible { outline: 2px solid #9fb8ff; outline-offset: -4px; }

.card-num {
  position: absolute; z-index: 1; top: 1.25rem; left: 1.4rem; margin: 0;
  display: flex; align-items: center; gap: .9rem;
  font-size: .72rem; letter-spacing: .1em; color: var(--text); font-variant-numeric: tabular-nums;
}
.card-line { width: 2.5rem; height: 1px; background: rgb(244 242 248 / .4); }
.card-total { color: var(--text-dim); }
.card-body { position: absolute; z-index: 1; left: 1.4rem; right: 4rem; bottom: 1.3rem; }
.card-cat { margin: 0 0 .45rem; font-size: .62rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--text-soft); }
.card-title { margin: 0; font-family: var(--serif); font-weight: 300; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); line-height: 1.12; }
.card-meta { margin: .45rem 0 0; font-size: .78rem; color: var(--text-soft); }
.card-arrow { position: absolute; z-index: 1; right: 1.3rem; bottom: 1.3rem; color: var(--text); transition: transform .35s var(--ease); }
.card:hover .card-arrow { transform: translateX(4px); }

/* großes erstes Projekt */
.card.is-featured .card-num { top: 2rem; left: 2.25rem; }
.card.is-featured .card-body { left: 2.25rem; top: 5.5rem; bottom: auto; max-width: 22rem; }
.card.is-featured .card-title { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem); line-height: 1.08; }
.card.is-featured .card-meta { margin-top: 1rem; font-size: .88rem; }
.card.is-featured .card-arrow { right: 2.25rem; bottom: auto; top: 50%; }

/* ---------- Zitat ---------- */
.quote {
  grid-column: 1 / -1; display: grid; grid-template-columns: 1.45fr 1fr; align-items: center;
  min-height: clamp(18rem, 26vw, 22rem); background: #0e0e12; overflow: hidden;
}
.quote[hidden] { display: none; }
.quote-media { position: relative; align-self: stretch; background: radial-gradient(ellipse 50% 90% at 60% 10%, rgb(230 225 215 / .28), transparent 70%), #121216; }
.quote-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quote-media img.is-missing { opacity: 0; }
.quote-text { margin: 0; padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem); }
.quote blockquote {
  margin: 0; font-family: var(--serif); font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.15rem); line-height: 1.25;
}
.quote figcaption {
  display: flex; align-items: center; gap: 1rem; margin-top: 1.75rem;
  font-size: .66rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--text-dim);
}
.quote figcaption::before { content: ""; width: 2.5rem; height: 1px; background: rgb(244 242 248 / .35); }

.filter-num { margin-left: .45rem; font-size: .72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.filter button[aria-pressed="true"] .filter-num { color: var(--text-soft); }
.more { display: grid; justify-items: center; gap: 1.25rem; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.more-status { margin: 0; font-size: .85rem; color: var(--text-dim); }
.more-btn[hidden] { display: none; }
.card:focus { outline: 2px solid #9fb8ff; outline-offset: 3px; }

.filter-empty {
  display: grid; justify-items: start; gap: 2rem;
  padding: clamp(3rem, 7vw, 5rem) 0; color: var(--text-soft);
  font-family: var(--serif); font-weight: 300; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); line-height: 1.25;
}
.filter-empty[hidden] { display: none; }
.filter-empty p { margin: 0; max-width: 24ch; }

/* ---------- Responsive ---------- */
@media (max-width: 64rem) {
  .page-intro { grid-template-columns: 1fr; }
  .page-lead { justify-self: start; }
  .card, .card.is-wide { grid-column: span 3; aspect-ratio: 4 / 3; }
}
@media (max-width: 40rem) {
  .page-intro { padding-top: 2.75rem; padding-bottom: 2rem; gap: 1.25rem; }
  .page-intro h1 { font-size: clamp(2.3rem, 10vw, 2.9rem); }
  .page-intro h1 br { display: none; }
  .page-lead { font-size: .95rem; }

  /* Filter: eine Zeile, seitlich wischbar */
  .filter { margin-inline: calc(var(--pad-x) * -1); padding-inline: var(--pad-x); margin-bottom: 1rem; flex-wrap: nowrap; }
  .filter-buttons { flex-wrap: nowrap; gap: 0 1.5rem; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 2rem; }
  .filter-buttons::-webkit-scrollbar { display: none; }
  .filter button { white-space: nowrap; flex-shrink: 0; }
  .filter button::after { bottom: 0; }
  .filter-count { display: none; }

  /* Karten */
  .project-grid { grid-template-columns: 1fr; gap: .75rem; }
  .card, .card.is-wide { grid-column: 1 / -1; aspect-ratio: 16 / 11; min-height: 0; }
  .card.is-featured { grid-column: 1 / -1; aspect-ratio: 4 / 5; min-height: 0; }
  .card-num { top: 1rem; left: 1.1rem; }
  .card-body { left: 1.1rem; right: 3.5rem; bottom: 1.1rem; }
  .card-arrow { right: 1.1rem; bottom: 1.15rem; }
  .card-title { font-size: 1.4rem; }
  .card.is-featured .card-body { top: auto; bottom: 1.4rem; left: 1.25rem; }
  .card.is-featured .card-title { font-size: 2.1rem; }
  .card.is-featured .card-arrow { top: auto; bottom: 1.5rem; right: 1.25rem; }
  .card.is-featured .card-num { top: 1.1rem; left: 1.25rem; }
  .card.is-featured::after { inset: 30% -1px -1px; background: linear-gradient(transparent, rgb(0 0 0 / .85)); }

  /* Zitat: nur Text, mit Linie */
  .quote { grid-template-columns: 1fr; min-height: 0; background: none; border-block: 1px solid rgb(244 242 248 / .12); margin: 1.5rem 0; }
  .quote-media { display: none; }
  .quote-text { padding: 2.25rem 0; }
  .quote blockquote { font-size: 1.6rem; }
  .more { margin-top: 2rem; }
}