/* === CSS extrahiert aus index.html (extrahiert 2026-04-26) === */
  @import url('/shared/fonts/inter.css');
  * { margin: 0; padding: 0; box-sizing: border-box; }

  :root {
    --bg: linear-gradient(145deg, #eef2f7 0%, #e4ecf4 25%, #dfe8f0 50%, #e8eef5 75%, #f0f4f8 100%);
    --nav-bg: rgba(255,255,255,0.55); --nav-border: rgba(255,255,255,0.5);
    --card-bg: rgba(255,255,255,0.45); --card-border: rgba(255,255,255,0.6);
    --card-hover-bg: rgba(255,255,255,0.65); --card-shadow: 0 2px 16px rgba(0,0,0,0.04);
    --text-primary: #1c1c1e; --text-secondary: #636366; --text-tertiary: #8e8e93;
    --badge-bg: rgba(4,179,214,0.1); --badge-color: #04b3d6;
    --toggle-bg: rgba(0,0,0,0.06); --toggle-knob: #fff;
    --input-bg: rgba(255,255,255,0.5); --input-border: rgba(0,0,0,0.08);
    --sidebar-bg: rgba(255,255,255,0.35); --unread-dot: #04b3d6;
    --divider: rgba(0,0,0,0.04); --today-bg: rgba(4,179,214,0.05);
    --event-bg: rgba(4,179,214,0.12); --event-border: #04b3d6;
  }
  [data-theme="dark"] {
    --bg: linear-gradient(145deg, #0a0a1a 0%, #0f1528 20%, #151022 40%, #1a0f1e 60%, #12111a 80%, #0d1318 100%);
    --nav-bg: rgba(255,255,255,0.05); --nav-border: rgba(255,255,255,0.09);
    --card-bg: rgba(255,255,255,0.06); --card-border: rgba(255,255,255,0.1);
    --card-hover-bg: rgba(255,255,255,0.1); --card-shadow: 0 2px 16px rgba(0,0,0,0.2);
    --text-primary: #f5f5f7; --text-secondary: #a1a1a6; --text-tertiary: #636366;
    --badge-bg: rgba(4,179,214,0.15); --badge-color: #2cc5e4;
    --toggle-bg: rgba(255,255,255,0.1); --toggle-knob: #1c1c1e;
    --input-bg: rgba(255,255,255,0.06); --input-border: rgba(255,255,255,0.1);
    --sidebar-bg: rgba(255,255,255,0.03); --unread-dot: #2cc5e4;
    --divider: rgba(255,255,255,0.05); --today-bg: rgba(4,179,214,0.08);
    --event-bg: rgba(4,179,214,0.15); --event-border: #2cc5e4;
  }

  body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'SF Pro Display',sans-serif; min-height:100vh; background:var(--bg); background-size:400% 400%; animation:gradShift 20s ease infinite; -webkit-font-smoothing:antialiased; }
  @keyframes gradShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

  /* NAV */
  nav{position:sticky;top:0;z-index:200;background:var(--nav-bg);backdrop-filter:blur(44px) saturate(180%);-webkit-backdrop-filter:blur(44px) saturate(180%);border-bottom:1px solid var(--nav-border);padding:0 24px;height:52px;display:flex;align-items:center;justify-content:space-between}
  .nav-left{display:flex;align-items:center;gap:10px;min-width:0;flex-shrink:1;overflow:hidden}
  .nav-logo{height:26px}[data-theme="dark"] .nav-logo{filter:brightness(2.2) contrast(0.85)}
  .nav-brand{font-size:15px;font-weight:700;color:var(--text-primary);text-decoration:none}
  .nav-divider{width:1px;height:18px;background:var(--nav-border)}
  .nav-sub{font-size:13px;color:var(--text-secondary);white-space:nowrap}
  .nav-right{display:flex;align-items:center;gap:10px;flex-shrink:0}
  .nav-back{font-size:12px;color:var(--badge-color);text-decoration:none;font-weight:500}
  .user-info{display:flex;align-items:center;gap:5px}.user-dot{width:7px;height:7px;border-radius:50%;background:#30d158}
  #current-user{font-size:12px;color:var(--text-secondary)}
  .lo-btn{background:none;border:none;color:var(--text-secondary);font-size:12px;cursor:pointer;display:flex;align-items:center;gap:4px;padding:5px 8px;border-radius:7px;transition:background .2s}
  .lo-btn:hover{background:var(--toggle-bg)}
  .theme-toggle{display:flex;align-items:center;gap:5px;cursor:pointer;padding:3px;border-radius:16px;background:var(--toggle-bg)}
  .toggle-icon{font-size:12px}
  .toggle-track{width:32px;height:18px;border-radius:9px;background:var(--toggle-bg);position:relative}
  .toggle-knob{width:14px;height:14px;border-radius:50%;background:var(--toggle-knob);position:absolute;top:2px;left:2px;transition:transform .3s cubic-bezier(.4,0,.2,1)}
  [data-theme="dark"] .toggle-knob{transform:translateX(14px)}

  /* SHARED */
  .btn{padding:6px 12px;border-radius:8px;border:none;background:#04b3d6;color:#fff;font-size:11px;font-weight:600;font-family:inherit;cursor:pointer;transition:all .2s;white-space:nowrap}.btn:hover{background:#0090b0}
  .btn-ghost{background:var(--toggle-bg);color:var(--text-primary)}.btn-ghost:hover{background:var(--card-hover-bg)}.btn-ghost.active{background:var(--badge-bg);color:var(--badge-color)}
  .btn-danger{background:#ff453a}.btn-danger:hover{background:#d63031}
  .btn-icon{padding:4px 7px;border-radius:7px;border:none;background:var(--toggle-bg);color:var(--text-secondary);font-size:12px;cursor:pointer;transition:all .2s}.btn-icon:hover{background:var(--card-hover-bg)}
  .btn-icon.spinning{animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
  .spacer{flex:1}

  /* MAIN LAYOUT */
  .main{display:flex;height:calc(100vh - 52px)}

  /* TOP TABS */
  .top-tabs{display:flex;gap:0;background:var(--nav-bg);backdrop-filter:blur(20px);border-bottom:1px solid var(--nav-border);padding:0 16px}
  .top-tab{padding:10px 18px;font-size:12px;font-weight:600;color:var(--text-tertiary);border:none;background:none;cursor:pointer;font-family:inherit;position:relative;transition:color .2s}
  .top-tab.active{color:var(--badge-color)}
  .top-tab.active::after{content:'';position:absolute;bottom:0;left:10px;right:10px;height:2px;background:var(--badge-color);border-radius:1px}
  .top-tab .tc{font-size:9px;font-weight:700;background:var(--unread-dot);color:#fff;padding:1px 5px;border-radius:5px;margin-left:4px}

  .tab-body{flex:1;overflow:hidden;display:none}.tab-body.active{display:flex;flex-direction:column}

  /* ===== EMAIL TAB: OUTLOOK STYLE ===== */
  .email-wrap{display:flex;flex:1;overflow:hidden}

  /* Outlook-Sidebar: Ordner links */
  .email-nav{width:180px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--card-border);padding:10px 0;display:flex;flex-direction:column;overflow-y:auto}
  .email-nav-title{padding:6px 14px;font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px}
  .folder-item{padding:7px 14px;font-size:12px;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;gap:6px;transition:all .15s;border-left:3px solid transparent}
  .folder-item:hover{background:var(--card-hover-bg);color:var(--text-primary)}
  .folder-item.active{background:var(--badge-bg);color:var(--badge-color);font-weight:600;border-left-color:var(--badge-color)}
  .folder-item .fi-icon{font-size:14px;width:18px;text-align:center;flex-shrink:0}
  .folder-item .fi-count{margin-left:auto;font-size:10px;font-weight:600;color:var(--badge-color);background:var(--badge-bg);padding:1px 5px;border-radius:5px}
  .email-nav-bottom{margin-top:auto;padding:8px 14px;border-top:1px solid var(--divider)}

  /* E-Mail-Liste Mitte */
  .email-mid{width:340px;flex-shrink:0;border-right:1px solid var(--card-border);display:flex;flex-direction:column}
  .email-mid-toolbar{padding:8px 12px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--divider)}
  .email-mid-filters{padding:6px 12px;display:flex;gap:3px;border-bottom:1px solid var(--divider)}
  .email-mid-list{flex:1;overflow-y:auto}

  .ei{padding:10px 14px;border-bottom:1px solid var(--divider);cursor:pointer;transition:background .12s;display:flex;gap:8px;align-items:flex-start}
  .ei:hover{background:var(--card-hover-bg)}.ei.active{background:var(--badge-bg)}
  .ei-dot{width:6px;height:6px;border-radius:50%;background:var(--unread-dot);flex-shrink:0;margin-top:5px}.ei-dot.read{background:transparent}
  .ei-body{flex:1;min-width:0}
  .ei-from{font-size:12px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ei.read .ei-from{font-weight:400}
  .ei-subj{font-size:11px;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .ei-prev{font-size:10px;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
  .ei-meta{display:flex;align-items:center;gap:5px;margin-top:2px}
  .ei-date{font-size:9px;color:var(--text-tertiary)}
  .ei-att{font-size:9px}
  .empty-msg{padding:30px 16px;text-align:center;color:var(--text-tertiary);font-size:12px}

  /* E-Mail Detail rechts */
  .email-read{flex:1;overflow-y:auto;padding:20px 24px;min-width:0}
  .er-placeholder{display:flex;align-items:center;justify-content:center;height:100%;color:var(--text-tertiary);font-size:13px}
  .er-subject{font-size:17px;font-weight:700;color:var(--text-primary);margin-bottom:8px}
  .er-info{display:flex;flex-direction:column;gap:2px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--card-border)}
  .er-row{display:flex;gap:5px;font-size:11px}.er-label{color:var(--text-tertiary);min-width:22px}.er-val{color:var(--text-secondary)}
  .er-body{font-size:12px;line-height:1.55;color:var(--text-primary);overflow-x:auto}.er-body img{max-width:100%}
  .er-att{margin-top:14px;padding-top:12px;border-top:1px solid var(--card-border)}
  .er-att h4{font-size:11px;font-weight:600;color:var(--text-secondary);margin-bottom:5px}
  .att-link{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:6px;background:var(--toggle-bg);color:var(--text-primary);font-size:10px;text-decoration:none;margin:0 3px 3px 0;transition:background .2s}.att-link:hover{background:var(--card-hover-bg)}
  .er-actions{display:flex;gap:5px;margin-top:14px;padding-top:12px;border-top:1px solid var(--card-border)}

  /* ===== KALENDER TAB ===== */
  .cal-wrap{display:flex;flex:1;overflow:hidden}
  .cal-nav{width:190px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--card-border);padding:10px;overflow-y:auto}
  .cal-nav h4{font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
  .cu{display:flex;align-items:center;gap:5px;padding:4px 5px;border-radius:5px;cursor:pointer;font-size:11px;color:var(--text-primary);transition:background .15s}.cu:hover{background:var(--toggle-bg)}
  .cu input[type="checkbox"]{accent-color:var(--badge-color);width:13px;height:13px}
  .cu-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

  .cal-main{flex:1;display:flex;flex-direction:column;overflow:hidden}
  .cal-bar{padding:8px 14px;display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--divider)}
  .cal-bar h3{font-size:14px;font-weight:600;color:var(--text-primary);min-width:180px;text-align:center}
  .cnb{width:26px;height:26px;border-radius:6px;border:none;background:var(--toggle-bg);color:var(--text-primary);font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center}.cnb:hover{background:var(--card-hover-bg)}

  .cal-grid{flex:1;overflow-y:auto;display:flex;flex-direction:column}
  .ch{display:grid;grid-template-columns:44px repeat(7,1fr);border-bottom:1px solid var(--card-border);position:sticky;top:0;background:var(--card-bg);backdrop-filter:blur(20px);z-index:2}
  .chc{padding:6px 3px;text-align:center;font-size:10px;font-weight:600;color:var(--text-secondary)}
  .chc.today{color:var(--badge-color)}
  .chc .dn{display:block;font-size:16px;font-weight:700;color:var(--text-primary);margin-top:1px}
  .chc.today .dn{color:#fff;background:var(--badge-color);width:26px;height:26px;line-height:26px;border-radius:50%;margin:1px auto 0}

  .cb{display:grid;grid-template-columns:44px repeat(7,1fr);flex:1}
  .ct{padding:1px 4px;font-size:9px;color:var(--text-tertiary);text-align:right;border-right:1px solid var(--card-border);height:48px}
  .cc{border-right:1px solid var(--divider);border-bottom:1px solid var(--divider);height:48px;position:relative;cursor:pointer;transition:background .1s}
  .cc:nth-child(8n){border-right:none}
  .cc:hover{background:var(--card-hover-bg)}.cc.today{background:var(--today-bg)}

  .cev{position:absolute;left:1px;right:1px;background:var(--event-bg);border-left:3px solid var(--event-border);border-radius:3px;padding:1px 4px;font-size:9px;color:var(--text-primary);overflow:hidden;cursor:pointer;z-index:1}
  .cev:hover{filter:brightness(.92)}
  .cev .evt{font-size:8px;color:var(--text-secondary)}.cev .evn{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cev[data-color="blue"]{border-left-color:#007aff;background:rgba(0,122,255,.1)}
  .cev[data-color="green"]{border-left-color:#30d158;background:rgba(48,209,88,.1)}
  .cev[data-color="orange"]{border-left-color:#ff9500;background:rgba(255,149,0,.1)}
  .cev[data-color="purple"]{border-left-color:#af52de;background:rgba(175,82,222,.1)}
  .cev[data-color="red"]{border-left-color:#ff453a;background:rgba(255,69,58,.1)}

  /* MODALS */
  .mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:300;align-items:center;justify-content:center}.mo.open{display:flex}
  .md{background:var(--card-bg);backdrop-filter:blur(60px) saturate(180%);-webkit-backdrop-filter:blur(60px) saturate(180%);border:1px solid var(--card-border);border-radius:16px;padding:22px;width:500px;max-width:95vw;max-height:80vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.15)}
  .mt{font-size:16px;font-weight:700;color:var(--text-primary);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between}
  .mc{background:none;border:none;font-size:18px;color:var(--text-tertiary);cursor:pointer}
  .ff{margin-bottom:8px}
  .ff label{display:block;font-size:10px;font-weight:600;color:var(--text-secondary);margin-bottom:2px}
  .ff input,.ff textarea{width:100%;padding:8px 10px;border-radius:8px;border:1px solid var(--input-border);background:var(--input-bg);color:var(--text-primary);font-size:12px;font-family:inherit;outline:none;transition:border-color .2s}
  .ff input:focus,.ff textarea:focus{border-color:var(--badge-color)}
  .ff textarea{min-height:120px;resize:vertical;line-height:1.5}
  .fr{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .ma{display:flex;gap:6px;justify-content:flex-end;margin-top:12px}
  .sp{margin-top:8px;padding:8px;border-radius:6px;background:var(--divider);font-size:11px;color:var(--text-secondary)}

  /* MOBILE */
  @media(max-width:768px){
    .email-nav{display:none}.email-mid{width:100%;border-right:none}
    .email-read{display:none}.email-read.mshow{display:block}
    .email-mid.mhide{display:none}
    .cal-nav{display:none}
    .ch{grid-template-columns:32px repeat(7,1fr)}.cb{grid-template-columns:32px repeat(7,1fr)}
    .mback{display:inline-flex!important;align-items:center;gap:3px;color:var(--badge-color);font-size:11px;font-weight:500;cursor:pointer;background:none;border:none;font-family:inherit;margin-bottom:8px}
  }
  @media(max-width:600px){nav{padding:0 10px}.nav-sub,.nav-divider,.user-info,.logout-text{display:none}.top-tab{padding:8px 12px;font-size:11px}}
  @media(min-width:769px){.mback{display:none}}

  /* RUDI FAB — jetzt in shared/chat-panel.css */


/* === Auto-generierte Klassen aus inline style="..." (index.html, 11 unique) === */
.s-1aca26 { flex:1;display:flex;flex-direction:column;overflow:hidden; }
.s-8588e4 { width:100%; }
.s-275856 { margin-top:6px;display:flex;gap:4px; }
.s-199454 { font-size:13px;font-weight:600;color:var(--text-primary); }
.s-e1d4b2 { font-size:10px;padding:3px 8px;border-radius:5px; }
.s-93b8ea { display:none; }
.s-3b5b1d { background:#04b3d6; }
.s-70a7ba { font-size:11px;padding:4px 10px; }
.s-f9368a { min-height:60px; }
.s-f7c4c7 { border:none;border-top:1px solid var(--card-border);margin:10px 0; }
.s-d1eba8 { min-height:40px; }


/* === Auto-Klassen aus inline style="..." in index.js (5 unique) === */
.s-d79ce2 { margin-top:8px; }
.s-67ec53 { padding:6px 14px;font-size:10px;font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:.5px;background:var(--divider); }
.s-bf3a87 { padding:8px;text-align:center; }
.s-9554e6 { background:none;border:none;color:var(--badge-color);font-size:11px;cursor:pointer; }
.s-09ccb6 { color:var(--text-tertiary); }