/* QUADRO OFFICE · Startseiten-Entwurf V4 „Final zur Entscheidung“
   Alle Module aus V3 (quadro-v3.css) in Farbrichtung A, Menüleiste aus A (quadro.css). */

/* ---------- Leistungs-Farbskala in Petrol-Abstufungen ---------- */
.v4 {
  --scale-1: #EBEEC9;  /* Grün hell (Farbkonzept) */
  --scale-2: #D8DCDA;  /* Petrol hell (Farbkonzept) */
  --scale-3: #C4D600;  /* QUADRO-Grün, ein Akzent */
  --scale-4: #9FB0B8;  /* abgeleitet */
  --scale-5: #4E6B7A;  /* abgeleitet */
  --scale-6: #2C4D5E;  /* abgeleitet */
  --scale-7: #1B3A4B;  /* Petrol (Farbkonzept) */
}

/* ---------- Einstieg unter der A-Kopfzeile: Bild im Petrol-hell-Rahmen ---------- */
.v4 .v3-hero { background: var(--frame); padding-top: 92px; }
@media (min-width: 768px) { .v4 .v3-hero { padding-top: 112px; } }
.v4 .v3-hero-media { height: min(calc(100svh - 112px), 860px); }
.v4 .v3-hero-media::after {
  background:
    linear-gradient(180deg, rgba(20,44,56,0) 30%, rgba(20,44,56,.82) 100%),
    linear-gradient(90deg, rgba(20,44,56,.55) 0%, rgba(20,44,56,0) 60%);
}
.v4 .bento-cta { background: linear-gradient(180deg, transparent, rgba(20,44,56,.78)); }

/* ---------- Kennzeichnung der Varianten (zur Auswahl) ---------- */
.alt-label { background: var(--bg); border-top: 1px dashed var(--line); padding: 14px 0; font-size: .85rem; color: var(--ink-soft); }
.alt-label span {
  display: inline-block; margin-right: 10px; padding: 4px 9px;
  background: var(--green); color: var(--on-green); font-weight: 600; font-size: .78rem; letter-spacing: .04em;
}
.alt-label--dark { background: var(--dark-deep); color: var(--on-dark-soft); border-top-color: var(--line-dark); }

/* ---------- Standorte: drei Showrooms ---------- */
@media (min-width: 700px) { .v4 .showrooms { grid-template-columns: repeat(3, 1fr); } }
.v4 .showroom figure { position: relative; }

/* =========================================================================
   V4 · Effekte auch auf Smartphone und Tablet (unter den Desktop-Breakpoints)
   Greift nur mit aktiver Bewegung (.js); bei reduzierter Bewegung bleiben die
   ruhigen Fassungen aus quadro.css / quadro-v3.css.
   ========================================================================= */

/* Stack Cards: Karten stapeln sich beim Scrollen übereinander */
@media (max-width: 767px) {
  .v4.js .stack { gap: 0; }
  .v4.js .stack-card {
    position: sticky; top: calc(84px + var(--i) * 14px);
    margin-bottom: 7vh; transform-origin: 50% 0;
    box-shadow: 0 -18px 40px -24px rgba(0,0,0,.6);
  }
  .v4.js .stack-card:last-child { margin-bottom: 0; }
  .v4.js .stack-card figure { aspect-ratio: 16 / 11; }
}

/* Horizontaler Scroll: gepinnt, Panels laufen seitlich durch */
@media (max-width: 899px) {
  .v4 .hscroll.is-live { height: 100vh; }
  .v4 .is-live .hscroll-track { display: flex; gap: 14px; height: 100vh; align-items: center; padding: 0 16px; width: max-content; will-change: transform; }
  .v4 .is-live .h-intro { width: 84vw; flex: none; }
  .v4 .is-live .h-big { font-size: clamp(2.2rem, 10vw, 3.4rem); }
  .v4 .is-live .h-panel { flex: none; width: 84vw; max-width: 520px; height: min(74vh, 640px); grid-template-rows: 1fr auto; }
  .v4 .is-live .h-panel figure { aspect-ratio: auto; height: 100%; }
  .v4 .is-live .h-panel .body { padding: 18px 18px 22px; gap: 8px; }
  .v4 .is-live .h-panel p { font-size: .95rem; }
  .v4 .is-live .h-panel:last-child { margin-right: 16px; }
}

