/* Demo-Leiste (AV Website Solutions, neutral seit 05.10.2026): dunkles Graphit mit Champagnergold, unabhängig von der Gestaltung der Beispielseite. */
.demo-leiste{--dl-grund:#0a0d13;--dl-f2:#141924;--dl-text:#eef2f8;--dl-text3:#a3aec1;--dl-gold:#e9c274;--dl-linie:rgba(150,172,206,.26);
  position:fixed;left:12px;right:12px;bottom:12px;z-index:90;display:flex;align-items:stretch;gap:0;max-width:880px;margin-inline:auto;
  background:var(--dl-grund);color:var(--dl-text);border:1px solid var(--dl-linie);border-radius:2px;box-shadow:0 10px 40px rgba(0,0,0,.35);
  font:500 .72rem/1 ui-monospace,"Cascadia Mono","SF Mono",Consolas,monospace;letter-spacing:.06em;-webkit-font-smoothing:antialiased}
.dl-zurueck,.dl-konfig{display:flex;align-items:center;justify-content:center;gap:.6rem;min-width:46px;min-height:46px;padding:0 .9rem;color:var(--dl-text);text-decoration:none;white-space:nowrap;text-transform:uppercase}
.dl-zurueck{border-right:1px solid var(--dl-linie)}
.dl-konfig{border-left:1px solid var(--dl-linie);color:var(--dl-gold)}
.dl-zurueck:hover{color:var(--dl-gold)}
.dl-konfig:hover{background:var(--dl-f2);color:var(--dl-text)}
.dl-pfeil{color:var(--dl-gold);font-size:1rem}
.dl-zurueck:focus-visible,.dl-konfig:focus-visible{outline:2px solid var(--dl-gold);outline-offset:-3px}
.dl-bew{display:flex;align-items:center;justify-content:center;gap:.6rem;min-width:46px;min-height:46px;padding:0 .9rem;border:0;border-left:1px solid var(--dl-linie);background:none;color:var(--dl-text);font:inherit;letter-spacing:inherit;text-transform:uppercase;white-space:nowrap;cursor:pointer}
.dl-bew:hover{background:var(--dl-f2);color:var(--dl-gold)}
.dl-bew:focus-visible{outline:2px solid var(--dl-gold);outline-offset:-3px}
.dl-bi{display:block;width:0;height:0;border:5px solid transparent;border-left:9px solid var(--dl-gold);border-right:0}
.dl-bew-aus .dl-bi{width:9px;height:10px;border:0;border-left:2px solid var(--dl-gold);border-right:2px solid var(--dl-gold)}
.dl-demo{display:flex;align-items:center;flex:1 1 auto;min-width:0;padding:0 .9rem;color:var(--dl-text3);text-transform:uppercase;letter-spacing:.14em;font-size:.64rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:980px){
  .demo-leiste{left:8px;right:8px;bottom:8px}
  .dl-zt{display:none}
  .dl-zurueck{padding:0 .85rem}
  .dl-konfig{padding:0 .8rem;flex:1 1 auto}
  .dl-demo{display:none}
}
@media (max-width:560px){   /* Handy: Bewegungsknopf nur als Symbol (Text bleibt für Hilfstechniken im Knopf), damit er neben dem Konfigurator-Link Platz hat */
  .dl-bew{padding:0;min-width:46px}
  .dl-bt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (max-width:420px){
  .dl-kt{font-size:.62rem;letter-spacing:.04em}
}
.demo-leiste{transition:transform .2s ease-out,opacity .2s ease-out}
.demo-leiste.dl-weg{transform:translateY(calc(100% + 20px));opacity:0;pointer-events:none;visibility:hidden}
@media (prefers-reduced-motion:reduce){html:not(.bewegung-an) .demo-leiste{transition:none}}
.eingebettet .demo-leiste{display:none!important}
/* damit ein fokussiertes Element nie unter der Leiste verschwindet (WCAG 2.4.11) */
html.hat-demo-leiste{scroll-padding-bottom:84px}
@media print{.demo-leiste{display:none}}