/* ==========================================================================
   Designs - Klassisch, Modern, Cover-Wand · je hell und dunkel
   --------------------------------------------------------------------------
   Diese Datei wird von allen zwoelf angemeldeten Seiten geladen und aendert
   OHNE eine der Klassen an <html> ueberhaupt nichts:

     Standard  = gar keine Klasse  -> diese Datei ist stumm, das heutige
                 Aussehen bleibt Byte fuer Byte dasselbe.
     Klassisch = html.design-klassisch  + html.modus-hell / .modus-dunkel
     Modern    = html.design-modern     + dito
     Cover-Wand= html.design-coverwand  + dito

   Gesetzt werden die Klassen von einem kurzen Skript im Kopf jeder Seite,
   VOR den Stylesheets - sonst blitzt bei jedem Aufruf kurz das falsche
   Design auf. Dasselbe Verfahren wie beim Arbeitsmodus (arbeit.css).

   FASSUNG 2 (Paket 101). Die erste Fassung stellte fast nur Farben um; am
   Bildschirm sahen die drei Designs einander deshalb zu aehnlich. Ein
   Design ist aber vor allem FORM: Schrift, Rundung, Rahmen, Schatten,
   Dichte. Genau das steht jetzt in den Abschnitten 3 bis 5 - und weil die
   zwoelf Seiten dasselbe Klassenvokabular benutzen (.karte auf elf Seiten,
   .titel-verlauf auf zwoelf, .regal auf drei), traegt EIN Regelsatz sie
   alle.

   ARBEITSMODUS SCHLAEGT DESIGN. Ist html.arbeit gesetzt, gewinnt
   arbeit.css - bei allen vier Designs. Der Arbeitsmodus hat einen Zweck,
   kein Aussehen; er soll auf dem Arbeitsrechner in jeder Lage gleich
   aussehen. Besonders gegen Cover-Wand: Beide bauen den Startbildschirm
   um, und private Blu-ray-Cover auf dem Bildschirm im Kundenservice sind
   genau das, was der Arbeitsmodus verhindern soll. Technisch steht deshalb
   vor fast jeder Regel ein html:not(.arbeit).

   ALLE Farbwerte sind nachgerechnet, keiner geschaetzt. Grenzen:
   Text 4,5:1 gegen seinen Untergrund, Bedienelemente 3,0:1. Zierlinien
   duerfen darunter liegen - sie zieren, sie tragen nichts.
   ========================================================================== */


/* ==========================================================================
   1. Die Tonrampe - und warum hier KEINE Vorgabewerte stehen
   --------------------------------------------------------------------------
   Neun Seiten faerben ihre Flaechen ueber Tailwind-Klassen (bg-gray-800,
   text-gray-400, border-gray-700 ...). Deren Zahlen standen fest in der
   tailwind.config jeder Datei. Sie zeigen jetzt auf --ton-*.

   Belegt mit der ECHTEN static/tailwind.js (Play-CDN, v3.4.17):
     .bg-gray-800    -> rgb(var(--ton-800) / var(--tw-bg-opacity,1))
     .bg-gray-800/70 -> rgb(var(--ton-800) / 0.7)
   Die Fassung reicht die Variable durch, auch mit Deckkraft und mit hover:.

   Die Vorgabe steht ABSICHTLICH nicht hier, sondern als Rueckfallwert in
   der jeweiligen Seite:  rgb(var(--ton-500, 132 132 174) / <alpha-value>)

   Grund: Die neun Seiten hatten NICHT dieselbe Rampe. Die 500er Stufe ist
   in vier Dateien 132 132 174 und in fuenf 114 114 156. Ein gemeinsamer
   Vorgabewert an dieser Stelle haette also vier Seiten im Standard-Design
   veraendert. Mit dem Rueckfallwert je Datei bleibt jede Seite ohne
   Design-Klasse exakt so, wie sie war - und mit Design-Klasse gewinnt der
   Wert aus der Palette.

   SCHREIBWEISE: drei Zahlen mit Leerzeichen, ohne rgb() und ohne Kommas.
   Nur so kann Tailwind die Deckkraft hinten anhaengen.
   ========================================================================== */


/* ==========================================================================
   2. Die sechs Paletten
   ========================================================================== */

/* ---- Klassisch hell · Papier ------------------------------------------- */
html.design-klassisch.modus-hell {
  --ton-100:  28  28  26;   /* 17,07:1 auf Karte - der Textton              */
  --ton-200:  46  44  40;   /* 12,33:1 auf Grund                            */
  --ton-300:  71  68  61;   /*  9,71:1 auf Karte                            */
  --ton-400:  92  88  79;   /*  7,09 Karte · 6,27 Grund · 4,65 auf Ton 700  */
  --ton-500: 114 109  98;   /*  5,15 Karte · 4,55 Grund                     */
  --ton-600: 168 161 147;
  --ton-700: 214 209 198;   /* Zierlinie, 1,52:1 auf Karte - sie ziert      */
  --ton-750: 233 230 222;
  --ton-800: 255 255 255;   /* Karte                                        */
  --ton-900: 243 241 234;   /* Grund                                        */
  --ton-950: 255 255 255;

  --d-grund:    #f3f1ea;
  --d-karte:    #ffffff;
  --d-erhoben:  #faf9f4;
  --d-feld:     #ffffff;
  --d-linie:    #d6d1c6;    /* 1,52:1 - Trennlinie, kein Bedienelement      */
  --d-rahmen:   #8a8478;    /* 3,72 Karte · 3,29 Grund - BEDIENELEMENTE     */
  --d-text:     #1c1c1a;    /* 17,07:1                                      */
  --d-leise:    #5c584f;    /*  7,09:1                                      */
  --d-akzent:   #7a2e2e;    /*  9,30:1                                      */
  --d-akzent-ink: #ffffff;  /*  8,58:1 weiss auf dem Akzent                 */
  --d-ok:       #2f6b46;    /*  6,34 Karte · 5,61 Grund                     */
  --d-warn:     #8a5a12;    /*  5,91 Karte · 5,23 Grund                     */
  --d-fehler:   #8a2331;    /*  8,88 Karte · 7,86 Grund                     */
  --d-anime:    #7f97a8;  --d-expenses: #c2a05c;  --d-ips:     #7fa894;
  --d-figures:  #9c86a8;  --d-water:    #8397b5;
  /* Einstellungen und App-Store haengen an --faint - und das ist im
     hellen Modus der TEXTton. Ein dunkles Symbol darauf kam auf 2,6:1.
     Dieser Ton traegt es in BEIDEN Modi. */
  /* Die Leiste oben. Leicht durchscheinend, damit der Weichzeichner
     dahinter etwas zu tun hat - der Grundton der Palette. */
  --d-leiste:   rgba(243, 241, 234, .90);
  --d-neutral:  #cfc9bb;
  color-scheme: light;
}

/* ---- Klassisch dunkel · Papier bei Kerzenlicht -------------------------- */
html.design-klassisch.modus-dunkel {
  --ton-100: 237 230 217;   /* 13,11:1 auf Karte                            */
  --ton-200: 224 216 201;
  --ton-300: 200 191 174;   /*  8,93:1 auf Karte                            */
  --ton-400: 168 158 139;   /*  6,14 Karte · 6,82 Grund · 4,53 auf Ton 700  */
  --ton-500: 143 134 118;   /*  4,53 Karte · 5,02 Grund                     */
  --ton-600:  92  85  71;
  --ton-700:  59  54  45;
  --ton-750:  45  42  35;
  --ton-800:  34  32  27;
  --ton-900:  24  22  19;
  --ton-950:  16  15  12;

  --d-grund:    #181613;
  --d-karte:    #22201b;
  --d-erhoben:  #2d2a23;
  --d-feld:     #2a2721;
  --d-linie:    #3b362d;
  --d-rahmen:   #7a7466;    /* 3,50 Karte · 3,88 Grund                      */
  --d-text:     #ede6d9;    /* 13,11:1                                      */
  --d-leise:    #a89e8b;    /*  6,14:1                                      */
  --d-akzent:   #e0928a;    /*  6,70:1                                      */
  --d-akzent-ink: #22201b;
  --d-ok:       #86c8a0;    /*  8,36 Karte · 9,27 Grund                     */
  --d-warn:     #d8b06a;    /*  8,01 Karte · 8,89 Grund                     */
  --d-fehler:   #e59aa2;    /*  7,34 Karte · 8,15 Grund                     */
  --d-anime:    #7f97a8;  --d-expenses: #c2a05c;  --d-ips:     #7fa894;
  --d-figures:  #9c86a8;  --d-water:    #8397b5;
  /* Einstellungen und App-Store haengen an --faint - und das ist im
     hellen Modus der TEXTton. Ein dunkles Symbol darauf kam auf 2,6:1.
     Dieser Ton traegt es in BEIDEN Modi. */
  /* Die Leiste oben. Leicht durchscheinend, damit der Weichzeichner
     dahinter etwas zu tun hat - der Grundton der Palette. */
  --d-leiste:   rgba( 24,  22,  19, .90);
  --d-neutral:  #a49b88;
  color-scheme: dark;
}

/* ---- Modern hell ------------------------------------------------------- */
html.design-modern.modus-hell {
  --ton-100:  20  22  28;   /* 18,08:1 auf Karte                            */
  --ton-200:  40  44  54;
  --ton-300:  66  71  85;   /*  9,28:1 auf Karte                            */
  --ton-400:  98 104 122;   /*  5,55 Karte · 5,19 Grund · 4,58 auf Ton 700  */
  --ton-500:  88  94 113;   /*  6,44 Karte · 6,01 Grund · 4,89 schlechtester
                               Fall. War 107 113 133, gerechnet fuer Karte
                               und Grund - auf den erhobenen Flaechen
                               (223 224 228) blieben davon 3,68:1.        */
  --ton-600: 176 182 198;
  --ton-700: 230 233 242;   /* 1,21:1 - hier ABSICHT: Modern traegt weiche
                               Schatten statt Rahmen                        */
  --ton-750: 242 244 250;
  --ton-800: 255 255 255;
  --ton-900: 246 247 251;
  --ton-950: 255 255 255;

  --d-grund:    #f6f7fb;
  --d-karte:    #ffffff;
  --d-erhoben:  #ffffff;
  --d-feld:     #f2f4fa;
  --d-linie:    #e6e9f2;
  --d-rahmen:   #767c8d;    /* 4,17 Karte · 3,89 Grund                      */
  --d-text:     #14161c;    /* 18,08:1                                      */
  --d-leise:    #5b6172;    /*  6,18:1 - war #6b7185 mit 4,85 gegen die     */
                           /*  Karte und 4,53 gegen den Seitengrund, der    */
                           /*  knappste Wert der Sammlung.                  */
  --d-akzent:   #5b4bec;    /*  5,73:1                                      */
  --d-akzent-ink: #ffffff;
  --d-ok:       #1f7a52;    /*  5,30 Karte · 4,95 Grund                     */
  --d-warn:     #8a5a12;    /*  5,91 Karte · 5,52 Grund                     */
  --d-fehler:   #b02540;    /*  6,59 Karte · 6,16 Grund                     */
  --d-anime:    #4fd2ff;  --d-expenses: #ffc94d;  --d-ips:     #34e5d0;
  --d-figures:  #b87cff;  --d-water:    #5aa9ff;
  /* Einstellungen und App-Store haengen an --faint - und das ist im
     hellen Modus der TEXTton. Ein dunkles Symbol darauf kam auf 2,6:1.
     Dieser Ton traegt es in BEIDEN Modi. */
  /* Die Leiste oben. Leicht durchscheinend, damit der Weichzeichner
     dahinter etwas zu tun hat - der Grundton der Palette. */
  --d-leiste:   rgba(246, 247, 251, .88);
  --d-neutral:  #c8ccd8;
  color-scheme: light;
}