/* Bento-Galerie: Raster öffnet sich beim Scrollen zum Vollbild (wie Desktop) */
@media (max-width: 899px) {
  .v4 .bento-wrap.is-live { height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
  .v4 .is-live .bento {
    grid-template-columns: repeat(3, 32vw); grid-template-rows: repeat(4, 22vh);
    gap: 1vw; width: auto; margin: 0; justify-content: center; align-content: center;
  }
  .v4 .is-live .bento__item { aspect-ratio: auto; }
  .v4 .is-live .bento__item:nth-child(1) { grid-area: 1 / 1 / 3 / 2; }
  .v4 .is-live .bento__item:nth-child(2) { grid-area: 3 / 1 / 5 / 2; }
  .v4 .is-live .bento__item:nth-child(3) { grid-area: 1 / 2 / 2 / 3; }
  .v4 .is-live .bento__item:nth-child(4) { grid-area: 2 / 2 / 4 / 3; }
  .v4 .is-live .bento__item:nth-child(5) { grid-area: 4 / 2 / 5 / 3; }
  .v4 .is-live .bento__item:nth-child(6) { grid-area: 1 / 3 / 3 / 4; }
  .v4 .is-live .bento__item:nth-child(7) { grid-area: 3 / 3 / 5 / 4; }
  .v4 .is-live .bento.bento--final { grid-template-columns: repeat(3, 100vw); grid-template-rows: repeat(4, 49.5vh); gap: 1vh; }
  .v4 .is-live .bento__item figcaption { display: none; }
  .v4 .is-live .bento-cta { display: grid; gap: 14px; justify-items: start; opacity: 0; pointer-events: none; padding: 100px 20px 32px; }
  .v4 .is-live .bento-cta h3 { font-size: clamp(1.6rem, 7vw, 2.4rem); font-weight: 300; color: #fff; }
  .v4 .is-live .bento-cta h3 strong { font-weight: 600; }
}

/* Einrichtung & Marken: Bild bleibt oben stehen, die Zeile in der Mitte steuert den Wechsel */
@media (max-width: 959px) {
  .v4 .sit-grid { display: flex; flex-direction: column; gap: 18px; }
  .v4 .sit-visual { display: block; order: -1; position: sticky; top: 80px; z-index: 2; aspect-ratio: 16 / 10; overflow: hidden; background: var(--frame); box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); }
  .v4 .sit-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .6s, transform 1.2s cubic-bezier(.2,.8,.2,1); }
  .v4 .sit-visual img.is-active { opacity: 1; transform: none; }
  .v4 .sit-count { position: absolute; left: 12px; bottom: 12px; background: var(--surface); padding: 5px 9px; font-size: .8rem; font-variant-numeric: tabular-nums; }
  .v4 .sit-row { grid-template-columns: 2.2rem 1fr; grid-template-areas: "no name" "no txt"; padding: 22px 0; min-height: 28vh; align-content: center; }
  .v4 .sit-thumb { display: none; }
  .v4 .sit-row .sit-name { opacity: .4; transition: opacity .4s, font-weight .5s, transform .5s cubic-bezier(.2,.8,.2,1); }
  .v4 .sit-row.is-active .sit-name { opacity: 1; font-weight: 600; transform: translateX(6px); }
  .v4 .sit-txt { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s, opacity .4s; }
  .v4 .sit-row.is-active .sit-txt { max-height: 4em; opacity: 1; }
}

/* So arbeiten wir · Variante 2: Bild bleibt oben stehen, Schritte 01–04 scrollen darunter durch */
@media (max-width: 959px) {
  .v4 .path-grid.is-enhanced { display: flex; flex-direction: column; gap: 0; }
  .v4 .is-enhanced .path-visual { display: block; order: -1; position: sticky; top: 80px; z-index: 2; aspect-ratio: 16 / 10; overflow: hidden; background: var(--frame); margin-bottom: 8px; box-shadow: 0 14px 30px -18px rgba(0,0,0,.45); }
  .v4 .is-enhanced .path-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s, transform 1.3s cubic-bezier(.2,.8,.2,1); }
  .v4 .is-enhanced .path-visual img.is-active { opacity: 1; transform: none; }
  .v4 .is-enhanced .path-visual .count { position: absolute; left: 12px; bottom: 12px; background: var(--surface); padding: 5px 9px; font-size: .8rem; font-variant-numeric: tabular-nums; }
  .v4 .is-enhanced .path-steps { gap: 0; }
  .v4 .is-enhanced .path-step { min-height: 46vh; align-content: center; padding-left: 20px; border-left: 1px solid var(--line); position: relative; opacity: .35; transition: opacity .5s; }
  .v4 .is-enhanced .path-step::before { content: ""; position: absolute; left: -5px; top: 50%; width: 9px; height: 9px; background: var(--line); transition: background-color .4s, transform .4s; }
  .v4 .is-enhanced .path-step.is-active { opacity: 1; }
  .v4 .is-enhanced .path-step.is-active::before { background: var(--green); transform: scale(1.4); }
  .v4 .is-enhanced .path-step figure { display: none; }
}