/* ============================================================
   MMHP Ölkreislauf-Simulator — Teaser-Kachel + Vollbild-Popup
   ============================================================
   Autarke, wrapper-NEUTRALE Komponente (ADR-029, Welle 2).
   Wird von scripts/assemble-dist.mjs zusammen mit dem Marker
   <!-- MMHP_TOOL_TEASER:<motor> --> in jede Seite eingebunden,
   die einen Teaser trägt (aktuell: 3 Öldruck-LPs + Lösungsfinder-LP).

   WARUM eigene Datei statt mmhp-lp.css:
   Der Teaser sitzt auf zwei unterschiedlichen CSS-Basen —
   die 3 Öldruck-LPs nutzen `.mmhp-lp` (mmhp-lp.css), die
   Lösungsfinder-LP `.mmhp-lp-lf` (loesungsfinder-wizard.css).
   Deshalb hängt hier NICHTS am Host-Wrapper: eigener Scope
   `.mmhp-tool-embed`, eigenes Layout (.tt-wrap statt .wrap),
   Design-Tokens per `var(--x, fallback)` — nutzt die Host-Token
   wenn vorhanden (farbkonsistent zur LP), sonst den Fallback.
   So auch auf tokenlosen Seiten (Technologie-Seite) einsetzbar.
   ============================================================ */

