/* Prompt 95: „So kommt MeisterFreund auf Ihre Website“ – Animation der drei Wege (Views/Home/_Einbau.cshtml, js/einbau.js).
   Grundregel: Die Stile ohne „.spielt“ beschreiben das ENDBILD. Die Keyframes laufen nur unter .einbau-weg.spielt und
   füllen rückwärts (animation-fill-mode: both). Ohne JavaScript und bei prefers-reduced-motion (globale Regel in site.css)
   steht damit jedes Bild fertig und lesbar da. Bühnenmaße in cqi (Containerbreite), damit die Skizzen mit skalieren.
   Farben: nur Siegel (--logo-gruen, --logo-gold, --logo-creme, --logo-lila, Brotbraun #9A6510, Wurstrot, Grün) und Mischungen daraus
   (Prompt 109, CLAUDE.md Punkt 7); die Kunden-Website ist eine helle Skizze im Siegel-Creme-Ton. */

.einbau{position:relative;overflow:hidden;isolation:isolate;margin-top:26px;padding:clamp(20px,4vw,40px);border-radius:22px;
  background:var(--logo-gruen);color:var(--logo-creme);border:1px solid color-mix(in srgb,var(--logo-gold) 45%,transparent);
  display:grid;gap:24px;--e-dauer:9s}
.einbau .funkeln{z-index:-1}
.einbau-text{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.einbau .eyebrow{color:var(--logo-gold)}
.einbau h3{font-size:clamp(26px,3.2vw,36px);color:var(--logo-creme)}
.einbau h3 em{font-style:normal;color:var(--logo-gold)}
.einbau-lead{margin:0;color:color-mix(in srgb,var(--logo-creme) 85%,transparent);max-width:46ch}
.einbau-chips{display:flex;flex-wrap:wrap;gap:8px}
.einbau-chips[hidden]{display:none}
.einbau-chips button{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px 0 6px;border-radius:999px;cursor:pointer;
  font:inherit;font-size:15px;font-weight:600;color:var(--logo-creme);background:transparent;border:1px solid rgba(249,239,220,.4);
  transition:background .2s ease,color .2s ease,border-color .2s ease}
.einbau-chips button b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:rgba(249,239,220,.14);font-size:13px}
.einbau-chips button:hover{border-color:var(--logo-gold)}
.einbau-chips button[aria-pressed="true"]{background:var(--logo-gold);color:var(--logo-gruen);border-color:var(--logo-gold)}
.einbau-chips button[aria-pressed="true"] b{background:var(--logo-gruen);color:var(--logo-gold)}
.einbau-chips button:focus-visible,.einbau-link:focus-visible{outline:3px solid var(--logo-gold);outline-offset:3px}
/* Prompt 109 (WCAG 2.2.2): Anhalten/Abspielen. Angehalten friert das laufende Bild ein, die Automatik ruht. */
.einbau-pause{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border-radius:999px;cursor:pointer;font:inherit;
  font-size:15px;font-weight:600;color:var(--logo-creme);background:transparent;border:1px solid rgba(249,239,220,.4)}
.einbau-pause[hidden]{display:none}
.einbau-pause:hover{border-color:var(--logo-gold)}
.einbau-pause:focus-visible{outline:3px solid var(--logo-gold);outline-offset:3px}
.einbau-pause-zeichen{width:12px;height:12px;border-inline:4px solid var(--logo-gold);box-sizing:border-box}
.einbau-pause[aria-pressed="true"] .einbau-pause-zeichen{border:0;width:0;height:0;border-block:7px solid transparent;border-inline-start:11px solid var(--logo-gold)}
.einbau.angehalten .spielt,.einbau.angehalten .spielt *,.einbau.angehalten .spielt *::before,.einbau.angehalten .spielt *::after{animation-play-state:paused}
.einbau .einbau-link{color:var(--logo-creme);border-color:var(--logo-gold);margin-top:4px}
.einbau .einbau-link:hover{background:var(--logo-gold);color:var(--logo-gruen)}

