/* ═══════════════════════════════════════════════════════════════
   CONTENT ENGINE MACHINE · Produktseite + Startseiten-Teaser
   Eigene Schicht nach dem Muster ki-demo.css: Präfix ce-,
   Farben ausschließlich über Design-Tokens aus style.css.
   Choreografie greift NUR bei .ce-armed (setzt content-engine.js);
   ohne JS oder mit reduced-motion ist alles sofort sichtbar.
═══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.ce-hero-grid{display:flex;gap:48px;align-items:center;flex-wrap:wrap;}
.ce-hero-copy{flex:1 1 380px;min-width:300px;}
.ce-hero-visual{flex:1 1 340px;min-width:280px;display:flex;justify-content:center;}
.ce-hero-visual svg{width:100%;height:auto;max-width:520px;filter:drop-shadow(0 26px 46px rgba(0,0,0,.5));}
.ce-hero-pills{display:flex;gap:12px;flex-wrap:wrap;font-weight:700;font-size:.95rem;color:var(--cream,#EDEADD);}
.ce-pill{display:inline-flex;align-items:center;gap:8px;background:rgba(237,234,221,.06);border:1px solid var(--line,rgba(237,234,221,.14));border-radius:999px;padding:9px 15px;}
.ce-pill-dot{width:9px;height:9px;border-radius:50%;flex:none;}
.ce-hero.hero{background:radial-gradient(120% 80% at 6% 4%, rgba(184,232,52,.15), transparent 46%),radial-gradient(120% 92% at 96% 98%, rgba(255,138,31,.18), transparent 50%),var(--bg,#0A0D0B);}

/* ── Demo-Bühne ── */
.ce-demo{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(280px,420px) 1fr;gap:clamp(22px,3.5vw,40px);align-items:start;}
@media (max-width:900px){.ce-demo{grid-template-columns:1fr;}}

