/* Das elfte Design: so schlicht wie moeglich. Ein helles, kaum warmes
   Leinen traegt die Seite, die Karten sind fast weiss, und alles Aktive
   steht in Graphit statt in einer Farbe - nichts lenkt vom Inhalt ab. Die
   Statusfarben bleiben, damit offen, erledigt und abgesagt lesbar sind;
   sie sind eine Spur zurueckgenommen, damit sie nicht schreien. */
:root[data-theme="leinen"]{
  --ground:#F0EEEA;
  --ground-rgb:240,238,234;
  --ground-2:#E6E3DD;
  --surface:#FCFBF9;
  --surface-2:#F3F1ED;
  --ink:#1F1E1C;
  --ink-soft:#67635D;
  --accent:#3C3A36;
  --accent-deep:#2A2926;
  --accent-soft:#E9E6E0;
  --on-accent:#FFFFFF;
  --rose:#A9A399;
  --rose-soft:#ECE9E3;
  --line:#E0DCD5;
  --planer:#FCFBF9;
  --planer-line:#D2CDC5;
  --planer-heute:#EAE6DF;
  --warn:#9A3322;
  --warn-soft:#F4E2DC;
  --ok:#3A6150;
  --ok-soft:#E2ECE6;
  --alert:#8A5A1A;
  --alert-soft:#F5EAD9;
  --danger:#A8321F;
  --alert-fill:#C9923A;
  --wait:#7A5B14;
  --wait-soft:#F4EAD2;
  --off:#A8321F;
  --off-soft:#F5E3DE;
  --shadow:0 1px 2px rgba(40,38,34,.05), 0 10px 26px rgba(40,38,34,.07);
  --shadow-lift:0 4px 10px rgba(40,38,34,.10), 0 12px 26px rgba(40,38,34,.09);
}

/* Das fuenfte Design geht bewusst den anderen Weg: dunkles Anthrazit mit
   Champagner-Gold. Auf dunklem Grund kehren sich die Verhaeltnisse um -
   Karten werden heller als der Grund, Schrift hell, und die zarten Flaechen
   hinter Uhrzeit oder Zustand sind getoente Dunkelfelder statt Pastell. */
/* Graphit & Silber (Kennung 'zentivo', hiess bis zum neuen Logo Zentivo und
   war der Standard): in
   den Farben des Logos. Tiefes Graphit, fast Schwarz, traegt die Seite, die
   Karten liegen eine Spur heller darauf, und alles Aktive glaenzt in Silber
   wie das Z. Keine bunte Farbe - ruhig, edel, nach Business. Die
   Statusfarben bleiben, fuer den dunklen Grund aufgehellt. Kontraste
   gerechnet: Schrift auf Grund 16 : 1, leise Schrift auf Karte 7 : 1,
   Silber auf Karte 10,6 : 1, Schrift auf Silber 11,6 : 1, die drei
   Zustaende je ueber 6,5 : 1. */
:root[data-theme="zentivo"]{
  --ground:#111215;
  --ground-rgb:17,18,21;
  --ground-2:#17181C;
  --surface:#1B1C20;
  --surface-2:#24262B;
  --ink:#EEEFF1;
  --ink-soft:#A3A7AE;
  --accent:#C8CCD2;
  --accent-deep:#E6E8EB;
  --accent-soft:#2B2E34;
  --on-accent:#111215;
  --rose:#9EA3AB;
  --rose-soft:#26282D;
  --line:#2F3137;
  --planer:#1F2125;
  --planer-line:#3A3D44;
  --planer-heute:#2A2D33;
  --ok:#86D3A6;
  --ok-soft:#1B3326;
  --off:#F2958A;
  --off-soft:#3A2220;
  --wait:#E8C872;
  --wait-soft:#352E19;
  --warn:#F2958A;
  --warn-soft:#3A2220;
  --alert:#E8C872;
  --alert-soft:#352E19;
  --danger:#FF7A67;
  --on-danger:#2A1512;
  --alert-fill:#6B4E0A;
  --shadow:0 1px 2px rgba(0,0,0,.34), 0 10px 26px rgba(0,0,0,.40);
  --shadow-lift:0 4px 10px rgba(0,0,0,.46), 0 12px 26px rgba(0,0,0,.42);
}
:root[data-theme="nacht"]{
  --ground:#15151A;
  --ground-rgb:21,21,26;
  --ground-2:#1E1E25;
  --surface:#22222B;
  --surface-2:#2C2C36;
  --ink:#F1EEE9;
  --ink-soft:#A9A3A0;
  --accent:#D9B26A;
  --accent-deep:#E9CB8E;
  --accent-soft:#332C1D;
  --on-accent:#1A1A20;
  --rose:#D9B26A;
  --rose-soft:#332C1D;
  --line:#343440;
  --planer:#2A2A34;
  --planer-line:#4A4A58;
  --planer-heute:#3A3520;
  --ok:#7FD6A2;
  --ok-soft:#1D3A2B;
  --off:#FF9082;
  --off-soft:#3B211E;
  --wait:#F0C96B;
  --wait-soft:#3A3118;
  --warn:#FF9082;
  --warn-soft:#3B211E;
  --alert:#F0C96B;
  --alert-soft:#3A3118;
  --danger:#FF7A67;
  --on-danger:#2A1512;
  --alert-fill:#6B4E0A;
  --shadow:0 1px 2px rgba(0,0,0,.30), 0 10px 26px rgba(0,0,0,.34);
  --shadow-lift:0 4px 10px rgba(0,0,0,.42), 0 12px 26px rgba(0,0,0,.36);
}
/* Das siebte Design nach einer Farbkarte: ein weiches Pastellblau traegt die
   Seite, die Karten liegen fast weiss darauf, und alles Aktive - Rahmen,
   Knoepfe, Zahlen - kommt in tiefem Burgunderrot. Abgesagte Termine liegen
   bewusst waermer, damit sie nicht mit dem Akzent verwechselt werden. */
