/* ═══════════════════════════════════════════════════════════════════════════
   Mehrkunden26 · Produktvisuals v2 · 11.09.2026
   Sechs Medienbühnen in den Leistungskarten (#angebote). Grundsatz: dunkle,
   neutrale Bühne (kein Olivgrün), ein schwebendes Softwarefenster mit echter
   UI-Komposition, Limette nur als Akzent, alle Icons als SVG, alle Maße in
   Container-Einheiten (cqw), damit die Karte von 320 bis 640 px gleich wirkt.
   Ergebniszeile sitzt in der Bühne, nicht daneben.
   ═══════════════════════════════════════════════════════════════════════════ */
#angebote .pv{--lime:#A3E635;--amber:#F5B454;--paper:#F3F4F1;--muted:#9AA09B;--line:rgba(255,255,255,.08);--surface:#121415;--surface-2:#191c1e;
  container-type:inline-size;position:relative;aspect-ratio:4/3;margin:-28px -28px 22px;overflow:hidden;isolation:isolate;color:var(--paper);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background:radial-gradient(120% 90% at 50% -10%,#1d201f 0%,#0e1011 55%,#0a0b0c 100%)}
#angebote .pv::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) .6px,transparent .8px);background-size:14px 14px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 80%);mask-image:linear-gradient(180deg,#000 0%,transparent 80%);pointer-events:none}
#angebote .pv::after{content:"";position:absolute;inset:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);pointer-events:none;z-index:3}
#angebote .pv *{box-sizing:border-box;margin:0}
#angebote .pv-inner{position:absolute;inset:0;font-size:2.6cqw;line-height:1.35}
#angebote .pv-meta{position:absolute;left:4.5cqw;right:4.5cqw;top:3.4cqw;display:flex;justify-content:space-between;align-items:center;gap:2cqw;font-size:2.1cqw;color:var(--muted)}
#angebote .pv-meta b{color:var(--paper);font-weight:700;letter-spacing:-.02em;font-size:2.5cqw;white-space:nowrap}
#angebote .pv-meta em{font-style:normal;color:var(--muted);font-weight:500}
#angebote .pv-meta>span{display:inline-flex;align-items:center;gap:1cqw;font-size:1.7cqw;letter-spacing:.09em;text-transform:uppercase;padding:.7cqw 1.6cqw;border:1px solid var(--line);border-radius:99px;background:rgba(255,255,255,.03);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%}
#angebote .pv-meta>span::before{content:"";flex:none;width:1cqw;height:1cqw;border-radius:50%;background:var(--lime);box-shadow:0 0 1.2cqw var(--lime)}
/* Softwarefenster */
#angebote .pv-window{position:absolute;left:4.5cqw;right:4.5cqw;top:9.8cqw;height:52.2cqw;border-radius:2.4cqw;overflow:hidden;
  background:linear-gradient(180deg,#181b1c 0%,#121415 38%,#0f1112 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(255,255,255,.07),0 1.2cqw 2.4cqw rgba(0,0,0,.42),0 6cqw 9cqw -4cqw rgba(0,0,0,.7)}
#angebote .pv-chrome{position:relative;height:5.4cqw;display:flex;align-items:center;gap:.9cqw;padding:0 2.6cqw;border-bottom:1px solid var(--line);background:rgba(255,255,255,.025);
  font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:1.7cqw;letter-spacing:.04em;color:var(--muted)}
#angebote .pv-chrome i{width:1.35cqw;height:1.35cqw;border-radius:50%;background:#3a3d3f;flex:none}
#angebote .pv-chrome i:nth-child(1){background:#f2604c}#angebote .pv-chrome i:nth-child(2){background:#f0b429}#angebote .pv-chrome i:nth-child(3){background:#3fc463}
#angebote .pv-chrome span{position:absolute;left:0;right:0;text-align:center;pointer-events:none}
#angebote .pv-body{position:absolute;left:0;right:0;top:5.4cqw;bottom:0;display:flex;flex-direction:column}
/* Ergebniszeile */
#angebote .pv-output{position:absolute;left:4.5cqw;right:4.5cqw;bottom:3.3cqw;display:grid;grid-template-columns:auto 1fr auto;gap:2.4cqw;align-items:center;z-index:2}
#angebote .pv-check{width:5.6cqw;height:5.6cqw;border-radius:50%;background:var(--lime);display:grid;place-items:center;box-shadow:0 0 0 .6cqw rgba(163,230,53,.14),0 1.5cqw 3cqw -1cqw rgba(163,230,53,.55)}
#angebote .pv-check svg{width:2.8cqw;height:2.8cqw;stroke:#0a0b0c;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
#angebote .pv-output small{display:block;font-size:1.65cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.5cqw;font-weight:600}
#angebote .pv-output strong{display:block;font-size:3.05cqw;font-weight:650;letter-spacing:-.03em;color:var(--paper);line-height:1.15}
#angebote .pv-arrow{width:4.4cqw;height:4.4cqw;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--paper);background:rgba(255,255,255,.03)}
#angebote .pv-arrow svg{width:2cqw;height:2cqw;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
/* Bausteine */
#angebote .ui-eyebrow{font-size:1.55cqw;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
#angebote .ui-chip{display:inline-flex;align-items:center;gap:.8cqw;font-size:1.65cqw;font-weight:600;padding:.55cqw 1.4cqw;border-radius:99px;border:1px solid var(--line);color:var(--paper);background:rgba(255,255,255,.04);white-space:nowrap;line-height:1.3}
#angebote .ui-chip::before{content:"";width:.85cqw;height:.85cqw;border-radius:50%;background:currentColor;flex:none}
#angebote .ui-chip.lime{color:var(--lime);border-color:rgba(163,230,53,.35);background:rgba(163,230,53,.10)}
#angebote .ui-chip.amber{color:var(--amber);border-color:rgba(245,180,84,.35);background:rgba(245,180,84,.10)}
#angebote .ui-chip.muted{color:var(--muted)}
#angebote .ui-ok{display:inline-flex;align-items:center;gap:.9cqw;font-size:1.7cqw;color:var(--muted);white-space:nowrap}
#angebote .ui-ok svg{width:2.1cqw;height:2.1cqw;stroke:var(--lime);stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
#angebote .ui-foot{position:static;flex:none;margin-top:auto;height:5cqw;display:flex;align-items:center;justify-content:space-between;padding:0 2.6cqw;border-top:1px solid var(--line);background:rgba(0,0,0,.25)}
#angebote .ui-ic{width:2.2cqw;height:2.2cqw;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}
#angebote .ui-avatar{width:4.4cqw;height:4.4cqw;border-radius:1.2cqw;display:grid;place-items:center;font-weight:800;font-size:1.7cqw;letter-spacing:.02em;flex:none}
#angebote .ui-num{font-variant-numeric:tabular-nums}

/* ── 01 Webseite: echtes Projekt, Desktop + Smartphone + Anfrage-Toast ── */
#angebote .pv-kind-web .pv-window{right:29cqw}
#angebote .pv-kind-web .pv-body picture{display:block;width:100%;flex:1;min-height:0;overflow:hidden}
#angebote .pv-kind-web .pv-body img{display:block;width:100%;height:116%;object-fit:cover;object-position:50% 0;will-change:transform}
/* Die Webseiten-Aufnahme wird oben LINKS angesetzt, nicht mittig. Mittig
   schnitt sie links und rechts je ein Viertel ab, aus „Gebaeudereinigung"
   wurde „baeudereinigung". Ein Browserfenster zeigt ohnehin immer die linke
   obere Ecke einer Seite. */
/* Mit der ID davor, sonst gewinnt die Regel weiter oben (#angebote ...). */
#angebote .pv-kind-web .pv-body img{object-position:0 0}
#angebote .ui-klein{font-size:1.6cqw;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#angebote .ui-live::before{animation:pvPuls 1.4s ease-in-out infinite}
#angebote .pv-kind-web .pv-phone{position:absolute;right:4.5cqw;top:14.5cqw;width:22cqw;height:47.5cqw;border-radius:4cqw;padding:.9cqw;background:linear-gradient(180deg,#26292b,#141617);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(255,255,255,.08),0 3cqw 6cqw -2cqw rgba(0,0,0,.8);z-index:2;overflow:hidden}
#angebote .pv-kind-web .pv-phone picture{display:block;width:100%;height:100%;overflow:hidden;border-radius:3.2cqw}
#angebote .pv-kind-web .pv-phone img{display:block;width:100%;height:118%;object-fit:cover;object-position:50% 0;will-change:transform}
#angebote .pv-kind-web .pv-notch{position:absolute;top:1.9cqw;left:50%;transform:translateX(-50%);width:7cqw;height:1.9cqw;border-radius:99px;background:#0a0b0c;z-index:1}
#angebote .pv-kind-web .pv-toast{position:absolute;left:2.4cqw;bottom:2.4cqw;display:flex;align-items:center;gap:1.4cqw;padding:1.2cqw 1.8cqw 1.2cqw 1.4cqw;border-radius:1.6cqw;background:rgba(14,16,17,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 0 0 1px rgba(255,255,255,.09),0 1.5cqw 3cqw rgba(0,0,0,.45);font-size:1.75cqw;line-height:1.3}
#angebote .pv-kind-web .pv-toast b{display:block;font-size:2cqw;font-weight:650}
#angebote .pv-kind-web .pv-toast small{color:var(--muted);font-size:1.55cqw}
#angebote .pv-kind-web .pv-toast .ui-avatar{background:rgba(163,230,53,.16);color:var(--lime);border:1px solid rgba(163,230,53,.35)}

/* ── 02 Lokale SEO: Suchleiste, Trefferliste, Karte, Verlauf ── */
#angebote .pv-kind-seo .ui-search{flex:none;margin:2cqw 2.6cqw 0;height:5.6cqw;display:flex;align-items:center;gap:1.6cqw;padding:0 2cqw;border-radius:99px;background:#1c1f21;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),inset 0 1px 0 rgba(255,255,255,.05);font-size:2.35cqw;font-weight:600}
#angebote .pv-kind-seo .ui-search .ui-ic{width:2.6cqw;height:2.6cqw;color:var(--muted)}
#angebote .pv-kind-seo .ui-tippen{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;border-right:.35cqw solid var(--lime);padding-right:.4cqw;max-width:40cqw}
#angebote .pv-kind-seo .ui-search em{font-style:normal;margin-left:auto;color:var(--muted);font-weight:400;font-size:1.7cqw}
#angebote .pv-kind-seo .ui-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:2cqw;margin:2cqw 2.6cqw 0;flex:1;min-height:0}
#angebote .pv-kind-seo .ui-grid>div:first-child{display:flex;flex-direction:column;min-height:0;overflow:hidden}
#angebote .pv-kind-seo .ui-hit{display:grid;grid-template-columns:auto 1fr;gap:1.6cqw;padding:1.6cqw;border-radius:1.6cqw;background:#181b1c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
#angebote .pv-kind-seo .ui-hit.top{background:linear-gradient(180deg,#1d2120,#171a1b);box-shadow:inset 0 0 0 1px rgba(163,230,53,.3),0 1cqw 2.4cqw -1cqw rgba(0,0,0,.6)}
#angebote .pv-kind-seo .ui-rank{width:4cqw;height:4cqw;border-radius:1.1cqw;background:var(--lime);color:#0a0b0c;display:grid;place-items:center;font-weight:800;font-size:2cqw}
#angebote .pv-kind-seo .ui-hit.zwei .ui-rank{background:#2a2e30;color:var(--muted)}
#angebote .pv-kind-seo .ui-hit strong{display:block;font-size:2.35cqw;font-weight:650;letter-spacing:-.01em;line-height:1.2}
#angebote .pv-kind-seo .ui-hit span{display:block;font-size:1.65cqw;color:var(--muted);margin-top:.4cqw}
#angebote .pv-kind-seo .ui-stars{display:flex;align-items:center;gap:.5cqw;margin:.7cqw 0 .3cqw;font-size:1.65cqw;color:var(--paper)}
#angebote .pv-kind-seo .ui-stars svg{width:1.9cqw;height:1.9cqw;fill:var(--lime)}
#angebote .pv-kind-seo .ui-stars em{font-style:normal;color:var(--muted);margin-left:.4cqw}
#angebote .pv-kind-seo .ui-hit .ui-actions{display:flex;gap:.8cqw;margin-top:1.2cqw}
#angebote .pv-kind-seo .ui-hit.zwei{margin-top:1.2cqw;opacity:.75}
#angebote .pv-kind-seo .ui-map{position:relative;border-radius:1.6cqw;overflow:hidden;background:#151819;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
#angebote .pv-kind-seo .ui-map svg{position:absolute;inset:0;width:100%;height:100%}
#angebote .pv-kind-seo .ui-pin{position:absolute;display:grid;place-items:center;width:4.2cqw;height:4.2cqw;font-size:1.8cqw;font-weight:800;color:#0a0b0c;background:var(--lime);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 .8cqw 1.6cqw rgba(0,0,0,.5)}
#angebote .pv-kind-seo .ui-pin>i{transform:rotate(45deg);font-style:normal}
#angebote .pv-kind-seo .ui-pin.zwei{background:#3a3f42;color:var(--paper)}
#angebote .pv-kind-seo .ui-map>small{position:absolute;left:1.6cqw;bottom:1.4cqw;font-size:1.5cqw;letter-spacing:.2em;color:var(--muted)}
#angebote .pv-kind-seo .ui-trend{flex:none;margin:1.6cqw 2.6cqw 1.8cqw;display:flex;align-items:center;gap:2cqw;padding-top:1.6cqw;border-top:1px solid var(--line);font-size:1.7cqw;color:var(--muted)}
#angebote .pv-kind-seo .ui-trend b{display:block;color:var(--paper);font-size:2.9cqw;font-weight:700;letter-spacing:-.02em;line-height:1.1}
#angebote .pv-kind-seo .ui-trend b i{font-style:normal;color:var(--lime)}
#angebote .pv-kind-seo .ui-trend svg{width:34%;height:5cqw;margin-left:auto}
#angebote .pv-kind-seo .ui-trend small{font-size:1.5cqw}

/* ── 03 Telefonassistent: Anruf, Transkript mit Wellenform, erkannter Termin ── */
#angebote .pv-kind-phone .ui-call{flex:none;display:flex;align-items:center;gap:1.6cqw;padding:1.4cqw 2.6cqw 1.2cqw;border-bottom:1px solid var(--line)}
#angebote .pv-kind-phone .ui-call .ui-avatar{width:4.8cqw;height:4.8cqw;border-radius:50%;background:rgba(163,230,53,.14);color:var(--lime);box-shadow:inset 0 0 0 1px rgba(163,230,53,.35)}
#angebote .pv-kind-phone .ui-call .ui-avatar svg{width:2.6cqw;height:2.6cqw}
#angebote .pv-kind-phone .ui-call strong{display:block;font-size:2.5cqw;font-weight:650;letter-spacing:-.01em;line-height:1.15}
#angebote .pv-kind-phone .ui-call .ui-chip{margin-left:auto}
@keyframes pvPuls{50%{opacity:.35}}
#angebote .pv-kind-phone .ui-quote{flex:none;padding:1.2cqw 2.6cqw 0}
#angebote .pv-kind-phone .ui-quote p{font-size:2.8cqw;line-height:1.2;letter-spacing:-.02em;font-weight:500;margin:.4cqw 0 .8cqw}
#angebote .pv-kind-phone .ui-wave{display:flex;align-items:flex-end;gap:.45cqw;height:2.6cqw}
#angebote .pv-kind-phone .ui-wave i{flex:1;border-radius:.4cqw;background:linear-gradient(180deg,rgba(163,230,53,.95),rgba(163,230,53,.35))}
#angebote .pv-kind-phone .ui-wave i:nth-child(3n){opacity:.55}
#angebote .pv-kind-phone .ui-tags{flex:none;display:flex;gap:.7cqw;padding:1.1cqw 2.6cqw 0;flex-wrap:nowrap;overflow:hidden}
#angebote .pv-kind-phone .ui-event{flex:none;margin:auto 2.6cqw 1.2cqw;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.6cqw;padding:1.1cqw 1.8cqw;border-radius:1.6cqw;
  background:linear-gradient(180deg,rgba(163,230,53,.14),rgba(163,230,53,.07));box-shadow:inset 0 0 0 1px rgba(163,230,53,.32)}
