/* ============================================================
ZEORI · Farbfassung Grau-Petrol
Fuenf Farben, jede mit einem eigenen Auftrag:
Grau-Petrol #223337 Sicherheit. Die tragende Flaeche.
Weiss #FFFFFF Freiheit. Die Hauptflaeche, viel Luft.
Gold #E0A344 Akzent und Aktion. Genau ein Wert.
Schwarz #141414 Klarheit. Schrift, Linien, Laufband.
Pastellgruen #A9DCC0 Freigabe. Pruefzeichen und CTA-Hover.
EINBINDEN als letztes Blatt, nach zeori.css und zeori-motion.css:
Weglassen genuegt, um zur Ursprungsfassung zurueckzukehren.
Es werden ausschliesslich Farben gesetzt. Kein Abstand, keine
Schrift, kein Raster wird angefasst.
TEIL 1 UND 2 SIND GERECHNET, mit zwei Regeln:
Blaue Familie wird Grau-Petrol. Jeder Wert liegt in CIELCh auf
Farbwinkel 220 und auf 60 Prozent Buntheit, die wahrgenommene
Helligkeit bleibt stehen. In HSL waere das schiefgegangen, dort
haetten sich alle gemessenen Kontraste verschoben.
Warme Familie wird ein einziger Akzent, #E0A344. Zusammengefuehrt
wird nur, was auch wirklich die Akzentfarbe ist: an der Datei
gemessen liegt diese Gruppe bei Farbwinkel 60 bis 92, Helligkeit
55 bis 88, Buntheit 31 bis 60. Nicht angefasst wird, was die
Gegenfarbe zum Gold ist: die dunkle Tinte auf dem Goldband
(#2A1F0A, #4A2C08, #7A4A08, #241A06, #6B5730, #8A6520), die
warmen Weiss-Glasuren und der warme Grauschatten unter den
Demofenstern. Auf Gold gesetzt waeren Schrift, Zahlen und Linien
des ganzen Goldbandes unsichtbar.
TEIL 3 IST VON HAND GESETZT.
Gemessene Kontraste:
Fliesstext auf Weiss 18.4:1
Titel auf Weiss 14.6:1
Titel auf Grau-Petrol 12.2:1
Fliesstext auf Grau-Petrol 8.5:1
Pastellgruen auf Grau-Petrol 8.6:1
Schwarz auf Gold 9.5:1
Weiss auf schwarzem Laufband 19.8:1
Gold auf Grau-Petrol 5.9:1
ZWEI BEKANNTE SCHWACHSTELLEN, BEWUSST SO BELASSEN
1. Weisse Knopfschrift auf Gold liegt bei 2.2:1, im Hover auf
Pastellgruen bei 1.5:1. So entschieden, weil der Hover
fluechtig ist und die Farbe allein die Rueckmeldung traegt.
2. Gold als Schrift auf hellem Grund liegt bei 2.0 bis 2.2:1.
Betroffen sind Augenbrauen, Registernummern, Textlinks,
Bildunterschriften und die grossen Kennzahlen. Das gilt schon
fuer die Ursprungsfassung und wurde hier nicht veraendert.
============================================================ */
/* --- 1 · entsaettigte Farben aus zeori.css --------------- */
:root{--nacht:#223337;--nacht2:#2B4146;--auf-d-text:#BBC5C7;--auf-h:#223337;--auf-h-text:#424C4E;--a-teal:#9FBEC6;--a-sand:#E0A344;--a-petrol:#304E56;--a-tinte:#223337;--lin-d:#425B61}
.kn-voll:hover{background:#E0A344;border-color:#E0A344}
.f-gold .kn-voll:hover{background:#334B50;border-color:#334B50}
.hero::before{background-image:linear-gradient(90deg,rgba(159,190,198,.075) 1px,transparent 1px);-webkit-mask-image:linear-gradient(180deg,#000000 0%,transparent 78%);mask-image:linear-gradient(180deg,#000000 0%,transparent 78%)}
.wb{box-shadow:0 24px 60px -30px rgba(34,51,55,.55)}
.wb-leiste{color:#9AA7AA}
.wb-leiste i{background:#435E64}
.wb-leiste b{color:#BBC5C7}
.wb-reiter button{color:#A6B2B5}
.wb-such{background:#1c2e32}
.wb-such input::placeholder{color:#889598}
.wb-hinweis{color:#9AA7AA}
.wb-liste button:hover{background:#283C40}
.wb-liste .e-me{color:#9AA7AA}
.wb-leer{color:#A6B2B5}
.wb-daten div{color:#9AA7AA}
.chat-frage{background:#283C40}
.wb-fuss{color:#9AA7AA}
.f-tief{--ak:#9FBEC6;--lin:#48656C}
.lauf span{color:#9AA7AA}
.zelle--kern{background:rgba(48,78,86,.05)}
:root{--glas-dunkel:linear-gradient(158deg,rgba(80,109,116,.52),rgba(38,59,63,.42));--kante-dunkel:rgba(170,193,198,.28)}
.f-papier{background-image:radial-gradient(70rem 34rem at 88% -10%, rgba(48,78,86,.055), transparent 62%),
radial-gradient(52rem 30rem at -8% 108%, rgba(138,74,22,.045), transparent 60%),
linear-gradient(174deg,#F5F7F3 0%, var(--papier) 44%, #E2E7E1 100%)}
.f-papier2{background-image:radial-gradient(60rem 32rem at 6% -12%, rgba(48,78,86,.06), transparent 60%),
linear-gradient(172deg,#EBEFEA 0%, var(--papier2) 50%, #D5DBD4 100%)}
.f-nacht{background-image:radial-gradient(58rem 34rem at 82% -14%, rgba(159,190,198,.10), transparent 62%),
linear-gradient(172deg,#26393E 0%, var(--nacht) 55%, #1D2D31 100%)}
.f-nacht2{background-image:radial-gradient(52rem 30rem at 12% -10%, rgba(224,163,68,.09), transparent 60%),
linear-gradient(174deg,#2f464b 0%, var(--nacht2) 58%, #26393E 100%)}
.f-tief{background-color:#2e454a;background-image:radial-gradient(56rem 32rem at 88% -8%, rgba(159,190,198,.11), transparent 62%),
linear-gradient(172deg,#375359 0%, #2e454a 55%, #283C41 100%)}
.f-gold{background-image:radial-gradient(48rem 26rem at 14% -14%, rgba(255,238,205,.55), transparent 58%),
linear-gradient(168deg,#E0A344 0%, var(--gold) 48%, #E0A344 100%)}
.hero{background-image:radial-gradient(66rem 40rem at 74% -18%, rgba(159,190,198,.13), transparent 64%),
radial-gradient(40rem 28rem at 8% 118%, rgba(224,163,68,.07), transparent 62%),
linear-gradient(170deg,#283C40 0%, var(--nacht) 52%, #1A292D 100%)}
.fuss{background-image:linear-gradient(180deg,#1D2D31 0%, var(--nacht) 100%)}
.lauf{background-color:#223337;background-image:linear-gradient(180deg,rgba(29,45,49,.9),rgba(39,58,63,.9))}
.gitter{background-image:radial-gradient(38rem 20rem at 6% 0%, rgba(48,78,86,.30), transparent 66%),
radial-gradient(30rem 18rem at 96% 104%, rgba(138,74,22,.22), transparent 64%),
linear-gradient(140deg,rgba(48,78,86,.14), rgba(255,255,255,.1) 58%, rgba(48,78,86,.10))}
.zelle{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), inset 0 -1px 0 rgba(255,255,255,.35), 0 14px 30px -18px rgba(34,51,55,.45)}
.zelle--kern{background-image:linear-gradient(150deg,rgba(255,255,255,.92),rgba(240,246,247,.55)),
radial-gradient(26rem 11rem at 2% 0%, rgba(48,78,86,.07), transparent 74%)}
.wb{background-color:#24373B;box-shadow:inset 0 1px 0 rgba(194,211,215,.22), 0 34px 70px -38px rgba(19,28,31,.85)}
.wb-such{background-color:#1c2e32;background-image:linear-gradient(170deg,rgba(50,75,80,.55),rgba(27,43,46,.5));box-shadow:inset 0 1px 0 rgba(194,211,215,.14)}
.wb-fragen button{background-color:#31494F;background-image:linear-gradient(158deg,rgba(91,121,128,.45),rgba(38,59,63,.25))}
.wb-fragen button:hover{background-color:#3e5960}
.chat-frage{background-color:#344C51;background-image:linear-gradient(120deg,rgba(81,111,118,.5),transparent)}
.wb-liste button:hover{background:linear-gradient(90deg,rgba(66,94,101,.5),transparent 85%)}
.hero h1{text-shadow:0 0 46px rgba(159,190,198,.20)}
.marke .wort{text-shadow:0 0 22px rgba(159,190,198,.35)}
.hero-schild span::before,.fussab .sig::before{box-shadow:0 0 10px rgba(159,190,198,.85)}
.wb-demo{box-shadow:0 0 16px rgba(159,190,198,.4)}
.kn-voll{background-image:linear-gradient(160deg,#E0A344 0%, var(--gold) 46%, #E0A344 100%)}
.kn-voll:hover{background-color:#E0A344;background-image:linear-gradient(160deg,#E0A344 0%, #E0A344 46%, #E0A344 100%)}
.f-gold .kn-voll{background-image:linear-gradient(160deg,#395359 0%, var(--nacht) 55%, #182629 100%);box-shadow:0 0 0 1px rgba(170,193,198,.35) inset, 0 14px 34px -18px rgba(22,35,38,.9)}
.f-gold .kn-voll:hover{background-color:#2B4146;background-image:linear-gradient(160deg,#46676F 0%, #2B4146 55%, #223337 100%)}
.kzn b,.folge .fz,.aussage{text-shadow:0 0 34px rgba(48,78,86,.10)}
.f-nacht .wkz b,.f-tief .folge strong{text-shadow:0 0 26px rgba(159,190,198,.16)}
.karten{background-image:radial-gradient(38rem 20rem at 4% 0%, rgba(48,78,86,.28), transparent 66%),
radial-gradient(30rem 18rem at 98% 106%, rgba(138,74,22,.20), transparent 64%),
linear-gradient(140deg,rgba(48,78,86,.13), rgba(255,255,255,.1) 58%, rgba(48,78,86,.09))}
.karte{box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px -18px rgba(34,51,55,.45)}
.etik span{border:1px solid rgba(48,78,86,.3)}
.rollen{border-bottom:1px solid rgba(48,78,86,.18)}
.rollen div{color:#697578}
.felder dt,.felder .fn{color:#697578}
.karte .kfuss{border-top:1px solid rgba(48,78,86,.18)}
.marke .wort{filter:drop-shadow(0 0 22px rgba(159,190,198,.3))}
.grp-liste{background-image:linear-gradient(160deg,#31484E,#24373B);box-shadow:0 26px 60px -30px rgba(19,28,31,.9)}
.wikidemo{--muted:#647073;--gold-600:#E0A344;--line:rgba(34,51,55,.14);--shadow-sm:0 1px 2px rgba(34,51,55,.06), 0 4px 14px rgba(34,51,55,.06);--shadow-md:0 22px 52px -24px rgba(34,51,55,.45)}
.wd-acc{color:#ffffff}
.wd-search:focus{box-shadow:0 6px 22px -12px rgba(60,86,92,.4)}
.wd-search:focus{box-shadow:inset 0 2px 8px rgba(124,109,84,.14), 0 0 0 3px rgba(224,163,68,.28)}
.flowdemo,.orgdemo,.qwin{--muted:#647073;--gold-600:#E0A344;--gold-200:#E0A344;--gold-300:#E0A344;--line:rgba(34,51,55,.14);--shadow-sm:0 1px 2px rgba(34,51,55,.06), 0 4px 14px rgba(34,51,55,.06);--shadow-md:0 22px 52px -24px rgba(34,51,55,.45)}
.qwin{background:#27393d;box-shadow:0 40px 80px -34px rgba(36,56,61,.5)}
.qwin-q{color:#ffffff}
.od-card{color:#ffffff;box-shadow:0 22px 44px -18px rgba(36,56,61,.55)}
.od-card b{color:#ffffff}
.qwin{background:linear-gradient(155deg, rgba(58,82,88,.9), rgba(36,56,61,.85));border:1px solid rgba(165,191,197,.3);box-shadow:0 0 30px rgba(86,116,124,.25), 0 18px 40px -20px rgba(0,0,0,.55)}
.od-card{box-shadow:0 0 26px rgba(86,116,124,.3), 0 16px 34px -18px rgba(0,0,0,.6)}
.fig.dark :is(h2,h3,h4,b,dt),b),.qwin :is(h3,b){color:#ffffff}
.od-flag,.pt-tag){background:rgba(36,56,61,.06);border-color:rgba(36,56,61,.14)}
.hero--hell{background-image:radial-gradient(64rem 38rem at 76% -16%, rgba(224,163,68,.16), transparent 62%),
radial-gradient(40rem 26rem at 6% 112%, rgba(48,78,86,.07), transparent 62%),
linear-gradient(172deg,#F7F9F5 0%, var(--papier) 52%, #E4E9E3 100%)}
.hero--hell::before{background-image:linear-gradient(90deg,rgba(48,78,86,.07) 1px,transparent 1px);-webkit-mask-image:linear-gradient(180deg,#000000 0%,transparent 74%);mask-image:linear-gradient(180deg,#000000 0%,transparent 74%)}
.hero--gold{background-image:radial-gradient(52rem 30rem at 16% -18%, rgba(255,240,212,.55), transparent 60%),
radial-gradient(38rem 24rem at 88% 114%, rgba(34,51,55,.10), transparent 62%),
linear-gradient(168deg,#E0A344 0%, var(--gold) 46%, #E0A344 100%)}
.hero--gold::before{background-image:linear-gradient(90deg,rgba(34,51,55,.09) 1px,transparent 1px);-webkit-mask-image:linear-gradient(180deg,#000000 0%,transparent 74%);mask-image:linear-gradient(180deg,#000000 0%,transparent 74%)}
.hero--gold .kn-voll{background-image:linear-gradient(160deg,#395359 0%, var(--nacht) 55%, #182629 100%);box-shadow:0 0 0 1px rgba(170,193,198,.35) inset, 0 14px 34px -18px rgba(22,35,38,.9)}
.hero--gold .kn-voll:hover{background-color:#2B4146;background-image:linear-gradient(160deg,#46676F 0%, #2B4146 55%, #223337 100%)}
.pt-flow,.crew{--muted:#647073;--gold-600:#E0A344;--gold-200:#E0A344;--gold-300:#E0A344;--line:rgba(34,51,55,.14);--shadow-sm:0 1px 2px rgba(34,51,55,.06), 0 4px 14px rgba(34,51,55,.06);--shadow-md:0 22px 52px -24px rgba(34,51,55,.45)}
.f-nacht .pt-flow,.f-nacht2 .pt-flow,.f-tief .pt-flow,.f-nacht .crew,.f-nacht2 .crew,.f-tief .crew{--muted:#A6B2B5;--line:rgba(170,193,198,.26);--line2:#48656C;--bone:#283C40;--bone-200:#334B50;--white:#2B4146}
.crew-ava{border:1.5px solid rgba(224,163,68,.55)}
.crew-t b{color:#ffffff}
.crew--cards .crew-m:hover{border-color:rgba(224,163,68,.55);background:rgba(224,163,68,.07)}
.lg-abo{background:linear-gradient(150deg,#e0a344,var(--gold))}
.lg-opt{background:#48666d;box-shadow:inset 0 0 0 1px rgba(224,163,68,.7)}
.lg-abo{background:linear-gradient(150deg,#e0a344,#E0A344);box-shadow:0 0 10px rgba(224,163,68,.6)}
.lg-opt{background:linear-gradient(150deg,#577981,#46646c);box-shadow:0 0 10px rgba(128,159,166,.5)}
.pt-bahn{background:linear-gradient(180deg,var(--acc-hi) 0%,var(--gold) 70%,rgba(224,163,68,.25) 100%);box-shadow:0 0 22px rgba(224,163,68,.5), 0 0 60px rgba(224,163,68,.2)}
.pt-bahn i::after{-webkit-mask:linear-gradient(180deg,#000000 82%,transparent);mask:linear-gradient(180deg,#000000 82%,transparent)}
.pt-kern{color:#24383d;background:linear-gradient(155deg, rgba(224,163,68,.68) 0%, rgba(224,163,68,.46) 100%);border:1px solid rgba(224,163,68,.6);box-shadow:0 0 36px rgba(224,163,68,.4), 0 0 90px rgba(224,163,68,.18), 0 18px 40px -20px rgba(0,0,0,.5)}
.pt-kern::after{background:#2e4449;box-shadow:0 0 0 4px var(--acc-hi), 0 0 18px rgba(224,163,68,.6)}
.pt-kern h3,.pt-karte h3{color:#24383d}
.pt-kern > p{color:rgba(36,56,61,.85)}
.pt-tag{background:rgba(36,56,61,.16);color:#24383d}
.pt-st{color:#ffffff;box-shadow:0 0 32px rgba(245,241,234,.14), 0 0 84px rgba(224,163,68,.1), 0 18px 40px -20px rgba(0,0,0,.55)}
.pt-st:hover{box-shadow:0 0 44px rgba(245,241,234,.2), 0 0 104px rgba(224,163,68,.16), 0 22px 44px -20px rgba(0,0,0,.6)}
.pt-st::after{background:#2e4449;box-shadow:0 0 0 4px var(--acc-hi), 0 0 18px rgba(224,163,68,.55)}
.pt-nr{color:#ffffff}
.pt-st h3{color:#ffffff}
.pt-stufe h4{color:#ffffff}
.pt-stufe--p{border-left-color:#8eacb3;box-shadow:0 0 16px rgba(128,159,166,.18)}
.pt-stufe--g{box-shadow:0 0 16px rgba(224,163,68,.2)}
.pt-stufe--d{background:linear-gradient(155deg, rgba(70,100,108,.85), rgba(36,56,61,.8));box-shadow:0 0 18px rgba(86,116,124,.3)}
.pt-schiene{border-left:3px dashed rgba(224,163,68,.75)}
.pt-schiene::after{border-top:3px dashed rgba(224,163,68,.75)}
.pt-md{color:#ffffff;background:linear-gradient(155deg, rgba(77,110,118,.8) 0%, rgba(45,67,72,.68) 100%);border:1px solid rgba(148,176,183,.45);border-top-color:rgba(190,212,217,.6);box-shadow:0 0 30px rgba(86,116,124,.32), 0 0 76px rgba(86,116,124,.14), 0 16px 34px -18px rgba(0,0,0,.5)}
.pt-md:hover{box-shadow:0 0 40px rgba(86,116,124,.45), 0 0 96px rgba(86,116,124,.2), 0 20px 40px -18px rgba(0,0,0,.55)}
.pt-md::after{border-left:3px dashed rgba(224,163,68,.75)}
.pt-plus{background:linear-gradient(150deg,#e0a344,#E0A344);color:#24383d;box-shadow:0 0 16px rgba(224,163,68,.6), 0 4px 10px rgba(0,0,0,.35)}
.pt-md h3{color:#ffffff}
.pt-md .pt-tag{background:rgba(224,163,68,.18)}
.pt-karte{color:#24383d;background:linear-gradient(155deg, rgba(224,163,68,.68) 0%, rgba(224,163,68,.46) 100%);border:1px solid rgba(224,163,68,.6);box-shadow:0 0 36px rgba(224,163,68,.4), 0 0 90px rgba(224,163,68,.18), 0 18px 40px -20px rgba(0,0,0,.5)}
.pt-karte > p{color:rgba(36,56,61,.85)}
.pt-puls{background:#24383d}
.pt-puls::after{border:2px solid rgba(36,56,61,.5)}
.pt-ende .pt-stufe h4{color:#2e383b}
.pt-ende .pt-stufe p{color:#6c797c}
.pt-ende .pt-stufe--p{border-left-color:#3c565c}
.pt-ende .pt-stufe--d{background:linear-gradient(155deg, rgba(50,74,79,.9), rgba(36,56,61,.85))}
.pt-ende .pt-stufe--d h4{color:#ffffff}
.pt-tag--in{color:#ffffff}
.pt-kern .pt-tag,.pt-karte .pt-tag{background:rgba(36,56,61,.22);color:#24383d}
.pt-kern > p,.pt-karte > p{color:rgba(36,56,61,.9)}
.pt-stufe h4{color:#ffffff}
.pt-kern{background:linear-gradient(155deg, rgba(224,163,68,.94) 0%, rgba(224,163,68,.82) 100%)}
.pt-karte{background:linear-gradient(155deg, rgba(224,163,68,.94) 0%, rgba(224,163,68,.82) 100%)}
.pt-st{background:linear-gradient(155deg, rgba(64,90,97,.92) 0%, rgba(45,67,72,.86) 100%);border:1px solid rgba(165,191,197,.4);border-top-color:rgba(190,212,217,.5)}
.pt-md{background:linear-gradient(155deg, rgba(79,113,121,.94) 0%, rgba(50,74,79,.88) 100%)}
.pt-kern h3,.pt-karte h3,.pt-kern > p,.pt-karte > p{color:#24383d}
.pt-kern > p,.pt-karte > p{color:rgba(36,56,61,.9)}
.pt-kern .pt-tag,.pt-karte .pt-tag{background:rgba(36,56,61,.2);color:#24383d}
.pt-st h3,.pt-md h3,.pt-md b{color:#ffffff}
.pt-stufe h4{color:#ffffff}
.pt-ende .pt-stufe:not(.pt-stufe--d) h4{color:#2e383b}
.pt-ende .pt-stufe:not(.pt-stufe--d) p{color:#6c797c}
.pt-ende .pt-stufe--d h4{color:#ffffff}
.od-flag,.pt-tag){background:rgba(36,56,61,.06);border-color:rgba(36,56,61,.14)}
li,dd,label,figcaption,.lead,.sub,.crew-desc,.wd-note,.od-funktion,.df-cap,.qwin-atext,.value p,.step p,.way p,.case p,.owner-list li,.flowdemo-top,.flowdemo-note,.form-note){color:#647073}
.od-flag,.pt-tag){background:rgba(36,56,61,.06);border-color:rgba(36,56,61,.18)}
.pt-kern{background-color:#E0A344}
.pt-kern{background-color:#E0A344;background-image:linear-gradient(155deg,rgba(224,163,68,.96),rgba(224,163,68,.9));border:1px solid rgba(34,51,55,.28)}
.pt-st,.pt-md,.pt-karte{border:1px solid rgba(170,193,198,.26)}
.crew--cards .crew-m{border:1px solid rgba(170,193,198,.26)}
.flowdemo-top,.orgdemo .flowdemo-top{background:rgba(34,51,55,.06)}
.od-card{border:1px solid rgba(170,193,198,.3)}
.f-gold .gitter{background-image:radial-gradient(38rem 20rem at 5% 0%, rgba(255,255,255,.5), transparent 66%),
radial-gradient(30rem 18rem at 97% 105%, rgba(34,51,55,.10), transparent 64%),
linear-gradient(140deg,rgba(255,255,255,.3), rgba(255,255,255,.12) 58%, rgba(34,51,55,.06))}
.lb-st{background:#2E4347;border:1px solid rgba(170,193,198,.24)}
.lb-ende{background:#2E4347}
.lb-kopf{border-bottom:1px solid rgba(170,193,198,.22)}
.lb-kern .lb-kopf{border-bottom-color:rgba(34,51,55,.28)}
.lb-trenner span{background:var(--band-grund,#2e454a)}
.lb-md{background:#2E3C3F;border:1px solid rgba(170,193,198,.24)}
.f-nacht{--band-grund:#223337}
.f-nacht2{--band-grund:#2B4146}
.f-tief{--band-grund:#2e454a}
/* --- 2 · entsaettigte Farben aus zeori-motion.css -------- */
.fortschritt{background:rgba(187,197,199,.14)}
.f-nacht > .ebene,.f-tief > .ebene{background-image:radial-gradient(1.5px 1.5px at 50% 50%,rgba(159,190,198,.26),transparent 60%)}
.f-nacht2 > .ebene{background-image:radial-gradient(1.5px 1.5px at 50% 50%,rgba(224,163,68,.22),transparent 60%)}
.f-papier > .ebene,.f-papier2 > .ebene{background-image:radial-gradient(1.5px 1.5px at 50% 50%,rgba(48,78,86,.14),transparent 60%)}
.f-gold > .ebene{background-image:radial-gradient(34rem 22rem at 78% 8%,rgba(255,244,222,.45),transparent 62%),
radial-gradient(26rem 18rem at 12% 96%,rgba(34,51,55,.10),transparent 62%)}
.hero > .ebene{background-image:radial-gradient(38rem 24rem at 18% 6%,rgba(159,190,198,.17),transparent 64%),
radial-gradient(30rem 22rem at 84% 84%,rgba(224,163,68,.15),transparent 62%)}
.hero--hell > .ebene{background-image:radial-gradient(38rem 24rem at 18% 6%,rgba(224,163,68,.22),transparent 64%),
radial-gradient(30rem 22rem at 84% 84%,rgba(48,78,86,.10),transparent 62%)}
.hero--gold > .ebene{background-image:radial-gradient(38rem 24rem at 18% 6%,rgba(255,244,222,.45),transparent 64%),
radial-gradient(30rem 22rem at 84% 84%,rgba(34,51,55,.13),transparent 62%)}
@media(hover:hover){
.f-gold .kn-voll:hover{box-shadow:0 14px 28px -14px rgba(34,51,55,.75)}
.f-nacht .zelle:hover,.f-nacht2 .zelle:hover,.f-tief .zelle:hover,
.wkz li:hover,.f-nacht .drei > div:hover,.f-nacht2 .drei > div:hover,.f-tief .drei > div:hover{background-color:rgba(159,190,198,.055)}
.f-papier .zelle:hover,.f-papier2 .zelle:hover,.f-gold .zelle:hover,
.f-papier .drei > div:hover,.f-papier2 .drei > div:hover{background-color:rgba(48,78,86,.045)}
.karte:hover,.crew-m:hover,.lb-st:hover,.lb-md:hover,.lb-kern:hover{box-shadow:0 22px 46px -26px rgba(34,51,55,.6)}
}
/* ============================================================
3 · Handkorrektur
============================================================ */
:root{
/* --- Sicherheit: die dunkle Flaeche --- */
--nacht:#223337;
--nacht2:#2B4146;
--lin-d:#425B61;
--auf-d:#F4F7F7; /* Titel */
--auf-d-text:#C9D5D7; /* Fliesstext */
/* --- Akzent und Aktion: genau ein Wert ---
Frueher standen hier zwei helle Gelbtoene aus der ersten
Farbrunde. Seit der Goldvereinheitlichung traegt der Akzent
denselben Wert wie der Knopf. Auf Petrol sinkt der Kontrast
der Augenbrauen damit von 8.7 auf 5.9:1, weiter ueber AA. */
--a-teal:#E0A344;
--a-sand:#E0A344;
--gold:#E0A344;
/* --- Freiheit: die helle Flaeche --- */
--papier:#FFFFFF;
--papier2:#F2F2F2;
--lin-h:rgba(0,0,0,.14);
--auf-h:#1D2B31; /* Titel auf Weiss */
--auf-h-text:#141414; /* Fliesstext schwarz */
--a-petrol:#2A4149; /* Akzent auf Weiss */
--a-kupfer:#2A4149;
/* --- Klarheit: auf Gold --- */
--auf-g:#000000;
--a-tinte:#000000;
--lin-g:rgba(0,0,0,.28);
/* --- Das Sondersignal --- */
--frei:#A9DCC0; /* auf dunkler Flaeche */
--frei-tief:#2E6B4E; /* dieselbe Aussage auf Weiss */
}
/* --- helle Flaechen: flach, kein Verlauf -------------------- */
.f-papier{background-color:#FFFFFF;background-image:none;--band-grund:#FFFFFF}
.f-papier2{background-color:#F2F2F2;background-image:none;--band-grund:#F2F2F2}
.f-papier > .ebene,.f-papier2 > .ebene{
background-image:radial-gradient(1.5px 1.5px at 50% 50%,rgba(0,0,0,.16),transparent 60%)}
.gitter,.karten{background-color:#F2F2F2;background-image:
radial-gradient(38rem 20rem at 6% 0%,rgba(34,51,55,.14),transparent 66%),
linear-gradient(140deg,rgba(0,0,0,.05),rgba(255,255,255,.4) 58%,rgba(34,51,55,.07));
box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.f-papier .zelle,.f-papier2 .zelle,.f-papier .karte,.f-papier2 .karte{
background-color:rgba(255,255,255,.9);border-color:rgba(0,0,0,.08)}
/* --- Das Laufband ------------------------------------------
Traegt die Akzentfarbe, weisse Schrift und pastellgruene
Zwischenzeichen. Die waagrechte Bewegung steckt in zeori.css
und bleibt unberuehrt.
Hinweis zur Lesbarkeit: Weiss auf Gold ergibt 2.2:1 und liegt
unter WCAG AA. Das Band traegt nur eine Wortliste und keine
Aussage, die man lesen koennen muss. */
.lauf{background-color:var(--gold);background-image:none;
border-top-color:rgba(0,0,0,.18);border-bottom-color:rgba(0,0,0,.18)}
.lauf span{color:#FFFFFF}
/* --- Klarheit: Schwarz auf Details -------------------------- */
.f-papier .kn-leer,.f-papier2 .kn-leer{color:#141414;border-color:#141414}
.f-papier .kn-leer:hover,.f-papier2 .kn-leer:hover{background:#141414;color:#FFFFFF}
.f-papier .zelle .mnr,.f-papier2 .zelle .mnr,
.f-papier .kette .knr,.f-papier2 .kette .knr,
.f-papier .fpaare .fn,.f-papier2 .fpaare .fn{color:#141414}
.f-gold,.f-gold .reg .nr,.f-gold .eb,.f-gold .mnr,.f-gold .quelle{color:#000000}
.f-gold .kn-leer{color:#000000;border-color:rgba(0,0,0,.4)}
.f-gold .kn-leer:hover{background:#000000;color:#E0A344;border-color:#000000}
/* --- Pastellgruen: nur Pruefzeichen ------------------------- */
/* Die drei Marken im Heldenbereich und die Signatur im Fuss */
.hero-schild span::before,.fussab .sig::before{
background:#A9DCC0;box-shadow:0 0 10px rgba(169,220,192,.8)}
.hero--hell .hero-schild span::before{background:#A9DCC0;box-shadow:0 0 10px rgba(169,220,192,.8)}
/* Die Punkte im schwarzen Laufband */
.lauf span::after{background:#A9DCC0}
/* Aufzaehlungsmarken */
.punkte li::before{background:#A9DCC0}
.f-papier .punkte li::before,.f-papier2 .punkte li::before{background:#2E6B4E}
.f-gold .punkte li::before{background:#0F4B33}
/* Die Zeile "Geprueft und schriftlich freigegeben" unter den Karten */
.karte .kfuss{color:#2E6B4E}
.f-nacht .karte .kfuss,.f-nacht2 .karte .kfuss,.f-tief .karte .kfuss{color:#A9DCC0}
/* Punkte in der Wiki-Demo */
.wd-dot{background:#A9DCC0}
/* --- Heldenbereich bleibt hell wie in der Ursprungsfassung ---
Nur flach und weiss statt beige, damit er ohne Naht in das erste
helle Band uebergeht. Dieselbe Regel wie bei .f-papier. */
.hero--hell{background-color:#FFFFFF;background-image:none}
.hero--hell::before{background-image:linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px)}
.hero--hell > .ebene{background-image:
radial-gradient(38rem 24rem at 18% 6%,rgba(224,163,68,.10),transparent 64%),
radial-gradient(30rem 22rem at 84% 84%,rgba(34,51,55,.06),transparent 62%)}
/* ============================================================
CTA-Hover
Der primaere Knopf .kn-voll bekommt beim Beruehren die
Pastellgruenflaeche. Nur der Hover, der Ruhezustand bleibt.
Zwei Dinge sind noetig, beide im Browser nachgemessen:
background-image:none, sonst ueberdeckt der bestehende Verlauf
die Farbe. Und .hero--gold beziehungsweise .hero--hell muessen
mit in die Liste, weil diese Regeln mit Spezifitaet 0,3,0 ein
blosses .kn-voll:hover mit 0,2,0 schlagen.
============================================================ */
.kn-voll:hover,.kn-voll:focus-visible,
.f-gold .kn-voll:hover,.f-gold .kn-voll:focus-visible,
.hero--hell .kn-voll:hover,.hero--hell .kn-voll:focus-visible,
.hero--gold .kn-voll:hover,.hero--gold .kn-voll:focus-visible{
background-color:var(--frei,#A9DCC0);
background-image:none;
border-color:var(--frei,#A9DCC0);
color:#fff}
/* ============================================================
Organigramm: Verbindungslinien in Gold
Der Produktbaum in "Eine Basis, die mit Ihren Wuenschen
waechst" fuehrt eine goldene Leitung (.lb-leitung). Das
Organigramm zeichnete seine Hierarchielinien bisher grau
ueber var(--line2). Hier laufen beide in derselben Farbe.
Geaendert wird nur die Farbe der vier Linienregeln, nicht die
Variable --line2 selbst: die traegt auch die Rahmen von
.fd-x in der Workflow-Demo und .wd-search in der Wiki-Demo,
und die sollen grau bleiben.
Die Eckenregeln .octree li:first-child::before,
:last-child::after, :only-child und die Radien brauchen keine
eigene Angabe, sie erben die Farbe von den vier Regeln.
.lb-leitung wird nicht angefasst, sie ist die Vorlage.
============================================================ */
.octree ul::before{border-left-color:var(--gold)}
.octree li::before,.octree li::after{border-top-color:var(--gold)}
.octree li::after{border-left-color:var(--gold)}
.octree li:last-child::before{border-right-color:var(--gold)}
/* ============================================================
Textlinks auf dunklen Flaechen in Pastellgruen
"Mehr dazu", "Die Wissensbank ansehen", "Alle Bausteine
ansehen", "Mehr zum Datenschutz". Auf den dunklen Baendern
traegt Pastellgruen 7.6 bis 8.6:1 und ist damit deutlich
besser lesbar als das bisherige Gold.
Auf hellen Flaechen bleiben die Links GOLD, so entschieden.
Pastellgruen auf Weiss laege bei 1.4:1 und waere unlesbar.
Der bekannte Schwachpunkt Gold auf Weiss mit 2.2:1 bleibt
damit bestehen, bewusst.
Auf dem Goldband bleiben sie schwarz, dort waere Pastellgruen
auf Gold nur 1.4:1.
Der Pfeil kommt aus .tl::after und erbt die Farbe mit.
============================================================ */
.f-nacht .tl,.f-nacht2 .tl,.f-tief .tl,
.hero:not(.hero--hell):not(.hero--gold) .tl{color:var(--frei,#A9DCC0)}
/* ============================================================
Nachtrag · Akzentfarbe im Band f-tief
zeori.css setzt dort die Akzentfarbe als festen Wert und nicht
ueber die Variablen. Teil 1 hat daraus rechnerisch ein Blaugrau
gemacht. Damit trug dieses eine Band eine andere Akzentfarbe als
alle uebrigen, sichtbar an der Augenbraue und am Handschriftsatz.
============================================================ */
.f-tief{--ak:var(--gold)}
.f-nacht .wkz b,.f-tief .folge strong{text-shadow:0 0 26px rgba(224,163,68,.16)}