/* ==========================================================================
   Showcase — sechs Miniatur-Websites im Karussell.
   Alles CSS, keine Bilddateien: gestochen scharf auf jedem Display,
   und die Seite lädt trotzdem in Millisekunden.
   Maße in cqw → skaliert exakt mit dem Browserrahmen.
   ========================================================================== */

/* ---------- 1. Vantage — Horologie ---------- */
.m1 {
  background: radial-gradient(120% 90% at 78% 12%, #24262c 0%, #0b0c0e 62%);
  color: #f2f0ec;
}
.m1 .mini__nav { color: #f2f0ec; }
.m1 .m1__body {
  position: absolute;
  left: 4.4cqw; bottom: 6cqw;
  width: 46cqw;
}
.m1__k {
  font-size: 1.5cqw; letter-spacing: 0.34em; text-transform: uppercase;
  color: #b99a5e; margin-bottom: 2.6cqw;
}
.m1 .mini__h { font-weight: 300; font-size: 7cqw; letter-spacing: -0.02em; }
.m1 .mini__h em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic; color: #d8bd86;
}
.m1 .mini__p { margin-top: 2.4cqw; opacity: 0.5; }
.m1 .mini__btn {
  margin-top: 3.6cqw;
  border: 1px solid rgba(216, 189, 134, 0.5);
  color: #d8bd86;
}

/* Die Uhr: konzentrische Ringe, die sich drehen */
.m1__watch {
  position: absolute;
  right: 6cqw; top: 50%;
  width: 30cqw; height: 30cqw;
  transform: translateY(-50%);
}
.m1__watch i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.35cqw solid rgba(216, 189, 134, 0.28);
}
.m1__watch i:nth-child(2) { inset: 12%; border-color: rgba(216,189,134,0.5); }
.m1__watch i:nth-child(3) {
  inset: 26%;
  border-color: rgba(216,189,134,0.22);
  background: radial-gradient(circle at 34% 28%, rgba(255,255,255,0.14), transparent 62%);
}
.m1__watch i:nth-child(4) {
  inset: 40%;
  border: 0;
  background: linear-gradient(140deg, #d8bd86, #8a6f3c);
  box-shadow: 0 0 6cqw rgba(216,189,134,0.35);
}
.is-front .m1__watch i:nth-child(1) { animation: spin 22s linear infinite; }
.is-front .m1__watch i:nth-child(2) { animation: spin 15s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Zeiger */
.m1__hand {
  position: absolute;
  left: 50%; top: 50%;
  width: 0.34cqw;
  height: 11cqw;
  background: #d8bd86;
  transform-origin: bottom center;
  transform: translate(-50%, -100%) rotate(38deg);
  border-radius: 1cqw;
}
.is-front .m1__hand { animation: spin-hand 9s linear infinite; }
@keyframes spin-hand {
  from { transform: translate(-50%, -100%) rotate(0deg); }
  to   { transform: translate(-50%, -100%) rotate(360deg); }
}

/* ---------- 2. Aurora — Architektur ---------- */
.m2 {
  background: #f6f5f2;
  color: #14150f;
}
.m2 .mini__nav { color: #14150f; }
.m2 .m2__body {
  position: absolute;
  left: 4.4cqw; top: 15cqw;
  width: 44cqw;
}
.m2 .mini__h { font-weight: 500; letter-spacing: -0.035em; font-size: 7.4cqw; }
.m2 .mini__h span { display: block; opacity: 0.32; }
.m2 .mini__p { margin-top: 2.4cqw; }
.m2 .mini__btn {
  margin-top: 3.4cqw;
  background: #14150f; color: #f6f5f2;
}

/* Fassadenraster */
.m2__facade {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 42cqw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(6, 1fr);
  gap: 0.5cqw;
  padding: 0.5cqw;
  background: #e6e4dd;
}
.m2__facade i {
  background: linear-gradient(160deg, #cfccc2, #a8a59a);
  opacity: 0.9;
}
.m2__facade i:nth-child(3n) { background: linear-gradient(160deg, #f0eee8, #d2cfc5); }
.m2__facade i:nth-child(5n) { background: linear-gradient(160deg, #9aa39d, #6f7873); }
.m2__facade i:nth-child(7n) {
  background: linear-gradient(160deg, #ffd9a0, #f0a860);
}

/* ---------- 3. Nocturne — Fine Dining ---------- */
.m3 {
  background: radial-gradient(110% 80% at 50% 0%, #2a1a14 0%, #100a08 60%);
  color: #f4ece2;
}
.m3 .mini__nav { color: #f4ece2; }
.m3 .m3__body {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 12cqw;
}
.m3 .mini__h {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400; font-style: italic;
  font-size: 9cqw; letter-spacing: -0.02em;
}
.m3__rule {
  width: 14cqw; height: 1px;
  background: linear-gradient(90deg, transparent, #c9a227, transparent);
  margin: 3cqw 0;
}
.m3 .mini__p { opacity: 0.52; }
.m3 .mini__btn {
  margin-top: 3.6cqw;
  border: 1px solid rgba(201, 162, 39, 0.55);
  color: #e5c667;
  letter-spacing: 0.14em; text-transform: uppercase; font-size: 1.5cqw;
}
.m3__glow {
  position: absolute;
  left: 50%; top: 32%;
  width: 34cqw; height: 34cqw;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(201,162,39,0.22), transparent 66%);
  filter: blur(1cqw);
}
.is-front .m3__glow { animation: flicker 5s ease-in-out infinite; }
@keyframes flicker {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.62; transform: translate(-50%, -50%) scale(1.12); }
}

/* ---------- 4. Fluxion — SaaS / KI ---------- */
.m4 {
  background: #fff;
  color: #0b0b0f;
}
.m4 .mini__nav { color: #0b0b0f; }
.m4::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 38% at 24% 26%, rgba(124,107,245,0.34), transparent 68%),
    radial-gradient(34% 34% at 76% 20%, rgba(56,189,248,0.32), transparent 68%),
    radial-gradient(40% 40% at 62% 82%, rgba(232,121,249,0.28), transparent 68%);
  filter: blur(2cqw);
}
.m4 .m4__body {
  position: absolute;
  left: 0; right: 0; top: 16cqw;
  text-align: center;
  padding-inline: 10cqw;
}
.m4 .mini__h { font-weight: 800; letter-spacing: -0.045em; }
.m4 .mini__h b {
  background: linear-gradient(96deg, #7c6bf5, #38bdf8, #e879f9);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  font-weight: 800;
}
.m4 .mini__p { margin-top: 2.2cqw; }
.m4 .mini__btn {
  margin-top: 3cqw;
  background: #0b0b0f; color: #fff;
}

/* Glaskarte mit Kennzahlen */
.m4__card {
  position: absolute;
  left: 50%; bottom: -2cqw;
  transform: translateX(-50%);
  width: 62cqw;
  padding: 3cqw;
  border-radius: 2.2cqw 2.2cqw 0 0;
  background: rgba(255,255,255,0.62);
  backdrop-filter: blur(2cqw) saturate(180%);
  -webkit-backdrop-filter: blur(2cqw) saturate(180%);
  border: 1px solid rgba(255,255,255,0.9);
  box-shadow: 0 -1cqw 4cqw rgba(11,11,15,0.1);
  display: flex;
  gap: 3cqw;
  align-items: flex-end;
}
.m4__bars { display: flex; gap: 0.9cqw; align-items: flex-end; height: 9cqw; flex: 1; }
.m4__bars i {
  flex: 1;
  border-radius: 0.5cqw 0.5cqw 0 0;
  background: linear-gradient(180deg, #7c6bf5, #38bdf8);
  transform-origin: bottom;
  transform: scaleY(0.2);
}
.is-front .m4__bars i { animation: bar-rise 1.1s cubic-bezier(0.16,1,0.3,1) forwards; }
.m4__bars i:nth-child(1) { --hh: 0.34; animation-delay: 0.05s; }
.m4__bars i:nth-child(2) { --hh: 0.55; animation-delay: 0.12s; }
.m4__bars i:nth-child(3) { --hh: 0.42; animation-delay: 0.19s; }
.m4__bars i:nth-child(4) { --hh: 0.72; animation-delay: 0.26s; }
.m4__bars i:nth-child(5) { --hh: 0.61; animation-delay: 0.33s; }
.m4__bars i:nth-child(6) { --hh: 0.92; animation-delay: 0.4s; }
.m4__bars i:nth-child(7) { --hh: 1; animation-delay: 0.47s; }
@keyframes bar-rise { to { transform: scaleY(var(--hh)); } }

.m4__kpi { text-align: right; }
.m4__kpi b { display: block; font-size: 4.4cqw; font-weight: 800; letter-spacing: -0.04em; }
.m4__kpi span { font-size: 1.5cqw; opacity: 0.45; }

/* ---------- 5. Atelier Kova — Mode ---------- */
.m5 {
  background: #0e0e0e;
  color: #fff;
}
.m5 .mini__nav { color: #fff; }
.m5__split { position: absolute; inset: 0; display: grid; grid-template-columns: 1.1fr 1fr; }
.m5__l {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 5cqw 4.4cqw;
}
.m5 .mini__h {
  font-size: 8.6cqw; font-weight: 200; letter-spacing: -0.05em; line-height: 0.86;
  text-transform: uppercase;
}
.m5 .mini__h b { font-weight: 800; display: block; }
.m5__tags { display: flex; gap: 1.6cqw; margin-top: 3cqw; font-size: 1.5cqw; opacity: 0.45; letter-spacing: 0.18em; text-transform: uppercase; }
.m5__r {
  background:
    linear-gradient(180deg, rgba(0,0,0,0.24), transparent 40%),
    linear-gradient(158deg, #d7d2c8 0%, #8f8d88 42%, #3a3936 100%);
  position: relative;
  overflow: hidden;
}
.m5__r::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: linear-gradient(102deg, transparent 42%, rgba(255,255,255,0.42) 50%, transparent 58%);
}
.is-front .m5__r::after { animation: sheen 4.2s ease-in-out infinite; }
@keyframes sheen {
  0%, 100% { transform: translateX(-58%); }
  50%      { transform: translateX(58%); }
}
.m5__price {
  position: absolute;
  right: 3cqw; bottom: 3cqw;
  padding: 1.4cqw 2.6cqw;
  border-radius: 99px;
  background: rgba(255,255,255,0.9);
  color: #0e0e0e;
  font-size: 1.7cqw; font-weight: 640;
  backdrop-filter: blur(1cqw);
}

/* ---------- 6. Hyperion — Tech ---------- */
.m6 {
  background: #06070c;
  color: #e8eaf2;
}
.m6 .mini__nav { color: #e8eaf2; }
.m6__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(120,140,255,0.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,140,255,0.09) 1px, transparent 1px);
  background-size: 4cqw 4cqw;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 42%, #000, transparent 78%);
  mask-image: radial-gradient(70% 70% at 50% 42%, #000, transparent 78%);
}
.m6__orb {
  position: absolute;
  left: 50%; top: 42%;
  width: 26cqw; height: 26cqw;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,0.5), transparent 44%),
    conic-gradient(from 0deg, #38bdf8, #7c6bf5, #e879f9, #38bdf8);
  filter: blur(0.3cqw);
  box-shadow: 0 0 8cqw rgba(124,107,245,0.5);
}
.is-front .m6__orb { animation: spin 12s linear infinite; }
.m6__ring {
  position: absolute;
  left: 50%; top: 42%;
  width: 40cqw; height: 40cqw;
  transform: translate(-50%, -50%) rotateX(74deg);
  border-radius: 50%;
  border: 0.25cqw solid rgba(124,107,245,0.42);
}
.is-front .m6__ring { animation: ring-spin 9s linear infinite; }
@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotateX(74deg) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(74deg) rotate(360deg); }
}
.m6__body {
  position: absolute;
  left: 0; right: 0; bottom: 6cqw;
  text-align: center;
  padding-inline: 10cqw;
}
.m6 .mini__h { font-weight: 700; letter-spacing: -0.04em; font-size: 6.4cqw; }
.m6 .mini__p { margin-top: 1.8cqw; }
.m6__stats {
  display: flex; justify-content: center; gap: 5cqw;
  margin-top: 3cqw;
  font-size: 1.5cqw;
}
.m6__stats b { display: block; font-size: 3cqw; font-weight: 700; letter-spacing: -0.03em; }
.m6__stats span { opacity: 0.42; }

/* Bewegung nur im Vordergrund-Slide — spart der GPU die halbe Arbeit */
@media (prefers-reduced-motion: reduce) {
  .mini * { animation: none !important; }
}