/* ---- Modern dunkel ----------------------------------------------------- */
html.design-modern.modus-dunkel {
  --ton-100: 242 244 248;   /* 15,47:1 auf Karte                            */
  --ton-200: 228 232 240;
  --ton-300: 198 205 218;   /* 10,66:1 auf Karte                            */
  --ton-400: 154 163 180;   /*  6,71 Karte · 7,43 Grund · 5,45 auf Ton 700  */
  --ton-500: 125 132 146;   /*  4,53 Karte · 5,02 Grund                     */
  --ton-600:  74  83 100;
  --ton-700:  39  45  56;
  --ton-750:  31  36  45;
  --ton-800:  25  28  36;
  --ton-900:  15  17  23;
  --ton-950:   9  10  14;

  --d-grund:    #0f1117;
  --d-karte:    #191c24;
  --d-erhoben:  #222630;
  --d-feld:     #222630;
  --d-linie:    #272d38;
  --d-rahmen:   #666d7c;    /* 3,28 Karte · 3,63 Grund                      */
  --d-text:     #f2f4f8;    /* 15,47:1                                      */
  --d-leise:    #9aa3b4;    /*  6,71:1                                      */
  --d-akzent:   #9b8dff;    /*  6,20:1                                      */
  --d-akzent-ink: #14161c;
  --d-ok:       #5fd7a4;    /*  9,52 Karte · 10,55 Grund                    */
  --d-warn:     #ffc94d;    /* 11,12 Karte · 12,32 Grund                    */
  --d-fehler:   #ff8fa6;    /*  7,89 Karte · 8,74 Grund                     */
  --d-anime:    #4fd2ff;  --d-expenses: #ffc94d;  --d-ips:     #34e5d0;
  --d-figures:  #b87cff;  --d-water:    #5aa9ff;
  /* Einstellungen und App-Store haengen an --faint - und das ist im
     hellen Modus der TEXTton. Ein dunkles Symbol darauf kam auf 2,6:1.
     Dieser Ton traegt es in BEIDEN Modi. */
  /* Die Leiste oben. Leicht durchscheinend, damit der Weichzeichner
     dahinter etwas zu tun hat - der Grundton der Palette. */
  --d-leiste:   rgba( 15,  17,  23, .88);
  --d-neutral:  #a0a8b8;
  color-scheme: dark;
}

/* ---- Cover-Wand hell --------------------------------------------------- */
html.design-coverwand.modus-hell {
  --ton-100:  16  16  20;   /* 18,98:1 auf Karte                            */
  --ton-200:  38  38  46;
  --ton-300:  66  66  78;   /*  9,90:1 auf Karte                            */
  --ton-400:  94  94 107;   /*  6,38 Karte · 5,66 Grund · 4,68 auf Ton 700  */
  --ton-500: 109 109 124;   /*  5,09 Karte · 4,51 Grund                     */
  --ton-600: 172 172 184;
  --ton-700: 220 220 227;
  --ton-750: 238 238 243;
  --ton-800: 255 255 255;
  --ton-900: 241 241 244;
  --ton-950: 255 255 255;

  --d-grund:    #f1f1f4;
  --d-karte:    #ffffff;
  --d-erhoben:  #f7f7f9;
  --d-feld:     #f5f5f8;
  --d-linie:    #dcdce3;
  --d-rahmen:   #75757f;    /* 4,56 Karte · 4,04 Grund                      */
  --d-text:     #101014;    /* 18,98:1                                      */
  --d-leise:    #5e5e6b;    /*  6,38:1                                      */
  --d-akzent:   #2c2c3a;    /* 13,74:1 - Anthrazit statt Bunt: die Farbe
                               soll aus den Bildern kommen                  */
  --d-akzent-ink: #ffffff;
  --d-ok:       #2c6b4c;    /*  6,34 Karte · 5,62 Grund                     */
  --d-warn:     #7d5a15;    /*  6,28 Karte · 5,57 Grund                     */
  --d-fehler:   #8f2b3a;    /*  8,16 Karte · 7,24 Grund                     */
  --d-anime:    #8f9ea8;  --d-expenses: #a89b84;  --d-ips:     #8aa39a;
  --d-figures:  #9b93a4;  --d-water:    #909aa8;
  /* Einstellungen und App-Store haengen an --faint - und das ist im
     hellen Modus der TEXTton. Ein dunkles Symbol darauf kam auf 2,6:1.
     Dieser Ton traegt es in BEIDEN Modi. */
  /* Die Leiste oben. Leicht durchscheinend, damit der Weichzeichner
     dahinter etwas zu tun hat - der Grundton der Palette. */
  --d-leiste:   rgba(241, 241, 244, .90);
  --d-neutral:  #c6c6d0;
  color-scheme: light;
}

/* ---- Cover-Wand dunkel ------------------------------------------------- */
html.design-coverwand.modus-dunkel {
  --ton-100: 242 242 247;   /* 16,41:1 auf Karte                            */
  --ton-200: 228 228 236;
  --ton-300: 198 198 210;   /* 10,82:1 auf Karte                            */
  --ton-400: 154 154 168;   /*  6,60 Karte · 7,12 Grund · 5,39 auf Ton 700  */
  --ton-500: 125 125 136;   /*  4,50 Karte · 4,86 Grund                     */
  --ton-600:  72  72  84;
  --ton-700:  38  38  48;
  --ton-750:  28  28  38;
  --ton-800:  20  20  28;
  --ton-900:  10  10  14;
  --ton-950:   6   6   9;

  --d-grund:    #0a0a0e;
  --d-karte:    #14141c;
  --d-erhoben:  #1c1c26;
  --d-feld:     #1c1c26;
  --d-linie:    #262630;
  --d-rahmen:   #666673;    /* 3,24 Karte · 3,49 Grund                      */
  --d-text:     #f2f2f7;    /* 16,41:1                                      */
  --d-leise:    #9a9aa8;    /*  6,60:1                                      */
  --d-akzent:   #e4e4ec;    /* 14,48:1                                      */
  --d-akzent-ink: #14141c;
  --d-ok:       #7fd0a8;    /* 10,02 Karte · 10,81 Grund                    */
  --d-warn:     #d9b877;    /*  9,66 Karte · 10,42 Grund                    */
  --d-fehler:   #f09aa8;    /*  8,63 Karte · 9,31 Grund                     */
  --d-anime:    #8f9ea8;  --d-expenses: #a89b84;  --d-ips:     #8aa39a;
  --d-figures:  #9b93a4;  --d-water:    #909aa8;
  /* Einstellungen und App-Store haengen an --faint - und das ist im
     hellen Modus der TEXTton. Ein dunkles Symbol darauf kam auf 2,6:1.
     Dieser Ton traegt es in BEIDEN Modi. */
  /* Die Leiste oben. Leicht durchscheinend, damit der Weichzeichner
     dahinter etwas zu tun hat - der Grundton der Palette. */
  --d-leiste:   rgba( 10,  10,  14, .90);
  --d-neutral:  #a0a0ac;
  color-scheme: dark;
}


/* ==========================================================================
   3. Form, Schrift und Dichte je Design
   --------------------------------------------------------------------------
   Hier entsteht der Unterschied, den man auf den ersten Blick sieht. Farbe
   allein reicht nicht: Drei Paletten auf derselben Form sehen aus wie
   dieselbe App in drei Stimmungen. Diese Werte gelten in BEIDEN Modi.
   ========================================================================== */
html.design-klassisch {
  --d-r: 3px;   --d-r-sm: 3px;   --d-r-kachel: 3px;   --d-r-pille: 3px;
  --d-r-cover: 2px;
  --d-schatten: none;
  --d-schatten-karte: none;
  --d-schrift: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --d-display: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --d-zeile: 1.5;
  --d-polster: .9rem;
  --d-fett: 600;
  --d-spatium: .01em;
}
html.design-modern {
  --d-r: 22px;  --d-r-sm: 16px;  --d-r-kachel: 26px;  --d-r-pille: 999px;
  --d-r-cover: 14px;
  --d-schatten: 0 10px 26px -14px rgba(0,0,0,.45);
  --d-schatten-karte: 0 24px 50px -30px rgba(0,0,0,.55);
  --d-schrift: "Inter", ui-sans-serif, system-ui, sans-serif;
  --d-display: "M PLUS Rounded 1c", "Inter", system-ui, sans-serif;
  --d-zeile: 1.75;
  --d-polster: 1.6rem;
  --d-fett: 800;
  --d-spatium: -.01em;
}
html.design-coverwand {
  --d-r: 6px;   --d-r-sm: 6px;   --d-r-kachel: 6px;   --d-r-pille: 6px;
  --d-r-cover: 4px;
  --d-schatten: none;
  --d-schatten-karte: none;
  --d-schrift: "Inter", ui-sans-serif, system-ui, sans-serif;
  --d-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --d-zeile: 1.55;
  --d-polster: 1rem;
  --d-fett: 700;
  --d-spatium: 0;
}


/* ==========================================================================
   4. Was auf JEDER der zwoelf Seiten gilt
   ========================================================================== */
html.design-klassisch:not(.arbeit) body,
html.design-modern:not(.arbeit) body,
html.design-coverwand:not(.arbeit) body {
  background-image: none;
  background-color: var(--d-grund);
  color: var(--d-text);
  font-family: var(--d-schrift);
  line-height: var(--d-zeile);
  letter-spacing: var(--d-spatium);
}
/* Die Speedlines im Hintergrund bleiben - sie werden nur so leise, dass sie
   zum Design passen. Wegnehmen waere das Falsche: Was heute da ist, bleibt. */
html.design-klassisch:not(.arbeit) body::before { opacity: .3; }
html.design-modern:not(.arbeit) body::before    { opacity: .5; }
html.design-coverwand:not(.arbeit) body::before { opacity: .2; }

/* ---- Ueberschriften ---------------------------------------------------- */
html.design-klassisch:not(.arbeit) h1,
html.design-klassisch:not(.arbeit) h2,
html.design-klassisch:not(.arbeit) h3,
html.design-modern:not(.arbeit) h1,
html.design-modern:not(.arbeit) h2,
html.design-modern:not(.arbeit) h3,
html.design-coverwand:not(.arbeit) h1,
html.design-coverwand:not(.arbeit) h2,
html.design-coverwand:not(.arbeit) h3 {
  font-family: var(--d-display);
  font-weight: var(--d-fett);
  letter-spacing: var(--d-spatium);
}
/* Klassisch setzt einen Strich unter die Hauptueberschrift - das Zeichen
   eines gesetzten Dokuments, und der billigste Weg, dass dieses Design auf
   den ersten Blick nicht wie die anderen aussieht. */
html.design-klassisch:not(.arbeit) h1 {
  border-bottom: 1px solid var(--d-linie);
  padding-bottom: .35rem;
  font-weight: 600;
}
html.design-modern:not(.arbeit) h1 { font-size: 1.9rem; }