#angebote .pv-kind-phone .ui-event .ui-avatar{background:rgba(163,230,53,.18);color:var(--lime)}
#angebote .pv-kind-phone .ui-event strong{display:block;font-size:2.4cqw;font-weight:650;letter-spacing:-.01em;line-height:1.15}
#angebote .pv-kind-phone .ui-event .ui-ok svg{width:2.6cqw;height:2.6cqw}
#angebote .pv-kind-phone .ui-foot{margin-top:0}
#angebote .pv-kind-phone .ui-event{min-height:0}
#angebote .pv-kind-phone .ui-tags .ui-chip{padding-top:.4cqw;padding-bottom:.4cqw}

/* ── 04 Chatbot: Kundenseite hell, Assistent als Glas darüber ── */
#angebote .pv-kind-chat .ui-site{position:absolute;left:0;top:0;bottom:5cqw;width:50%;background:#f4f4ef;color:#1a1d18;padding:2.6cqw 2.4cqw;overflow:hidden}
#angebote .pv-kind-chat .ui-site nav{display:flex;gap:1.4cqw;align-items:center;font-size:1.45cqw;color:#6b7266;margin-bottom:3.4cqw;white-space:nowrap}
#angebote .pv-kind-chat .ui-site nav b{color:#1a1d18;font-weight:800;letter-spacing:.14em;font-size:1.5cqw;margin-right:auto}
#angebote .pv-kind-chat .ui-site strong{display:block;font-size:3.6cqw;line-height:1.08;letter-spacing:-.035em;font-weight:700}
#angebote .pv-kind-chat .ui-site p{font-size:1.6cqw;color:#5d655a;margin:1.4cqw 0 2.2cqw;line-height:1.4}
#angebote .pv-kind-chat .ui-site .ui-cta{display:inline-flex;align-items:center;gap:.8cqw;background:#1a1d18;color:#f4f4ef;font-size:1.65cqw;font-weight:600;padding:1cqw 1.8cqw;border-radius:99px}
#angebote .pv-kind-chat .ui-site .ui-cta svg{width:1.8cqw;height:1.8cqw;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round}
#angebote .pv-kind-chat .ui-chat{position:absolute;left:52%;right:2cqw;top:2cqw;bottom:7cqw;width:auto;border-radius:2cqw;background:rgba(18,20,21,.9);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.08),0 2.4cqw 5cqw -1.6cqw rgba(0,0,0,.75);display:flex;flex-direction:column;overflow:hidden}
#angebote .pv-kind-chat .ui-chat-head{display:flex;align-items:center;gap:1.2cqw;padding:1.4cqw 1.8cqw;border-bottom:1px solid var(--line)}
#angebote .pv-kind-chat .ui-chat-head .ui-avatar{background:var(--lime);color:#0a0b0c}
#angebote .pv-kind-chat .ui-chat-head strong{display:block;font-size:2cqw;font-weight:650;line-height:1.15}
#angebote .pv-kind-chat .ui-chat-head small{display:flex;align-items:center;gap:.6cqw;font-size:1.45cqw;color:var(--muted)}
#angebote .pv-kind-chat .ui-chat-head small::before{content:"";width:.8cqw;height:.8cqw;border-radius:50%;background:var(--lime)}
#angebote .pv-kind-chat .ui-msgs{flex:1;padding:1.4cqw 1.8cqw 0;display:flex;flex-direction:column;gap:1cqw;min-height:0}
#angebote .pv-kind-chat .ui-msg{max-width:88%;padding:1.1cqw 1.5cqw;border-radius:1.7cqw;font-size:1.8cqw;line-height:1.3}
#angebote .pv-kind-chat .ui-msg.du{align-self:flex-end;background:#2a2e30;border-bottom-right-radius:.5cqw}
#angebote .pv-kind-chat .ui-msg.bot{align-self:flex-start;background:#f3f4f1;color:#171a17;border-bottom-left-radius:.5cqw;position:relative}
#angebote .pv-kind-chat .ui-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.6cqw}
#angebote .pv-kind-chat .ui-dots i{width:.9cqw;height:.9cqw;border-radius:50%;background:#7a8078}
#angebote .pv-kind-chat .ui-txt{display:block}
#angebote .pv-kind-chat .ui-msg b{font-weight:700}
#angebote .pv-kind-chat .ui-quick{display:flex;gap:.7cqw;flex-wrap:wrap}
#angebote .pv-kind-chat .ui-input{display:flex;align-items:center;gap:1cqw;margin:1.2cqw 1.8cqw 1.6cqw;height:4.2cqw;flex:none;padding:0 .7cqw 0 1.8cqw;border-radius:99px;background:#1d2022;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);font-size:1.7cqw;color:var(--muted)}
#angebote .pv-kind-chat .ui-input i{margin-left:auto;width:3.4cqw;height:3.4cqw;border-radius:50%;background:var(--lime);display:grid;place-items:center}
#angebote .pv-kind-chat .ui-input i svg{width:1.8cqw;height:1.8cqw;stroke:#0a0b0c;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
#angebote .pv-kind-chat .ui-status{position:absolute;left:0;right:0;bottom:0;height:5cqw;display:flex;align-items:center;gap:2.4cqw;padding:0 2.6cqw;background:#121415;border-top:1px solid var(--line)}