:root[data-theme="bordeaux"]{
  --ground:#D2DCE7;
  --ground-rgb:210,220,231;
  --ground-2:#C2CFDD;
  --surface:#F7FAFD;
  --surface-2:#EAF0F6;
  --ink:#22272D;
  --ink-soft:#4C5665;
  --accent:#6E2328;
  --accent-deep:#5A1B20;
  --accent-soft:#F2DFE1;
  --on-accent:#FFFFFF;
  --rose:#8A3A3F;
  --rose-soft:#F2DFE1;
  --line:#C6D3E0;
  --planer:#FBFDFF;
  --planer-line:#B7C6D6;
  --planer-heute:#F3DFE1;
  --ok:#2F5F47;
  --ok-soft:#DAE9E0;
  --off:#B03214;
  --off-soft:#F9E1D8;
  --wait:#7D5905;
  --wait-soft:#F7EBC7;
  --warn:#9C2C17;
  --warn-soft:#F6DED6;
  --alert:#8F4E0D;
  --alert-soft:#F9E9D5;
  --danger:#B03214;
  --alert-fill:#D4850B;
  --shadow:0 1px 2px rgba(40,52,68,.07), 0 10px 26px rgba(40,52,68,.10);
  --shadow-lift:0 4px 10px rgba(40,52,68,.16), 0 12px 26px rgba(40,52,68,.13);
}
/* Vanille & Mint - so hat Evi es gewollt: simpel, einladend, hell und
   pastell, nicht ueberladen. Cremige Vanille traegt die Seite, die Karten
   sind fast weiss, alles Aktive in zartem Mint, ein Hauch Pfirsich im
   Licht dahinter. Das Mint ist zu hell fuer weisse Schrift, darum steht auf
   gefuellten Knoepfen dunkles Tannengruen (wie Schrift auf Silber bei
   Zentivo). Kontraste gerechnet: Schrift auf Grund 12 : 1, leise Schrift
   auf Karte 5,6 : 1, Schrift auf Mint 6,2 : 1, tiefes Mint auf Karte 6,3 : 1. */
:root[data-theme="vanille"]{
  --ground:#FAF6EF;
  --ground-rgb:250,246,239;
  --ground-2:#F2ECE1;
  --surface:#FFFDFA;
  --surface-2:#F6F1E8;
  --ink:#2F3431;
  --ink-soft:#616865;
  --accent:#86C5AE;
  --accent-deep:#2F6B57;
  --accent-soft:#E3F3EC;
  --on-accent:#1E3B31;
  --rose:#F3B99C;
  --rose-soft:#FCE9DE;
  --line:#EDE5D8;
  --planer:#FFFDFA;
  --planer-line:#E2D8C8;
  --planer-heute:#E6F4EE;
  --warn:#A0402C;
  --warn-soft:#FBE3DA;
  --ok:#3A7358;
  --ok-soft:#E1F1E7;
  --alert:#8E5B17;
  --alert-soft:#FBEBD5;
  --danger:#B23A24;
  --alert-fill:#E0A246;
  --wait:#7E5E10;
  --wait-soft:#FAEDCB;
  --off:#B23A24;
  --off-soft:#FBE4DD;
  --shadow:0 1px 2px rgba(80,70,50,.05), 0 10px 26px rgba(80,70,50,.07);
  --shadow-lift:0 4px 10px rgba(80,70,50,.10), 0 12px 26px rgba(80,70,50,.08);
}
/* Nebelgruen & Petrol - so hat Evi es gewollt: hell und pastell wie
   Vanille & Mint, aber mit einem dunklen, gedeckten Akzent, den man gut
   sieht, ohne dass er knallt. Ein kuehles Nebelgruen traegt die Seite, die
   Karten sind fast weiss, alles Aktive in tiefem Petrol, ein Hauch Altrosa
   im Licht dahinter. Kontraste gerechnet: Schrift auf Grund 13 : 1, leise
   Schrift auf Karte 6,2 : 1, Petrol auf Karte 7,1 : 1, Weiss auf Petrol
   7,3 : 1, die Zustaende je ueber 5 : 1. */
