/* =====================================================================
   APG Unterseite /lueftungssysteme/modelle/  ·  „Modelle im Vergleich"
   ---------------------------------------------------------------------
   Quelle: konzept/seite-lueftungssysteme-modelle.html (inline <style>-Block),
   1:1 portiert — NUR die modelle-spezifischen Ergänzungen. Alles, was
   bereits in hub-lueftungssysteme.css steht (--ink/--muted/--accent/...
   Tokens, .apg-hub__wrap, .apg-hub__sec*, .apg-hub__lead, .apg-hub__cta-row,
   .apg-hub__btn*, .apg-hub__arrow, .apg-hub__anchor*), wird hier NICHT
   wiederholt — auch keine eigenen --ap-*-Tokens (wie im Prototyp): die
   Werte sind praktisch identisch mit den schon vorhandenen .apg-hub-Tokens
   und werden direkt wiederverwendet (--ap-cta=#0ea5e9 == --accent,
   --ap-ink==--ink, --ap-grau==--muted, --ap-bg-toen==--page, --ap-radius==
   --radius, --ap-shadow==--shadow, --ap-line≈--line, --ap-bg-akzent≈--tint).

   Namensraum/Kollisionscheck (wie im Header von hub-grundlagen.php
   beschrieben): Der Prototyp nutzt generische Klassennamen (.hero, .v-card,
   .facts, .spec, .faq, .badge, .lead …), die mit dem Bridge-Parent-Theme
   oder WooCommerce kollidieren könnten. Deshalb sind ALLE Klassen hier mit
   apg-hub__mv- präfigiert (mv = „Modelle/Varianten") — geprüft gegen jeden
   Klassennamen in hub-lueftungssysteme.css und grundlagen.css, keine
   Übereinstimmung. Der Wurzel-Div trägt zusätzlich .apg-hub--modelle
   (Konsistenz mit hub-grundlagen.php), wird hier aber nicht als Scoping-
   Präfix gebraucht, da keine Kollision vorliegt.

   PREIS-HINWEIS: .v-price aus dem Prototyp wurde NICHT portiert (Preise
   nicht freigegeben, s. inc/hub-modelle.php-Dateikopf). Ersetzt durch
   .apg-hub__mv-anfrage (Link „Preis auf Anfrage").
   ===================================================================== */

/* ---- Hero: Vollbreite-Banner (21.07.2026, ersetzt das alte 2-Spalten-
   Layout) — Bannerfoto (1128×191, sehr breit) als Voll-Bleed-Hintergrund,
   heller Scrim links für Textkontrast, Text darüber. Bewusst eigene Klassen
   statt .apg-hub__hero — andere Bildquelle/Proportionen als der Hub. */
.apg-hub__mv-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); min-height: 320px; display: flex; align-items: center; background: var(--page); }
.apg-hub__mv-hero-media { position: absolute; inset: 0; }
.apg-hub__mv-hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }
.apg-hub__mv-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.88) 32%, rgba(255,255,255,.35) 58%, rgba(255,255,255,0) 80%);
}
.apg-hub__mv-hero-inner { position: relative; width: 100%; padding: 44px 0; }
.apg-hub__mv-hero-text { max-width: 560px; }
@media (max-width: 900px) { .apg-hub__mv-hero { min-height: 420px; } .apg-hub__mv-hero-scrim { background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.95) 55%, rgba(255,255,255,.97) 100%); } }
.apg-hub__mv-breadcrumb { font-size: 13.5px; color: var(--muted); margin-bottom: 14px; }
.apg-hub__mv-breadcrumb a { color: var(--muted); text-decoration: none; }
.apg-hub__mv-breadcrumb a:hover { color: var(--accent-ink); }
.apg-hub__mv-breadcrumb b { color: var(--ink); }
.apg-hub__mv-hero h1 { font-size: clamp(30px, 4.4vw, 44px); font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 12px; color: var(--ink); }
.apg-hub__mv-hero .apg-hub__lead { margin: 0 0 22px; }

/* ---- Body-Container: entspricht dem Prototyp-.page-wrap (Innenabstand
   oben/unten; Breite/Seitenabstand kommt bereits von .apg-hub__wrap). ---- */
.apg-hub__mv-body { padding: 40px 0 80px; }

