/* ============================================================
   Page-Specific Components
   ============================================================ */

/* === Detail Hero (Service Pages) === */
.detail-hero {
  position: relative;
  padding: clamp(7rem, 14vw, 12rem) var(--gutter) clamp(2rem, 6vw, 5rem);
  overflow: hidden;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: var(--s-12);
  align-items: end;
  max-width: var(--max-w);
  margin: 0 auto;
}

@media (max-width: 980px) {
  .detail-hero { grid-template-columns: 1fr; gap: var(--s-8); }
}

.detail-hero__text { padding-block: var(--s-12); }

.detail-hero__crumb {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
}

.detail-hero__crumb a { color: var(--ink-mute); }
.detail-hero__crumb a:hover { color: var(--m); }
.detail-hero__crumb .sep { color: var(--m); }

.detail-hero__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-hero);
  line-height: 0.88;
  letter-spacing: -0.03em;
  margin-bottom: var(--s-8);
  font-weight: 400;
}

.detail-hero__title em { color: var(--m); }

.detail-hero__lead {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  max-width: 50ch;
  line-height: 1.45;
  margin-bottom: var(--s-8);
}

.detail-hero__media {
  aspect-ratio: 5/6;
  background: var(--paper-3);
  position: relative;
  overflow: hidden;
}

.detail-hero__media img {
  width: 100%; height: 100%; object-fit: cover;
}

.detail-hero__media.placeholder {
  background:
    linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.detail-hero__media.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 40%, rgba(200,22,60,0.25) 0%, transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(0,163,196,0.18) 0%, transparent 55%);
}

.detail-hero__media.placeholder::after {
  content: attr(data-label);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.4rem);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  padding: var(--s-4) var(--s-7);
  background: rgba(250,250,250,0.95);
  color: var(--ink);
  position: relative;
  border-radius: var(--radius-pill);
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

/* === Spec Table (Detail-Pages) === */
.spec-list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.spec-list li {
  padding: var(--s-6) var(--s-5);
  border-right: 1px solid var(--ink-line);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.spec-list li:last-child { border-right: 0; }

.spec-list .spec-key {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}

.spec-list .spec-val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1;
}

@media (max-width: 700px) {
  .spec-list { grid-template-columns: repeat(2, 1fr); }
  .spec-list li { border-bottom: 1px solid var(--ink-line); }
  .spec-list li:nth-child(2n) { border-right: 0; }
}

/* === Feature columns === */
.feature-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-12);
}

@media (max-width: 880px) { .feature-cols { grid-template-columns: 1fr; gap: var(--s-8); } }

.feature {
  padding-top: var(--s-6);
  border-top: 1px solid var(--ink);
}

.feature .num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--m);
  margin-bottom: var(--s-4);
}

.feature h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h3);
  margin-bottom: var(--s-3);
}

.feature p {
  color: var(--ink-soft);
  font-size: var(--t-body);
  line-height: 1.5;
  max-width: 36ch;
}

/* === Inline tag list === */
.tag-row {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.tag-row li {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  background: var(--paper);
}

.sec--magenta .tag-row li,
.sec--cyan    .tag-row li,
.sec--yellow  .tag-row li,
.sec--ink     .tag-row li {
  background: transparent;
  border-color: currentColor;
}

/* === Portfolio Grid === */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--s-3);
  padding: var(--s-3);
}

.shot {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--paper-3);
  border-radius: var(--radius-sm);
}

.shot--tall { grid-column: span 4; aspect-ratio: 3/4; }
.shot--wide { grid-column: span 8; aspect-ratio: 16/9; }
.shot--sq   { grid-column: span 4; aspect-ratio: 1/1; }
.shot--full { grid-column: span 12; aspect-ratio: 21/9; }
.shot--half { grid-column: span 6; aspect-ratio: 4/3; }

@media (max-width: 1000px) {
  .shot--tall, .shot--sq, .shot--half { grid-column: span 6; }
  .shot--wide, .shot--full { grid-column: span 12; }
}

@media (max-width: 600px) {
  .shot { grid-column: span 12 !important; aspect-ratio: 4/3; }
}

.shot img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.2s var(--ease);
}

.shot:hover img { transform: scale(1.04); }

.shot.placeholder {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  position: relative;
}

.shot.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(200,22,60,0.2) 0%, transparent 50%),
    radial-gradient(circle at 70% 70%, rgba(0,163,196,0.15) 0%, transparent 50%);
}

.shot.placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 1.4vw, 1.15rem);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  text-align: center;
  padding: var(--s-4);
  color: rgba(255,255,255,0.95);
  font-weight: 500;
  background: rgba(0,0,0,0.25);
}

.shot__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, var(--m) 130%);
  display: flex;
  align-items: flex-end;
  padding: var(--s-6);
  opacity: 0;
  transition: opacity var(--t-mid) var(--ease);
}

.shot:hover .shot__overlay { opacity: 0.95; }

