/* * Fritz Managed IT – Modernes Login-Design * Ersetzt/ergänzt style_default.css + style.css.php für body.login * * Einbindung: Als letzte CSS-Datei im einbinden, damit alle * bisherigen Regeln überschrieben werden: * * * Hintergrundbild: Tauscht das Unsplash-Bild gegen ein eigenes aus, * indem du die URL in --bg-image anpasst. */ /* ─── Google Fonts: Inter ──────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ─── Design-Tokens ────────────────────────────────────────────────── */ :root { --brand-primary: #0057b8; /* Fritz-Blau */ --brand-hover: #0046a0; --brand-light: rgba(0, 87, 184, 0.12); --card-bg: rgba(255, 255, 255, 0.97); --card-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 4px 16px rgba(0, 0, 0, 0.25); --card-radius: 16px; --card-width: 420px; --input-border: #d0d7e2; --input-focus: #0057b8; --input-radius: 8px; --input-height: 46px; --text-primary: #1a202c; --text-secondary: #6b7280; --text-link: #0057b8; /* Hintergrundbild – tausche URL gegen ein eigenes Bild aus */ --bg-image: url('/images/bg-fritzmanagedit1.jpg'); } /* ─── Reset für Login-Body ─────────────────────────────────────────── */ body.login { font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important; margin: 0 !important; padding: 0 !important; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; /* Hintergrundbild mit dunklem Overlay */ background-color: #0d1117 !important; background-image: linear-gradient( 135deg, rgba(0, 20, 60, 0.72) 0%, rgba(0, 40, 100, 0.55) 40%, rgba(0, 10, 30, 0.78) 100% ), var(--bg-image); background-size: cover; background-position: center center; background-attachment: fixed; background-repeat: no-repeat; } /* ─── Logo-Container (leer lassen oder Hintergrundlogo entfernen) ── */ body.login .logo { display: none !important; } /* ─── Haupt-Card ───────────────────────────────────────────────────── */ body.login .content { background: var(--card-bg) !important; border-radius: var(--card-radius) !important; box-shadow: var(--card-shadow) !important; width: var(--card-width) !important; max-width: calc(100vw - 32px) !important; padding: 44px 40px 36px !important; margin: 0 auto !important; position: relative !important; float: none !important; top: auto !important; left: auto !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } /* Logo-Bild in der Card */ body.login .content > p:first-child { text-align: center; margin: 0 0 28px !important; padding: 0; } body.login .content > p:first-child img { width: 220px !important; height: auto !important; display: inline-block; filter: none; } /* ─── Formular-Layout ──────────────────────────────────────────────── */ body.login .login-form, body.login .forget-form { width: 100%; } body.login .control-group { margin-bottom: 16px !important; } /* ─── Input-Felder ─────────────────────────────────────────────────── */ body.login .m-wrap, body.login input[type="text"].m-wrap, body.login input[type="password"].m-wrap { width: 100% !important; height: var(--input-height) !important; padding: 10px 14px 10px 44px !important; font-size: 14px !important; font-family: 'Inter', sans-serif !important; color: var(--text-primary) !important; background-color: #f8fafc !important; border: 1.5px solid var(--input-border) !important; border-radius: var(--input-radius) !important; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease !important; box-sizing: border-box !important; outline: none !important; margin-bottom: 0 !important; line-height: normal !important; display: block !important; } body.login .m-wrap:focus, body.login input[type="text"].m-wrap:focus, body.login input[type="password"].m-wrap:focus { border-color: var(--input-focus) !important; box-shadow: 0 0 0 3px rgba(0, 87, 184, 0.15) !important; background-color: #ffffff !important; } body.login .m-wrap::placeholder { color: #9ca3af !important; font-weight: 400; } /* ─── Input-Icon-Wrapper ───────────────────────────────────────────── */ body.login .input-icon { position: relative !important; } body.login .input-icon.left > i { position: absolute !important; left: 14px !important; top: 50% !important; transform: translateY(-50%) !important; color: #9ca3af !important; font-size: 15px !important; z-index: 1; pointer-events: none; } /* ─── "Passwort vergessen"-Link ────────────────────────────────────── */ body.login a#forget-password, body.login .forget-password a { color: var(--text-link) !important; font-size: 13px !important; font-weight: 500 !important; text-decoration: none !important; display: inline-block; margin-top: 4px; } body.login a#forget-password:hover, body.login .forget-password a:hover { text-decoration: underline !important; } /* Kleiner Abstand nach dem Passwort-Feld */ body.login .control-group:last-of-type .controls { margin-bottom: 0; } /* ─── Form-Actions: Sprachflags + Button ───────────────────────────── */ body.login .form-actions { margin-top: 24px !important; padding: 0 !important; border: none !important; background: transparent !important; display: flex !important; align-items: center !important; gap: 8px !important; } /* Sprachflag-Links – Emoji statt PNG */ body.login .form-actions a img { display: none !important; /* PNG-Bild ausblenden */ } body.login .form-actions a[href*="sprache=DE"]::before { content: '🇩🇪'; } body.login .form-actions a[href*="sprache=EN"]::before { content: '🇬🇧'; } body.login .form-actions a[href*="sprache"] { font-size: 22px !important; line-height: 1 !important; text-decoration: none !important; opacity: 0.7 !important; transition: opacity 0.15s, transform 0.15s !important; display: inline-block !important; } body.login .form-actions a[href*="sprache"]:hover { opacity: 1 !important; transform: scale(1.15) !important; } /* Anmelden-Button */ body.login .btn.green, body.login button[type="submit"].btn { margin-left: auto !important; background: var(--brand-primary) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 11px 28px !important; font-size: 14px !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important; cursor: pointer !important; transition: background 0.2s ease, transform 0.1s ease !important; box-shadow: 0 2px 8px rgba(0, 87, 184, 0.35) !important; letter-spacing: 0.01em; text-shadow: none !important; } body.login .btn.green:hover, body.login button[type="submit"].btn:hover { background: var(--brand-hover) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 87, 184, 0.45) !important; } body.login .btn.green:active, body.login button[type="submit"].btn:active { transform: translateY(0); } /* ─── "Noch keinen Zugang"-Bereich ─────────────────────────────────── */ body.login .forget-password { text-align: center; margin-top: 20px !important; padding-top: 18px !important; border-top: 1px solid #e5e9ef !important; font-size: 13px !important; color: var(--text-secondary) !important; } body.login .forget-password a { color: var(--text-link) !important; font-weight: 500; } /* ─── Passwort-Reset-Formular ──────────────────────────────────────── */ body.login .forget-form h3 { font-size: 18px !important; font-weight: 600 !important; color: var(--text-primary) !important; margin-bottom: 8px !important; } body.login .forget-form > p { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px !important; } body.login .forget-form .form-actions { margin-top: 20px !important; justify-content: space-between !important; } body.login #back-btn { background: transparent !important; border: 1.5px solid var(--input-border) !important; color: var(--text-secondary) !important; border-radius: 8px !important; padding: 10px 20px !important; font-size: 13px !important; font-family: 'Inter', sans-serif !important; cursor: pointer; transition: border-color 0.2s, color 0.2s !important; } body.login #back-btn:hover { border-color: var(--brand-primary) !important; color: var(--brand-primary) !important; } body.login input[type="submit"].btn.green { background: var(--brand-primary) !important; color: #ffffff !important; border: none !important; border-radius: 8px !important; padding: 11px 28px !important; font-size: 14px !important; font-weight: 600 !important; font-family: 'Inter', sans-serif !important; cursor: pointer !important; box-shadow: 0 2px 8px rgba(0, 87, 184, 0.35) !important; } /* ─── Copyright-Footer ─────────────────────────────────────────────── */ body.login .copyright { margin-top: 20px !important; text-align: center !important; font-size: 12px !important; color: rgba(255, 255, 255, 0.65) !important; line-height: 1.8 !important; } body.login .copyright a { color: rgba(255, 255, 255, 0.75) !important; text-decoration: none !important; transition: color 0.15s !important; } body.login .copyright a:hover { color: #ffffff !important; } /* ─── Responsive ───────────────────────────────────────────────────── */ @media (max-width: 480px) { body.login .content { padding: 32px 24px 28px !important; border-radius: 12px !important; } body.login .content > p:first-child img { width: 180px !important; } } /* ─── Optionaler Blur-Effekt auf dem Hintergrund ───────────────────── */ body.login::before { content: ''; position: fixed; inset: 0; background: inherit; filter: blur(0px); /* auf z.B. blur(4px) setzen für stärkeren Unschärfe-Effekt */ z-index: -1; }