/* =============================================================
 * Plenum · themes.css
 *
 * Zehn Anmeldebilder.
 *
 * Wer mehrere Spaces betreut, verwechselt sie. Ein sichtbar
 * anderes Anmeldebild ist die billigste Abhilfe: Man sieht schon
 * vor dem Anmelden, wo man ist.
 *
 * ## Aufbau
 *
 * Jedes Theme setzt nur Variablen. Die Gestaltungsregeln stehen
 * einmal in anmeldung.css -- dort steht keine einzige Farbe.
 * Zehnmal dieselben Regeln von Hand zu schreiben hiesse, sie
 * neunmal falsch zu aendern.
 *
 * ## Warum jedes Theme den vollen Satz setzt
 *
 * Ein Theme, das nur die Unterschiede zur Voreinstellung setzt,
 * erbt den Rest -- und genau das war der Fehler der ersten
 * Fassung: gruene Karte, blauer Grund. Deshalb steht in jedem
 * der zehn Bloecke jede Farbe, auch wenn sie zufaellig gleich
 * ist. Das ist mehr Text und weniger Aerger.
 *
 * ## Wo die Werte gelten
 *
 * Die Bloecke haengen an [data-theme], nicht an :root. Damit
 * traegt auch ein einzelnes Element sein Theme -- die
 * Farbfelder und Kartenstreifen in der Spaces-Uebersicht
 * benutzen genau das.
 *
 * Wird nach dunkel.css und vor anmeldung.css geladen.
 * ============================================================= */

/* -------------------------------------------------------------
 * 0 · Form, nicht Farbe
 *
 * Was fast alle teilen. Farben stehen hier nur fuer die
 * Fehlermeldung -- sie muss auch dann lesbar sein, wenn ein
 * Theme sie vergisst; die vier hellen Themes setzen sie eigens.
 * ----------------------------------------------------------- */
:root,
[data-theme] {
  --t-schrift:        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      "Helvetica Neue", Arial, sans-serif;
  --t-schrift-titel:  var(--t-schrift);
  --t-schrift-ueber:  var(--t-schrift);
  --t-titel-fett:     760;
  --t-titel-sperr:    -.035em;
  --t-ueber-sperr:    .18em;

  --t-muster:         none;
  --t-muster-groesse: 42px 42px;
  --t-muster-maske:   linear-gradient(to bottom, rgba(0,0,0,.65), transparent 72%);
  --t-schimmer-deck:  .28;

  --t-rand-breite:        1px;
  --t-rundung:            24px;
  --t-feld-rundung:       14px;
  --t-strich-rundung:     99px;
  --t-plaettchen-rundung: 20px;

  --t-karte-blur:          0px;
  --t-karte-schatten:      0 28px 80px rgba(0,0,0,.28);
  --t-plaettchen-schatten: 0 14px 32px rgba(0,0,0,.18);
  --t-akzent-schatten:     none;

  --t-faden-deck: .92;
  --t-welle-deck: 0;

  --t-plaettchen-text:  var(--t-text);
  --t-plaettchen-still: var(--t-still);

  --t-fehler-rand:  rgba(255,138,128,.45);
  --t-fehler-grund: rgba(120,26,20,.35);
  --t-fehler-text:  #ffc9c4;
}

/* -------------------------------------------------------------
 * 1 · Tiefsee -- die Voreinstellung
 *
 * Der zweite Selektor faengt den Fall ab, dass noch kein Theme
 * gesetzt ist: vor dem ersten Skriptlauf, und auf der nackten
 * Domain, wo es keinen Space gibt.
 * ----------------------------------------------------------- */
