*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --petrol:#1a4a4a;--petrol-light:#7bbfbf;--petrol-mid:#2d6b6b;--petrol-pale:#e8f4f4;
  --white:#ffffff;--text-muted:#6b9a9a;--border:rgba(26,74,74,0.12);
  --radius:16px;--radius-sm:10px;--radius-xs:8px;--danger:#c0392b;
  --success-bg:#d4edda;--success-text:#155724;
  --text-xs:12px;--text-sm:14px;--text-base:16px;--text-md:18px;
  --text-lg:20px;--text-xl:24px;--text-2xl:32px;
  --leading-tight:1.2;--leading-normal:1.5;--leading-loose:1.65;
  --space-xs:4px;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:32px;
}
html,body{height:100%;overflow:hidden;background:#f0f7f7;font-family:'Inter',sans-serif;font-size:var(--text-base);color:var(--petrol);-webkit-font-smoothing:antialiased}
.app{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--white);display:flex;flex-direction:column;max-width:430px;margin:0 auto}
@media(min-width:431px){.app{top:5vh;bottom:5vh;border-radius:32px;box-shadow:0 24px 64px rgba(26,74,74,0.2)}} @media(max-width:430px){html,body{background:var(--petrol)} .app{border-radius:0}}
.screen{display:none;flex-direction:column;position:absolute;top:0;left:0;right:0;bottom:0;overflow:hidden}
.screen.active{display:flex}
.scroll-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.header{background:var(--petrol);padding:52px 24px 28px;position:relative;overflow:hidden;flex-shrink:0}
.header-fp{position:absolute;right:-60px;bottom:-80px;font-size:280px;color:white;opacity:0.05;line-height:1;pointer-events:none}
.logo{font-family:'Charis SIL',serif;font-size:var(--text-2xl);color:var(--white)}
.logo-brackets{color:var(--petrol-light)}
.logo-line{width:160px;height:1px;background:var(--petrol-light);margin:8px 0 6px;opacity:0.5}
.logo-claim{font-size:var(--text-xs);letter-spacing:3px;color:var(--petrol-light);text-transform:uppercase}
.login-header{padding:64px 24px 48px;align-items:center}
.login-body{padding:var(--space-xl) var(--space-lg) var(--space-lg);display:flex;flex-direction:column;gap:var(--space-md)}
.login-title{font-family:'Charis SIL',serif;font-size:var(--text-xl);color:var(--petrol);margin-bottom:4px}
.login-sub{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal);margin-bottom:8px}
.login-footer{font-size:var(--text-sm);color:var(--text-muted);text-align:center}
.field-label{font-size:var(--text-xs);font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
.field-input{width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:var(--text-base);color:var(--petrol);outline:none;transition:border-color 0.2s;-webkit-appearance:none}
.field-input:focus{border-color:var(--petrol-light)}
.btn{width:100%;padding:15px;background:var(--petrol);color:var(--white);border:none;border-radius:var(--radius-sm);font-family:'Inter',sans-serif;font-size:var(--text-base);font-weight:500;cursor:pointer;transition:background 0.2s,transform 0.1s;margin-top:8px}
.btn:hover{background:var(--petrol-mid)}
.btn:active{transform:scale(0.98)}
.btn:disabled{opacity:0.6;cursor:not-allowed}
.btn-outline{background:transparent;border:1px solid var(--petrol);color:var(--petrol)}
.btn-outline:hover{background:var(--petrol-pale)}
.btn-danger{background:var(--danger)}
.btn-danger:hover{background:#a93226}
.error-msg{font-size:var(--text-sm);color:var(--danger);background:#fdf0f0;padding:10px 14px;border-radius:var(--radius-xs);display:none}
.success-msg{font-size:var(--text-sm);color:var(--success-text);background:var(--success-bg);padding:10px 14px;border-radius:var(--radius-xs);display:none}
.home-nav{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.home-nav-logo{font-family:'Charis SIL',serif;font-size:var(--text-2xl);color:var(--white)}
.home-greeting{font-family:'Charis SIL',serif;font-size:var(--text-xl);color:var(--white);line-height:var(--leading-tight);margin-bottom:4px;white-space:pre-line}
.home-sub{font-size:var(--text-sm);color:var(--petrol-light)}
.home-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--petrol-light);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:500;color:var(--petrol);cursor:pointer}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.avatar-upload{position:relative;cursor:pointer}
.avatar-upload-hint{position:absolute;bottom:-1px;right:-1px;width:14px;height:14px;background:var(--petrol-light);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px;color:var(--petrol)}
.nav-bar{border-top:1px solid var(--border);padding:10px 0 20px;display:flex;justify-content:space-around;background:var(--white);flex-shrink:0;box-shadow:0 100px 0 100px var(--white)}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px 16px}
.nav-icon{font-size:18px;color:var(--text-muted)}
.nav-icon.active{color:var(--petrol)}
.nav-label{font-size:var(--text-xs);color:var(--text-muted)}
.nav-label.active{color:var(--petrol);font-weight:500}
.modal-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);display:none;align-items:center;justify-content:center;z-index:100;padding:20px}
.modal-overlay.active{display:flex}
.modal{background:white;border-radius:var(--radius);padding:var(--space-lg);width:100%}
.modal-title{font-family:'Charis SIL',serif;font-size:var(--text-lg);color:var(--petrol);margin-bottom:8px}
.modal-text{font-size:var(--text-sm);color:var(--text-muted);line-height:var(--leading-normal);margin-bottom:20px}
.modal-actions{display:flex;gap:10px}
.modal-actions .btn{margin:0;flex:1}
.profile-menu{position:fixed;top:72px;right:calc(50% - 215px);background:white;border-radius:12px;box-shadow:0 8px 32px rgba(26,74,74,0.18);padding:8px 0;min-width:200px;z-index:1000;display:none}
.profile-menu.open{display:block}
.menu-item{padding:12px 16px;font-size:var(--text-base);color:var(--petrol);cursor:pointer;display:flex;align-items:center;gap:10px;transition:background 0.15s;white-space:nowrap}
.menu-item:hover{background:var(--petrol-pale)}
.menu-item.danger{color:var(--danger)}
.menu-divider{height:1px;background:rgba(26,74,74,0.1);margin:4px 0}
.profile-screen-body{padding:var(--space-lg);padding-bottom:40px;display:flex;flex-direction:column;gap:20px;overflow-y:scroll;-webkit-overflow-scrolling:touch;max-width:430px;margin:0 auto;width:100%;box-sizing:border-box;flex:1}
.profile-section{background:var(--petrol-pale);border-radius:var(--radius);padding:20px;display:flex;flex-direction:column;gap:14px;box-sizing:border-box;width:100%}
.profile-section-title{font-size:var(--text-xs);font-weight:500;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted)}
@keyframes bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-6px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,0.4)}50%{box-shadow:0 0 0 8px rgba(192,57,43,0)}}
@keyframes micPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
@media print{
  body{background:white !important;overflow:visible !important}
  .app{position:static !important;height:auto !important;max-width:100% !important;box-shadow:none !important;border-radius:0 !important}
  .screen{display:none !important;position:static !important;height:auto !important}
  #screenAuswertung{display:block !important;overflow:visible !important}
  .scroll-body{overflow:visible !important;height:auto !important}
  .home-body{padding:0 !important}
  .nav-bar{display:none !important}
  .header{padding:20px !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .header-fp{display:none}
  button[onclick="exportPDF()"]{display:none !important}
  canvas{max-width:250px !important}
  @page{margin:1.5cm;size:A4}
}