*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:2rem;color:#333}
.login-container{max-width:400px;margin:10% auto;background:white;padding:2rem;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.3)}
.login-container h2{margin-bottom:1.5rem;color:#667eea;text-align:center}
.login-form .form-group{margin-bottom:1.5rem}
.login-form label{display:block;margin-bottom:0.5rem;font-weight:600;color:#555}
.login-form input{width:100%;padding:0.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem}
.login-form input:focus{outline:none;border-color:#667eea}
.login-error{color:#e74c3c;margin-top:0.5rem;font-size:0.9rem;display:none}
.user-info{display:flex;align-items:center;gap:0.5rem;background:rgba(255,255,255,0.15);padding:0.5rem 1rem;border-radius:8px}
.user-info span{font-weight:600;color:white;margin-right:0.5rem}
.logout-btn{background:#e74c3c;color:white;border:none;padding:0.5rem 1rem;border-radius:5px;cursor:pointer;font-size:0.9rem}
.logout-btn:hover{background:#c0392b}
.main-app{display:none}
.main-app.active{display:block}
.container{max-width:1600px;margin:0 auto;width:100%}
#personenTab{width:100%;max-width:1600px;margin:0 auto}
#personenTab .main-content{width:100%;max-width:1600px;margin:0 auto}
#personenTab .data-section{width:100%;max-width:1600px;margin:0 auto}
#personenTab,#tagsTab,#institutionenTab,#qualifikationenTab,#statistikenTab,#auswertungenTab,#exportimportTab,#datensicherungTab,#usersTab,#veranstaltungenTab,#urostatistixTab,#sucheTab{width:100%;max-width:1600px;box-sizing:border-box;margin:0 auto}
#personenTab .main-content,#tagsTab .main-content,#institutionenTab .main-content,#qualifikationenTab .main-content,#statistikenTab .main-content,#auswertungenTab .main-content,#exportimportTab .main-content,#datensicherungTab .main-content,#usersTab .main-content,#veranstaltungenTab .main-content,#urostatistixTab .main-content{width:100%;max-width:1600px;box-sizing:border-box;margin:0 auto}
#personenTab .data-section,#tagsTab .data-section,#institutionenTab .data-section,#qualifikationenTab .data-section,#statistikenTab .data-section,#auswertungenTab .data-section,#exportimportTab .data-section,#datensicherungTab .data-section,#usersTab .data-section,#veranstaltungenTab .data-section,#urostatistixTab .data-section{width:100%;max-width:1600px;box-sizing:border-box;margin:0 auto}
#personenTab .input-section,#tagsTab .input-section,#institutionenTab .input-section,#veranstaltungenTab .input-section,#urostatistixTab .input-section{width:100%;max-width:100%;box-sizing:border-box}
header{text-align:center;color:white;margin-bottom:2rem}
header h1{font-size:2.5rem;margin-bottom:0.5rem}
.tabs{display:flex;flex-wrap:wrap;gap:0.4rem;margin-bottom:1.5rem;background:white;padding:0.5rem;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,0.1)}
.tab-button{flex:1;min-width:120px;padding:0.5rem 0.5rem;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:6px;font-size:0.9rem;font-weight:600;cursor:pointer;color:white;transition:all 0.3s;text-align:center}
.tab-button:hover{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);opacity:0.9}
.tab-button.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white}
.tab-button.active span{opacity:1!important}
.tab-button.has-unread-emails{background:linear-gradient(135deg,#e74c3c 0%,#c0392b 100%)!important;animation:pulse-red 2s infinite}
@keyframes pulse-red{0%,100%{opacity:1}50%{opacity:0.8}}
.tab-content{display:none;width:100%;max-width:1600px;margin:0 auto}
.tab-content.active{display:block!important;width:100%;max-width:1600px;margin:0 auto}
#sucheTab{min-height:400px;padding:1rem 0}
#sucheTab.active{display:block!important;width:100%;max-width:1600px;margin:0 auto;min-height:400px;padding:1rem 0}
#personenTab,#tagsTab,#institutionenTab,#qualifikationenTab,#statistikenTab,#auswertungenTab,#exportimportTab,#datensicherungTab,#usersTab,#veranstaltungenTab,#urostatistixTab,#sucheTab{max-width:1600px!important;margin:0 auto!important}
#personenTab.active,#tagsTab.active,#institutionenTab.active,#qualifikationenTab.active,#statistikenTab.active,#auswertungenTab.active,#exportimportTab.active,#datensicherungTab.active,#usersTab.active,#veranstaltungenTab.active,#urostatistixTab.active,#sucheTab.active{max-width:1600px!important;margin:0 auto!important}
/* filterContent soll nur im Filter-Tab (auswertungenTab) sichtbar sein */
#usersTab #filterContent{display:none!important}
#auswertungenTab #filterContent{display:block}
.main-content{display:grid;grid-template-columns:1fr 2fr;gap:2rem;width:100%;max-width:1600px;margin:0 auto}
.main-content.form-hidden{display:block;width:100%;max-width:1600px;margin:0 auto}
.main-content.form-visible{grid-template-columns:1fr;width:100%;max-width:1600px;margin:0 auto}
#personenTab .main-content,#tagsTab .main-content,#institutionenTab .main-content,#qualifikationenTab .main-content,#statistikenTab .main-content,#auswertungenTab .main-content,#exportimportTab .main-content,#datensicherungTab .main-content,#usersTab .main-content,#veranstaltungenTab .main-content,#urostatistixTab .main-content{max-width:1600px!important;margin:0 auto!important}
#personenTab .main-content.form-hidden,#tagsTab .main-content.form-hidden,#institutionenTab .main-content.form-hidden,#qualifikationenTab .main-content.form-hidden,#statistikenTab .main-content.form-hidden,#auswertungenTab .main-content.form-hidden,#exportimportTab .main-content.form-hidden,#datensicherungTab .main-content.form-hidden,#usersTab .main-content.form-hidden,#veranstaltungenTab .main-content.form-hidden,#urostatistixTab .main-content.form-hidden{max-width:1600px!important;margin:0 auto!important}
#personenTab .main-content.form-visible,#tagsTab .main-content.form-visible,#institutionenTab .main-content.form-visible,#qualifikationenTab .main-content.form-visible,#statistikenTab .main-content.form-visible,#auswertungenTab .main-content.form-visible,#exportimportTab .main-content.form-visible,#datensicherungTab .main-content.form-visible,#usersTab .main-content.form-visible,#veranstaltungenTab .main-content.form-visible,#urostatistixTab .main-content.form-visible{max-width:1600px!important;margin:0 auto!important}
#personenTab .main-content.form-hidden,#tagsTab .main-content.form-hidden,#institutionenTab .main-content.form-hidden,#qualifikationenTab .main-content.form-hidden,#statistikenTab .main-content.form-hidden,#auswertungenTab .main-content.form-hidden,#exportimportTab .main-content.form-hidden,#datensicherungTab .main-content.form-hidden,#usersTab .main-content.form-hidden,#veranstaltungenTab .main-content.form-hidden,#urostatistixTab .main-content.form-hidden{width:100%;max-width:1600px;min-width:100%;margin:0 auto}
#personenTab .main-content.form-visible,#tagsTab .main-content.form-visible,#institutionenTab .main-content.form-visible,#qualifikationenTab .main-content.form-visible,#statistikenTab .main-content.form-visible,#auswertungenTab .main-content.form-visible,#exportimportTab .main-content.form-visible,#datensicherungTab .main-content.form-visible,#usersTab .main-content.form-visible,#veranstaltungenTab .main-content.form-visible,#urostatistixTab .main-content.form-visible{width:100%;max-width:1600px;min-width:100%;margin:0 auto}
#personenTab .data-section,#tagsTab .data-section,#institutionenTab .data-section,#qualifikationenTab .data-section,#statistikenTab .data-section,#auswertungenTab .data-section,#exportimportTab .data-section,#datensicherungTab .data-section,#usersTab .data-section,#veranstaltungenTab .data-section,#urostatistixTab .data-section,#sucheTab .data-section{width:100%;max-width:1600px;min-width:100%}
#personenTab .main-content:not(.form-hidden) .data-section,#tagsTab .main-content:not(.form-hidden) .data-section,#institutionenTab .main-content:not(.form-hidden) .data-section{flex:1}
.input-section{max-width:100%;overflow-x:auto;width:100%}
.input-section.visible{width:100%;display:block}
.input-section,.data-section{background:white;padding:2rem;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.2);width:100%;max-width:1600px;box-sizing:border-box;margin:0 auto}
#personenTab .data-section,#tagsTab .data-section,#institutionenTab .data-section,#qualifikationenTab .data-section,#statistikenTab .data-section,#auswertungenTab .data-section,#exportimportTab .data-section,#datensicherungTab .data-section,#usersTab .data-section,#veranstaltungenTab .data-section,#urostatistixTab .data-section,#sucheTab .data-section{max-width:1600px!important;margin:0 auto!important}
.input-section{display:none;min-width:100%}
.input-section.visible{display:block}
.data-section.hidden{display:none}
.form-sections{display:flex;flex-direction:column;gap:1.5rem;margin-top:1.5rem}
.form-section-tabs{display:flex;gap:0.5rem;margin-bottom:1.5rem;background:white;padding:0.75rem;border-radius:10px;box-shadow:0 2px 8px rgba(0,0,0,0.1);flex-wrap:wrap;overflow-x:visible}
.form-section-tab{flex:0 1 auto;min-width:120px;max-width:200px;padding:0.7rem 0.9rem;background:transparent;border:none;border-radius:6px;font-size:0.9rem;font-weight:600;cursor:pointer;color:#666;transition:all 0.3s;text-align:center;white-space:nowrap}
.form-section-tab:hover{background:#f0f0f0}
.form-section-tab.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white}
.form-section-content-wrapper{background:#f8f9fa;padding:1.5rem;border-radius:10px;border:2px solid #e0e0e0;min-height:200px}
.form-section-content{display:none}
.form-section-content.active{display:block}
.form-section-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem}
/* Unterreiter für Kommunikation */
.kommunikation-sub-tabs{display:flex;gap:0.5rem;margin-bottom:1rem;background:white;padding:0.5rem;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,0.1)}
.kommunikation-sub-tab{flex:0 1 auto;min-width:100px;padding:0.6rem 1rem;background:transparent;border:1px solid #e0e0e0;border-radius:6px;font-size:0.9rem;font-weight:600;cursor:pointer;color:#666;transition:all 0.3s;text-align:center}
.kommunikation-sub-tab:hover{background:#f0f0f0;border-color:#667eea}
.kommunikation-sub-tab.active{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border-color:#667eea}
.kommunikation-sub-content-wrapper{background:#f8f9fa;padding:1rem;border-radius:8px;border:1px solid #e0e0e0;min-height:200px}
.kommunikation-sub-content{display:none}
.kommunikation-sub-content.active{display:block}
h2{margin-bottom:1.5rem;color:#667eea}
.form-group{margin-bottom:1.5rem}
label{display:block;margin-bottom:0.5rem;font-weight:600;color:#555}
input[type="text"],input[type="date"],input[type="email"],input[type="color"],select,textarea{width:100%;padding:0.75rem;border:2px solid #e0e0e0;border-radius:8px;font-size:1rem;font-family:inherit}
input[type="text"]:focus,input[type="date"]:focus,input[type="email"]:focus,input[type="color"]:focus,select:focus,textarea:focus{outline:none;border-color:#667eea}
input[type="color"]{height:50px;cursor:pointer}
textarea{resize:vertical;min-height:80px}
#imagesContainer img{transition:transform 0.2s}
#imagesContainer img:hover{transform:scale(1.05)}
#imagesContainer button:hover{background:#c0392b}
.btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:0.6rem 1.5rem;border-radius:6px;font-size:0.9rem;font-weight:600;cursor:pointer;width:100%}
.btn:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,0.4)}
table{width:100%;border-collapse:collapse}
thead{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white}
th,td{padding:1rem;text-align:left}
th{font-weight:600}
td{border-bottom:1px solid #e0e0e0}
#personenTab table{font-size:0.85rem}
#personenTab th,#personenTab td{padding:0.75rem;font-size:0.85rem}
tbody tr:hover{background-color:#f5f5f5}
.empty-state{text-align:center;padding:3rem;color:#999}
.btn-delete{background:#e74c3c;color:white;border:none;padding:0.35rem 0.75rem;border-radius:4px;cursor:pointer;margin-right:0.4rem;font-size:0.85rem}
.btn-delete:hover{background:#c0392b}
.btn-edit{background:#3498db;color:white;border:none;padding:0.35rem 0.75rem;border-radius:4px;cursor:pointer;margin-right:0.4rem;font-size:0.85rem}
.btn-edit:hover{background:#2980b9}
.btn-cancel{background:#95a5a6;color:white;border:none;padding:0.4rem 0.9rem;border-radius:6px;font-size:0.9rem;font-weight:600;cursor:pointer;width:100%;margin-top:0.5rem}
.btn-cancel:hover{background:#7f8c8d}
.data-management{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}
.btn-export{background:#27ae60;color:white;border:none;padding:0.5rem 1.2rem;border-radius:6px;font-size:0.85rem;font-weight:600;cursor:pointer}
footer{text-align:center;padding:2rem;color:white;background:rgba(0,0,0,0.2);margin-top:3rem;border-radius:10px}
footer a{color:white;text-decoration:underline;margin:0 1rem;transition:opacity 0.3s}
footer a:hover{opacity:0.8}
.btn-export:hover{background:#229954}
.btn-import{background:#f39c12;color:white;border:none;padding:0.5rem 1.2rem;border-radius:6px;font-size:0.85rem;font-weight:600;cursor:pointer;position:relative}
.btn-import:hover{background:#e67e22}
.btn-import input[type="file"]{position:absolute;opacity:0;width:100%;height:100%;cursor:pointer;top:0;left:0}
.import-label{display:inline-block;cursor:pointer}
.save-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:2000;justify-content:center;align-items:center}
.save-popup.active{display:flex}
.save-popup-content{background:white;padding:2rem;border-radius:15px;box-shadow:0 10px 30px rgba(0,0,0,0.3);max-width:500px;width:90%;max-height:80vh;overflow-y:auto}
.save-popup-content h3{margin-bottom:1.5rem;color:#667eea;text-align:center;font-size:1.5rem}
.save-popup-info{display:grid;gap:1rem;margin-bottom:1.5rem}
.save-popup-info-item{display:flex;justify-content:space-between;padding:0.75rem;background:#f8f9fa;border-radius:8px;border-left:4px solid #667eea}
.save-popup-info-label{font-weight:600;color:#555}
.save-popup-info-value{color:#333;text-align:right;word-break:break-all}
.save-popup-status{text-align:center;padding:1rem;border-radius:8px;margin-bottom:1rem;font-weight:600}
.save-popup-status.success{background:#d4edda;color:#155724;border:2px solid #c3e6cb}
.save-popup-status.warning{background:#fff3cd;color:#856404;border:2px solid #ffeaa7}
.save-popup-close{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:white;border:none;padding:0.75rem 2rem;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;width:100%;margin-top:1rem}
.save-popup-close:hover{transform:translateY(-2px);box-shadow:0 5px 15px rgba(102,126,234,0.4)}
.toast{position:fixed;top:20px;right:20px;background:white;padding:1rem 1.5rem;border-radius:8px;box-shadow:0 5px 20px rgba(0,0,0,0.3);z-index:3000;min-width:300px;max-width:500px;display:none;animation:slideIn 0.3s ease-out}
.toast.show{display:block}
.toast.success{border-left:4px solid #27ae60}
.toast.error{border-left:4px solid #e74c3c}
.toast.warning{border-left:4px solid #f39c12}
.toast.info{border-left:4px solid #3498db}
.toast-title{font-weight:600;margin-bottom:0.5rem;color:#333}
.toast-message{color:#666;font-size:0.9rem;line-height:1.4}
.toast-close{position:absolute;top:0.5rem;right:0.5rem;background:none;border:none;font-size:1.2rem;cursor:pointer;color:#999;padding:0.25rem 0.5rem}
.toast-close:hover{color:#333}
@keyframes slideIn{from{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}
.person-search-result:hover{background:#f0f0f0!important;border-color:#667eea!important;transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,0.1)}
@media (max-width:768px){.main-content{grid-template-columns:1fr}.toast{right:10px;left:10px;min-width:auto;max-width:none}}