:root:not([data-theme]),
[data-theme="tiefsee"] {
  --t-grund:
    radial-gradient(circle at 17% 22%, rgba(47,125,255,.18), transparent 30%),
    radial-gradient(circle at 84% 28%, rgba(45,231,255,.12), transparent 26%),
    radial-gradient(circle at 67% 80%, rgba(124,61,255,.12), transparent 30%),
    linear-gradient(135deg, #021226 0%, #05214b 55%, #03172f 100%);
  --t-muster:
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  --t-schimmer-a: #0fcfff;
  --t-schimmer-b: #6f49ff;

  --t-text:       #f7fbff;
  --t-still:      #b8c7dc;
  --t-ueberzeile: #67dcff;
  --t-titel:      #ffffff;
  --t-titel-hervor: linear-gradient(90deg, #59a7ff 0%, #2ae2ff 55%, #a772ff 100%);
  --t-strich:     linear-gradient(90deg, #8b43ff, #35e8ff);

  --t-karte:      linear-gradient(180deg, rgba(17,54,105,.64), rgba(8,26,59,.82));
  --t-karte-rand: rgba(106,180,255,.68);
  --t-karte-blur: 22px;
  --t-rundung:    28px;

  --t-feld:      rgba(3,24,55,.54);
  --t-feld-rand: rgba(124,187,255,.5);
  --t-feld-voll: #0a2144;
  --t-fokus-ring: rgba(56,215,255,.16);

  --t-akzent:     linear-gradient(90deg, #1B6FD0, #2264DE 52%, #7A2ED8);
  --t-akzenttext: #ffffff;
  --t-akzent-schatten: 0 16px 30px rgba(48,110,255,.22);

  --t-plaettchen:      linear-gradient(180deg, rgba(8,45,90,.85), rgba(4,27,57,.84));
  --t-plaettchen-rand: rgba(80,197,255,.46);

  --t-faden-a: #4de8ff; --t-faden-b: #4778ff; --t-faden-c: #8c4cff;
  --t-welle-deck: .7;
}

/* -------------------------------------------------------------
 * 2 · Nordlicht -- fast schwarz, Licht am Horizont
 *
 * Statt zweier Lichtkugeln ein flaches Band. Das ist der ganze
 * Unterschied im Aufbau, und er genuegt.
 * ----------------------------------------------------------- */
[data-theme="nordlicht"] {
  --t-grund: linear-gradient(180deg, #01060d 0%, #041420 58%, #021018 100%);
  --t-muster: none;
  --t-schimmer-a: linear-gradient(95deg, transparent 4%, rgba(64,255,170,.55) 34%,
                                  rgba(80,200,255,.4) 62%, transparent 94%);
  --t-schimmer-b: transparent;
  --t-schimmer-deck: .5;

  --t-text:       #e6fff6;
  --t-still:      #8fc4b3;
  --t-ueberzeile: #46ecb3;
  --t-titel:      #eafff8;
  --t-titel-hervor: linear-gradient(90deg, #17c98a, #3ad9ff);
  --t-strich:     linear-gradient(90deg, #17c98a, #3ad9ff);

  --t-karte:      rgba(4,22,32,.8);
  --t-karte-rand: rgba(70,236,179,.32);
  --t-karte-blur: 18px;
  --t-rundung:    16px;

  --t-feld:      rgba(2,14,20,.8);
  --t-feld-rand: rgba(70,236,179,.25);
  --t-feld-voll: #04141c;
  --t-fokus-ring: rgba(70,236,179,.16);

  --t-akzent:     linear-gradient(120deg, #17c98a, #0f8fb8);
  --t-akzenttext: #02150f;
  --t-akzent-schatten: 0 16px 30px rgba(23,201,138,.18);

  --t-plaettchen:      rgba(4,22,32,.85);
  --t-plaettchen-rand: rgba(70,236,179,.28);

  --t-faden-a: #46ecb3; --t-faden-b: #2fd0d8; --t-faden-c: #1f9fd6;
  --t-welle-deck: 0;
}
/* Das Lichtband liegt flach am Horizont, nicht als Kugel. */
[data-theme="nordlicht"] .anmelde-schimmer--a {
  width: 150%;
  height: 26%;
  left: -25%;
  top: 12%;
  border-radius: 0;
  filter: blur(70px);
}
[data-theme="nordlicht"] .anmelde-schimmer--b { display: none; }

/* -------------------------------------------------------------
 * 3 · Graphit -- ohne Schmuck
 *
 * Kein Verlauf, kein Schimmer, kein Faden, keine Welle, rechte
 * Winkel. Fuer Leute, denen all das im Weg ist. Der Knopf ist
 * hell auf dunkel -- die einzige Farbe der Seite.
 * ----------------------------------------------------------- */
[data-theme="graphit"] {
  --t-grund: #17191c;
  --t-muster: none;
  --t-schimmer-a: transparent;
  --t-schimmer-b: transparent;
  --t-schimmer-deck: 0;

  --t-text:       #e8e8ea;
  --t-still:      #9a9ca1;
  --t-ueberzeile: #b6b9bf;
  --t-schrift-ueber: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-ueber-sperr: .24em;
  --t-titel:      #f4f4f6;
  --t-titel-hervor: #9a9ca1;
  --t-titel-fett: 600;
  --t-titel-sperr: -.02em;
  --t-strich:     #3d4148;
  --t-strich-rundung: 0;

  --t-karte:      #1f2226;
  --t-karte-rand: rgba(255,255,255,.12);
  --t-karte-blur: 0px;
  --t-karte-schatten: none;
  --t-rundung:    4px;
  --t-feld-rundung: 3px;
  --t-plaettchen-rundung: 3px;

  --t-feld:      #141619;
  --t-feld-rand: rgba(255,255,255,.14);
  --t-feld-voll: #141619;
  --t-fokus-ring: rgba(255,255,255,.1);

  --t-akzent:     #e8e8ea;
  --t-akzenttext: #17191c;
  --t-akzent-schatten: none;

  --t-plaettchen:      #1f2226;
  --t-plaettchen-rand: rgba(255,255,255,.1);
  --t-plaettchen-schatten: none;

  --t-faden-a: #3d4148; --t-faden-b: #3d4148; --t-faden-c: #3d4148;
  --t-faden-deck: 0;
  --t-welle-deck: 0;
}

/* -------------------------------------------------------------
 * 4 · Wald -- tiefes Gruen, warmes Licht
 *
 * Das Licht kommt von unten links, der Akzent ist Gold. Die
 * Schlagzeile steht in einer Serifenschrift: Sie nimmt dem
 * Dunkelgruen das Technische.
 * ----------------------------------------------------------- */
[data-theme="wald"] {
  --t-grund:
    radial-gradient(90% 80% at 18% 92%, rgba(60,140,95,.35) 0%, transparent 58%),
    linear-gradient(160deg, #07231a 0%, #0b3325 55%, #061c15 100%);
  --t-muster: none;
  --t-schimmer-a: #7bd6a0;
  --t-schimmer-b: #e0b25c;
  --t-schimmer-deck: .22;

  --t-text:       #eef7ef;
  --t-still:      #a9c4b2;
  --t-ueberzeile: #e3b96a;
  --t-schrift-titel: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --t-titel:      #f3faf3;
  --t-titel-hervor: linear-gradient(90deg, #7fd6a0, #e0b25c);
  --t-titel-fett: 600;
  --t-titel-sperr: -.015em;
  --t-strich:     linear-gradient(90deg, #35996a, #d4a24a);

  --t-karte:      rgba(9,41,30,.78);
  --t-karte-rand: rgba(160,214,180,.3);
  --t-karte-blur: 18px;
  --t-rundung:    26px;

  --t-feld:      rgba(5,28,21,.72);
  --t-feld-rand: rgba(160,214,180,.28);
  --t-feld-voll: #082a1f;
  --t-fokus-ring: rgba(227,185,106,.18);

  --t-akzent:     linear-gradient(120deg, #35996a, #d4a24a);
  --t-akzenttext: #06231a;
  --t-akzent-schatten: 0 16px 30px rgba(53,153,106,.2);

  --t-plaettchen:      rgba(10,48,34,.82);
  --t-plaettchen-rand: rgba(160,214,180,.26);

  --t-faden-a: #9ad9b0; --t-faden-b: #d4a24a; --t-faden-c: #b98a34;
  --t-welle-deck: .4;
}

/* -------------------------------------------------------------
 * 5 · Bordeaux -- Weinrot mit Kupfer
 *
 * Eine Vignette statt eines Rasters, harte Kanten, weit
 * gesperrte Ueberzeilen, Serifen. Wirkt wie ein Briefkopf.
 * ----------------------------------------------------------- */
[data-theme="bordeaux"] {
  --t-grund: radial-gradient(130% 110% at 50% -10%, #4a1120 0%, #2a0a14 52%, #17050b 100%);
  --t-muster: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(0,0,0,.55) 100%);
  --t-muster-groesse: cover;
  --t-muster-maske: none;
  --t-schimmer-a: #c9763f;
  --t-schimmer-b: transparent;
  --t-schimmer-deck: .18;

  --t-text:       #f6e9e6;
  --t-still:      #c9a9a6;
  --t-ueberzeile: #d9a05f;
  --t-ueber-sperr: .3em;
  --t-schrift-titel: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --t-titel:      #fbeee9;
  --t-titel-hervor: #d9a05f;
  --t-titel-fett: 600;
  --t-titel-sperr: -.01em;
  --t-strich:     linear-gradient(90deg, #8e1f33, #d9a05f);
  --t-strich-rundung: 0;

  --t-karte:      rgba(42,12,20,.82);
  --t-karte-rand: rgba(217,160,95,.42);
  --t-karte-blur: 14px;
  --t-rundung:    6px;
  --t-feld-rundung: 4px;
  --t-plaettchen-rundung: 4px;

  --t-feld:      rgba(23,5,11,.7);
  --t-feld-rand: rgba(217,160,95,.3);
  --t-feld-voll: #23070d;
  --t-fokus-ring: rgba(217,160,95,.18);

  --t-akzent:     linear-gradient(120deg, #8e1f33, #c9763f);
  --t-akzenttext: #fff4ec;
  --t-akzent-schatten: 0 16px 30px rgba(142,31,51,.24);

  --t-plaettchen:      rgba(46,14,23,.86);
  --t-plaettchen-rand: rgba(217,160,95,.3);

  --t-faden-a: #d9a05f; --t-faden-b: #c9763f; --t-faden-c: #8e1f33;
  --t-welle-deck: 0;
}
[data-theme="bordeaux"] .anmelde-schimmer--b { display: none; }

/* -------------------------------------------------------------
 * 6 · Schiefer -- Blaupause
 *
 * Sichtbares Raster, zwei Pixel Kante, Schreibmaschinenschrift
 * fuer alles Beschriftende. Der Faden verliert sein Leuchten --
 * hier glimmt nichts.
 * ----------------------------------------------------------- */
[data-theme="schiefer"] {
  --t-grund: linear-gradient(180deg, #16242c 0%, #101b21 100%);
  --t-muster:
    linear-gradient(rgba(120,220,230,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,220,230,.07) 1px, transparent 1px);
  --t-muster-groesse: 28px 28px;
  --t-muster-maske: none;
  --t-schimmer-a: transparent;
  --t-schimmer-b: transparent;
  --t-schimmer-deck: 0;

  --t-text:       #e3f1f4;
  --t-still:      #90aab2;
  --t-ueberzeile: #4fd6d0;
  --t-schrift-ueber: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --t-ueber-sperr: .22em;
  --t-titel:      #f0fafc;
  --t-titel-hervor: #4fd6d0;
  --t-titel-fett: 650;
  --t-titel-sperr: -.025em;
  --t-strich:     #4fd6d0;
  --t-strich-rundung: 0;

  --t-karte:      #1a2c35;
  --t-karte-rand: #2f4b56;
  --t-karte-blur: 0px;
  --t-karte-schatten: none;
  --t-rand-breite: 2px;
  --t-rundung:    2px;
  --t-feld-rundung: 2px;
  --t-plaettchen-rundung: 2px;

  --t-feld:      #132029;
  --t-feld-rand: #2f4b56;
  --t-feld-voll: #132029;
  --t-fokus-ring: rgba(79,214,208,.16);

  --t-akzent:     #27a8a2;
  --t-akzenttext: #06171a;
  --t-akzent-schatten: none;

  --t-plaettchen:      #1a2c35;
  --t-plaettchen-rand: #2f4b56;
  --t-plaettchen-schatten: none;

  --t-faden-a: #4fd6d0; --t-faden-b: #3b9aa8; --t-faden-c: #2f4b56;
  --t-faden-deck: .6;
  --t-welle-deck: 0;
}
[data-theme="schiefer"] .anmelde-faden path,
[data-theme="schiefer"] .anmelde-faden g { filter: none; }

/* -------------------------------------------------------------
 * 7 · Papier -- helles Creme, Serifen
 *
 * Feine Linien wie auf Briefpapier, die Karte liegt mit echtem
 * Schatten darauf. Der Knopf ist Druckerschwaerze.
 * ----------------------------------------------------------- */
[data-theme="papier"] {
  --t-grund: linear-gradient(180deg, #f8f4ea 0%, #f2ece0 100%);
  --t-muster: repeating-linear-gradient(180deg, rgba(60,50,30,.05) 0 1px, transparent 1px 32px);
  --t-muster-groesse: auto;
  --t-muster-maske: none;
  --t-schimmer-a: transparent;
  --t-schimmer-b: transparent;
  --t-schimmer-deck: 0;

  --t-schrift:    Georgia, "Iowan Old Style", "Times New Roman", serif;
  --t-text:       #232019;
  --t-still:      #6b6558;
  --t-ueberzeile: #8a6d3a;
  --t-ueber-sperr: .26em;
  --t-titel:      #171410;
  --t-titel-hervor: #8a6d3a;
  --t-titel-fett: 600;
  --t-titel-sperr: -.015em;
  --t-strich:     #8a6d3a;
  --t-strich-rundung: 0;

  --t-karte:      #fffdf8;
  --t-karte-rand: #ddd4c2;
  --t-karte-blur: 0px;
  --t-karte-schatten: 0 18px 44px rgba(70,58,34,.14);
  --t-rundung:    3px;
  --t-feld-rundung: 2px;
  --t-plaettchen-rundung: 2px;

  --t-feld:      #fffdf8;
  --t-feld-rand: #cfc5b1;
  --t-feld-voll: #fffdf8;
  --t-fokus-ring: rgba(138,109,58,.18);

  --t-akzent:     #2e2a22;
  --t-akzenttext: #f8f4ea;
  --t-akzent-schatten: 0 10px 24px rgba(46,42,34,.22);

  --t-plaettchen:      #fffdf8;
  --t-plaettchen-rand: #e2dacb;
  --t-plaettchen-schatten: 0 10px 26px rgba(70,58,34,.1);

  --t-faden-a: #b8a884; --t-faden-b: #cbbd9c; --t-faden-c: #ddd4c2;
  --t-faden-deck: .8;
  --t-welle-deck: 0;

  --t-fehler-rand:  #c0392b;
  --t-fehler-grund: #fbeceb;
  --t-fehler-text:  #8c2018;
}
[data-theme="papier"] .anmelde-faden path,
[data-theme="papier"] .anmelde-faden g { filter: none; }

/* -------------------------------------------------------------
 * 8 · Sand -- warmes Beige mit Olivgruen
 *
 * Feine Punkte, grosse Rundungen. Das freundlichste der zehn.
 * ----------------------------------------------------------- */
[data-theme="sand"] {
  --t-grund: linear-gradient(160deg, #f5ecd9 0%, #eadcc2 58%, #e3d6ba 100%);
  --t-muster: radial-gradient(rgba(90,80,50,.1) 1px, transparent 1px);
  --t-muster-groesse: 18px 18px;
  --t-muster-maske: none;
  --t-schimmer-a: #b9c17a;
  --t-schimmer-b: #e0c68a;
  --t-schimmer-deck: .32;

  --t-text:       #2f2c20;
  --t-still:      #6f6a55;
  --t-ueberzeile: #6b7a34;
  --t-titel:      #262418;
  --t-titel-hervor: linear-gradient(90deg, #6b7a34, #b08a3c);
  --t-titel-fett: 700;
  --t-titel-sperr: -.03em;
  --t-strich:     linear-gradient(90deg, #6b7a34, #b08a3c);

  --t-karte:      rgba(255,252,244,.88);
  --t-karte-rand: rgba(150,140,110,.35);
  --t-karte-blur: 10px;
  --t-karte-schatten: 0 20px 45px rgba(90,80,50,.14);
  --t-rundung:    24px;
  --t-feld-rundung: 16px;
  --t-plaettchen-rundung: 22px;

  --t-feld:      rgba(255,253,246,.9);
  --t-feld-rand: rgba(150,140,110,.32);
  --t-feld-voll: #fffdf6;
  --t-fokus-ring: rgba(107,122,52,.18);

  --t-akzent:     linear-gradient(120deg, #6b7a34, #9a8b3c);
  --t-akzenttext: #fdfbf3;
  --t-akzent-schatten: 0 14px 30px rgba(107,122,52,.22);

  --t-plaettchen:      rgba(255,252,244,.92);
  --t-plaettchen-rand: rgba(150,140,110,.3);
  --t-plaettchen-schatten: 0 12px 28px rgba(90,80,50,.12);

  --t-faden-a: #9aa85a; --t-faden-b: #c2a862; --t-faden-c: #8a7a3a;
  --t-welle-deck: .25;

  --t-fehler-rand:  #b8452f;
  --t-fehler-grund: #f9e7e1;
  --t-fehler-text:  #8a2f1f;
}
[data-theme="sand"] .anmelde-welle svg { filter: hue-rotate(50deg) saturate(.5); }

/* -------------------------------------------------------------
 * 9 · Terrakotta -- gebrannter Ton
 *
 * Oben rechts steht eine Sonne. Die Plaettchen sind volle
 * Kacheln statt Glas -- das dreht das Verhaeltnis von hell und
 * dunkel um und macht das Theme auf einen Blick erkennbar.
 * ----------------------------------------------------------- */
[data-theme="terrakotta"] {
  --t-grund:
    radial-gradient(60% 55% at 84% 10%, rgba(226,104,60,.45) 0%, transparent 60%),
    linear-gradient(170deg, #fbeade 0%, #f3d8c6 58%, #eecbb4 100%);
  --t-muster: none;
  --t-schimmer-a: #e2683c;
  --t-schimmer-b: #f2b183;
  --t-schimmer-deck: .22;

  --t-text:       #3a1f14;
  --t-still:      #7e5a48;
  --t-ueberzeile: #c2502a;
  --t-titel:      #2e1810;
  --t-titel-hervor: #c2502a;
  --t-titel-fett: 800;
  --t-titel-sperr: -.045em;
  --t-strich:     #c2502a;

  --t-karte:      rgba(255,246,239,.9);
  --t-karte-rand: rgba(194,80,42,.28);
  --t-karte-blur: 12px;
  --t-karte-schatten: 0 22px 50px rgba(120,60,30,.16);
  --t-rundung:    20px;
  --t-feld-rundung: 12px;
  --t-plaettchen-rundung: 16px;

  --t-feld:      #fffaf6;
  --t-feld-rand: rgba(194,80,42,.25);
  --t-feld-voll: #fffaf6;
  --t-fokus-ring: rgba(194,80,42,.18);

  --t-akzent:     linear-gradient(120deg, #d9542b, #f08a3c);
  --t-akzenttext: #fff6ef;
  --t-akzent-schatten: 0 16px 32px rgba(217,84,43,.26);

  --t-plaettchen:      #c2502a;
  --t-plaettchen-rand: rgba(255,255,255,.28);
  --t-plaettchen-text: #fff5ee;
  --t-plaettchen-still: #f5cdb9;
  --t-plaettchen-schatten: 0 14px 30px rgba(120,60,30,.2);

  --t-faden-a: #d9542b; --t-faden-b: #e2683c; --t-faden-c: #f2b183;
  --t-welle-deck: 0;

  --t-fehler-rand:  #a8341f;
  --t-fehler-grund: #fae3da;
  --t-fehler-text:  #7d2414;
}
/* Auf der vollen Kachel braucht das Zeichen die Kachelschrift,
   nicht die Akzentfarbe -- sonst steht Rot auf Rot. */
[data-theme="terrakotta"] .anmelde-plaettchen svg.anmelde-plaettchen__zeichen {
  color: #fff5ee;
}

/* -------------------------------------------------------------
 * 10 · Kobalt -- weiss mit eingeschlagenem Blaufeld
 *
 * Null Rundung, harter versetzter Schatten, schwarze Konturen.
 * Das lauteste der zehn -- und das mit dem hoechsten Kontrast.
 * ----------------------------------------------------------- */
[data-theme="kobalt"] {
  --t-grund: linear-gradient(104deg, #ffffff 0 53%, #0b39d6 53% 100%);
  --t-muster: none;
  --t-schimmer-a: transparent;
  --t-schimmer-b: transparent;
  --t-schimmer-deck: 0;

  --t-schrift:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --t-text:       #0a0a0a;
  --t-still:      #4a4a55;
  --t-ueberzeile: #0b39d6;
  --t-ueber-sperr: .2em;
  --t-titel:      #000000;
  --t-titel-hervor: #0b39d6;
  --t-titel-fett: 800;
  --t-titel-sperr: -.05em;
  --t-strich:     #0b39d6;
  --t-strich-rundung: 0;

  --t-karte:      #ffffff;
  --t-karte-rand: #0a0a0a;
  --t-karte-blur: 0px;
  --t-karte-schatten: 14px 14px 0 #0b39d6;
  --t-rand-breite: 2px;
  --t-rundung:    0px;
  --t-feld-rundung: 0px;
  --t-plaettchen-rundung: 0px;

  --t-feld:      #ffffff;
  --t-feld-rand: #0a0a0a;
  --t-feld-voll: #ffffff;
  --t-fokus-ring: rgba(11,57,214,.2);

  --t-akzent:     #0b39d6;
  --t-akzenttext: #ffffff;
  --t-akzent-schatten: none;

  --t-plaettchen:      #ffffff;
  --t-plaettchen-rand: #0a0a0a;
  --t-plaettchen-text: #0a0a0a;
  --t-plaettchen-still: #4a4a55;
  --t-plaettchen-schatten: 8px 8px 0 #0a0a0a;

  --t-faden-a: #0b39d6; --t-faden-b: #0b39d6; --t-faden-c: #0b39d6;
  --t-faden-deck: 0;
  --t-welle-deck: 0;

  --t-fehler-rand:  #0a0a0a;
  --t-fehler-grund: #ffe9e6;
  --t-fehler-text:  #9b1c10;
}

/* Unter 60 rem bricht das Raster um. Das diagonale Blaufeld
   liefe dann quer durch den Text -- also weg damit. */
@media (max-width: 60rem) {
  [data-theme="kobalt"] { --t-grund: #ffffff; }
}

/* =============================================================
 * In der Anwendung nur ein Streifen Farbe
 *
 * Die Arbeitsflaechen bleiben, wie sie sind -- zehn vollstaendig
 * durchgestaltete Oberflaechen waeren zehnmal so viel zu pflegen,
 * und zum Unterscheiden genuegt die Kopfleiste.
 * ============================================================= */
[data-theme] .nav {
  border-bottom: 2px solid transparent;
  border-image: var(--t-akzent) 1;
}

[data-theme] .nav__bereich[aria-current="page"] {
  border-bottom-color: var(--t-still);
}