@font-face { font-family: 'Comfortaa'; font-style: normal; font-weight: 300; src: url(../fonts/comfortaa.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } body { padding-top: 70px; margin-bottom: 70px; } hr { height: 2px; border-width: 0; color: gray; background-color: gray } .dtc-debugval { color: #F2771A; font: 0.8rem Inconsolata, monospace; background-color: black; padding: 10px; } #overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); /* Dunkler Hintergrund mit Transparenz */ color: white; /* Textfarbe */ justify-content: center; align-items: center; z-index: 9999; /* Stellen Sie sicher, dass es über anderen Elementen liegt */ } .overlay-content { text-align: center; font-size: 4rem; } .loader { width: 96px; height: 96px; border: 12px solid #FFF; border-radius: 50%; display: inline-block; position: relative; box-sizing: border-box; animation: rotation 1s linear infinite; } .loader::after { content: ''; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 120px; height: 120px; border-radius: 50%; border: 12px solid transparent; border-bottom-color: #FF3D00; } @keyframes rotation { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .notification-container { position: fixed; top: 30%; left: 50%; transform: translateX(-50%); z-index: 1000; } .notification { margin-bottom: 20px; /* Fügen Sie bei Bedarf weitere Stile hinzu */ }