/* ---- Schnellauswahl nach Raumgröße ---- */
.apg-hub__mv-qp-wrap { margin: 0 0 48px; }
.apg-hub__mv-qp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 0 0 14px; }
@media (max-width: 900px) { .apg-hub__mv-qp { grid-template-columns: 1fr; } }
.apg-hub__mv-qp-item { display: flex; align-items: center; gap: 15px; border: 1.5px solid var(--line); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: inherit; background: var(--panel); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.apg-hub__mv-qp-item:hover { border-color: var(--accent); box-shadow: 0 10px 26px rgba(11,61,110,.10); transform: translateY(-2px); }
.apg-hub__mv-qp-media { flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--tint); }
.apg-hub__mv-qp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apg-hub__mv-qp-body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; }
.apg-hub__mv-qp-m2 { flex: none; font-size: 13px; font-weight: 800; color: var(--accent-ink); background: var(--tint); border-radius: 8px; padding: 5px 10px; white-space: nowrap; }
.apg-hub__mv-qp-item b { font-size: 15.5px; line-height: 1.3; color: var(--ink); font-weight: 800; }
.apg-hub__mv-qp-sub { display: block; font-size: 12.5px; color: var(--muted); font-weight: 400; margin-top: 1px; }
.apg-hub__mv-qp-cta { font-size: 12.5px; font-weight: 800; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 3px; }
.apg-hub__mv-qp-item:hover .apg-hub__mv-qp-cta { text-decoration: underline; }
.apg-hub__mv-qp-note { font-size: 13.5px; color: var(--muted); margin: 0; max-width: 85ch; }
.apg-hub__mv-qp-note a { color: var(--accent-ink); font-weight: 700; text-decoration: none; }
.apg-hub__mv-qp-note a:hover { color: var(--accent-dk); }

/* ---- Serie-Block (Kopfzeile + Varianten-Grid), je 160/210G/210C ---- */
.apg-hub__mv-serie-block { margin: 0 0 56px; }
.apg-hub__mv-serie-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.apg-hub__mv-serie-head h2 { font-size: 24px; font-weight: 800; margin: 0; color: var(--ink); }
.apg-hub__mv-serie-meta { font-size: 14px; color: var(--muted); }
.apg-hub__mv-serie-link { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--accent-ink); text-decoration: none; display: inline-flex; align-items: center; }
.apg-hub__mv-serie-link:hover { color: var(--accent-dk); }
.apg-hub__mv-serie-link:hover .apg-hub__arrow { transform: translateX(3px); }

.apg-hub__mv-variant-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .apg-hub__mv-variant-grid { grid-template-columns: 1fr; } }

/* ---- Varianten-Karte (BASE/ERP/ERP PRO) ---- */
.apg-hub__mv-card { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; background: var(--panel); position: relative; display: flex; flex-direction: column; }
.apg-hub__mv-card--popular { border-color: var(--accent); box-shadow: var(--shadow); }
.apg-hub__mv-badge-popular { position: absolute; top: -11px; left: 20px; font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 3px 10px; border-radius: 10px; }

.apg-hub__mv-photo { width: 100%; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; background: var(--page); margin: 0 0 16px; }
.apg-hub__mv-photo img { width: 100%; height: 100%; object-fit: contain; display: block; }

.apg-hub__mv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.apg-hub__mv-name { font-size: 19px; font-weight: 800; color: var(--ink); }
.apg-hub__mv-anfrage { font-size: 14px; font-weight: 700; color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.apg-hub__mv-anfrage:hover { color: var(--accent-dk); text-decoration: underline; }
/* Echter Preis je Variante (ersetzt „Preis auf Anfrage") */
.apg-hub__mv-price { text-align: right; font-size: 19px; font-weight: 800; color: var(--ink); white-space: nowrap; line-height: 1.12; font-variant-numeric: tabular-nums; }
.apg-hub__mv-price small { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 1px; }
.apg-hub__mv-desc { font-size: 14px; color: var(--muted); margin: 0 0 16px; }

.apg-hub__mv-features { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.apg-hub__mv-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--ink); }
.apg-hub__mv-features .ic { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--tint); color: var(--accent-ink); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.apg-hub__mv-neu { font-weight: 700; }
.apg-hub__mv-tagneu { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-ink); background: var(--tint); padding: 1px 6px; border-radius: 6px; margin-left: 6px; }

.apg-hub__mv-benefit { background: var(--page); border-radius: 9px; padding: 13px 15px; font-size: 13.5px; color: var(--ink); margin-top: auto; }
.apg-hub__mv-benefit b { color: var(--accent-ink); }

