/* ============================================================ DAUMANN CONSULTING – Demo-Banner ------------------------------------------------------------ PFLICHT auf JEDER Demo-Seite. Zweck: 1. Kennzeichnung als Demo (kein echtes Unternehmen) 2. Klärt die Impressumsfrage (Betreiber = Daumann Consulting) 3. Rückverweis = jede Demo wird zum Vertriebskanal Einbinden im : Markup direkt nach : siehe demo-banner.html ============================================================ */ :root { --dc-orange: #F7931A; --dc-anthrazit: #1C1C1E; } .dc-demo-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: var(--dc-anthrazit); color: #fff; font-family: 'Manrope', system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.4; padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; border-top: 3px solid var(--dc-orange); box-shadow: 0 -4px 20px rgba(0, 0, 0, .25); } .dc-demo-banner__tag { background: var(--dc-orange); color: var(--dc-anthrazit); font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; padding: 3px 9px; border-radius: 4px; white-space: nowrap; } .dc-demo-banner a { color: var(--dc-orange); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .dc-demo-banner a:hover, .dc-demo-banner a:focus-visible { color: #fff; } .dc-demo-banner a:focus-visible { outline: 2px solid var(--dc-orange); outline-offset: 3px; } /* Verhindert, dass der Banner Seiteninhalt am Fuß verdeckt. In der Demo zusätzlich am setzen, falls dort padding definiert ist. */ body { padding-bottom: 64px; } @media (max-width: 560px) { .dc-demo-banner { font-size: 13px; padding: 9px 12px; } body { padding-bottom: 84px; } } @media print { .dc-demo-banner { display: none; } }