/* ============================================================
   MOBIL-LAYER — greift NUR bis 860px, Desktop bleibt unberührt.
   1) Menü-Bühne  2) Kapitel-Marke  3) Kompakter Hero
   4) Tap-Feedback  5) Sektions-Feinschliff (Logos, Stimmen, §01–§05)
   Hinweis: !important steht hier, wo Desktop-Regeln aus site.css/
   enhance.css/home-v2.css mit gleicher oder höherer Spezifität
   überschrieben werden müssen — nicht dekorativ.
   ============================================================ */

/* Nur-Mobil-Elemente sind oberhalb 860px nicht vorhanden */
.mchap, .mcue { display: none; }

/* Nav-Höhe: Startwert; mobile.js schreibt den real gemessenen Wert */
:root { --vt-nav-h: 76px; }

/* Autoglas: Desktop zeigt nur die dunkle Logo-Variante */
.logos__cell--dark .logo-light { display: none; }

@media (max-width: 860px) {

/* ---------- 2 · MENÜ-BÜHNE ---------- */
.mobile-menu {
  background: var(--vt-ink);
  padding: calc(var(--vt-nav-h) + 2.2rem) 24px calc(2rem + env(safe-area-inset-bottom, 0px));
  gap: 0; overflow-y: auto;
  transform: translateY(-100%);
}
.nav__burger.is-open span { background: var(--vt-paper); }
.nav.is-menu-open { background: transparent; border-bottom-color: transparent; }
.nav.is-menu-open .brand__wm, .nav.is-menu-open .brand__wm small { color: var(--vt-paper); }
.mobile-menu a {
  color: var(--vt-paper); font-size: clamp(1.75rem, 8.4vw, 2.5rem);
  border-bottom: 1px solid rgba(245,244,240,.12);
  padding: .62rem 0; display: flex; align-items: baseline; gap: .85rem;
  opacity: 0; transform: translateY(18px);
}
.mobile-menu.is-open a { animation: mmIn .5s cubic-bezier(.2,.7,.2,1) forwards; }
.mobile-menu.is-open a:nth-child(1) { animation-delay: .06s; }
.mobile-menu.is-open a:nth-child(2) { animation-delay: .11s; }
.mobile-menu.is-open a:nth-child(3) { animation-delay: .16s; }
.mobile-menu.is-open a:nth-child(4) { animation-delay: .21s; }
.mobile-menu.is-open a:nth-child(5) { animation-delay: .26s; }
.mobile-menu.is-open a:nth-child(6) { animation-delay: .31s; }
.mobile-menu.is-open a:nth-child(7) { animation-delay: .36s; }
.mobile-menu.is-open a:nth-child(8) { animation-delay: .41s; }
.mobile-menu a .mm-num { color: #4FBE86; font-size: 11px; vertical-align: baseline; margin-right: 0; flex: none; }
.mobile-menu a:active { color: #4FBE86; }
@keyframes mmIn { to { opacity: 1; transform: none; } }
.mm-foot {
  display: flex; flex-direction: column; gap: .55rem;
  margin-top: auto; padding-top: 1.8rem;
  font-family: var(--vt-font-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(245,244,240,.42); opacity: 0;
}
.mobile-menu.is-open .mm-foot { animation: mmIn .5s cubic-bezier(.2,.7,.2,1) .48s forwards; }
.mm-foot a { font-family: inherit; font-size: inherit; letter-spacing: inherit; border: 0; padding: 0; color: var(--vt-paper); animation: none !important; opacity: 1; transform: none; display: inline; }

/* ---------- 3 · KAPITEL-MARKE in der Nav ---------- */
.mchap {
  display: flex; align-items: center; gap: .6rem;
  position: fixed; top: var(--vt-nav-h); left: 0; right: 0; z-index: 97;
  padding: 7px 20px; pointer-events: none;
  background: rgba(245,244,240,.94); border-bottom: 1px solid var(--vt-border);
  font-family: var(--vt-font-mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--vt-fg-muted);
  opacity: 0; transform: translateY(-8px); transition: opacity .3s var(--vt-ease), transform .3s var(--vt-ease);
}
.mchap.is-on { opacity: 1; transform: none; }
.mchap b { color: #0F3B2E; font-weight: 500; }
.mchap__sep { flex: 1; height: 1px; background: var(--vt-divider); }
body.menu-open .mchap { opacity: 0; }

/* ---------- 5 · HERO kompakter ---------- */
/* Erste Zeile sitzt im grünen Kasten und ist die breiteste — Stufe so, dass sie bei 360px passt. */
.hero h1 { font-size: clamp(1.9rem, 9.8vw, 3.1rem); line-height: 1; }
.hero h1 .neg { padding: 2px .22em !important; margin-left: -.22em !important; }
.hero__lead { font-size: 1rem; line-height: 1.6; }

/* Zahlenband: 2 Spalten, durchgehend linksbündig */
.stat-strip { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0 !important; text-align: left !important; }
.stat {
  display: flex !important; flex-direction: column !important; gap: .3rem !important;
  text-align: left !important; align-items: flex-start !important;
  border-left: 0 !important; border-top: 1px solid var(--vt-divider) !important;
  padding: 1.1rem 1rem 1.1rem 0 !important;
}
.stat * { text-align: left !important; }
.stat:first-child { padding-left: 0 !important; }
.stat:nth-child(2n) { padding-right: 0 !important; padding-left: 1rem !important; border-left: 1px solid var(--vt-divider) !important; }
.stat__num {
  display: flex !important; flex-wrap: nowrap !important; white-space: nowrap !important;
  align-items: baseline !important; justify-content: flex-start !important;
  width: 100% !important; font-size: clamp(1.6rem, 8vw, 2.1rem) !important;
}
.stat__num > * { flex: none !important; }
.stat__label { font-size: 10px !important; line-height: 1.45; width: 100% !important; text-wrap: pretty; }
.stat__detail { display: none !important; }

/* Scroll-Hinweis unter dem Hero */
.mcue {
  display: flex !important; align-items: center; gap: .6rem; margin-top: 1.6rem;
  font-family: var(--vt-font-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--vt-fg-subtle);
}
.mcue__line { width: 1px; height: 26px; background: var(--vt-divider); position: relative; overflow: hidden; }
.mcue__line::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 12px; background: #0F3B2E; animation: mcueRun 2s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes mcueRun { 0% { transform: translateY(-14px); } 100% { transform: translateY(28px); } }

/* Hero-Signatur: Person in einer Zeile, Nachweise als eigene Zeile darunter */
.hero__sig { display: flex !important; flex-wrap: wrap !important; gap: .8rem !important; max-width: none !important; align-items: center !important; row-gap: 1rem !important; }
.hero__sig-photo { width: 42px !important; height: 42px !important; flex: none !important; }
.hero__sig-id { flex: 1 1 220px !important; min-width: 200px !important; }
.hero__sig-name { font-size: 15px !important; }
.hero__sig-role { font-size: 11px !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.4 !important; max-width: none; }
.hero__sig-proof { flex: 1 1 100% !important; margin: 0 !important; display: flex !important; align-items: center !important; gap: .8rem !important; padding-top: .9rem; border-top: 1px solid var(--vt-divider); }
.hero__sig .andbadge { margin: 0 !important; flex: none !important; }
.hero__sig .andbadge img { width: 56px !important; height: 56px !important; }
.hero__sig .hero__rating { flex: 0 0 auto !important; margin: 0 !important; padding: .45rem .75rem !important; }
.hero__sig .hero__stars { font-size: 14px !important; }
.hero__sig .hero__rating b { font-size: 16px !important; }

/* Terminal: feste Höhe, damit es beim Durchlaufen der Zeilen nicht springt */
.term__body { height: 300px; min-height: 300px; justify-content: flex-start; overflow: hidden; }

/* CTA-Zeile einzeilig */
.cta-meta { font-size: 10px !important; letter-spacing: .04em !important; white-space: nowrap; }

/* ---------- 6 · TAP-FEEDBACK ---------- */
a, button { -webkit-tap-highlight-color: transparent; }
.btn:active, .svc:active, .case:active, .qual:active, a.idx-row:active { transform: scale(.985); }
.btn, .svc, .case, .qual, a.idx-row { transition: transform .14s cubic-bezier(.32,.72,0,1), border-color .25s var(--vt-ease), background .25s var(--vt-ease); }
.nav__burger { min-width: 44px; min-height: 44px; }
.svc__arrow { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
/* Alle Links und Knöpfe auf mindestens 44px Höhe bringen — per Innenabstand,
   nicht über größere Schrift, damit das Schriftbild unverändert bleibt. */
.footer__col a, .mm-foot a, .contact-list a, .footer__contact a { min-height: 44px; display: inline-flex; align-items: center; }
.footer__social a { width: 44px; height: 44px; }
.totop { min-width: 44px; min-height: 44px; padding: .7rem .8rem; }
.faq__q { min-height: 48px; }
.term-tab { min-height: 44px; }
.textlink, .link-arrow, .qnorm--link, .tcard__readmore { min-height: 40px; display: inline-flex; align-items: center; }
.vcar__btn { width: 48px; height: 48px; }

/* CTA-Buttons: gut greifbar, gestapelt, einzeilig */
.btn { white-space: nowrap !important; }
.btn--lg { font-size: 15.5px !important; padding: 1.15rem 1.5rem !important; min-height: 54px; }
.hero__cta { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: .7rem !important; }
.hero__cta .btn { width: 100% !important; justify-content: center !important; }

/* ---------- 7 · Ablauf ---------- */
.flow__step { padding-block: 1.15rem; }
.flow__num { font-size: 11px; }

/* §01 ohne Verlinkung: reine Bestandsaufnahme */
a.idx-row { pointer-events: none; cursor: default; }
a.idx-row .idx-row__go { display: none !important; }
a.idx-row:active { transform: none !important; }

/* §02 Icon-Kachel wie im Desktop-Hover: weiß gefüllt, dunkles Symbol */
.greenband .vben__check, .vben__check,
.greenband .vben:hover .vben__check, .vben:hover .vben__check,
.greenband .vben:active .vben__check, .vben:active .vben__check {
  background: var(--vt-paper) !important; border-color: var(--vt-paper) !important; color: var(--vt-ink) !important;
}
.vben__check i, .vben__check svg { color: var(--vt-ink) !important; stroke: currentColor !important; }

/* §03 Leistungs-Icons wie im Desktop-Hover: grün gefüllt, weißes Symbol */
.svc__icon { background: var(--vt-signal) !important; border-color: var(--vt-signal) !important; color: var(--vt-paper) !important; }
.svc__icon i, .svc__icon svg { color: var(--vt-paper) !important; }
.svc__arrow, .svc__arrow i, .svc__arrow svg { color: var(--vt-signal) !important; }
/* Feature-Karte: gleichmäßige Ränder, volle Breite */
.svc--full { padding: clamp(1.5rem,5vw,2rem) !important; }
.svc--full .svc__title, .svc--full .svc__desc, .svc--full .svc__cta { max-width: none !important; }
.svc--full .svc__demo.demo--road { margin-top: 1.4rem; }

/* Schnell-Check (Potenzialrechner) ausblenden */
#rechner { display: none !important; }

/* §05 Ergebnisse: klarer Kopf, Kennzahlband, Grefrath zuerst */
.cases { display: flex !important; flex-direction: column !important; gap: 1.6rem !important; }
.cases .case:nth-child(1) { order: 2; }  /* Schönste Zeit */
.cases .case:nth-child(2) { order: 1; }  /* Grefrath */
.case { padding: 0 !important; overflow: hidden; border-color: var(--vt-ink) !important; }
.case__head { display: flex !important; align-items: center; justify-content: space-between; gap: .8rem; padding: 1.1rem 1.3rem !important; background: var(--vt-ink); }
.case__name { color: var(--vt-paper) !important; font-size: 1.25rem !important; }
.case__tag { color: var(--vt-paper) !important; border: 1px solid rgba(245,244,240,.4); border-radius: 999px; padding: .28rem .6rem; }
.case__story { padding: 1.3rem 1.3rem 1.1rem !important; gap: 1rem !important; border-bottom: 0 !important; }
.case__text { font-size: 13.5px !important; }
.case__metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 1px !important; background: var(--vt-divider) !important; border: 0 !important; border-top: 1px solid var(--vt-divider) !important; }
.case__metric { background: var(--vt-paper) !important; padding: 1.1rem 1.2rem !important; }
.case__metric .v { font-size: 1.9rem !important; }
.case__video { margin: 0 1.3rem 1.3rem !important; border-radius: 12px; background: var(--vt-ink) !important; border-color: var(--vt-ink) !important; color: var(--vt-paper) !important; }
.case__video .case__vplay { border-color: rgba(245,244,240,.4) !important; color: var(--vt-paper) !important; }
.case__vtitle { color: var(--vt-paper) !important; }
.case__varrow { opacity: 1 !important; transform: none !important; color: var(--vt-signal) !important; }

/* Kundenlogos: größer, 2-spaltig, „+ viele weitere“ als weiße Kachel, Autoglas hell */
.logos { grid-template-columns: repeat(2, minmax(0,1fr)) !important; background: var(--vt-border) !important; }
.logos__cell { min-height: 104px !important; padding: 1.1rem .8rem !important; }
.logos__cell img { max-height: 52px !important; max-width: 88% !important; }
.logos__cell--tall img { max-height: 72px !important; max-width: 86% !important; }
.logos__cell--ultra img { max-height: 44px !important; max-width: 90% !important; }
.logos__cell--stack img { max-height: 76px !important; max-width: 84% !important; }
.logos__cell--filler { display: none !important; }
.logos__cell--more { display: grid !important; background: #fff !important; grid-column: auto !important; }
.logos__cell--more span { color: var(--vt-fg-muted) !important; }
.logos__cell--dark { background: #fff !important; }
.logos__cell--dark .logo-dark { display: none !important; }
.logos__cell--dark .logo-light { display: block !important; }

/* Footer-Wasserzeichen kleiner in die Ecke */
.footer::before { width: 150px !important; right: -8% !important; bottom: 2% !important; opacity: .04 !important; }

/* Stimmen als Klick-Karussell */
.vcar { margin-top: clamp(2rem,5vw,3rem); }
.vcar__stage { display: grid; }
.vcar__card { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .28s var(--vt-ease), transform .28s var(--vt-ease); pointer-events: none; width: auto !important; flex: none !important; }
.vcar__card.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; position: relative; }
.vcar__card .tcard__quote { -webkit-line-clamp: unset !important; overflow: visible !important; display: block !important; }
.vcar__card .tcard__readmore, .vcar__card .tcard__more { display: none !important; }
.vcar__ctrl { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 1.3rem; }
.vcar__btn { width: 48px; height: 48px; flex: none; border-radius: 50%; border: 1px solid var(--vt-ink); background: var(--vt-paper); color: var(--vt-ink); display: grid; place-items: center; cursor: pointer; transition: background .18s var(--vt-ease), color .18s var(--vt-ease), transform .12s var(--vt-ease); }
.vcar__btn:active { transform: scale(.92); background: var(--vt-ink); color: var(--vt-paper); }
.vcar__btn svg { width: 20px; height: 20px; }
.vcar__count { font-family: var(--vt-font-mono); font-size: 12px; letter-spacing: .12em; color: var(--vt-fg-muted); min-width: 68px; text-align: center; }

/* Team-Porträts farbig */
.member__photo img { filter: none !important; }

}

/* ---------- Schmale Handys ---------- */
@media (max-width: 400px) {
  .term__body { height: 320px; min-height: 320px; }
}
@media (max-width: 380px) {
  .cta-meta { font-size: 9px !important; letter-spacing: .02em !important; }
  .btn--lg { font-size: 14.5px !important; padding: 1.05rem 1.1rem !important; }
}
@media (max-width: 560px) {
  .logos__cell { min-height: 118px !important; }
  .logos__cell img { max-height: 60px !important; }
  .logos__cell--tall img { max-height: 82px !important; }
  .logos__cell--ultra img { max-height: 50px !important; }
  .logos__cell--stack img { max-height: 86px !important; }
}

/* ---------- Tablet 861–1024: gleiches saubere 2-Spalten-Logo-Raster ---------- */
@media (min-width: 861px) and (max-width: 1024px) {
  .logos { grid-template-columns: repeat(2, minmax(0,1fr)) !important; background: var(--vt-border) !important; }
  .logos__cell--filler { display: none !important; }
  .logos__cell--more { display: grid !important; background: #fff !important; grid-column: auto !important; }
  .logos__cell--more span { color: var(--vt-fg-muted) !important; }
  .logos__cell--dark { background: #fff !important; }
  .logos__cell--dark .logo-dark { display: none !important; }
  .logos__cell--dark .logo-light { display: block !important; }
}

/* ---------- Touch-Geräte: Hover-Zustände dauerhaft (kein Zeigegerät) ---------- */
@media (hover: none) {
  /* Akzente, die am Desktop erst bei Hover grün werden */
  .idx-row__go { opacity: 1 !important; transform: none !important; color: var(--vt-signal); }
  .idx-row__num { color: var(--vt-signal); }
  .svc__arrow { color: var(--vt-signal); }
  .qual__verify { opacity: 1; }
  .demolink__go { background: var(--vt-ink); color: var(--vt-paper); }
  .flow__icon { color: var(--vt-signal); }
  .totop { color: var(--vt-signal); border-color: var(--vt-signal); }
  .hero__rating { border-color: var(--vt-ink); }
  .textlink, .link-arrow { color: var(--vt-signal); }
  .footer__col a::before { color: var(--vt-signal); }
  /* Buttons zeigen ihren Endzustand sofort statt des Hover-Füll-Effekts */
  .btn::before { display: none !important; }
  .btn { --btn-bg: var(--vt-signal); --btn-fg: var(--vt-paper); background: var(--vt-signal) !important; color: var(--vt-paper) !important; border-color: var(--vt-signal) !important; }
  .btn--ghost, .btn--ghost.btn--fill { background: transparent !important; color: var(--vt-ink) !important; border-color: var(--vt-signal) !important; }
  .btn--on-ink { background: var(--vt-paper) !important; color: var(--vt-ink) !important; border-color: var(--vt-paper) !important; }
  .btn--on-ink.btn--ghost { background: transparent !important; color: var(--vt-paper) !important; border-color: rgba(245,244,240,.5) !important; }
  .btn:active { transform: scale(.985); }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .mobile-menu a { opacity: 1; transform: none; animation: none !important; }
  .mm-foot { opacity: 1; animation: none !important; }
  .mcue__line::after { animation: none; }
}