/* NorthFrame - Hinweisleiste fuer fiktive Beispiel-Websites (portfolio/, demos/).
   Steht als erstes sichtbares Element im <body> jeder Beispielseite, auch auf Unterseiten, Flyer- und
   Projektvorschauen. Liegt im normalen Fluss (nicht fixiert, nicht schwebend) und scrollt mit der Seite.
   Die Selektoren sind bewusst spezifisch, damit Resets und Typografie der einzelnen Beispiele nicht greifen.

   Markup (deutsch):
   <aside class="nf-demo-hinweis" aria-label="Hinweis zur Beispiel-Website">
     <p><strong>Fiktive Beispiel-Website von NorthFrame.</strong> Kein realer Betrieb; alle dargestellten
     Unternehmens- und Kontaktdaten sind Demodaten. <a href="/portfolio/">Zur Beispielübersicht</a>
     <span aria-hidden="true">·</span> <a href="/">NorthFrame</a></p>
   </aside>
   Englisch: lang="en", "Fictional example website by NorthFrame. Not a real business; all company and contact
   details shown are demo data." Links "All examples" / "NorthFrame". */
html body .nf-demo-hinweis{
  display:block;position:relative;z-index:2147483000;box-sizing:border-box;
  width:100%;margin:0;padding:9px 16px;
  background:#12161d;color:#f3f4f6;border:0;border-bottom:1px solid #000;
  font:500 14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  letter-spacing:0;text-transform:none;text-align:center;text-shadow:none;
  -webkit-font-smoothing:antialiased;
}
html body .nf-demo-hinweis p{
  margin:0 auto;padding:0;max-width:72rem;
  color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-align:inherit;
}
html body .nf-demo-hinweis strong{font-weight:700;color:#fff}
html body .nf-demo-hinweis a{
  color:#ffd27a;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
  font:inherit;font-weight:600;white-space:nowrap;background:none;border:0;padding:0;
}
html body .nf-demo-hinweis a:hover{color:#ffe3a8}
html body .nf-demo-hinweis a:focus-visible{outline:2px solid #ffd27a;outline-offset:2px;border-radius:2px}
html body .nf-demo-hinweis span{color:#9aa3b2;padding:0 .35em}
@media (max-width:480px){
  html body .nf-demo-hinweis{padding:8px 12px;font-size:13.5px;text-align:left}
}
@media print{
  html body .nf-demo-hinweis{background:#fff;color:#000;border-bottom:1px solid #000}
  html body .nf-demo-hinweis strong{color:#000}
  html body .nf-demo-hinweis a{color:#000}
}