/* Creme & Waldgruen (Kennung 'creme', war als "Zentivo" und "MyLifeBase"
   der Standard, bis Evi das blaue Logo wollte) - so hat Evi es gewollt: in den Farben des neuen
   Logos. Creme-Beige traegt die Seite (#F1EBE1), die Karten sind ein
   helleres Creme, alles Aktive in dunklem Waldgruen (#2A302B, Schrift darauf
   in Creme), Text im Akzent und die leisen Toene in Olivgrau (#3A3A2C), ein
   Hauch Oliv-Gold wie das Z im Licht dahinter. Kontraste gerechnet: Schrift
   auf Grund 12,2 : 1, leise Schrift auf Karte 6,4 : 1, Waldgruen auf Karte
   12,7 : 1, Creme auf Waldgruen 11,4 : 1, Olivgrau auf Karte 10,9 : 1, die
   Zustaende je ueber 5 : 1. */
:root[data-theme="creme"]{
  --ground:#F1EBE1;
  --ground-rgb:241,235,225;
  --ground-2:#E8E0D3;
  --surface:#FBF8F2;
  --surface-2:#F4EFE6;
  --ink:#262B27;
  --ink-soft:#5C5C4A;
  --accent:#2A302B;
  --accent-deep:#3A3A2C;
  --accent-soft:#E4E2D3;
  --on-accent:#F1EBE1;
  --rose:#B3AC8A;
  --rose-soft:#ECE6D8;
  --line:#E2DACB;
  --planer:#FBF8F2;
  --planer-line:#D3CABA;
  --planer-heute:#E6E4D5;
  --warn:#9E3F2C;
  --warn-soft:#F8E1DA;
  --ok:#3A6E55;
  --ok-soft:#E0EFE6;
  --alert:#8A5818;
  --alert-soft:#F7E9D4;
  --danger:#A93A28;
  --alert-fill:#D9A04A;
  --wait:#7A5A12;
  --wait-soft:#F6EBCB;
  --off:#A93A28;
  --off-soft:#F8E3DD;
  --shadow:0 1px 2px rgba(42,48,43,.06), 0 10px 26px rgba(42,48,43,.08);
  --shadow-lift:0 4px 10px rgba(42,48,43,.12), 0 12px 26px rgba(42,48,43,.09);
}
:root[data-theme="petrol"]{
  --ground:#EFF3F1;
  --ground-rgb:239,243,241;
  --ground-2:#E3EAE7;
  --surface:#FBFCFB;
  --surface-2:#F1F5F3;
  --ink:#1F2A2A;
  --ink-soft:#55625C;
  --accent:#2F5D62;
  --accent-deep:#244A4E;
  --accent-soft:#DDEBEA;
  --on-accent:#FFFFFF;
  --rose:#C9A99A;
  --rose-soft:#F3E7E1;
  --line:#DCE5E1;
  --planer:#FBFCFB;
  --planer-line:#CBD7D2;
  --planer-heute:#DDEBEA;
  --warn:#9E3F2C;
  --warn-soft:#F8E1DA;
  --ok:#3A6E55;
  --ok-soft:#E0EFE6;
  --alert:#8A5818;
  --alert-soft:#F7E9D4;
  --danger:#A93A28;
  --alert-fill:#D9A04A;
  --wait:#7A5A12;
  --wait-soft:#F6EBCB;
  --off:#A93A28;
  --off-soft:#F8E3DD;
  --shadow:0 1px 2px rgba(30,50,48,.05), 0 10px 26px rgba(30,50,48,.07);
  --shadow-lift:0 4px 10px rgba(30,50,48,.10), 0 12px 26px rgba(30,50,48,.08);
}
/* Navy & Silber (Kennung bleibt 'terra', damit eine schon getroffene Wahl
   weiter gilt): tiefes Navy traegt die Seite, die Karten liegen eine Spur
   heller im selben Blau darauf, alles Aktive in ruhigem Silber statt des
   frueheren Terrakottas - so hat Evi es gewollt. Statusfarben fuer den
   dunklen Grund aufgehellt. Kontraste gerechnet: Schrift auf Grund 14 : 1,
   leise Schrift auf Karte 6,2 : 1, Silber auf Karte 8,5 : 1, Schrift auf
   Silber 11,2 : 1, die drei Zustaende je ueber 7,5 : 1. */
