UND KEIN PSEUDO-ELEMENT: Der erste Entwurf war body[data-bereich]::before — das ging schief. dashboard.html belegt ::before bereits fuer eine Rauschtextur (opacity:.025 ueber die ganze Seite), styles.css belegt ::after fuer team/kunden/shop. Weil der Attribut-Selektor die hoehere Spezifitaet hat, haette die Kante die Textur ueberschrieben — und deren opacity geerbt, womit sie selbst unsichtbar gewesen waere. Beides unsichtbar, also faellt es niemandem auf, bis die Textur jemand vermisst. Ein eigenes Element kollidiert mit nichts. Es steht als erstes Kind im und traegt aria-hidden, weil es reine Optik ist. ══════════════════════════════════════════════════════════════════ */ .mk-kante { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: var(--mk-bereichsfarbe); /* Ueber allem, auch ueber sticky Kopfzeilen. Der Demo-Balken in belege.html liegt auf 9999 — dort wird die Kante ohnehin abgeraeumt (siehe unten), aber sie darf ihn nie ueberdecken. */ z-index: 9998; pointer-events: none; } /* Ohne Bereich keine Kante. Das ist der Schalter, an dem die Demo in belege.html dreht (removeAttribute), und zugleich die Sicherung: Ein

in einer Seite ohne data-bereich zeigt keinen farblosen Streifen, sondern gar nichts. */ body:not([data-bereich]) .mk-kante { display: none; } /* Die sechs Farben. Dieselben wie in den favicon-*.svg — wer hier etwas aendert, aendert es auch dort, sonst laufen Tab und Seite auseinander. */ body[data-bereich="dashboard"] { --mk-bereichsfarbe: #038DD2; } /* Hausblau */ body[data-bereich="team"] { --mk-bereichsfarbe: #d97706; } /* Orange */ body[data-bereich="kunden"] { --mk-bereichsfarbe: #1e9e57; } /* Gruen */ body[data-bereich="faktura"] { --mk-bereichsfarbe: #c0392b; } /* Signalrot */ body[data-bereich="shop"] { --mk-bereichsfarbe: #6b46c1; } /* Violett */ /* Die Demo-Faktura bekommt bewusst KEINE Kante. Sie hat seit jeher den violett gestreiften Balken ueber die volle Breite, der die Seite nach unten schiebt. Eine zweite Kennzeichnung in einer dritten Farbe daneben wuerde ihn nur verwaessern — zwei Signale fuer dieselbe Sache. Das Attribut wird deshalb in belege.html entfernt, sobald die Seite merkt, dass sie die Demo ist. Im Tab bleibt die Demo trotzdem unterscheidbar: dort traegt sie das graue F (favicon-faktura-demo.svg), und den Balken sieht man im Tab ja nicht. */ /* Auf Papier hat die Kante nichts verloren. */ @media print { body[data-bereich]::before { display: none; } }