/* Der Farbverlauf IM Text wird zu einer Farbe. Ohne diese Regel bliebe
   -webkit-text-fill-color auf transparent stehen und die Ueberschrift
   verschwaende ganz - der Verlauf faerbt ja den Buchstaben selbst. */
html.design-klassisch .titel-verlauf,
html.design-coverwand .titel-verlauf,
/* Modern behaelt den Verlauf - er gehoert zu diesem Design. Aber nur im
   dunklen Modus: Auf Weiss kommen Limette, Mint und Cyan auf 1,24 bis
   1,63:1, und das auf allen zwoelf Seiten. Im hellen Modus also derselbe
   Weg wie bei den anderen beiden - Textton statt Verlauf, 16,89:1. */
html.modus-hell.design-modern .titel-verlauf,
html.design-klassisch:not(.arbeit) .login h1,
html.design-klassisch:not(.arbeit) .side .brand b,
html.design-coverwand:not(.arbeit) .login h1,
html.design-coverwand:not(.arbeit) .side .brand b {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--d-text);
  text-shadow: none;
}

/* ---- Karten: Verlauf weg, Form und Dichte des Designs ------------------- */
html.design-klassisch:not(.arbeit) .karte,
html.design-modern:not(.arbeit) .karte,
html.design-coverwand:not(.arbeit) .karte {
  background: var(--d-karte);
  background-image: none;
  border-color: var(--d-linie) !important;   /* der Bestand hat hier eines */
  border-radius: var(--d-r);
  box-shadow: var(--d-schatten-karte);
  padding: var(--d-polster);
}
html.design-modern:not(.arbeit) .karte,
html.design-coverwand:not(.arbeit) .karte { border-color: transparent !important; }
html.design-klassisch:not(.arbeit) .karte-hover:hover,
html.design-modern:not(.arbeit) .karte-hover:hover,
html.design-coverwand:not(.arbeit) .karte-hover:hover {
  border-color: var(--d-rahmen) !important;
  box-shadow: var(--d-schatten);
  transform: none;
}
/* index.html nennt dieselbe Sache .card und .setlist. */
html.design-klassisch:not(.arbeit) .card,
html.design-klassisch:not(.arbeit) .setlist,
html.design-modern:not(.arbeit) .card,
html.design-modern:not(.arbeit) .setlist,
html.design-coverwand:not(.arbeit) .card,
html.design-coverwand:not(.arbeit) .setlist {
  background: var(--d-karte);
  background-image: none;
  border-radius: var(--d-r);
  box-shadow: var(--d-schatten-karte);
}
html.design-modern:not(.arbeit) .card,
html.design-modern:not(.arbeit) .setlist,
html.design-coverwand:not(.arbeit) .card,
html.design-coverwand:not(.arbeit) .setlist { border-color: transparent; }
html.design-modern:not(.arbeit) .card { padding: var(--d-polster); }

/* ---- Rundung: die Tailwind-Klassen des Bestands ------------------------- */
/* Nachgezaehlt im Quelltext: rounded 358x, rounded-lg 173x, rounded-t-xl 8x,
   rounded-t-lg 4x, rounded-xl 3x, rounded-sm 2x, rounded-t 2x, rounded-r 1x,
   rounded-b-lg 1x. rounded-full bleibt UNANGETASTET - das sind Kreise
   (Punkte, Schalter, Avatare), und ein Kreis ist keine Frage des Designs. */
html.design-klassisch:not(.arbeit) .rounded,
html.design-klassisch:not(.arbeit) .rounded-sm,
html.design-klassisch:not(.arbeit) .rounded-lg,
html.design-klassisch:not(.arbeit) .rounded-xl,
html.design-coverwand:not(.arbeit) .rounded,
html.design-coverwand:not(.arbeit) .rounded-sm,
html.design-coverwand:not(.arbeit) .rounded-lg,
html.design-coverwand:not(.arbeit) .rounded-xl { border-radius: var(--d-r-sm); }
html.design-modern:not(.arbeit) .rounded,
html.design-modern:not(.arbeit) .rounded-sm { border-radius: var(--d-r-sm); }
html.design-modern:not(.arbeit) .rounded-lg,
html.design-modern:not(.arbeit) .rounded-xl { border-radius: var(--d-r); }
html.design-klassisch:not(.arbeit) .rounded-t,
html.design-klassisch:not(.arbeit) .rounded-t-lg,
html.design-klassisch:not(.arbeit) .rounded-t-xl,
html.design-coverwand:not(.arbeit) .rounded-t,
html.design-coverwand:not(.arbeit) .rounded-t-lg,
html.design-coverwand:not(.arbeit) .rounded-t-xl,
html.design-modern:not(.arbeit) .rounded-t,
html.design-modern:not(.arbeit) .rounded-t-lg,
html.design-modern:not(.arbeit) .rounded-t-xl {
  border-top-left-radius: var(--d-r);
  border-top-right-radius: var(--d-r);
}
html.design-klassisch:not(.arbeit) .rounded-b-lg,
html.design-coverwand:not(.arbeit) .rounded-b-lg,
html.design-modern:not(.arbeit) .rounded-b-lg {
  border-bottom-left-radius: var(--d-r);
  border-bottom-right-radius: var(--d-r);
}
html.design-klassisch:not(.arbeit) .rounded-r,
html.design-coverwand:not(.arbeit) .rounded-r,
html.design-modern:not(.arbeit) .rounded-r {
  border-top-right-radius: var(--d-r-sm);
  border-bottom-right-radius: var(--d-r-sm);
}

/* ---- Schatten ---------------------------------------------------------- */
html.design-klassisch:not(.arbeit) .shadow,
html.design-klassisch:not(.arbeit) .shadow-sm,
html.design-klassisch:not(.arbeit) .shadow-lg,
html.design-klassisch:not(.arbeit) .shadow-xl,
html.design-klassisch:not(.arbeit) .shadow-2xl,
html.design-coverwand:not(.arbeit) .shadow,
html.design-coverwand:not(.arbeit) .shadow-sm,
html.design-coverwand:not(.arbeit) .shadow-lg,
html.design-coverwand:not(.arbeit) .shadow-xl,
html.design-coverwand:not(.arbeit) .shadow-2xl { box-shadow: none; }
html.design-modern:not(.arbeit) .shadow,
html.design-modern:not(.arbeit) .shadow-sm { box-shadow: var(--d-schatten); }
html.design-modern:not(.arbeit) .shadow-lg,
html.design-modern:not(.arbeit) .shadow-xl,
html.design-modern:not(.arbeit) .shadow-2xl { box-shadow: var(--d-schatten-karte); }

/* ---- Knoepfe ----------------------------------------------------------- */
html.design-klassisch:not(.arbeit) .btn,
html.design-modern:not(.arbeit) .btn,
html.design-coverwand:not(.arbeit) .btn {
  border-radius: var(--d-r-pille);
  box-shadow: var(--d-schatten);
  font-family: var(--d-schrift);
}
html.design-klassisch:not(.arbeit) .btn:hover,
html.design-modern:not(.arbeit) .btn:hover,
html.design-coverwand:not(.arbeit) .btn:hover {
  background: var(--d-erhoben);
  border-color: var(--d-rahmen);
}
html.design-klassisch:not(.arbeit) .btn-primary,
html.design-modern:not(.arbeit) .btn-primary,
html.design-coverwand:not(.arbeit) .btn-primary {
  background: var(--d-akzent);
  background-image: none;
  border-color: var(--d-akzent);
  color: var(--d-akzent-ink);
  box-shadow: var(--d-schatten);
}
html.design-klassisch:not(.arbeit) .btn-primary:hover,
html.design-modern:not(.arbeit) .btn-primary:hover,
html.design-coverwand:not(.arbeit) .btn-primary:hover {
  background: var(--d-akzent);
  background-image: none;
  border-color: var(--d-rahmen);
  filter: brightness(1.12);
}
html.design-klassisch:not(.arbeit) .btn-danger,
html.design-modern:not(.arbeit) .btn-danger,
html.design-coverwand:not(.arbeit) .btn-danger {
  border-color: var(--d-fehler);
  color: var(--d-fehler);
  background: transparent;
}
html.design-klassisch:not(.arbeit) .btn-danger:hover,
html.design-modern:not(.arbeit) .btn-danger:hover,
html.design-coverwand:not(.arbeit) .btn-danger:hover {
  background: var(--d-erhoben);
  border-color: var(--d-fehler);
}
/* Die Knoepfe der Tailwind-Seiten stehen als <button> ohne .btn da. */
html.design-modern:not(.arbeit) button.rounded,
html.design-modern:not(.arbeit) button.rounded-lg { border-radius: var(--d-r-pille); }

/* ---- Eingabefelder ----------------------------------------------------- */
html.design-klassisch:not(.arbeit) input,
html.design-klassisch:not(.arbeit) select,
html.design-klassisch:not(.arbeit) textarea,
html.design-modern:not(.arbeit) input,
html.design-modern:not(.arbeit) select,
html.design-modern:not(.arbeit) textarea,
html.design-coverwand:not(.arbeit) input,
html.design-coverwand:not(.arbeit) select,
html.design-coverwand:not(.arbeit) textarea {
  background-color: var(--d-feld);
  color: var(--d-text);
  border-color: var(--d-rahmen);
  border-radius: var(--d-r-sm);
  font-family: var(--d-schrift);
}
html.design-modern:not(.arbeit) input[type=text],
html.design-modern:not(.arbeit) input[type=search],
html.design-modern:not(.arbeit) input[type=email],
html.design-modern:not(.arbeit) input[type=password],
html.design-modern:not(.arbeit) select { border-radius: var(--d-r-pille); }
html.design-klassisch:not(.arbeit) input:hover,
html.design-klassisch:not(.arbeit) select:hover,
html.design-klassisch:not(.arbeit) textarea:hover,
html.design-modern:not(.arbeit) input:hover,
html.design-modern:not(.arbeit) select:hover,
html.design-modern:not(.arbeit) textarea:hover,
html.design-coverwand:not(.arbeit) input:hover,
html.design-coverwand:not(.arbeit) select:hover,
html.design-coverwand:not(.arbeit) textarea:hover { border-color: var(--d-akzent); }
html.design-klassisch:not(.arbeit) input:focus,
html.design-klassisch:not(.arbeit) select:focus,
html.design-klassisch:not(.arbeit) textarea:focus,
html.design-modern:not(.arbeit) input:focus,
html.design-modern:not(.arbeit) select:focus,
html.design-modern:not(.arbeit) textarea:focus,
html.design-coverwand:not(.arbeit) input:focus,
html.design-coverwand:not(.arbeit) select:focus,
html.design-coverwand:not(.arbeit) textarea:focus {
  border-color: var(--d-akzent);
  box-shadow: 0 0 0 3px var(--d-linie);
  outline: none;
}
html.design-klassisch:not(.arbeit) input::placeholder,
html.design-klassisch:not(.arbeit) textarea::placeholder,
html.design-modern:not(.arbeit) input::placeholder,
html.design-modern:not(.arbeit) textarea::placeholder,
html.design-coverwand:not(.arbeit) input::placeholder,
html.design-coverwand:not(.arbeit) textarea::placeholder { color: var(--d-leise); }
/* Beschriftungen: in Klassisch klein und gesperrt wie auf einem Formular
   aus Papier - noch ein Zeichen, das allein dieses Design traegt. */