/* ── 05 Firmen-Cockpit: Originalaufnahme, Kennzahlen als Glasleiste ── */
#angebote .pv-kind-cockpit .pv-body picture{display:block;width:100%;flex:1;min-height:0;overflow:hidden}
#angebote .pv-kind-cockpit .pv-body img{display:block;width:122%;height:100%;object-fit:cover;object-position:0 0;will-change:transform}
#angebote .pv-kind-cockpit .ui-kpis{flex:none;display:grid;grid-template-columns:repeat(3,1fr);gap:1.2cqw;padding:1.4cqw 2.4cqw;border-top:1px solid var(--line);background:#121415}
#angebote .pv-kind-cockpit .ui-glas{position:absolute;left:2.4cqw;right:2.4cqw;bottom:2.4cqw;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4cqw;padding:1.4cqw;border-radius:1.8cqw;background:rgba(12,14,15,.8);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.09),0 2cqw 4cqw -1.4cqw rgba(0,0,0,.7)}
#angebote .pv-kind-cockpit .ui-kpi{padding:1cqw 1.4cqw;border-radius:1.2cqw;background:rgba(255,255,255,.04)}
#angebote .pv-kind-cockpit .ui-kpi small{display:flex;align-items:center;gap:.6cqw;font-size:1.35cqw;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:600}
#angebote .pv-kind-cockpit .ui-kpi small::before{content:"";width:.8cqw;height:.8cqw;border-radius:50%;background:var(--lime)}
#angebote .pv-kind-cockpit .ui-kpi.amber small::before{background:var(--amber)}
#angebote .pv-kind-cockpit .ui-kpi b{display:block;font-size:2.7cqw;font-weight:700;letter-spacing:-.02em;margin-top:.4cqw;line-height:1.1}
#angebote .pv-kind-cockpit .ui-kpi span{display:block;font-size:1.4cqw;color:var(--muted);margin-top:.3cqw}

