{"id":120,"date":"2026-03-29T07:33:46","date_gmt":"2026-03-29T07:33:46","guid":{"rendered":"https:\/\/blueagency.io\/?page_id=120"},"modified":"2026-03-29T07:51:03","modified_gmt":"2026-03-29T07:51:03","slug":"ai-agent-sales-and-frontoffice","status":"publish","type":"page","link":"https:\/\/blueagency.io\/?page_id=120","title":{"rendered":"AI Agent Sales and Frontoffice"},"content":{"rendered":"\n<style>\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');\n\n\/* LANGUAGE TOGGLE SYSTEM *\/\nen { display: none; }\nde { display: contents; }\nbody.english en { display: contents; }\nbody.english de { display: none; }\n\n\/* TOTAL TAKEOVER: Ignoriert WP\/Onepage-Container und erzwingt Vollbild *\/\n#blueocean-app-root {\n    --bg:#f4f7fb;\n    --card:#fff;\n    --line:#e7edf5;\n    --text:#1b2436;\n    --muted:#66748a;\n    --primary:#245dff;\n    --primary2:#113fcb;\n    --success:#18a0a6;\n    --warning:#f59e0b;\n    --danger:#dc4c64;\n    --violet:#6d5efc;\n    --shadow:0 18px 40px rgba(18,31,53,.08);\n    --shadow-hover:0 22px 45px rgba(18,31,53,.14);\n    --radius:22px;\n\n    position: fixed !important;\n    top: 0 !important;\n    left: 0 !important;\n    width: 100vw !important;\n    height: 100vh !important;\n    z-index: 999999 !important;\n    background: linear-gradient(180deg,#f8fafe,#eef3fb) !important;\n    overflow-y: auto !important;\n    overflow-x: hidden !important;\n    margin: 0 !important;\n    padding: 0 !important;\n    transform: none !important;\n    font-family: 'Inter', Segoe UI, Arial, sans-serif;\n    color: var(--text);\n    scroll-behavior: smooth;\n    text-align: left;\n}\n\n#blueocean-app-root *, #blueocean-app-root *::before, #blueocean-app-root *::after {\n    box-sizing: border-box !important;\n}\n\n#blueocean-app-root a { text-decoration: none; color: inherit; }\n#blueocean-app-root h1, #blueocean-app-root h2, #blueocean-app-root h3 { margin: 0 0 12px; color: var(--text); line-height: 1.25; letter-spacing: -0.02em; font-family: 'Inter', sans-serif; padding: 0; }\n#blueocean-app-root h1 { font-size: 44px; font-weight: 900; }\n#blueocean-app-root h2 { font-size: 28px; font-weight: 800; }\n#blueocean-app-root h3 { font-size: 18px; font-weight: 800; }\n#blueocean-app-root p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 15px; padding: 0; }\n\n#blueocean-app-root .top-nav{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:rgba(255,255,255,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(231,237,245,.8);width:100%;}\n#blueocean-app-root .logo{display:flex;align-items:center;gap:12px;font-weight:900;font-size:20px;color:var(--text); white-space:nowrap;}\n#blueocean-app-root .logo-mark{width:36px;height:36px;border-radius:12px;background:linear-gradient(135deg,var(--primary),var(--violet));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900;box-shadow:0 10px 24px rgba(36,93,255,.3)}\n#blueocean-app-root .top-links{display:flex;gap:8px;flex-wrap:nowrap;align-items:center; transition:all 0.3s ease;}\n#blueocean-app-root .top-link{white-space:nowrap;padding:10px 14px;border-radius:12px;background:transparent;color:#55657d;font-weight:700;cursor:pointer; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); font-size: 14px;}\n#blueocean-app-root .top-link:hover{background:#e7edf5; color:var(--text);}\n#blueocean-app-root .top-link.active{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff; box-shadow:0 6px 15px rgba(36,93,255,.25);}\n#blueocean-app-root .hamburger{display:none; cursor:pointer; padding:6px; border-radius:8px;}\n#blueocean-app-root .hamburger:hover{background:#f3f6fb;}\n\n#blueocean-app-root .view{display:none; width: 100%;}\n#blueocean-app-root .view.active{display:block; animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);}\n@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }\n\n#blueocean-app-root .hero{width:100%;max-width:1280px;margin:0 auto;padding:40px 24px;}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:28px;align-items:center}\n#blueocean-app-root .hero-card, #blueocean-app-root .card, #blueocean-app-root .panel, #blueocean-app-root .auth-card, #blueocean-app-root .phone{background:var(--card);border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;}\n#blueocean-app-root .hero-card{padding:40px}\n\n#blueocean-app-root .lead{font-size:17px; color:#4a5872;}\n#blueocean-app-root .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}\n\n#blueocean-app-root .btn{border:none;border-radius:14px;padding:12px 18px;font-weight:700;font-size:14px;cursor:pointer; transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); outline:none; font-family:'Inter', sans-serif;}\n#blueocean-app-root .btn:active{transform:scale(0.96)}\n#blueocean-app-root .btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 8px 20px rgba(36,93,255,.25); border:1px solid rgba(255,255,255,0.1);}\n#blueocean-app-root .btn.primary:hover{box-shadow:0 12px 25px rgba(36,93,255,.35); filter:brightness(1.05); transform:translateY(-2px);}\n#blueocean-app-root .btn.secondary{background:#fff;border:1px solid #dbe4f0;color:#4f5f77; box-shadow:0 4px 10px rgba(0,0,0,.03);}\n#blueocean-app-root .btn.secondary:hover{background:#f8fafe; border-color:#c9d4e4; transform:translateY(-2px); box-shadow:0 6px 15px rgba(0,0,0,.05);}\n#blueocean-app-root .btn.ghost{background:transparent;color:#55657d; border:1px solid transparent;}\n#blueocean-app-root .btn.ghost:hover{background:#e7edf5; color:var(--text);}\n#blueocean-app-root .btn.btn-sm{padding:8px 12px; font-size:12px; border-radius:10px;}\n#blueocean-app-root .btn:disabled{opacity:0.6; cursor:not-allowed; transform:none !important; box-shadow:none !important;}\n\n#blueocean-app-root .badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:700; white-space:nowrap; letter-spacing:0.01em;}\n#blueocean-app-root .badge.info{background:#eef3ff;color:var(--primary)}\n#blueocean-app-root .badge.success{background:#edf8f5;color:#137b83}\n#blueocean-app-root .badge.warn{background:#fff6e8;color:#b96a07}\n#blueocean-app-root .badge.danger{background:#fff0f3;color:#b8324b}\n#blueocean-app-root .badge.violet{background:#f3efff;color:#6554d8}\n\n#blueocean-app-root .bullets{margin-top:20px;display:grid;gap:12px}\n#blueocean-app-root .bullet{display:flex;gap:10px;align-items:flex-start}\n#blueocean-app-root .bullet span:last-child{color:var(--muted); line-height:1.5; font-size:15px;}\n#blueocean-app-root .check{width:24px;height:24px;border-radius:50%;background:#eef3ff;color:var(--primary);display:flex;align-items:center;justify-content:center;font-weight:900;flex:0 0 24px; font-size:12px;}\n\n#blueocean-app-root .cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}\n#blueocean-app-root .card{padding:20px;}\n#blueocean-app-root .card:hover{transform:translateY(-5px); box-shadow:var(--shadow-hover); border-color:#d4def7;}\n#blueocean-app-root .card .label{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px}\n#blueocean-app-root .card .value{font-size:32px;font-weight:900;color:var(--text); letter-spacing:-0.02em;}\n#blueocean-app-root .trend{font-size:12px;font-weight:600;color:#137b83;margin-top:8px}\n\n#blueocean-app-root .layout{display:grid;grid-template-columns:285px 1fr;min-height:calc(100vh - 65px);width:100%;max-width:1440px;margin:0 auto;}\n#blueocean-app-root .sidebar{background:#fff;border-right:1px solid var(--line);padding:24px 16px;position:sticky;top:65px;height:calc(100vh - 65px);overflow:auto}\n#blueocean-app-root .content{padding:28px 32px; position:relative;}\n\n#blueocean-app-root .workspace-card{padding:16px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#f9fbff,#f4f8ff);margin:0 4px 20px; box-shadow:0 4px 12px rgba(0,0,0,.02);}\n#blueocean-app-root .workspace-select{width:100%;padding:12px;border:1px solid #dbe4f0;border-radius:12px;background:#fff;font-weight:700;color:var(--text); cursor:pointer; outline:none; font-family:'Inter',sans-serif; transition:border-color 0.2s;}\n#blueocean-app-root .workspace-select:hover{border-color:var(--primary);}\n#blueocean-app-root .group-title{font-size:11px;color:#97a3b4;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin:20px 12px 10px}\n#blueocean-app-root .nav-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin:4px;color:#4a5872;font-weight:700;font-size:14px;cursor:pointer;background:transparent; transition: all 0.2s ease;}\n#blueocean-app-root .nav-item:hover{background:#f5f8ff; color:var(--text); transform:translateX(3px);}\n#blueocean-app-root .nav-item.active{background:#edf3ff;color:var(--primary); font-weight:800;}\n#blueocean-app-root .icon{width:32px;height:32px;border-radius:10px;background:#f2f5fa;display:flex;align-items:center;justify-content:center;font-size:15px;flex:0 0 32px; transition:all 0.2s ease;}\n#blueocean-app-root .nav-item.active .icon { background: #dce7ff; color: var(--primary); }\n\n#blueocean-app-root .page{display:none}\n#blueocean-app-root .page.active{display:block; animation: fadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);}\n#blueocean-app-root .page-top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:24px}\n#blueocean-app-root .title h1{margin:0 0 6px;font-size:32px;color:var(--text)}\n#blueocean-app-root .title p{margin:0;color:var(--muted); max-width: 600px;}\n#blueocean-app-root .actions{display:flex;gap:10px;flex-wrap:wrap}\n\n#blueocean-app-root .grid-2{display:grid;grid-template-columns:1.2fr .8fr;gap:20px}\n#blueocean-app-root .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}\n#blueocean-app-root .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}\n#blueocean-app-root .panel{padding:24px;}\n#blueocean-app-root .panel h3{margin-bottom:12px;color:var(--text)}\n\n#blueocean-app-root .search, #blueocean-app-root .input, #blueocean-app-root select, #blueocean-app-root textarea {\n    width:100%;padding:14px 16px;border:1px solid #dbe4f0;border-radius:14px;background:#fff;font-family:'Inter',sans-serif;font-size:14px;color:var(--text); transition: all 0.2s; outline:none; box-shadow:none;\n}\n#blueocean-app-root .search:focus, #blueocean-app-root .input:focus, #blueocean-app-root select:focus, #blueocean-app-root textarea:focus{border-color:var(--primary); box-shadow:0 0 0 4px rgba(36,93,255,.12); transform:translateY(-1px);}\n\n#blueocean-app-root .table{width:100%;border-collapse:collapse}\n#blueocean-app-root .table th, #blueocean-app-root .table td{padding:16px 12px;border-bottom:1px solid var(--line);text-align:left;font-size:14px;vertical-align:middle}\n#blueocean-app-root .table th{color:#8190a5;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; border-bottom:2px solid var(--line);}\n#blueocean-app-root .table td{color:var(--muted); font-weight:500;}\n#blueocean-app-root .table tbody tr{transition:background 0.2s;}\n#blueocean-app-root .table tbody tr:hover{background:#fbfcff;}\n\n#blueocean-app-root .dropzone{border:2px dashed #bfd0ff;background:linear-gradient(180deg,#f8fbff,#f2f7ff);padding:28px 20px;border-radius:18px;text-align:center; transition: all 0.3s ease; cursor:pointer; height: 100%; display: flex; flex-direction: column; justify-content: center;}\n#blueocean-app-root .dropzone:hover, #blueocean-app-root .dropzone.dragover{background:linear-gradient(180deg,#eef3ff,#e6edff); border-color:var(--primary); transform:translateY(-2px); box-shadow:0 8px 20px rgba(36,93,255,.08);}\n#blueocean-app-root .dropzone .big{font-size:16px;font-weight:800;margin-bottom:8px;color:var(--primary)}\n\n#blueocean-app-root .file-list{display:flex; flex-direction: column; gap:10px; margin-top:16px; text-align: left;}\n#blueocean-app-root .file-row{padding:12px 14px; border:1px solid var(--line);border-radius:14px;background:#fff; animation: fadeIn 0.3s ease; font-size: 13px; display: flex; justify-content: space-between; align-items: center; box-shadow:0 2px 6px rgba(0,0,0,.02);}\n#blueocean-app-root .file-row .name {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; font-weight: 600; color: var(--text);}\n#blueocean-app-root .bar{height:6px;background:#ecf1f7;border-radius:999px;overflow:hidden; margin-top: 6px; width: 100%;}\n#blueocean-app-root .fill{height:100%;background:linear-gradient(90deg,var(--primary),#7ba2ff);border-radius:999px; transition: width 0.5s ease;}\n\n#blueocean-app-root .notif{padding:16px;border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:12px; transition: all 0.3s ease; box-shadow:0 4px 12px rgba(0,0,0,.02);}\n#blueocean-app-root .notif.unread{background:#f6f9ff;border-color:#d4def7; border-left:4px solid var(--primary); box-shadow:0 6px 15px rgba(36,93,255,.08);}\n#blueocean-app-root .notif-title{font-weight:800;margin-bottom:6px;color:var(--text); font-size:15px;}\n\n#blueocean-app-root .kpi{padding:20px;border:1px solid var(--line);border-radius:18px;background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.02);}\n#blueocean-app-root .kpi strong{display:block;font-size:28px;font-weight:900;margin-top:8px;color:var(--text); letter-spacing:-0.02em;}\n\n#blueocean-app-root .hero-note{padding:18px 20px;border:1px dashed #c9d4e4;border-radius:16px;background:#fcfdff;color:#5e6c82;margin-bottom:18px; font-size:14px; line-height:1.6;}\n\n#blueocean-app-root .score{display:flex;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;background:conic-gradient(var(--primary) 0 280deg,#e9eef7 280deg 360deg);font-weight:900;color:var(--primary);margin-left:auto; font-size:20px; box-shadow:0 10px 20px rgba(36,93,255,.15);}\n#blueocean-app-root .subtle{font-size:13px;color:var(--muted); font-weight:500;}\n#blueocean-app-root .pillrow{display:flex;gap:8px;flex-wrap:wrap}\n#blueocean-app-root .pill{padding:6px 12px;border-radius:999px;background:#f4f6fb;border:1px solid var(--line);font-size:12px;font-weight:700;color:#4a5872}\n\n#blueocean-app-root .auth-wrap{width:100%;max-width:1100px;margin:0 auto;padding:40px 24px;display:grid;grid-template-columns:1.1fr 0.9fr;gap:32px;}\n#blueocean-app-root .auth-card{padding:40px}\n#blueocean-app-root .auth-hero{background:linear-gradient(135deg,#0a2540,#245dff 50%,#6d5efc);color:#fff;display:flex;flex-direction:column;justify-content:space-between; position:relative; overflow:hidden;}\n#blueocean-app-root .auth-hero::after{content:''; position:absolute; top:0; left:0; width:100%; height:100%; background:radial-gradient(circle at top right, rgba(255,255,255,0.1), transparent 50%); pointer-events:none;}\n#blueocean-app-root .auth-hero p{color:rgba(255,255,255,.86); font-size:15px;}\n#blueocean-app-root .field{margin-bottom:16px}\n#blueocean-app-root .field label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:#334155}\n#blueocean-app-root .helper{font-size:13px;color:#7b8797;margin-top:8px; font-weight:500;}\n#blueocean-app-root .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n#blueocean-app-root .actions-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:24px}\n#blueocean-app-root .link{color:var(--primary);font-weight:700; cursor:pointer; font-size:14px; transition:color 0.2s;}\n#blueocean-app-root .link:hover{color:var(--primary2); text-decoration:underline;}\n\n#blueocean-app-root .mobile-wrap{width:100%;max-width:1200px;margin:0 auto;padding:40px 24px;}\n#blueocean-app-root .phones{display:grid;grid-template-columns:repeat(2,340px);gap:32px;justify-content:center}\n#blueocean-app-root .phone{padding:16px;min-height:720px;background:#0f1728; border-radius:36px; box-shadow:0 25px 50px rgba(0,0,0,.2);}\n#blueocean-app-root .phone-shell{background:#f9fbff;border-radius:24px;min-height:688px;padding:20px;border:1px solid rgba(255,255,255,.1); display:flex; flex-direction:column;}\n#blueocean-app-root .mobile-header{font-weight:900;font-size:22px;margin-bottom:16px;color:var(--text); letter-spacing:-0.02em;}\n#blueocean-app-root .mobile-card{padding:18px;border-radius:20px;background:#fff;border:1px solid var(--line);margin-bottom:14px; box-shadow:0 4px 10px rgba(0,0,0,.02);}\n#blueocean-app-root .mobile-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto;background:#fff;border:1px solid var(--line);border-radius:22px;padding:12px; box-shadow:0 -5px 15px rgba(0,0,0,.03);}\n#blueocean-app-root .mobile-nav div{text-align:center;font-size:12px;color:#667085;font-weight:700; cursor:pointer;}\n\n#blueocean-app-root .connector{padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff; transition:transform 0.2s, box-shadow 0.2s;}\n#blueocean-app-root .connector:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover); border-color:#d4def7;}\n#blueocean-app-root .connector-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px; font-size:15px;}\n#blueocean-app-root .switch{width:48px;height:28px;border-radius:999px;background:#d7e3ff;position:relative;flex:0 0 48px; cursor:pointer; transition: background 0.3s;}\n#blueocean-app-root .switch::after{content:'';position:absolute;top:4px;left:24px;width:20px;height:20px;background:#fff;border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.15); transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);}\n#blueocean-app-root .switch.off{background:#e6e9ef}\n#blueocean-app-root .switch.off::after{left:4px}\n\n#blueocean-app-root .report-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:20px}\n#blueocean-app-root .report-brand{font-weight:800;color:#1b3c76; font-size:12px; text-transform:uppercase; letter-spacing:0.05em;}\n#blueocean-app-root .report-section{margin-top:24px}\n#blueocean-app-root .report-section h3{font-size:18px;color:var(--text); border-bottom:2px solid var(--primary); display:inline-block; padding-bottom:4px; margin-bottom:16px;}\n#blueocean-app-root .summary-list{display:grid;gap:10px;margin-top:12px}\n#blueocean-app-root .summary-item{display:flex;justify-content:space-between;gap:12px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:#fbfcff; font-size:14px;}\n#blueocean-app-root .summary-item span{color:var(--muted); font-weight:500;}\n#blueocean-app-root .summary-item strong{color:var(--text); font-weight:800;}\n\n\/* AI Loading Overlay *\/\n#ai-loading-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 50; display: none; flex-direction: column; align-items: center; justify-content: center; border-radius: 20px;}\n#ai-loading-overlay.active { display: flex; animation: fadeIn 0.3s ease; }\n#blueocean-app-root .spinner { width: 56px; height: 56px; border: 4px solid var(--line); border-top-color: var(--primary); border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 24px;}\n@keyframes spin { to { transform: rotate(360deg); } }\n\n\/* Toast Notifications *\/\n#toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 12px; z-index: 1000000; pointer-events: none; }\n.toast { background: #1b2436; color: #fff; padding: 16px 24px; border-radius: 14px; font-size: 14px; font-weight: 600; box-shadow: 0 15px 35px rgba(0,0,0,0.2); animation: slideIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards, fadeOut 0.4s ease 2.6s forwards; }\n@keyframes slideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }\n@keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } }\n\n\/* Floating Tax Copilot Chat Widget *\/\n#blueocean-app-root .chat-widget { position: fixed; bottom: 30px; right: 30px; z-index: 900; display: flex; flex-direction: column; align-items: flex-end; }\n@keyframes pulseChat { 0% { box-shadow: 0 0 0 0 rgba(109, 94, 252, 0.5); } 70% { box-shadow: 0 0 0 15px rgba(109, 94, 252, 0); } 100% { box-shadow: 0 0 0 0 rgba(109, 94, 252, 0); } }\n#blueocean-app-root .chat-toggle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg,var(--primary),var(--violet)); color: white; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(36,93,255,.3); cursor: pointer; font-size: 26px; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: pulseChat 3s infinite;}\n#blueocean-app-root .chat-toggle:hover { transform: scale(1.08); animation:none; }\n#blueocean-app-root .chat-window { width: 360px; height: 480px; background: #fff; border-radius: 24px; box-shadow: 0 20px 50px rgba(0,0,0,0.15); border: 1px solid var(--line); display: none; flex-direction: column; overflow: hidden; margin-bottom: 20px; transform-origin: bottom right; animation: scaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);}\n#blueocean-app-root .chat-window.open { display: flex; }\n#blueocean-app-root .chat-header { background: linear-gradient(135deg,var(--primary),var(--violet)); color: white; padding: 18px 20px; font-weight: 800; font-size:15px; display: flex; justify-content: space-between; align-items: center;}\n#blueocean-app-root .chat-body { flex: 1; padding: 18px; overflow-y: auto; background: #f8fafe; display: flex; flex-direction: column; gap: 14px; font-size: 14px;}\n#blueocean-app-root .chat-msg { max-width: 85%; padding: 12px 16px; border-radius: 16px; line-height: 1.5; font-weight:500;}\n#blueocean-app-root .chat-msg.bot { background: #fff; border: 1px solid var(--line); align-self: flex-start; border-bottom-left-radius: 4px; color: var(--text); box-shadow:0 2px 8px rgba(0,0,0,.02);}\n#blueocean-app-root .chat-msg.user { background: var(--primary); color: white; align-self: flex-end; border-bottom-right-radius: 4px; box-shadow:0 4px 12px rgba(36,93,255,.2);}\n#blueocean-app-root .chat-input-area { padding: 14px; background: #fff; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items:center; }\n#blueocean-app-root .chat-input { flex: 1; border: 1px solid #dbe4f0 !important; border-radius: 99px; padding: 12px 18px; outline: none; font-size:14px; font-family:'Inter',sans-serif; transition:border-color 0.2s;}\n#blueocean-app-root .chat-input:focus { border-color: var(--primary) !important; }\n#blueocean-app-root .chat-send { background:var(--primary); color:white; border:none; width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform 0.2s;}\n#blueocean-app-root .chat-send:active{transform:scale(0.9);}\n@keyframes scaleIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }\n\n\/* AI Typing Indicator *\/\n#blueocean-app-root .typing-indicator { display: flex; gap: 4px; padding: 14px 18px; background: #fff; border: 1px solid var(--line); border-radius: 16px; align-self: flex-start; width: fit-content; border-bottom-left-radius: 4px; box-shadow:0 2px 8px rgba(0,0,0,.02);}\n#blueocean-app-root .typing-dot { width: 6px; height: 6px; background: #a2b0c5; border-radius: 50%; animation: typing 1.4s infinite ease-in-out both; }\n#blueocean-app-root .typing-dot:nth-child(1) { animation-delay: -0.32s; }\n#blueocean-app-root .typing-dot:nth-child(2) { animation-delay: -0.16s; }\n@keyframes typing { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } }\n\n\/* Mobile Optimization for Layouts *\/\n@media (max-width:1250px){#blueocean-app-root .hero-grid, #blueocean-app-root .grid-2, #blueocean-app-root .grid-3, #blueocean-app-root .grid-4, #blueocean-app-root .auth-wrap, #blueocean-app-root .row2{grid-template-columns:1fr} #blueocean-app-root .cards{grid-template-columns:repeat(2,1fr)} #blueocean-app-root .layout{grid-template-columns:1fr} #blueocean-app-root .sidebar{position:relative;top:0;height:auto} #blueocean-app-root .phones{grid-template-columns:1fr}}\n@media (max-width:1100px){\n  #blueocean-app-root .hamburger{display:flex;align-items:center;justify-content:center;}\n  #blueocean-app-root .top-links{\n    display:none; \n    position:absolute; top:100%; left:0; right:0; \n    background:rgba(255,255,255,0.98); backdrop-filter:blur(15px); -webkit-backdrop-filter:blur(15px);\n    flex-direction:column; padding:16px; border-bottom:1px solid var(--line);\n    box-shadow:0 15px 30px rgba(18,31,53,.1);\n  }\n  #blueocean-app-root .top-links.open{display:flex; animation: slideDownNav 0.2s ease;}\n  #blueocean-app-root .top-link{text-align:center; width:100%; padding:14px; font-size:16px;}\n  @keyframes slideDownNav { from { opacity:0; transform:translateY(-10px); } to { opacity:1; transform:translateY(0); } }\n}\n@media (max-width:740px){#blueocean-app-root h1{font-size:36px} #blueocean-app-root .cards{grid-template-columns:1fr} #blueocean-app-root .hero, #blueocean-app-root .auth-wrap, #blueocean-app-root .mobile-wrap, #blueocean-app-root .content{padding-left:16px;padding-right:16px} #blueocean-app-root .page-top{flex-direction:column;align-items:flex-start} #blueocean-app-root .input, #blueocean-app-root .btn, #blueocean-app-root select, #blueocean-app-root textarea{min-height:46px}}\n<\/style>\n\n<div id=\"blueocean-app-root\">\n\n<div id=\"toast-container\"><\/div>\n\n<div class=\"top-nav\" id=\"main-nav\" style=\"display: none;\">\n  <div class=\"logo\"><div class=\"logo-mark\">B<\/div> BlueOcean Finance AI<\/div>\n  \n  <div class=\"hamburger\" id=\"mobile-menu-btn\">\n    <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n      <line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"><\/line>\n      <line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"><\/line>\n      <line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"><\/line>\n    <\/svg>\n  <\/div>\n\n  <div class=\"top-links\" id=\"nav-links\">\n    <div class=\"top-link active\" data-view=\"overview\"><de>\u00dcbersicht<\/de><en>Overview<\/en><\/div>\n    <div class=\"top-link\" data-view=\"app\"><de>Berater Web-App<\/de><en>Accountant App<\/en><\/div>\n    <div class=\"top-link\" data-view=\"frontoffice\"><de>Unternehmens App<\/de><en>Company App<\/en><\/div>\n    <div class=\"top-link\" data-view=\"mobile\"><de>Mobile App<\/de><en>Mobile App<\/en><\/div>\n    <div class=\"top-link\" id=\"logout-btn\"><de>Abmelden<\/de><en>Logout<\/en><\/div>\n    <!-- Language Toggle Button -->\n    <div class=\"top-link lang-toggle\" onclick=\"toggleLanguage()\" style=\"font-size:14px; padding:6px 10px; display:flex; gap:6px; align-items:center; background:#eef3ff; color:var(--primary);\">\n        <de>\ud83c\uddec\ud83c\udde7 EN<\/de><en>\ud83c\udde9\ud83c\uddea DE<\/en>\n    <\/div>\n  <\/div>\n<\/div>\n\n<section class=\"view active\" id=\"overview\">\n  <div class=\"hero\">\n    <div class=\"hero-grid\">\n      <div class=\"hero-card\">\n        <span class=\"badge violet\" style=\"margin-bottom: 12px;\"><de>Plattform f\u00fcr alle Finanzakteure<\/de><en>Platform for all financial actors<\/en><\/span>\n        <h1><de>Ein \u00d6kosystem f\u00fcr Abstimmung, Sales und Steuerberatung<\/de><en>An ecosystem for reconciliation, sales, and tax accounting<\/en><\/h1>\n        <p class=\"lead\"><de>Die BlueOcean Plattform verbindet den Steuerberater, das Front-Office des Unternehmens und den Inhaber unterwegs nahtlos miteinander \u2013 unterst\u00fctzt durch intelligente KI-Agenten.<\/de><en>The BlueOcean platform seamlessly connects the tax accountant, the company&#8217;s front office, and the owner on the go &#8211; powered by intelligent AI agents.<\/en><\/p>\n        <div class=\"hero-actions\">\n          <button class=\"btn primary\" onclick=\"activateTopView('app')\"><de>Berater Web-App<\/de><en>Accountant App<\/en><\/button>\n          <button class=\"btn secondary\" onclick=\"activateTopView('frontoffice')\"><de>Unternehmens App (Sales)<\/de><en>Company App (Sales)<\/en><\/button>\n        <\/div>\n        <div class=\"bullets\">\n          <div class=\"bullet\"><span class=\"check\">\u2713<\/span><span><de><strong>F\u00fcr Steuerberater:<\/strong> Globale Mandanten\u00fcbersicht und DATEV-Vorkontierung.<\/de><en><strong>For Accountants:<\/strong> Global Tenant Overview and DATEV ledger suggestions.<\/en><\/span><\/div>\n          <div class=\"bullet\"><span class=\"check\">\u2713<\/span><span><de><strong>F\u00fcr das Unternehmen:<\/strong> KI-Posteingang, Rechnungs-Tracking und Mahnwesen.<\/de><en><strong>For the Company:<\/strong> AI Mailroom, Invoice tracking, and Dunning.<\/en><\/span><\/div>\n          <div class=\"bullet\"><span class=\"check\">\u2713<\/span><span><de><strong>F\u00fcr den Inhaber:<\/strong> Mobile App zum Scannen von Belegen von unterwegs.<\/de><en><strong>For the Owner:<\/strong> Mobile app for scanning receipts on the go.<\/en><\/span><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"hero-card\">\n        <div class=\"panel\" style=\"box-shadow:none;margin:0;border:2px dashed #c9d4e4; background: #fcfdff;\">\n          <h3><de>Live KI-Abgleich (Feb 2026)<\/de><en>Live AI Match (Feb 2026)<\/en><\/h3>\n          <div class=\"summary-list\">\n            <div class=\"summary-item\"><span><de>Nicht abgestimmte Bankposten<\/de><en>Unreconciled bank items<\/en><\/span><strong>1.140,00 \u20ac<\/strong><\/div>\n            <div class=\"summary-item\"><span><de>Unbezahlte Rechnungen im Zeitraum<\/de><en>Unpaid invoices in period<\/en><\/span><strong>95,00 \u20ac<\/strong><\/div>\n            <div class=\"summary-item\"><span><de>Ausgaben ohne Rechnung<\/de><en>Expenses without invoice<\/en><\/span><strong><de>5 Gruppen<\/de><en>5 groups<\/en><\/strong><\/div>\n            <div class=\"summary-item\" style=\"border-left: 3px solid var(--danger);\"><span><de>MwSt. \/ Compliance-Unstimmigkeiten<\/de><en>VAT \/ compliance discrepancies<\/en><\/span><strong style=\"color:var(--danger)\"><de>1 Risiko-Warnung<\/de><en>1 high-risk note<\/en><\/strong><\/div>\n            <div class=\"summary-item\"><span><de>Zugeordnete Ausgaben abgeglichen<\/de><en>Allocated expenses matched<\/en><\/span><strong style=\"color:var(--success);\"><de>6 Posten<\/de><en>6 items<\/en><\/strong><\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- ==========================================\n     STEUERBERATER ANSICHT (Bestehend) \n     ========================================== -->\n<section class=\"view\" id=\"app\">\n  <div class=\"layout\">\n    <aside class=\"sidebar\">\n      <div class=\"workspace-card\">\n        <div class=\"subtle\" style=\"margin-bottom:10px\"><de>Aktueller Mandanten-Bereich<\/de><en>Current client workspace<\/en><\/div>\n        <select class=\"workspace-select\" id=\"tenant-switcher\">\n          <option value=\"Cedar Stone Consulting Ltd\">Cedar Stone Consulting Ltd<\/option>\n          <option value=\"Rivergate Ops GmbH\">Rivergate Ops GmbH<\/option>\n          <option value=\"BOP BLUEOCEAN PRIVACY LTD\">BOP BLUEOCEAN PRIVACY LTD<\/option>\n          <option value=\"Nova Field Finance Ltd\">Nova Field Finance Ltd<\/option>\n        <\/select>\n      <\/div>\n      <div class=\"group-title\"><de>Kanzlei Navigation<\/de><en>Firm Navigation<\/en><\/div>\n      <div class=\"nav-item\" data-page=\"tenants\"><span class=\"icon\">\ud83c\udfe2<\/span><span><de>Kanzlei\u00fcbersicht<\/de><en>Firm Overview<\/en><\/span><\/div>\n      <div class=\"nav-item active\" data-page=\"dashboard\"><span class=\"icon\">\ud83c\udfe0<\/span><span><de>Mandanten-Dashboard<\/de><en>Client Dashboard<\/en><\/span><\/div>\n      <div class=\"nav-item\" data-page=\"uploads\"><span class=\"icon\">\ud83d\udcc1<\/span><span><de>Dokumente (KI-Setup)<\/de><en>Documents (AI Setup)<\/en><\/span><\/div>\n      <div class=\"nav-item\" data-page=\"results\"><span class=\"icon\">\ud83d\udcc4<\/span><span><de>KI-Berichte<\/de><en>AI Reports<\/en><\/span><\/div>\n      <div class=\"nav-item\" data-page=\"agents\"><span class=\"icon\">\ud83e\udd16<\/span><span><de>KI-Agenten Konfig.<\/de><en>AI Agents Config<\/en><\/span><\/div>\n      <div class=\"nav-item\" data-page=\"calculator\"><span class=\"icon\">\ud83d\udcb6<\/span><span><de>Kostenrechner<\/de><en>Cost Calculator<\/en><\/span><\/div>\n      <div class=\"nav-item\" data-page=\"notifications\"><span class=\"icon\">\ud83d\udd14<\/span><span><de>Benachrichtigungen<\/de><en>Notifications<\/en><\/span><\/div>\n    <\/aside>\n    \n    <main class=\"content\">\n      <div id=\"ai-loading-overlay\">\n        <div class=\"spinner\"><\/div>\n        <h2 style=\"margin-bottom: 8px;\"><de>BlueOcean KI analysiert&#8230;<\/de><en>BlueOcean AI is Analyzing&#8230;<\/en><\/h2>\n        <p class=\"muted\"><de>Daten werden extrahiert, Bankposten abgeglichen und Bericht erstellt.<\/de><en>Extracting data, cross-referencing bank items, and generating report.<\/en><\/p>\n      <\/div>\n\n      <section class=\"page\" id=\"tenants\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <h1><de>Globale Mandanten\u00fcbersicht<\/de><en>Firm-wide Tenant Overview<\/en><\/h1>\n            <p><de>Erkennen Sie schnell, welche Mandanten Ihre Aufmerksamkeit erfordern. Sortieren Sie nach fehlenden Belegen oder Compliance-Warnungen.<\/de><en>Quickly identify which clients require your attention. Sort by missing documents, unreconciled items, or compliance flags.<\/en><\/p>\n          <\/div>\n          <div class=\"actions\">\n            <button class=\"btn secondary action-toast\" data-msg=\"Kanzleibericht wird heruntergeladen...\" data-msg-en=\"Downloading Firm Report...\"><de>Kanzlei-Status exportieren<\/de><en>Export Firm Status<\/en><\/button>\n          <\/div>\n        <\/div>\n\n        <div class=\"grid-3\" style=\"margin-bottom:24px\">\n          <div class=\"kpi\"><span class=\"subtle\"><de>Aktive Mandanten gesamt<\/de><en>Total Active Clients<\/en><\/span><strong>12<\/strong><\/div>\n          <div class=\"kpi\"><span class=\"subtle\"><de>Globale Handlungsbedarfe<\/de><en>Global Action Items<\/en><\/span><strong style=\"color:var(--danger)\"><de>24 Ausnahmen<\/de><en>24 Exceptions<\/en><\/strong><\/div>\n          <div class=\"kpi\"><span class=\"subtle\"><de>Eingesparte Zeit durch KI (Monat)<\/de><en>AI Time Saved (MTD)<\/en><\/span><strong style=\"color:var(--success)\"><de>18.5 Stunden<\/de><en>18.5 hours<\/en><\/strong><\/div>\n        <\/div>\n\n        <div class=\"panel\">\n          <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:16px;\">\n            <h3 style=\"margin:0;\"><de>Mandanten-Arbeitsbereiche<\/de><en>Client Workspaces<\/en><\/h3>\n          <\/div>\n          <table class=\"table\">\n            <thead>\n              <tr><th><de>Mandantenname<\/de><en>Client Name<\/en><\/th><th><de>Zeitraum<\/de><en>Period<\/en><\/th><th><de>Handlungsbedarf<\/de><en>Action Items<\/en><\/th><th><de>Abstimmung<\/de><en>Reconciliation<\/en><\/th><th style=\"text-align:right;\"><de>Schnellzugriff<\/de><en>Quick Actions<\/en><\/th><\/tr>\n            <\/thead>\n            <tbody>\n              <tr>\n                <td><strong style=\"color:var(--text); display:block; font-size:15px;\">Cedar Stone Consulting Ltd<\/strong><span style=\"font-size:12px; font-weight:500;\"><de>Zypern<\/de><en>Cyprus<\/en> \u2022 Horizon Commerce Bank<\/span><\/td>\n                <td><de>Feb<\/de><en>Feb<\/en> 2026<\/td>\n                <td><div style=\"display:flex; gap:6px; flex-wrap:wrap;\"><span class=\"badge danger\"><de>2 Fehlende Dok.<\/de><en>2 Missing Docs<\/en><\/span><span class=\"badge warn\"><de>1.140 \u20ac Ungekl\u00e4rt<\/de><en>\u20ac1,140 Unreconciled<\/en><\/span><\/div><\/td>\n                <td><div class=\"bar\" style=\"width:110px; margin-bottom:6px;\"><div class=\"fill\" style=\"width:85%\"><\/div><\/div><span style=\"font-size:12px; font-weight:600; color:var(--muted)\"><de>85% Abgeglichen<\/de><en>85% Matched<\/en><\/span><\/td>\n                <td style=\"text-align:right;\"><button class=\"btn ghost\" style=\"padding:8px 14px; font-size:13px;\" onclick=\"window.jumpToTenant('Cedar Stone Consulting Ltd', 'dashboard')\"><de>Dashboard \u00f6ffnen<\/de><en>Open Dashboard<\/en> \u2192<\/button><\/td>\n              <\/tr>\n              <tr>\n                <td><strong style=\"color:var(--text); display:block; font-size:15px;\">BOP BLUEOCEAN PRIVACY LTD<\/strong><span style=\"font-size:12px; font-weight:500;\"><de>\u00d6sterreich<\/de><en>Austria<\/en> \u2022 Revolut Business (EUR)<\/span><\/td>\n                <td><de>Feb<\/de><en>Feb<\/en> 2026<\/td>\n                <td><div style=\"display:flex; gap:6px; flex-wrap:wrap;\"><span class=\"badge danger\"><de>1 MwSt. Warnung<\/de><en>1 VAT Flag<\/en><\/span><span class=\"badge warn\"><de>980 \u20ac Ungekl\u00e4rt<\/de><en>\u20ac980 Unreconciled<\/en><\/span><\/div><\/td>\n                <td><div class=\"bar\" style=\"width:110px; margin-bottom:6px;\"><div class=\"fill\" style=\"width:92%\"><\/div><\/div><span style=\"font-size:12px; font-weight:600; color:var(--muted)\"><de>92% Abgeglichen<\/de><en>92% Matched<\/en><\/span><\/td>\n                <td style=\"text-align:right;\"><button class=\"btn ghost\" style=\"padding:8px 14px; font-size:13px;\" onclick=\"window.jumpToTenant('BOP BLUEOCEAN PRIVACY LTD', 'dashboard')\"><de>Dashboard \u00f6ffnen<\/de><en>Open Dashboard<\/en> \u2192<\/button><\/td>\n              <\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n      <\/section>\n\n      <section class=\"page active\" id=\"dashboard\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <div style=\"font-size:14px; font-weight:700; color:var(--primary); margin-bottom:6px; text-transform:uppercase; letter-spacing:0.05em;\" id=\"dash-tenant-name\">Cedar Stone Consulting Ltd<\/div>\n            <h1><de>Steuer-Dashboard<\/de><en>Tax Dashboard<\/en><\/h1>\n            <p><de>F\u00fcr Steuerberater sind die wichtigsten Signale Ausnahmen, nicht abgestimmte Betr\u00e4ge, fehlende Dokumente, unbezahlte Rechnungen und Compliance-Probleme.<\/de><en>For a tax accountant, the most important signals are exceptions, unreconciled amounts, missing documentation, unpaid invoices, and compliance issues.<\/en><\/p>\n          <\/div>\n          <div class=\"actions\">\n            <button class=\"btn secondary action-toast\" data-msg=\"Monat erfolgreich exportiert.\" data-msg-en=\"Month exported successfully.\"><de>Monat exportieren<\/de><en>Export month<\/en><\/button>\n          <\/div>\n        <\/div>\n        \n        <div id=\"dashboard-content\" style=\"transition: opacity 0.3s ease;\">\n          <div class=\"grid-4\" style=\"margin-bottom:20px\">\n            <div class=\"card\"><div class=\"label\"><de>Ungekl\u00e4rte Einzahlungen<\/de><en>Unreconciled deposits<\/en><\/div><div class=\"value\" id=\"val-unrec\">980 \u20ac<\/div><div class=\"trend\" id=\"trend-unrec\" style=\"color:var(--warning)\"><de>Handlungsbedarf<\/de><en>Action required<\/en><\/div><\/div>\n            <div class=\"card\"><div class=\"label\"><de>Unbezahlte Rechnungen<\/de><en>Unpaid invoices<\/en><\/div><div class=\"value\" id=\"val-unpaid\">40 \u20ac<\/div><div class=\"trend\" id=\"trend-unpaid\" style=\"color:var(--warning)\"><de>1 Rechnung offen<\/de><en>1 invoice open<\/en><\/div><\/div>\n            <div class=\"card\"><div class=\"label\"><de>Ausgaben ohne Beleg<\/de><en>Expenses without invoice<\/en><\/div><div class=\"value\" id=\"val-noinv\">5<\/div><div class=\"trend\" id=\"trend-noinv\"><de>Zuordnung erforderlich<\/de><en>Needs allocation<\/en><\/div><\/div>\n            <div class=\"card\"><div class=\"label\"><de>Compliance-Warnungen<\/de><en>Compliance alerts<\/en><\/div><div class=\"value\" id=\"val-comp\">1<\/div><div class=\"trend\" id=\"trend-comp\" style=\"color:var(--danger)\"><de>MwSt.-Abweichung<\/de><en>VAT discrepancy<\/en><\/div><\/div>\n          <\/div>\n          <div class=\"grid-2\">\n            <div class=\"panel\">\n              <div style=\"display:flex;justify-content:space-between;align-items:center;gap:16px; margin-bottom:8px;\"><div><h3 style=\"margin:0;\"><de>Zusammenfassung der Periode<\/de><en>Period summary<\/en><\/h3><\/div><span class=\"badge info\"><de>Feb<\/de><en>Feb<\/en> 2026<\/span><\/div>\n              <p class=\"muted\" style=\"margin-bottom:16px; font-size:14px;\"><de>Spiegelt die Struktur von Abstimmungsberichten wider.<\/de><en>Built to mirror the structure of reconciliation reports.<\/en><\/p>\n              <div class=\"summary-list\">\n                <div class=\"summary-item\"><span><de>Geldeingang laut Kontoauszug gesamt<\/de><en>Total money in per bank statement<\/en><\/span><strong id=\"sum-1\">3.420,00 \u20ac<\/strong><\/div>\n                <div class=\"summary-item\"><span><de>Geldeing\u00e4nge mit passenden Rechnungen<\/de><en>Incoming funds with matching invoices<\/en><\/span><strong id=\"sum-2\">2.160,00 \u20ac<\/strong><\/div>\n                <div class=\"summary-item\"><span><de>Geldeing\u00e4nge ohne Rechnungsbelege<\/de><en>Incoming funds missing invoice documentation<\/en><\/span><strong id=\"sum-3\">1.140,00 \u20ac<\/strong><\/div>\n                <div class=\"summary-item\"><span><de>Summe unbezahlter Ausgangsrechnungen<\/de><en>Total unpaid invoices issued<\/en><\/span><strong id=\"sum-4\">95,00 \u20ac<\/strong><\/div>\n              <\/div>\n            <\/div>\n            <div class=\"panel\">\n              <h3 style=\"margin-bottom:16px;\"><de>Priorit\u00e4tswarteschlangen<\/de><en>Priority queues<\/en><\/h3>\n              <div id=\"dash-notifications\">\n                <div class=\"notif unread\">\n                  <div style=\"display:flex; justify-content:space-between; align-items:start; gap: 12px;\">\n                    <div><div class=\"notif-title\"><de>Fehlende Rechnungsbelege<\/de><en>Missing invoice documentation<\/en><\/div><div class=\"muted\"><de>F\u00fcr 1 Bankeinzahlung fehlt das Rechnungsdokument.<\/de><en>1 incoming bank deposit lacks its invoice document.<\/en><\/div><\/div>\n                    <button class=\"btn secondary btn-sm action-toast\" style=\"white-space:nowrap; border-color:var(--primary); color:var(--primary);\" data-msg=\"E-Mail-Entwurf an Mandanten erstellt.\" data-msg-en=\"Auto-email drafted to client.\"><de>Beim Mandanten anfragen<\/de><en>Request from client<\/en><\/button>\n                  <\/div>\n                <\/div>\n                <div class=\"notif unread\"><div class=\"notif-title\"><de>Ausstehende unbezahlte Rechnung<\/de><en>Outstanding unpaid invoice<\/en><\/div><div class=\"muted\"><de>Rechnung INV-55-2041 ist zum 28. Feb 2026 noch unbezahlt.<\/de><en>Invoice INV-55-2041 remains unpaid as of Feb 28, 2026.<\/en><\/div><\/div>\n                <div class=\"notif unread\"><div class=\"notif-title\"><de>MwSt.-Abweichung bei Gutschrift<\/de><en>VAT discrepancy on credit note<\/en><\/div><div class=\"muted\"><de>Ein Dokument zeigt widerspr\u00fcchliche Reverse-Charge-Behandlungen.<\/de><en>One document shows contradictory reverse-charge treatment.<\/en><\/div><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n      \n      <section class=\"page\" id=\"uploads\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <h1><de>Dokumentenverarbeitungs-Struktur<\/de><en>Document Processing Structure<\/en><\/h1>\n            <p><de>Laden Sie Dateien in die entsprechenden Ordner hoch. Der KI-Agent gleicht Kontoausz\u00fcge mit Rechnungen ab.<\/de><en>Upload files into their respective folders. The AI Agent will cross-reference statements with invoices.<\/en><\/p>\n          <\/div>\n          <div class=\"actions\">\n            <button class=\"btn primary\" id=\"run-ai-agent-btn\" style=\"padding: 14px 24px; font-size: 15px;\">\ud83d\ude80 <de>KI-Abstimmung starten<\/de><en>Run AI Reconciliation<\/en><\/button>\n          <\/div>\n        <\/div>\n        \n        <div class=\"grid-3\" style=\"margin-bottom: 24px;\">\n          <div class=\"panel\" style=\"background:#f9fbff; border: 1px solid var(--line);\">\n            <h3 style=\"display:flex; align-items:center; gap:8px;\"><span>\ud83c\udfe6<\/span> <de>Kontoausz\u00fcge<\/de><en>Bank Statements<\/en><\/h3>\n            <p class=\"muted\" style=\"font-size:13px; margin-bottom: 16px;\"><de>Monatliche Kontoausz\u00fcge hier ablegen.<\/de><en>Drop monthly statement exports here.<\/en><\/p>\n            <input type=\"file\" class=\"hidden-file-input\" data-target=\"bank-list\" multiple style=\"display:none;\" \/>\n            <div class=\"dropzone folder-dropzone\"><div class=\"big\">+ <de>Bankdateien hinzuf\u00fcgen<\/de><en>Add Bank Files<\/en><\/div><\/div>\n            <div class=\"file-list\" id=\"bank-list\"><div class=\"file-row\" data-name=\"Revolut_Statement_Feb2026.pdf\"><div class=\"name\">Revolut_Statement_Feb2026.pdf<\/div><span class=\"badge success\"><de>Bereit<\/de><en>Ready<\/en><\/span><\/div><\/div>\n          <\/div>\n          <div class=\"panel\" style=\"background:#f9fbff; border: 1px solid var(--line);\">\n            <h3 style=\"display:flex; align-items:center; gap:8px;\"><span>\ud83d\uded2<\/span> <de>Eingangsrechnungen<\/de><en>Purchase Invoices<\/en><\/h3>\n            <p class=\"muted\" style=\"font-size:13px; margin-bottom: 16px;\"><de>Eingehende Rechnungen, Belege und Abos ablegen.<\/de><en>Drop incoming bills, receipts, and subscriptions.<\/en><\/p>\n            <input type=\"file\" class=\"hidden-file-input\" data-target=\"purchase-list\" multiple style=\"display:none;\" \/>\n            <div class=\"dropzone folder-dropzone\"><div class=\"big\">+ <de>Eingangsbelege hinzuf\u00fcgen<\/de><en>Add Purchase Docs<\/en><\/div><\/div>\n            <div class=\"file-list\" id=\"purchase-list\">\n               <div class=\"file-row\" data-name=\"Invoice-936FB5C1-6353.pdf\"><div class=\"name\">Invoice-936FB5C1-6353.pdf<\/div><span class=\"badge success\"><de>Bereit<\/de><en>Ready<\/en><\/span><\/div>\n               <div class=\"file-row\" data-name=\"amazon_prime_feb.pdf\"><div class=\"name\">amazon_prime_feb.pdf<\/div><span class=\"badge success\"><de>Bereit<\/de><en>Ready<\/en><\/span><\/div>\n            <\/div>\n          <\/div>\n          <div class=\"panel\" style=\"background:#f9fbff; border: 1px solid var(--line);\">\n            <h3 style=\"display:flex; align-items:center; gap:8px;\"><span>\ud83d\udcc8<\/span> <de>Ausgangsrechnungen<\/de><en>Sales Invoices<\/en><\/h3>\n            <p class=\"muted\" style=\"font-size:13px; margin-bottom: 16px;\"><de>An Kunden ausgestellte Ausgangsrechnungen ablegen.<\/de><en>Drop outgoing invoices issued to your clients.<\/en><\/p>\n            <input type=\"file\" class=\"hidden-file-input\" data-target=\"sales-list\" multiple style=\"display:none;\" \/>\n            <div class=\"dropzone folder-dropzone\"><div class=\"big\">+ <de>Ausgangsbelege hinzuf\u00fcgen<\/de><en>Add Sales Docs<\/en><\/div><\/div>\n            <div class=\"file-list\" id=\"sales-list\">\n               <div class=\"file-row\" data-name=\"INV-48-0005.pdf\"><div class=\"name\">INV-48-0005.pdf<\/div><span class=\"badge success\"><de>Bereit<\/de><en>Ready<\/en><\/span><\/div>\n               <div class=\"file-row\" data-name=\"INV-21-0012.pdf\"><div class=\"name\">INV-21-0012.pdf<\/div><span class=\"badge success\"><de>Bereit<\/de><en>Ready<\/en><\/span><\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n      \n      <section class=\"page\" id=\"results\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <h1><de>KI-generierter Bericht<\/de><en>AI Generated Report<\/en><\/h1>\n            <p><de>Dieser Bericht wurde vom BlueOcean KI-Agenten dynamisch aus Ihren hochgeladenen Dateien erstellt.<\/de><en>This report was synthesized dynamically by the BlueOcean AI Agent using your uploaded files.<\/en><\/p>\n          <\/div>\n          <div class=\"actions\">\n            <button class=\"btn secondary action-toast\" data-msg=\"Buchungsjournal f\u00fcr DATEV exportiert.\" data-msg-en=\"Booking journal exported for DATEV.\"><de>Nach DATEV exportieren (CSV)<\/de><en>Export to DATEV (CSV)<\/en><\/button>\n          <\/div>\n        <\/div>\n        \n        <div class=\"panel\" id=\"dynamic-report-container\">\n          <div class=\"report-header\">\n            <div>\n              <div class=\"report-brand\">BLUEOCEAN SYNTHETIC AI AGENT <span class=\"badge violet\" style=\"margin-left:8px; text-transform:none;\"><de>Demo-Beispiel<\/de><en>Demo Sample<\/en><\/span><\/div>\n              <h2 style=\"margin-top:10px;font-size:26px\"><de>Kontoauszug vs. Rechnungsabstimmung<\/de><en>Bank Statement vs. Invoices Reconciliation<\/en><\/h2>\n              <p style=\"font-weight:500;\"><de>Unternehmen<\/de><en>Company<\/en>: BOP BLUEOCEAN PRIVACY LTD \u2022 <de>Zeitraum<\/de><en>Period<\/en>: Feb 2026 \u2022 <de>Konto<\/de><en>Account<\/en>: Revolut Business<\/p>\n            <\/div>\n            <div class=\"score\">98%<\/div>\n          <\/div>\n          \n          <div class=\"report-section\">\n            <h3>1. <de>Zusammenfassung<\/de><en>Executive Summary<\/en><\/h3>\n            <div class=\"summary-list\">\n              <div class=\"summary-item\"><span><de>Geldeingang laut Kontoauszug gesamt<\/de><en>Total &#8220;Money In&#8221; per Bank Statement<\/en><\/span><strong>2.775,00 \u20ac<\/strong><\/div>\n              <div class=\"summary-item\"><span><de>Geldeing\u00e4nge mit passenden Rechnungen<\/de><en>Total Incoming Funds with Matching Invoices<\/en><\/span><strong style=\"color: var(--success);\">1.795,00 \u20ac<\/strong><\/div>\n              <div class=\"summary-item\"><span><de>Geldeing\u00e4nge ohne Rechnungsbelege<\/de><en>Incoming Funds Missing Invoice Documentation<\/en><\/span><strong style=\"color: var(--danger);\">980,00 \u20ac<\/strong><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"report-section\">\n            <h3>2. <de>Abgeglichene Transaktionen (100% \u00dcbereinstimmung &#038; vorkontiert)<\/de><en>Reconciled Transactions (100% Match &#038; Pre-Coded)<\/en><\/h3>\n            <table class=\"table\">\n              <thead><tr><th><de>Datum<\/de><en>Date<\/en><\/th><th><de>Absender\/Empf\u00e4nger<\/de><en>Sender\/Payee<\/en><\/th><th><de>Rechnungs-Nr.<\/de><en>Invoice #<\/en><\/th><th><de>Betrag<\/de><en>Amount<\/en><\/th><th><de>Vorgeschlagenes DATEV-Konto<\/de><en>Suggested Ledger Code<\/en><\/th><\/tr><\/thead>\n              <tbody>\n                 <tr><td>19 Feb 2026<\/td><td>Dr. Stefan R\u00fccker GmbH<\/td><td>INV-48-0005<\/td><td>29,00 \u20ac<\/td><td><span class=\"badge info\"><de>#8400 &#8211; Erl\u00f6se<\/de><en>#8400 &#8211; Revenue<\/en><\/span><\/td><\/tr>\n                 <tr><td>02 Feb 2026<\/td><td>Google Workspace<\/td><td>5473587338<\/td><td>25,30 \u20ac<\/td><td><span class=\"badge info\"><de>#4920 &#8211; IT-Dienstleistungen<\/de><en>#4920 &#8211; IT Services<\/en><\/span><\/td><\/tr>\n                 <tr><td>01 Feb 2026<\/td><td>Mable GmbH<\/td><td>936FB5C1-6353<\/td><td>199,00 \u20ac<\/td><td><span class=\"badge info\"><de>#4900 &#8211; Sonstige Aufwendungen<\/de><en>#4900 &#8211; Misc. Costs<\/en><\/span><\/td><\/tr>\n              <\/tbody>\n            <\/table>\n          <\/div>\n          \n          <div class=\"report-section\">\n            <h3>3. <de>Handlungsbedarf: Ausnahmen &#038; fehlende Belege<\/de><en>Action Required: Exceptions &#038; Missing Evidence<\/en><\/h3>\n            <table class=\"table\">\n              <thead><tr><th><de>Datum<\/de><en>Date<\/en><\/th><th><de>Bankbeschreibung<\/de><en>Bank Description<\/en><\/th><th><de>Erwarteter Betrag<\/de><en>Expected Amount<\/en><\/th><th>Status<\/th><\/tr><\/thead>\n              <tbody>\n                 <tr><td>5 Feb 2026<\/td><td>Money added from S. JARITZ STAHLBAU<\/td><td>980,00 \u20ac<\/td><td><span class=\"badge danger\"><de>Fehlende Ausgangsrechnung<\/de><en>Missing Sales Invoice<\/en><\/span><\/td><\/tr>\n              <\/tbody>\n            <\/table>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section class=\"page\" id=\"agents\"><div class=\"page-top\"><div class=\"title\"><h1><de>KI-Agenten Konfiguration<\/de><en>AI Agents Configuration<\/en><\/h1><\/div><\/div><div class=\"panel\">Konfiguration&#8230;<\/div><\/section>\n      <section class=\"page\" id=\"calculator\"><div class=\"page-top\"><div class=\"title\"><h1><de>Kostenrechner<\/de><en>Cost Calculator<\/en><\/h1><\/div><\/div><div class=\"panel\">Kostenrechner&#8230;<\/div><\/section>\n      <section class=\"page\" id=\"notifications\"><div class=\"page-top\"><div class=\"title\"><h1><de>Benachrichtigungen<\/de><en>Notifications<\/en><\/h1><\/div><\/div><div class=\"panel\">Benachrichtigungen&#8230;<\/div><\/section>\n      \n    <\/main>\n  <\/div>\n<\/section>\n\n<!-- ==========================================\n     NEU: FRONT OFFICE & SALES APP \n     ========================================== -->\n<section class=\"view\" id=\"frontoffice\">\n  <div class=\"layout\">\n    <aside class=\"sidebar\">\n      <div class=\"workspace-card\" style=\"background:linear-gradient(180deg,#fcfdff,#f4f8ff);\">\n        <div class=\"subtle\" style=\"margin-bottom:6px\"><de>Eingeloggt als Front Office<\/de><en>Logged in as Front Office<\/en><\/div>\n        <div style=\"font-weight:900; font-size:15px; color:var(--primary);\">Cedar Stone Consulting Ltd<\/div>\n      <\/div>\n      <div class=\"group-title\"><de>Operations<\/de><en>Operations<\/en><\/div>\n      <div class=\"nav-item active\" data-page=\"fo-dashboard\"><span class=\"icon\">\ud83d\udcca<\/span><span><de>Dashboard<\/de><en>Dashboard<\/en><\/span><\/div>\n      <div class=\"nav-item\" data-page=\"fo-mailroom\"><span class=\"icon\">\ud83d\udce5<\/span><span><de>KI-Posteingang<\/de><en>AI Mailroom<\/en><\/span><\/div>\n      <div class=\"group-title\"><de>Vertrieb \/ Sales<\/de><en>Sales<\/en><\/div>\n      <div class=\"nav-item\" data-page=\"fo-invoices\"><span class=\"icon\">\ud83d\udcb6<\/span><span><de>Ausgangsrechnungen<\/de><en>Sales Invoices<\/en><\/span><\/div>\n      <div class=\"nav-item\" data-page=\"fo-dunning\"><span class=\"icon\">\u26a0\ufe0f<\/span><span><de>Mahnwesen (KI)<\/de><en>AI Dunning<\/en><\/span><\/div>\n    <\/aside>\n    \n    <main class=\"content\">\n      <section class=\"page active\" id=\"fo-dashboard\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <h1><de>Front Office &#038; Sales<\/de><en>Front Office &#038; Sales<\/en><\/h1>\n            <p><de>Automatisieren Sie den Posteingang, verfolgen Sie Zahlungseing\u00e4nge und \u00fcberlassen Sie das Mahnwesen der KI.<\/de><en>Automate the mailroom, track incoming payments, and let the AI handle dunning.<\/en><\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"grid-3\" style=\"margin-bottom:20px\">\n          <div class=\"card\"><div class=\"label\"><de>Ungelesene Eingangspost<\/de><en>Unprocessed Mail<\/en><\/div><div class=\"value\">3<\/div><div class=\"trend\" style=\"color:var(--primary)\"><de>KI sortiert&#8230;<\/de><en>AI is sorting&#8230;<\/en><\/div><\/div>\n          <div class=\"card\"><div class=\"label\"><de>Offene Forderungen<\/de><en>Open Receivables<\/en><\/div><div class=\"value\">1.235 \u20ac<\/div><div class=\"trend\" style=\"color:var(--danger)\"><de>1 Rechnung \u00fcberf\u00e4llig<\/de><en>1 invoice overdue<\/en><\/div><\/div>\n          <div class=\"card\"><div class=\"label\"><de>Automatisch zugeordnete Zahlungen<\/de><en>Auto-matched Payments<\/en><\/div><div class=\"value\">42<\/div><div class=\"trend\"><de>Diesen Monat (100% genau)<\/de><en>This month (100% accurate)<\/en><\/div><\/div>\n        <\/div>\n        \n        <div class=\"grid-2\">\n          <div class=\"panel\">\n            <h3 style=\"margin-bottom:16px;\"><de>Letzte Aktivit\u00e4ten (Live-Bankabgleich)<\/de><en>Recent Activity (Live Bank Sync)<\/en><\/h3>\n            <div class=\"notif\" style=\"border-left: 4px solid var(--success);\">\n              <div class=\"notif-title\"><de>Zahlungseingang zugeordnet<\/de><en>Payment matched<\/en><\/div>\n              <div class=\"muted\"><de>Rechnung INV-48-0005 (29,00 \u20ac) wurde von der KI als bezahlt markiert.<\/de><en>Invoice INV-48-0005 (\u20ac29.00) was marked as paid by the AI.<\/en><\/div>\n            <\/div>\n            <div class=\"notif\" style=\"border-left: 4px solid var(--primary);\">\n              <div class=\"notif-title\"><de>Neue Post klassifiziert<\/de><en>New mail categorized<\/en><\/div>\n              <div class=\"muted\"><de>Das Dokument &#8220;Telekom_Rechnung_Feb.pdf&#8221; wurde als Eingangsrechnung erkannt und an den Steuerberater weitergeleitet.<\/de><en>Document &#8220;Telekom_Invoice_Feb.pdf&#8221; was categorized as Purchase Invoice and routed to accountant.<\/en><\/div>\n            <\/div>\n          <\/div>\n          \n          <div class=\"panel\">\n            <h3 style=\"margin-bottom:16px;\"><de>KI-Aufgaben<\/de><en>AI Tasks<\/en><\/h3>\n            <div class=\"notif unread\" style=\"border-color:var(--warning);\">\n              <div style=\"display:flex; justify-content:space-between; align-items:start; gap: 12px;\">\n                <div><div class=\"notif-title\"><de>Rechnung \u00fcberf\u00e4llig<\/de><en>Invoice Overdue<\/en><\/div><div class=\"muted\"><de>Lumen Ridge Trading hat INV-55-2041 (95,00 \u20ac) noch nicht bezahlt.<\/de><en>Lumen Ridge Trading has not paid INV-55-2041 (\u20ac95.00).<\/en><\/div><\/div>\n                <button class=\"btn secondary btn-sm action-toast\" style=\"white-space:nowrap; border-color:var(--warning); color:var(--warning);\" data-msg=\"Mahnung entworfen.\" data-msg-en=\"Reminder email drafted.\"><de>Mahnung entwerfen<\/de><en>Draft Reminder<\/en><\/button>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n      <section class=\"page\" id=\"fo-mailroom\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <h1><de>KI-Posteingang<\/de><en>AI Mailroom<\/en><\/h1>\n            <p><de>Laden Sie E-Mails, Briefe und Scans hier hoch. Die KI liest, klassifiziert und leitet das Dokument an die richtige Stelle weiter.<\/de><en>Drop emails, letters, and scans here. The AI reads, classifies, and routes the document to the right destination.<\/en><\/p>\n          <\/div>\n        <\/div>\n        \n        <div class=\"dropzone\" style=\"margin-bottom: 24px; padding: 40px; border-color: #a2b0c5; background: #fff;\">\n          <div class=\"big\" style=\"color:var(--text); font-size:20px;\">+ <de>Dokumente hier ablegen<\/de><en>Drop documents here<\/en><\/div>\n          <div class=\"muted\"><de>Unterst\u00fctzt PDFs, Bilder und E-Mail-Dateien<\/de><en>Supports PDFs, images, and email files<\/en><\/div>\n        <\/div>\n\n        <div class=\"panel\">\n          <h3 style=\"margin-bottom:16px;\"><de>Heute verarbeitet<\/de><en>Processed Today<\/en><\/h3>\n          <table class=\"table\">\n            <thead>\n              <tr><th><de>Dokument<\/de><en>Document<\/en><\/th><th><de>KI-Klassifizierung<\/de><en>AI Classification<\/en><\/th><th><de>Genauigkeit<\/de><en>Confidence<\/en><\/th><th><de>Zielort \/ Aktion<\/de><en>Target Destination<\/en><\/th><\/tr>\n            <\/thead>\n            <tbody>\n              <tr>\n                <td><strong>Rechnung_Telekom_Feb.pdf<\/strong><\/td>\n                <td><span class=\"badge info\"><de>Eingangsrechnung<\/de><en>Purchase Invoice<\/en><\/span><\/td>\n                <td><strong style=\"color:var(--success)\">99%<\/strong><\/td>\n                <td><de>An Steuerberater gesendet<\/de><en>Sent to Accountant<\/en><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Mietvertrag_Anpassung.pdf<\/strong><\/td>\n                <td><span class=\"badge violet\"><de>Rechtliches Dokument<\/de><en>Legal \/ Contract<\/en><\/span><\/td>\n                <td><strong style=\"color:var(--success)\">95%<\/strong><\/td>\n                <td><de>Im Archiv abgelegt<\/de><en>Stored in Archive<\/en><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>Unbekannter_Scan_001.jpg<\/strong><\/td>\n                <td><span class=\"badge warn\"><de>Unbekannt<\/de><en>Unknown<\/en><\/span><\/td>\n                <td><strong style=\"color:var(--danger)\">42%<\/strong><\/td>\n                <td><button class=\"btn secondary btn-sm\"><de>Manuell pr\u00fcfen<\/de><en>Review Manually<\/en><\/button><\/td>\n              <\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n      <\/section>\n\n      <section class=\"page\" id=\"fo-invoices\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <h1><de>Ausgangsrechnungen<\/de><en>Sales Invoices<\/en><\/h1>\n            <p><de>Die KI \u00fcberwacht das Bankkonto und markiert Ausgangsrechnungen automatisch als bezahlt, sobald das Geld eingeht.<\/de><en>The AI monitors the bank account and automatically marks sales invoices as paid when funds arrive.<\/en><\/p>\n          <\/div>\n        <\/div>\n        <div class=\"panel\">\n          <table class=\"table\">\n            <thead>\n              <tr><th><de>Rechnungs-Nr.<\/de><en>Invoice #<\/en><\/th><th><de>Kunde<\/de><en>Client<\/en><\/th><th><de>Betrag<\/de><en>Amount<\/en><\/th><th>Status<\/th><th><de>KI-Abgleich<\/de><en>AI Bank Match<\/en><\/th><\/tr>\n            <\/thead>\n            <tbody>\n              <tr>\n                <td><strong>INV-48-0005<\/strong><\/td><td>Dr. Stefan R\u00fccker GmbH<\/td><td>29,00 \u20ac<\/td>\n                <td><span class=\"badge success\"><de>Bezahlt<\/de><en>Paid<\/en><\/span><\/td>\n                <td><de>Am 19. Feb 2026 zugeordnet<\/de><en>Matched on Feb 19, 2026<\/en><\/td>\n              <\/tr>\n              <tr>\n                <td><strong>INV-17-0014<\/strong><\/td><td>VITORI Health GmbH<\/td><td>450,00 \u20ac<\/td>\n                <td><span class=\"badge success\"><de>Bezahlt<\/de><en>Paid<\/en><\/span><\/td>\n                <td><de>Am 17. Feb 2026 zugeordnet<\/de><en>Matched on Feb 17, 2026<\/en><\/td>\n              <\/tr>\n              <tr style=\"background:#fff6e8;\">\n                <td><strong>INV-55-2041<\/strong><\/td><td>Lumen Ridge Trading Ltd<\/td><td>95,00 \u20ac<\/td>\n                <td><span class=\"badge warn\"><de>\u00dcberf\u00e4llig<\/de><en>Overdue<\/en><\/span><\/td>\n                <td><strong style=\"color:var(--danger)\"><de>Kein Zahlungseingang gefunden<\/de><en>No incoming payment found<\/en><\/strong><\/td>\n              <\/tr>\n            <\/tbody>\n          <\/table>\n        <\/div>\n      <\/section>\n\n      <section class=\"page\" id=\"fo-dunning\">\n        <div class=\"page-top\">\n          <div class=\"title\">\n            <h1><de>Mahnwesen (KI)<\/de><en>AI Dunning<\/en><\/h1>\n            <p><de>Lassen Sie die KI h\u00f6fliche aber bestimmte Zahlungserinnerungen f\u00fcr \u00fcberf\u00e4llige Rechnungen entwerfen.<\/de><en>Let the AI draft polite but firm payment reminders for overdue invoices.<\/en><\/p>\n          <\/div>\n        <\/div>\n        <div class=\"panel\" style=\"border-left: 4px solid var(--warning);\">\n          <div style=\"display:flex; justify-content:space-between; align-items:flex-start;\">\n            <div>\n              <h3 style=\"margin-bottom:8px;\"><de>Lumen Ridge Trading Ltd (INV-55-2041)<\/de><en>Lumen Ridge Trading Ltd (INV-55-2041)<\/en><\/h3>\n              <p class=\"muted\" style=\"margin-bottom:16px;\"><de>F\u00e4llig seit 14 Tagen. Rechnungsbetrag: 95,00 \u20ac.<\/de><en>Overdue by 14 days. Invoice amount: \u20ac95.00.<\/en><\/p>\n              <div style=\"background:#f9fbff; padding:16px; border-radius:12px; border:1px solid #dbe4f0; font-family:monospace; font-size:13px; color:#4a5872;\">\n                <de>Betreff: Zahlungserinnerung &#8211; Rechnung INV-55-2041<br><br>Sehr geehrtes Team von Lumen Ridge,<br>wir hoffen, es geht Ihnen gut. Wir m\u00f6chten Sie h\u00f6flich daran erinnern, dass die Rechnung INV-55-2041 \u00fcber 95,00 \u20ac noch zur Zahlung offen ist&#8230;<\/de>\n                <en>Subject: Payment Reminder &#8211; Invoice INV-55-2041<br><br>Dear Lumen Ridge Team,<br>We hope you are doing well. This is a polite reminder that invoice INV-55-2041 for \u20ac95.00 is currently overdue&#8230;<\/en>\n              <\/div>\n            <\/div>\n            <div style=\"display:flex; flex-direction:column; gap:10px;\">\n              <button class=\"btn primary action-toast\" data-msg=\"E-Mail gesendet!\" data-msg-en=\"Email sent!\"><de>E-Mail senden<\/de><en>Send Email<\/en><\/button>\n              <button class=\"btn secondary action-toast\" data-msg=\"Entwurf verworfen.\" data-msg-en=\"Draft discarded.\"><de>Verwerfen<\/de><en>Discard<\/en><\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/section>\n\n    <\/main>\n  <\/div>\n<\/section>\n\n\n<!-- ==========================================\n     AUTH & MOBILE (Bestehend) \n     ========================================== -->\n<section class=\"view active\" id=\"auth\">\n  <div class=\"auth-wrap\">\n    <div class=\"auth-card auth-hero\">\n      <div class=\"lang-toggle\" onclick=\"toggleLanguage()\" style=\"position: absolute; top: 24px; right: 24px; cursor: pointer; background: rgba(255,255,255,0.15); padding: 8px 12px; border-radius: 12px; font-weight: 700; font-size: 14px; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: background 0.2s, transform 0.2s; z-index: 10; border: 1px solid rgba(255,255,255,0.1);\" onmouseover=\"this.style.background='rgba(255,255,255,0.25)'; this.style.transform='scale(1.05)';\" onmouseout=\"this.style.background='rgba(255,255,255,0.15)'; this.style.transform='scale(1)';\">\n        <de>\ud83c\uddec\ud83c\udde7 EN<\/de><en>\ud83c\udde9\ud83c\uddea DE<\/en>\n      <\/div>\n\n      <div>\n        <div class=\"logo\" style=\"color:#fff;font-size:22px;margin-bottom:24px\"><div class=\"logo-mark\" style=\"box-shadow:none\">B<\/div> BlueOcean Finance AI<\/div>\n        <h2 style=\"font-size:42px;color:#fff;line-height:1.15;margin-bottom:20px; letter-spacing:-0.03em;\"><de>Professioneller Zugang f\u00fcr mandantenf\u00e4hige Buchhaltung<\/de><en>Professional access for multi-tenant accounting work<\/en><\/h2>\n        <p style=\"font-size:16px; line-height:1.6; color:rgba(255,255,255,0.9);\"><de>Da das Produkt f\u00fcr Steuerberater entwickelt wurde, die mehrere Mandanten verwalten, unterst\u00fctzt der Login rollenbasierten Zugriff und eine schnelle R\u00fcckkehr zum richtigen Mandanten-Arbeitsbereich.<\/de><en>Because the product is meant for tax accountants managing several tenants, the auth flow should support clear role-based access and quick return to the right client workspace.<\/en><\/p>\n      <\/div>\n      <div class=\"bullets\" style=\"margin-top:40px;\">\n        <div class=\"bullet\" style=\"color:#fff\"><span class=\"check\" style=\"background:rgba(255,255,255,0.2); color:#fff;\">\u2713<\/span><span style=\"color:rgba(255,255,255,.95)\"><de>Schneller Login mit mandantenbezogener Arbeitsbereichsauswahl.<\/de><en>Fast login with tenant-aware workspace selection.<\/en><\/span><\/div>\n        <div class=\"bullet\" style=\"color:#fff\"><span class=\"check\" style=\"background:rgba(255,255,255,0.2); color:#fff;\">\u2713<\/span><span style=\"color:rgba(255,255,255,.95)\"><de>Saubere, vertrauensw\u00fcrdige Registrierung f\u00fcr Kanzleien und Teams.<\/de><en>Clean, trustworthy registration for firms and team members.<\/en><\/span><\/div>\n        <div class=\"bullet\" style=\"color:#fff\"><span class=\"check\" style=\"background:rgba(255,255,255,0.2); color:#fff;\">\u2713<\/span><span style=\"color:rgba(255,255,255,.95)\"><de>Visueller Stil ist an die Hauptanwendung angepasst.<\/de><en>Visual style aligned with the main application.<\/en><\/span><\/div>\n      <\/div>\n    <\/div>\n    <div style=\"display:flex; flex-direction:column; justify-content:center;\">\n      \n      <form class=\"auth-card auth-form\" id=\"login-form\">\n        <h2 style=\"font-size:32px;\"><de>Anmelden<\/de><en>Login<\/en><\/h2><p style=\"margin-bottom:24px;\"><de>Willkommen zur\u00fcck in Ihrem Arbeitsbereich.<\/de><en>Welcome back to your workspace.<\/en><\/p>\n        <div class=\"field\"><label><de>Benutzername<\/de><en>Username<\/en><\/label><input id=\"login-username\" class=\"input\" type=\"text\" data-ph-de=\"admin\" data-ph-en=\"admin\" placeholder=\"admin\" required\/><\/div>\n        <div class=\"field\"><label><de>Passwort<\/de><en>Password<\/en><\/label><input id=\"login-password\" class=\"input\" type=\"password\" data-ph-de=\"Passwort eingeben\" data-ph-en=\"Enter your password\" placeholder=\"Passwort eingeben\" required\/><\/div>\n        <div class=\"actions-row\"><span class=\"link action-toast\" data-msg=\"Link zum Zur\u00fccksetzen des Passworts gesendet.\" data-msg-en=\"Password reset link sent.\"><de>Passwort vergessen?<\/de><en>Forgot password?<\/en><\/span><button type=\"submit\" class=\"btn primary\" style=\"padding:14px 28px;\"><de>Anmelden<\/de><en>Login<\/en><\/button><\/div>\n        \n        <div style=\"margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); text-align: center;\">\n          <span class=\"helper\" style=\"display:block; margin-bottom:12px;\"><de>Noch kein Konto?<\/de><en>Don&#8217;t have an account yet?<\/en><\/span>\n          <button type=\"button\" class=\"btn secondary\" style=\"width: 100%;\" onclick=\"toggleAuth('register')\"><de>Neue Kanzlei registrieren<\/de><en>Register a new firm<\/en><\/button>\n        <\/div>\n      <\/form>\n\n      <form class=\"auth-card auth-form\" id=\"register-form\" style=\"display: none;\" onsubmit=\"event.preventDefault(); window.showToast(currentLanguage === 'en' ? 'Account created successfully! Please log in.' : 'Konto erfolgreich erstellt! Bitte melden Sie sich an.'); toggleAuth('login');\">\n        <h2 style=\"font-size:32px;\"><de>Registrieren<\/de><en>Register<\/en><\/h2><p style=\"margin-bottom:24px;\"><de>Erstellen Sie ein Kanzlei-Konto und verkn\u00fcpfen Sie den ersten Mandanten.<\/de><en>Create a tax-firm or accountant account and connect the first tenant workspace.<\/en><\/p>\n        <div class=\"row2\"><div class=\"field\"><label><de>Vollst\u00e4ndiger Name<\/de><en>Full name<\/en><\/label><input class=\"input\" data-ph-de=\"Max Mustermann\" data-ph-en=\"Mila Rowan\" placeholder=\"Max Mustermann\" required\/><\/div><div class=\"field\"><label><de>Name der Kanzlei<\/de><en>Firm name<\/en><\/label><input class=\"input\" data-ph-de=\"BlueOcean Ledger Advisory\" data-ph-en=\"BlueOcean Ledger Advisory\" placeholder=\"BlueOcean Ledger Advisory\" required\/><\/div><\/div>\n        <div class=\"field\"><label><de>E-Mail<\/de><en>Email<\/en><\/label><input class=\"input\" type=\"email\" data-ph-de=\"kontakt@blueocean.ai\" data-ph-en=\"contact@blueocean.ai\" placeholder=\"kontakt@blueocean.ai\" required\/><\/div>\n        <div class=\"row2\"><div class=\"field\"><label><de>Passwort<\/de><en>Password<\/en><\/label><input class=\"input\" type=\"password\" data-ph-de=\"Passwort erstellen\" data-ph-en=\"Create password\" placeholder=\"Passwort erstellen\" required\/><\/div><div class=\"field\"><label><de>Passwort best\u00e4tigen<\/de><en>Confirm password<\/en><\/label><input class=\"input\" type=\"password\" data-ph-de=\"Passwort wiederholen\" data-ph-en=\"Repeat password\" placeholder=\"Passwort wiederholen\" required\/><\/div><\/div>\n        <div class=\"field\"><label><de>Name des ersten Mandanten<\/de><en>First tenant name<\/en><\/label><input class=\"input\" data-ph-de=\"Cedar Stone Consulting Ltd\" data-ph-en=\"Cedar Stone Consulting Ltd\" placeholder=\"Cedar Stone Consulting Ltd\" required\/><\/div>\n        <div class=\"actions-row\" style=\"margin-top:32px;\"><button type=\"button\" class=\"btn ghost\" onclick=\"toggleAuth('login')\">\u2190 <de>Zur\u00fcck zur Anmeldung<\/de><en>Back to Login<\/en><\/button><button type=\"submit\" class=\"btn primary\"><de>Konto erstellen<\/de><en>Create account<\/en><\/button><\/div>\n      <\/form>\n\n    <\/div>\n  <\/div>\n<\/section>\n\n<section class=\"view\" id=\"mobile\">\n  <div class=\"mobile-wrap\">\n    <h2 style=\"font-size:36px; text-align:center;\"><de>Kunden-Mobile-App<\/de><en>Client-Facing Mobile App<\/en><\/h2>\n    <p style=\"margin-bottom:40px; max-width:700px; margin-left:auto; margin-right:auto; text-align:center; line-height:1.6; color:var(--muted); font-size:16px;\"><de>W\u00e4hrend die Web-Plattform f\u00fcr den Steuerberater gedacht ist, wurde die Mobile App f\u00fcr den <strong>Mandanten (Unternehmer)<\/strong> entwickelt. Sie erm\u00f6glicht das einfache Scannen von Belegen von unterwegs und warnt automatisch, welche Dokumente der KI fehlen.<\/de><en>While the web platform is for the tax accountant, the mobile app is designed for the <strong>tenant (business owner)<\/strong>. It makes it frictionless to snap receipts on the go and automatically alerts them exactly which documents the AI is missing.<\/en><\/p>\n    \n    <div class=\"phones\">\n      <div class=\"phone\">\n        <div class=\"phone-shell\">\n          <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;\">\n            <div class=\"logo\" style=\"font-size:16px;\"><div class=\"logo-mark\" style=\"width:28px;height:28px;font-size:13px\">B<\/div> ClientPortal<\/div>\n            <div style=\"width:36px; height:36px; border-radius:50%; background:#e7edf5; display:flex; align-items:center; justify-content:center; font-size:16px;\">\ud83d\udc64<\/div>\n          <\/div>\n          \n          <div class=\"mobile-header\"><de>Hallo, Cedar Stone<\/de><en>Hello, Cedar Stone<\/en><\/div>\n          \n          <div class=\"mobile-card action-toast\" data-msg=\"Kamera ge\u00f6ffnet.\" data-msg-en=\"Camera opened.\" style=\"background:linear-gradient(135deg,#245dff,#6d8fff);color:#fff; text-align:center; padding:32px 16px; cursor:pointer; box-shadow: 0 12px 25px rgba(36,93,255,.25); border:none; transition:transform 0.2s;\">\n            <div style=\"font-size:48px; margin-bottom:12px;\">\ud83d\udcf7<\/div>\n            <div style=\"font-size:22px;font-weight:900;\"><de>Dokument scannen<\/de><en>Scan Document<\/en><\/div>\n            <div style=\"color:rgba(255,255,255,0.85); font-size:14px; margin-top:8px; font-weight:500;\"><de>Beleg oder Rechnung fotografieren<\/de><en>Snap a receipt or invoice<\/en><\/div>\n          <\/div>\n          \n          <div class=\"mobile-card\" style=\"border-left: 4px solid var(--danger); cursor:pointer;\">\n            <div style=\"display:flex; justify-content:space-between; align-items:center;\">\n              <strong style=\"font-size:15px;\"><de>Handlungsbedarf<\/de><en>Action Required<\/en><\/strong>\n              <span class=\"badge danger\"><de>2 Aufgaben<\/de><en>2 Tasks<\/en><\/span>\n            <\/div>\n            <div class=\"subtle\" style=\"margin-top:8px; line-height:1.4;\"><de>Ihr Steuerberater ben\u00f6tigt 2 fehlende Rechnungen f\u00fcr Februar.<\/de><en>Your accountant needs 2 missing invoices for February.<\/en><\/div>\n          <\/div>\n          \n          <div class=\"mobile-card\">\n            <strong style=\"font-size:15px; display:block; margin-bottom:12px;\"><de>K\u00fcrzliche Uploads<\/de><en>Recent Uploads<\/en><\/strong>\n            <div class=\"subtle\" style=\"display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line);\"><span>Taxi_Beleg_Feb.jpg<\/span><span style=\"color:var(--success); font-weight:700;\"><de>Verarbeitet<\/de><en>Processed<\/en><\/span><\/div>\n            <div class=\"subtle\" style=\"margin-top:12px; display:flex; justify-content:space-between; align-items:center;\"><span>INV-48-0005.pdf<\/span><span style=\"color:var(--success); font-weight:700;\"><de>Verarbeitet<\/de><en>Processed<\/en><\/span><\/div>\n          <\/div>\n          \n          <div class=\"mobile-nav\" style=\"grid-template-columns:repeat(4, 1fr); margin-top:auto;\">\n            <div style=\"color:var(--primary);\"><de>Start<\/de><en>Home<\/en><\/div>\n            <div style=\"position:relative;\"><de>Aufgaben<\/de><en>To-Do<\/en> <span style=\"position:absolute; top:-6px; right:-2px; background:var(--danger); color:#fff; font-size:9px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;\">2<\/span><\/div>\n            <div><de>Dateien<\/de><en>Files<\/en><\/div>\n            <div>Chat<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n      \n      <div class=\"phone\">\n        <div class=\"phone-shell\">\n          <div style=\"display:flex; justify-content:space-between; align-items:center; margin-bottom:24px;\">\n            <div class=\"logo\" style=\"font-size:16px;\"><div class=\"logo-mark\" style=\"width:28px;height:28px;font-size:13px\">B<\/div> ClientPortal<\/div>\n          <\/div>\n          \n          <div class=\"mobile-header\"><de>Fehlende Belege<\/de><en>Missing Evidence<\/en><\/div>\n          <p class=\"subtle\" style=\"margin-bottom:24px; line-height:1.5;\"><de>Die KI hat Ihren Kontoauszug abgeglichen, konnte aber die Rechnungen f\u00fcr diese Transaktionen nicht finden.<\/de><en>The AI matched your bank statement but couldn&#8217;t find the invoices for these transactions.<\/en><\/p>\n          \n          <div class=\"mobile-card\" style=\"padding:18px;\">\n            <div style=\"display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;\">\n              <strong style=\"color:var(--text); font-size:16px; line-height:1.3;\">Meridian Fabrication<\/strong>\n              <strong style=\"color:var(--success); font-size:16px;\">+1.140,00 \u20ac<\/strong>\n            <\/div>\n            <div class=\"subtle\" style=\"font-size:13px; margin-bottom:16px;\"><de>Einzahlung erhalten am 11. Feb 2026.<\/de><en>Deposit received on Feb 11, 2026.<\/en><\/div>\n            <button class=\"btn secondary action-toast\" data-msg=\"Fotogalerie wird ge\u00f6ffnet...\" data-msg-en=\"Opening photo library...\" style=\"width:100%; padding:12px; font-size:14px; border-style:dashed; color:var(--primary); border-color:#bfd0ff; background:#f8fbff;\">+ <de>Beleg hochladen<\/de><en>Upload Match<\/en><\/button>\n          <\/div>\n\n          <div class=\"mobile-card\" style=\"padding:18px;\">\n            <div style=\"display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px;\">\n              <strong style=\"color:var(--text); font-size:16px; line-height:1.3;\">S. JARITZ STAHLBAU<\/strong>\n              <strong style=\"color:var(--success); font-size:16px;\">+980,00 \u20ac<\/strong>\n            <\/div>\n            <div class=\"subtle\" style=\"font-size:13px; margin-bottom:16px;\"><de>Einzahlung erhalten am 5. Feb 2026.<\/de><en>Deposit received on Feb 5, 2026.<\/en><\/div>\n            <button class=\"btn secondary action-toast\" data-msg=\"Fotogalerie wird ge\u00f6ffnet...\" data-msg-en=\"Opening photo library...\" style=\"width:100%; padding:12px; font-size:14px; border-style:dashed; color:var(--primary); border-color:#bfd0ff; background:#f8fbff;\">+ <de>Beleg hochladen<\/de><en>Upload Match<\/en><\/button>\n          <\/div>\n          \n          <div class=\"mobile-nav\" style=\"grid-template-columns:repeat(4, 1fr); margin-top:auto;\">\n            <div><de>Start<\/de><en>Home<\/en><\/div>\n            <div style=\"color:var(--primary); position:relative;\"><de>Aufgaben<\/de><en>To-Do<\/en> <span style=\"position:absolute; top:-6px; right:-2px; background:var(--danger); color:#fff; font-size:9px; width:16px; height:16px; border-radius:50%; display:flex; align-items:center; justify-content:center;\">2<\/span><\/div>\n            <div><de>Dateien<\/de><en>Files<\/en><\/div>\n            <div>Chat<\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/div>\n\n<script>\ndocument.addEventListener(\"DOMContentLoaded\", function() {\n    const appRoot = document.getElementById('blueocean-app-root');\n    if (appRoot && appRoot.parentNode !== document.body) {\n        document.body.appendChild(appRoot);\n    }\n    document.documentElement.style.setProperty('overflow', 'hidden', 'important');\n    document.body.style.setProperty('overflow', 'hidden', 'important');\n    \n    \/\/ --- SYNCHRONISATION MIT DEM HEADER ---\n    syncLanguageOnLoad();\n    \n    updatePlaceholders();\n});\n\nlet currentLanguage = 'de';\n\n\/\/ Diese Funktion liest die Sprache aus, die der externe Header gesetzt hat\nfunction syncLanguageOnLoad() {\n    if (window.location.hash === '#lang-en') {\n        currentLanguage = 'en';\n    } else if (window.location.hash === '#lang-de') {\n        currentLanguage = 'de';\n    } else {\n        try {\n            const stored = localStorage.getItem('blue_ocean_lang');\n            if (stored === 'en') currentLanguage = 'en';\n        } catch(e) {}\n    }\n\n    if (currentLanguage === 'en') {\n        document.body.classList.add('english');\n    } else {\n        document.body.classList.remove('english');\n    }\n}\n\n\/\/ Reagiert sofort, wenn das Men\u00fc die Sprache in der URL \u00e4ndert\nwindow.addEventListener('hashchange', () => {\n    if (window.location.hash === '#lang-en' || window.location.hash === '#lang-de') {\n        const newLang = window.location.hash.replace('#lang-', '');\n        if (currentLanguage !== newLang) {\n            currentLanguage = newLang;\n            if (newLang === 'en') document.body.classList.add('english');\n            else document.body.classList.remove('english');\n            \n            updatePlaceholders();\n            const currentTenant = document.getElementById('tenant-switcher').value;\n            updateDashboardData(currentTenant);\n        }\n    }\n});\n\nwindow.toggleLanguage = function() {\n    document.body.classList.toggle('english');\n    currentLanguage = document.body.classList.contains('english') ? 'en' : 'de';\n    \n    \/\/ Sprache zur\u00fcck in den LocalStorage schreiben (f\u00fcr den Header)\n    try {\n        localStorage.setItem('blue_ocean_lang', currentLanguage);\n    } catch(e) {}\n    \n    \/\/ URL-Hash aktualisieren (damit der Header wei\u00df, dass sich was ge\u00e4ndert hat)\n    history.replaceState(null, null, `#lang-${currentLanguage}`);\n    window.dispatchEvent(new Event('hashchange'));\n    \n    updatePlaceholders();\n    \n    const currentTenant = document.getElementById('tenant-switcher').value;\n    updateDashboardData(currentTenant);\n};\n\nfunction updatePlaceholders() {\n    document.querySelectorAll('[data-ph-de]').forEach(el => {\n        el.placeholder = currentLanguage === 'en' ? el.getAttribute('data-ph-en') : el.getAttribute('data-ph-de');\n    });\n}\n\n\/\/ API Configuration\nconst GEMINI_API_KEY = \"AIzaSyCqWlW_suVzGffL1pAx36lP3Y5hRLWKswc\";\n\nconst topLinks = [...document.querySelectorAll('#blueocean-app-root .top-link')];\nconst views = [...document.querySelectorAll('#blueocean-app-root .view')];\nconst navLinksContainer = document.getElementById('nav-links');\nconst mobileMenuBtn = document.getElementById('mobile-menu-btn');\n\nmobileMenuBtn.addEventListener('click', () => {\n  navLinksContainer.classList.toggle('open');\n});\n\nfunction activateTopView(id) {\n  if(id === 'lang-toggle') return;\n  topLinks.forEach(l => l.classList.toggle('active', l.dataset.view === id));\n  views.forEach(v => v.classList.toggle('active', v.id === id));\n  navLinksContainer.classList.remove('open');\n  window.scrollTo({top: 0, behavior: 'smooth'});\n}\n\ntopLinks.forEach(link => link.addEventListener('click', () => {\n  if (link.id !== 'logout-btn' && !link.classList.contains('lang-toggle')) activateTopView(link.dataset.view);\n}));\n\n\/\/ Scoped Page Navigation (prevents Views from interfering with each other)\nconst navItems = [...document.querySelectorAll('#blueocean-app-root .nav-item')];\nfunction showPage(id, viewId) {\n  const currentView = viewId ? document.getElementById(viewId) : document.querySelector('#blueocean-app-root .view.active');\n  const viewNavItems = currentView.querySelectorAll('.nav-item');\n  const viewPages = currentView.querySelectorAll('.page');\n  \n  viewNavItems.forEach(n => n.classList.toggle('active', n.dataset.page === id));\n  viewPages.forEach(p => p.classList.toggle('active', p.id === id));\n  window.scrollTo({top: 0, behavior: 'smooth'});\n}\nnavItems.forEach(item => item.addEventListener('click', function() {\n  const viewId = this.closest('.view').id;\n  showPage(this.dataset.page, viewId);\n}));\n\nwindow.jumpToTenant = function(tenantName, pageId) {\n  const ts = document.getElementById('tenant-switcher');\n  ts.value = tenantName;\n  ts.dispatchEvent(new Event('change'));\n  \/\/ Determine which view is active to show the correct dashboard\n  const activeViewId = document.querySelector('#blueocean-app-root .view.active').id;\n  if(activeViewId === 'frontoffice' && pageId === 'dashboard') {\n    showPage('fo-dashboard', 'frontoffice');\n  } else {\n    showPage(pageId, 'app');\n  }\n};\n\nwindow.showToast = function(msg) {\n  const container = document.getElementById('toast-container');\n  const toast = document.createElement('div');\n  toast.className = 'toast';\n  toast.textContent = msg;\n  container.appendChild(toast);\n  setTimeout(() => toast.remove(), 3000);\n};\n\ndocument.addEventListener('click', (e) => {\n  const target = e.target.closest('#blueocean-app-root .action-toast');\n  if(target) {\n    e.preventDefault();\n    const msg = currentLanguage === 'en' && target.dataset.msgEn ? target.dataset.msgEn : (target.dataset.msg || \"Aktion erfolgreich\");\n    showToast(msg);\n  }\n});\n\nwindow.toggleAuth = function(view) {\n  document.getElementById('login-form').style.display = view === 'login' ? 'block' : 'none';\n  document.getElementById('register-form').style.display = view === 'register' ? 'block' : 'none';\n  \n  if (view === 'register') {\n    document.getElementById('register-form').style.animation = 'fadeIn 0.3s ease';\n  } else {\n    document.getElementById('login-form').style.animation = 'fadeIn 0.3s ease';\n  }\n};\n\nconst loginForm = document.getElementById('login-form');\nconst logoutBtn = document.getElementById('logout-btn');\nconst mainNav = document.getElementById('main-nav');\n\nloginForm.addEventListener('submit', (e) => {\n  e.preventDefault();\n  const user = document.getElementById('login-username').value;\n  const pass = document.getElementById('login-password').value;\n  \n  if (user === 'admin' && pass === 'bopfinance2026!') {\n    mainNav.style.display = 'flex';\n    activateTopView('overview');\n    window.showToast(currentLanguage === 'en' ? 'Logged in successfully!' : 'Erfolgreich angemeldet!');\n  } else {\n    window.showToast(currentLanguage === 'en' ? 'Invalid username or password.' : 'Ung\u00fcltiger Benutzername oder Passwort.');\n  }\n});\n\nlogoutBtn.addEventListener('click', () => {\n  mainNav.style.display = 'none';\n  document.getElementById('login-password').value = '';\n  activateTopView('auth');\n  window.showToast(currentLanguage === 'en' ? 'Successfully logged out.' : 'Erfolgreich abgemeldet.');\n});\n\n\nconst tenantDataDE = {\n  \"Cedar Stone Consulting Ltd\": {\n    unreconciled: \"980 \u20ac\", unrec_trend: \"Handlungsbedarf\", unrec_color: \"var(--warning)\",\n    unpaid: \"40 \u20ac\", unpaid_trend: \"1 Rechnung offen\", unpaid_color: \"var(--warning)\",\n    no_invoice: \"5\", no_inv_trend: \"Zuordnung erforderlich\",\n    compliance: \"1\", comp_trend: \"MwSt.-Abweichung\", comp_color: \"var(--danger)\",\n    summary: [\"3.420,00 \u20ac\", \"2.160,00 \u20ac\", \"1.140,00 \u20ac\", \"95,00 \u20ac\"],\n    alerts: [\n      { title: \"Fehlende Rechnungsbelege\", desc: \"F\u00fcr 1 Bankeinzahlung fehlt das Rechnungsdokument.\", unread: true, action: \"Beim Mandanten anfragen\" },\n      { title: \"Ausstehende unbezahlte Rechnung\", desc: \"Rechnung INV-55-2041 ist zum 28. Feb 2026 noch unbezahlt.\", unread: true },\n      { title: \"MwSt.-Abweichung bei Gutschrift\", desc: \"Ein Dokument au\u00dferhalb der Periode zeigt widerspr\u00fcchliche Reverse-Charge- und MwSt.-Behandlungen.\", unread: true }\n    ]\n  },\n  \"BOP BLUEOCEAN PRIVACY LTD\": {\n    unreconciled: \"1.140 \u20ac\", unrec_trend: \"Hohe Priorit\u00e4t\", unrec_color: \"var(--danger)\",\n    unpaid: \"0 \u20ac\", unpaid_trend: \"Alles bezahlt\", unpaid_color: \"var(--success)\",\n    no_invoice: \"12\", no_inv_trend: \"\u00dcberpr\u00fcfung erforderlich\",\n    compliance: \"0\", comp_trend: \"Alles in Ordnung\", comp_color: \"var(--success)\",\n    summary: [\"12.500,00 \u20ac\", \"11.360,00 \u20ac\", \"1.140,00 \u20ac\", \"0,00 \u20ac\"],\n    alerts: [\n      { title: \"Fehlende Rechnungsbelege\", desc: \"Mehrere Einzahlungen der Meridian Fabrication Group haben keine Rechnungen.\", unread: true, action: \"Beim Mandanten anfragen\" },\n      { title: \"Erkl\u00e4rung zur Buchhaltung erforderlich\", desc: \"Auszahlungssumme f\u00fcr Karl Pusch sollte in Gehalt und Gewinnaussch\u00fcttung aufgeteilt werden.\", unread: false }\n    ]\n  },\n  \"Rivergate Ops GmbH\": {\n    unreconciled: \"0 \u20ac\", unrec_trend: \"Abgeglichen\", unrec_color: \"var(--success)\",\n    unpaid: \"0 \u20ac\", unpaid_trend: \"Alles bezahlt\", unpaid_color: \"var(--success)\",\n    no_invoice: \"0\", no_inv_trend: \"Vollst\u00e4ndig zugeordnet\",\n    compliance: \"0\", comp_trend: \"Alles in Ordnung\", comp_color: \"var(--success)\",\n    summary: [\"8.900,00 \u20ac\", \"8.900,00 \u20ac\", \"0,00 \u20ac\", \"0,00 \u20ac\"],\n    alerts: [\n      { title: \"Monatliche Abstimmung abgeschlossen\", desc: \"Alle Konten sind f\u00fcr Feb 2026 abgeglichen. Keine Ausnahmen gefunden.\", unread: false }\n    ]\n  },\n  \"Nova Field Finance Ltd\": {\n    unreconciled: \"\u2014\", unrec_trend: \"Ausstehende Dok.\", unrec_color: \"var(--muted)\",\n    unpaid: \"\u2014\", unpaid_trend: \"Ausstehende Dok.\", unpaid_color: \"var(--muted)\",\n    no_invoice: \"\u2014\", no_inv_trend: \"Ausstehende Dok.\",\n    compliance: \"\u2014\", comp_trend: \"Ausstehende Dok.\", comp_color: \"var(--muted)\",\n    summary: [\"0,00 \u20ac\", \"0,00 \u20ac\", \"0,00 \u20ac\", \"0,00 \u20ac\"],\n    alerts: [\n      { title: \"Arbeitsbereich-Setup unvollst\u00e4ndig\", desc: \"Bitte laden Sie den Kontoauszug und die Rechnungen f\u00fcr Februar hoch, um die KI-Analyse zu starten.\", unread: true }\n    ]\n  }\n};\n\nconst tenantDataEN = {\n  \"Cedar Stone Consulting Ltd\": {\n    unreconciled: \"\u20ac980\", unrec_trend: \"Action required\", unrec_color: \"var(--warning)\",\n    unpaid: \"\u20ac40\", unpaid_trend: \"1 invoice open\", unpaid_color: \"var(--warning)\",\n    no_invoice: \"5\", no_inv_trend: \"Needs allocation\",\n    compliance: \"1\", comp_trend: \"VAT discrepancy\", comp_color: \"var(--danger)\",\n    summary: [\"\u20ac3,420.00\", \"\u20ac2,160.00\", \"\u20ac1,140.00\", \"\u20ac95.00\"],\n    alerts: [\n      { title: \"Missing invoice documentation\", desc: \"1 incoming bank deposit lacks its invoice document.\", unread: true, action: \"Request from client\" },\n      { title: \"Outstanding unpaid invoice\", desc: \"Invoice INV-55-2041 remains unpaid as of Feb 28, 2026.\", unread: true },\n      { title: \"VAT discrepancy on credit note\", desc: \"One out-of-period document shows contradictory reverse-charge and VAT treatment.\", unread: true }\n    ]\n  },\n  \"BOP BLUEOCEAN PRIVACY LTD\": {\n    unreconciled: \"\u20ac1,140\", unrec_trend: \"High priority\", unrec_color: \"var(--danger)\",\n    unpaid: \"\u20ac0\", unpaid_trend: \"All paid\", unpaid_color: \"var(--success)\",\n    no_invoice: \"12\", no_inv_trend: \"Review required\",\n    compliance: \"0\", comp_trend: \"All clear\", comp_color: \"var(--success)\",\n    summary: [\"\u20ac12,500.00\", \"\u20ac11,360.00\", \"\u20ac1,140.00\", \"\u20ac0.00\"],\n    alerts: [\n      { title: \"Missing invoice documentation\", desc: \"Multiple deposits from Meridian Fabrication Group lack invoices.\", unread: true, action: \"Request from client\" },\n      { title: \"Accounting explanation needed\", desc: \"Karl Pusch payout total should be split into salary and dividend distribution.\", unread: false }\n    ]\n  },\n  \"Rivergate Ops GmbH\": {\n    unreconciled: \"\u20ac0\", unrec_trend: \"Reconciled\", unrec_color: \"var(--success)\",\n    unpaid: \"\u20ac0\", unpaid_trend: \"All paid\", unpaid_color: \"var(--success)\",\n    no_invoice: \"0\", no_inv_trend: \"Fully allocated\",\n    compliance: \"0\", comp_trend: \"All clear\", comp_color: \"var(--success)\",\n    summary: [\"\u20ac8,900.00\", \"\u20ac8,900.00\", \"\u20ac0.00\", \"\u20ac0.00\"],\n    alerts: [\n      { title: \"Monthly reconciliation complete\", desc: \"All accounts are balanced for Feb 2026. No exceptions found.\", unread: false }\n    ]\n  },\n  \"Nova Field Finance Ltd\": {\n    unreconciled: \"\u2014\", unrec_trend: \"Pending docs\", unrec_color: \"var(--muted)\",\n    unpaid: \"\u2014\", unpaid_trend: \"Pending docs\", unpaid_color: \"var(--muted)\",\n    no_invoice: \"\u2014\", no_inv_trend: \"Pending docs\",\n    compliance: \"\u2014\", comp_trend: \"Pending docs\", comp_color: \"var(--muted)\",\n    summary: [\"\u20ac0.00\", \"\u20ac0.00\", \"\u20ac0.00\", \"\u20ac0.00\"],\n    alerts: [\n      { title: \"Workspace setup incomplete\", desc: \"Please upload the February bank statement and invoices to begin AI analysis.\", unread: true }\n    ]\n  }\n};\n\nfunction updateDashboardData(tenantName) {\n  const data = currentLanguage === 'en' ? tenantDataEN[tenantName] : tenantDataDE[tenantName];\n  if(!data) return;\n  \n  const content = document.getElementById('dashboard-content');\n  content.style.opacity = '0';\n  \n  setTimeout(() => {\n    document.getElementById('dash-tenant-name').textContent = tenantName;\n    \n    document.getElementById('val-unrec').textContent = data.unreconciled;\n    document.getElementById('trend-unrec').textContent = data.unrec_trend;\n    document.getElementById('trend-unrec').style.color = data.unrec_color;\n\n    document.getElementById('val-unpaid').textContent = data.unpaid;\n    document.getElementById('trend-unpaid').textContent = data.unpaid_trend;\n    document.getElementById('trend-unpaid').style.color = data.unpaid_color;\n\n    document.getElementById('val-noinv').textContent = data.no_invoice;\n    document.getElementById('trend-noinv').textContent = data.no_inv_trend;\n\n    document.getElementById('val-comp').textContent = data.compliance;\n    document.getElementById('trend-comp').textContent = data.comp_trend;\n    document.getElementById('trend-comp').style.color = data.comp_color;\n\n    document.getElementById('sum-1').textContent = data.summary[0];\n    document.getElementById('sum-2').textContent = data.summary[1];\n    document.getElementById('sum-3').textContent = data.summary[2];\n    document.getElementById('sum-4').textContent = data.summary[3];\n\n    const alertsHtml = data.alerts.map(a => `\n      <div class=\"notif ${a.unread ? 'unread' : ''}\">\n        <div style=\"display:flex; justify-content:space-between; align-items:start; gap:8px;\">\n          <div>\n            <div class=\"notif-title\">${a.title}<\/div>\n            <div class=\"muted\">${a.desc}<\/div>\n          <\/div>\n          ${a.action ? `<button class=\"btn secondary btn-sm action-toast\" style=\"white-space:nowrap; border-color:var(--primary); color:var(--primary);\" data-msg=\"E-Mail-Entwurf an Mandanten erstellt.\" data-msg-en=\"Auto-email drafted to client.\">${a.action}<\/button>` : ''}\n        <\/div>\n      <\/div>\n    `).join('');\n    document.getElementById('dash-notifications').innerHTML = alertsHtml;\n\n    content.style.opacity = '1';\n  }, 300);\n}\n\ndocument.querySelectorAll('#blueocean-app-root .folder-dropzone').forEach(dropzone => {\n  const fileInput = dropzone.previousElementSibling;\n  const targetListId = fileInput.dataset.target;\n  const targetList = document.getElementById(targetListId);\n\n  dropzone.addEventListener('click', () => fileInput.click());\n\n  ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {\n    dropzone.addEventListener(eventName, preventDefaults, false);\n  });\n  \n  function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); }\n\n  ['dragenter', 'dragover'].forEach(eventName => {\n    dropzone.addEventListener(eventName, () => dropzone.classList.add('dragover'), false);\n  });\n  \n  ['dragleave', 'drop'].forEach(eventName => {\n    dropzone.addEventListener(eventName, () => dropzone.classList.remove('dragover'), false);\n  });\n\n  dropzone.addEventListener('drop', (e) => handleFiles(e.dataTransfer.files, targetList), false);\n  fileInput.addEventListener('change', (e) => handleFiles(e.target.files, targetList), false);\n});\n\nfunction handleFiles(files, targetList) {\n  [...files].forEach(file => {\n    const row = document.createElement('div');\n    row.className = 'file-row';\n    row.setAttribute('data-name', file.name);\n    row.innerHTML = `\n      <div class=\"name\" title=\"${file.name}\">${file.name}<\/div>\n      <div class=\"bar\" style=\"width:50px\"><div class=\"fill\" style=\"width: 0%\"><\/div><\/div>\n    `;\n    targetList.prepend(row);\n    \n    setTimeout(() => {\n      row.innerHTML = `<div class=\"name\" title=\"${file.name}\">${file.name}<\/div><span class=\"badge success\"><de>\u2713 Bereit<\/de><en>\u2713 Ready<\/en><\/span>`;\n      showToast(currentLanguage === 'en' ? `${file.name} uploaded.` : `${file.name} hochgeladen.`);\n    }, 600 + Math.random() * 800);\n  });\n}\n\ndocument.getElementById('run-ai-agent-btn').addEventListener('click', async () => {\n  const overlay = document.getElementById('ai-loading-overlay');\n  \n  const bankFiles = [...document.querySelectorAll('#bank-list .file-row')].map(el => el.dataset.name);\n  const purchaseFiles = [...document.querySelectorAll('#purchase-list .file-row')].map(el => el.dataset.name);\n  const salesFiles = [...document.querySelectorAll('#sales-list .file-row')].map(el => el.dataset.name);\n  \n  const allFilesContext = `Bank Statements: ${bankFiles.join(', ')}\\nPurchase Invoices: ${purchaseFiles.join(', ')}\\nSales Invoices: ${salesFiles.join(', ')}`;\n\n  overlay.classList.add('active');\n\n  const systemPrompt = `\n  You are an expert AI financial agent named \"BLUEOCEAN SYNTHETIC AI AGENT\". \n  The user has uploaded the following files for reconciliation:\n  ${allFilesContext}\n\n  Generate a web-native \"Bank Statement vs. Reconciliation Report\" in HTML format.\n  If the user's interface is currently in German (translate all text to German).\n  Use realistic accounting numbers (EUR), plausible supplier names, and match the style of a professional audit report. \n\n  CRITICAL NEW REQUIREMENT: To save the accountant time with \"Booking\", add a column for \"Suggested DATEV Ledger Code (e.g. #4920)\" for every matched transaction in the table.\n\n  CRITICAL: You must output ONLY valid HTML. Do not wrap in markdown \\`\\`\\`html tags. Do not include <body> or <head> tags. Just the raw HTML elements.\n\n  Use the following HTML structure and classes EXACTLY as shown to fit the design system:\n  \n  <div class=\"report-header\">\n    <div>\n      <div class=\"report-brand\">BLUEOCEAN SYNTHETIC AI AGENT<\/div>\n      <h2 style=\"margin-top:10px;font-size:26px\">AI Reconciliation Report<\/h2>\n      <p style=\"font-weight:500;\">Company: BOP BLUEOCEAN PRIVACY LTD \u2022 Generated Automatically<\/p>\n    <\/div>\n    <div class=\"score\">98%<\/div>\n  <\/div>\n  \n  <div class=\"report-section\">\n    <h3>1. Executive Summary<\/h3>\n    <div class=\"summary-list\">\n      <!-- Add realistic summary items -->\n    <\/div>\n  <\/div>\n  \n  <!-- Add sections 2, 3, 4 following the previous structures using tables and .hero-note -->\n  `;\n\n  try {\n    const response = await fetch(`https:\/\/generativelanguage.googleapis.com\/v1beta\/models\/gemini-2.5-flash-preview-09-2025:generateContent?key=${GEMINI_API_KEY}`, {\n      method: 'POST',\n      headers: { 'Content-Type': 'application\/json' },\n      body: JSON.stringify({\n        contents: [{ parts: [{ text: currentLanguage === 'en' ? \"Generate the reconciliation report based on the prompt.\" : \"Erstelle den Abstimmungsbericht auf Deutsch auf Basis der Anweisungen.\" }] }],\n        systemInstruction: { parts: [{ text: systemPrompt }] }\n      })\n    });\n\n    const data = await response.json();\n    let generatedHTML = data.candidates?.[0]?.content?.parts?.[0]?.text || \"<p>Error generating report.<\/p>\";\n    \n    generatedHTML = generatedHTML.replace(\/^```html\\s*\/i, '').replace(\/```\\s*$\/i, '');\n\n    document.getElementById('dynamic-report-container').innerHTML = generatedHTML;\n    \n    overlay.classList.remove('active');\n    showPage('results');\n    showToast(currentLanguage === 'en' ? 'AI Reconciliation Complete!' : 'KI-Abstimmung abgeschlossen!');\n    \n  } catch (error) {\n    console.error(error);\n    overlay.classList.remove('active');\n    showToast(currentLanguage === 'en' ? 'Error connecting to AI. Check console.' : 'Fehler bei der KI-Verbindung. \u00dcberpr\u00fcfen Sie die Konsole.');\n  }\n});\n\n\nwindow.sendChatMessage = function() {\n  const input = document.getElementById('chat-input');\n  const text = input.value.trim();\n  if(!text) return;\n  \n  const chatBody = document.getElementById('chat-messages');\n  \n  chatBody.innerHTML += `<div class=\"chat-msg user\">${text}<\/div>`;\n  input.value = '';\n  chatBody.scrollTop = chatBody.scrollHeight;\n  \n  const typingId = 'typing-' + Date.now();\n  chatBody.innerHTML += `\n    <div class=\"typing-indicator bot\" id=\"${typingId}\">\n      <div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div><div class=\"typing-dot\"><\/div>\n    <\/div>`;\n  chatBody.scrollTop = chatBody.scrollHeight;\n\n  setTimeout(() => {\n    document.getElementById(typingId).remove();\n    \n    let reply = currentLanguage === 'en' ? \"I can help with that. Looking through the workspace documents...\" : \"Dabei kann ich helfen. Ich durchsuche die Dokumente des Arbeitsbereichs...\";\n    \n    if (text.toLowerCase().includes(\"willow crest\") || text.toLowerCase().includes(\"gutschrift\")) {\n      reply = currentLanguage === 'en' \n        ? \"The Willow Crest credit note was flagged because the line items calculate a 19% Standard VAT (\u20ac163.40), but the footer explicitly states 'Keine USt. gem\u00e4\u00df Artikel 138 der Richtlinie 2006\/112\/EG (Reverse Charge)'. This is a direct contradiction that requires your review.\" \n        : \"Die Willow Crest-Gutschrift wurde markiert, da die Positionen eine Standard-MwSt. von 19 % (163,40 \u20ac) berechnen, in der Fu\u00dfzeile jedoch ausdr\u00fccklich 'Keine USt. gem\u00e4\u00df Artikel 138 der Richtlinie 2006\/112\/EG (Reverse Charge)' steht. Dies ist ein direkter Widerspruch, der Ihre \u00dcberpr\u00fcfung erfordert.\";\n    } else if (text.toLowerCase().includes(\"draft\") || text.toLowerCase().includes(\"email\") || text.toLowerCase().includes(\"e-mail\") || text.toLowerCase().includes(\"entwirf\")) {\n      reply = currentLanguage === 'en'\n        ? \"Sure thing! Draft created: 'Hi Client, we noticed a deposit of \u20ac1,140 on Feb 11th from Meridian Fabrication Group but we are missing the corresponding invoice. Could you please upload it to the portal? Thanks!'\"\n        : \"Gerne! E-Mail-Entwurf erstellt: 'Hallo Mandant, wir haben am 11. Februar eine Einzahlung in H\u00f6he von 1.140 \u20ac von der Meridian Fabrication Group festgestellt, uns fehlt jedoch die dazugeh\u00f6rige Rechnung. K\u00f6nnten Sie diese bitte in das Portal hochladen? Vielen Dank!'\";\n    }\n    \n    chatBody.innerHTML += `<div class=\"chat-msg bot\">${reply}<\/div>`;\n    chatBody.scrollTop = chatBody.scrollHeight;\n  }, 1200);\n};\n\ndocument.querySelectorAll('#blueocean-app-root .switch').forEach(toggle => {\n  toggle.addEventListener('click', function() {\n    this.classList.toggle('off');\n    const systemName = this.parentElement.querySelector('strong').textContent;\n    const status = this.classList.contains('off') ? (currentLanguage === 'en' ? 'disabled' : 'deaktiviert') : (currentLanguage === 'en' ? 'enabled' : 'aktiviert');\n    showToast(currentLanguage === 'en' ? `${systemName} connector ${status}.` : `${systemName} Konnektor ${status}.`);\n  });\n});\n\ndocument.getElementById('btn-mark-read').addEventListener('click', () => {\n  const unread = document.querySelectorAll('#blueocean-app-root #notifications .notif.unread');\n  if(unread.length > 0) {\n    unread.forEach(n => {\n      n.style.transition = 'background 0.3s, border-color 0.3s';\n      n.classList.remove('unread');\n    });\n    showToast(currentLanguage === 'en' ? \"All notifications marked as read.\" : \"Alle Benachrichtigungen als gelesen markiert.\");\n  } else {\n    showToast(currentLanguage === 'en' ? \"No new notifications to mark.\" : \"Keine neuen Benachrichtigungen zu markieren.\");\n  }\n});\n\ndocument.getElementById('tenant-switcher').addEventListener('change', (e) => {\n  showToast(currentLanguage === 'en' ? `Workspace switched to ${e.target.value}` : `Arbeitsbereich gewechselt zu ${e.target.value}`);\n  \n  updateDashboardData(e.target.value);\n  \n  const activeViewId = document.querySelector('#blueocean-app-root .view.active').id;\n  if(activeViewId === 'frontoffice') {\n    showPage('fo-dashboard', 'frontoffice');\n  } else {\n    showPage('dashboard', 'app');\n  }\n});\n\ndocument.getElementById('btn-recalc').addEventListener('click', () => {\n  const btn = document.getElementById('btn-recalc');\n  btn.textContent = currentLanguage === 'en' ? \"Calculating...\" : \"Berechne...\";\n  btn.style.opacity = '0.7';\n  \n  setTimeout(() => {\n    document.getElementById('calc-docs').textContent = \"182\";\n    document.getElementById('calc-tx').textContent = \"1.085\";\n    document.getElementById('calc-cost').textContent = \"238,20 \u20ac\";\n    btn.textContent = currentLanguage === 'en' ? \"Recalculate\" : \"Neu berechnen\";\n    btn.style.opacity = '1';\n    showToast(currentLanguage === 'en' ? \"Costs recalculated based on current usage.\" : \"Kosten wurden basierend auf der aktuellen Nutzung neu berechnet.\");\n  }, 1000);\n});\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>B BlueOcean Finance AI \u00dcbersichtOverview Berater Web-AppAccountant App Unternehmens AppCompany App Mobile AppMobile App AbmeldenLogout \ud83c\uddec\ud83c\udde7 EN\ud83c\udde9\ud83c\uddea DE Plattform f\u00fcr alle FinanzakteurePlatform for all financial actors Ein \u00d6kosystem f\u00fcr Abstimmung, Sales und SteuerberatungAn ecosystem for reconciliation, sales, and tax accounting Die BlueOcean Plattform verbindet den Steuerberater, das Front-Office des Unternehmens und den Inhaber unterwegs nahtlos [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-120","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/blueagency.io\/index.php?rest_route=\/wp\/v2\/pages\/120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blueagency.io\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/blueagency.io\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/blueagency.io\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blueagency.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=120"}],"version-history":[{"count":2,"href":"https:\/\/blueagency.io\/index.php?rest_route=\/wp\/v2\/pages\/120\/revisions"}],"predecessor-version":[{"id":125,"href":"https:\/\/blueagency.io\/index.php?rest_route=\/wp\/v2\/pages\/120\/revisions\/125"}],"wp:attachment":[{"href":"https:\/\/blueagency.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}