html.design-klassisch:not(.arbeit) .lbl {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .7rem;
  font-family: var(--d-schrift);
}

/* ---- Reiterstrich, Bildlaufleiste, Deko -------------------------------- */
html.design-klassisch:not(.arbeit) .reiter-strich,
html.design-modern:not(.arbeit) .reiter-strich,
html.design-coverwand:not(.arbeit) .reiter-strich {
  background: var(--d-akzent);
  background-image: none;
  box-shadow: none;
  border-radius: var(--d-r-pille);
}
html.design-klassisch:not(.arbeit) ::-webkit-scrollbar-track,
html.design-modern:not(.arbeit) ::-webkit-scrollbar-track,
html.design-coverwand:not(.arbeit) ::-webkit-scrollbar-track {
  background: var(--d-grund);
}
html.design-klassisch:not(.arbeit) ::-webkit-scrollbar-thumb,
html.design-modern:not(.arbeit) ::-webkit-scrollbar-thumb,
html.design-coverwand:not(.arbeit) ::-webkit-scrollbar-thumb {
  background: var(--d-rahmen);
  background-image: none;
  border-radius: var(--d-r-sm);
}
html.design-klassisch:not(.arbeit) ::-webkit-scrollbar-thumb:hover,
html.design-modern:not(.arbeit) ::-webkit-scrollbar-thumb:hover,
html.design-coverwand:not(.arbeit) ::-webkit-scrollbar-thumb:hover {
  background: var(--d-akzent);
  background-image: none;
}
/* Die fallenden Bluetenblaetter bleiben, sie werden nur ruhiger gefaerbt.
   In Modern behalten sie ihre Farbe - dort passt Verspieltheit. */
html.design-klassisch:not(.arbeit) .bluete,
html.design-coverwand:not(.arbeit) .bluete {
  background: var(--d-linie);
  background-image: none;
  opacity: .25;
}


/* ==========================================================================
   5. Die Variablen der Seiten umlegen
   --------------------------------------------------------------------------
   Der groesste Teil jeder Oberflaeche haengt an diesen Variablen. Sie
   umzulegen ist der kuerzeste Weg und faellt keine einzige Klassenregel an.
   Genau so macht es arbeit.css seit dem 29.08.

   Aufgezaehlt sind ALLE Namen, die im Bestand vorkommen: index.html hat
   seinen eigenen Satz (--bg, --card ...), die Gruppe A ihren (--grund,
   --karte ...), die Tailwind-Seiten drei Akzente. Ein Name, den eine Seite
   nicht kennt, kostet nichts - er wird dort einfach nie gelesen.
   ========================================================================== */
html.design-klassisch:not(.arbeit),
html.design-modern:not(.arbeit),
html.design-coverwand:not(.arbeit) {
  /* index.html */
  --bg:        var(--d-grund);
  --panel:     var(--d-karte);
  --card:      var(--d-karte);
  --raised:    var(--d-erhoben);
  --field:     var(--d-feld);
  --line:      var(--d-linie);
  --line-soft: var(--d-linie);
  --line-field: var(--d-rahmen);
  --text:      var(--d-text);
  --muted:     var(--d-leise);
  --faint:     var(--d-leise);
  --accent:    var(--d-akzent);
  --accent-ink: var(--d-akzent-ink);
  --ok:        var(--d-ok);
  --danger:    var(--d-fehler);
  --anime:     var(--d-anime);
  --expenses:  var(--d-expenses);
  --ips:       var(--d-ips);
  --figures:   var(--d-figures);
  --water:     var(--d-water);
  --r:         var(--d-r);
  --r-sm:      var(--d-r-sm);
  --sans:      var(--d-schrift);
  --display:   var(--d-display);
  /* Gruppe A: adressen, buecher, einkauf, mail */
  --grund:     var(--d-grund);
  --karte:     var(--d-karte);
  --rahmen:    var(--d-linie);
  --erhoben:   var(--d-erhoben);
  --leise:     var(--d-leise);
  --akzent:    var(--d-akzent);
  --akzent-dunkel: var(--d-akzent);
  --gut:       var(--d-ok);
  --warn:      var(--d-warn);
  --roh:       var(--d-warn);
  --fertig:    var(--d-ok);
  --offen:     var(--d-warn);
  --gelesen:   var(--d-ok);
  --luecke:    var(--d-linie);
  /* Die drei Akzente der Tailwind-Seiten */
  --akzent-2:  var(--d-fehler);
  --akzent-3:  var(--d-ips);
  --flaeche:   var(--d-karte);
  --linie:     var(--d-linie);
}

/* ---- Die Kacheln des Startbildschirms ---------------------------------- */
html.design-klassisch:not(.arbeit) .appicon .glyph,
html.design-modern:not(.arbeit) .appicon .glyph,
html.design-coverwand:not(.arbeit) .appicon .glyph {
  background: var(--tone);
  background-image: none;
  border-radius: var(--d-r-kachel);
  box-shadow: var(--d-schatten);
}
/* Im hellen Modus braucht die Kachel eine Kante: Eine helle Flaeche auf
   hellem Grund kommt sonst nicht auf 3:1 gegen den Untergrund. */
html.modus-hell.design-klassisch:not(.arbeit) .appicon .glyph,
html.modus-hell.design-modern:not(.arbeit) .appicon .glyph,
html.modus-hell.design-coverwand:not(.arbeit) .appicon .glyph {
  border: 1px solid var(--d-rahmen);
}
/* Die App-Store-Kachel ist die "hier kommt noch etwas hin"-Kachel: eigene
   Flaeche, gestrichelter Rand, und ihr Symbol steht im Bestand
   ausdruecklich auf var(--muted) - es soll leise sein.

   Sie traegt aber auch ein data-goto, und die Regel weiter unten faerbt
   solche Kacheln mit dem Neutralton. Damit stand ein leises Symbol auf
   einer hellen Flaeche: in allen drei dunklen Paletten rund 1,05:1, also
   war nichts mehr zu sehen. Deshalb steht sie hier mit einem Selektor, der
   die andere Regel sticht.

   Nachgerechnet, Symbol auf dieser Flaeche: 4,85 bis 6,72:1 ueber alle
   sechs Paletten; beim Zeigen mit dem Akzent 5,51 bis 13,36:1. */
html.design-klassisch:not(.arbeit) .appicon.store .glyph,
html.design-modern:not(.arbeit) .appicon.store .glyph,
html.design-coverwand:not(.arbeit) .appicon.store .glyph,
html.design-klassisch:not(.arbeit) .appgrid.start .appicon.store[data-goto] .glyph,
html.design-modern:not(.arbeit) .appgrid.start .appicon.store[data-goto] .glyph,
html.design-coverwand:not(.arbeit) .appgrid.start .appicon.store[data-goto] .glyph {
  background: var(--d-erhoben);
  background-image: none;
  border: 1px dashed var(--d-rahmen);
}
/* Das Abzeichen in Cover-Wand bleibt neutral gefuellt, sein Symbol dunkel -
   sonst waere die Kachel gar nicht mehr zuzuordnen. */
html.design-coverwand:not(.arbeit) .appgrid.start .appicon.store .cw-marke svg {
  stroke: #0c0c1a;
}
html.design-klassisch:not(.arbeit) .setrow .ico,
html.design-modern:not(.arbeit) .setrow .ico,
html.design-coverwand:not(.arbeit) .setrow .ico,
html.design-klassisch:not(.arbeit) .sheet .head .glyph,
html.design-modern:not(.arbeit) .sheet .head .glyph,
html.design-coverwand:not(.arbeit) .sheet .head .glyph,
html.design-klassisch:not(.arbeit) .storerow .glyph,
html.design-modern:not(.arbeit) .storerow .glyph,
html.design-coverwand:not(.arbeit) .storerow .glyph {
  background: var(--tone);
  background-image: none;
  border-radius: var(--d-r-sm);
}
html.design-klassisch:not(.arbeit) .iconpick button[aria-pressed="true"],
html.design-modern:not(.arbeit) .iconpick button[aria-pressed="true"],
html.design-coverwand:not(.arbeit) .iconpick button[aria-pressed="true"] {
  background: var(--tone);
  background-image: none;
}


/* ---- Die Symbole in der Einstellungsliste ------------------------------ */
/* Die Kacheln links in der Liste nehmen ihre Farbe aus --tone, und das ist
   dort keine Modulfarbe, sondern eine Rolle: var(--accent), var(--ok),
   var(--anime) und so weiter. Im hellen Modus ist der Akzent dunkel
   gedacht - in Cover-Wand Anthrazit, in Klassisch Bordeaux. Der dunkle
   Symbolstrich darauf kam auf 1,41:1 bzw. 2,08:1.

   Die Farben bleiben, sie tragen Bedeutung. Nur die Flaeche wird zu einer
   Toenung derselben Farbe, und der Strich bekommt den Textton. Damit ist
   die Farbcodierung erhalten und die Lesbarkeit gesichert: Strich 11,60
   bis 16,42:1 ueber alle drei hellen Paletten und alle sieben Rollen.

   color-mix steht im Bestand schon, index.html benutzt es fuer die Wippe
   und den Kachelrand - es kommt also nichts Neues dazu.

   Im dunklen Modus bleibt alles, wie es ist: dort sind diese Farben hell,
   und der dunkle Strich darauf stimmt. */
html.modus-hell.design-klassisch:not(.arbeit) .setrow .ico,
html.modus-hell.design-modern:not(.arbeit) .setrow .ico,
html.modus-hell.design-coverwand:not(.arbeit) .setrow .ico {
  background: color-mix(in srgb, var(--tone) 22%, var(--d-karte));
  background-image: none;
  border: 1px solid color-mix(in srgb, var(--tone) 55%, transparent);
}
html.modus-hell.design-klassisch:not(.arbeit) .setrow .ico svg,
html.modus-hell.design-modern:not(.arbeit) .setrow .ico svg,
html.modus-hell.design-coverwand:not(.arbeit) .setrow .ico svg {
  stroke: var(--d-text);
}
/* Die Zeile "Abmelden" hat als Ton ausdruecklich transparent - eine
   Toenung davon waere nichts. Sie behaelt ihren roten Anflug. */
html.modus-hell.design-klassisch:not(.arbeit) .setrow.warn .ico,
html.modus-hell.design-modern:not(.arbeit) .setrow.warn .ico,
html.modus-hell.design-coverwand:not(.arbeit) .setrow.warn .ico {
  background: color-mix(in srgb, var(--d-fehler) 14%, var(--d-karte));
  border-color: color-mix(in srgb, var(--d-fehler) 45%, transparent);
}
html.modus-hell.design-klassisch:not(.arbeit) .setrow.warn .ico svg,
html.modus-hell.design-modern:not(.arbeit) .setrow.warn .ico svg,
html.modus-hell.design-coverwand:not(.arbeit) .setrow.warn .ico svg {
  stroke: var(--d-fehler);
}


