/* =========================== Zweitfarbe ===========================
   So hat Evi es gewollt (zuerst MyLifeBase, dann alle anderen Designs ausser
   "Weiss & Tiefblau", dessen Farbvorgabe nur drei Farben kennt): die App sah
   "eintoenig in derselben Farbe" aus. Drei Mittel:

   1. Eine zweite Farbe je Design (--akzent2, Schrift darauf --on-akzent2;
      die Toene stehen in css/04-designs.css): ein Ton aus der Familie des
      Designs, kein fremder - bei MyLifeBase ein helles Blau wie der
      Hintergrund, bei den hellen Designs ein etwas tieferer Ton des
      Hintergrunds, bei den dunklen ein mittlerer Ton des Akzents. Sie kommt
      nur als Fuellung an wenigen Stellen vor - der heutige Tag, Zaehler, der
      Fortschrittsring, der aktive Reiter, "Termin buchen" - nie als Schrift
      auf hellem Grund. Die Zustandsfarben (Offen = gelb, Erledigt = gruen,
      Absage = rot) bleiben ihre eigenen.
   2. Eine Hauptkarte je Seite in der Farbe des Akzents mit Schrift "auf
      Akzent": Dein Tag (Organisation), der Kopf des Tagblatts (Wochenplan und
      Kalender), der Kopf der Kundenakte. In den dunklen Designs ist das eine
      helle Karte auf dunklem Grund, in den hellen eine dunkle.
   3. Die Reiterleiste unten in der Farbe des Akzents mit Zeichen "auf Akzent"
      - nur in den hellen Designs (in den dunklen bliebe sie als grosse helle
      Flaeche zu laut; dort traegt nur der aktive Reiter die Zweitfarbe).

   Die Regeln stehen unter :is([data-theme=...]); ein weiteres Design kommt
   dazu, indem seine Kennung in die Listen eingetragen wird und es
   --akzent2 (und --on-akzent2) in css/04-designs.css bekommt. `node
   werkzeuge/kontrast-pruefen.js` rechnet die Paare nach. Liegt ganz zuletzt. */

:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]){
  --hero-fl:var(--accent);
  --hero-on:var(--on-accent);
  --hero-soft:color-mix(in srgb, var(--accent) 12%, var(--on-accent));
  --hero-rand:color-mix(in srgb, var(--accent) 62%, var(--on-accent));
  --hero-kachel:color-mix(in srgb, var(--accent) 86%, var(--on-accent));
}

/* ------------------------- 3. Reiterleiste ------------------------- */
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="schwarzweiss"]) nav.tabbar .tabbar-inner{
  background:var(--hero-fl);
  border-top:0;
}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="schwarzweiss"]) nav.tabbar button{color:var(--hero-soft);}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="schwarzweiss"]) nav.tabbar button.active{color:var(--hero-on);}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) nav.tabbar button.active svg{color:var(--bar-akzent, var(--akzent2));}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .tab-pille::after{background:var(--bar-akzent, var(--akzent2));}

/* -------------------- 2. Hauptkarte: Navy gefuellt -------------------- */
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) :is(.pl-held,.ka-held,.tagblatt > .tb-kopf){
  background:var(--hero-fl);
  border-color:var(--hero-fl);
  color:var(--hero-on);
  --ink:var(--hero-on);
  --ink-soft:var(--hero-soft);
  --surface:var(--hero-fl);
  --ground:var(--hero-fl);
  --surface-2:var(--hero-kachel);
  --line:var(--hero-rand);
  --accent:var(--hero-on);
  --accent-deep:var(--hero-on);
  --accent-soft:var(--hero-kachel);
  --on-accent:var(--hero-fl);
  --farbe:var(--hero-on);
  --kfarbe:var(--hero-on);
}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .tagblatt > .tb-kopf{
  padding:12px;
  margin-bottom:12px;
  border:1px solid var(--hero-fl);
  border-radius:var(--r-feld);
}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .pl-held{box-shadow:none;}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .ka-held{box-shadow:none;}
/* Der Ring zeigt den Fortschritt in der zweiten Farbe. */
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .pl-held .pl-ring{
  background:conic-gradient(var(--akzent2) calc(var(--anteil) * 360deg), var(--hero-rand) 0);
}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .pl-held .pl-ring.voll{background:var(--akzent2);}

/* --------------------- 1. Zweite Farbe als Fuellung --------------------- */
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) :is(.wb-tag.heute,.cal-tag.heute .ct-zahl){
  background:var(--akzent2);
  border-color:var(--akzent2);
  color:var(--on-akzent2);
  box-shadow:none;
}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .wb-tag.heute .wb-dow{color:var(--on-akzent2);opacity:.85;}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .wb-tag.heute .wb-punkte i{background:var(--on-akzent2);}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .wb-tag.heute.gewaehlt{border-color:var(--ink);}
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .cf-chip:not(.on) .cnt{
  background:var(--akzent2);
  color:var(--on-akzent2);
}
/* "Termin buchen" ist der eine Schritt der Akte: in der zweiten Farbe, damit
   er sich vom Kopf darueber (Navy) abhebt. */
:root:is([data-theme="weiss"],[data-theme="leinen"],[data-theme="gedimmt"],[data-theme="bordeaux"],[data-theme="petrol"],[data-theme="basedunkel"],[data-theme="zentivo"],[data-theme="nacht"],[data-theme="anthrazit"],[data-theme="terra"],[data-theme="schwarzweiss"],[data-theme="schwarz"]) .btn.ka-buchen{
  background:var(--akzent2);
  border-color:var(--akzent2);
  color:var(--on-akzent2);
}

/* ------------- Weiss & Tiefblau (tiefblau): Reiterleiste in Anthrazit -------------
   Die Farbvorgabe nennt Navigationsleisten in Anthrazit: die Leiste unten
   traegt --nav, Zeichen und Woerter sind hell, der aktive Reiter hat weisse
   Schrift, ein helles Blau am Zeichen und am Strich. Sonst keine weitere
   Regel dieser Datei fuer dieses Design - nur zwei Farben plus Text. */
:root[data-theme="tiefblau"] nav.tabbar .tabbar-inner{
  background:var(--nav);
  border-top:0;
}
:root[data-theme="tiefblau"] nav.tabbar button{color:var(--nav-soft);}
:root[data-theme="tiefblau"] nav.tabbar button.active{color:var(--on-nav);}
:root[data-theme="tiefblau"] nav.tabbar button.active svg{color:var(--nav-akzent);}
:root[data-theme="tiefblau"] .tab-pille::after{background:var(--nav-akzent);}