/* ==========================================================================
   Vista City — Features
   Charakter: Schaustück. Wenige, dafür große Blöcke im Wechsel,
   jeder mit eigener Ordnungszahl und Belegen statt Schlagworten.
   ========================================================================== */

.showcases {
  /* Als Variable, weil die Trennlinie genau in der Mitte des Abstands sitzt. */
  --showcase-gap: clamp(4.5rem, 9vw, 10rem);
  display: grid;
  gap: var(--showcase-gap);
}

.showcase {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

/* Jeder zweite Block spiegelt sich: Bild nach links, Text nach rechts.
   Vorher stand hier order:2 — wirkungslos, weil das Bild im Markup ohnehin
   an letzter Stelle steht. Erst ein negativer Wert zieht es nach vorn. */
.showcase:nth-child(even) .showcase__media { order: -1; }

/* --- Trennlinie ------------------------------------------------------------
   Sitzt mittig im Abstand zwischen zwei Blöcken. Zu den Seiten laufen die
   Enden aus, in der Mitte eine kleine Raute — eine Kapitelmarke, die man
   wahrnimmt, ohne dass sie sich vordrängt.
   ---------------------------------------------------------------------------- */

.showcase + .showcase::before,
.showcase + .showcase::after {
  content: '';
  position: absolute;
  top: calc(var(--showcase-gap) / -2);
  left: 50%;
  pointer-events: none;
}
.showcase + .showcase::before {
  width: min(100%, 46rem);
  height: 1px;
  translate: -50% 0;
  background: linear-gradient(90deg,
    transparent,
    var(--line-hi) 22%,
    var(--line-hi) 78%,
    transparent);
}
.showcase + .showcase::after {
  width: 0.375rem;
  height: 0.375rem;
  translate: -50% -50%;
  rotate: 45deg;
  background: var(--accent);
  opacity: 0.55;
}

/* --- Kapitelmarke ------------------------------------------------------------
   Vorher stand hier eine Ordnungszahl in Konturschrift über 16rem Höhe,
   hinter dem Text. Sie war zu schwach, um als Gestaltung zu wirken, und
   überlagerte die Kategoriezeile — das las sich als Fehler. Jetzt eine
   schmale Marke in der Kopfzeile: klein, präzise, klar zugeordnet.
   ---------------------------------------------------------------------------- */

.showcase__kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--accent);
}
.showcase__index {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
/* Kurzer Strich zwischen Nummer und Kategorie. */
.showcase__index::after {
  content: '';
  width: clamp(1.5rem, 3vw, 2.75rem);
  height: 1px;
  background: var(--line-hi);
}

.showcase__body { display: grid; gap: 1.25rem; align-content: start; }
.showcase__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 1.2rem + 2.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
}
.showcase__text { color: var(--ink-soft); font-size: var(--text-lg); max-width: 46ch; text-wrap: pretty; }

/* Belege: konkrete Zahlen statt Adjektive. */
.proofs {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.proof {
  display: grid;
  grid-template-columns: 1.4rem 1fr;
  gap: 0.85rem;
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.proof svg { width: 1.4rem; height: 1.4rem; color: var(--accent); margin-top: 0.1rem; }
.proof b { color: var(--ink); font-weight: 700; }

/* --- Bildseite ------------------------------------------------------------ */

.showcase__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--surface-hi);
}
.showcase__media img,
.showcase__media .media-missing {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.2s var(--ease-out-expo);
}
.showcase:hover .showcase__media img { transform: scale(1.07); }

/* Kein Farbschleier über dem Screenshot — das Foto trägt sich selbst.
   Die Zugehörigkeit zur Kategorie zeigt die Kennzahl unten links. */

/* Kennzahl auf dem Bild */
.showcase__badge {
  position: absolute;
  left: 1rem; bottom: 1rem;
  z-index: 2;
  display: grid;
  gap: 0.1rem;
  padding: 0.8rem 1.1rem;
  border-radius: var(--r-md);
  background: oklch(6% 0.004 300 / 0.72);
  backdrop-filter: blur(14px);
  color: oklch(99% 0 0);
}
.showcase__badge b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  letter-spacing: var(--track-tight);
}
.showcase__badge span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* --- Abgrenzung ----------------------------------------------------------- */

.compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
  margin-top: clamp(4rem, 8vw, 7rem);
}
.compare__col {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: 1rem;
  align-content: start;
  padding: clamp(1.35rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.compare__col--us {
  border-color: var(--line-hi);
  border-top: 2px solid var(--accent);
  background: var(--surface);
}
.compare__col h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.compare__col ul { display: grid; gap: 0.7rem; }
.compare__col li {
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  gap: 0.7rem;
  align-items: start;
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-soft);
}
.compare__col li::before {
  content: '—';
  color: var(--ink-mute);
  font-weight: 700;
}
.compare__col--us li::before { content: '+'; color: var(--accent); }

/* --- Umbrüche ------------------------------------------------------------ */

@media (max-width: 62rem) {
  .showcase { grid-template-columns: 1fr; }
  /* Einspaltig steht das Bild immer unter dem Text. */
  .showcase:nth-child(even) .showcase__media { order: 0; }
}