/* ==========================================================================
   6. Cover-Wand - wo die Bilder wirklich hin sollen
   --------------------------------------------------------------------------
   Zwei Teile:

   ÜBERALL    die zurueckgenommene Palette aus Abschnitt 2 - auch im
              Ausgaben Manager, wo es kein einziges Bild gibt. Das ist die
              Pflicht: dieselben Zahlen, dieselbe Monatsbilanz, derselbe
              Balken, nur in dieser Palette.
   WO BILDER  Der Startbildschirm zeigt auf den Kacheln der vier Sammlungen
   SIND       ein echtes Cover, und in den Sammlungen selbst werden die
              Cover groesser gezeigt als sonst.

   Zur Kachel: Sie ist 62 px gross, am Handy 38 bis 70. Ein hochkantes
   Cover darin ist ein Ausschnitt, kein ganzes Bild. Deshalb wird es mit
   object-position nach oben gerueckt - dort steht bei Blu-rays, Mangas und
   Buechern fast immer der Titel.

   Die sieben Module OHNE Bilder bekommen KEINE leere graue Kachel, sondern
   ihre Modulfarbe mit dem heutigen Symbol - genau wie in den anderen
   Designs. Eine halb leere Startseite waere die schlechtere Antwort.
   ========================================================================== */
/* ---- Der Startbildschirm wird zur Bilderwand ---------------------------- */
/* Zwei Spalten statt drei, und aus der 62-Pixel-Kachel wird eine breite
   Karte im Verhaeltnis 3:2. Erst dadurch traegt ein Cover ueberhaupt etwas
   bei - in einem 62er Quadrat ist ein hochkantes Cover ein Ausschnitt von
   der Groesse einer Briefmarke. */
html.design-coverwand:not(.arbeit) .appgrid.start {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: none;
  gap: .5rem;
  max-width: 46rem;
  /* Der Griff "Alle Apps" liegt fest ueber der Seite. Ohne diesen Platz
     verdeckt er die unterste Reihe, sobald der Startbildschirm scrollt. */
  padding-bottom: calc(4.6rem + var(--unten-frei, 0px));
}
@media (min-width: 560px) {
  html.design-coverwand:not(.arbeit) .appgrid.start {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 900px) {
  html.design-coverwand:not(.arbeit) .appgrid.start {
    grid-template-columns: repeat(4, 1fr);
  }
}
/* Eine Bilderwand ist hoeher als ein Kachelraster: dreizehn Karten in zwei
   Spalten sind sieben Reihen. Deshalb darf der Startbildschirm in DIESEM
   einen Design scrollen.

   Das ist eine bewusste Ausnahme und gilt nur hier. Die Begruendung ist
   dieselbe, aus der "kein Scrollen" sonst richtig ist: Ohne sie waere die
   unterste Reihe schlicht abgeschnitten - und etwas abzuschneiden ist
   schlimmer, als eine Seite scrollen zu lassen. Wer Standard, Klassisch
   oder Modern waehlt, bekommt den festen Startbildschirm unveraendert. */
html.design-coverwand.start-fest,
html.design-coverwand.start-fest body { height: auto; overflow: auto; }

html.design-coverwand:not(.arbeit) .appgrid.start .appicon {
  position: relative;
  display: block;
  padding: 0;
  gap: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--d-r-cover);
  overflow: hidden;
  background: var(--tone);
}
html.design-coverwand:not(.arbeit) .appgrid.start .appicon .glyph {
  position: absolute; inset: 0;
  width: auto; height: auto;
  display: flex; gap: 0;
  padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: var(--tone); background-image: none;
  overflow: hidden;
}
/* Streifen und Abzeichen gibt es NUR auf dem Startbildschirm. Im
   Schubfach "Alle Apps" und im App-Store bleibt die Kachel das heutige
   Symbol auf der Modulfarbe - dort ist eine Karte fehl am Platz, und zwei
   Symbole uebereinander waeren schlicht falsch. */
html.design-coverwand:not(.arbeit) .cw-band,
html.design-coverwand:not(.arbeit) .cw-marke { display: none; }

/* Die drei Streifen. Sie sind GEZEICHNET, nicht fotografiert: dieselbe
   Modulfarbe, drei verschiedene Lichter darauf, dazwischen eine feine
   Fuge - wie drei Ruecken nebeneinander im Regal.

   Warum keine echten Cover: Sie kommen aus dem Inhalt der App. Vier Module
   haetten dann eine Bilderwand und sieben eine Farbflaeche, und der
   Startbildschirm zerfiele in zwei Haelften. So sehen alle elf gleich aus,
   es wird nichts nachgeladen, und aus der Sammlung geht nichts hinaus. */
html.design-coverwand:not(.arbeit) .appgrid.start .cw-band {
  flex: 1 1 0;
  min-width: 0; height: 100%;
  display: block;
}
html.design-coverwand:not(.arbeit) .appgrid.start .cw-band.a {
  background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(0,0,0,.30));
}
html.design-coverwand:not(.arbeit) .appgrid.start .cw-band.b {
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.52));
}
html.design-coverwand:not(.arbeit) .appgrid.start .cw-band.c {
  background: linear-gradient(180deg, rgba(255,255,255,.20), rgba(0,0,0,.14));
}
/* Die Fuge. Ohne sie verlaufen die drei Flaechen ineinander und man sieht
   einen Farbverlauf statt drei Ruecken. */
html.design-coverwand:not(.arbeit) .appgrid.start .cw-band + .cw-band {
  box-shadow: inset 2px 0 0 rgba(0,0,0,.30);
}
/* Das Symbol des Moduls liegt als Muster ueber allen dreien. */
html.design-coverwand:not(.arbeit) .appgrid.start .appicon .glyph > svg {
  position: absolute; inset: 0; margin: auto;
  width: 46%; height: 46%;
  opacity: .3;
}
/* Das Abzeichen oben links. Klein und scharf - daran erkennt man die App
   auch dann, wenn zwei Module aehnliche Farben tragen. */
html.design-coverwand:not(.arbeit) .appgrid.start .cw-marke {
  position: absolute; top: .4rem; left: .4rem; z-index: 2;
  width: clamp(24px, 3.4vh, 32px); height: clamp(24px, 3.4vh, 32px);
  border-radius: var(--d-r-sm);
  background: var(--tone);
  display: grid; place-items: center;
}
html.design-coverwand:not(.arbeit) .appgrid.start .cw-marke svg {
  position: static;
  width: 64%; height: 64%;
  stroke: #0c0c1a; fill: none; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: 1;
}
html.design-coverwand:not(.arbeit) .appgrid.start .glyph.solid .cw-marke svg {
  fill: #0c0c1a; stroke: none;
}
/* Die Unterlage unter Name und Zahl. Ein Streifen kann hell oder dunkel
   sein - ohne Unterlage ist der Kontrast Gluecksache. Nachgerechnet gegen
   den unguenstigsten Fall, eine vollstaendig weisse Flaeche:
     45 % Schwarz -> 3,36:1   zu wenig
     50 %         -> 3,95:1   zu wenig
     55 %         -> 4,74:1   reicht gerade
     72 %         -> 9,29:1   genommen
   Die Deckkraft bleibt bis 46 % Hoehe KONSTANT und faellt erst darueber
   ab. Ein Verlauf, der schon am Text duenner wird, waere je nach
   Kartenhoehe wieder Gluecksache. */
html.design-coverwand:not(.arbeit) .appgrid.start .appicon::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 62%;
  background: linear-gradient(to top,
    rgba(0,0,0,.72) 0%, rgba(0,0,0,.72) 46%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}
html.design-coverwand:not(.arbeit) .appgrid.start .appicon .name {
  position: absolute; z-index: 2;
  left: .55rem; right: .55rem; bottom: 1.05rem;
  text-align: left;
  color: #ffffff;                    /* 9,29:1 auf der Unterlage */
  font-weight: 700;
  font-size: clamp(.72rem, 1.6vh, .88rem);
  line-height: 1.15;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Die Zahl war ein Abzeichen in der Ecke. Auf einer Bildkarte steht sie
   unter dem Namen - dieselbe Angabe, nur dort, wo sie nichts zerschneidet. */
html.design-coverwand:not(.arbeit) .appgrid.start .appicon .num {
  position: absolute; z-index: 2;
  left: .55rem; right: auto; top: auto; bottom: .38rem;
  min-width: 0; height: auto; padding: 0;
  border: 0; border-radius: 0; background: none;
  color: rgba(255,255,255,.85);      /* 7,24:1 auf der Unterlage */
  font-size: clamp(.6rem, 1.3vh, .72rem);
  display: block;
}
/* Fortschrittsring und Haken beim Installieren sind auf ein Quadrat
   gerechnet. Auf einer breiten Karte wuerde daraus eine Ellipse. */
html.design-coverwand:not(.arbeit) .appgrid.start .glyph > svg.kachelring,
html.design-coverwand:not(.arbeit) .appgrid.start .glyph > svg.kachelhaken {
  position: absolute;
  width: 40%; height: 60%;
  left: 30%; top: 20%; margin: 0;
  opacity: 1;
}

/* Einstellungen und App-Store haengen an --faint bzw. --accent - im hellen
   Modus sind das der Textton und das Anthrazit, also dunkle Flaechen mit
   einem dunklen Symbol darauf: 2,6:1.

   Beide setzen --tone als INLINE-Stil am Element. Dagegen kommt keine Regel
   im Stylesheet an, egal wie genau sie ist. Deshalb wird hier die Flaeche
   selbst gesetzt statt der Variablen. Nachgerechnet: dunkles Symbol auf dem
   Neutralton 7,04 bis 12,08:1. */
html.design-klassisch:not(.arbeit) .appicon[data-goto] .glyph,
html.design-modern:not(.arbeit) .appicon[data-goto] .glyph,
html.design-coverwand:not(.arbeit) .appicon[data-goto] .glyph,
html.design-klassisch:not(.arbeit) .appgrid.start .appicon[data-goto] .glyph,
html.design-modern:not(.arbeit) .appgrid.start .appicon[data-goto] .glyph,
html.design-coverwand:not(.arbeit) .appgrid.start .appicon[data-goto] .glyph,
html.design-klassisch:not(.arbeit) .appgrid.start .appicon[data-goto] .cw-marke,
html.design-modern:not(.arbeit) .appgrid.start .appicon[data-goto] .cw-marke,
html.design-coverwand:not(.arbeit) .appgrid.start .appicon[data-goto] .cw-marke {
  background: var(--d-neutral);
  background-image: none;
}

/* ---- In den Sammlungen: Cover groesser --------------------------------- */
/* .regal gibt es in anime, figuren und mediathek; .regal-huelle traegt das
   Bild im Seitenverhaeltnis 2:3. Cover-Wand vergroessert das Raster von
   104 auf 148 px und nimmt Rahmen und Rundung zurueck, damit die Bilder
   die Flaeche tragen. Das ist die Kuer aus dem Auftrag. */
html.design-coverwand:not(.arbeit) .regal {
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: .55rem .45rem;
}
html.design-coverwand:not(.arbeit) .regal-huelle {
  border-radius: var(--d-r-cover);
  border-color: transparent;
  background: var(--d-erhoben);
  box-shadow: none;
}
html.design-coverwand:not(.arbeit) .regal-titel {
  color: var(--d-leise);
  font-size: .74rem;
}
/* Klassisch und Modern lassen die Groesse, wie sie ist - dort aendern sich
   nur Form und Farbe. */
html.design-klassisch:not(.arbeit) .regal-huelle,
html.design-modern:not(.arbeit) .regal-huelle {
  border-radius: var(--d-r-cover);
  border-color: var(--d-linie);
  background: var(--d-erhoben);
  box-shadow: var(--d-schatten);
}
html.design-klassisch:not(.arbeit) .regal-titel,
html.design-modern:not(.arbeit) .regal-titel { color: var(--d-leise); }


/* ---- Heller Modus: die Karten bleiben hell ----------------------------- */
/* Die Werte oben gelten fuer den dunklen Modus. Dort ist es richtig, dass
   eine Karte nach unten abdunkelt und weisse Schrift traegt. Auf hellem
   Grund wirken elf solcher Bloecke schwer.

   Weil die Streifen GEZEICHNET sind, kenne ich ihre Helligkeit genau - es
   braucht also gar keinen dunklen Schleier. Die Unterlage wird weiss, die
   Schrift dunkel. Nachgerechnet ueber alle zwoelf Modulfarben, jeweils im
   unguenstigsten Streifen: Name 15,80 bis 17,22:1, Zahl 5,31 bis 5,79:1,
   das Symbol im Abzeichen 6,80 bis 12,66:1. */
html.modus-hell.design-coverwand:not(.arbeit) .appgrid.start .cw-band.a {
  background: linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.06));
}
html.modus-hell.design-coverwand:not(.arbeit) .appgrid.start .cw-band.b {
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.05));
}
html.modus-hell.design-coverwand:not(.arbeit) .appgrid.start .cw-band.c {
  background: linear-gradient(180deg, rgba(255,255,255,.32), rgba(255,255,255,0));
}
/* Die Fuge darf leiser werden - auf hellem Grund traegt schon wenig. */
html.modus-hell.design-coverwand:not(.arbeit) .appgrid.start .cw-band + .cw-band {
  box-shadow: inset 2px 0 0 rgba(0,0,0,.12);
}
html.modus-hell.design-coverwand:not(.arbeit) .appgrid.start .appicon::after {
  background: linear-gradient(to top,
    rgba(255,255,255,.82) 0%, rgba(255,255,255,.82) 46%, rgba(255,255,255,0) 100%);
}
html.modus-hell.design-coverwand:not(.arbeit) .appgrid.start .appicon .name {
  color: var(--d-text);
}
html.modus-hell.design-coverwand:not(.arbeit) .appgrid.start .appicon .num {
  color: var(--d-leise);
}


