/* ============================================================
   Mobile-Fassung (12.11.2026): weniger gestapelt, mehr Bewegung.
   Greift nur bis 700px Breite, Desktop bleibt unveraendert.
   Bausteine: Wisch-Karussells (Kennzahlen, Vier Bereiche, Arbeiten),
   Logo-Laufband, Zielgruppen als Chips, nummerierte Mandate,
   gestaffelte Eintritte. Alles mit prefers-reduced-motion abgesichert.
   ============================================================ */

@media (max-width: 700px) {

  /* ---------- Rhythmus: etwas kompaktere Sektionen ---------- */
  .v2 .section { padding-block: 4rem; }
  .v2 .h2 { font-size: clamp(2rem, 9vw, 2.6rem); }

  /* ---------- Kopfleiste: CTA kuerzer, Wortmarke bleibt ---------- */
  .v2 .vb-nav__cta .m-long { display: none; }

  /* ---------- Hero: Claim gestaffelt einblenden ---------- */
  .m-js .vb-hero__label,
  .m-js .vb-hero__title,
  .m-js .vb-hero__lede,
  .m-js .vb-hero .intro__actions {
    animation: m-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
  }
  .m-js .vb-hero__title { animation-delay: 0.08s; }
  .m-js .vb-hero__lede { animation-delay: 0.22s; }
  .m-js .vb-hero .intro__actions { animation-delay: 0.32s; }
  .m-js .vb-hero .m-swipe { animation: m-slide-in 1s 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; }

  .v2 .intro__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }

  /* ---------- Wisch-Karussell (gemeinsame Basis) ---------- */
  .m-swipe {
    display: flex !important;
    grid-template-columns: none !important;
    gap: 0.75rem !important;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .m-swipe::-webkit-scrollbar { display: none; }
  .m-swipe > * {
    flex: 0 0 82%;
    scroll-snap-align: start;
    min-width: 0;
  }
  .m-swipe::after { content: ""; flex: 0 0 1px; }   /* Abstand am Ende */

  /* Fortschritt unter jedem Karussell */
  .m-dots { display: flex; gap: 6px; margin-top: 1rem; }
  .m-dots span {
    height: 3px; flex: 0 0 18px; border-radius: 2px;
    background: color-mix(in srgb, var(--ink) 18%, transparent);
    transition: flex-basis 0.35s ease, background-color 0.35s ease;
  }
  .m-dots span.is-active { flex-basis: 36px; background: var(--ink); }

  /* ---------- Kennzahlen im Hero als Karten ---------- */
  .vb-proof.m-swipe { border-top: 0; margin-top: 0.5rem; }
  .vb-proof.m-swipe > li {
    flex-basis: 74%;
    border: 1px solid var(--ash);
    background: var(--paper);
  }
  .vb-proof.m-swipe li > div {
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 1.25rem 1.25rem 1.4rem; height: 100%;
  }
  .vb-proof.m-swipe .vb-proof__num { font-size: 2rem; }
  .vb-proof.m-swipe .vb-proof__text { font-size: 0.9rem; }
  .v2 .vb-hero__grid { gap: 2rem; }
  .v2 .vb-hero__grid > *, .vb-proof-wrap { min-width: 0; }
  .m-swipe { max-width: none; }
  .v2 .wrap { min-width: 0; }

  /* ---------- Logo-Laufband ---------- */
  .m-js .clients__grid { display: none; }
  .v2 .clients { min-height: 0; padding-block: 3.5rem; }
  .v2 .clients__inner { gap: 1.5rem; padding-inline: 0; }
  .v2 .clients__label { padding-inline: var(--gutter); }
  .m-marquee {
    display: grid; gap: 0;
    border-block: 1px solid var(--ash);
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  }
  .m-marquee__row { display: flex; width: max-content; animation: m-marquee 38s linear infinite; }
  .m-marquee__row + .m-marquee__row { border-top: 1px solid var(--ash); animation-direction: reverse; animation-duration: 44s; }
  .m-marquee .clients__cell {
    flex: 0 0 auto; width: 46vw; aspect-ratio: 2.2 / 1;
    border: 0; border-right: 1px solid var(--ash);
  }
  .m-marquee .clients__cell::before,
  .m-marquee .clients__cell::after { display: none; }

  /* ---------- Leistungskette: Begriffe nacheinander ---------- */
  .m-js .chain__item { opacity: 0.18; transition: opacity 0.6s ease; }
  .m-js .chain__list.is-visible .chain__item { opacity: 1; }
  .m-js .chain__list.is-visible .chain__item:nth-child(2) { transition-delay: 0.25s; }
  .m-js .chain__list.is-visible .chain__item:nth-child(3) { transition-delay: 0.5s; }
  .m-js .chain__list.is-visible .chain__item:nth-child(4) { transition-delay: 0.75s; }
  .m-js .chain__list.is-visible .chain__item:nth-child(5) { transition-delay: 1s; }

  /* ---------- Vier Bereiche als Karten ---------- */
  .fields.m-swipe { background: none; border: 0; margin-top: 2rem; }
  .fields.m-swipe > .field {
    border: 1px solid var(--ash);
    min-height: 17rem;
    padding: 1.5rem 1.4rem;
    background: var(--paper);
  }
  .fields.m-swipe > .field:nth-child(4) { background: var(--stone); }
  .m-num {
    font-size: var(--t-caption); letter-spacing: 0.1em; opacity: 0.5;
    margin-bottom: 1.75rem;
  }
  .fields.m-swipe .field__tags { flex-direction: column; gap: 0.45rem; }
  .fields.m-swipe .field__tags span::before { content: "– "; opacity: 0.5; }

  /* ---------- Arbeiten ---------- */
  .v2 .work__head { margin-bottom: 2rem; }
  .v2 .work__lead { gap: 1.25rem; margin-bottom: 3rem; }
  .v2 .work__lead .shot-fig { order: -1; }          /* Bild zuerst, Text darunter */
  .work__pair.m-swipe > .work__card { flex-basis: 84%; gap: 0.9rem; }
  .work__pair.m-swipe .shot--portrait,
  .work__pair.m-swipe .shot--wide { aspect-ratio: 4 / 5; }
  .work__card--lead .shot-fig { gap: 0.4rem; }
  .work__card--lead .shot img { object-position: 55% 50%; }   /* Kurt Hohensinner mittig im Hochformat */
  .work__pair.m-swipe .body { font-size: 1rem; }
  .work__pair.m-swipe .work__result { font-size: 1.15rem; }
  .v2 .work__result { font-weight: 700; letter-spacing: -0.01em; }

  /* Bilder oeffnen sich beim Eintritt */
  .m-js [data-reveal] .shot__pic img,
  .m-js .shot-fig[data-reveal] img { transform: scale(1.12); transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
  .m-js [data-reveal].is-visible .shot__pic img,
  .m-js .shot-fig[data-reveal].is-visible img { transform: none; }
  .v2 .shot { overflow: hidden; }

  /* ---------- Zielgruppen als Chips ---------- */
  .v2 .audience { background: none; gap: 0; border-bottom: 0; margin-top: 2rem; }
  .v2 .audience__col { padding: 1.4rem 0; gap: 0.9rem; border-bottom: 1px solid var(--ash); background: none; }
  .v2 .audience__list { flex-direction: row; flex-wrap: wrap; gap: 0.5rem; }
  .v2 .audience__list li {
    border: 1px solid var(--ash); border-radius: 999px;
    padding: 0.4rem 0.85rem; font-size: 0.875rem; line-height: 1.2;
    background: var(--paper);
  }
  .m-js .audience__col.is-visible .audience__list li { animation: m-pop 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .m-js .audience__col.is-visible .audience__list li:nth-child(2) { animation-delay: 0.06s; }
  .m-js .audience__col.is-visible .audience__list li:nth-child(3) { animation-delay: 0.12s; }
  .m-js .audience__col.is-visible .audience__list li:nth-child(4) { animation-delay: 0.18s; }
  .m-js .audience__col.is-visible .audience__list li:nth-child(5) { animation-delay: 0.24s; }

  /* ---------- Mandate nummeriert ---------- */
  .v2 .mandates { margin-top: 2.25rem; counter-reset: mandat; }
  .v2 .mandate { position: relative; padding: 1.5rem 0 1.5rem 3rem; gap: 0.5rem; }
  .v2 .mandate::before {
    counter-increment: mandat; content: "0" counter(mandat);
    position: absolute; left: 0; top: 1.6rem;
    font-size: var(--t-caption); letter-spacing: 0.1em; opacity: 0.5;
  }
  .v2 .mandate .body { font-size: 1rem; }

  /* ---------- Footer: feste Ordnung statt zufaelligem Umbruch ---------- */
  .v2 .footer { padding: 3rem 0 6.5rem; }             /* unten Platz fuer den Menueknopf */
  .v2 .footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 0; }
  .v2 .footer__col { gap: 0.85rem; padding-block: 1.6rem; border-top: 1px solid var(--ash); font-size: 0.95rem; }
  .v2 .footer__col::before {
    font-size: var(--t-caption); letter-spacing: 0.1em; text-transform: uppercase;
    color: color-mix(in srgb, var(--ink) 55%, transparent); margin-bottom: 0.15rem;
  }
  .v2 .footer__col:nth-child(1) { grid-column: 1 / -1; border-top: 0; padding-top: 0; }
  .v2 .footer__col:nth-child(1) span { font-size: 1.05rem; }
  .v2 .footer__col:nth-child(3) { grid-column: 1 / -1; order: 2; }
  .v2 .footer__col:nth-child(3)::before { content: "Kontakt"; }
  .v2 .footer__col:nth-child(3) a { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }
  .v2 .footer__col:nth-child(2) { order: 3; }
  .v2 .footer__col:nth-child(2)::before { content: "Seiten"; }
  .v2 .footer__col:nth-child(4) { order: 4; padding-left: 1.25rem; }
  .v2 .footer__col:nth-child(3) span + span { margin-top: -0.55rem; }
  .v2 .footer__col:nth-child(4)::before { content: "Rechtliches"; }
  .v2 .footer__bottom { flex-direction: column; gap: 0.35rem; padding-top: 1.4rem; border-top: 1px solid var(--ash); line-height: 1.5; }

  /* ---------- Kontakt ---------- */
  .v2 .contact .h2, .v2 #kontakt .h2 { font-size: clamp(2rem, 9vw, 2.6rem); }
}

@keyframes m-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes m-slide-in { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes m-pop { from { opacity: 0; transform: translateY(8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes m-marquee { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .m-js .vb-hero__label, .m-js .vb-hero__title, .m-js .vb-hero__lede,
  .m-js .vb-hero .intro__actions, .m-js .vb-hero .m-swipe,
  .m-js .audience__list li { animation: none !important; }
  .m-marquee__row { animation: none; }
  .m-marquee { overflow-x: auto; }
  .m-js .chain__item { opacity: 1; }
  .m-js [data-reveal] .shot__pic img, .m-js .shot-fig[data-reveal] img { transform: none; transition: none; }
}