*{margin:0;padding:0;box-sizing:border-box}body{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;background:linear-gradient(135deg,#f5e6f5 0%,#e6f2f5 50%,#f5f0e6 100%);min-height:100vh;color:#5a4d6e}.app-container{display:flex;min-height:100vh}.sidebar{width:280px;background:rgba(255,255,255,0.1);backdrop-filter:blur(10px);border-right:1px solid rgba(255,255,255,0.2);padding:30px 20px;position:fixed;height:100vh;overflow-y:auto}.sidebar-logo{display:flex;align-items:center;gap:12px;margin-bottom:40px;padding:15px;background:rgba(192,132,216,0.1);border-radius:12px}.sidebar-logo i{font-size:24px;color:#c084d8}.sidebar-logo h2{font-size:18px;background:linear-gradient(135deg,#c084d8 0%,#b896f0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.nav-menu{list-style:none}.nav-item{margin-bottom:8px}.nav-link{display:flex;align-items:center;gap:12px;padding:12px 16px;color:#8b7fa0;text-decoration:none;border-radius:10px;transition:all 0.3s ease;cursor:pointer;font-size:14px;font-weight:500;border:none;background:none;width:100%;text-align:left}.nav-link:hover,.nav-link.active{background:rgba(192,132,216,0.15);color:#c084d8}.nav-link i{font-size:16px;width:20px}.sidebar-footer{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,0.1)}.user-info{display:flex;align-items:center;gap:12px;padding:12px;background:rgba(192,132,216,0.08);border-radius:10px;margin-bottom:15px}.user-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#c084d8 0%,#b896f0 100%);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:16px}.user-details h3{font-size:12px;color:#8b7fa0;text-transform:uppercase;letter-spacing:0.5px;margin-bottom:2px}.user-details p{font-size:14px;color:#5a4d6e;font-weight:600}.logout-btn{width:100%;padding:10px;background:rgba(220,100,130,0.15);border:1px solid rgba(220,100,130,0.3);color:#8b3a52;border-radius:8px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;gap:8px;font-size:13px;font-weight:500}.logout-btn:hover{background:rgba(220,100,130,0.25)}.main-content{margin-left:280px;flex:1;padding:40px;overflow-y:auto}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:40px}.header h1{font-size:32px;color:#5a4d6e;font-weight:700}.btn-primary{padding:12px 24px;background:linear-gradient(135deg,#c084d8 0%,#b896f0 100%);color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:600;transition:all 0.3s ease;display:flex;align-items:center;gap:8px;font-size:14px}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(192,132,216,0.3)}.btn-primary.hosting{background:linear-gradient(135deg,#6ba3b8 0%,#7eb8cd 100%)}.btn-primary.hosting:hover{box-shadow:0 12px 30px rgba(107,163,184,0.3)}.btn-primary.domains{background:linear-gradient(135deg,#d4a574 0%,#deb589 100%)}.btn-primary.domains:hover{box-shadow:0 12px 30px rgba(212,165,116,0.3)}.cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:25px;margin-bottom:40px}.card{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);border-radius:16px;padding:25px;transition:all 0.3s ease}.card:hover{background:rgba(255,255,255,0.2);transform:translateY(-5px);border-color:rgba(255,255,255,0.4)}.card-icon{font-size:32px;color:#c084d8;margin-bottom:15px}.card.hosting .card-icon{color:#6ba3b8}.card.domains .card-icon{color:#d4a574}.card h3{font-size:18px;margin-bottom:10px;color:#5a4d6e}.card p{font-size:36px;font-weight:700;color:#c084d8;margin-bottom:5px}.card.hosting p{color:#6ba3b8}.card.domains p{color:#d4a574}.card-label{font-size:12px;color:#8b7fa0;text-transform:uppercase;letter-spacing:0.5px}.projects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:25px;margin-bottom:40px}.project-card{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);border-radius:16px;padding:25px;transition:all 0.3s ease}.project-card:hover{background:rgba(255,255,255,0.2);transform:translateY(-5px);border-color:rgba(255,255,255,0.4)}.project-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:15px}.project-title{font-size:18px;font-weight:600;color:#c084d8;flex:1}.project-actions{display:flex;gap:8px}.project-actions button{background:rgba(192,132,216,0.2);border:none;color:#c084d8;width:32px;height:32px;border-radius:8px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;font-size:14px}.project-actions button:hover{background:rgba(192,132,216,0.3)}.project-status{display:inline-block;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px;margin-bottom:15px}.status-geplant{background:rgba(200,180,200,0.2);color:#6b5678}.status-in_arbeit{background:rgba(255,180,100,0.2);color:#b8630a}.status-abgeschlossen{background:rgba(100,200,150,0.2);color:#3a7f52}.status-archiviert{background:rgba(150,150,150,0.2);color:#5a5a5a}.project-description{color:#8b7fa0;font-size:13px;line-height:1.5;margin-bottom:15px}.project-meta{display:flex;gap:15px;font-size:12px;color:#8b7fa0;padding-top:15px;border-top:1px solid rgba(255,255,255,0.1)}.project-meta span{display:flex;align-items:center;gap:5px}.table-container{background:rgba(255,255,255,0.15);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.3);border-radius:16px;overflow:hidden}.table-header{background:rgba(255,255,255,0.1);padding:20px 25px;border-bottom:1px solid rgba(255,255,255,0.2)}.table-header h2{font-size:18px;color:#5a4d6e;display:flex;align-items:center;gap:10px}.table-header.hosting h2 i{color:#6ba3b8}.table-header.domains h2 i{color:#d4a574}table{width:100%;border-collapse:collapse}th{padding:15px 25px;text-align:left;font-weight:600;color:#8b7fa0;font-size:12px;text-transform:uppercase;letter-spacing:0.5px;background:rgba(255,255,255,0.05)}td{padding:15px 25px;border-top:1px solid rgba(255,255,255,0.1);color:#5a4d6e;font-size:14px}tr:hover{background:rgba(255,255,255,0.1)}.action-buttons{display:flex;gap:8px}.action-buttons button{background:rgba(192,132,216,0.2);border:none;color:#c084d8;width:32px;height:32px;border-radius:8px;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;font-size:14px}.action-buttons button:hover{background:rgba(192,132,216,0.3)}.table-container.hosting .action-buttons button{background:rgba(107,163,184,0.2);color:#6ba3b8}.table-container.hosting .action-buttons button:hover{background:rgba(107,163,184,0.3)}.table-container.domains .action-buttons button{background:rgba(212,165,116,0.2);color:#d4a574}.table-container.domains .action-buttons button:hover{background:rgba(212,165,116,0.3)}.badge{display:inline-block;padding:6px 12px;border-radius:8px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.3px}.badge-success{background:rgba(100,200,150,0.2);color:#3a7f52}.badge-bezahlt{background:rgba(100,200,150,0.2);color:#3a7f52}.badge-ausstehend{background:rgba(255,180,100,0.2);color:#b8630a}.badge-ueberfaellig{background:rgba(220,100,130,0.15);color:#8b3a52}.badge-aktiv{background:rgba(100,200,150,0.2);color:#3a7f52}.badge-auslaufend{background:rgba(255,180,100,0.2);color:#b8630a}.badge-abgelaufen{background:rgba(220,100,130,0.15);color:#8b3a52}.empty-state{text-align:center;padding:60px 40px;color:#8b7fa0}.empty-state i{font-size:48px;margin-bottom:20px;opacity:0.5}.empty-state h3{font-size:18px;margin-bottom:10px;color:#5a4d6e}.modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.2);backdrop-filter:blur(3px);z-index:1000;align-items:center;justify-content:center}.modal.show{display:flex}.modal-content{background:rgba(255,255,255,0.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.3);border-radius:20px;padding:40px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,0.3)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.modal-header h2{font-size:24px;color:#5a4d6e}.modal-close{background:none;border:none;color:#8b7fa0;font-size:24px;cursor:pointer;transition:color 0.3s ease}.modal-close:hover{color:#c084d8}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;color:#5a4d6e;font-weight:500;font-size:13px;text-transform:uppercase;letter-spacing:0.5px}.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px;background:rgba(255,255,255,0.6);border:1px solid rgba(192,132,216,0.3);border-radius:10px;color:#5a4d6e;font-size:14px;transition:all 0.3s ease;font-family:inherit}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;background:rgba(255,255,255,0.8);border-color:rgba(192,132,216,0.5);box-shadow:0 0 10px rgba(192,132,216,0.2)}.form-group textarea{resize:vertical;min-height:100px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-actions{display:flex;gap:10px;margin-top:30px}.btn-save{flex:1;padding:12px;background:linear-gradient(135deg,#c084d8 0%,#b896f0 100%);color:#fff;border:none;border-radius:10px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.btn-save:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(192,132,216,0.3)}.btn-save.hosting{background:linear-gradient(135deg,#6ba3b8 0%,#7eb8cd 100%)}.btn-save.hosting:hover{box-shadow:0 12px 30px rgba(107,163,184,0.3)}.btn-save.domains{background:linear-gradient(135deg,#d4a574 0%,#deb589 100%)}.btn-save.domains:hover{box-shadow:0 12px 30px rgba(212,165,116,0.3)}.btn-cancel{flex:1;padding:12px;background:rgba(192,132,216,0.1);color:#c084d8;border:1px solid rgba(192,132,216,0.3);border-radius:10px;font-weight:600;cursor:pointer;transition:all 0.3s ease}.btn-cancel:hover{background:rgba(192,132,216,0.2)}@media(max-width:768px){.sidebar{width:250px;padding:20px 15px}.main-content{margin-left:250px;padding:20px}.header{flex-direction:column;gap:20px;align-items:flex-start}.header h1{font-size:24px}.cards-grid{grid-template-columns:1fr}.projects-grid{grid-template-columns:1fr}.form-row{grid-template-columns:1fr}}
.project-notes-section{margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,0.1)}.project-notes-section h4{font-size:13px;color:#5a4d6e;margin-bottom:10px;text-transform:uppercase;letter-spacing:0.5px}.notes-list{background:rgba(255,255,255,0.05);border-radius:8px;padding:10px;margin-bottom:10px}.note-item{background:rgba(255,255,255,0.1);padding:10px;border-radius:6px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:start;gap:10px}.note-item p{font-size:12px;color:#5a4d6e;margin:0;flex:1}.note-item small{font-size:11px;color:#8b7fa0;white-space:nowrap}.note-delete{background:none;border:none;color:#d4a574;cursor:pointer;font-size:12px;opacity:0.6;transition:opacity 0.3s}.note-delete:hover{opacity:1}.no-notes{font-size:12px;color:#8b7fa0;font-style:italic}.note-btn{background:rgba(192,132,216,0.2);color:#c084d8;border:none;padding:6px 10px;border-radius:6px;font-size:12px;cursor:pointer;transition:all 0.3s;width:100%;margin-top:8px}.note-btn:hover{background:rgba(192,132,216,0.3)}
.header{z-index:10;position:relative}.btn-primary{z-index:11}.modal{z-index:1000}footer{background:rgba(255,255,255,0.05);border-top:1px solid rgba(255,255,255,0.1);padding:20px;text-align:center;font-size:12px;color:#8b7fa0;margin-top:40px}footer a{color:#c084d8;text-decoration:none;transition:color 0.3s}footer a:hover{color:#b896f0;text-decoration:underline}footer p{margin:8px 0}
.tabs{display:flex;gap:10px;margin-bottom:25px;border-bottom:2px solid rgba(255,255,255,0.1)}.tab-btn{background:none;border:none;color:#8b7fa0;padding:12px 16px;cursor:pointer;font-weight:500;font-size:13px;border-bottom:3px solid transparent;transition:all 0.3s;text-transform:uppercase;letter-spacing:0.5px}.tab-btn:hover{color:#c084d8;background:rgba(192,132,216,0.05)}.tab-btn.active{color:#c084d8;border-bottom-color:#c084d8;background:rgba(192,132,216,0.1)}
.confirm-dialog{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);backdrop-filter:blur(5px);z-index:2000;align-items:center;justify-content:center}.confirm-dialog.show{display:flex}.confirm-content{background:rgba(255,255,255,0.95);border-radius:20px;padding:30px;max-width:400px;box-shadow:0 20px 60px rgba(0,0,0,0.3);text-align:center}.confirm-content h3{color:#5a4d6e;margin-bottom:15px;font-size:18px}.confirm-content p{color:#8b7fa0;margin-bottom:25px}.confirm-buttons{display:flex;gap:10px;justify-content:center}.confirm-btn{padding:10px 25px;border:none;border-radius:10px;cursor:pointer;font-weight:600;transition:all 0.3s}.confirm-cancel{background:rgba(192,132,216,0.1);color:#c084d8;border:1px solid rgba(192,132,216,0.3)}.confirm-cancel:hover{background:rgba(192,132,216,0.2)}.confirm-ok{background:linear-gradient(135deg,#c084d8 0%,#b896f0 100%);color:#fff}.confirm-ok:hover{box-shadow:0 8px 20px rgba(192,132,216,0.3);transform:translateY(-2px)}