/* ==========================================================================
   7. Die Tailwind-Seiten - was die Rampe nicht erreicht
   --------------------------------------------------------------------------
   Drei Stellen im Bestand geben einer Rampenstufe zwei widersprechende
   Aufgaben. Sie bekommen deshalb eine eigene Regel - das ist der Rest von
   Weg 1, und er bleibt bewusst so klein wie moeglich:

   1. bg-gray-600 / bg-gray-700 sind Knopfflaechen MIT text-white im
      Markup. Wird die Flaeche im hellen Modus hell, ist weisse Schrift
      darauf nicht mehr lesbar. Das Markup anzufassen waere ein Umbau -
      also faerben wir die Schrift. Nachgerechnet: 6,65 bis 14,90:1.
   2. Der Ruecksprung hover:bg-gray-500 landet auf dem Textton 500 und
      waere zu dunkel. Er wird auf Stufe 600 umgelenkt.
   3. Einzelne Seiten legen ueber bg-gray-600 und Freunde einen eigenen
      Verlauf. Der faellt in Klassisch und Cover-Wand weg.
   ========================================================================== */
html.modus-hell .bg-gray-500.text-white,
html.modus-hell .bg-gray-600.text-white,
html.modus-hell .bg-gray-700.text-white { color: rgb(var(--ton-100)); }
html.modus-hell .text-white.hover\:bg-gray-500:hover {
  background-color: rgb(var(--ton-600));
}
html.design-klassisch .bg-gray-600,
html.design-klassisch .hover\:bg-gray-500:hover,
html.design-klassisch .bg-teal-600, html.design-klassisch .bg-teal-500,
html.design-klassisch .hover\:bg-teal-500:hover,
html.design-klassisch .bg-yellow-600,
html.design-klassisch .bg-red-600,
html.design-klassisch .hover\:bg-red-500:hover,
html.design-coverwand .bg-gray-600,
html.design-coverwand .hover\:bg-gray-500:hover,
html.design-coverwand .bg-teal-600, html.design-coverwand .bg-teal-500,
html.design-coverwand .hover\:bg-teal-500:hover,
html.design-coverwand .bg-yellow-600,
html.design-coverwand .bg-red-600,
html.design-coverwand .hover\:bg-red-500:hover { background-image: none; }

/* ---- ip.html: die Kacheln der Netzwerk-Karte --------------------------- */
html.design-klassisch:not(.arbeit) .ip-box,
html.design-modern:not(.arbeit) .ip-box,
html.design-coverwand:not(.arbeit) .ip-box { border-radius: var(--d-r-sm); }
html.design-klassisch:not(.arbeit) .ip-box:hover,
html.design-coverwand:not(.arbeit) .ip-box:hover { box-shadow: none; }
html.design-modern:not(.arbeit) .ip-box:hover { box-shadow: var(--d-schatten); }


/* ==========================================================================
   9. Die Leiste oben und die uebrigen fest verdrahteten Flaechen
   --------------------------------------------------------------------------
   Ein paar Stellen in index.html haengen NICHT an Variablen, sondern an
   festen Werten - .topbar an rgba(9,9,22,.86), der Avatar an einem
   Verlauf, das Schubfach an rgba(12,12,28,.97). Eine Variablen-Umlegung
   erreicht sie deshalb nicht: Im hellen Modus blieb die Leiste fast
   schwarz, und die Ueberschrift darin erbt ihre Farbe vom body - also den
   DUNKLEN Textton. Dunkle Schrift auf dunkler Leiste.

   Dass es genau diese Stellen sind, war kein Raten: arbeit.css behandelt
   sie seit jeher einzeln (.topbar, .topbar h2, .avatar, .zurueck,
   #schubGriff, #schubfach). Wer eine helle Farbwelt baut, kommt hier nicht
   ohne eigene Regeln aus.
   ========================================================================== */
html.design-klassisch:not(.arbeit) .topbar,
html.design-modern:not(.arbeit) .topbar,
html.design-coverwand:not(.arbeit) .topbar {
  background: var(--d-leiste);
  border-bottom-color: var(--d-linie);
  color: var(--d-text);
}
/* Modern traegt Schatten statt Kanten - auch hier. */
html.design-modern:not(.arbeit) .topbar {
  border-bottom-color: transparent;
  box-shadow: var(--d-schatten);
}
html.design-klassisch:not(.arbeit) .topbar h2,
html.design-modern:not(.arbeit) .topbar h2,
html.design-coverwand:not(.arbeit) .topbar h2 {
  color: var(--d-text);
  font-family: var(--d-display);
  font-weight: var(--d-fett);
}
html.design-klassisch:not(.arbeit) .zurueck,
html.design-klassisch:not(.arbeit) .burger,
html.design-modern:not(.arbeit) .zurueck,
html.design-modern:not(.arbeit) .burger,
html.design-coverwand:not(.arbeit) .zurueck,
html.design-coverwand:not(.arbeit) .burger { color: var(--d-leise); }
html.design-klassisch:not(.arbeit) .zurueck:hover,
html.design-modern:not(.arbeit) .zurueck:hover,
html.design-coverwand:not(.arbeit) .zurueck:hover {
  color: var(--d-text);
  background: var(--d-erhoben);
}
/* Der Avatar war ein violetter Verlauf mit heller Schrift. Im hellen Modus
   stand darauf der dunkle Textton. Jetzt traegt er den Akzent der Palette,
   mit der Schriftfarbe, die dazu nachgerechnet ist. */
html.design-klassisch:not(.arbeit) .avatar,
html.design-modern:not(.arbeit) .avatar,
html.design-coverwand:not(.arbeit) .avatar {
  background: var(--d-akzent);
  background-image: none;
  border-color: var(--d-akzent);
  color: var(--d-akzent-ink);
}

/* Das Schubfach "Alle Apps", sein Griff und der Warteschirm. */
html.design-klassisch:not(.arbeit) .schubfach .blatt,
html.design-modern:not(.arbeit) .schubfach .blatt,
html.design-coverwand:not(.arbeit) .schubfach .blatt {
  background: var(--d-karte);
  border-top-color: var(--d-linie);
  border-radius: var(--d-r) var(--d-r) 0 0;
}
html.design-klassisch:not(.arbeit) .schub-griff,
html.design-modern:not(.arbeit) .schub-griff,
html.design-coverwand:not(.arbeit) .schub-griff {
  background: var(--d-karte);
  border-color: var(--d-rahmen);
  color: var(--d-leise);
  box-shadow: var(--d-schatten);
}
html.design-klassisch:not(.arbeit) .warteschirm,
html.design-modern:not(.arbeit) .warteschirm,
html.design-coverwand:not(.arbeit) .warteschirm {
  background: var(--d-grund);
}
/* Der Knopf des Schalters war ein festes Graulila. Auf einer hellen
   Schiene war er kaum zu sehen. */
html.design-klassisch:not(.arbeit) .wippe::after,
html.design-modern:not(.arbeit) .wippe::after,
html.design-coverwand:not(.arbeit) .wippe::after { background: var(--d-rahmen); }

/* Die Wortmarke und die Anmelde-Ueberschrift tragen einen Farbverlauf IM
   Text - Neon-Cyan bis Rosa. Auf weissem Grund ist das nicht mehr lesbar.
   Klassisch und Cover-Wand haben ihn schon oben verloren; im hellen Modus
   verliert ihn auch Modern. Im dunklen darf er bleiben, dort passt er. */
html.modus-hell.design-modern .login h1,
html.modus-hell.design-modern .side .brand b {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--d-text);
  text-shadow: none;
}


/* ---- Weisse Schrift aus dem Markup ------------------------------------- */
/* Im Bestand steht 248 mal die Tailwind-Klasse text-white. 158 davon liegen
   auf der Karte oder der Seite - dort ist Weiss im hellen Modus unsichtbar.
   Also wird daraus der Textton der Palette.

   Die uebrigen 90 sitzen auf einer GESAETTIGTEN Flaeche: Knoepfe und
   Abzeichen in Teal, Rot, Gruen, Orange, Blau, Gold, Violett. Die bleiben
   auch im hellen Modus farbig, und weisse Schrift darauf bleibt richtig.
   Sie stehen darum einzeln und mit ~= (ganzes Wort) hier drunter - ein
   [class*="bg-red-"] wuerde sonst auch ein blosses hover:bg-red-500 auf
   einem hellen Knopf treffen. */
