/* =============================================
   DEMO-OBERFLÄCHE: Hinweisband und Demo-Zugänge auf der Anmeldeseite
   Farben aus css/app.css (Akzent), damit die Demo wie die App aussieht.
   ============================================= */
.demo-band {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.25rem 1rem;
  padding: 0.45rem 1rem; background: var(--akzent, #15803d); color: #fff; font-size: 0.9rem; line-height: 1.4; text-align: center;
}
.demo-band a { color: #fff; text-underline-offset: 0.15em; }
.demo-band__links { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1rem; }

.demo-zugaenge {
  margin: 0 0 1.25rem; padding: 0.9rem 1rem; border-radius: 12px;
  border: 1px solid var(--akzent-ring, rgba(21, 128, 61, 0.3)); background: var(--akzent-ring, rgba(21, 128, 61, 0.08));
}
.demo-zugaenge__titel { margin: 0 0 0.6rem; font-weight: 600; }
.demo-zugaenge__liste { display: grid; gap: 0.5rem; }
.demo-zugang {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; width: 100%;
  padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid var(--rand, #dddbd5);
  background: var(--flaeche, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.demo-zugang:hover { border-color: var(--akzent, #15803d); }
.demo-zugang span { font-size: 0.88rem; opacity: 0.8; }
.demo-zugaenge__klein { margin: 0.6rem 0 0; font-size: 0.85rem; opacity: 0.85; }