/* Gemeinsam für alle Branchen-Demos: Beispiel-Banner, Demo-Hinweis, Basis.
   Jede Demo bringt ihr eigenes Design mit – hier steht nur, was überall gleich
   sein MUSS (Kennzeichnung als Beispiel, Barrierefreiheit). */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Beispiel-Banner (oben, scrollt mit weg) ---------- */
.wp-demo-bar {
  position: relative; z-index: 100;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem 1rem;
  padding: .55rem 1rem;
  background: #0f1a12; color: #e8f5ec;
  font: 500 .82rem/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}
.wp-demo-bar strong { color: #4ade80; font-weight: 700; }
.wp-demo-bar a {
  color: #0f1a12; background: #4ade80; text-decoration: none; font-weight: 700;
  padding: .3rem .75rem; border-radius: 999px; white-space: nowrap;
}
.wp-demo-bar a:hover { background: #86efac; }

/* ---------- Demo-Hinweis nach Formular-Absenden ---------- */
.wp-demo-toast {
  position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 200;
  width: min(30rem, calc(100% - 2rem)); transform: translate(-50%, 1rem); opacity: 0; pointer-events: none;
  background: #0f1a12; color: #e8f5ec; border-radius: 14px; padding: 1rem 1.15rem;
  font: 400 .92rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  box-shadow: 0 18px 40px rgb(0 0 0 / .28); transition: opacity .25s, transform .25s;
}
.wp-demo-toast.is-open { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.wp-demo-toast strong { display: block; color: #4ade80; margin-bottom: .2rem; }

/* ---------- Fußzeile "fiktiver Betrieb" ---------- */
.wp-demo-legal {
  font: 400 .78rem/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  opacity: .75; max-width: 60rem;
}
.wp-demo-legal a { text-underline-offset: 2px; }