/* ═══════════════════════════════════════════════════════════════════════════ vida.css — DAS globale VidaJob-Designsystem (v351) Auftrag Thomas 28.08.2026: „Fancy-Design auf die gesamte Website übertragen." ─────────────────────────────────────────────────────────────────────────── EINE Datei, EINE Wahrheit: · die dunkle Basis (§9) und die hochwertige helle Schwester; · alle zentralen Token (§4) — Flächen, Text, Konturen, Status, Gold; · die BRÜCKEN zu den historischen Seiten-Paletten (--bg/--panel/--line/…), damit jede bestehende Seite ohne Umbau aus dem System zieht; · die Akzent-Token (--accent, --accent-rgb, …) setzt web/akzent.js zur Laufzeit aus der persönlichen Farbwahl (vj_akzent) — hier stehen nur die Rückfälle. EINBINDUNG: als LETZTES Stylesheet im jeder Seite — dann gewinnen die Token über die lokalen :root-Paletten (gleiche Spezifität, spätere Quelle). akzent.js steht davor, synchron: kein Farb-Aufblitzen. Premium-Gold ist konstant und wird NIE von der Nutzerfarbe ersetzt (§7). ═══════════════════════════════════════════════════════════════════════ */ :root{ /* — Flächen (§9, dunkel) — */ --vBg:#06111D; --vBg2:#0B1928; --vKarte:#0E1D2D; --vHoch:#13263A; --vMilch:rgba(255,255,255,.05); /* — Text — */ --vText:#F6F9FC; --vMut:#9DB1C5; /* — Konturen — */ --vLinie:rgba(180,214,239,.13); --vLinie2:rgba(180,214,239,.30); /* — Status (semantisch, NIE von der Nutzerfarbe gefärbt, §7) — */ --vGold:#F4C64E; --vOk:#3DDC97; --vWarn:#E8B437; --vFehler:#FF7A76; /* Metallschrift der Kaufknöpfe (v353: „silber und gold" erkennbar) */ --vGoldText:#F6DFA0; --vSilberText:#E4EAF0; /* v354: die milchige Glas-Karte der Referenzseite — überall dieselbe */ --vGlasKarte:rgba(14,29,45,.82); /* — Akzent-Rückfälle (akzent.js übersteuert zur Laufzeit) — */ --accent:#4AB8FF; --acc:#4AB8FF; --accent-rgb:74,184,255; --accent-tief:#2A81C2; --accent-kontur:rgba(74,184,255,.45); --accent-schatten:rgba(74,184,255,.35); --accent-licht:rgba(74,184,255,.12); --accent-text:#04121c; --vFokus:var(--accent); /* — BRÜCKEN: die historischen Paletten-Namen ziehen aus dem System — */ --bg:var(--vBg); --panel:var(--vKarte); --card:var(--vKarte); --chip:var(--vHoch); --line:var(--vLinie); --text:var(--vText); --muted:var(--vMut); --gold:var(--vGold); --glas:rgba(255,255,255,.05); --glas2:rgba(255,255,255,.08); /* tiefe.css-Namen */ --t-text:var(--vText); --t-muted:var(--vMut); --t-line:var(--vLinie); --t-glas:rgba(255,255,255,.045); --t-glas2:rgba(255,255,255,.075); } /* — die hochwertige HELLE Schwester (kein invertiertes Dunkel, §9) — */ @media (prefers-color-scheme:light){ :root:not([data-theme="dunkel"]){ --vBg:#F2F6FA; --vBg2:#E9F0F7; --vKarte:#FFFFFF; --vHoch:#F4F8FC; --vMilch:rgba(10,34,54,.04); --vText:#0C2234; --vMut:#51687C; --vLinie:rgba(16,42,67,.14); --vLinie2:rgba(16,42,67,.30); --vGoldText:#8A6A14; --vSilberText:#42566A; --vGlasKarte:rgba(255,255,255,.86); --glas:rgba(10,34,54,.04); --glas2:rgba(10,34,54,.07); --t-glas:rgba(10,34,54,.04); --t-glas2:rgba(10,34,54,.07); } } [data-theme="hell"]{ --vBg:#F2F6FA; --vBg2:#E9F0F7; --vKarte:#FFFFFF; --vHoch:#F4F8FC; --vMilch:rgba(10,34,54,.04); --vText:#0C2234; --vMut:#51687C; --vLinie:rgba(16,42,67,.14); --vLinie2:rgba(16,42,67,.30); --vGoldText:#8A6A14; --vSilberText:#42566A; --vGlasKarte:rgba(255,255,255,.86); --glas:rgba(10,34,54,.04); --glas2:rgba(10,34,54,.07); --t-glas:rgba(10,34,54,.04); --t-glas2:rgba(10,34,54,.07); } [data-theme="dunkel"]{ --vBg:#06111D; --vBg2:#0B1928; --vKarte:#0E1D2D; --vHoch:#13263A; --vMilch:rgba(255,255,255,.05); --vText:#F6F9FC; --vMut:#9DB1C5; --vGoldText:#F6DFA0; --vSilberText:#E4EAF0; --vGlasKarte:rgba(14,29,45,.82); --vLinie:rgba(180,214,239,.13); --vLinie2:rgba(180,214,239,.30); --glas:rgba(255,255,255,.05); --glas2:rgba(255,255,255,.08); --t-glas:rgba(255,255,255,.045); --t-glas2:rgba(255,255,255,.075); } /* ── der gemeinsame Grund: tiefes Dunkel mit farbabhängigem Licht (§8) ── Später als jede Seiten-Regel geladen → dieselbe Spezifität gewinnt. */ body{ background:radial-gradient(1100px 540px at 78% -12%, rgba(var(--accent-rgb,74,184,255),.10), transparent 58%) var(--vBg); color:var(--vText); } /* ── Fokus folgt überall der persönlichen Farbe (§6/§13) ── */ :focus-visible{outline:3px solid var(--vFokus,#4AB8FF);outline-offset:2px} ::selection{background:rgba(var(--accent-rgb,74,184,255),.30)} /* ── ruhige, einheitliche Übergänge (§14) — nur Farbe/Deckkraft, kein Layout ── */ a,button{transition:color .18s cubic-bezier(.22,1,.36,1), background-color .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1)} @media (prefers-reduced-motion:reduce){a,button{transition:none}} /* ═══ v353 · DAS GLOBALE KNOPF-SYSTEM ════════════════════════════════════════ Verbindliche Korrektur Thomas 29.08.: „Fein, ruhig, edel und präzise — Farbe als Licht und Kontur, nicht als Farbbalken." PRIMÄR: dunkle milchige Fläche mit ~10 % Akzent, 1-px-Akzentkontur, helle Schrift, Akzent nur in Symbol/Schimmer. Kein Vollton, kein Verlauf in kräftiger Farbe, keine Neonwirkung. Gilt für die bekannten Primär-Klassen ALLER Seiten (die Alt-Regeln bleiben im Code stehen — dieses System lädt als Letztes und gewinnt). */ .nsHaupt,.go,.kn,.kn3,a.cta,button.cta,.btn:not(.sec):not(.zweit),.tg, #buyPremium,#buyPremiumPlus,.vjKaufHaupt{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%), color-mix(in srgb, var(--accent,#4AB8FF) 10%, var(--vKarte,#0E1D2D)) !important; border:1px solid var(--accent-kontur,rgba(74,184,255,.45)) !important; color:var(--vText,#F6F9FC) !important; border-radius:13px !important; box-shadow:0 16px 30px -20px rgba(var(--accent-rgb,74,184,255),.30), 0 10px 24px -16px rgba(0,0,0,.55) !important; font-weight:650; text-shadow:none; transition:background-color .18s cubic-bezier(.22,1,.36,1), border-color .18s cubic-bezier(.22,1,.36,1), transform .12s cubic-bezier(.22,1,.36,1), box-shadow .18s cubic-bezier(.22,1,.36,1), filter .18s cubic-bezier(.22,1,.36,1)} .nsHaupt svg,.go svg,.kn svg,.kn3 svg,.btn svg{stroke:var(--accent,#4AB8FF)} .nsHaupt:hover,.go:hover,.kn:hover,.kn3:hover,a.cta:hover,button.cta:hover, .btn:not(.sec):not(.zweit):hover,.tg:hover{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 55%), color-mix(in srgb, var(--accent,#4AB8FF) 15%, var(--vKarte,#0E1D2D)) !important; border-color:color-mix(in srgb, var(--accent,#4AB8FF) 65%, transparent) !important; transform:translateY(-1px); box-shadow:0 18px 34px -20px rgba(var(--accent-rgb,74,184,255),.38), 0 10px 24px -16px rgba(0,0,0,.55) !important; filter:none !important} .nsHaupt:active,.go:active,.kn:active,.kn3:active,.btn:not(.sec):not(.zweit):active,.tg:active{ transform:none; background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,0) 55%), color-mix(in srgb, var(--accent,#4AB8FF) 10%, var(--vKarte,#0E1D2D)) !important; box-shadow:0 8px 18px -14px rgba(var(--accent-rgb,74,184,255),.25) !important} .nsHaupt:focus-visible,.go:focus-visible,.kn:focus-visible,.kn3:focus-visible, .btn:focus-visible,.tg:focus-visible{ outline:2px solid var(--accent,#4AB8FF);outline-offset:3px} .nsHaupt:disabled,.go:disabled,.kn:disabled,.btn:disabled,.tg:disabled, .nsHaupt[aria-busy="true"],.go[aria-busy="true"]{ opacity:.55;box-shadow:none !important;transform:none;cursor:default} .go[aria-busy="true"],.nsHaupt[aria-busy="true"]{cursor:progress} /* PREMIUM+ bleibt GOLD — filigran, aber unverkennbar Gold (Thomas 29.08.: „silber und gold"): Goldschimmer oben, kräftige Goldkontur, hellgoldene Schrift. Kein Vollbalken. */ #buyPremiumPlus,.vjKaufHaupt{ background:linear-gradient(180deg,rgba(244,198,78,.14),rgba(244,198,78,0) 55%), color-mix(in srgb, #F4C64E 12%, var(--vKarte,#0E1D2D)) !important; border-color:rgba(244,198,78,.65) !important; color:var(--vGoldText,#F6DFA0) !important; box-shadow:0 16px 30px -20px rgba(244,198,78,.34), 0 10px 24px -16px rgba(0,0,0,.55) !important} #buyPremiumPlus:hover,.vjKaufHaupt:hover{ background:linear-gradient(180deg,rgba(244,198,78,.18),rgba(244,198,78,0) 55%), color-mix(in srgb, #F4C64E 16%, var(--vKarte,#0E1D2D)) !important; border-color:rgba(244,198,78,.9) !important;transform:translateY(-1px)} /* der Gold-Knopf trug innen dunkelbraune Schrift (#buyPremiumPlus b) — auf der neuen milchigen Fläche wird auch sie hellgolden */ #buyPremiumPlus b{color:var(--vGoldText,#F6DFA0) !important} /* Premium: dieselbe Feinheit, unverkennbar SILBER — Silberschimmer, Silberkontur, hellsilberne Schrift */ #buyPremium{ background:linear-gradient(180deg,rgba(210,222,232,.13),rgba(210,222,232,0) 55%), color-mix(in srgb, #B9C6D2 12%, var(--vKarte,#0E1D2D)) !important; border-color:rgba(200,212,224,.6) !important; color:var(--vSilberText,#E4EAF0) !important; box-shadow:0 16px 30px -20px rgba(185,198,210,.3), 0 10px 24px -16px rgba(0,0,0,.55) !important} #buyPremium:hover{ background:linear-gradient(180deg,rgba(210,222,232,.17),rgba(210,222,232,0) 55%), color-mix(in srgb, #B9C6D2 16%, var(--vKarte,#0E1D2D)) !important; border-color:rgba(210,222,232,.85) !important;transform:translateY(-1px)} /* TELEGRAM: Markenfarbe bleibt erkennbar — aber als Kontur und Licht */ .tg.telegram{ background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%), color-mix(in srgb, #2AABEE 10%, var(--vKarte,#0E1D2D)) !important; border-color:rgba(42,171,238,.5) !important; box-shadow:0 16px 30px -20px rgba(42,171,238,.28), 0 10px 24px -16px rgba(0,0,0,.55) !important} /* Die klebende Abo-Zeile: Silber- und Gold-Pille wandeln sich vom Vollverlauf zur feinen Kontur-Pille mit heller Schrift */ #vjAboZeile #vjAboSilber{ background:color-mix(in srgb, #B9C6D2 12%, var(--vKarte,#0E1D2D)) !important; border:1px solid rgba(200,212,224,.6) !important; color:var(--vSilberText,#E4EAF0) !important} #vjAboZeile #vjAboGold{ background:color-mix(in srgb, #F4C64E 12%, var(--vKarte,#0E1D2D)) !important; border:1px solid rgba(244,198,78,.65) !important; color:var(--vGoldText,#F6DFA0) !important} #vjAboZeile #vjAboSilber:hover,#vjAboZeile #vjAboGold:hover{filter:none !important} #vjAboZeile #vjAboSilber:hover{color:var(--vSilberText,#E4EAF0) !important} #vjAboZeile #vjAboGold:hover{color:var(--vGoldText,#F6DFA0) !important} #vjAboZeile #vjAboGold:hover{border-color:rgba(244,198,78,.8) !important} #vjAboZeile #vjAboSilber:hover{border-color:rgba(185,198,210,.8) !important} /* GEFÄHRLICH: dunkle Fläche, feine rote Kontur — nie ein roter Balken */ .vjGefahr{background:color-mix(in srgb, #FF7A76 8%, var(--vKarte,#0E1D2D)) !important; border:1px solid rgba(255,122,118,.5) !important;color:var(--vText,#F6F9FC) !important} /* NAVIGATION: die aktive Pille war ein voll ausgemalter Akzentbalken — jetzt dieselbe Sprache: 12–14 % Akzentlicht, Akzentkontur, helle Schrift */ .vjNav a[aria-current="page"],#vjNavUnten a[aria-current="page"]{ background:color-mix(in srgb, var(--accent,#4AB8FF) 14%, var(--vKarte,#0E1D2D)) !important; border:1px solid var(--accent-kontur,rgba(74,184,255,.45)) !important; color:var(--vText,#F6F9FC) !important} /* SEKUNDÄR: ruhig, neutral, Akzent erst bei Hover/Fokus */ .kn3-sek:hover,.sm:hover,.cta2:hover{border-color:var(--accent-kontur,rgba(74,184,255,.45))} @media (prefers-reduced-motion:reduce){ .nsHaupt,.go,.kn,.kn3,a.cta,button.cta,.btn,.tg,#buyPremium,#buyPremiumPlus,.vjKaufHaupt{transition:none;transform:none}} /* ═══ v354 · DIE GEMEINSAMEN BAUSTEINE (vollständige Designmigration) ════════ Auftrag Thomas 29.08.: EIN System für alle Seiten — Karte, Geist-Knopf, Wahl-Zeile, Skelett, Sekundär-Gold. Keine Seiten-Sonderlösungen mehr: die Klassen hier gewinnen als letzte Quelle über die Alt-Regeln. */ /* — GlassCard: die milchige Blur-Karte der Referenzseite, überall — */ .card{ background:var(--vGlasKarte,rgba(14,29,45,.82)); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid var(--vLinie,rgba(180,214,239,.13)); border-radius:20px; box-shadow:0 24px 60px -34px rgba(0,0,0,.6)} /* — GhostAction: ruhiger Geist-Knopf (Kopf, „Zurück", Nebenwege) — */ .nsLeise{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px; border-radius:12px;border:1px solid var(--vLinie,rgba(180,214,239,.13)); color:var(--vText,#F6F9FC);text-decoration:none;background:transparent; font:inherit;font-size:.95rem;cursor:pointer} .nsLeise:hover{border-color:var(--vLinie2,rgba(180,214,239,.3));background:rgba(255,255,255,.04)} .btn.sec{background:transparent !important;border:1px solid var(--vLinie2,rgba(180,214,239,.3)) !important; color:var(--vMut,#9DB1C5) !important;border-radius:12px !important;box-shadow:none !important; font-weight:600;min-height:44px;padding:10px 20px} .btn.sec:hover{color:var(--vText,#F6F9FC) !important;background:rgba(255,255,255,.04) !important; border-color:var(--vLinie2,rgba(180,214,239,.3)) !important;transform:none} .btn.sec:disabled{opacity:.4;box-shadow:none !important} /* — PremiumAction (sekundär): feiner Gold-Geist — nie lauter als der kostenlose Hauptweg. Gold bleibt Gold, unabhängig von der Nutzerfarbe. — */ .vjGoldSek,.btn.sec.vjGoldSek{background:transparent !important; border:1px solid rgba(244,198,78,.4) !important; color:var(--vGoldText,#F6DFA0) !important;box-shadow:none !important; font-weight:600 !important;font-size:.95rem !important;min-height:46px !important} .vjGoldSek:hover,.btn.sec.vjGoldSek:hover{border-color:rgba(244,198,78,.65) !important; background:rgba(244,198,78,.06) !important;transform:none} /* — Gratis-/Neutral-Knopf: ruhig, ohne Akzent-Tönung (Kasse: „Einfach loslegen") — */ .vjNeutral,.tg.vjNeutral{background:var(--vHoch,#13263A) !important; border:1px solid var(--vLinie,rgba(180,214,239,.13)) !important; color:var(--vText,#F6F9FC) !important;box-shadow:none !important} .vjNeutral:hover,.tg.vjNeutral:hover{border-color:var(--vLinie2,rgba(180,214,239,.3)) !important; background:var(--vHoch,#13263A) !important;transform:none} /* — SelectableRow: schlanke Antwort-Zeilen (Kompass, Fragebögen) — ruhig und neutral; NUR die gewählte Zeile trägt Akzentkontur + Tönung. */ .opt{display:block;width:100%;text-align:left;margin:8px 0;padding:11px 14px; border:1px solid var(--vLinie,rgba(180,214,239,.13));border-radius:12px; background:color-mix(in srgb, var(--vHoch,#13263A) 55%, transparent); color:var(--vText,#F6F9FC);font-size:.97rem;line-height:1.45;cursor:pointer; transition:border-color .15s cubic-bezier(.22,1,.36,1),background-color .15s cubic-bezier(.22,1,.36,1)} .opt:hover{border-color:var(--vLinie2,rgba(180,214,239,.3))} .opt.sel{border-color:var(--accent-kontur,rgba(74,184,255,.45)); background:color-mix(in srgb, var(--accent,#4AB8FF) 10%, var(--vKarte,#0E1D2D)); box-shadow:none} .scale button{border:1px solid var(--vLinie,rgba(180,214,239,.13));border-radius:10px; background:color-mix(in srgb, var(--vHoch,#13263A) 55%, transparent);color:var(--vText,#F6F9FC)} .scale button:hover{border-color:var(--vLinie2,rgba(180,214,239,.3))} .scale button.sel{border-color:var(--accent-kontur,rgba(74,184,255,.45)); background:color-mix(in srgb, var(--accent,#4AB8FF) 10%, var(--vKarte,#0E1D2D)); color:var(--vText,#F6F9FC);box-shadow:none} /* — FormField: das Referenz-Eingabefeld (56 px, Radius 14, Akzent-Fokus) — */ .vjFeld{width:100%;box-sizing:border-box;min-height:56px;padding:14px 16px; border:1px solid var(--vLinie,rgba(180,214,239,.13));border-radius:14px; background:var(--vHoch,#13263A);color:var(--vText,#F6F9FC);font:inherit;font-size:1rem} .vjFeld:focus{outline:none;border-color:var(--accent,#4AB8FF)} /* — LoadingCard: Skelett in der Form der ECHTEN Stellenkarte — Kreis (Punktzahl), Titelzeile, Firma·Ort-Zeile, Aktions-Pillen. Sanfter Schimmer mit geringer Deckkraft; Layout springt nicht. — */ @keyframes vjSchimmer{from{background-position:200% 0}to{background-position:-200% 0}} .skKarte{display:flex;gap:14px;align-items:flex-start;padding:16px 6px; border-bottom:1px solid var(--vLinie,rgba(180,214,239,.13))} .skKarte:last-child{border-bottom:0} .skKreis{flex:none;width:54px;height:54px;border-radius:50%; border:3px solid rgba(157,177,197,.18)} .skMitte{flex:1;min-width:0;display:block} .skZ{display:block;border-radius:6px; background:linear-gradient(100deg, rgba(157,177,197,.10) 40%, rgba(157,177,197,.20) 50%, rgba(157,177,197,.10) 60%); background-size:200% 100%;animation:vjSchimmer 1.8s ease infinite} .skT{height:15px;width:56%;max-width:340px} .skM{height:12px;width:38%;max-width:230px;margin-top:9px} .skAkt{display:flex;gap:10px;margin-top:13px} .skAkt .skZ{height:34px;width:180px;border-radius:10px;animation-delay:.15s} .skAkt .skZ+.skZ{width:130px} @media(max-width:640px){.skT{width:78%}.skM{width:55%}.skAkt .skZ{width:52%}.skAkt .skZ+.skZ{width:38%}} @media (prefers-reduced-motion:reduce){.skZ{animation:none}} /* — Kompass-Start: die Gold-Alternative steht KLEINER unter dem Hauptweg — */ .startKn .vjGoldSek{width:auto !important;align-self:center;padding:10px 22px !important} /* — v355 (K1): an der Stellenkarte ist „Original ansehen" die HAUPTAKTION (Nutzerfarbe, wie jeder Primär-Knopf) und „Bewerbung vorbereiten" die kleinere, ruhige Nebenaktion — neutraler Geist, KEIN Gold mehr neben der Nutzerfarbe. Gold gehört an der Ergebnisseite allein der einen Premium-Brücke. — */ .wOriginalKn{border:1px solid var(--accent-kontur,rgba(74,184,255,.45)) !important; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 55%), color-mix(in srgb, var(--accent,#4AB8FF) 10%, var(--vKarte,#0E1D2D)) !important; color:var(--vText,#F6F9FC) !important;font-weight:650 !important;border-radius:12px} .wOriginalKn:hover{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,0) 55%), color-mix(in srgb, var(--accent,#4AB8FF) 15%, var(--vKarte,#0E1D2D)) !important; border-color:color-mix(in srgb, var(--accent,#4AB8FF) 65%, transparent) !important; color:var(--vText,#F6F9FC) !important} .wBewerb{border:1px solid var(--vLinie2,rgba(180,214,239,.3)) !important; background:transparent !important; color:var(--vMut,#9DB1C5) !important; box-shadow:none !important;font-weight:600 !important;border-radius:12px; font-size:.88rem !important;flex:0 1 auto !important;min-height:40px !important; padding:8px 14px !important} .wBewerb:hover{background:rgba(255,255,255,.04) !important; color:var(--vText,#F6F9FC) !important; border-color:var(--vLinie2,rgba(180,214,239,.3)) !important} .vjZweiWege .wOriginalKn{flex:0 1 auto !important;min-width:200px} /* ═══ v359 (P0-B, Release VJ-2026-08-29-STARTSEITE) ══════════════════════════ Die neue Startseite ist eine bewusst DUNKLE Welt (freigegebene Referenz). Frische Besucher mit hellem System bekamen data-theme="hell" — dadurch trafen dunkle Schrift-Token auf die fest dunklen Flächen der neuen Ansicht (Kopfknöpfe fast unsichtbar, Kaufknopf weiß). Bis eine echte helle Fassung entworfen und freigegeben ist, bleiben die Token der neuen Ansicht deshalb IMMER dunkel — Unterseiten folgen Hell/Dunkel weiterhin normal. */ html.vjNeu:not([data-theme="dunkel"]){ --vBg:#06111D; --vBg2:#0B1928; --vKarte:#0E1D2D; --vHoch:#13263A; --vMilch:rgba(255,255,255,.05); --vText:#F6F9FC; --vMut:#9DB1C5; --vLinie:rgba(180,214,239,.13); --vLinie2:rgba(180,214,239,.30); --vGoldText:#F6DFA0; --vSilberText:#E4EAF0; --vGlasKarte:rgba(14,29,45,.82); --glas:rgba(255,255,255,.05); --glas2:rgba(255,255,255,.08); --t-glas:rgba(255,255,255,.045); --t-glas2:rgba(255,255,255,.075); }