/* =====================================================================================================================
Edelglas – ruhigere, edlere Schicht für Klarglas (Stand 2026-10-29)
Einbinden als LETZTE Stilvorlage, also nach klarglas.css und den eigenen Stilen des Projekts:
Daneben muss edelglas-e.svg liegen; edelglas.js nur für ein eigenes Hintergrundbild. Anleitung: Edelglas.md.
Zurück zu Klarglas: die Zeile entfernen. Keine neuen Klassen.
Idee (nach dem Reel „Glassy Dashboard V5“ und Apples Liquid Glass): weniger Plastik, mehr Licht.
- Glas ist flach und klar: kein Füllverlauf, keine Glasdicke am unteren Innenrand, kaum Schatten.
- Die Form entsteht durch Unschärfe, eine haarfeine Lichtkante und den Grund, der durchscheint.
- Der Grund wirkt wie ein unscharfes Foto: kühler Dunst oben, warmes Abendlicht unten (Markenblau und -gold), feines Korn,
in der Mitte ein extremer Bloom in den Farben des „e“ von e-volutions (das Zeichen selbst ist nicht zu sehen).
- Große Zahlen leicht, kleine Überschriften weit gesperrt. Knöpfe ohne Glühen und Textschatten; Blau bleibt die eine Hauptaktion.
Hell ist Standard. Hat das Projekt ein dunkles Design (data-theme="dunkel" am ), wird es ebenfalls umgestellt.
===================================================================================================================== */
:root {
--glas-blur: blur(28px) saturate(185%);
--glas-fuellung: rgba(255, 255, 255, .46);
--glas-fuellung-dicht: rgba(251, 251, 253, .78);
--glas-kante: linear-gradient(160deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .34) 24%, rgba(255, 255, 255, .10) 58%, rgba(255, 255, 255, .55) 100%);
--glas-licht: inset 0 1px 0 rgba(255, 255, 255, .5);
--glas-tiefe: 0 0 #0000; /* keine Glasdicke: sie macht das Glas zu Plastik */
--glas-aussen: 0 0 0 1px rgba(28, 36, 68, .06);
--shadow-1: 0 1px 2px rgba(24, 30, 52, .03), 0 22px 44px -32px rgba(24, 30, 52, .22);
--shadow-2: 0 2px 6px rgba(24, 30, 52, .05), 0 44px 90px -40px rgba(24, 30, 52, .32);
--hair: rgba(28, 36, 68, .07);
--r-l: 22px;
/* neu in Edelglas */
--edel-grund: #EEEFF2;
--edel-licht:
radial-gradient(72vmax 54vmax at 104% -10%, rgba(111, 178, 255, .42), transparent 66%), /* kühler Dunst oben rechts (Markenblau) */
radial-gradient(66vmax 48vmax at -8% 110%, rgba(245, 184, 46, .30), transparent 64%), /* Abendlicht unten links (Markengold) */
radial-gradient(52vmax 42vmax at 80% 100%, rgba(226, 170, 150, .24), transparent 66%), /* warmer Schimmer unten rechts */
radial-gradient(46vmax 36vmax at 30% 46%, rgba(205, 214, 236, .45), transparent 70%), /* Dunst in der Mitte, damit das Glas auch dort etwas zu brechen hat */
radial-gradient(60vmax 44vmax at 14% 4%, rgba(255, 255, 255, .9), transparent 60%); /* helles Fenster oben links */
--edel-korn: .05; /* Stärke des Korns (0 = aus) */
--edel-bloom-quelle: url("edelglas-e.svg"); /* Farben des Bloom: das „e“ von e-volutions (none = aus) */
--edel-bloom: 1; /* Deckkraft des Bloom (0 = aus) */
--edel-bloom-groesse: clamp(160px, 28vmin, 280px);
--edel-bloom-weite: 2.4; /* Vergrößerung, Unschärfe wächst mit */
--edel-bloom-unschaerfe: 26px; /* mehr = Farben mischen sich zu Hellblau, weniger = das „e“ wird erkennbar */
--edel-bloom-licht: 1.12;
--edel-bild: none; /* eigenes Hintergrundbild, siehe unten */
--edel-schleier: rgba(240, 241, 245, .5); /* liegt über dem Foto, damit Schrift außerhalb der Karten lesbar bleibt */
--edel-hof: rgba(246, 247, 250, .9); /* Lichthof um Schrift, die direkt auf dem Foto steht */
--edel-auf-foto: #2F3858; /* Zusatztext direkt auf dem Foto: dunkler als --muted */
--edel-muted: #5E6985; /* --muted im Glas (wie Klarglas) */
--edel-spur: rgba(255, 255, 255, .36); /* Spur hinter Reitern und Umschaltern */
--edel-spur-kante: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(28, 36, 68, .045);
--edel-wahl: rgba(255, 255, 255, .9); /* gewählter Reiter */
--edel-wahl-schatten: 0 0 0 1px rgba(28, 36, 68, .05), 0 3px 10px -5px rgba(24, 30, 52, .22);
--edel-feld: rgba(255, 255, 255, .5); /* Eingabefeld */
--edel-feld-hover: rgba(255, 255, 255, .72);
--edel-feld-kante: 0 0 0 1px rgba(28, 36, 68, .09);
--edel-zweit: rgba(255, 255, 255, .42); /* Glasknopf (sec) */
--edel-zweit-hover: rgba(255, 255, 255, .72);
--edel-symbol: rgba(255, 255, 255, .5); /* Symbolkasten: klares Glas, nur das Symbol trägt Farbe */
--edel-symbol-kante: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 0 0 1px rgba(28, 36, 68, .06);
}
/* ---------- Grund: drei feste Ebenen hinter allem (auch auf dem iPhone, wo background-attachment: fixed nicht greift), von unten:
Lichtflächen oder Foto (:root::before), Farb-Bloom (body::before), Korn (body::after) ---------- */
body { background: var(--edel-grund); }
:root::before, body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
:root::before, body::after { inset: 0; }
:root::before { background: var(--edel-licht); }
/* Bloom in der Mitte des Fensters: das „e“ so stark verwischt, dass nur sein Farbverlauf (Hellblau, Navy, Gold) bleibt.
Er liegt meist hinter einer Karte, deren Glas die Farben noch einmal weich bricht */
body::before { inset: 0; margin: auto; width: var(--edel-bloom-groesse); height: var(--edel-bloom-groesse);
background: var(--edel-bloom-quelle) center / contain no-repeat; opacity: var(--edel-bloom);
transform: scale(var(--edel-bloom-weite)); filter: blur(var(--edel-bloom-unschaerfe)) saturate(2.6) brightness(var(--edel-bloom-licht)); }
/* Eigenes Hintergrundbild (edelglas.js oder ): ersetzt Lichtflächen und Bloom.
Das Foto bleibt scharf, erst das Glas macht es unscharf wie im Reel; der Schleier dimmt es wie Apples Dimmschicht über Fotos */
:root[data-bild]::before { background: linear-gradient(var(--edel-schleier), var(--edel-schleier)), var(--edel-bild) center / cover no-repeat, var(--edel-grund); }
:root[data-bild] body::before { display: none; }
/* Schrift direkt auf dem Foto (Seitentitel, Abschnitte) bekommt einen weichen Lichthof; im Glas braucht sie keinen */
:root[data-bild] .seite { --muted: var(--edel-auf-foto); text-shadow: 0 0 1px var(--edel-hof), 0 0 5px var(--edel-hof), 0 0 12px var(--edel-hof), 0 0 24px var(--edel-hof); }
:root[data-bild] .seite :is(.card, .kpi, .sheet, .dialog, .menu, .leiste) { --muted: var(--edel-muted); }
:root[data-bild] :is(.card, .kpi, .sheet, .dialog, .menu, .leiste, .hinweis, button, input, select, textarea, .chip, .tabs, .monat-nav) { text-shadow: none; }
/* Knöpfe ohne Fläche liegen sonst nackt auf dem Foto: sie werden zu Glas */
:root[data-bild] button.ghost { background: var(--edel-zweit); -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur); }
body::after { opacity: var(--edel-korn);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E"); }
/* ---------- Schrift: Hierarchie über Größe, nicht über Gewicht ---------- */
h1 { font-weight: 600; letter-spacing: -.034em; }
h2 { font-weight: 600; }
h3 { font-size: 0.6875rem; letter-spacing: .12em; } /* 11 px, Apples Mindestgröße, weit gesperrt */
.kpi .n { font-weight: 300; letter-spacing: -.04em; } /* große Zahlen leicht und eng */
.kpi .n small { font-weight: 500; }
.kpi .n[style] { font-weight: 500; letter-spacing: -.02em; } /* Wort statt Zahl in kleinerer Größe: leicht wäre dort zu dünn */
/* ---------- Glasflächen: Kopf so klar wie die Karten ---------- */
.kopf { background: var(--glas-fuellung); box-shadow: var(--glas-licht), var(--glas-aussen), var(--shadow-1); }
.kpi:hover { transform: none; } /* Kennzahlen sind keine Knöpfe: nichts hebt sich */
/* ---------- Schaltflächen: flach, ohne Glühen ---------- */
button, .btn { text-shadow: none; background: rgb(var(--t));
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(var(--t), .18), 0 8px 18px -12px rgba(var(--t), .55); }
button::after, .btn::after { opacity: .55; }
button:hover, .btn:hover { transform: none; background: color-mix(in srgb, rgb(var(--t)) 88%, #fff); }
button:active, .btn:active { transform: scale(.98); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .16); }
button.sec, .btn.sec, button.danger, button.ghost { background: var(--edel-zweit); box-shadow: var(--glas-licht), var(--glas-aussen); }
button.sec::after, .btn.sec::after, button.danger::after { opacity: 1; }
button.sec:hover, .btn.sec:hover { background: var(--edel-zweit-hover); }
button.danger:hover { background: rgba(214, 80, 63, .1); }
button.ghost { background: transparent; box-shadow: inset 0 0 0 1px rgba(40, 52, 88, .12); }
button.ghost:hover { background: var(--edel-zweit); }
button.sec:active, .btn.sec:active, button.danger:active, button.ghost:active { box-shadow: inset 0 1px 3px rgba(30, 40, 70, .12), var(--glas-aussen); }
button:disabled { background: rgba(255, 255, 255, .32); box-shadow: var(--glas-aussen); }
/* ---------- Eingaben: flach statt eingesenkt ---------- */
input, select, textarea { background-color: var(--edel-feld); box-shadow: var(--edel-feld-kante); }
input:hover, select:hover, textarea:hover { background-color: var(--edel-feld-hover); }
input[type="checkbox"], input[type="radio"] { box-shadow: none; }
/* ---------- Kennzeichen ---------- */
.chip { box-shadow: var(--glas-aussen); }
/* ---------- Reiter und Umschalter (Klarglas .tabs; dazu die Kopf-Navigation und Monatswahl der e-volutions-Apps) ---------- */
.tabs, .nav, .monat-nav { background: var(--edel-spur); box-shadow: var(--edel-spur-kante); }
.tab.on, .tab.on:hover, a.tab.on { background: var(--edel-wahl); box-shadow: var(--edel-wahl-schatten); }
/* ---------- Symbolkasten der e-volutions-Apps: klares Glas, Farbe nur im Symbol ---------- */
.ikon, .ikon.gruen, .ikon.gold, .ikon.rot, .ikon.grau { border-radius: 10px; background: var(--edel-symbol); box-shadow: var(--edel-symbol-kante); }
.avatar { box-shadow: inset 0 0 0 1px rgba(var(--akzent), .14); }
/* ---------- Zeiterfassung: Stempeluhr wie ein Zifferblatt, Zeitleiste flach ---------- */
.uhr { font-weight: 300; letter-spacing: -.05em; }
.uhr .sek { font-weight: 300; }
.zeitleiste { box-shadow: inset 0 0 0 1px var(--hair); }
/* ---------- Dunkles Design (nur wenn das Projekt es hat): rauchiges Glas über Abendlicht wie im Reel ---------- */
:root[data-theme="dunkel"] {
--glas-blur: blur(30px) saturate(160%);
--glas-fuellung: rgba(30, 32, 40, .4); /* rauchiges Glas: schluckt etwas Licht, Schrift bleibt über dem Bloom lesbar */
--glas-fuellung-dicht: rgba(30, 31, 37, .8);
--glas-kante: linear-gradient(160deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .09) 26%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .16) 100%);
--glas-licht: inset 0 1px 0 rgba(255, 255, 255, .07);
--glas-tiefe: 0 0 #0000;
--glas-aussen: 0 0 0 1px rgba(255, 255, 255, .06);
--shadow-1: 0 22px 44px -28px rgba(0, 0, 0, .7);
--shadow-2: 0 2px 8px rgba(0, 0, 0, .4), 0 44px 90px -36px rgba(0, 0, 0, .9);
--hair: rgba(255, 255, 255, .09);
--edel-grund: #0B0B0E;
--edel-licht:
radial-gradient(70vmax 52vmax at 102% -8%, rgba(78, 112, 190, .30), transparent 64%),
radial-gradient(64vmax 46vmax at -6% 108%, rgba(245, 168, 46, .17), transparent 62%),
radial-gradient(50vmax 40vmax at 78% 98%, rgba(214, 120, 96, .13), transparent 66%),
radial-gradient(60vmax 44vmax at 18% 6%, rgba(160, 170, 200, .08), transparent 60%);
--edel-korn: .05;
--edel-bloom-licht: 1.3;
--edel-schleier: rgba(8, 8, 12, .45);
--edel-hof: rgba(0, 0, 0, .75);
--edel-auf-foto: #DCE1EE;
--edel-muted: #AAB3CC;
--edel-spur: rgba(255, 255, 255, .06);
--edel-spur-kante: inset 0 0 0 1px rgba(255, 255, 255, .07);
--edel-wahl: rgba(255, 255, 255, .14);
--edel-wahl-schatten: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(255, 255, 255, .06);
--edel-feld: rgba(255, 255, 255, .06);
--edel-feld-hover: rgba(255, 255, 255, .09);
--edel-feld-kante: 0 0 0 1px rgba(255, 255, 255, .1);
--edel-zweit: rgba(255, 255, 255, .07);
--edel-zweit-hover: rgba(255, 255, 255, .12);
--edel-symbol: rgba(255, 255, 255, .06);
--edel-symbol-kante: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
:root[data-theme="dunkel"] body { background: var(--edel-grund); }
:root[data-theme="dunkel"] body::after { filter: invert(1); } /* helles Korn, dunkles verschwände im Schwarz */
/* Stellen, die das dunkle Design des Projekts mit eigenen Selektoren festlegt (gleiche Stärke, Edelglas steht später) */
:root[data-theme="dunkel"] .nav, :root[data-theme="dunkel"] .monat-nav, :root[data-theme="dunkel"] .tabs { background: var(--edel-spur); }
:root[data-theme="dunkel"] a.tab { color: var(--muted); } /* Reiter sind keine Links: neutral, Blau bleibt der Hauptaktion */
:root[data-theme="dunkel"] a.tab:hover { color: var(--ink); }
:root[data-theme="dunkel"] a.tab.on { background: var(--edel-wahl); color: var(--ink); }
:root[data-theme="dunkel"] button.sec, :root[data-theme="dunkel"] .btn.sec, :root[data-theme="dunkel"] button.danger { background: var(--edel-zweit); }
:root[data-theme="dunkel"] button.sec:hover, :root[data-theme="dunkel"] .btn.sec:hover { background: var(--edel-zweit-hover); }
:root[data-theme="dunkel"] input, :root[data-theme="dunkel"] select, :root[data-theme="dunkel"] textarea { background-color: var(--edel-feld); box-shadow: var(--edel-feld-kante); }
:root[data-theme="dunkel"] .ikon, :root[data-theme="dunkel"] .ikon.gruen, :root[data-theme="dunkel"] .ikon.gold,
:root[data-theme="dunkel"] .ikon.rot, :root[data-theme="dunkel"] .ikon.grau { background: var(--edel-symbol); }
/* ---------- Barrierefreiheit: Klarglas-Regeln wiederholen, weil Edelglas dieselben Variablen später setzt ---------- */
@media (prefers-reduced-transparency: reduce) {
.kopf { background: #fff; }
:root[data-theme="dunkel"] .kopf { background: #14161C; }
body::after { display: none; }
}
@media (prefers-contrast: more) {
:root { --hair: rgba(28, 36, 68, .35); --glas-kante: linear-gradient(rgba(28, 36, 68, .6), rgba(28, 36, 68, .6)); --glas-aussen: 0 0 0 1px rgba(28, 36, 68, .5);
--edel-feld-kante: 0 0 0 1px rgba(28, 36, 68, .5); --edel-spur-kante: 0 0 0 1px rgba(28, 36, 68, .4); --edel-symbol-kante: 0 0 0 1px rgba(28, 36, 68, .4); }
:root[data-theme="dunkel"] { --hair: rgba(255, 255, 255, .5); --glas-kante: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .7));
--glas-aussen: 0 0 0 1px rgba(255, 255, 255, .6); --edel-feld-kante: 0 0 0 1px rgba(255, 255, 255, .5); --edel-spur-kante: 0 0 0 1px rgba(255, 255, 255, .4);
--edel-symbol-kante: 0 0 0 1px rgba(255, 255, 255, .4); }
body::after { display: none; }
}