.login-box {
    width: 300px;
    margin: 20px auto;
    padding: 15px;
    border: 1px solid #aaa;
    background: #f9f9f9;
    border-radius: 8px;
}
.login-box input {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
}
.login-box button {
    width: 100%;
    padding: 10px;
    background: #007BFF;
    color: #fff;
    border: none;
}
.login-box .error {
    color: red;
}
/* Registrierung Formular Styling */
.register-form {
    max-width: 400px;
    margin: 30px auto;
    padding: 25px;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: #333;
}

.register-form h2 {
    text-align: center;
    margin-bottom: 20px;
    font-weight: 600;
}

.register-form label {
    display: block;
    margin-top: 15px;
    font-weight: 600;
}

.register-form input[type="text"],
.register-form input[type="email"],
.register-form input[type="password"],
.register-form select {
    width: 100%;
    padding: 8px 10px;
    margin-top: 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
    transition: border-color 0.3s ease;
}

.register-form input[type="text"]:focus,
.register-form input[type="email"]:focus,
.register-form input[type="password"]:focus,
.register-form select:focus {
    border-color: #007bff;
    outline: none;
}

.register-form button {
    width: 100%;
    margin-top: 25px;
    padding: 12px 0;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    color: white;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.register-form button:hover {
    background-color: #0056b3;
}

.error-message {
    color: #cc0000;
    text-align: center;
    margin-top: 15px;
    font-weight: 600;
}

.success-message {
    color: #008000;
    text-align: center;
    margin-top: 15px;
    font-weight: 600;
}

/* Frontend: Kontokarte und Dialog */
.login-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: 1px solid #dbe5ec;
    border-radius: 12px;
    background: linear-gradient(180deg, #fff 0%, #f5f8fa 100%);
    box-shadow: 0 5px 16px rgba(25, 55, 75, 0.08);
    box-sizing: border-box;
    color: #263746;
}
.login-panel-heading { display:flex; align-items:center; gap:9px; color:#263746; font-size:17px; font-weight:700; line-height:1.2; }
.login-panel-icon { position:relative; width:30px; height:30px; flex:0 0 30px; border-radius:50%; background:#e4f1fa; }
.login-panel-icon::before { content:""; position:absolute; left:50%; top:6px; width:8px; height:8px; transform:translateX(-50%); border-radius:50%; background:#2e7fc1; }
.login-panel-icon::after { content:""; position:absolute; left:50%; bottom:5px; width:16px; height:8px; transform:translateX(-50%); border-radius:9px 9px 5px 5px; background:#2e7fc1; }
.login-panel-intro { margin:0; color:#647482; font-size:13px; line-height:1.45; }
.login-primary-button,
.login-logout-button { display:block; padding:10px 12px; border-radius:8px; background:#2e7fc1; color:#fff !important; font-size:14px; font-weight:700; line-height:1.2; text-align:center; text-decoration:none !important; box-shadow:0 2px 5px rgba(46,127,193,.22); transition:background .2s ease, transform .2s ease; }
.login-primary-button:hover,
.login-logout-button:hover { background:#24689f; transform:translateY(-1px); }
.login-panel-links { display:flex; flex-wrap:wrap; justify-content:center; gap:5px 12px; padding-top:1px; }
.login-panel-links a { color:#42657d !important; font-size:12px; line-height:1.35; text-decoration:none !important; }
.login-panel-links a:hover { color:#2e7fc1 !important; text-decoration:underline !important; }
.login-user-box { text-align:center; min-width:90px; }
.login-profile-link { display:inline-flex; align-items:center; justify-content:center; gap:6px; color:#263746 !important; font-weight:700; text-decoration:none !important; }
.login-profile-link:hover { color:#2e7fc1 !important; text-decoration:underline !important; }
.login-last-online { display:block; margin-top:5px; color:#647482; font-size:11px; line-height:1.35; }
.login-profile-avatar { width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:50% 50%; border:2px solid rgba(255,255,255,.85); background:#fff; }
.login-profile-placeholder { position:relative; width:28px; height:28px; flex:0 0 28px; border-radius:50%; border:2px solid rgba(255,255,255,.85); background:linear-gradient(180deg,#edf4fa 0%,#dbe9f3 100%); overflow:hidden; box-sizing:border-box; }
.login-profile-placeholder::before { content:""; position:absolute; left:50%; top:5px; width:8px; height:8px; transform:translateX(-50%); border-radius:50%; background:#8ea6b8; }
.login-profile-placeholder::after { content:""; position:absolute; left:50%; bottom:3px; width:18px; height:10px; transform:translateX(-50%); border-radius:10px 10px 4px 4px; background:#8ea6b8; }
.login-post-hint { display:inline-block; margin-top:3px; padding:2px 6px; border-radius:10px; background:#fde68a; color:#f00; font-size:11px; font-weight:bold; text-decoration:none; }
.login-post-hint:hover { background:#facc15; color:#7c2d12; }
.login-message { margin:6px 0 0; font-size:12px; font-weight:bold; }
.login-message.success { color:#27844a; }

.overlay { position:fixed; inset:0; width:100%; height:100%; background:rgba(0,0,0,.6); display:none; align-items:center; justify-content:center; z-index:1000; }
.overlay-content { background:#fff; color:#263746; padding:20px 30px; border-radius:12px; width:400px; max-width:90%; box-shadow:0 8px 25px rgba(0,0,0,.3); position:relative; box-sizing:border-box; font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif; animation:loginFadeIn .3s ease-in-out; }
.closebtn { position:absolute; top:10px; right:15px; cursor:pointer; font-size:26px; color:#555; transition:color .2s; }
.closebtn:hover { color:#2e7fc1; }
.overlay-content h2 { margin:0 0 10px; color:#2e7fc1; font-size:24px; text-align:center; }
.overlay-content label { display:block; margin-top:5px; color:#333 !important; font-weight:600; }
.overlay-content input[type="text"],
.overlay-content input[type="password"],
.overlay-content input[type="email"],
.overlay-content select { width:100%; padding:8px 10px; margin-top:3px; border:1px solid #ccc; border-radius:6px; box-sizing:border-box; color:#222; font-size:14px; transition:border .2s, box-shadow .2s; }
.overlay-content input:focus,
.overlay-content select:focus { border-color:#2e7fc1; box-shadow:0 0 6px rgba(46,127,193,.3); outline:none; }
.overlay-content button { width:100%; padding:10px; margin-top:5px; background:#2e7fc1; color:#fff; font-size:16px; border:0; border-radius:6px; cursor:pointer; transition:background .3s; }
.overlay-content button:hover { background:#2565a2; }
.overlay-content p.error { color:#c0392b; font-weight:bold; margin:0 0 5px; text-align:center; }
.overlay-content p.success { color:#27844a; font-weight:bold; margin:0 0 5px; text-align:center; }
.password-wrapper { position:relative; display:inline-block; width:100%; margin-bottom:10px; }
.password-wrapper input { width:calc(100% - 30px); }
.password-wrapper .toggle-pass { position:absolute; right:5px; top:50%; transform:translateY(-50%); cursor:pointer; }
@keyframes loginFadeIn { from { opacity:0; } to { opacity:1; } }