.shot__cap {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h3);
  color: var(--paper);
}

.shot__cap small {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--y);
  margin-bottom: var(--s-2);
}

/* === Ueber-Uns === */
.about-hero {
  padding: clamp(7rem, 14vw, 12rem) var(--gutter) clamp(2rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  align-items: end;
  max-width: var(--max-w);
  margin: 0 auto;
}

@media (max-width: 900px) { .about-hero { grid-template-columns: 1fr; gap: var(--s-8); } }

.about-img {
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--paper-3);
  position: relative;
}

.about-img img { width: 100%; height: 100%; object-fit: cover; }

.about-img.placeholder {
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.about-img.placeholder::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(200,22,60,0.2) 0%, transparent 60%);
}

.about-img.placeholder::after {
  content: "BILD 17 · 3:4 · 1200×1600";
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  letter-spacing: 0.16em;
  background: rgba(250,250,250,0.95);
  color: var(--ink);
  padding: var(--s-4) var(--s-7);
  border-radius: var(--radius-pill);
  position: relative;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
  text-transform: uppercase;
}

/* === Contact === */
.contact {
  padding: clamp(3rem, 8vw, 6rem) var(--gutter);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-16);
  max-width: var(--max-w);
  margin: 0 auto;
}

@media (max-width: 980px) { .contact { grid-template-columns: 1fr; gap: var(--s-12); } }

.contact__info h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h1);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-6);
}

.contact__info h2 em { color: var(--m); }

.contact__lead {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  margin-bottom: var(--s-12);
}

.contact-block {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--ink-line);
}

.contact-block:last-of-type { border-bottom: 0; }

.contact-block .label {
  display: block;
  margin-bottom: var(--s-2);
  color: var(--ink-mute);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
}

.contact-block .val {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  line-height: 1.1;
  display: inline-block;
  transition: color var(--t-fast) var(--ease);
}

a.val:hover { color: var(--m); }

/* Form */
.form { display: flex; flex-direction: column; gap: var(--s-6); }

.form__field { display: flex; flex-direction: column; gap: var(--s-2); }

.form__field label {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}

.form__field input,
.form__field textarea,
.form__field select {
  background: transparent;
  border: 0;
  border-bottom: 1.5px solid var(--ink);
  padding: var(--s-3) 0;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--ink);
  transition: border-color var(--t-mid) var(--ease);
  outline: none;
  border-radius: 0;
}

.form__field input:focus,
.form__field textarea:focus,
.form__field select:focus { border-bottom-color: var(--m); }

.form__field textarea { resize: vertical; min-height: 120px; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

@media (max-width: 600px) { .form__row { grid-template-columns: 1fr; } }

.form__submit { margin-top: var(--s-4); align-self: flex-start; }

.form__msg {
  display: none;
  padding: var(--s-4) var(--s-6);
  background: var(--y);
  font-family: var(--font-mono);
  font-size: var(--t-small);
  border-radius: var(--radius-pill);
}

.form__msg.show { display: inline-block; }

.map {
  width: 100%;
  height: 480px;
  border: 1px solid var(--ink-line);
  border-radius: var(--radius-sm);
}

/* === Sticky Layer Stack (Index "Was wir machen") === */
.layers { position: relative; }

.layers__item {
  position: sticky;
  top: 80px;
  margin-bottom: var(--s-12);
  padding: var(--s-16) var(--s-12);
  border-radius: var(--radius-sm);
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--s-12);
  align-items: center;
  min-height: 70vh;
}

.layers__item:nth-child(1) { background: var(--c); color: var(--on-c); top: 90px; }
.layers__item:nth-child(2) { background: var(--m); color: var(--on-m); top: 110px; }
.layers__item:nth-child(3) { background: var(--y); color: var(--on-y); top: 130px; }
.layers__item:nth-child(4) { background: var(--ink); color: var(--paper); top: 150px; }

@media (max-width: 980px) {
  .layers__item { grid-template-columns: 1fr; padding: var(--s-12) var(--s-8); position: relative; top: auto !important; }
}

.layers__num {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: var(--s-6);
  opacity: 0.8;
}

.layers__title {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--t-h1);
  line-height: 0.92;
  letter-spacing: -0.025em;
  margin-bottom: var(--s-6);
  font-weight: 400;
}

.layers__lead {
  font-size: var(--t-lead);
  line-height: 1.45;
  margin-bottom: var(--s-8);
  max-width: 50ch;
  opacity: 0.92;
}

.layers__list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-8);
}

.layers__list li {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  padding: var(--s-2) var(--s-4);
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
}

.layers__visual {
  aspect-ratio: 4/5;
  background: rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: var(--t-micro);
  position: relative;
  overflow: hidden;
}

.layers__visual::before {
  content: "";
  position: absolute;
  inset: 8%;
  border: 1px dashed currentColor;
  border-radius: var(--radius-sm);
  opacity: 0.3;
}