/* ── 06 Content-Engine: Redaktionsplan mit Artikelkarte und Stufen ── */
#angebote .pv-kind-blog .ui-head{flex:none;display:flex;align-items:flex-start;justify-content:space-between;gap:2cqw;padding:2cqw 2.6cqw 0}
#angebote .pv-kind-blog .ui-head strong{display:block;font-size:2.9cqw;font-weight:650;letter-spacing:-.025em;line-height:1.1;margin-top:.5cqw}
#angebote .pv-kind-blog .ui-count{text-align:right;line-height:1}
#angebote .pv-kind-blog .ui-count b{display:block;font-size:4.4cqw;font-weight:750;letter-spacing:-.04em;color:var(--lime)}
#angebote .pv-kind-blog .ui-count small{font-size:1.45cqw;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
#angebote .pv-kind-blog .ui-artikel{flex:none;margin:1.6cqw 2.6cqw 0;display:grid;grid-template-columns:auto 1fr;gap:1.8cqw;padding:1.6cqw;border-radius:1.8cqw;background:linear-gradient(180deg,#1c1f20,#171a1b);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1cqw 2.4cqw -1cqw rgba(0,0,0,.6)}
#angebote .pv-kind-blog .ui-cover{width:11cqw;height:11cqw;border-radius:1.2cqw;background:linear-gradient(150deg,#4a5a2c,#243018 55%,#171a16);position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
#angebote .pv-kind-blog .ui-cover::before{content:"";position:absolute;inset:auto -20% -30% auto;width:80%;height:80%;border-radius:50%;background:radial-gradient(circle,rgba(163,230,53,.55),transparent 70%)}
#angebote .pv-kind-blog .ui-cover::after{content:"";position:absolute;left:12%;right:12%;bottom:16%;height:6%;border-radius:99px;background:rgba(255,255,255,.35);box-shadow:0 -18% 0 -1px rgba(255,255,255,.22),0 -36% 0 -1px rgba(255,255,255,.14)}
#angebote .pv-kind-blog .ui-artikel strong{display:block;font-size:2.35cqw;font-weight:650;letter-spacing:-.015em;line-height:1.2;margin:.5cqw 0 .9cqw}
#angebote .pv-kind-blog .ui-artikel .ui-kw{font-size:1.65cqw;color:var(--lime);font-weight:600}
#angebote .pv-kind-blog .ui-artikel .ui-row{display:flex;gap:.8cqw;flex-wrap:wrap;align-items:center}
#angebote .pv-kind-blog .ui-artikel .ui-row small{font-size:1.5cqw;color:var(--muted);margin-left:auto;white-space:nowrap}
#angebote .pv-kind-blog .ui-next{flex:none;margin:1.1cqw 2.6cqw 0;display:flex;align-items:center;gap:1.4cqw;padding:1.1cqw 1.6cqw;border-radius:1.4cqw;background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);font-size:1.75cqw;color:var(--muted)}
#angebote .pv-kind-blog .ui-next b{color:var(--paper);font-weight:600;font-size:1.85cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#angebote .pv-kind-blog .ui-next .ui-chip{margin-left:auto}
#angebote .pv-kind-blog .ui-next i{width:2.6cqw;height:2.6cqw;border-radius:.7cqw;background:linear-gradient(150deg,#3a3f2a,#1d2017);flex:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
#angebote .pv-kind-blog .ui-steps{flex:none;margin:auto 2.6cqw 1.6cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
#angebote .pv-kind-blog .ui-foot{margin-top:0}
#angebote .pv-kind-blog .ui-step{position:relative;text-align:center;font-size:1.6cqw;color:var(--muted);padding-top:3.2cqw}
#angebote .pv-kind-blog .ui-step::before{content:"";position:absolute;top:1.1cqw;left:0;right:0;height:1px;background:rgba(255,255,255,.12)}
#angebote .pv-kind-blog .ui-step:first-child::before{left:50%}#angebote .pv-kind-blog .ui-step:last-child::before{right:50%}
#angebote .pv-kind-blog .ui-step i{position:absolute;top:0;left:50%;transform:translateX(-50%);width:2.3cqw;height:2.3cqw;border-radius:50%;background:var(--lime);display:grid;place-items:center;box-shadow:0 0 0 .5cqw rgba(163,230,53,.15)}
#angebote .pv-kind-blog .ui-step i svg{width:1.3cqw;height:1.3cqw;stroke:#0a0b0c;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
#angebote .pv-kind-blog .ui-step.offen i{background:#1d2022;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
#angebote .pv-kind-blog .ui-step.offen i svg{stroke:var(--paper);stroke-width:2.4}
#angebote .pv-kind-blog .ui-step.offen{color:var(--paper);font-weight:600}
#angebote .pv-kind-blog .ui-step.jetzt i{background:var(--amber);box-shadow:0 0 0 .5cqw rgba(245,180,84,.18)}