html.modus-hell .text-white { color: rgb(var(--ton-100)); }
html.modus-hell [class~="bg-teal-500"].text-white,
html.modus-hell [class~="bg-teal-600"].text-white,
html.modus-hell [class~="bg-red-500"].text-white,
html.modus-hell [class~="bg-red-600"].text-white,
html.modus-hell [class~="bg-green-500"].text-white,
html.modus-hell [class~="bg-green-600"].text-white,
html.modus-hell [class~="bg-green-700"].text-white,
html.modus-hell [class~="bg-green-800"].text-white,
html.modus-hell [class~="bg-orange-500"].text-white,
html.modus-hell [class~="bg-orange-600"].text-white,
html.modus-hell [class~="bg-blue-600"].text-white,
html.modus-hell [class~="bg-purple-600"].text-white { color: #ffffff; }

/* ---- Bernstein traegt kein Weiss --------------------------------------- */
/* Gemessen am 31.08.2026 in ausgaben.html: "+ Neuer Vertrag" 2,10 bis
   2,21:1, der Gruppenknopf "Allgemein" 2,02 bis 2,21:1, der Zaehler daneben
   2,26 bis 2,30:1. In JEDEM der vier Designs und in beiden Modi - sechs
   Kombinationen, immer derselbe Wert. Das ist kein Ausrutscher eines
   Designs, das ist die Farbe.
   Die Flaeche ist ein Verlauf, den ausgaben.html selbst legt:
   linear-gradient(135deg, #ffc94d, #cf8a10). Weiss traegt am hellen Ende
   1,7:1 und am dunklen 3,1:1 - ueber die ganze Laenge zu wenig. Dunkle
   Schrift kommt auf 8,4:1.

   Der :where()-Block weiter unten weiss das laengst und setzt fuer
   bg-amber-500/600 dunkle Schrift. Er hat aber die Staerke null, und in der
   Seite steht text-white direkt am Knopf - eine Klasse gewinnt gegen null.
   Deshalb hier noch einmal mit html davor: (0,2,1) schlaegt die (0,1,0) von
   text-white, bleibt aber schwach genug, dass eine Seite mit einem
   ausdruecklichen eigenen Wert weiter gewinnt.

   Bernstein 700 und 900 sind ABSICHTLICH nicht dabei. Die sind dunkel
   genug, dort ist Weiss richtig - sie stehen oben in der weissen Liste. */
html [class~="bg-amber-500"].text-white,
html [class~="bg-amber-600"].text-white,
html [class~="bg-yellow-500"].text-white,
html [class~="bg-yellow-600"].text-white { color: #14161c; }

/* Nachtrag aus dem Lauf danach: Die Regel oben verlangt text-white am
   Element und hat damit nur die halbe Arbeit gemacht. "+ Neuer Vertrag"
   war weg, der Gruppenknopf "Allgemein" und sein Zaehler blieben stehen -
   2,02 bis 2,26:1. Deren Markup schreibt nur 'bg-amber-600 shadow'; die
   weisse Schrift kommt gar nicht von einer Klasse, sondern geerbt vom
   Seitentext. Deshalb faellt es auch nur im dunklen Modus auf: im hellen
   erbt derselbe Knopf dunkle Schrift und steht bei 8,9:1.

   Dieselbe Bauform wie im Nachtrag weiter unten: html + button ergibt
   (0,0,2) - stark genug gegen Tailwinds button { color: inherit },
   schwach genug, dass jede Klasse am Element weiter gewinnt.
   Ohne Design-Bedingung, denn der Befund steht auch unter 'standard',
   und dort greift keiner der :where()-Bloecke. */
html button:where([class~="bg-amber-500"], [class~="bg-amber-600"],
                  [class~="bg-yellow-500"], [class~="bg-yellow-600"]),
html a:where([class~="bg-amber-500"], [class~="bg-amber-600"],
             [class~="bg-yellow-500"], [class~="bg-yellow-600"]) { color: #14161c; }

/* Und der dritte Anlauf, weil die beiden oben eine Annahme teilen, die
   hier nicht stimmt: dass Flaeche und Schriftfarbe am SELBEN Element
   haengen. Bei den Gruppenreitern in ausgaben.html tun sie das nicht:

     <div class="... bg-amber-600 shadow">        <- die Flaeche
       <button class="... text-white">Allgemein   <- die Schrift
         <span class="ml-1 text-[11px]">26</span>

   Der div traegt kein text-white, der button kein bg-amber-600 - beide
   Regeln oben gingen daran vorbei, und "Allgemein" stand nach zwei
   Paketen immer noch bei 1,73:1. Das ist der schlechteste Wert im
   ganzen Bericht.

   Also als Nachfahren-Regel: weisse Schrift IRGENDWO unter einer
   Bernsteinflaeche. (0,2,1) - schlaegt das text-white am Element,
   verliert gegen alles, was ausdruecklich etwas anderes sagt. Der
   Zaehler daneben braucht nichts Eigenes; er erbt vom Knopf. */
html [class~="bg-amber-500"] .text-white,
html [class~="bg-amber-600"] .text-white,
html [class~="bg-yellow-500"] .text-white,
html [class~="bg-yellow-600"] .text-white { color: #14161c; }

/* Drei Stellen, an denen color:#fff auf einer Flaeche steht, die AUCH im
   hellen Modus dunkel bleibt. Der Rueckfallwert in der Seite macht daraus
   sonst den dunklen Textton - auf dunklem Grund also unlesbar.
   .modi und .btn.haupt liegen auf dem Akzent, .galerie-weg:hover auf
   einem dunklen Rot. */
html.design-klassisch:not(.arbeit) .modi button[aria-pressed="true"],
html.design-modern:not(.arbeit) .modi button[aria-pressed="true"],
html.design-coverwand:not(.arbeit) .modi button[aria-pressed="true"],
html.design-klassisch:not(.arbeit) .btn.haupt,
html.design-modern:not(.arbeit) .btn.haupt,
html.design-coverwand:not(.arbeit) .btn.haupt {
  background: var(--d-akzent);
  border-color: var(--d-akzent);
  color: var(--d-akzent-ink);
}
html.design-klassisch:not(.arbeit) .galerie-weg:hover,
html.design-modern:not(.arbeit) .galerie-weg:hover,
html.design-coverwand:not(.arbeit) .galerie-weg:hover {
  background: var(--d-fehler);
  color: var(--d-karte);
}


/* ---- Blasse Akzentschrift ---------------------------------------------- */
/* Die Farbrampe ist nur fuer 'gray' auf Variablen umgestellt. Alle uebrigen
   Familien behalten ihre festen Werte - und deren helle Stufen 100 bis 400
   sind auf weissem Grund samt und sonders unlesbar. Gemessen ueber alle
   zwoelf Seiten: 32 Klassen, 269 Vorkommen, 1,12 bis 2,85:1. Die Notiz im
   Futter-Tagebuch (text-orange-200/80) lag bei 1,16:1.

   Sie bekommen die Bedeutungsfarbe der Palette. Die Aussage bleibt - Gold
   heisst weiter Hinweis, Rot weiter Fehler -, und die vier Werte sind in
   JEDER Palette gegen die Karte nachgerechnet.

   Das gilt in beiden Modi. Im dunklen war die alte Farbe zwar lesbar, aber
   es waere dieselbe Notiz einmal im Warnton der Palette und einmal im
   alten Neonorange - zwei Wahrheiten fuer dieselbe Sache.

   Standard ist nicht betroffen: Ohne Design-Wahl setzt der Kopf der Seite
   gar keine Klasse, also weder modus-hell noch modus-dunkel.

   Geschrieben mit *= und nicht ~=: Achtzehn dieser Klassen tragen eine
   Deckkraft (text-orange-200/80), und ein ~= wuerde genau die nicht
   treffen. */
/* Orange, Gold, Gelb: Hinweis */
html.modus-hell [class*="text-orange-100"],
html.modus-dunkel [class*="text-orange-100"],
html.modus-hell [class*="text-orange-200"],
html.modus-dunkel [class*="text-orange-200"],
html.modus-hell [class*="text-orange-300"],
html.modus-dunkel [class*="text-orange-300"],
html.modus-hell [class*="text-orange-400"],
html.modus-dunkel [class*="text-orange-400"],
html.modus-hell [class*="text-amber-100"],
html.modus-dunkel [class*="text-amber-100"],
html.modus-hell [class*="text-amber-200"],
html.modus-dunkel [class*="text-amber-200"],
html.modus-hell [class*="text-amber-300"],
html.modus-dunkel [class*="text-amber-300"],
html.modus-hell [class*="text-amber-400"],
html.modus-dunkel [class*="text-amber-400"],
html.modus-hell [class*="text-yellow-400"],
html.modus-dunkel [class*="text-yellow-400"],
html.modus-hell [class*="text-yellow-500"],
html.modus-dunkel [class*="text-yellow-500"] { color: var(--d-warn); }

/* Rot und Rosa: Fehler */
html.modus-hell [class*="text-red-200"],
html.modus-dunkel [class*="text-red-200"],
html.modus-hell [class*="text-red-300"],
html.modus-dunkel [class*="text-red-300"],
html.modus-hell [class*="text-red-400"],
html.modus-dunkel [class*="text-red-400"],
html.modus-hell [class*="text-rose-400"],
html.modus-dunkel [class*="text-rose-400"],
html.modus-hell [class*="text-pink-400"],
html.modus-dunkel [class*="text-pink-400"] { color: var(--d-fehler); }

/* Gruen und Teal: in Ordnung */
html.modus-hell [class*="text-green-100"],
html.modus-dunkel [class*="text-green-100"],
html.modus-hell [class*="text-green-200"],
html.modus-dunkel [class*="text-green-200"],
html.modus-hell [class*="text-green-300"],
html.modus-dunkel [class*="text-green-300"],
html.modus-hell [class*="text-green-400"],
html.modus-dunkel [class*="text-green-400"],
html.modus-hell [class*="text-teal-300"],
html.modus-dunkel [class*="text-teal-300"],
html.modus-hell [class*="text-teal-400"],
html.modus-dunkel [class*="text-teal-400"] { color: var(--d-ok); }

/* Blau, Violett, Tinte: Akzent */
html.modus-hell [class*="text-blue-100"],
html.modus-dunkel [class*="text-blue-100"],
html.modus-hell [class*="text-blue-200"],
html.modus-dunkel [class*="text-blue-200"],
html.modus-hell [class*="text-blue-300"],
html.modus-dunkel [class*="text-blue-300"],
html.modus-hell [class*="text-blue-400"],
html.modus-dunkel [class*="text-blue-400"],
html.modus-hell [class*="text-purple-200"],
html.modus-dunkel [class*="text-purple-200"],
html.modus-hell [class*="text-purple-300"],
html.modus-dunkel [class*="text-purple-300"],
html.modus-hell [class*="text-purple-400"],
html.modus-dunkel [class*="text-purple-400"],
html.modus-hell [class*="text-tinte-200"],
html.modus-dunkel [class*="text-tinte-200"],
html.modus-hell [class*="text-tinte-300"],
html.modus-dunkel [class*="text-tinte-300"],
html.modus-hell [class*="text-sky-300"],
html.modus-dunkel [class*="text-sky-300"],
html.modus-hell [class*="text-sky-400"],
html.modus-dunkel [class*="text-sky-400"] { color: var(--d-akzent); }

/* Fuenf Abzeichen tragen blasse Schrift auf einer VOLLEN dunklen Flaeche.
   Die bleibt in beiden Modi dunkel - dort war die Schrift also nie das
   Problem, und sie behaelt ihren Wert aus dem Bestand. */
html.modus-hell [class*="bg-blue-900"][class*="text-blue-200"],
html.modus-dunkel [class*="bg-blue-900"][class*="text-blue-200"] { color: rgb(201 240 255); }
html.modus-hell [class*="bg-blue-700"][class*="text-blue-100"],
html.modus-dunkel [class*="bg-blue-700"][class*="text-blue-100"] { color: rgb(224 246 255); }
html.modus-hell [class*="bg-green-700"][class*="text-green-100"],
html.modus-dunkel [class*="bg-green-700"][class*="text-green-100"] { color: rgb(220 252 231); }
html.modus-hell [class*="bg-orange-700"][class*="text-orange-100"],
html.modus-dunkel [class*="bg-orange-700"][class*="text-orange-100"] { color: rgb(255 237 213); }
html.modus-hell [class*="bg-amber-700"][class*="text-amber-100"],
html.modus-dunkel [class*="bg-amber-700"][class*="text-amber-100"] { color: rgb(254 243 199); }


/* ---- Was der Browser-Pruefstand gefunden hat ---------------------------- */
/* Gemessen am 30.08. mit selbsttest.py, sieben Kombinationen, zwoelf Seiten.
   39 Stellen traten NUR im hellen Modus auf. Vier Ursachen. */

/* 1. Die Leiste oben kommt aus hub.js und traegt dort feste Farben - sie
      hat nie eine Variable gesehen. Das betraf 22 der 39 Stellen: "Zum Hub"
      mit 3,32:1 und "Abmelden" mit 2,25:1, auf jeder der elf Apps.
      hub.js schreibt seine Regeln unter #hub-nav, also mit einer Kennung.
      Dagegen kommt nur an, wer die Kennung ebenfalls nennt.
      Nachgerechnet: 4,53 bis 7,43:1 ueber alle sechs Paletten. */
html.design-klassisch:not(.arbeit) #hub-nav .hub-btn,
html.design-modern:not(.arbeit) #hub-nav .hub-btn,
html.design-coverwand:not(.arbeit) #hub-nav .hub-btn,
html.design-klassisch:not(.arbeit) #hub-nav .hub-logout,
html.design-modern:not(.arbeit) #hub-nav .hub-logout,
html.design-coverwand:not(.arbeit) #hub-nav .hub-logout {
  color: var(--d-leise);
  border-color: var(--d-rahmen);
  background: transparent;
}
html.design-klassisch:not(.arbeit) #hub-nav .hub-btn:hover,
html.design-modern:not(.arbeit) #hub-nav .hub-btn:hover,
html.design-coverwand:not(.arbeit) #hub-nav .hub-btn:hover,
html.design-klassisch:not(.arbeit) #hub-nav .hub-logout:hover,
html.design-modern:not(.arbeit) #hub-nav .hub-logout:hover,
html.design-coverwand:not(.arbeit) #hub-nav .hub-logout:hover {
  color: var(--d-text);
  border-color: var(--d-akzent);
}

/* 2. Knoepfe mit farbiger Flaeche, aber ohne eigene Schriftfarbe. Sie erben
      die Farbe des Seitentexts - im dunklen Modus hell, im hellen dunkel.
      Auf Violett wurde daraus 2,75:1.

      Geschrieben in :where(), damit die Regel die Staerke NULL hat. Jede
      Klasse am Element selbst - text-white, text-gray-900, was auch immer -
      gewinnt dann dagegen. Es ist also nur die Vorgabe fuer den Fall, dass
      gar nichts anderes dasteht. Mit einer normalen Regel wuerde ich sonst
      Knoepfe mitreissen, die ihre Schriftfarbe ausdruecklich mitbringen.

      Weiss oder dunkel wurde je Flaeche ausgerechnet, nicht geraten:
      Auf Bernstein 500 traegt Weiss 2,15:1, dunkle Schrift 8,42:1 - dort
      ist dunkel richtig. Auf Violett 700 ist es umgekehrt, 6,98 gegen 2,59.
      Schlechtester Wert nach dieser Wahl: 4,57:1. */
:where(html.design-klassisch:not(.arbeit), html.design-modern:not(.arbeit),
       html.design-coverwand:not(.arbeit))
:where(
   [class~="bg-amber-700"],
   [class~="bg-amber-900"],
   [class~="bg-blue-600"],
   [class~="bg-blue-700"],
   [class~="bg-blue-900"],
   [class~="bg-green-700"],
   [class~="bg-green-800"],
   [class~="bg-green-900"],
   [class~="bg-orange-700"],
   [class~="bg-orange-900"],
   [class~="bg-purple-600"],
   [class~="bg-purple-700"],
   [class~="bg-purple-900"],
   [class~="bg-red-600"],
   [class~="bg-red-700"],
   [class~="bg-red-800"],
   [class~="bg-red-900"],
   [class~="bg-sky-900"]
) { color: #ffffff; }

:where(html.design-klassisch:not(.arbeit), html.design-modern:not(.arbeit),
       html.design-coverwand:not(.arbeit))
:where(
   [class~="bg-amber-500"],
   [class~="bg-amber-600"],
   [class~="bg-blue-500"],
   [class~="bg-green-500"],
   [class~="bg-green-600"],
   [class~="bg-orange-500"],
   [class~="bg-orange-600"],
   [class~="bg-purple-500"],
   [class~="bg-red-500"],
   [class~="bg-teal-500"],
   [class~="bg-teal-600"],
   [class~="bg-yellow-600"]
) { color: #14161c; }

/* Nachtrag aus dem zweiten Messlauf: Die beiden Bloecke oben haben die
   Staerke null und verlieren damit gegen Tailwinds Grundlage, die
   button { color: inherit } setzt - ein Elementselektor ist staerker als
   null. "Inventur" und "+ Neue Figur" blieben deshalb dunkel auf Violett,
   2,75:1.

   Hier dasselbe noch einmal, aber mit zwei Elementnamen im Selektor: html
   und button beziehungsweise a. Das ergibt (0,0,2) - stark genug gegen
   color:inherit, schwach genug, dass jede Klasse am Element weiter
   gewinnt. Die Bloecke oben bleiben stehen; sie greifen bei allem, was
   weder Knopf noch Verweis ist. */
/* Dunkle Flaechen: weisse Schrift. html + button = Staerke (0,0,2) */
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-amber-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-amber-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-blue-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-blue-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-blue-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-green-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-green-800"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-green-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-orange-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-orange-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-purple-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-purple-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-purple-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-red-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-red-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-red-800"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-red-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-sky-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-amber-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-amber-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-blue-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-blue-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-blue-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-green-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-green-800"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-green-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-orange-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-orange-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-purple-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-purple-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-purple-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-red-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-red-700"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-red-800"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-red-900"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-sky-900"]) {
  color: #ffffff;
}

/* Helle Flaechen: dunkle Schrift */
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-amber-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-amber-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-blue-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-green-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-green-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-orange-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-orange-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-purple-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-red-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-teal-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-teal-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) button:where([class~="bg-yellow-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-amber-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-amber-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-blue-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-green-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-green-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-orange-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-orange-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-purple-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-red-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-teal-500"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-teal-600"]),
html:where(.design-klassisch, .design-modern, .design-coverwand):not(.arbeit) a:where([class~="bg-yellow-600"]) {
  color: #14161c;
}

/* Zwei Knoepfe tragen ihre Schriftfarbe fest in der Seite. Paket 106 hat
   sie nicht erwischt: #15152d und #2e1e05 standen in der Tabelle fuer
   FLAECHEN, nicht fuer Schrift, und wurden bei color: deshalb uebergangen.
   .btn-haupt liegt auf dem Akzent - 5,73 bis 13,74:1 mit der dafuer
   gerechneten Schriftfarbe. .btn-roh liegt auf dem Warnton. */
html.design-klassisch:not(.arbeit) .btn.btn-haupt,
html.design-modern:not(.arbeit) .btn.btn-haupt,
html.design-coverwand:not(.arbeit) .btn.btn-haupt {
  background: var(--d-akzent);
  border-color: var(--d-akzent);
  color: var(--d-akzent-ink);
}
html.design-klassisch:not(.arbeit) .btn.btn-roh,
html.design-modern:not(.arbeit) .btn.btn-roh,
html.design-coverwand:not(.arbeit) .btn.btn-roh {
  background: var(--d-warn);
  border-color: var(--d-warn);
  color: var(--d-karte);
}


/* 3. Abzeichen mit dunkler Toenung. bg-green-900/40 heisst: dunkles Gruen
      mit 40 Prozent Deckkraft. Ueber der dunklen Karte gibt das einen
      gruenen Anflug, ueber der weissen ein mittleres Grau - und darauf
      traegt der Bedeutungston nicht mehr: "880 erhalten" kam auf 2,17:1.

      Sie bekommen im hellen Modus eine helle Toenung derselben Bedeutung.
      Der Anteil ist 10 Prozent; bei 12 lag Modern hell beim Gut-Ton auf
      4,50 und damit auf der Kante, bei 14 auf 4,37. */
html.modus-hell [class*="bg-amber-900/"],
html.modus-hell [class*="bg-orange-900/"] {
  background-color: color-mix(in srgb, var(--d-warn) 10%, var(--d-karte));
}
html.modus-hell [class*="bg-red-900/"] {
  background-color: color-mix(in srgb, var(--d-fehler) 10%, var(--d-karte));
}
html.modus-hell [class*="bg-green-800/"],
html.modus-hell [class*="bg-green-900/"] {
  background-color: color-mix(in srgb, var(--d-ok) 10%, var(--d-karte));
}
html.modus-hell [class*="bg-blue-900/"],
html.modus-hell [class*="bg-sky-900/"],
html.modus-hell [class*="bg-purple-900/"],
html.modus-hell [class*="bg-tinte-900/"] {
  background-color: color-mix(in srgb, var(--d-akzent) 10%, var(--d-karte));
}

/* 4. Die Zahl auf der kleinen Kachel steht in der Modulfarbe auf dem
      Seitengrund - Gold auf Beige, 1,35:1. Der Rand bleibt in der
      Modulfarbe, damit die Zuordnung bleibt; die Ziffern bekommen den
      Textton. 15,10 bis 16,89:1. */
html.design-klassisch:not(.arbeit) .appicon .num,
html.design-modern:not(.arbeit) .appicon .num,
html.design-coverwand:not(.arbeit) .appicon:not([data-goto]) .num {
  color: var(--d-text);
}


/* ==========================================================================
   8. Der Reiter "Design" in den Einstellungen
   --------------------------------------------------------------------------
   Eigene Klassen, alle mit dem Praefix dz-. Ohne Praefix erbte eine neue
   Klasse irgendwo eine fremde Bedeutung - dieselbe Ueberlegung wie bei ap-
   in arbeit.css.
   ========================================================================== */
.dz-wahl { display: grid; gap: .7rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .dz-wahl { grid-template-columns: repeat(4, 1fr); } }
.dz-karte {
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--card); padding: .7rem; cursor: pointer; text-align: left;
  color: var(--text); font: inherit; display: block;
}
.dz-karte[aria-pressed="true"] { border-color: var(--accent); }
.dz-karte:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Die Vorschau zeigt, was ein Design ausmacht: Farbe UND Form. Der Block
   links ist die Karte in der Rundung des Designs, das Woertchen rechts
   unten steht in seiner Schrift. */
.dz-probe {
  height: 58px; margin-bottom: .5rem; padding: 8px;
  border-radius: var(--r-sm); border: 1px solid var(--line);
  overflow: hidden; display: block; position: relative;
}
.dz-probe i { display: block; height: 100%; width: 62%; }
.dz-probe b {
  position: absolute; right: 8px; bottom: 6px;
  font-size: .66rem; font-weight: 400; padding: 0 .25rem;
}
.dz-name { font-weight: 600; font-size: .88rem; display: block; }
.dz-text { color: var(--muted); font-size: .76rem; line-height: 1.35; display: block; }
.dz-modus { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .35rem; }
.dz-modus .btn[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.dz-aus { opacity: .45; pointer-events: none; }