/* =====================================================================
   APG Unterseite /lueftungssysteme/montage/  ·  „Installation & Montage"
   ---------------------------------------------------------------------
   Quelle: konzept/preview-montage/index.html (inline <style>-Blöcke),
   1:1 portiert — NUR die montage-spezifischen Ergänzungen. Alles, was
   bereits in hub-lueftungssysteme.css steht (--ink/--muted/--accent/...
   Tokens, .apg-hub__hero*, .apg-hub__anchor*, .apg-hub__sec*, .apg-hub__wrap*,
   .apg-hub__center, .apg-hub__checks, .apg-hub__ph/-ph-cap, .apg-hub__arrow),
   wird hier NICHT wiederholt. .apg-hub__faq ist bereits über grundlagen.css
   sitewide geladen (functions.php $modules-Array) — ebenfalls nicht erneut
   portiert.

   Ausgelassen (im Preview-<head> vorhanden, aber im finalen, mit Tim
   gezurrten Markup dieser Seite ungenutzt — Altlast einer monolithischen
   Vorlagen-CSS, die auch die Preview-Dateien der Schwesterseiten teilen,
   siehe dieselbe Dedup-Praxis in grundlagen.css):
   .bar/.logo/.apg-hub__soon-sec (Preview-Rahmen-Chrome, kein Seiteninhalt),
   .apg-hub__anim/.apg-hub__wrg (Gegenstrom-Animation, gehört zu /grundlagen/),
   .apg-hub__vcar-wrap/.apg-hub__vpair/.apg-hub__vp-img/.apg-hub__vp-card/
   .apg-hub__vlist/.apg-hub__vcar-arrow/.apg-hub__gloss (Paar-Karussell,
   gehört zu /grundlagen/), .apg-hub__mtbl (Maß-Tabelle, ungenutzt),
   .apg-hub__spin (360°-Viewer, gehört zu /grundlagen/),
   .apg-hub__steps/.apg-hub__step/.apg-hub__facts/.apg-hub__proc/
   .apg-hub__pstep/.apg-hub__eff/.apg-hub__circle/.apg-hub__mini (frühere
   Entwurfs-Iterationen von Block 2/6 — inhaltlich ersetzt durch
   .apg-vsteps/.apg-vrow bzw. .apg-rules/.apg-wsteps; Weglassen verhindert
   zudem eine Kollision mit dem gleichnamigen, aber anders gestalteten
   .apg-hub__steps aus hub-lueftungssysteme.css S9),
   .apg-hub__filt/.apg-hub__filt2 (Filterung, gehört zu /grundlagen/),
   .apg-hub__cmp/.apg-hub__pl/.apg-hub__tgwrap/.apg-hub__toggle/
   .apg-hub__panel (Vergleichs-Toggle, ungenutzt), .apg-hub__vp-img--photo/
   .badge--prob/.apg-hub__vlist--x/.desc2 (gehört zu /grundlagen/-Karussells).
   Innerhalb von Block 5 zusätzlich ungenutzt (im Preview definiert, aber
   im finalen Markup nicht eingesetzt): .apg-case__sub/.apg-case__dgrid/
   .apg-case__dcard/.apg-case__dimg/.apg-case__dbody.

   Namespacing: Wie /grundlagen/ hat auch diese Seite eine eigene 2-Spalten-
   Kontakt-/Formular-Sektion (Block 9) mit denselben Klassennamen
   .apg-hub__contact/.apg-hub__form wie der Hub (S11, anderes Layout) UND
   wie /grundlagen/ (gleiches Layout, aber unter .apg-hub--grundlagen
   skopiert). Da alle drei CSS-Module sitewide geladen werden, sind die
   Kontakt-/Formular-Regeln hier unter .apg-hub--montage skopiert.
   ===================================================================== */

/* =====================================================================
   BLOCK 2 · PROZESS „So läuft Ihr Einbau:" — zentrierte Überschrift +
   gestapelte Schritte (Rundfoto/Rechteckfoto links, Text rechts).
   ===================================================================== */