:root[data-theme="terra"]{
  --ground:#1A2132;
  --ground-rgb:26,33,50;
  --ground-2:#141A28;
  --surface:#243049;
  --surface-2:#2D3A55;
  --ink:#EEF1F5;
  --ink-soft:#A9B3C2;
  --accent:#C9D0DA;
  --accent-deep:#E8ECF1;
  --accent-soft:#303D57;
  --on-accent:#141A28;
  --rose:#9AA6B6;
  --rose-soft:#2A3650;
  --line:#35415B;
  --planer:#243049;
  --planer-line:#45516C;
  --planer-heute:#303D57;
  --ok:#9BE3BC;
  --ok-soft:#17352A;
  --off:#FFB3A6;
  --off-soft:#3B211E;
  --wait:#F6D689;
  --wait-soft:#3A3118;
  --warn:#FFB3A6;
  --warn-soft:#3B211E;
  --alert:#F6D689;
  --alert-soft:#3A3118;
  --danger:#FF9B8A;
  --on-danger:#2A1510;
  --alert-fill:#6B4E0A;
  --shadow:0 1px 2px rgba(0,0,0,.32), 0 10px 26px rgba(0,0,0,.36);
  --shadow-lift:0 4px 10px rgba(0,0,0,.44), 0 12px 26px rgba(0,0,0,.38);
}


/* Das achte Design: Anthrazitgrau traegt die Seite, die Karten liegen eine
   Spur heller darauf wie Graphit, und alles Aktive kommt in Taubenblau -
   einem weichen, leicht graustichigen Blau. Jedes Paar ist gerechnet. */
:root[data-theme="anthrazit"]{
  --ground:#2E3238;
  --ground-rgb:46,50,56;
  --ground-2:#262A2F;
  --surface:#383D44;
  --surface-2:#434952;
  --ink:#EDEFF2;
  --ink-soft:#B3BAC4;
  --accent:#93AEC9;
  --accent-deep:#B6CBE0;
  --accent-soft:#2C3A48;
  --on-accent:#18202A;
  --rose:#93AEC9;
  --rose-soft:#2C3A48;
  --line:#4A515B;
  --planer:#434952;
  --planer-line:#626A76;
  --planer-heute:#31485F;
  --ok:#7FD6A2;
  --ok-soft:#1D3A2B;
  --off:#FF9082;
  --off-soft:#3B211E;
  --wait:#F0C96B;
  --wait-soft:#3A3118;
  --warn:#FF9082;
  --warn-soft:#3B211E;
  --alert:#F0C96B;
  --alert-soft:#3A3118;
  --danger:#FF7A67;
  --on-danger:#2A1512;
  --alert-fill:#6B4E0A;
  --shadow:0 1px 2px rgba(0,0,0,.28), 0 10px 26px rgba(0,0,0,.32);
  --shadow-lift:0 4px 10px rgba(0,0,0,.40), 0 12px 26px rgba(0,0,0,.34);
}

/* Glas & Nebel (Kennung 'glas') - so hat Evi es gewollt: die ganze App
   aus Glas, nach ihrer Vorlage "Liquid Glass". Karten, Leisten und Boegen
   sind durchscheinend (--surface mit wenig Deckkraft) und liegen ueber
   einem dunklen Grund mit Bergen am Meer im Nebel; verwischt und mit Licht
   an den Kanten wird in css/19-glas.css. Alles Aktive in hellem Eisblau.
   Kontraste gerechnet auf dem Glas, wie es ueber dem Grund wirkt (rund
   #25343C): Schrift 13 : 1, leise Schrift 7 : 1, Eisblau 11 : 1, Schrift
   auf Eisblau 13 : 1, die drei Zustaende je ueber 7 : 1. */
