body { font-family: 'Segoe UI', Arial, sans-serif; background: #f4f6f9 url('../img/tron_2.jpg') no-repeat center center fixed; background-size: cover; margin: 0; padding: 20px; display: flex; justify-content: center; align-items: center; min-height: 100vh; box-sizing: border-box; }        
		.auth-container { background-color:rgba(255,255,255,0.4); width: 100%; max-width: 450px; padding: 30px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); box-sizing: border-box; }
		
		h2 { margin-top: 0; color: #333; border-bottom: 2px solid #007bff; padding-bottom: 8px; font-size: 22px; }
        
		.form-group { margin-bottom: 15px; text-align: left; }
        label { display: block; margin-bottom: 5px; font-weight: 600; color: #555; font-size: 14px; }
        input, select { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; font-size: 14px; }
        input:focus, select:focus { border-color: #007bff; outline: none; }
        button { width: 100%; padding: 12px; background: #007bff; color: white; border: none; border-radius: 4px; font-size: 16px; font-weight: bold; cursor: pointer; margin-top: 10px; transition: background 0.2s; }
        button:hover { background: #0056b3; }
        .btn-secondary { background: #6c757d; margin-top: 5px; }
        .btn-secondary { background: #6c757d; }
        .btn-secondary:hover { background: #5a6268; }
        .btn-danger { background: #dc3545; }
        .btn-danger:hover { background: #bd2130; }
        .toggle-link { text-align: center; margin-top: 15px; font-size: 14px; color: #007bff; cursor: pointer; text-decoration: underline; }
        .hidden { display: none !important; }
        .qr-box { text-align: center; margin: 15px 0; background: #f8f9fa; padding: 15px; border-radius: 4px; border: 1px dashed #ccc; }
        .alert-info { background: #e2f0fe; color: #1d6fc2; padding: 10px; border-radius: 4px; font-size: 13px; margin-bottom: 15px; line-height: 1.4; border-left: 4px solid #007bff; }

        /* Überlagernder Wrapper für die Info-Karte */
        #info-wrapper {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            box-sizing: border-box;
            z-index: 9999;
            cursor: pointer;
            transition: opacity 0.4s ease, transform 0.4s ease;
        }

        /* Die Info-Card entspricht in Dimensionen und Design exakt der .auth-card aus der CSS-Datei */
        .info-card {
            background: rgba(255, 255, 255, 0.95);
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 400px;
            box-sizing: border-box;
            text-align: center;
            /* Flex-Ausrichtung für vertikale Zentrierung des Textes */
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 360px; /* Ungefähre Höhe des späteren Login-Formulars */
        }

        .info-card h1 {
            margin-top: 0;
            color: #007bff;
            border-bottom: 2px solid #f1f3f5;
            padding-bottom: 10px;
            font-size: 24px;
        }

        .info-card p {
            color: #333;
            font-size: 14px;
            line-height: 1.6;
            margin: 10px 0;
        }

        .info-hint {
            margin-top: 25px;
            font-size: 11px;
            color: #999;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        
        /* Das reguläre Login-Interface ist anfangs unsichtbar */
        .auth-wrapper {
            opacity: 0;
            transition: opacity 0.4s ease;
        }
        .auth-wrapper.visible {
            opacity: 1;
        }