/* Alternative landing page: illustrative, locally animated product scenes. */
.hero-grid { grid-template-columns:1fr 1.08fr; gap:48px; padding-top:50px; padding-bottom:55px; }
.hero-stage--demo { padding:0; min-width:0; }
.hero-stage--demo .stage-orbit { top:65px; left:-25px; }
.hero-stage--demo .stage-caption { display:flex; align-items:center; gap:9px; margin:0 0 15px 8px; }
.hero-stage--demo .stage-caption>span { color:var(--accent); font-size:23px; font-style:normal; }
.demo-player { position:relative; border:1px solid #d5cec0; border-radius:14px; background:#fffdf8; box-shadow:0 24px 65px #43331c12,0 3px 8px #43331c05; scroll-margin-top:16px; }
.demo-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:8px; gap:4px; background:#eee9de; border-radius:14px 14px 0 0; border-bottom:1px solid #ded6c8; }
.demo-tabs button { display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 4px; border:1px solid transparent; border-radius:6px; background:transparent; color:#63635b; font-size:11px; font-weight:650; }
.demo-tabs button>span { font-size:9px; font-weight:450; opacity:.75; }
.demo-tabs button:hover { background:#ffffff80; color:var(--ink); }
.demo-tabs button[aria-selected="true"] { color:#fffaf0; background:var(--ink); border-color:var(--ink); box-shadow:0 2px 3px #252b2e15; }
.demo-tabs button[aria-selected="true"]>span { color:var(--gold); opacity:1; }
.demo-tabs button:focus-visible { outline-offset:1px; }
.demo-panel { border-radius:12px; }
.demo-panel:focus-visible { outline-offset:-4px; }
.demo-head { display:flex; align-items:center; gap:11px; padding:20px 22px 18px; border-bottom:1px solid #ebe5da; }
.demo-head img { flex-shrink:0; }
.demo-head>div { min-width:0; }
.demo-head strong { display:block; font-size:13px; font-weight:700; letter-spacing:-.02em; line-height:1.4; }
.demo-head div>span { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.demo-head>.example-tag { margin-left:auto; background:#f5e8ce; color:#7c602f; flex-shrink:0; }
.demo-scene { min-height:430px; padding:22px; }
.demo-chat-scene,.demo-quote-scene { display:flex; flex-direction:column; align-items:flex-start; gap:15px; }
.demo-message { max-width:90%; font-size:13px; line-height:1.6; }
.demo-message p { margin:4px 0 0; }
.demo-author { display:block; font-size:9px; line-height:1.5; font-weight:700; }
.demo-message--user { align-self:flex-end; border-radius:10px 10px 2px 10px; background:#eeeae0; padding:10px 14px; }
.demo-message--user .demo-author { color:#747165; }
.demo-message--geselle { padding-left:13px; border-left:2px solid #dfb18e; }
.demo-message--geselle .demo-author { color:var(--accent); }
.demo-message .source-chip { margin-top:8px; padding:4px 7px; font-size:9px; }
.demo-takeaway { display:flex; align-items:baseline; gap:8px; margin:0; padding:13px 22px; background:#f7f3e9; border-block:1px solid #ebe5da; color:#635e50; font-size:10px; line-height:1.6; }
.demo-takeaway>span { color:var(--accent); }
.demo-controls { padding:15px 20px; background:#fffdf8; border-radius:0 0 14px 14px; }
.demo-progress { display:flex; gap:5px; margin-bottom:12px; }
.demo-progress>span { flex:1; height:3px; background:#eae5da; border-radius:4px; }
.demo-progress>.is-reached { background:#ba6845; }
.demo-progress>.is-current { background:var(--accent); }
.demo-control-row { display:flex; align-items:center; gap:10px; justify-content:space-between; min-height:32px; }
.demo-status { display:flex; align-items:center; gap:10px; margin:0; color:var(--muted); font-size:10px; line-height:1.5; }
[data-demo-count] { white-space:nowrap; color:var(--accent); font-variant-numeric:tabular-nums; font-weight:650; }
[data-demo-caption-display] { max-width:210px; }
.demo-buttons { display:flex; gap:4px; flex-shrink:0; }
.demo-buttons button { display:flex; align-items:center; justify-content:center; gap:7px; min-height:34px; padding:6px 8px; background:transparent; color:var(--ink); border:1px solid #dfd8cc; border-radius:5px; font-size:10px; }
.demo-buttons button:hover:not(:disabled) { background:#f2ede2; border-color:#bbae99; }
.demo-buttons button:disabled { opacity:.35; cursor:default; }
[data-demo-play-icon] { width:12px; font-size:14px; }
.demo-buttons [data-demo-next] { min-width:34px; font-size:17px; }
.demo-disclaimer { margin:13px 6px 0; color:#79776e; font-size:10px; line-height:1.6; text-align:center; }
.demo-announcement { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.demo-site { position:relative; overflow:hidden; background:#ece7da; border:1px solid #dad1bf; border-radius:7px; }
.demo-address { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; background:#fffdf8; color:#73746e; font-size:10px; }
.demo-browser-dots { color:#c2b9a8; font-size:7px; letter-spacing:2px; }
.demo-site-content { position:relative; min-height:124px; overflow:hidden; padding:19px; }
.demo-site-brand { position:relative; z-index:1; display:block; color:#626451; font-size:8px; letter-spacing:.09em; font-weight:750; }
.demo-site-brand small { font-size:8px; font-weight:400; letter-spacing:0; margin-left:6px; }
.demo-site-content>strong { position:relative; z-index:1; display:block; margin-top:19px; font-size:24px; line-height:1.1; letter-spacing:-.06em; font-weight:750; }
.demo-timber { position:absolute; display:flex; gap:6px; width:130px; height:185px; top:27px; right:8px; transform:rotate(24deg); }
.demo-timber i { flex:1; background:linear-gradient(90deg,#b98b62,#c69b74 30%,#ad7c55); border-radius:3px; box-shadow:3px 4px 5px #5f473820; }
.demo-scan-line { display:none; position:absolute; z-index:2; top:37px; bottom:0; left:0; width:100%; height:2px; background:var(--accent); box-shadow:0 -16px 28px 10px #b84f3220; }
.demo-player.is-enhanced[data-scene="website"][data-step="1"] .demo-scan-line { display:block; animation:demo-scan 2s ease-in-out infinite alternate; }
.demo-scan-pages { display:flex; justify-content:space-between; gap:7px; padding:11px 0; color:#61714b; font-size:10px; }
.demo-scan-pages b { margin-right:4px; font-size:11px; }
.demo-extraction { display:grid; gap:8px; }
.demo-extraction>div { display:flex; gap:10px; align-items:center; padding:7px 11px; border:1px solid #e4dfd2; border-radius:5px; background:#fffefb; }
.demo-document-icon { display:grid; place-items:center; width:28px; height:31px; border:1px solid #d4c4a7; border-radius:3px; font-size:22px; color:#96734e; background:#f8f1e4; }
.demo-extraction strong,.demo-extraction small { display:block; font-size:11px; }
.demo-extraction small { color:var(--muted); font-size:9px; margin-top:4px; }
.demo-result { display:flex; align-items:center; gap:10px; padding:12px; background:#eef0e5; border:1px solid #dfe3d0; border-radius:6px; width:100%; color:#52603e; }
.demo-scan-scene .demo-result { margin-top:13px; }
.demo-result-icon { display:grid; place-items:center; flex:0 0 24px; height:24px; border:1px solid #b7c39e; border-radius:50%; font-size:13px; }
.demo-result strong { display:block; font-size:11px; line-height:1.5; }
.demo-result div>span { display:block; margin-top:3px; font-size:10px; line-height:1.6; }
.demo-quote { width:100%; padding:2px 13px; background:#f8f4eb; border:1px solid #e3dac9; border-radius:6px; }
.demo-quote>div { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 0; font-size:10px; border-bottom:1px solid #e6dece; }
.demo-quote>div:last-child { border:0; }
.demo-quote>div>span:last-child { color:#727164; text-align:right; }
.demo-quote-title strong { font-size:11px; }
.demo-quote .demo-quote-title>span { color:#88612f; font-size:9px; background:#f0e0bf; padding:3px 6px; border-radius:3px; }
.demo-quote .demo-quote-open>span:last-child { color:var(--accent); }
.demo-player.is-enhanced [data-demo-step].is-entering { animation:demo-arrive .4s ease-out both; }
.demo-typing { display:flex; align-items:center; gap:4px; padding:9px 13px; color:#8d7862; font-size:9px; }
.demo-typing>span { margin-right:6px; }
.demo-typing>i { height:4px; width:4px; background:currentColor; border-radius:50%; animation:demo-type 1.2s ease-in-out infinite; }
.demo-typing>i:nth-last-child(2) { animation-delay:.15s; }
.demo-typing>i:last-child { animation-delay:.3s; }
.demo-player[data-playback="paused"] * { animation-play-state:paused!important; }
@keyframes demo-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes demo-type { 0%,70%,100% { opacity:.3; transform:translateY(0); } 35% { opacity:1; transform:translateY(-3px); } }
@keyframes demo-scan { from { top:37px; } to { top:100%; } }
/* Szenen liegen im selben Grid-Feld: der Player ist so hoch wie die hoechste Szene,
   ein Szenenwechsel verschiebt die Seite nicht (unabhaengig von Font-Rendering). */
.demo-player.is-enhanced { display:grid; grid-template-columns:minmax(0,1fr); }
.demo-player.is-enhanced .demo-tabs { grid-row:1; }
.demo-player.is-enhanced .demo-panel { grid-row:2; grid-column:1; }
.demo-player.is-enhanced .demo-panel[hidden] { display:block!important; visibility:hidden; }
.demo-player.is-enhanced .demo-controls { grid-row:3; }

@media (min-width:1550px) { .hero-grid { padding-block:70px; } }
@media (max-width:1120px) and (min-width:881px) {
  .hero-grid { gap:25px; grid-template-columns:1fr 1.16fr; }
  .demo-tabs button>span { display:none; }
  .demo-head { padding:16px; gap:8px; }
  .demo-head strong { font-size:12px; }
  .demo-scene { padding:18px; min-height:453px; }
  .demo-takeaway { padding-inline:18px; }
  .demo-controls { padding-inline:14px; }
}
@media (max-width:880px) {
  .hero-grid { grid-template-columns:1fr; gap:40px; }
  .hero-stage--demo { max-width:550px; }
}
@media (max-width:580px) {
  .hero-grid { gap:33px; padding-top:40px; }
  .hero-stage--demo { padding:0; }
  .demo-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); padding:7px; gap:5px; }
  .demo-tabs button { padding:10px; font-size:11px; justify-content:flex-start; gap:9px; }
  .demo-head { gap:9px; padding:16px 14px; }
  .demo-head img { width:30px; height:30px; }
  .demo-head strong { font-size:11px; }
  .demo-head div>span { font-size:9px; }
  .demo-head>.example-tag { font-size:8px; padding:3px 5px; }
  .demo-scene { min-height:452px; padding:18px 14px; }
  .demo-message { max-width:96%; font-size:12px; }
  .demo-takeaway { padding:12px 14px; font-size:10px; min-height:57px; }
  .demo-controls { padding:13px 12px; }
  .demo-status { gap:6px; font-size:9px; }
  [data-demo-caption-display] { max-width:155px; }
  .demo-buttons button { min-height:40px; }
  .demo-buttons [data-demo-next] { min-width:36px; }
  .demo-site-content { padding:16px; }
  .demo-site-content>strong { font-size:22px; }
  .demo-site-brand small { display:block; margin:3px 0 0; }
  .demo-timber { right:-25px; opacity:.8; }
  .demo-address { padding-inline:9px; font-size:9px; gap:6px; }
  .demo-browser-dots { font-size:6px; letter-spacing:0; }
  .demo-scan-pages { font-size:9px; gap:5px; }
  .demo-result { padding:10px; gap:8px; }
  .demo-quote-scene { gap:13px; }
  .demo-disclaimer { font-size:9px; }
}
@media (max-width:360px) {
  .demo-scene { min-height:484px; }
  .demo-head strong { font-size:10px; }
  .demo-control-row { align-items:flex-end; }
  .demo-status { flex-direction:column; align-items:flex-start; gap:2px; }
  .demo-site-content>strong { font-size:21px; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-player *, .demo-player *::before, .demo-player *::after { animation:none!important; transition:none!important; }
}