/* Ohne JavaScript: alle drei Endbilder nebeneinander. Mit JavaScript (.ist-an): Text links, eine Bühne rechts. */
.einbau-wege{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.einbau.ist-an .einbau-wege{display:block}
.einbau-weg{margin:0;min-width:0}
.einbau-weg[hidden]{display:none}
.einbau-weg figcaption{margin-top:12px;font-size:16px;line-height:1.5;color:color-mix(in srgb,var(--logo-creme) 92%,transparent)}
.einbau-weg figcaption b{color:var(--logo-gold)}
@media (min-width:900px){
  .einbau.ist-an{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);align-items:center;gap:40px}
}

/* ---------- Bühne ---------- */
.e-buehne{position:relative;aspect-ratio:16/10;container-type:inline-size;font:400 2.1cqi/1.3 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--logo-gruen);border-radius:16px;background:radial-gradient(120% 90% at 0% 0%,rgba(246,175,47,.16),transparent 60%),rgba(249,239,220,.06);
  box-shadow:inset 0 0 0 1px rgba(249,239,220,.12)}
/* cqi am Container selbst bezöge sich auf den Vorfahren, daher die Grundschrift erst für die Kinder */
.e-buehne>*{font-size:2.1cqi}
.e-buehne img{display:block}
.e-browser{position:absolute;display:flex;flex-direction:column;background:var(--logo-creme);border-radius:1.6cqi;overflow:hidden;
  box-shadow:0 2cqi 5cqi rgba(11,37,25,.35),0 0 0 1px rgba(11,37,25,.08)}
