/* Grundregeln des Fundaments – nicht aus der alten App (die steht 1:1 in design.css). */

/* Die Wurzel, in die React zeichnet, ist selbst kein Kasten: #app sitzt wie bisher direkt im <body>. */
.wurzel{display:contents}

/* Mac-Seitenleiste: Name der Marke statt des festen Namens aus design.css (marke/<firma>/marke.css setzt --marke-name). */
@media (min-width:1000px){
  #app>.tabbar::before{content:var(--marke-name,'')}
}

/* design.css (alte App) prüft im Dunkelmodus den TEXT des style-Attributs, z. B. [style^="color:#dc2626"] (A7b).
   Die Oberfläche setzt Stile über React, also über CSSOM – der Browser schreibt sie dann anders: „color: rgb(220, 38, 38);“,
   „background: var(--muted2);“. Ein Attribut als Text zu setzen verbietet die Inhaltsregel (style-src ohne 'unsafe-inline').
   Deshalb dieselben Regeln noch einmal für die Schreibweise des Browsers. Test oberflaeche-css: Jede solche Regel in
   design.css (außerhalb der Web-Ansicht am Mac) hat hier ihr Gegenstück. */
@media (prefers-color-scheme:dark){
  [style^="color: rgb(220, 38, 38)"],[style*="; color: rgb(220, 38, 38)"]{color:#f87171!important}
  .badge[style*="background: var(--muted2)"]{background:#56616d!important}
}

/* Haupt-Knopf in Hell: design.css färbt ihn fest im Blau der alten App (Block H-08, Kontrast). Eine Marke setzt Fläche und
   Schrift über --knopf-flaeche/--knopf-schrift (marke/<firma>/marke.css); ohne Angabe bleibt alles genau wie bisher. */
@media (prefers-color-scheme: light){
  .btn.primary{background:var(--knopf-flaeche,linear-gradient(180deg,#2a7f97,#1f6d84));color:var(--knopf-schrift,#fff)}
}