:root[data-theme="glas"]{
  --ground:#0F1C23;
  --ground-rgb:15,28,35;
  --ground-2:#15252E;
  --surface:rgba(255,255,255,.085);
  --surface-2:rgba(255,255,255,.055);
  --ink:#F2F7F9;
  --ink-soft:#B4C6CF;
  --accent:#CFEAF2;
  --accent-deep:#E2F4F9;
  --accent-soft:rgba(191,228,239,.17);
  --on-accent:#0C1D25;
  --rose:#8FB8C8;
  --rose-soft:rgba(143,184,200,.14);
  --line:rgba(255,255,255,.15);
  --planer:rgba(255,255,255,.07);
  --planer-line:rgba(255,255,255,.22);
  --planer-heute:rgba(191,228,239,.16);
  --ok:#9BE3BC;
  --ok-soft:rgba(120,210,160,.17);
  --off:#FFB3A6;
  --off-soft:rgba(255,150,130,.17);
  --wait:#F6D689;
  --wait-soft:rgba(240,200,110,.16);
  --warn:#FFB3A6;
  --warn-soft:rgba(255,150,130,.17);
  --alert:#F6D689;
  --alert-soft:rgba(240,200,110,.16);
  --danger:#FF9B8A;
  --on-danger:#2A1510;
  --alert-fill:#6B4E0A;
  --shadow:0 1px 2px rgba(0,0,0,.22), 0 12px 30px rgba(0,0,0,.28);
  --shadow-lift:0 4px 10px rgba(0,0,0,.34), 0 16px 34px rgba(0,0,0,.32);
}

/* Native Datums- und Uhrzeitfelder, Listen und Rollbalken ziehen mit. */
:root[data-theme="zentivo"],
:root[data-theme="nacht"],
:root[data-theme="anthrazit"],
:root[data-theme="terra"],
:root[data-theme="glas"]{ color-scheme: dark; }
/* Das Logo bringt seine eigene helle Scheibe mit. Auf dunklem Grund darf sie
   nicht multipliziert werden - sonst verschwindet das Logo im Schwarz. */
:root[data-theme="zentivo"] .logo,
:root[data-theme="nacht"] .logo,
:root[data-theme="anthrazit"] .logo,
:root[data-theme="terra"] .logo,
:root[data-theme="glas"] .logo{
  mix-blend-mode:normal;
  filter:drop-shadow(0 3px 12px rgba(0,0,0,.5));
}

/* MyLifeBase, der Standard (Kennung 'weiss') - so hat Evi es gewollt: Weiss
   als Hintergrund, die Blautoene des blauen Logos als Akzente. Die Seite
   und die Karten sind weiss, Karten heben sich durch feinen Rand und
   Schatten ab, vertiefte Felder liegen auf einem kuehlen Hauch Blau
   (#F3F5F9). Alles Aktive in Navy wie der Grund des Logos (#26324A, Schrift
   darauf weiss), Text im Akzent in Stahlblau (#34507A), im Licht dahinter
   das Hellblau von "Base" (#93A7C2). Kontraste gerechnet: Schrift auf Grund
   15,7 : 1, leise Schrift auf Weiss 6,3 : 1 (auf #F3F5F9 5,7 : 1), Navy auf
   Weiss und Weiss auf Navy 12,8 : 1, Stahlblau auf Weiss 8,2 : 1, die
   Zustaende je ueber 5,9 : 1. */
:root[data-theme="weiss"]{
  --ground:#FFFFFF;
  --ground-rgb:255,255,255;
  --ground-2:#F1F4F8;
  --surface:#FFFFFF;
  --surface-2:#F3F5F9;
  --ink:#1B2333;
  --ink-soft:#56607A;
  --accent:#26324A;
  --accent-deep:#34507A;
  --accent-soft:#E6ECF4;
  --on-accent:#FFFFFF;
  --rose:#93A7C2;
  --rose-soft:#EEF2F7;
  --line:#E2E7EF;
  --planer:#FFFFFF;
  --planer-line:#D5DCE7;
  --planer-heute:#E6ECF4;
  --warn:#9E3F2C;
  --warn-soft:#F8E1DA;
  --ok:#3A6E55;
  --ok-soft:#E0EFE6;
  --alert:#8A5818;
  --alert-soft:#F7E9D4;
  --danger:#A93A28;
  --alert-fill:#D9A04A;
  --wait:#7A5A12;
  --wait-soft:#F6EBCB;
  --off:#A93A28;
  --off-soft:#F8E3DD;
  --shadow:0 1px 2px rgba(29,39,58,.06), 0 10px 26px rgba(29,39,58,.08);
  --shadow-lift:0 4px 10px rgba(29,39,58,.12), 0 12px 26px rgba(29,39,58,.09);
}