.apg-hub__mv-cta-row { margin-top: 16px; display: flex; gap: 10px; }
.apg-hub__mv-cta-row a { flex: 1; text-align: center; padding: 11px 14px; border-radius: 9px; font-weight: 700; font-size: 14px; text-decoration: none; }
.apg-hub__mv-cta-row .apg-hub__mv-btn-primary { background: var(--accent); color: #fff; }
.apg-hub__mv-cta-row .apg-hub__mv-btn-primary:hover { background: var(--accent-ink); }
.apg-hub__mv-cta-row .apg-hub__mv-btn-ghost { border: 1.5px solid var(--line); color: var(--ink); }
.apg-hub__mv-cta-row .apg-hub__mv-btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); }

/* ---- Gilt für alle Modelle ---- */
.apg-hub__mv-facts { margin: 8px 0 56px; background: var(--page); border-radius: var(--radius); padding: 30px 28px; }
.apg-hub__mv-facts-media { margin: -30px -28px 24px; aspect-ratio: 21 / 9; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.apg-hub__mv-facts-media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.apg-hub__mv-facts h2 { font-size: 22px; font-weight: 800; margin: 0 0 18px; color: var(--ink); }
.apg-hub__mv-facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 900px) { .apg-hub__mv-facts-grid { grid-template-columns: 1fr; } }
.apg-hub__mv-fact { background: var(--panel); border-radius: 9px; padding: 16px 18px; }
.apg-hub__mv-fact b { display: block; font-size: 14.5px; margin-bottom: 4px; color: var(--ink); }
.apg-hub__mv-fact p { margin: 0; font-size: 13.5px; color: var(--muted); }

/* ---- Ausstattung im Detail (Vergleichstabelle) ---- */
.apg-hub__mv-spec { margin: 0 0 56px; }
.apg-hub__mv-spec h2 { font-size: 22px; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.apg-hub__mv-spec-sub { font-size: 14px; color: var(--muted); margin: 0 0 18px; max-width: 90ch; }
.apg-hub__mv-spec-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.apg-hub__mv-spec-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.apg-hub__mv-spec-table th, .apg-hub__mv-spec-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.apg-hub__mv-spec-table th:first-child, .apg-hub__mv-spec-table td:first-child { text-align: left; padding-left: 0; }
.apg-hub__mv-spec-table thead th { font-size: 13px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: #fff; border-bottom: none; width: 150px; }
.apg-hub__mv-spec-table thead th:first-child { background: transparent; color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; width: auto; }
.apg-hub__mv-spec-table thead th.col-base { background: var(--muted); border-radius: 9px 9px 0 0; }
.apg-hub__mv-spec-table thead th.col-erp { background: #39a35a; border-radius: 9px 9px 0 0; }
.apg-hub__mv-spec-table thead th.col-pro { background: var(--accent); border-radius: 9px 9px 0 0; }
.apg-hub__mv-spec-table thead th small { display: block; font-size: 10.5px; font-weight: 700; opacity: .9; text-transform: none; letter-spacing: 0; margin-top: 2px; }
.apg-hub__mv-spec-table td.f b { display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.apg-hub__mv-spec-table td.f span { display: block; font-size: 12.5px; color: var(--muted); max-width: 56ch; }
.apg-hub__mv-spec-table td.y { color: var(--accent-ink); font-weight: 800; font-size: 16px; }
.apg-hub__mv-spec-table td.n { color: #b6c2cf; font-weight: 700; font-size: 15px; }
.apg-hub__mv-spec-table tbody tr:hover td { background: var(--page); }

/* ---- FAQ: natives <details>-Akkordeon ---- */
.apg-hub__mv-faq { margin: 0 0 40px; }
.apg-hub__mv-faq h2 { font-size: 22px; font-weight: 800; margin: 0 0 14px; color: var(--ink); }
.apg-hub__mv-faq details { border: 1.5px solid var(--line); border-radius: var(--radius); padding: 0 18px; margin-bottom: 10px; background: var(--panel); }
.apg-hub__mv-faq summary { cursor: pointer; font-weight: 700; font-size: 15px; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--ink); }
.apg-hub__mv-faq summary::-webkit-details-marker { display: none; }
.apg-hub__mv-faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--accent-ink); flex: none; }
.apg-hub__mv-faq details[open] summary::after { content: "\2013"; }
.apg-hub__mv-faq details p { margin: 0 0 15px; font-size: 14px; color: var(--muted); max-width: 85ch; }