.apg-vsteps { max-width: 1000px; margin: 0 auto; padding: 0 8px; }
.apg-vsteps__eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; text-align: center; }
.apg-vsteps__title { font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; color: var(--ink); letter-spacing: -.02em; line-height: 1.06; margin: 0 auto; max-width: 20ch; text-align: center; }
.apg-vsteps__intro { max-width: 60ch; margin: 18px auto 0; font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); line-height: 1.6; text-align: center; }
.apg-vlist { margin: 52px auto 0; }
.apg-vrow { display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 5vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; }
.apg-vrow__media { width: 100%; aspect-ratio: 4 / 3; border-radius: 22px; overflow: hidden; background: #eef2f6; }
.apg-vrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apg-vrow__h3 { margin: 0; font-size: clamp(21px, 2.4vw, 28px); font-weight: 800; color: var(--ink); line-height: 1.15; letter-spacing: -.01em; }
.apg-vrow__p { margin: 14px 0 0; font-size: clamp(15px, 1.4vw, 17px); color: var(--muted); line-height: 1.6; }
.apg-vrow__cta { display: inline-block; margin-top: 16px; color: var(--accent-ink); font-size: 15px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.apg-vrow__cta:hover { color: var(--accent-dk); }
.apg-vsteps__foot { margin: 36px auto 0; padding: 0 8px; font-size: 14px; color: #8a97a6; text-align: center; }
@media (max-width: 720px) { .apg-vrow { grid-template-columns: 1fr; gap: 20px; } .apg-vrow__media { aspect-ratio: 16 / 10; } }

/* =====================================================================
   BLOCK 3 · LEISTUNGEN DES MONTAGESERVICE — 3-Spalten-Karten, Icon-Bubbles.
   ===================================================================== */
.apg-svc { max-width: 1160px; margin: 0 auto; padding: 0 8px; }
.apg-svc__head { max-width: 760px; }
.apg-svc__eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; }
.apg-svc__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: var(--ink); letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.apg-svc__intro { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--muted); line-height: 1.6; }
.apg-svc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 44px; }
.apg-svc__card { background: var(--panel); border: 1px solid #eef1f5; border-radius: 22px; padding: clamp(26px, 2.6vw, 36px); }
.apg-svc__ic { width: 60px; height: 60px; border-radius: 16px; background: var(--tint); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; }
.apg-svc__ic svg { width: 30px; height: 30px; stroke: var(--accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apg-svc__card h3 { margin: 0; font-size: clamp(18px, 1.7vw, 21px); font-weight: 800; color: var(--ink); line-height: 1.2; }
.apg-svc__card p { margin: 10px 0 0; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
@media (max-width: 860px) { .apg-svc__grid { grid-template-columns: 1fr; gap: 18px; } }

/* =====================================================================
   BLOCK 4 · PASST DAS BEI MIR? — Voraussetzungen-Checkliste (prana.ua-Stil).
   ===================================================================== */
.apg-req { max-width: 1160px; margin: 0 auto; padding: 0 8px; }
.apg-req__head { max-width: 760px; }
.apg-req__eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; }
.apg-req__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: var(--ink); letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.apg-req__intro { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--muted); line-height: 1.6; }
.apg-req__panel { margin-top: 36px; background: var(--page); border: 1px solid #e6eef5; border-radius: 24px; padding: clamp(28px, 3vw, 44px); }
.apg-req__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 44px; }
.apg-req__item { display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.apg-req__check { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: 2px; flex-shrink: 0; }
.apg-req__check svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.apg-req__t { font-size: 16.5px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.apg-req__d { margin: 4px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
.apg-req__note { margin: 28px 0 0; font-size: 15.5px; color: var(--muted); line-height: 1.6; }
.apg-req__note a { color: var(--accent-ink); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) { .apg-req__grid { grid-template-columns: 1fr; gap: 18px; } }

/* =====================================================================
   BLOCK 5 · AUCH IM BESTAND UND BEI SONDERFÄLLEN — 4 Icon-Karten +
   WDVS-Fassade-Fallstudie (echtes Foto) + Hinweis.
   ===================================================================== */
.apg-case { max-width: 1160px; margin: 0 auto; padding: 0 8px; }
.apg-case__head { max-width: 780px; }
.apg-case__eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; }
.apg-case__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: var(--ink); letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.apg-case__intro { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--muted); line-height: 1.6; }
.apg-case__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.apg-case__card { background: var(--panel); border: 1px solid #eef1f5; border-radius: 20px; padding: 26px 28px; display: grid; grid-template-columns: 52px 1fr; gap: 18px; align-items: start; }
.apg-case__ic { width: 52px; height: 52px; border-radius: 14px; background: var(--tint); display: flex; align-items: center; justify-content: center; }
.apg-case__ic svg { width: 26px; height: 26px; stroke: var(--accent-ink); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.apg-case__roomimg { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin: 0 0 18px; }
.apg-case__t { font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.25; }
.apg-case__d { margin: 6px 0 0; font-size: 15px; color: var(--muted); line-height: 1.55; }
.apg-case__media { margin: 26px 0 0; }
.apg-case__media img { width: 100%; height: auto; display: block; border-radius: 14px; }
.apg-case__media figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.apg-case__note { margin: 30px auto 0; max-width: 820px; font-size: 15px; color: var(--muted); line-height: 1.6; text-align: center; }
.apg-case__note a { font-weight: 800; color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) { .apg-case__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   BLOCK 6 · WICHTIGE MONTAGE-REGELN — 4 Key-rules-Karten (Bild links) +
   Werksablauf „8 Schritte" (nummerierte Liste + 2 Foto-Figuren).
   ===================================================================== */
.apg-rules { max-width: 1160px; margin: 0 auto; padding: 0 8px; }
.apg-rules__head { max-width: 780px; }
.apg-rules__eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; }
.apg-rules__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: var(--ink); letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.apg-rules__intro { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--muted); line-height: 1.6; }
.apg-rules__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 40px; }
.apg-rules__card { display: grid; grid-template-columns: 200px 1fr; gap: 24px; align-items: center; background: var(--panel); border: 1px solid #eef1f5; border-radius: 20px; overflow: hidden; padding-right: 26px; }
.apg-rules__img { width: 200px; aspect-ratio: 1 / 1; background: #eef2f6; overflow: hidden; }
.apg-rules__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apg-rules__body { padding: 20px 0; }
.apg-rules__body h3 { margin: 0; font-size: clamp(17px, 1.7vw, 20px); font-weight: 800; color: var(--ink); line-height: 1.2; }
.apg-rules__body p { margin: 8px 0 0; font-size: 15px; color: var(--muted); line-height: 1.55; }
@media (max-width: 920px) { .apg-rules__grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .apg-rules__card { grid-template-columns: 1fr; padding-right: 0; } .apg-rules__img { width: 100%; aspect-ratio: 16 / 10; } .apg-rules__body { padding: 20px; } }

.apg-wsteps { max-width: 1160px; margin: 56px auto 0; padding: 0 28px; }
.apg-wsteps__head h3 { font-size: 24px; font-weight: 800; margin: 0 0 6px; color: var(--ink); }
.apg-wsteps__head p { margin: 0 0 24px; color: var(--muted); font-size: 16px; }
.apg-wsteps__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 36px; align-items: start; }
.apg-wsteps__list { list-style: none; margin: 0; padding: 0; counter-reset: ws; display: grid; gap: 12px; }
.apg-wsteps__list li { counter-increment: ws; position: relative; padding: 14px 18px 14px 58px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; font-size: 16px; color: var(--ink); font-weight: 600; }
.apg-wsteps__list li::before { content: counter(ws); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 999px; background: var(--tint); color: var(--accent-ink); font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.apg-wsteps__media { display: grid; gap: 18px; }
.apg-wsteps__media figure { margin: 0; }
.apg-wsteps__media img { width: 100%; height: auto; display: block; border-radius: 14px; }
.apg-wsteps__media figcaption { font-size: 13.5px; color: var(--muted); margin-top: 8px; }
@media (max-width: 860px) { .apg-wsteps__grid { grid-template-columns: 1fr; } }

/* =====================================================================
   BLOCK 7 · WER BAUT EIN? — 2-Spalten (Text+Trust+CTA / Foto) +
   Kundenstimme-Platzhalter (gestrichelte Karte, bewusst, s. inc-Datei-Kopf).
   ===================================================================== */
.apg-who { max-width: 1160px; margin: 0 auto; padding: 0 8px; }
.apg-who__top { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.apg-who__eyebrow { font-size: 14px; font-weight: 700; color: var(--muted); margin: 0 0 10px; letter-spacing: .01em; }
.apg-who__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; color: var(--ink); letter-spacing: -.015em; line-height: 1.1; margin: 0; }
.apg-who__lead { margin: 16px 0 0; font-size: clamp(16px, 1.5vw, 18px); color: var(--muted); line-height: 1.6; }
.apg-who__points { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.apg-who__points li { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 16px; color: var(--ink-soft); line-height: 1.45; }
.apg-who__points .c { width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.apg-who__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; padding: 14px 26px; border-radius: 999px; }
.apg-who__cta:hover { background: var(--accent-ink); }
.apg-who__media { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 3; }
.apg-who__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.apg-who__qph { margin-top: clamp(30px, 4vw, 46px); background: var(--panel); border: 1.5px dashed #cfd9e4; border-radius: 20px; padding: 26px 30px; display: flex; gap: 16px; align-items: flex-start; }
.apg-who__qph .q { font-size: 44px; line-height: .7; color: #cfd9e4; font-weight: 800; flex-shrink: 0; }
.apg-who__qph p { margin: 0; font-size: 16px; color: #8a97a6; font-style: italic; line-height: 1.5; }
@media (max-width: 820px) { .apg-who__top { grid-template-columns: 1fr; gap: 28px; } }

/* =====================================================================
   BLOCK 9 · KONTAKT & MONTAGE-ANFRAGE — identisches 2-Spalten-Layout wie
   /grundlagen/ Block 10, hier unter .apg-hub--montage skopiert (s. Header).
   ===================================================================== */
.apg-hub--montage .apg-hub__contact { max-width: 1120px; margin: 30px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; }
@media (max-width: 820px) { .apg-hub--montage .apg-hub__contact { grid-template-columns: 1fr; gap: 32px; } }
.apg-hub--montage .apg-hub__contact h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 800; color: var(--ink); margin: 0 0 16px; line-height: 1.12; letter-spacing: -.01em; }
.apg-hub--montage .apg-hub__contact .lead { font-size: 17px; color: var(--muted); line-height: 1.6; margin: 0 0 16px; }
.apg-hub--montage .apg-hub__contact .cbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; font-size: 16px; font-weight: 800; text-decoration: none; padding: 14px 26px; border-radius: 999px; margin-top: 8px; }
.apg-hub--montage .apg-hub__contact .cbtn:hover { background: var(--accent-ink); }
.apg-hub--montage .apg-hub__form label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin: 14px 0 7px; }
.apg-hub--montage .apg-hub__form label:first-child { margin-top: 0; }
.apg-hub--montage .apg-hub__form input, .apg-hub--montage .apg-hub__form textarea { width: 100%; border: 1px solid #d6dde4; border-radius: 10px; padding: 14px 16px; font-family: inherit; font-size: 15px; color: var(--ink); background: #fff; box-sizing: border-box; }
.apg-hub--montage .apg-hub__form input:focus, .apg-hub--montage .apg-hub__form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.apg-hub--montage .apg-hub__form textarea { min-height: 130px; resize: vertical; }
.apg-hub--montage .apg-hub__form .sendbtn { width: 100%; margin-top: 20px; background: var(--ink); color: #fff; border: 0; border-radius: 10px; padding: 17px; font-size: 16px; font-weight: 800; font-family: inherit; cursor: pointer; }
.apg-hub--montage .apg-hub__form .sendbtn:hover { background: #2a3355; }
.apg-hub--montage .apg-hub__form .note { font-size: 13px; color: #8b95a0; line-height: 1.5; margin: 14px 0 0; }