/* ---------- Teaser-Kachel (autark) ---------- */
.mmhp-tool-embed{
  /* 10.07. (Markus): Abstand auf den Sektions-Rhythmus der LPs angehoben —
     Teaser saß zu dicht am Container darüber (v1: 48-86px). */
  padding:clamp(64px,9vw,124px) clamp(20px,4vw,48px) 0;
  font-family:var(--f,'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);
}
.mmhp-tool-embed *{box-sizing:border-box}
.mmhp-tool-embed .tt-wrap{max-width:1120px;margin:0 auto}

.mmhp-tool-embed .tooltease{position:relative;margin:0 auto;max-width:900px;border:1px solid var(--hair,rgba(255,255,255,.12));background:#0a0a09;overflow:hidden;box-shadow:0 4px 50px rgba(0,0,0,.5)}
.mmhp-tool-embed .tt-win{position:relative;aspect-ratio:16/9;overflow:hidden;background:#0a0a09}
.mmhp-tool-embed .tt-win img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.mmhp-tool-embed .tt-fA{animation:tt-kenA 15s ease-in-out infinite}
.mmhp-tool-embed .tt-fB{opacity:0;animation:tt-kenB 15s ease-in-out infinite}
@keyframes tt-kenA{0%{opacity:1;transform:scale(1.02)}45%{opacity:1}50%{opacity:0}95%{opacity:0}100%{opacity:1;transform:scale(1.06)}}
@keyframes tt-kenB{0%{opacity:0}45%{opacity:0}50%{opacity:1;transform:scale(1.02)}95%{opacity:1;transform:scale(1.06)}100%{opacity:0}}
.mmhp-tool-embed .tt-win::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#0a0a09f5 0%,#0a0a0985 34%,transparent 62%);pointer-events:none}
.mmhp-tool-embed .tt-free{position:absolute;top:16px;left:16px;z-index:3;display:inline-flex;align-items:center;gap:7px;background:rgba(199,255,63,.14);border:1px solid rgba(199,255,63,.5);color:var(--green,#c7ff3f);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:20px}
.mmhp-tool-embed .tt-free::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green,#c7ff3f);box-shadow:0 0 8px var(--green,#c7ff3f);animation:tt-pulse 1.8s ease-in-out infinite}
@keyframes tt-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.mmhp-tool-embed .tt-play{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:3;width:74px;height:74px;border-radius:50%;background:rgba(10,10,9,.55);border:1.5px solid rgba(199,255,63,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;pointer-events:none}
.mmhp-tool-embed .tt-play svg{width:26px;height:26px;margin-left:4px;color:var(--green,#c7ff3f)}
.mmhp-tool-embed .tt-play::before{content:"";position:absolute;inset:-1.5px;border-radius:50%;border:1.5px solid var(--green,#c7ff3f);opacity:.5;animation:tt-ring 2.4s ease-out infinite}
@keyframes tt-ring{0%{transform:scale(1);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.mmhp-tool-embed .tt-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:clamp(18px,3vw,30px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.mmhp-tool-embed .tt-txt{max-width:36ch}
.mmhp-tool-embed .tt-ml{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--green,#c7ff3f)}
.mmhp-tool-embed .tt-h{margin-top:8px;font-family:var(--f,'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);font-weight:800;font-size:clamp(19px,2.5vw,27px);letter-spacing:-.025em;line-height:1.12;color:#fff}
.mmhp-tool-embed .tt-cap p{margin-top:8px;font-size:13.5px;color:var(--tx2,rgba(255,255,255,.7))}
.mmhp-tool-embed .tt-btn{flex:none;display:inline-flex;align-items:center;gap:10px;background:var(--green,#c7ff3f);color:#0a0a09;font-family:var(--f,'Lexend',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif);font-weight:700;font-size:14.5px;letter-spacing:-.01em;text-decoration:none;padding:15px 26px;border:1px solid var(--green,#c7ff3f);transition:transform .18s,box-shadow .18s}
.mmhp-tool-embed .tt-btn svg{width:16px;height:16px;transition:transform .18s}
.mmhp-tool-embed .tt-btn:hover{transform:translateY(-1px);box-shadow:0 6px 24px rgba(199,255,63,.28)}
.mmhp-tool-embed .tt-btn:hover svg{transform:translateX(3px)}
.mmhp-tool-embed .tt-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.mmhp-tool-embed .tt-full{position:absolute;inset:0;z-index:2}
.mmhp-tool-embed .tt-hint{margin:12px auto 0;max-width:900px;font-size:12px;color:var(--tx3,rgba(255,255,255,.55));display:flex;align-items:center;gap:8px}
.mmhp-tool-embed .tt-hint svg{width:14px;height:14px;flex:none}
@media(prefers-reduced-motion:reduce){
  .mmhp-tool-embed .tt-fA,.mmhp-tool-embed .tt-fB,.mmhp-tool-embed .tt-free::before,.mmhp-tool-embed .tt-play::before{animation:none}
  .mmhp-tool-embed .tt-fB{opacity:0}
}
@media(max-width:600px){
  .mmhp-tool-embed .tt-cap{flex-direction:column;align-items:stretch}
  .mmhp-tool-embed .tt-btn{width:100%;justify-content:center}
  .mmhp-tool-embed .tt-play{top:38%}
}

/* ---------- Vollbild-Popup (global, fixed über allem) ---------- */
.mmhp-tool-modal{position:fixed;inset:0;z-index:9999;display:flex;padding:clamp(8px,1.4vh,14px);background:rgba(6,6,5,.62)}
.mmhp-tool-modal[hidden]{display:none}
.mmhp-tool-modal .tm-inner{position:relative;width:100%;height:100%;background:#0a0a09;border:1px solid rgba(255,255,255,.2);border-radius:14px;overflow:hidden;box-shadow:0 12px 55px rgba(0,0,0,.5)}
.mmhp-tool-modal .tm-frame{width:100%;height:100%;border:0;display:block}
.mmhp-tool-modal .tm-close{position:absolute;top:12px;right:12px;z-index:2;width:46px;height:46px;border-radius:50%;background:rgba(10,10,9,.72);border:1px solid rgba(255,255,255,.28);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .18s,border-color .18s,color .18s}
.mmhp-tool-modal .tm-close svg{width:20px;height:20px}
.mmhp-tool-modal .tm-close:hover{background:rgba(199,255,63,.16);border-color:#c7ff3f;color:#c7ff3f}
.mmhp-tool-modal .tm-close:focus-visible{outline:2px solid #c7ff3f;outline-offset:2px}
/* Rand-Wechsel synchron mit dem Tool-Panel-Umschaltpunkt (Tool: max-width:720px). 740 -> feiner
   2px-Rand bleibt, solange das Widget unten ist; erst dann Desktop-Rand. */
@media(max-width:740px){.mmhp-tool-modal{padding:2px}.mmhp-tool-modal .tm-inner{border-radius:12px}}