.ce-demo-photo{margin:0;position:relative;}
.ce-demo-photo img{width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 24px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(184,232,52,.06);}
.ce-demo-photo figcaption{margin-top:10px;font-size:.85rem;color:var(--muted,#ABAE9F);letter-spacing:.02em;text-transform:uppercase;font-weight:700;}
.ce-reportage{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;}
.ce-reportage figure{margin:0;min-width:0;position:relative;border:1px solid rgba(237,234,221,.1);border-radius:14px;overflow:hidden;background:rgba(19,26,20,.72);}
.ce-reportage img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;}
.ce-reportage figcaption{display:flex;align-items:center;gap:8px;padding:10px 12px;color:var(--cream,#EDEADD);font-size:.8rem;font-weight:700;letter-spacing:.02em;}
.ce-reportage figcaption b{font-family:var(--mono, monospace);color:var(--lime,#B8E834);font-size:.72rem;}
@media(max-width:560px){.ce-reportage{grid-template-columns:1fr}.ce-reportage img{aspect-ratio:16/10}}

.ce-demo-read{margin-top:18px;display:flex;flex-wrap:wrap;gap:10px;}
.ce-chip{display:inline-flex;align-items:baseline;gap:7px;background:rgba(184,232,52,.07);border:1px solid rgba(184,232,52,.22);border-radius:999px;padding:8px 14px;font-size:.9rem;color:var(--cream,#EDEADD);}
.ce-chip b{color:var(--lime,#B8E834);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;}

.ce-demo-run{margin-top:20px;}

/* ── Ausgabe-Karten: drei Plattformen, sichtbar unterschiedlich ── */
.ce-demo-outputs{display:grid;gap:16px;align-content:start;}
.ce-out{background:var(--bg-card,#131A14);border:1px solid var(--line,rgba(237,234,221,.10));border-radius:18px;padding:22px 24px;}
.ce-out-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}
.ce-out-platform{font-weight:800;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:999px;}
.ce-out-platform--ig{background:rgba(184,232,52,.14);color:var(--lime,#B8E834);}
.ce-out-platform--fb{background:rgba(255,138,31,.14);color:var(--orange,#FF8A1F);}
.ce-out-platform--li{background:rgba(237,234,221,.10);color:var(--cream,#EDEADD);}
.ce-out-fit{font-size:.85rem;color:var(--muted,#ABAE9F);}
.ce-out-fit b{color:var(--cream,#EDEADD);}
.ce-out-text{margin:0;color:var(--cream,#EDEADD);line-height:1.6;}
.ce-out-tags{color:var(--lime-soft,#8FB02E);}
.ce-out-note{margin-top:12px;font-size:.85rem;color:var(--muted,#ABAE9F);border-top:1px solid var(--line,rgba(237,234,221,.10));padding-top:10px;}

.ce-demo-legal{margin-top:22px;font-size:.9rem;color:var(--muted,#ABAE9F);max-width:820px;}
.ce-demo-legal a{color:var(--lime,#B8E834);}

/* ── Choreografie: nur wenn JS die Bühne scharf schaltet ── */
.ce-armed .ce-chip,
.ce-armed .ce-out{opacity:0;transform:translateY(14px);}
.ce-armed .ce-out{transform:translateY(18px) scale(.98);}
.ce-armed.ce-play .ce-chip{opacity:1;transform:none;transition:opacity .5s ease,transform .5s cubic-bezier(.22,.61,.36,1);transition-delay:calc(var(--ci,0)*160ms);}
.ce-armed.ce-play .ce-out{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);transition-delay:calc(700ms + var(--co,0)*220ms);}
@media (prefers-reduced-motion:reduce){
  .ce-armed .ce-chip,.ce-armed .ce-out{opacity:1;transform:none;transition:none;}
}

/* ── Produktfilm: Video-Bühne + Nutzenblock ── */
.ce-film{margin-top:clamp(28px,4vw,44px);display:grid;grid-template-columns:minmax(0,1.55fr) minmax(260px,1fr);gap:clamp(24px,3.5vw,48px);align-items:center;}
@media (max-width:960px){.ce-film{grid-template-columns:minmax(0,1fr);}}
.ce-film-stage{min-width:0;position:relative;border-radius:18px;overflow:hidden;background:#070A07;box-shadow:0 24px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(184,232,52,.08);}
.ce-ai-media-label{position:absolute;z-index:3;top:12px;left:12px;display:inline-flex;align-items:center;max-width:calc(100% - 24px);padding:6px 10px;border:1px solid rgba(237,234,221,.28);border-radius:999px;background:rgba(7,10,7,.82);backdrop-filter:blur(9px);color:var(--cream,#EDEADD);font-size:.68rem;font-weight:800;line-height:1.2;letter-spacing:.035em;text-transform:uppercase;}
.ce-reportage .ce-ai-media-label{top:8px;left:8px;max-width:calc(100% - 16px);padding:5px 8px;font-size:.58rem;}
.ce-film-stage video{display:block;width:100%;height:auto;aspect-ratio:16/9;}
/* Eigene Bedienelemente erst, wenn JS übernimmt (sonst native controls) */
.ce-film-controls{display:none;}
.ce-film-js .ce-film-controls{display:flex;position:absolute;left:14px;bottom:14px;gap:10px;}
.ce-film-btn{width:46px;height:46px;border-radius:50%;background:rgba(7,10,7,.74);border:1px solid rgba(237,234,221,.24);color:var(--cream,#EDEADD);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .2s ease,color .2s ease;}
.ce-film-btn:hover{border-color:var(--lime,#B8E834);color:var(--lime,#B8E834);}
.ce-film-btn:focus-visible{outline:2px solid var(--lime,#B8E834);outline-offset:3px;}
.ce-film-btn svg{width:17px;height:17px;fill:currentColor;}
.ce-film-btn svg[hidden]{display:none;}
.ce-film-error{position:absolute;left:14px;right:14px;bottom:14px;margin:0;background:rgba(7,10,7,.9);border:1px solid rgba(255,138,31,.4);border-radius:12px;padding:12px 16px;color:var(--cream,#EDEADD);font-size:.92rem;}
.ce-film-list{list-style:none;padding:0;margin:0;display:grid;gap:14px;font-size:1.02rem;}
.ce-channel-system{margin-top:24px;padding-top:18px;border-top:1px solid var(--line,rgba(237,234,221,.10));}
.ce-channel-label{display:block;margin-bottom:12px;color:var(--muted,#ABAE9F);font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;}
.ce-channel-icons{display:grid;grid-template-columns:repeat(4,minmax(54px,1fr));gap:10px;}
.ce-channel{min-width:0;display:grid;justify-items:center;gap:7px;padding:10px 4px;border:1px solid rgba(237,234,221,.1);border-radius:13px;background:rgba(237,234,221,.035);color:var(--cream,#EDEADD);}
.ce-channel svg{width:25px;height:25px;overflow:visible;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;}
.ce-channel .ce-fill{fill:currentColor;stroke:none;}
.ce-channel .ce-knockout{fill:var(--bg,#0A0D0B);}
.ce-channel b{max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:.62rem;line-height:1;letter-spacing:.01em;}
/* Kanal-Icons monochrom in Markenfarbe — Fantasie-Plattformfarben waren weder Marke noch Original */
.ce-channel--ig,.ce-channel--fb,.ce-channel--li,.ce-channel--tt,.ce-channel--yt,.ce-channel--th,.ce-channel--pi{color:var(--cream,#EDEADD);opacity:.85;}
@media(max-width:420px){.ce-channel-icons{grid-template-columns:repeat(4,minmax(50px,1fr));gap:7px}.ce-channel{padding-inline:2px}.ce-channel b{font-size:.56rem}}
.ce-film-cta{margin-top:26px;}
@media (max-width:960px){.ce-film-cta .btn{width:100%;text-align:center;}}

/* ── Startseiten-Teaser ── */
.ce-teaser{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;}
@media (max-width:900px){.ce-teaser{grid-template-columns:1fr;}}
.ce-teaser-flow{display:grid;gap:12px;}
.ce-flow-row{display:flex;align-items:center;gap:12px;}
.ce-flow-node{flex:1;background:var(--bg-card,#131A14);border:1px solid var(--line,rgba(237,234,221,.10));border-radius:14px;padding:14px 16px;font-size:.95rem;color:var(--cream,#EDEADD);}
.ce-flow-node b{display:block;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted,#ABAE9F);margin-bottom:3px;}
.ce-flow-node--in b{color:var(--lime,#B8E834);}
.ce-flow-arrow{color:var(--lime-soft,#8FB02E);font-weight:800;flex:none;}