/* Gemeinsamer Rückweg-Button aller LumGuard-Designbeispiele: „Zurück zu LumGuard / Designbeispiel“.
   Einzige Quelle für Optik und Einblendung; Verhalten steuert lg-demo-float.js. */
.lg-demo-float{position:fixed;left:20px;bottom:20px;z-index:2147483000;isolation:isolate;display:inline-flex;align-items:center;gap:15px;min-height:70px;padding:11px 40px 11px 11px;border-radius:999px;color:#fff;font:500 16px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:-.005em;text-decoration:none;-webkit-font-smoothing:antialiased;background:#111114;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 12px 36px rgba(17,17,20,.28),0 2px 8px rgba(17,17,20,.14);opacity:0;visibility:hidden;transform:translateY(8px);pointer-events:none;transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s,background-color .2s ease}
/* LumGuard-Stil (wie „Video ansehen“ auf lumguard.de): schwarze Pille, weißer Kreis mit Pfeil. */
.lg-demo-float.is-visible{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .45s ease,transform .45s ease,visibility 0s,background-color .2s ease}
.lg-demo-float:hover{background:#26262b}
.lg-demo-float:focus-visible{outline:2px solid #2563eb;outline-offset:3px}
.lg-demo-float__arrow{display:inline-grid;place-items:center;flex:none;width:48px;height:48px;border-radius:50%;color:#111114;background:#fff;transition:transform .2s ease}
.lg-demo-float:hover .lg-demo-float__arrow{transform:translateX(-2px)}
.lg-demo-float__arrow svg{width:24px;height:24px}
.lg-demo-float__title{font-size:17px;font-weight:650;white-space:nowrap;color:#fff}
.lg-demo-float__note{position:relative;display:flex;flex-direction:column;gap:4px;margin-left:4px;padding-left:18px;white-space:nowrap}
.lg-demo-float__note::before{content:"";position:absolute;left:0;top:50%;width:1px;height:30px;transform:translateY(-50%);background:rgba(255,255,255,.22)}
.lg-demo-float__note b{font-size:16px;font-weight:400;color:rgba(255,255,255,.78)}
.lg-demo-float__note small{font-size:12.5px;font-weight:400;color:rgba(255,255,255,.58)}
@media (max-width:699px){.lg-demo-float{left:16px;bottom:16px;gap:10px;min-height:52px;padding:6px 18px 6px 6px;display:inline-grid;grid-template-columns:auto 1fr;grid-template-areas:"arrow title" "arrow note";row-gap:2px}
.lg-demo-float__arrow{grid-area:arrow;width:40px;height:40px}.lg-demo-float__arrow svg{width:22px;height:22px}
.lg-demo-float__title{grid-area:title;font-size:14.5px;align-self:end}
.lg-demo-float__note{grid-area:note;display:block;margin:0;padding:0;transform:none;font-size:0;align-self:start}
.lg-demo-float__note::before{display:none}
.lg-demo-float__note b{font-size:11.5px}.lg-demo-float__note small{font-size:11.5px}
.lg-demo-float__note small::before{content:" \00b7  "}}
/* Sehr schmale Handys (320 px): Hinweiszeile darf umbrechen, statt rechts aus dem Bild zu laufen. */
@media (max-width:374px){.lg-demo-float{max-width:calc(100vw - 32px)}.lg-demo-float__note{white-space:normal}.lg-demo-float__note b{white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.lg-demo-float,.lg-demo-float.is-visible,.lg-demo-float__arrow{transition:none;transform:none}}
@media print{.lg-demo-float{display:none}}

/* Hinweiskasten auf den Muster-Rechtstexten der statischen Beispiele (impressum.html, datenschutz.html). */
.lg-demo-legal{margin:0 0 3rem;padding:1.1rem 1.25rem;border:1px solid currentColor;border-radius:4px;font:400 15px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
.lg-demo-legal strong{font-weight:600}
.lg-demo-legal a{text-decoration:underline}