/* ════════════════════════════════════════════════════════════════
   AI STATUS QUO · V4 — Synthese (finale Produktseite)
   Basis konstant, vier Varianten (a–d) nur in den offenen Blöcken
   Ergebnisse · Passung · Weitermachen.

   Quellen der Synthese (re-scoped auf .aisq4, kein Klassen-Stacking):
     Hero      = I (Bild 30% rechts, sanfter Fade) auf F-Bühne + B-Typo
     Interakt. = E (Reaction-Box-DNA: rounded corners, antippbare Pills)
     Rahmen    = B (Serif-H2, animierter Preis-Kringel)
   Lädt nach style.css + aisq3.css (Basis-.aq*-Regeln + Keyframes).
   ════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   1 · HERO  —  3i (B × F × I) 1:1, re-scoped
   ─────────────────────────────────────────────────────────────── */
.aisq4 .aq-hero{position:relative; background:var(--ink); padding:104px 0 112px; overflow:hidden;}
.aisq4 .aq-hero::before{
  content:""; position:absolute; inset:0 0 0 30%;
  background:var(--aq-hero-img, url('../images/headers/ai-status-quo-header.jpg')) 62% 40%/cover no-repeat;
  opacity:.62;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 38%);
          mask-image:linear-gradient(90deg, transparent 0, #000 38%);
}
.aisq4 .aq-hero::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,13,13,.6) 0 30%, rgba(13,13,13,0) 58%);
}
.aisq4 .aq-hero__inner{position:relative; z-index:1; display:block;}
.aisq4 .aq-hero__text{max-width:600px; position:relative; z-index:2;}
.aisq4 .aq-hero__visual{display:none;}
.aisq4 .aq-eyebrow{color:rgba(251,250,249,.6);}
/* B-Typo */
.aisq4 .aq p.aq-claim{color:#fff; font-size:clamp(2.1rem,4vw,3.4rem);}
.aisq4 .aq p.aq-claim em{color:var(--blue-wash);}
.aisq4 .aq-hl{background:linear-gradient(to top, var(--yellow) 0 56%, transparent 56%); color:var(--ink); padding:0 3px;}
.aisq4 .aq-underline{display:block;}
.aisq4 .aq-underline path{stroke-dasharray:100; stroke-dashoffset:100; animation:aqDraw 1.1s var(--ease) .35s forwards;}
.aisq4 .aq-sub{color:rgba(251,250,249,.78); max-width:50ch;}
.aisq4 .aq-hero__meta{color:rgba(251,250,249,.55);}
.aisq4 .aq-hero .aq-btn--primary{background:var(--yellow); border-color:var(--yellow); color:var(--ink);}
.aisq4 .aq-hero .aq-btn--primary:hover{background:#fff; border-color:#fff;}
/* Produkttitel: voller gelber Marker-Balken (F) */
.aisq4 .aq h1.aq-product{display:inline-block; background:var(--yellow); color:var(--ink); padding:8px 14px 6px;}
.aisq4 .aq-product__dot{color:var(--blue);}

@media (max-width:980px){
  .aisq4 .aq-hero::before{
    inset:auto 0 0 0; height:46%; background-position:center 30%;
    -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 40%);
            mask-image:linear-gradient(180deg, transparent 0, #000 40%);
  }
  .aisq4 .aq-hero::after{background:linear-gradient(180deg, rgba(13,13,13,.7) 0 40%, rgba(13,13,13,0) 70%);}
  .aisq4 .aq-hero{padding-bottom:46vw;}
}

/* ───────────────────────────────────────────────────────────────
   2 · GLOBALE DNA  —  E (Reaction-Box) + B (Serif-H2)
   ─────────────────────────────────────────────────────────────── */
.aisq4 .aq-h2{font-family:var(--font-serif); font-weight:400; font-size:clamp(1.8rem,2.8vw,2.4rem); letter-spacing:-.015em;}
.aisq4 .aq-block-eyebrow{color:var(--blue);}
.aisq4 .aq-btn{border-radius:999px;}
.aisq4 .aq-btn--primary{box-shadow:4px 4px 0 -1px var(--blue-wash);}

/* Resonanz — antippbare Pills (E) */
.aisq4 .aq-res-list{max-width:820px;}
.aisq4 .aq-res-item{
  border:1.5px solid rgba(26,26,26,.25); border-radius:16px; padding:16px 20px;
  cursor:pointer; user-select:none; background:var(--paper-pure);
  transition:transform .12s var(--ease), border-color .12s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.aisq4 .aq-res-item:hover{transform:translateY(-2px); border-color:var(--ink);}
.aisq4 .aq-res-item .aq-check path{stroke:rgba(26,26,26,.25); transition:stroke .2s var(--ease);}
.aisq4 .aq-res-item.is-checked{background:var(--blue); border-color:var(--blue); color:#fff;}
.aisq4 .aq-res-item.is-checked .aq-check path{stroke:var(--yellow);}
.aisq4 .aq-resonanz .aq-h2::after{content:" — tipp an, was zutrifft."; font-family:var(--font-sans); font-size:.55em; color:var(--silver); font-style:italic;}
.aisq4 .aq-res-coda{font-family:var(--font-mono); font-size:.82rem; letter-spacing:.04em; color:var(--blue);}

/* Timing-Block ruhig absetzen (E) */
.aisq4 .aq-jetzt{background:var(--paper-pure); border-top:1px solid rgba(26,26,26,.1); border-bottom:1px solid rgba(26,26,26,.1);}

/* Klartext-Karten gerundet (E) */
.aisq4 .aq-risk-card{border-radius:16px; border-color:rgba(26,26,26,.18);}

/* ───────────────────────────────────────────────────────────────
   3 · RAHMEN  —  B (animierter Preis-Kringel)
   ─────────────────────────────────────────────────────────────── */
.aisq4 .aq-mk-circle{display:block;}
.aisq4 .aq-mk-circle path{stroke-dasharray:100; stroke-dashoffset:100; stroke:var(--blue);}
.aisq4 .aq-revealed .aq-mk-circle path,
.aisq4 .aq-format:not(.aq-will-reveal) .aq-mk-circle path{animation:aqDraw .9s var(--ease) .2s forwards;}

/* ═══════════════════════════════════════════════════════════════
   BILDHAFTE ICONS (geteiltes Markup, je Variante ein-/ausgeblendet)
   ═══════════════════════════════════════════════════════════════ */
.aq-ico{flex:0 0 auto; display:none; color:var(--blue);}
.aq-ico svg{display:block;}
.aq-out-illu{display:none;}
.aq-wen-verdict{display:none;}
.aisq4--c .aq-wen-verdict{display:block;}

/* ═══════════════════════════════════════════════════════════════
   BLOCK · ERGEBNISSE — 4 Treatments (visuell-interaktiv + bildhaft)
   ═══════════════════════════════════════════════════════════════ */

/* ── a · Karten-Raster — jedes Ergebnis eine Reaction-Box-Karte ── */
.aisq4--a .aq-out-grid{grid-template-columns:1fr 1fr; gap:32px 40px;}
.aisq4--a .aq-out-list{gap:14px;}
.aisq4--a .aq-out-list li{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  border:1.5px solid rgba(26,26,26,.16); border-radius:16px; background:var(--paper-pure);
  transition:transform .12s var(--ease), border-color .12s var(--ease), box-shadow .12s var(--ease);
}
.aisq4--a .aq-out-list li::before{display:none;}
.aisq4--a .aq-out-list li:hover{transform:translateY(-2px); border-color:var(--blue); box-shadow:5px 5px 0 -1px var(--blue-wash);}
.aisq4--a .aq-ico{display:block; margin-top:1px;}
.aisq4--a .aq-details{
  border:1.5px solid rgba(26,26,26,.16); border-radius:14px; margin-top:14px; padding:0 18px;
}
.aisq4--a .aq-details summary{padding:13px 24px 13px 0;}
.aisq4--a .aq-out-quote{
  margin-top:38px; padding:22px 26px; border-radius:18px; background:var(--blue); color:#fff;
  box-shadow:6px 6px 0 -1px var(--blue-wash); font-size:1.15rem;
}

/* ── b · Bildhafte Panels — zwei große Tafeln mit Illustration ── */
.aisq4--b .aq-out-grid{grid-template-columns:1fr 1fr; gap:28px;}
.aisq4--b .aq-out-col{
  border:1.5px solid var(--ink); border-radius:20px; overflow:hidden; background:var(--paper-pure);
  box-shadow:7px 7px 0 -1px var(--blue-wash); display:flex; flex-direction:column;
}
.aisq4--b .aq-out-col > .aq-h3{
  margin:0; padding:20px 26px; background:var(--bone); border-bottom:1.5px solid var(--ink);
  display:flex; align-items:center; gap:14px;
}
.aisq4--b .aq-out-illu{display:flex; align-items:center; justify-content:center; padding:26px 26px 6px; color:var(--blue);}
.aisq4--b .aq-out-illu svg{width:100%; max-width:240px; height:auto;}
.aisq4--b .aq-out-list{margin:0; padding:18px 26px 6px;}
.aisq4--b .aq-out-list li{padding-left:26px;}
.aisq4--b .aq-out-list li::before{width:9px; height:9px; top:.5em;}
.aisq4--b .aq-details{margin:auto 26px 8px; border:0; border-top:1px solid rgba(26,26,26,.18);}
.aisq4--b .aq-out-quote{
  grid-column:1 / -1; margin-top:32px; text-align:center; font-size:1.3rem;
}

/* ── c · Galerie — Illustration führt, Text folgt ── */
.aisq4--c .aq-out-grid{grid-template-columns:1fr 1fr; gap:36px 48px;}
.aisq4--c .aq-out-illu{
  display:block; margin:0 0 22px; padding:30px; border-radius:20px;
  background:linear-gradient(135deg, var(--bone), var(--paper-pure));
  border:1.5px solid rgba(26,26,26,.12); text-align:center; color:var(--blue);
}
.aisq4--c .aq-out-illu svg{width:100%; max-width:200px; height:auto;}
.aisq4--c .aq-ico{display:block; color:var(--blue);}
.aisq4--c .aq-out-list li{display:flex; gap:12px; align-items:flex-start; padding-left:0;}
.aisq4--c .aq-out-list li::before{display:none;}
.aisq4--c .aq-out-quote{margin-top:40px;}

/* ── d · Mosaik — kompakte Bild-Kacheln, Hover deckt auf ── */
.aisq4--d .aq-out-grid{grid-template-columns:1fr 1fr; gap:30px 44px;}
.aisq4--d .aq-out-list{grid-template-columns:1fr 1fr; display:grid; gap:14px;}
.aisq4--d .aq-out-list li{
  padding:20px 16px; border-radius:16px; background:var(--paper-pure);
  border:1.5px solid rgba(26,26,26,.14); text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.aisq4--d .aq-out-list li::before{display:none;}
.aisq4--d .aq-out-list li:hover{transform:translateY(-3px); border-color:var(--blue); box-shadow:0 14px 28px -14px rgba(0,0,255,.4);}
.aisq4--d .aq-ico{display:block;}
.aisq4--d .aq-ico svg{width:40px; height:40px;}
.aisq4--d .aq-out-list li strong{display:block;}
.aisq4--d .aq-out-col > .aq-h3{margin-bottom:18px;}
.aisq4--d .aq-out-quote{margin-top:38px;}

/* ═══════════════════════════════════════════════════════════════
   BLOCK · PASSUNG — 4 Treatments
   ═══════════════════════════════════════════════════════════════ */

/* ── a · Reaction-Box-Karten (ja/nein) ── */
.aisq4--a .aq-wen-grid{gap:24px;}
.aisq4--a .aq-wen-col{
  border:1.5px solid rgba(26,26,26,.18); border-radius:20px; padding:26px 26px 22px; background:var(--paper-pure);
}
.aisq4--a .aq-wen-col--yes{border-color:var(--blue); box-shadow:6px 6px 0 -1px var(--blue-wash);}
.aisq4--a .aq-wen-col--no{background:var(--bone);}

/* ── b · Editorial-Split mit Hartschatten (B) ── */
.aisq4--b .aq-wen-grid{gap:28px;}
.aisq4--b .aq-wen-col{border:1.5px solid var(--ink); border-radius:0; padding:28px; box-shadow:6px 6px 0 -1px var(--ink);}
.aisq4--b .aq-wen-col--yes{box-shadow:6px 6px 0 -1px var(--blue);}
.aisq4--b .aq-wen-col .aq-h3{font-family:var(--font-serif); font-weight:400; font-size:1.35rem;}

/* ── c · Selbsttest — antippbare Aussagen (interaktiv) ── */
.aisq4--c .aq-wen-grid{gap:22px;}
.aisq4--c .aq-wen-col ul{gap:12px;}
.aisq4--c .aq-wen-col li{
  list-style:none; padding:14px 18px 14px 44px; border-radius:14px;
  border:1.5px solid rgba(26,26,26,.2); background:var(--paper-pure);
  cursor:pointer; user-select:none; transition:transform .12s var(--ease), border-color .12s, background .2s, color .2s;
}
.aisq4--c .aq-wen-col li:hover{transform:translateY(-2px); border-color:var(--ink);}
.aisq4--c .aq-wen-col--yes li::before{content:"→"; left:18px;}
.aisq4--c .aq-wen-col--no li::before{content:"✕"; left:18px;}
.aisq4--c .aq-wen-col--yes li.is-on{background:var(--blue); border-color:var(--blue); color:#fff;}
.aisq4--c .aq-wen-col--yes li.is-on::before{color:var(--yellow);}
.aisq4--c .aq-wen-col--no li.is-on{background:var(--ink); border-color:var(--ink); color:#fff;}
.aisq4--c .aq-wen-col--no li.is-on::before{color:var(--silver);}
.aisq4--c .aq-wen-verdict{
  grid-column:1 / -1; margin-top:8px; text-align:center; min-height:1.4em;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.04em; color:var(--blue);
}

/* ── d · Gegenüberstellung — Mittellinie, alternierend ── */
.aisq4--d .aq-wen-grid{grid-template-columns:1fr; max-width:760px; gap:0; position:relative;}
.aisq4--d .aq-wen-col{padding:0;}
.aisq4--d .aq-wen-col .aq-h3{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  padding:10px 0; border-bottom:2px solid var(--ink);
}
.aisq4--d .aq-wen-col--yes .aq-h3{color:var(--blue);}
.aisq4--d .aq-wen-col li{padding:14px 0 14px 28px; border-bottom:1px solid rgba(26,26,26,.12);}

/* ═══════════════════════════════════════════════════════════════
   BLOCK · WEITERMACHEN — 4 Treatments
   ═══════════════════════════════════════════════════════════════ */

/* ── a · Reaction-Box-Karten, Hauptweg blau ── */
.aisq4--a .aq-weg{border-radius:18px; border-color:rgba(26,26,26,.2);}
.aisq4--a .aq-weg .aq-btn{border-radius:999px;}
.aisq4--a .aq-weg--main{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:6px 6px 0 -1px var(--blue-wash);}
.aisq4--a .aq-weg--main h3,.aisq4--a .aq-weg--main p{color:#fff;}
.aisq4--a .aq-weg--main p{opacity:.85;}
.aisq4--a .aq-weg--main .aq-btn{background:var(--yellow); border-color:var(--yellow); color:var(--ink);}
.aisq4--a .aq-weg--main .aq-weg__num{color:var(--yellow);}
.aisq4--a .aq-weg__num{color:var(--blue);}

/* ── b · Hartschatten-Karten (B) ── */
.aisq4--b .aq-weg{border:1.5px solid var(--ink); border-radius:0; box-shadow:5px 5px 0 -1px var(--blue-wash);}
.aisq4--b .aq-weg--main{background:var(--yellow); box-shadow:5px 5px 0 -1px var(--ink);}
.aisq4--b .aq-weg--main p{color:var(--ink);}
.aisq4--b .aq-weg--main .aq-btn{background:var(--blue); border-color:var(--blue); color:#fff;}
.aisq4--b .aq-weg__num{font-family:var(--font-wide); font-weight:700; font-size:1.5rem; color:var(--blue);}

/* ── c · Nummerierte Vollbreit-Reihen ── */
.aisq4--c .aq-wege-grid{grid-template-columns:1fr; gap:14px; max-width:820px;}
.aisq4--c .aq-weg{
  flex-direction:row; align-items:center; gap:22px; border-radius:16px;
  border-color:rgba(26,26,26,.18); padding:22px 26px;
}
.aisq4--c .aq-weg__num{
  flex:0 0 auto; font-family:var(--font-wide); font-weight:700; font-size:1.8rem;
  color:var(--bone); -webkit-text-stroke:1.5px var(--blue); line-height:1; order:-1;
}
.aisq4--c .aq-weg h3{flex:0 0 30%;}
.aisq4--c .aq-weg p{flex:1;}
.aisq4--c .aq-weg .aq-btn{align-self:center;}
.aisq4--c .aq-weg--main{border-color:var(--blue); box-shadow:5px 5px 0 -1px var(--blue-wash);}
@media (max-width:720px){.aisq4--c .aq-weg{flex-direction:column; align-items:flex-start;}.aisq4--c .aq-weg h3{flex:none;}}

/* ── d · 2×2, Hauptweg spannt volle Höhe ── */
.aisq4--d .aq-wege-grid{grid-template-columns:1fr 1fr; gap:18px;}
.aisq4--d .aq-weg{border-radius:18px; border-color:rgba(26,26,26,.16);}
.aisq4--d .aq-weg--main{
  grid-row:span 2; justify-content:center; background:var(--ink); color:#fff; border-color:var(--ink);
}
.aisq4--d .aq-weg--main h3,.aisq4--d .aq-weg--main p{color:#fff;}
.aisq4--d .aq-weg--main p{opacity:.8;}
.aisq4--d .aq-weg--main .aq-weg__num{color:var(--yellow);}
.aisq4--d .aq-weg--main .aq-btn{background:var(--yellow); border-color:var(--yellow); color:var(--ink);}
@media (max-width:600px){.aisq4--d .aq-weg--main{grid-row:auto;}}