.e-leiste{flex:none;position:relative;display:flex;align-items:center;gap:.8cqi;height:4.6cqi;padding:0 1.4cqi;background:color-mix(in srgb,var(--logo-gruen) 8%,var(--logo-creme));border-bottom:1px solid color-mix(in srgb,var(--logo-gruen) 16%,var(--logo-creme))}
.e-leiste>i{width:1.1cqi;height:1.1cqi;border-radius:50%;background:color-mix(in srgb,var(--logo-gruen) 22%,var(--logo-creme))}
.e-leiste>i:first-child{background:color-mix(in srgb,#C01A13 45%,var(--logo-creme))}
.e-adresse{display:inline-flex;align-items:center;gap:.6cqi;margin-left:1cqi;padding:.35cqi 1.4cqi;min-width:0;flex:1;border-radius:99px;background:var(--logo-creme);
  font:500 1.5cqi/1.2 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--logo-gruen);white-space:nowrap;overflow:hidden}
.e-schloss{flex:none;width:1.1cqi;height:1.3cqi;border-radius:.25cqi;background:var(--logo-gruen);position:relative;top:.2cqi}
.e-schloss::before{content:"";position:absolute;left:.2cqi;right:.2cqi;top:-.75cqi;height:.9cqi;border:.25cqi solid var(--logo-gruen);border-bottom:0;border-radius:.6cqi .6cqi 0 0}
.e-seite{position:relative;flex:1;min-height:0;padding:1.6cqi;display:flex;flex-direction:column;gap:1.1cqi}
.e-kopf{display:flex;align-items:center;gap:1.2cqi}
.e-kopf b{margin-right:auto;font:italic 700 2.5cqi/1 Georgia,"Times New Roman",serif;color:#9A6510}
.e-kopf span{width:5cqi;height:.8cqi;border-radius:99px;background:color-mix(in srgb,var(--logo-gruen) 16%,var(--logo-creme))}
.e-zeile{display:block;height:1cqi;border-radius:99px;background:color-mix(in srgb,var(--logo-gruen) 12%,var(--logo-creme))}
.e-zeile.e-kurz{width:62%}
.e-hero{width:100%;height:42%;object-fit:cover;border-radius:.8cqi}

/* ---------- Weg 1: Widget ---------- */
.e-siegel{position:absolute;left:2.5%;top:7%;width:14%;aspect-ratio:1;border-radius:50%;
  box-shadow:0 0 0 .5cqi rgba(246,175,47,.55),0 0 5cqi rgba(246,175,47,.35)}
.e-siegel img{width:100%;height:100%;border-radius:50%}
.e-b1{left:21%;top:3%;width:76%;height:94%}
.e-b1::after{content:"";position:absolute;left:0;right:0;bottom:0;height:13%;background:var(--logo-gruen)}
.e-karte{position:absolute;right:3%;bottom:31%;width:40%;padding:1cqi 1.3cqi;border-radius:1cqi;background:var(--logo-creme);
  box-shadow:0 1cqi 3cqi rgba(11,37,25,.22);display:flex;flex-direction:column;gap:.3cqi}
.e-karte small{font-size:1.3cqi;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:color-mix(in srgb,var(--logo-gruen) 65%,var(--logo-creme))}
.e-karte span{display:flex;justify-content:space-between;align-items:center;gap:.8cqi;font-weight:600}
.e-noch{display:inline-block;padding:.15cqi .8cqi;border-radius:99px;background:color-mix(in srgb,var(--logo-gold) 30%,var(--logo-creme));color:#9A6510;font-size:1.6cqi;white-space:nowrap}
.e-pille{position:absolute;right:3%;bottom:16.5%;display:inline-flex;align-items:center;gap:.8cqi;padding:.9cqi 1.8cqi;border-radius:99px;
  background:#9A6510;color:var(--logo-creme);font-weight:700;box-shadow:0 1cqi 3cqi rgba(11,37,25,.3);white-space:nowrap}
.e-pille i{width:1.1cqi;height:1.1cqi;border-radius:50%;background:color-mix(in srgb,#1F5A3A 55%,var(--logo-creme));box-shadow:0 0 0 .4cqi rgba(31,90,58,.3)}
.e-code{position:absolute;left:22.5%;top:89%;max-width:73%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:500 1.32cqi/1.4 ui-monospace,"Cascadia Mono",Consolas,monospace;color:var(--logo-gold);background:transparent;padding:0}

.spielt .e-siegel{animation:e-siegel var(--e-dauer) ease-in-out both}
.spielt .e-code{animation:e-flug var(--e-dauer) cubic-bezier(.45,.05,.25,1) both}
.spielt .e-pille{animation:e-plopp var(--e-dauer) both}
.spielt .e-karte{animation:e-karte var(--e-dauer) both}
.spielt .e-noch{animation:e-puls var(--e-dauer) both}
@keyframes e-siegel{0%,4%{transform:scale(.9)}10%{transform:scale(1.06);box-shadow:0 0 0 .8cqi rgba(246,175,47,.8),0 0 8cqi rgba(246,175,47,.6)}22%,100%{transform:none}}
@keyframes e-flug{
  0%,6%{opacity:0;transform:translate(-12cqi,-40cqi) scale(.55);background:var(--logo-gruen);padding:.6cqi 1.2cqi;border-radius:99px}
  12%{opacity:1;transform:translate(-12cqi,-40cqi) scale(.75);background:var(--logo-gruen);padding:.6cqi 1.2cqi;border-radius:99px}
  42%{opacity:1;transform:translate(0,-1cqi) scale(1.04);background:var(--logo-gruen);padding:.6cqi 1.2cqi;border-radius:99px}
  48%{transform:none;color:var(--logo-creme)}
  56%,100%{transform:none;color:var(--logo-gold)}}
@keyframes e-plopp{0%,50%{opacity:0;transform:translateY(3cqi) scale(.4)}57%{opacity:1;transform:scale(1.1)}62%,100%{opacity:1;transform:none}}
@keyframes e-karte{0%,58%{opacity:0;transform:translateY(2cqi)}66%,100%{opacity:1;transform:none}}
@keyframes e-puls{0%,68%{transform:none}72%{transform:scale(1.28);background:var(--logo-gold);color:var(--logo-gruen)}
  76%{transform:none}80%{transform:scale(1.28);background:var(--logo-gold);color:var(--logo-gruen)}86%,100%{transform:none}}

/* ---------- Weg 2: eigene Bestellseite ---------- */
.e-alt{left:2.5%;top:8%;width:36%;height:60%}
.e-alt .e-adresse{font-size:1.3cqi}
.e-knopf{margin-top:auto;align-self:flex-start;padding:.7cqi 1.4cqi;border-radius:.6cqi;background:#9A6510;color:var(--logo-creme);font-weight:700;font-size:1.6cqi}
.e-neu{left:50%;top:4%;width:47.5%;height:72%}
.e-tippen{display:inline-block;overflow:hidden;white-space:nowrap;width:30ch;vertical-align:bottom;border-right:.2cqi solid transparent}
.e-bestellseite{gap:.9cqi}
.e-titel{font-size:2.3cqi;color:var(--logo-gruen)}
.e-posten{display:flex;justify-content:space-between;gap:1cqi;padding-bottom:.7cqi;border-bottom:1px solid color-mix(in srgb,var(--logo-gruen) 10%,var(--logo-creme));font-size:1.7cqi}
.e-bestellen{margin-top:auto;padding:.9cqi;border-radius:.8cqi;background:var(--logo-gruen);color:var(--logo-creme);font-weight:700;text-align:center;font-size:1.7cqi}
.e-linie{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.e-linie path{fill:none;stroke:var(--logo-gold);stroke-width:.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
.e-kanaele{position:absolute;left:2.5%;right:2.5%;top:81%;display:flex;flex-wrap:wrap;gap:1.4cqi 2.4cqi}
.e-kanal{display:inline-flex;align-items:center;gap:.9cqi;color:var(--logo-creme);font-weight:600;font-size:1.9cqi}
.e-kanal svg{width:4.2cqi;height:4.2cqi;padding:.8cqi;border-radius:50%;background:var(--logo-gold);fill:var(--logo-gruen)}

.spielt .e-tippen{animation:e-tippen var(--e-dauer) steps(30,end) both}
.spielt .e-bestellseite{animation:e-einblenden var(--e-dauer) both}
.spielt .e-knopf{animation:e-knopf var(--e-dauer) both}
.spielt .e-linie path{animation:e-linie var(--e-dauer) ease-in-out both}
.spielt .e-kanal{animation:e-kanal var(--e-dauer) both}
.spielt .e-kanal:nth-child(2){animation-name:e-kanal2}
.spielt .e-kanal:nth-child(3){animation-name:e-kanal3}
@keyframes e-tippen{0%,6%{width:0;border-right-color:var(--logo-gruen)}36%{width:30ch;border-right-color:var(--logo-gruen)}40%,100%{width:30ch;border-right-color:transparent}}
@keyframes e-einblenden{0%,36%{opacity:0;transform:translateY(1.5cqi)}46%,100%{opacity:1;transform:none}}
@keyframes e-knopf{0%,46%{transform:none;box-shadow:none}50%{transform:scale(1.12);box-shadow:0 0 0 .8cqi rgba(246,175,47,.6)}56%,100%{transform:none;box-shadow:none}}
@keyframes e-linie{0%,50%{stroke-dashoffset:100}66%,100%{stroke-dashoffset:0}}
@keyframes e-kanal{0%,66%{opacity:0;transform:translateY(2cqi) scale(.7)}72%,100%{opacity:1;transform:none}}
@keyframes e-kanal2{0%,71%{opacity:0;transform:translateY(2cqi) scale(.7)}77%,100%{opacity:1;transform:none}}
@keyframes e-kanal3{0%,76%{opacity:0;transform:translateY(2cqi) scale(.7)}82%,100%{opacity:1;transform:none}}

/* ---------- Weg 3: neue Website ---------- */
.e-b3{left:7%;top:3%;width:86%;height:94%}
.e-adr-wechsel{display:inline-grid;flex:none;max-width:60%}
.e-adr-wechsel>span{grid-area:1/1;display:inline-flex;align-items:center;gap:.6cqi}
.e-adr-alt{opacity:0;color:color-mix(in srgb,var(--logo-gruen) 55%,var(--logo-creme))}
.e-domain{position:absolute;right:2%;top:.7cqi;display:inline-flex;align-items:center;gap:.6cqi;padding:.45cqi 1.2cqi;border-radius:99px;
  background:var(--logo-gold);color:var(--logo-gruen);font-weight:700;font-size:1.4cqi;white-space:nowrap}
.e-domain .e-schloss{top:.15cqi}
.e-neue-website{display:grid;grid-template-columns:1.35fr 1fr .78fr;gap:1.4cqi;background:color-mix(in srgb,var(--logo-gruen) 4%,var(--logo-creme))}
.e-kachel{position:relative;min-height:0;border-radius:1cqi;overflow:hidden;background:var(--logo-creme);box-shadow:0 .6cqi 2cqi rgba(11,37,25,.12)}
.e-k-hero img{width:100%;height:100%;object-fit:cover}
.e-band{position:absolute;left:0;right:0;bottom:12%;padding:.8cqi 1.6cqi;background:var(--logo-lila);color:var(--logo-gold);
  font:700 2.6cqi/1.1 Georgia,"Times New Roman",serif;border-block:.35cqi solid var(--logo-gold)}
.e-k-angebot{display:flex;flex-direction:column;gap:.4cqi;padding-bottom:1.2cqi}
.e-k-angebot img{width:100%;height:52%;object-fit:cover}
.e-k-angebot small,.e-k-angebot b,.e-k-angebot .e-preis{padding:0 1.2cqi}
.e-k-angebot small{font-size:1.3cqi;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--logo-lila)}
.e-k-angebot b{font-size:1.9cqi;line-height:1.2}
.e-preis{margin-top:auto;font-weight:800;font-size:2.6cqi;color:var(--logo-gruen)}
.e-k-handy{display:grid;place-items:center;background:transparent;box-shadow:none;overflow:visible}
.e-handy{display:flex;flex-direction:column;gap:.8cqi;width:100%;height:100%;padding:2.2cqi 1cqi 1.2cqi;border-radius:2.2cqi;background:var(--logo-creme);
  border:.6cqi solid var(--logo-gruen);font-size:1.45cqi}
.e-handy .e-posten{font-size:1.45cqi;flex-direction:column;gap:.1cqi}
.e-handy .e-posten b{color:#9A6510}
.e-handy .e-bestellen{font-size:1.45cqi;padding:.7cqi .4cqi;background:var(--logo-gold);color:var(--logo-gruen)}

.spielt .e-k-hero{animation:e-kachel-hoch var(--e-dauer) cubic-bezier(.2,.8,.2,1) both}
.spielt .e-k-angebot{animation:e-kachel-rechts var(--e-dauer) cubic-bezier(.2,.8,.2,1) both}
.spielt .e-k-handy{animation:e-kachel-runter var(--e-dauer) cubic-bezier(.2,.8,.2,1) both}
.spielt .e-adr-alt{animation:e-adr-alt var(--e-dauer) both}
.spielt .e-adr-neu{animation:e-adr-neu var(--e-dauer) both}
.spielt .e-domain{animation:e-plopp-spaet var(--e-dauer) both}
@keyframes e-kachel-hoch{0%,6%{opacity:0;transform:translateY(40%) scale(.92)}26%,100%{opacity:1;transform:none}}
@keyframes e-kachel-rechts{0%,22%{opacity:0;transform:translateX(50%) rotate(4deg)}42%,100%{opacity:1;transform:none}}
@keyframes e-kachel-runter{0%,38%{opacity:0;transform:translateY(-40%) rotate(-4deg)}58%,100%{opacity:1;transform:none}}
@keyframes e-adr-alt{0%,62%{opacity:1}68%,100%{opacity:0}}
@keyframes e-adr-neu{0%,66%{opacity:0;transform:translateY(60%)}72%,100%{opacity:1;transform:none}}
@keyframes e-plopp-spaet{0%,72%{opacity:0;transform:scale(.4)}78%{opacity:1;transform:scale(1.12)}82%,100%{opacity:1;transform:none}}

/* Handy: Bühne etwas höher, damit die Skizzen nicht zu klein werden */
@media (max-width:560px){
  .einbau{border-radius:18px}
  .einbau-chips button{font-size:14px;padding-right:12px}
  .einbau-weg figcaption{font-size:15px}
}