/* ═══════════ Bewegung — startet, sobald das Raster sichtbar ist (.in-view vom Seitenskript) ═══════════
   Alles GPU-freundlich (transform, opacity, object-position, stroke-dashoffset), einmalig bzw. sanft
   in Schleife. Ohne .in-view stehen die Karten fertig da; bei reduzierter Bewegung ebenfalls. */
@keyframes pvRise{from{opacity:0;transform:translateY(1.6cqw)}to{opacity:1;transform:none}}
@keyframes pvPop{from{transform:translateX(-50%) scale(.3);opacity:0}to{transform:translateX(-50%) scale(1);opacity:1}}
@keyframes pvPan{from{transform:translateY(0)}to{transform:translateY(-14%)}}
@keyframes pvPanX{from{transform:translateX(0)}to{transform:translateX(-18%)}}
@keyframes pvTippen{from{max-width:0}to{max-width:40cqw}}
@keyframes pvCaret{50%{border-color:transparent}}
@keyframes pvDraw{to{stroke-dashoffset:0}}
@keyframes pvDrop{from{transform:translateY(-4cqw) rotate(-45deg);opacity:0}60%{transform:translateY(.6cqw) rotate(-45deg);opacity:1}to{transform:rotate(-45deg);opacity:1}}
@keyframes pvWave{from{transform:scaleY(.45)}to{transform:scaleY(1.15)}}
@keyframes pvDotsAus{to{opacity:0;visibility:hidden}}
@keyframes pvEin{to{opacity:1}}
@keyframes pvShimmer{from{transform:translate(-14%,-10%) scale(1)}to{transform:translate(12%,8%) scale(1.15)}}
#angebote .in-view .pv-kind-web .pv-body img{animation:pvPan 18s ease-in-out 1.2s infinite alternate}
#angebote .in-view .pv-kind-web .pv-phone img{animation:pvPan 14s ease-in-out 2.4s infinite alternate}
#angebote .in-view .pv-kind-web .ui-foot{animation:pvRise .6s var(--ease,ease) .9s both}
#angebote .in-view .pv-kind-seo .ui-tippen{max-width:0;animation:pvTippen 1.3s steps(15,end) .5s forwards,pvCaret .8s step-end 1.8s 6}
#angebote .in-view .pv-kind-seo .ui-hit.top{animation:pvRise .7s var(--ease,ease) 1.9s both}
#angebote .in-view .pv-kind-seo .ui-hit.zwei{animation:pvRise .7s var(--ease,ease) 2.2s both}
#angebote .in-view .pv-kind-seo .ui-pin:not(.zwei){animation:pvDrop .7s cubic-bezier(.2,.9,.3,1.2) 2.4s both}
#angebote .in-view .pv-kind-seo .ui-pin.zwei{animation:pvDrop .7s cubic-bezier(.2,.9,.3,1.2) 2.7s both}
#angebote .in-view .pv-kind-seo .ui-trend svg path{stroke-dasharray:220;stroke-dashoffset:220;animation:pvDraw 1.6s ease-out 2.9s forwards}
#angebote .in-view .pv-kind-seo .ui-trend b{animation:pvRise .6s var(--ease,ease) 3.4s both}
#angebote .in-view .pv-kind-phone .ui-wave i{transform-origin:bottom;animation:pvWave 1s ease-in-out infinite alternate;animation-delay:calc(var(--i,0)*-.09s)}
#angebote .in-view .pv-kind-phone .ui-quote p{animation:pvRise .6s var(--ease,ease) .4s both}
#angebote .in-view .pv-kind-phone .ui-tags .ui-chip{animation:pvRise .5s var(--ease,ease) both}
#angebote .in-view .pv-kind-phone .ui-tags .ui-chip:nth-child(1){animation-delay:1.1s}#angebote .in-view .pv-kind-phone .ui-tags .ui-chip:nth-child(2){animation-delay:1.3s}#angebote .in-view .pv-kind-phone .ui-tags .ui-chip:nth-child(3){animation-delay:1.5s}
#angebote .in-view .pv-kind-phone .ui-event{animation:pvRise .7s var(--ease,ease) 2s both}
#angebote .in-view .pv-kind-phone .ui-foot .ui-ok{animation:pvRise .5s var(--ease,ease) both}
#angebote .in-view .pv-kind-phone .ui-foot .ui-ok:nth-child(1){animation-delay:2.6s}#angebote .in-view .pv-kind-phone .ui-foot .ui-ok:nth-child(2){animation-delay:2.9s}
#angebote .in-view .pv-kind-chat .ui-msg.du{animation:pvRise .5s var(--ease,ease) .8s both}
#angebote .in-view .pv-kind-chat .ui-msg.bot{animation:pvRise .5s var(--ease,ease) 1.7s both}
#angebote .in-view .pv-kind-chat .ui-dots{animation:pvDotsAus .3s ease 3.1s forwards}
#angebote .in-view .pv-kind-chat .ui-dots i{animation:pvPuls .9s ease-in-out infinite}
#angebote .in-view .pv-kind-chat .ui-dots i:nth-child(2){animation-delay:.15s}#angebote .in-view .pv-kind-chat .ui-dots i:nth-child(3){animation-delay:.3s}
#angebote .in-view .pv-kind-chat .ui-txt{opacity:0;animation:pvEin .4s ease 3.2s forwards}
#angebote .in-view .pv-kind-chat .ui-quick{animation:pvRise .5s var(--ease,ease) 3.8s both}
#angebote .in-view .pv-kind-chat .ui-status .ui-ok{animation:pvRise .5s var(--ease,ease) both}
#angebote .in-view .pv-kind-chat .ui-status .ui-ok:nth-child(1){animation-delay:4.2s}#angebote .in-view .pv-kind-chat .ui-status .ui-ok:nth-child(2){animation-delay:4.5s}
#angebote .in-view .pv-kind-cockpit .pv-body img{animation:pvPanX 22s ease-in-out 1s infinite alternate}
#angebote .in-view .pv-kind-cockpit .ui-kpi{animation:pvRise .6s var(--ease,ease) both}
#angebote .in-view .pv-kind-cockpit .ui-kpi:nth-child(1){animation-delay:.8s}#angebote .in-view .pv-kind-cockpit .ui-kpi:nth-child(2){animation-delay:1.1s}#angebote .in-view .pv-kind-cockpit .ui-kpi:nth-child(3){animation-delay:1.4s}
#angebote .in-view .pv-kind-blog .ui-artikel{animation:pvRise .7s var(--ease,ease) .5s both}
#angebote .in-view .pv-kind-blog .ui-cover::before{animation:pvShimmer 5s ease-in-out 1.5s infinite alternate;will-change:transform}
#angebote .in-view .pv-kind-blog .ui-next{animation:pvRise .6s var(--ease,ease) 1.1s both}
#angebote .in-view .pv-kind-blog .ui-step i{animation:pvPop .55s cubic-bezier(.2,.9,.3,1.4) both}
#angebote .in-view .pv-kind-blog .ui-step:nth-child(1) i{animation-delay:1.6s}#angebote .in-view .pv-kind-blog .ui-step:nth-child(2) i{animation-delay:2.1s}#angebote .in-view .pv-kind-blog .ui-step:nth-child(3) i{animation-delay:2.6s}#angebote .in-view .pv-kind-blog .ui-step:nth-child(4) i{animation-delay:3.1s}
#angebote .in-view .pv-kind-blog .ui-foot .ui-ok{animation:pvRise .5s var(--ease,ease) both}
#angebote .in-view .pv-kind-blog .ui-foot .ui-ok:nth-child(1){animation-delay:3.5s}#angebote .in-view .pv-kind-blog .ui-foot .ui-ok:nth-child(2){animation-delay:3.8s}
@media(prefers-reduced-motion:reduce){#angebote .pv *,#angebote .pv *::before{animation:none!important;opacity:1!important;max-width:none!important;stroke-dashoffset:0!important;visibility:visible!important}}
/* ── Karte drumherum: Titelzeile nach der Bühne ── */
#angebote article>h3{margin-top:8px;line-height:1.2}
#angebote article>p.uppercase{color:#526344}
#angebote article:focus-within{outline:2px solid #a3e635;outline-offset:3px}
@media(max-width:899px){#angebote>div>div.mt-12.grid{grid-template-columns:minmax(0,1fr);max-width:600px;margin-left:auto;margin-right:auto}}
@media(prefers-reduced-motion:reduce){#angebote article{transition:none!important;transform:none!important}#angebote .pv-kind-phone .ui-live::before{animation:none}}
/* Schmale Karten (Handy, Container unter 470 px): Schrift eine Stufe groesser, damit
   nichts unter 8 px faellt — cqw allein wuerde die Texte proportional mitschrumpfen */
@container (max-width:470px){
  #angebote .pv-meta b{font-size:3cqw}#angebote .pv-meta>span{font-size:1.95cqw}
  #angebote .pv-chrome{font-size:2cqw}
  #angebote .pv-output small{font-size:1.95cqw}#angebote .pv-output strong{font-size:3.5cqw}
  #angebote .ui-eyebrow{font-size:1.85cqw}#angebote .ui-chip{font-size:2cqw;padding:.7cqw 1.6cqw}#angebote .ui-ok{font-size:2cqw}
  #angebote .pv-kind-web .pv-toast b{font-size:2.3cqw}#angebote .pv-kind-web .pv-toast small{font-size:1.85cqw}
  #angebote .pv-kind-seo .ui-search{font-size:2.7cqw}#angebote .pv-kind-seo .ui-hit strong{font-size:2.7cqw}#angebote .pv-kind-seo .ui-hit span,#angebote .pv-kind-seo .ui-stars{font-size:1.95cqw}
  #angebote .pv-kind-seo .ui-trend{font-size:2cqw}#angebote .pv-kind-seo .ui-trend b{font-size:3.3cqw}
  #angebote .pv-kind-phone .ui-call strong{font-size:3.1cqw}#angebote .pv-kind-phone .ui-quote p{font-size:3.5cqw}#angebote .pv-kind-phone .ui-event strong{font-size:3cqw}
  #angebote .pv-kind-chat .ui-site strong{font-size:4.4cqw}#angebote .pv-kind-chat .ui-site nav,#angebote .pv-kind-chat .ui-site .ui-cta{font-size:1.9cqw}
  #angebote .pv-kind-chat .ui-msg{font-size:2.15cqw;padding:1cqw 1.4cqw}#angebote .pv-kind-chat .ui-quick{display:none}#angebote .pv-kind-chat .ui-chat{top:1.6cqw;bottom:6.4cqw}#angebote .pv-kind-chat .ui-chat-head strong{font-size:2.3cqw}#angebote .pv-kind-chat .ui-chat-head small{font-size:1.75cqw}#angebote .pv-kind-chat .ui-input{font-size:2cqw}
  #angebote .pv-kind-cockpit .ui-kpi small{font-size:1.65cqw}#angebote .pv-kind-cockpit .ui-kpi b{font-size:3.1cqw}#angebote .pv-kind-cockpit .ui-kpi span{font-size:1.7cqw}
  #angebote .pv-kind-blog .ui-head{padding-top:1.5cqw}#angebote .pv-kind-blog .ui-cover{width:9cqw;height:9cqw}#angebote .pv-kind-blog .ui-artikel{padding:1.2cqw 1.4cqw;margin-top:1.2cqw}#angebote .pv-kind-blog .ui-next{margin-top:.8cqw;padding:.8cqw 1.4cqw}#angebote .pv-kind-blog .ui-steps{margin-bottom:1.1cqw}
  #angebote .pv-kind-blog .ui-head strong{font-size:3.3cqw}#angebote .pv-kind-blog .ui-artikel strong{font-size:2.7cqw}#angebote .pv-kind-blog .ui-artikel .ui-kw{font-size:1.95cqw}#angebote .pv-kind-blog .ui-next{font-size:2cqw}#angebote .pv-kind-blog .ui-next b{font-size:2.1cqw}#angebote .pv-kind-blog .ui-step{font-size:1.9cqw}
}
/* Schmale Karten (unter 400 px): Nebeninfos weichen, Kernaussage bleibt */
@container (max-width:400px){
  #angebote .pv-meta>span{max-width:56%}
  #angebote .pv-kind-seo .ui-hit.zwei{display:none}
  #angebote .pv-kind-seo .ui-trend small{display:none}
  #angebote .pv-kind-chat .ui-site p{display:none}
  #angebote .pv-kind-blog .ui-artikel .ui-row small{display:none}
  #angebote .pv-kind-phone .ui-tags{display:none}
}

/* Produktkarten in #eigene-systeme (Cockpit, Ascend OS, Gastro System) */
#firmen-cockpit .pv-cockpit-feature{border:1px solid #3c4930;border-radius:16px;overflow:hidden;box-shadow:0 20px 55px #0003;background:#12180e}#firmen-cockpit .pv-cockpit-feature img{width:100%;height:auto}#firmen-cockpit .pv-cockpit-feature figcaption{padding:18px 20px;font-size:16px;color:#edf5e5;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px}#firmen-cockpit .pv-cockpit-feature figcaption span{font-size:11px;color:#b9c8aa}
.pv-owned{position:relative;margin:0 0 18px;border-radius:12px;overflow:hidden;background:#0a0d07;box-shadow:0 12px 26px -14px rgba(0,0,0,.85)}.pv-owned::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 0 1px 0 rgba(255,255,255,.07);pointer-events:none}.pv-owned img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top left}