{"id":1022,"date":"2026-10-26T17:16:07","date_gmt":"2026-10-26T17:16:07","guid":{"rendered":"https:\/\/srabons.de\/?page_id=1022"},"modified":"2026-10-26T17:16:10","modified_gmt":"2026-10-26T17:16:10","slug":"professional-cv-builder","status":"publish","type":"page","link":"https:\/\/srabons.de\/en\/professional-cv-builder\/","title":{"rendered":"Professional CV Builder"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"de\" class=\"dark\">\n<head>\n  <meta charset=\"UTF-8\" \/>\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n  <title>srabons.de Professional CV &#038; Cover Letter Builder Suite<\/title>\n  \n  <!-- Tailwind CSS CDN -->\n  <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n  \n  <!-- Lucide Icons CDN -->\n  <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n  \n  <!-- Modern Google Fonts -->\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n  <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&#038;family=Fira+Code:wght@400;500;600&#038;family=Inter:wght@300;400;500;600;700;800&#038;family=Lora:ital,wght@0,400;0,600;1,400&#038;family=Montserrat:wght@400;500;600;700&#038;family=Outfit:wght@400;500;600;700&#038;family=Playfair+Display:ital,wght@0,600;0,700;1,400&#038;family=Plus+Jakarta+Sans:wght@400;500;600;700;800&#038;family=Poppins:wght@300;400;500;600;700&#038;family=Space+Grotesk:wght@400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n  <style>\n    :root {\n      --cv-primary: #1d4ed8;\n      --cv-accent: #2563eb;\n      --cv-font: 'Inter', sans-serif;\n      --cv-bg-color: #ffffff;\n      --cv-bg-image: none;\n    }\n\n    \/* Scoped App Base *\/\n    #srabon-cv-builder-app {\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n      box-sizing: border-box;\n      width: 100%;\n      height: 94vh;\n      min-height: 800px;\n      display: flex;\n      flex-direction: column;\n      background-color: #030712;\n      color: #f9fafb;\n      overflow: hidden;\n      border-radius: 16px;\n      border: 1px solid #1f2937;\n      box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.75);\n      position: relative;\n    }\n\n    #srabon-cv-builder-app * {\n      box-sizing: border-box;\n    }\n\n    \/* WordPress Container Full-Width Breakout *\/\n    #srabon-cv-builder-app.wp-breakout {\n      width: 100vw !important;\n      max-width: 100vw !important;\n      position: relative !important;\n      left: 50% !important;\n      right: 50% !important;\n      margin-left: -50vw !important;\n      margin-right: -50vw !important;\n      border-radius: 0 !important;\n      border-left: none !important;\n      border-right: none !important;\n    }\n\n    \/* Fullscreen Modal Breakout Mode *\/\n    #srabon-cv-builder-app.is-fullscreen {\n      position: fixed !important;\n      inset: 0 !important;\n      width: 100vw !important;\n      height: 100vh !important;\n      max-width: 100vw !important;\n      max-height: 100vh !important;\n      margin: 0 !important;\n      border-radius: 0 !important;\n      z-index: 99999999 !important;\n    }\n\n    .no-scrollbar::-webkit-scrollbar {\n      display: none;\n    }\n    .no-scrollbar {\n      -ms-overflow-style: none;\n      scrollbar-width: none;\n    }\n\n    \/* A4 Physical Dimensions (210mm x 297mm @ 96 DPI = 794px x 1123px) *\/\n    .a4-page-sheet {\n      width: 794px;\n      min-height: 1123px;\n      background-color: var(--cv-bg-color);\n      background-image: var(--cv-bg-image);\n      background-size: cover;\n      background-position: center;\n      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.08);\n      position: relative;\n      margin: 0 auto;\n      box-sizing: border-box;\n      flex-shrink: 0;\n      color: #0f172a;\n      transition: all 0.2s ease;\n    }\n\n    \/* Dynamic font container *\/\n    .cv-font-target {\n      font-family: var(--cv-font);\n    }\n\n    \/* Interactive Image Cropper Studio *\/\n    #image-cropper-canvas {\n      cursor: grab;\n      touch-action: none;\n      background-color: #0f172a;\n      background-image: radial-gradient(#1e293b 1px, transparent 1px);\n      background-size: 16px 16px;\n    }\n    #image-cropper-canvas:active {\n      cursor: grabbing;\n    }\n\n    \/* Print Setup: Crisp High-Resolution Vector PDF Output *\/\n    @media print {\n      html, body {\n        background: #ffffff !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        width: 100% !important;\n        height: auto !important;\n      }\n      body * {\n        visibility: hidden !important;\n      }\n      #srabon-cv-builder-app, \n      #cv-printable-wrapper, \n      #cv-printable-wrapper * {\n        visibility: visible !important;\n      }\n      #srabon-cv-builder-app {\n        position: absolute !important;\n        left: 0 !important;\n        top: 0 !important;\n        width: 100% !important;\n        height: auto !important;\n        min-height: auto !important;\n        border: none !important;\n        box-shadow: none !important;\n        background: transparent !important;\n      }\n      #preview-viewport-container {\n        padding: 0 !important;\n        margin: 0 !important;\n        overflow: visible !important;\n        background: transparent !important;\n      }\n      #cv-zoom-scaler {\n        transform: none !important;\n        width: 100% !important;\n        margin: 0 !important;\n      }\n      #cv-printable-wrapper {\n        position: relative !important;\n        width: 100% !important;\n        margin: 0 !important;\n        padding: 0 !important;\n        gap: 0 !important;\n      }\n      .a4-page-sheet {\n        box-shadow: none !important;\n        margin: 0 !important;\n        width: 100% !important;\n        min-height: 100vh !important;\n        page-break-after: always !important;\n        break-after: page !important;\n        border: none !important;\n      }\n      .no-print, header, #editor-left-column, #modal-photo-studio, #modal-cloud-sync {\n        display: none !important;\n      }\n      a {\n        text-decoration: underline !important;\n        color: inherit !important;\n      }\n    }\n  <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-100 m-0 p-0 overflow-x-hidden selection:bg-blue-600 selection:text-white\">\n\n  <!-- Toast Container -->\n  <div id=\"toast-container\" class=\"fixed top-5 right-5 z-[999999999] flex flex-col space-y-2 pointer-events-none\"><\/div>\n\n  <!-- Main Root Application Container -->\n  <div id=\"srabon-cv-builder-app\" class=\"wp-breakout\">\n\n    <!-- Top Navigation Header -->\n    <header class=\"bg-slate-900\/95 backdrop-blur border-b border-slate-800 px-4 py-2.5 flex items-center justify-between flex-wrap gap-2.5 shrink-0 z-30 min-h-[58px]\">\n      \n      <!-- Brand & Title with Vector Diamond Logo -->\n      <div class=\"flex items-center space-x-3\">\n        <div class=\"w-9 h-9 rounded-xl bg-gradient-to-tr from-blue-600 to-indigo-600 flex items-center justify-center shadow-lg shadow-blue-500\/25 shrink-0\">\n          <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 200 200\" width=\"22\" height=\"22\">\n            <polygon points=\"100,6 194,100 100,194 6,100\" fill=\"#1e293b\" stroke=\"#64748b\" stroke-width=\"4\"\/>\n            <path d=\"M128 66 C 114 54 84 56 75 72 C 68 85 75 97 92 104 L 110 111 C 126 118 132 128 128 140 C 122 156 94 158 78 146 C 72 141 68 135 66 128\" fill=\"none\" stroke=\"#38bdf8\" stroke-width=\"16\" stroke-linecap=\"round\"\/>\n          <\/svg>\n        <\/div>\n        <div>\n          <div class=\"flex items-center space-x-2\">\n            <h1 class=\"font-bold text-sm tracking-tight text-white leading-tight\">srabons.de<\/h1>\n            <span class=\"px-1.5 py-0.5 bg-blue-500\/20 text-blue-400 border border-blue-500\/30 rounded text-[9px] font-bold uppercase tracking-wider\">Pro CV Studio<\/span>\n          <\/div>\n          <p class=\"text-[10px] text-slate-400 leading-none mt-0.5\">Enterprise CV &#038; Cover Letter Suite<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- Main Navigation Tabs -->\n      <div class=\"flex items-center space-x-1 bg-slate-800\/90 p-1 rounded-xl border border-slate-700\/60 overflow-x-auto no-scrollbar\">\n        <button id=\"tab-btn-editor\" onclick=\"switchMainTab('editor')\" class=\"px-3 py-1.5 rounded-lg text-xs font-semibold bg-blue-600 text-white shadow whitespace-nowrap flex items-center space-x-1.5\">\n          <i data-lucide=\"edit-3\" class=\"w-3.5 h-3.5\"><\/i>\n          <span>Lebenslauf Editor<\/span>\n        <\/button>\n        <button id=\"tab-btn-coverletter\" onclick=\"switchMainTab('coverletter')\" class=\"px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-300 hover:text-white whitespace-nowrap flex items-center space-x-1.5\">\n          <i data-lucide=\"file-check\" class=\"w-3.5 h-3.5\"><\/i>\n          <span>Anschreiben (DIN 5008)<\/span>\n        <\/button>\n        <button id=\"tab-btn-templates\" onclick=\"switchMainTab('templates')\" class=\"px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-300 hover:text-white whitespace-nowrap flex items-center space-x-1.5\">\n          <i data-lucide=\"layout\" class=\"w-3.5 h-3.5\"><\/i>\n          <span>Templates &#038; Design (16+)<\/span>\n        <\/button>\n        <button id=\"tab-btn-ai\" onclick=\"switchMainTab('ai')\" class=\"px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-300 hover:text-white whitespace-nowrap flex items-center space-x-1.5\">\n          <i data-lucide=\"sparkles\" class=\"w-3.5 h-3.5 text-amber-400\"><\/i>\n          <span>KI &#038; ATS Pr\u00fcfung<\/span>\n        <\/button>\n        <button id=\"tab-btn-admin\" onclick=\"switchMainTab('admin')\" class=\"px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-300 hover:text-white whitespace-nowrap flex items-center space-x-1.5\">\n          <i data-lucide=\"cloud\" class=\"w-3.5 h-3.5 text-blue-400\"><\/i>\n          <span>Cloud &#038; WordPress<\/span>\n        <\/button>\n      <\/div>\n\n      <!-- Workspace View Modes & Action Controls -->\n      <div class=\"flex items-center space-x-2 flex-wrap\">\n        \n        <!-- Workspace Layout Mode Switcher (Split, Form, Preview) -->\n        <div class=\"hidden md:flex items-center bg-slate-800\/90 border border-slate-700\/70 rounded-xl p-0.5\">\n          <button onclick=\"setWorkspaceView('split')\" id=\"btn-view-split\" title=\"Split View (Side by Side)\" class=\"px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-blue-600 text-white shadow\">\n            Split\n          <\/button>\n          <button onclick=\"setWorkspaceView('editor-only')\" id=\"btn-view-editor\" title=\"Editor Only\" class=\"px-2.5 py-1 rounded-lg text-[11px] font-medium text-slate-400 hover:text-white\">\n            Form\n          <\/button>\n          <button onclick=\"setWorkspaceView('preview-only')\" id=\"btn-view-preview\" title=\"Preview Only\" class=\"px-2.5 py-1 rounded-lg text-[11px] font-medium text-slate-400 hover:text-white\">\n            Sheet\n          <\/button>\n        <\/div>\n\n        <!-- Language Selector -->\n        <div class=\"flex items-center bg-slate-800 border border-slate-700 rounded-xl px-2 py-1 text-xs\">\n          <i data-lucide=\"globe\" class=\"w-3.5 h-3.5 text-slate-400 mr-1.5\"><\/i>\n          <select id=\"app-language-select\" onchange=\"changeLanguage(this.value)\" class=\"bg-transparent text-white font-medium text-xs outline-none cursor-pointer\">\n            <option value=\"de\" selected class=\"bg-slate-900 text-white\">DE<\/option>\n            <option value=\"en\" class=\"bg-slate-900 text-white\">EN<\/option>\n            <option value=\"bn\" class=\"bg-slate-900 text-white\">\u09ac\u09be\u0982\u09b2\u09be<\/option>\n          <\/select>\n        <\/div>\n\n        <!-- One-Click Demo Preview -->\n        <button onclick=\"loadDemoPreview()\" class=\"px-2.5 py-1.5 bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-500 hover:to-orange-500 text-white rounded-xl text-xs font-bold shadow flex items-center space-x-1 shrink-0 transition-transform active:scale-95\">\n          <i data-lucide=\"sparkles\" class=\"w-3.5 h-3.5\"><\/i>\n          <span>Demo<\/span>\n        <\/button>\n\n        <!-- Fullscreen Breakout Toggle -->\n        <button onclick=\"toggleFullscreen()\" id=\"btn-fullscreen-toggle\" title=\"Toggle Fullscreen\" class=\"p-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl text-slate-300 hover:text-white shrink-0\">\n          <i data-lucide=\"maximize\" class=\"w-4 h-4\"><\/i>\n        <\/button>\n\n        <!-- Multi-Format Export Dropdown -->\n        <div class=\"relative group\">\n          <button class=\"px-3 py-1.5 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white rounded-xl text-xs font-bold shadow-md flex items-center space-x-1.5 shrink-0\">\n            <i data-lucide=\"download\" class=\"w-3.5 h-3.5\"><\/i>\n            <span>Exportieren<\/span>\n          <\/button>\n          <div class=\"absolute right-0 mt-2 w-52 bg-slate-900 border border-slate-700 rounded-2xl shadow-2xl py-2 hidden group-hover:block z-50 animate-fadeIn\">\n            <button onclick=\"exportPDF()\" class=\"w-full text-left px-4 py-2 text-xs text-slate-200 hover:bg-slate-800 flex items-center space-x-2\">\n              <i data-lucide=\"printer\" class=\"w-4 h-4 text-blue-400\"><\/i>\n              <span>PDF Drucken \/ Speichern<\/span>\n            <\/button>\n            <button onclick=\"exportHTML()\" class=\"w-full text-left px-4 py-2 text-xs text-slate-200 hover:bg-slate-800 flex items-center space-x-2\">\n              <i data-lucide=\"file-code\" class=\"w-4 h-4 text-emerald-400\"><\/i>\n              <span>Eigenst\u00e4ndige HTML Datei<\/span>\n            <\/button>\n            <button onclick=\"exportDOCX()\" class=\"w-full text-left px-4 py-2 text-xs text-slate-200 hover:bg-slate-800 flex items-center space-x-2\">\n              <i data-lucide=\"file-text\" class=\"w-4 h-4 text-amber-400\"><\/i>\n              <span>MS Word (.doc) Datei<\/span>\n            <\/button>\n            <button onclick=\"openCloudModal()\" class=\"w-full text-left px-4 py-2 text-xs text-slate-200 hover:bg-slate-800 flex items-center space-x-2 border-t border-slate-800 mt-1 pt-1.5\">\n              <i data-lucide=\"hard-drive\" class=\"w-4 h-4 text-indigo-400\"><\/i>\n              <span>JSON Backup \/ Cloud Save<\/span>\n            <\/button>\n          <\/div>\n        <\/div>\n\n      <\/div>\n    <\/header>\n\n    <!-- Main Workspace Body -->\n    <div id=\"main-workspace-body\" class=\"flex-1 flex flex-row overflow-hidden w-full h-[calc(100%-58px)] relative\">\n\n      <!-- ==================== TAB 1: CV EDITOR WORKSPACE ==================== -->\n      <div id=\"panel-editor\" class=\"flex-1 flex flex-row w-full h-full overflow-hidden\">\n        \n        <!-- Left Form Column (Strict width 480px, responsive) -->\n        <div id=\"editor-left-column\" class=\"w-[480px] min-w-[360px] max-w-[520px] flex flex-col border-r border-slate-800 bg-slate-900\/70 h-full shrink-0 z-10 transition-all duration-200\">\n          \n          <!-- Inner Sub-Section Selector -->\n          <div class=\"flex overflow-x-auto p-2 bg-slate-900 border-b border-slate-800 space-x-1 no-scrollbar shrink-0\">\n            <button onclick=\"switchEditorSection('personal')\" id=\"sec-btn-personal\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-600 text-white whitespace-nowrap\">Pers\u00f6nliches<\/button>\n            <button onclick=\"switchEditorSection('links')\" id=\"sec-btn-links\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Links<\/button>\n            <button onclick=\"switchEditorSection('experience')\" id=\"sec-btn-experience\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Erfahrung<\/button>\n            <button onclick=\"switchEditorSection('education')\" id=\"sec-btn-education\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Ausbildung<\/button>\n            <button onclick=\"switchEditorSection('skills')\" id=\"sec-btn-skills\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Kenntnisse<\/button>\n            <button onclick=\"switchEditorSection('projects')\" id=\"sec-btn-projects\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Projekte<\/button>\n            <button onclick=\"switchEditorSection('hobbies')\" id=\"sec-btn-hobbies\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Hobbies<\/button>\n            <button onclick=\"switchEditorSection('extras')\" id=\"sec-btn-extras\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Certs &#038; Lang<\/button>\n            <button onclick=\"switchEditorSection('references')\" id=\"sec-btn-references\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Referenzen<\/button>\n            <button onclick=\"switchEditorSection('attachments')\" id=\"sec-btn-attachments\" class=\"px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap\">Anlagen<\/button>\n          <\/div>\n\n          <!-- Form Fields Scrollable Area -->\n          <div class=\"flex-1 overflow-y-auto p-4 space-y-4 text-xs\">\n            \n            <!-- 1. PERSONAL INFORMATION & PHOTO STUDIO LAUNCHER -->\n            <div id=\"editor-sec-personal\" class=\"space-y-3.5\">\n              <div class=\"flex items-center justify-between border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"user\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Pers\u00f6nliche Daten &#038; Foto<\/span>\n                <\/h3>\n                <span class=\"text-[9px] bg-emerald-500\/20 text-emerald-300 px-2 py-0.5 rounded font-semibold border border-emerald-500\/30\">DSGVO Konform<\/span>\n              <\/div>\n\n              <!-- Interactive Profile Photo Card -->\n              <div class=\"bg-slate-800\/80 p-3.5 rounded-2xl border border-slate-700 flex items-center space-x-4 shadow-sm\">\n                <div class=\"relative w-20 h-24 rounded-xl overflow-hidden bg-slate-900 border-2 border-slate-600 shadow-inner shrink-0 group\">\n                  <img decoding=\"async\" id=\"profile-photo-preview-img\" src=\"\" alt=\"Profilfoto\" class=\"w-full h-full object-cover\">\n                  <button type=\"button\" onclick=\"openPhotoStudioModal()\" class=\"absolute inset-0 bg-blue-900\/60 opacity-0 group-hover:opacity-100 flex items-center justify-center text-white transition-opacity\">\n                    <i data-lucide=\"sliders\" class=\"w-5 h-5\"><\/i>\n                  <\/button>\n                <\/div>\n                <div class=\"flex-1 space-y-2\">\n                  <div>\n                    <h4 class=\"text-xs font-bold text-white\">Bewerbungsfoto Editor<\/h4>\n                    <p class=\"text-[10px] text-slate-400\">3:4 Standard, Zoomen, Drehen, Pan &#038; B&#038;W Filter.<\/p>\n                  <\/div>\n                  <div class=\"flex items-center space-x-2\">\n                    <button type=\"button\" onclick=\"openPhotoStudioModal()\" class=\"px-3 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded-lg text-xs font-semibold flex items-center space-x-1.5 shadow\">\n                      <i data-lucide=\"crop\" class=\"w-3.5 h-3.5\"><\/i>\n                      <span>Foto anpassen<\/span>\n                    <\/button>\n                    <label class=\"px-2.5 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-200 rounded-lg text-xs font-medium cursor-pointer\">\n                      <span>Neu laden<\/span>\n                      <input type=\"file\" accept=\"image\/png, image\/jpeg, image\/webp\" onchange=\"handleNewPhotoUpload(event)\" class=\"hidden\">\n                    <\/label>\n                    <button type=\"button\" onclick=\"togglePhotoVisibility()\" id=\"btn-toggle-photo\" class=\"p-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg\">\n                      <i data-lucide=\"eye\" class=\"w-4 h-4\"><\/i>\n                    <\/button>\n                  <\/div>\n                <\/div>\n              <\/div>\n\n              <!-- Personal Form Inputs -->\n              <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-2.5\">\n                <div>\n                  <div class=\"flex justify-between items-center mb-1\">\n                    <label class=\"font-medium text-slate-300\">Vollst\u00e4ndiger Name<\/label>\n                    <span title=\"Vor- und Nachname angeben\" class=\"cursor-help text-slate-400 text-[10px] bg-slate-800 px-1 rounded\">?<\/span>\n                  <\/div>\n                  <input type=\"text\" id=\"inp-fullName\" oninput=\"updateField('personal.fullName', this.value)\" placeholder=\"z.B. Srabon Debnath\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:ring-1 focus:ring-blue-500 outline-none\">\n                <\/div>\n                <div>\n                  <div class=\"flex justify-between items-center mb-1\">\n                    <label class=\"font-medium text-slate-300\">Berufsbezeichnung \/ Titel<\/label>\n                    <span title=\"Angestrebter Jobtitel\" class=\"cursor-help text-slate-400 text-[10px] bg-slate-800 px-1 rounded\">?<\/span>\n                  <\/div>\n                  <input type=\"text\" id=\"inp-title\" oninput=\"updateField('personal.title', this.value)\" placeholder=\"z.B. Senior Cloud Solutions Architect\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:ring-1 focus:ring-blue-500 outline-none\">\n                <\/div>\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">E-Mail-Adresse<\/label>\n                  <input type=\"email\" id=\"inp-email\" oninput=\"updateField('personal.email', this.value)\" placeholder=\"contact@srabons.de\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:ring-1 focus:ring-blue-500 outline-none\">\n                <\/div>\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">Telefonnummer<\/label>\n                  <input type=\"text\" id=\"inp-phone\" oninput=\"updateField('personal.phone', this.value)\" placeholder=\"+49 151 23456789\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:ring-1 focus:ring-blue-500 outline-none\">\n                <\/div>\n                <div class=\"sm:col-span-2\">\n                  <label class=\"font-medium text-slate-300 mb-1 block\">Wohnort \/ Anschrift<\/label>\n                  <input type=\"text\" id=\"inp-address\" oninput=\"updateField('personal.address', this.value)\" placeholder=\"Berlin, Deutschland\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:ring-1 focus:ring-blue-500 outline-none\">\n                <\/div>\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">Geburtsdatum (optional)<\/label>\n                  <input type=\"text\" id=\"inp-dob\" oninput=\"updateField('personal.dob', this.value)\" placeholder=\"12.04.1990\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:ring-1 focus:ring-blue-500 outline-none\">\n                <\/div>\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">Staatsangeh\u00f6rigkeit (optional)<\/label>\n                  <input type=\"text\" id=\"inp-nationality\" oninput=\"updateField('personal.nationality', this.value)\" placeholder=\"Deutsch\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white focus:ring-1 focus:ring-blue-500 outline-none\">\n                <\/div>\n              <\/div>\n\n              <!-- Summary Section -->\n              <div class=\"space-y-1 pt-1\">\n                <div class=\"flex justify-between items-center\">\n                  <label class=\"font-medium text-slate-300\">Kurzprofil \/ Summary<\/label>\n                  <div class=\"space-x-2\">\n                    <button type=\"button\" onclick=\"loadSampleSummary('de')\" class=\"text-[10px] text-amber-400 hover:underline\">Sample (DE)<\/button>\n                    <button type=\"button\" onclick=\"loadSampleSummary('en')\" class=\"text-[10px] text-blue-400 hover:underline\">Sample (EN)<\/button>\n                  <\/div>\n                <\/div>\n                <textarea id=\"inp-summary\" rows=\"4\" oninput=\"updateField('personal.summary', this.value)\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg p-2.5 text-white resize-none leading-relaxed outline-none focus:ring-1 focus:ring-blue-500\"><\/textarea>\n              <\/div>\n            <\/div>\n\n            <!-- 2. HYPERLINKS SECTION -->\n            <div id=\"editor-sec-links\" class=\"space-y-3 hidden\">\n              <div class=\"border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"link\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Klickbare Online-Profile &#038; Hyperlinks<\/span>\n                <\/h3>\n                <p class=\"text-[10px] text-slate-400\">Alle Hyperlinks bleiben im PDF-Export und in der Live-Vorschau aktiv anklickbar.<\/p>\n              <\/div>\n              <div class=\"space-y-2.5\">\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">LinkedIn Profil URL<\/label>\n                  <input type=\"url\" id=\"inp-linkedin\" oninput=\"updateField('personal.linkedin', this.value)\" placeholder=\"https:\/\/linkedin.com\/in\/srabondebnath\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white\">\n                <\/div>\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">GitHub Profil URL<\/label>\n                  <input type=\"url\" id=\"inp-github\" oninput=\"updateField('personal.github', this.value)\" placeholder=\"https:\/\/github.com\/srabon\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white\">\n                <\/div>\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">Portfolio Website URL<\/label>\n                  <input type=\"url\" id=\"inp-portfolio\" oninput=\"updateField('personal.portfolio', this.value)\" placeholder=\"https:\/\/srabons.de\/portfolio\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white\">\n                <\/div>\n                <div>\n                  <label class=\"font-medium text-slate-300 mb-1 block\">Haupt-Website URL<\/label>\n                  <input type=\"url\" id=\"inp-website\" oninput=\"updateField('personal.website', this.value)\" placeholder=\"https:\/\/srabons.de\" class=\"w-full bg-slate-800 border border-slate-700 rounded-lg px-2.5 py-1.5 text-white\">\n                <\/div>\n              <\/div>\n            <\/div>\n\n            <!-- 3. WORK EXPERIENCE SECTION -->\n            <div id=\"editor-sec-experience\" class=\"space-y-3 hidden\">\n              <div class=\"flex items-center justify-between border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"briefcase\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Berufserfahrung<\/span>\n                <\/h3>\n                <div class=\"space-x-1.5\">\n                  <button type=\"button\" onclick=\"loadSampleExperience()\" class=\"px-2 py-1 bg-amber-600\/20 text-amber-300 rounded text-[10px] font-semibold border border-amber-500\/30\">+ Sample Rolle<\/button>\n                  <button type=\"button\" onclick=\"addExperience()\" class=\"px-2 py-1 bg-blue-600 text-white rounded text-[10px] font-semibold shadow\">+ Station<\/button>\n                <\/div>\n              <\/div>\n              <div id=\"experience-list-container\" class=\"space-y-3\"><\/div>\n            <\/div>\n\n            <!-- 4. EDUCATION SECTION -->\n            <div id=\"editor-sec-education\" class=\"space-y-3 hidden\">\n              <div class=\"flex items-center justify-between border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"graduation-cap\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Ausbildung &#038; Studium<\/span>\n                <\/h3>\n                <button type=\"button\" onclick=\"addEducation()\" class=\"px-2.5 py-1 bg-blue-600 text-white rounded text-[10px] font-semibold shadow\">+ Ausbildung<\/button>\n              <\/div>\n              <div id=\"education-list-container\" class=\"space-y-3\"><\/div>\n            <\/div>\n\n            <!-- 5. SKILLS SECTION WITH 5 DISPLAY STYLES -->\n            <div id=\"editor-sec-skills\" class=\"space-y-3 hidden\">\n              <div class=\"flex items-center justify-between border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"code\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Kenntnisse &#038; IT-Skills<\/span>\n                <\/h3>\n                <button type=\"button\" onclick=\"addSkill()\" class=\"px-2.5 py-1 bg-blue-600 text-white rounded text-[10px] font-semibold shadow\">+ Skill<\/button>\n              <\/div>\n\n              <!-- Skill Style Switcher -->\n              <div class=\"bg-slate-800\/80 p-2.5 rounded-xl border border-slate-700 space-y-1.5\">\n                <label class=\"block text-[11px] font-medium text-slate-300\">Anzeigestil f\u00fcr Kenntnisse:<\/label>\n                <div class=\"grid grid-cols-3 sm:grid-cols-5 gap-1.5 text-[10px]\">\n                  <button type=\"button\" onclick=\"setSkillStyle('tag')\" id=\"btn-sk-style-tag\" class=\"p-1 rounded font-semibold bg-blue-600 text-white\">Tags \/ Badges<\/button>\n                  <button type=\"button\" onclick=\"setSkillStyle('progress')\" id=\"btn-sk-style-progress\" class=\"p-1 rounded font-medium bg-slate-900 text-slate-300 hover:bg-slate-700\">Fortschritt<\/button>\n                  <button type=\"button\" onclick=\"setSkillStyle('stars')\" id=\"btn-sk-style-stars\" class=\"p-1 rounded font-medium bg-slate-900 text-slate-300 hover:bg-slate-700\">5 Sterne<\/button>\n                  <button type=\"button\" onclick=\"setSkillStyle('circle')\" id=\"btn-sk-style-circle\" class=\"p-1 rounded font-medium bg-slate-900 text-slate-300 hover:bg-slate-700\">Kreisdiagramm<\/button>\n                  <button type=\"button\" onclick=\"setSkillStyle('list')\" id=\"btn-sk-style-list\" class=\"p-1 rounded font-medium bg-slate-900 text-slate-300 hover:bg-slate-700\">Liste<\/button>\n                <\/div>\n              <\/div>\n\n              <div id=\"skills-list-container\" class=\"space-y-2\"><\/div>\n            <\/div>\n\n            <!-- 6. PROJECTS SECTION WITH LIVE & REPO LINKS -->\n            <div id=\"editor-sec-projects\" class=\"space-y-3 hidden\">\n              <div class=\"flex items-center justify-between border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"globe\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Projekte &#038; Live-Demos<\/span>\n                <\/h3>\n                <button type=\"button\" onclick=\"addProject()\" class=\"px-2.5 py-1 bg-blue-600 text-white rounded text-[10px] font-semibold shadow\">+ Projekt<\/button>\n              <\/div>\n              <div id=\"projects-list-container\" class=\"space-y-3\"><\/div>\n            <\/div>\n\n            <!-- 7. HOBBIES WITH PORTFOLIO HYPERLINKS -->\n            <div id=\"editor-sec-hobbies\" class=\"space-y-3 hidden\">\n              <div class=\"flex items-center justify-between border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"heart\" class=\"w-4 h-4 text-rose-500\"><\/i>\n                  <span>Hobbies &#038; Interessen (mit Portfolio-Links)<\/span>\n                <\/h3>\n                <button type=\"button\" onclick=\"addHobby()\" class=\"px-2.5 py-1 bg-blue-600 text-white rounded text-[10px] font-semibold shadow\">+ Hobby<\/button>\n              <\/div>\n              <div id=\"hobbies-list-container\" class=\"space-y-2\"><\/div>\n            <\/div>\n\n            <!-- 8. CERTIFICATIONS & LANGUAGES -->\n            <div id=\"editor-sec-extras\" class=\"space-y-4 hidden\">\n              <div>\n                <div class=\"flex justify-between items-center mb-1.5\">\n                  <h4 class=\"text-xs font-bold text-slate-200\">Zertifikate &#038; Abschl\u00fcsse<\/h4>\n                  <button type=\"button\" onclick=\"addCertification()\" class=\"text-blue-400 text-[10px] font-semibold hover:underline\">+ Zertifikat<\/button>\n                <\/div>\n                <div id=\"certifications-list-container\" class=\"space-y-2\"><\/div>\n              <\/div>\n              <div class=\"pt-2 border-t border-slate-800\">\n                <div class=\"flex justify-between items-center mb-1.5\">\n                  <h4 class=\"text-xs font-bold text-slate-200\">Sprachkenntnisse (CEFR)<\/h4>\n                  <button type=\"button\" onclick=\"addLanguage()\" class=\"text-blue-400 text-[10px] font-semibold hover:underline\">+ Sprache<\/button>\n                <\/div>\n                <div id=\"languages-list-container\" class=\"space-y-2\"><\/div>\n              <\/div>\n            <\/div>\n\n            <!-- 9. REFERENCES -->\n            <div id=\"editor-sec-references\" class=\"space-y-3 hidden\">\n              <div class=\"flex items-center justify-between border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"users\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Referenzen &#038; F\u00fcrsprecher<\/span>\n                <\/h3>\n                <button type=\"button\" onclick=\"addReference()\" class=\"px-2.5 py-1 bg-blue-600 text-white rounded text-[10px] font-semibold shadow\">+ Referenz<\/button>\n              <\/div>\n              <div id=\"references-list-container\" class=\"space-y-2\"><\/div>\n            <\/div>\n\n            <!-- 10. ATTACHMENTS (Anlagen) -->\n            <div id=\"editor-sec-attachments\" class=\"space-y-3 hidden\">\n              <div class=\"border-b border-slate-800 pb-2\">\n                <h3 class=\"font-bold text-xs text-white uppercase tracking-wider flex items-center space-x-1.5\">\n                  <i data-lucide=\"paperclip\" class=\"w-4 h-4 text-blue-500\"><\/i>\n                  <span>Anlagen &#038; Zeugnisse (Anhangsseiten)<\/span>\n                <\/h3>\n                <p class=\"text-[10px] text-slate-400\">Hochgeladene Dokumente werden als eigene Anhangsseiten nach dem Lebenslauf gerendert.<\/p>\n              <\/div>\n              <div class=\"bg-slate-800\/60 p-4 rounded-xl border border-slate-700 text-center space-y-2\">\n                <label class=\"px-4 py-2 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-xs font-semibold cursor-pointer inline-flex items-center space-x-2 shadow\">\n                  <i data-lucide=\"upload\" class=\"w-4 h-4\"><\/i>\n                  <span>Dokument \/ Zertifikat hinzuf\u00fcgen<\/span>\n                  <input type=\"file\" accept=\"image\/*,application\/pdf\" onchange=\"handleAttachmentUpload(event)\" class=\"hidden\">\n                <\/label>\n              <\/div>\n              <div id=\"attachments-list-container\" class=\"space-y-2\"><\/div>\n            <\/div>\n\n          <\/div>\n        <\/div>\n\n        <!-- Right Live Preview Column (Fluid Width, Zero Distortion) -->\n        <div id=\"preview-right-column\" class=\"flex-1 flex flex-col bg-slate-950 h-full overflow-hidden min-w-0 relative\">\n          \n          <!-- Live Preview Control Toolbar -->\n          <div class=\"bg-slate-900\/90 border-b border-slate-800 px-4 py-2 flex items-center justify-between flex-wrap gap-2 shrink-0 z-20 text-xs\">\n            \n            <!-- Document View Mode Switcher -->\n            <div class=\"flex items-center space-x-2\">\n              <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Ansicht:<\/span>\n              <div class=\"flex bg-slate-800 p-0.5 rounded-lg border border-slate-700\">\n                <button onclick=\"setPreviewMode('cv')\" id=\"prev-mode-cv\" class=\"px-2.5 py-1 rounded text-[11px] bg-blue-600 text-white font-semibold\">Lebenslauf<\/button>\n                <button onclick=\"setPreviewMode('coverletter')\" id=\"prev-mode-cl\" class=\"px-2.5 py-1 rounded text-[11px] text-slate-300 hover:text-white font-medium\">Anschreiben<\/button>\n                <button onclick=\"setPreviewMode('both')\" id=\"prev-mode-both\" class=\"px-2.5 py-1 rounded text-[11px] text-slate-300 hover:text-white font-medium\">Kombipaket<\/button>\n              <\/div>\n            <\/div>\n\n            <!-- Auto-Fit Zoom Controller -->\n            <div class=\"flex items-center space-x-2\">\n              <span class=\"text-[10px] font-bold text-slate-400 uppercase tracking-wider\">Zoom:<\/span>\n              <button onclick=\"zoomStep(-0.08)\" class=\"p-1 bg-slate-800 hover:bg-slate-700 rounded text-slate-300\"><i data-lucide=\"minus\" class=\"w-3.5 h-3.5\"><\/i><\/button>\n              <button onclick=\"autoFitPreviewSheet()\" class=\"px-2 py-0.5 bg-blue-600\/20 text-blue-400 border border-blue-500\/30 rounded text-[10px] font-bold\">Auto-Fit<\/button>\n              <button onclick=\"zoomStep(0.08)\" class=\"p-1 bg-slate-800 hover:bg-slate-700 rounded text-slate-300\"><i data-lucide=\"plus\" class=\"w-3.5 h-3.5\"><\/i><\/button>\n              <span id=\"zoom-percentage-label\" class=\"text-[10px] text-slate-400 w-10 text-center font-mono\">100%<\/span>\n            <\/div>\n\n            <!-- Active Template Badge -->\n            <div class=\"hidden lg:flex items-center space-x-1.5\">\n              <span class=\"text-[10px] text-slate-400\">Layout:<\/span>\n              <span id=\"active-template-badge\" class=\"px-2 py-0.5 bg-slate-800 border border-slate-700 text-blue-400 rounded text-[10px] font-semibold uppercase\">German Lebenslauf<\/span>\n            <\/div>\n\n          <\/div>\n\n          <!-- Scaled Viewport Container -->\n          <div id=\"preview-viewport-container\" class=\"flex-1 overflow-auto p-4 md:p-8 flex items-start justify-center bg-slate-950\/90 relative\">\n            <div id=\"cv-zoom-scaler\" class=\"transition-transform duration-100 origin-top flex flex-col items-center\">\n              <div id=\"cv-printable-wrapper\" class=\"flex flex-col space-y-8\">\n                <!-- Dynamically Rendered CV \/ Cover Letter Sheets -->\n                <div id=\"cv-dynamic-render-root\" class=\"space-y-8\"><\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n      <!-- ==================== TAB 2: DIN 5008 COVER LETTER PANEL ==================== -->\n      <div id=\"panel-coverletter\" class=\"flex-1 p-6 md:p-8 overflow-y-auto bg-slate-900 space-y-6 hidden h-full w-full\">\n        <div class=\"max-w-4xl mx-auto space-y-6\">\n          <div class=\"flex items-center justify-between border-b border-slate-800 pb-3\">\n            <div>\n              <h2 class=\"text-xl font-bold text-white\">Anschreiben &#038; Bewerbungsschreiben (DIN 5008)<\/h2>\n              <p class=\"text-xs text-slate-400\">Normgerechter Aufbau f\u00fcr den deutschen und europ\u00e4ischen Bewerbungsmarkt.<\/p>\n            <\/div>\n            <div class=\"space-x-2\">\n              <button onclick=\"loadSampleCoverLetter('de')\" class=\"px-3 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white rounded-xl text-xs font-semibold\">Muster (DE)<\/button>\n              <button onclick=\"loadSampleCoverLetter('en')\" class=\"px-3 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 text-white rounded-xl text-xs font-semibold\">Sample (EN)<\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"bg-slate-800\/80 border border-slate-700 p-5 rounded-2xl space-y-3.5 text-xs shadow-xl\">\n            <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3\">\n              <div>\n                <label class=\"font-medium text-slate-300 mb-1 block\">Ansprechpartner \/ Empf\u00e4nger<\/label>\n                <input type=\"text\" id=\"cl-recipient\" oninput=\"updateField('coverLetter.recipientName', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white\">\n              <\/div>\n              <div>\n                <label class=\"font-medium text-slate-300 mb-1 block\">Unternehmen<\/label>\n                <input type=\"text\" id=\"cl-company\" oninput=\"updateField('coverLetter.companyName', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white\">\n              <\/div>\n              <div class=\"sm:col-span-2\">\n                <label class=\"font-medium text-slate-300 mb-1 block\">Unternehmensanschrift<\/label>\n                <input type=\"text\" id=\"cl-address\" oninput=\"updateField('coverLetter.companyAddress', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white\">\n              <\/div>\n              <div>\n                <label class=\"font-medium text-slate-300 mb-1 block\">Ort &#038; Datum<\/label>\n                <input type=\"text\" id=\"cl-date\" oninput=\"updateField('coverLetter.date', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white\">\n              <\/div>\n              <div>\n                <label class=\"font-medium text-slate-300 mb-1 block\">Betreffzeile<\/label>\n                <input type=\"text\" id=\"cl-subject\" oninput=\"updateField('coverLetter.subject', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white\">\n              <\/div>\n            <\/div>\n            <div>\n              <label class=\"font-medium text-slate-300 mb-1 block\">Anrede<\/label>\n              <input type=\"text\" id=\"cl-salutation\" oninput=\"updateField('coverLetter.salutation', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white\">\n            <\/div>\n            <div>\n              <label class=\"font-medium text-slate-300 mb-1 block\">Haupttext (DIN 5008)<\/label>\n              <textarea id=\"cl-body\" rows=\"8\" oninput=\"updateField('coverLetter.body', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-3 text-white leading-relaxed resize-none\"><\/textarea>\n            <\/div>\n            <div>\n              <label class=\"font-medium text-slate-300 mb-1 block\">Gru\u00dfformel<\/label>\n              <input type=\"text\" id=\"cl-closing\" oninput=\"updateField('coverLetter.closing', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-white\">\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ==================== TAB 3: 16+ TEMPLATES & STYLING ==================== -->\n      <div id=\"panel-templates\" class=\"flex-1 p-6 md:p-8 overflow-y-auto bg-slate-900 space-y-6 hidden h-full w-full\">\n        <div class=\"max-w-5xl mx-auto space-y-6\">\n          <div class=\"border-b border-slate-800 pb-3\">\n            <h2 class=\"text-xl font-bold text-white\">16+ Vorlagen &#038; Design Studio<\/h2>\n            <p class=\"text-xs text-slate-400\">Wechseln Sie Layouts in Echtzeit ohne Datenverlust.<\/p>\n          <\/div>\n\n          <!-- Theme Colors & Typography -->\n          <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n            <div class=\"bg-slate-800 border border-slate-700 p-4 rounded-xl space-y-3\">\n              <h3 class=\"text-xs font-bold text-white uppercase tracking-wider\">Akzentfarbe &#038; Themes<\/h3>\n              <div class=\"flex items-center space-x-3\">\n                <button onclick=\"setAccentColor('#1d4ed8')\" class=\"w-7 h-7 rounded-full bg-blue-700 border-2 border-white\"><\/button>\n                <button onclick=\"setAccentColor('#047857')\" class=\"w-7 h-7 rounded-full bg-emerald-700 border-2 border-transparent\"><\/button>\n                <button onclick=\"setAccentColor('#7e22ce')\" class=\"w-7 h-7 rounded-full bg-purple-700 border-2 border-transparent\"><\/button>\n                <button onclick=\"setAccentColor('#0f172a')\" class=\"w-7 h-7 rounded-full bg-slate-900 border-2 border-transparent\"><\/button>\n                <button onclick=\"setAccentColor('#be123c')\" class=\"w-7 h-7 rounded-full bg-rose-700 border-2 border-transparent\"><\/button>\n                <input type=\"color\" onchange=\"setAccentColor(this.value)\" class=\"w-8 h-8 rounded cursor-pointer bg-transparent border-0\">\n              <\/div>\n            <\/div>\n            <div class=\"bg-slate-800 border border-slate-700 p-4 rounded-xl space-y-3\">\n              <h3 class=\"text-xs font-bold text-white uppercase tracking-wider\">Schriftart<\/h3>\n              <select onchange=\"setFontFamily(this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded-lg p-2 text-xs text-white\">\n                <option value=\"'Inter', sans-serif\">Inter (Modern &#038; Clean)<\/option>\n                <option value=\"'Plus Jakarta Sans', sans-serif\">Plus Jakarta Sans<\/option>\n                <option value=\"'Outfit', sans-serif\">Outfit (Editorial)<\/option>\n                <option value=\"'DM Sans', sans-serif\">DM Sans<\/option>\n                <option value=\"'Playfair Display', serif\">Playfair Display (Klassisch \/ Serif)<\/option>\n                <option value=\"'Fira Code', monospace\">Fira Code (Tech \/ Developer)<\/option>\n              <\/select>\n            <\/div>\n          <\/div>\n\n          <!-- 16 Templates Grid -->\n          <div id=\"templates-grid-container\" class=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ==================== TAB 4: AI & ATS CHECKER ==================== -->\n      <div id=\"panel-ai\" class=\"flex-1 p-6 md:p-8 overflow-y-auto bg-slate-900 space-y-6 hidden h-full w-full\">\n        <div class=\"max-w-4xl mx-auto space-y-6\">\n          <div class=\"bg-gradient-to-r from-blue-900\/50 to-indigo-900\/50 border border-blue-500\/30 p-5 rounded-2xl flex items-center space-x-4\">\n            <div class=\"w-12 h-12 rounded-xl bg-blue-600 flex items-center justify-center shrink-0 shadow-lg\">\n              <i data-lucide=\"sparkles\" class=\"w-6 h-6 text-white\"><\/i>\n            <\/div>\n            <div>\n              <h2 class=\"text-lg font-bold text-white\">srabons.de KI &#038; ATS Optimierung<\/h2>\n              <p class=\"text-xs text-slate-300\">Analyse der Keyword-Dichte, ATS-Parser-Sicherheit und DSGVO-Konformit\u00e4t.<\/p>\n            <\/div>\n          <\/div>\n\n          <div class=\"bg-slate-800 border border-slate-700 rounded-2xl p-5 space-y-4 shadow-xl\">\n            <div class=\"flex items-center justify-between\">\n              <h3 class=\"text-sm font-bold text-white flex items-center space-x-2\">\n                <i data-lucide=\"shield-check\" class=\"w-4 h-4 text-emerald-400\"><\/i>\n                <span>ATS &#038; DSGVO Kompatibilit\u00e4ts-Pr\u00fcfung<\/span>\n              <\/h3>\n              <button onclick=\"runAtsCheck()\" class=\"px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-xl text-xs font-semibold shadow\">ATS Analyse starten<\/button>\n            <\/div>\n            <div id=\"ats-result-box\" class=\"space-y-3 pt-3 border-t border-slate-700 text-xs\">\n              <div class=\"p-3 bg-slate-900 rounded-xl border border-slate-700 text-slate-400\">Klicken Sie oben auf &#8220;ATS Analyse starten&#8221;, um Ihren Lebenslauf in Echtzeit zu pr\u00fcfen.<\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- ==================== TAB 5: ADMIN & CLOUD ==================== -->\n      <div id=\"panel-admin\" class=\"flex-1 p-6 md:p-8 overflow-y-auto bg-slate-900 space-y-6 hidden h-full w-full\">\n        <div class=\"max-w-4xl mx-auto space-y-6\">\n          <div class=\"border-b border-slate-800 pb-3\">\n            <h2 class=\"text-xl font-bold text-white\">Cloud Speicher &#038; WordPress Admin<\/h2>\n            <p class=\"text-xs text-slate-400\">Google Drive, Dropbox und WordPress Shortcode-Einbindung.<\/p>\n          <\/div>\n\n          <div class=\"bg-slate-800 border border-slate-700 rounded-2xl p-5 space-y-3 shadow-xl\">\n            <div class=\"flex items-center justify-between\">\n              <div class=\"flex items-center space-x-2.5\">\n                <i data-lucide=\"cloud\" class=\"w-5 h-5 text-blue-400\"><\/i>\n                <div>\n                  <h3 class=\"text-sm font-bold text-white\">Cloud Speicherung<\/h3>\n                  <p class=\"text-xs text-slate-400\">Google Drive &#038; Dropbox Sicherung<\/p>\n                <\/div>\n              <\/div>\n              <span class=\"px-2.5 py-0.5 bg-emerald-500\/20 text-emerald-400 rounded-full text-[10px] font-bold\">Verbunden<\/span>\n            <\/div>\n            <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-3 pt-2\">\n              <button onclick=\"syncToGoogleDrive()\" class=\"py-2.5 bg-slate-900 hover:bg-slate-700 border border-slate-700 rounded-xl text-xs font-semibold text-white shadow flex items-center justify-center space-x-2\">\n                <i data-lucide=\"hard-drive\" class=\"w-4 h-4 text-blue-400\"><\/i>\n                <span>In Google Drive sichern<\/span>\n              <\/button>\n              <button onclick=\"syncToDropbox()\" class=\"py-2.5 bg-slate-900 hover:bg-slate-700 border border-slate-700 rounded-xl text-xs font-semibold text-white shadow flex items-center justify-center space-x-2\">\n                <i data-lucide=\"cloud\" class=\"w-4 h-4 text-indigo-400\"><\/i>\n                <span>In Dropbox sichern<\/span>\n              <\/button>\n            <\/div>\n          <\/div>\n\n          <div class=\"bg-slate-800 border border-slate-700 rounded-2xl p-5 space-y-2.5 shadow-xl text-xs\">\n            <h3 class=\"text-sm font-bold text-white\">WordPress Integration<\/h3>\n            <p class=\"text-slate-300\">F\u00fcgen Sie diesen Shortcode in beliebige Seiten oder Elementor Widgets ein:<\/p>\n            <div class=\"p-3 bg-slate-900 rounded-xl border border-slate-700 font-mono text-blue-400 flex items-center justify-between\">\n              <span>[cv_builder]<\/span>\n              <button onclick=\"copyShortcode()\" class=\"px-2.5 py-1 bg-blue-600 hover:bg-blue-500 text-white rounded text-[10px] font-bold\">Kopieren<\/button>\n            <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n\n    <\/div>\n\n  <\/div>\n\n  <!-- ==================== MODAL: INTERACTIVE PHOTO STUDIO ==================== -->\n  <div id=\"modal-photo-studio\" class=\"fixed inset-0 z-[9999999] bg-slate-950\/80 backdrop-blur-sm flex items-center justify-center p-4 hidden animate-fadeIn\">\n    <div class=\"bg-slate-900 border border-slate-700 w-full max-w-2xl rounded-2xl shadow-2xl overflow-hidden flex flex-col max-h-[92vh]\">\n      \n      <!-- Modal Header -->\n      <div class=\"px-5 py-3.5 border-b border-slate-800 flex items-center justify-between\">\n        <div class=\"flex items-center space-x-2\">\n          <i data-lucide=\"crop\" class=\"w-4 h-4 text-blue-400\"><\/i>\n          <h3 class=\"font-bold text-sm text-white\">Interaktives Bewerbungsfoto Studio<\/h3>\n        <\/div>\n        <button onclick=\"closePhotoStudioModal()\" class=\"text-slate-400 hover:text-white\"><i data-lucide=\"x\" class=\"w-5 h-5\"><\/i><\/button>\n      <\/div>\n\n      <!-- Modal Body -->\n      <div class=\"p-5 flex-1 overflow-y-auto grid grid-cols-1 md:grid-cols-2 gap-5 items-center\">\n        \n        <!-- Canvas Drag \/ Crop Viewport -->\n        <div class=\"flex flex-col items-center\">\n          <div class=\"relative w-[240px] h-[300px] rounded-xl overflow-hidden shadow-2xl border-2 border-slate-600 flex items-center justify-center bg-slate-950\">\n            <canvas id=\"image-cropper-canvas\" width=\"240\" height=\"300\" class=\"w-full h-full\"><\/canvas>\n            <div class=\"absolute inset-0 pointer-events-none border border-white\/20 rounded-xl\"><\/div>\n          <\/div>\n          <span class=\"text-[10px] text-slate-400 mt-2 flex items-center space-x-1\">\n            <i data-lucide=\"move\" class=\"w-3 h-3\"><\/i>\n            <span>Klicken und ziehen, um Foto zu verschieben<\/span>\n          <\/span>\n        <\/div>\n\n        <!-- Controls & Filters -->\n        <div class=\"space-y-3.5 text-xs\">\n          \n          <!-- Frame Shape \/ Ratio -->\n          <div>\n            <label class=\"block font-medium text-slate-300 mb-1\">Ausschnittsform \/ Seitenverh\u00e4ltnis<\/label>\n            <div class=\"grid grid-cols-2 gap-1.5 text-[11px]\">\n              <button type=\"button\" onclick=\"setCropperShape('portrait')\" id=\"btn-crop-portrait\" class=\"p-1.5 rounded-lg font-semibold bg-blue-600 text-white\">3:4 German Portrait<\/button>\n              <button type=\"button\" onclick=\"setCropperShape('circle')\" id=\"btn-crop-circle\" class=\"p-1.5 rounded-lg font-medium bg-slate-800 text-slate-300 hover:bg-slate-700\">1:1 Rund \/ Circle<\/button>\n              <button type=\"button\" onclick=\"setCropperShape('rounded')\" id=\"btn-crop-rounded\" class=\"p-1.5 rounded-lg font-medium bg-slate-800 text-slate-300 hover:bg-slate-700\">1:1 Abgerundet<\/button>\n              <button type=\"button\" onclick=\"setCropperShape('square')\" id=\"btn-crop-square\" class=\"p-1.5 rounded-lg font-medium bg-slate-800 text-slate-300 hover:bg-slate-700\">1:1 Quadrat<\/button>\n            <\/div>\n          <\/div>\n\n          <!-- Zoom Slider -->\n          <div>\n            <div class=\"flex justify-between items-center mb-1\">\n              <span class=\"font-medium text-slate-300\">Zoom \/ Vergr\u00f6\u00dferung<\/span>\n              <span id=\"cropper-zoom-val\" class=\"font-mono text-[10px] text-blue-400\">100%<\/span>\n            <\/div>\n            <input type=\"range\" id=\"cropper-zoom\" min=\"0.5\" max=\"2.5\" step=\"0.05\" value=\"1.0\" oninput=\"onCropperZoomChange(this.value)\" class=\"w-full h-1.5 bg-slate-800 rounded-lg appearance-none cursor-pointer accent-blue-600\">\n          <\/div>\n\n          <!-- Rotation & Flip -->\n          <div class=\"flex space-x-2\">\n            <button type=\"button\" onclick=\"rotateCropper(90)\" class=\"flex-1 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg flex items-center justify-center space-x-1.5 text-white\">\n              <i data-lucide=\"rotate-cw\" class=\"w-3.5 h-3.5\"><\/i>\n              <span>90\u00b0 Drehen<\/span>\n            <\/button>\n            <button type=\"button\" onclick=\"resetCropperTransforms()\" class=\"px-3 py-1.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-lg text-slate-300\">\n              Reset\n            <\/button>\n          <\/div>\n\n          <!-- Color Filters: Original vs B&W (Lebenslauf Standard) -->\n          <div>\n            <label class=\"block font-medium text-slate-300 mb-1\">Farbfilter<\/label>\n            <div class=\"grid grid-cols-2 gap-1.5 text-[11px]\">\n              <button type=\"button\" onclick=\"setCropperFilter(false)\" id=\"btn-crop-col\" class=\"p-1.5 rounded-lg font-semibold bg-blue-600 text-white\">Farbe (Original)<\/button>\n              <button type=\"button\" onclick=\"setCropperFilter(true)\" id=\"btn-crop-bw\" class=\"p-1.5 rounded-lg font-medium bg-slate-800 text-slate-300 hover:bg-slate-700\">Schwarz-Wei\u00df (B&#038;W)<\/button>\n            <\/div>\n          <\/div>\n\n          <!-- Brightness & Contrast -->\n          <div class=\"grid grid-cols-2 gap-2\">\n            <div>\n              <span class=\"block text-[10px] text-slate-400 mb-1\">Helligkeit<\/span>\n              <input type=\"range\" id=\"cropper-bright\" min=\"0.5\" max=\"1.5\" step=\"0.05\" value=\"1.0\" oninput=\"onCropperAdjustChange()\" class=\"w-full h-1 bg-slate-800 rounded appearance-none accent-blue-600\">\n            <\/div>\n            <div>\n              <span class=\"block text-[10px] text-slate-400 mb-1\">Kontrast<\/span>\n              <input type=\"range\" id=\"cropper-contrast\" min=\"0.5\" max=\"1.5\" step=\"0.05\" value=\"1.0\" oninput=\"onCropperAdjustChange()\" class=\"w-full h-1 bg-slate-800 rounded appearance-none accent-blue-600\">\n            <\/div>\n          <\/div>\n\n        <\/div>\n\n      <\/div>\n\n      <!-- Modal Footer -->\n      <div class=\"px-5 py-3 border-t border-slate-800 flex items-center justify-between\">\n        <label class=\"px-3 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-xl text-xs font-medium cursor-pointer\">\n          <span>Anderes Bild w\u00e4hlen<\/span>\n          <input type=\"file\" accept=\"image\/*\" onchange=\"handleNewPhotoUpload(event)\" class=\"hidden\">\n        <\/label>\n        <div class=\"space-x-2\">\n          <button type=\"button\" onclick=\"closePhotoStudioModal()\" class=\"px-3.5 py-1.5 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-xl text-xs font-semibold\">Abbrechen<\/button>\n          <button type=\"button\" onclick=\"saveCroppedPhotoAndApply()\" class=\"px-4 py-1.5 bg-blue-600 hover:bg-blue-500 text-white rounded-xl text-xs font-bold shadow\">Foto anwenden<\/button>\n        <\/div>\n      <\/div>\n\n    <\/div>\n  <\/div>\n\n  <!-- ==================== MODAL: CLOUD & BACKUP MANAGER ==================== -->\n  <div id=\"modal-cloud-sync\" class=\"fixed inset-0 z-[9999999] bg-slate-950\/80 backdrop-blur-sm flex items-center justify-center p-4 hidden animate-fadeIn\">\n    <div class=\"bg-slate-900 border border-slate-700 w-full max-w-md rounded-2xl shadow-2xl overflow-hidden flex flex-col p-5 space-y-4\">\n      <div class=\"flex justify-between items-center border-b border-slate-800 pb-2\">\n        <h3 class=\"font-bold text-sm text-white flex items-center space-x-2\">\n          <i data-lucide=\"database\" class=\"w-4 h-4 text-blue-400\"><\/i>\n          <span>Cloud &#038; Backup Manager<\/span>\n        <\/h3>\n        <button onclick=\"closeCloudModal()\" class=\"text-slate-400 hover:text-white\"><i data-lucide=\"x\" class=\"w-5 h-5\"><\/i><\/button>\n      <\/div>\n      <div class=\"space-y-3 text-xs\">\n        <button onclick=\"exportJSONBackup()\" class=\"w-full py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl text-white font-semibold flex items-center justify-center space-x-2\">\n          <i data-lucide=\"download\" class=\"w-4 h-4 text-emerald-400\"><\/i>\n          <span>JSON Datei herunterladen (Voll-Backup)<\/span>\n        <\/button>\n        <label class=\"w-full py-2.5 bg-slate-800 hover:bg-slate-700 border border-slate-700 rounded-xl text-white font-semibold flex items-center justify-center space-x-2 cursor-pointer\">\n          <i data-lucide=\"upload\" class=\"w-4 h-4 text-blue-400\"><\/i>\n          <span>JSON Backup wiederherstellen<\/span>\n          <input type=\"file\" accept=\".json\" onchange=\"importJSONBackup(event)\" class=\"hidden\">\n        <\/label>\n      <\/div>\n    <\/div>\n  <\/div>\n\n  <!-- Core JavaScript Application Logic -->\n  <script>\n    \/\/ Templates Catalog (16 Distinct Templates)\n    const CV_TEMPLATES = [\n      { id: 'german-lebenslauf', name: 'German Lebenslauf', category: 'International (DE)', desc: 'Klassischer tabellarischer Standard nach DIN-Norm mit Passfoto oben rechts und Unterschriftenblock.' },\n      { id: 'europass-style', name: 'Europass CV Style', category: 'International (EU)', desc: 'Offizielles EU-Zweispaltensystem mit standardisierter Sprach- und Kompetenzmatrix.' },\n      { id: 'modern-blue', name: 'Modern Blue', category: 'Modern', desc: 'Souver\u00e4nes maritimes Design mit farbigen Kopfzeilen und strukturierter Timeline.' },\n      { id: 'modern-green', name: 'Modern Green (Tech)', category: 'Modern', desc: 'Frisches Smaragdgr\u00fcn, optimiert f\u00fcr Engineering-, Cloud- und Nachhaltigkeits-Branchen.' },\n      { id: 'modern-dark', name: 'Modern Dark', category: 'Modern', desc: 'Exklusiver Dark-Mode-Header mit hohem Kontrast f\u00fcr Entwickler und UI\/UX-Designer.' },\n      { id: 'corporate', name: 'Corporate Executive', category: 'Modern', desc: 'Traditionell und repr\u00e4sentativ f\u00fcr Management- und Consulting-Profile.' },\n      { id: 'startup', name: 'Startup Agile', category: 'Modern', desc: 'Dynamische Typografie mit Tags und Badges f\u00fcr agile Produktteams.' },\n      { id: 'designer-portfolio', name: 'Designer Portfolio', category: 'Creative', desc: 'Visueller Fokus mit Projekt-Vorschaubildern und moderner Typografie.' },\n      { id: 'minimal-creative', name: 'Minimal Creative', category: 'Creative', desc: 'Minimalistischer Stil mit gro\u00dfz\u00fcgigem Wei\u00dfraum und klarer \u00c4sthetik.' },\n      { id: 'ats-friendly', name: 'ATS Friendly', category: 'Traditional', desc: 'Einspaltig und 100% maschinenlesbar f\u00fcr automatische Bewerber-Tracking-Systeme.' },\n      { id: 'academic', name: 'Academic & Research', category: 'Traditional', desc: 'Fokus auf wissenschaftliche Laufbahn, Lehrst\u00fchle und Publikationslisten.' },\n      { id: 'canadian-resume', name: 'Canadian Resume', category: 'International (CA)', desc: 'Kanadischer Standard ohne Foto mit Fokus auf messbare KPIs und Erfolge.' },\n      { id: 'us-resume', name: 'US 1-Page Resume', category: 'International (US)', desc: 'Kompakte 1-Seiten-Struktur f\u00fcr amerikanische Tech-Konzerne.' },\n      { id: 'uk-style', name: 'UK Professional CV', category: 'International (UK)', desc: 'Britischer Standard mit pr\u00e4gnantem Personal Statement und chronologischem Werdegang.' },\n      { id: 'bangla-cv', name: 'Bangla Bilingual CV', category: 'International (BN)', desc: 'Zweisprachig optimiertes Format f\u00fcr internationale Entwickler.' },\n      { id: 'elegant-serif', name: 'Elegant Serif', category: 'Creative', desc: 'Edle Serifenschrift mit dezenten Trennlinien f\u00fcr Kanzleien und Kultur.' }\n    ];\n\n    const HEADINGS = {\n      en: { summary: 'Professional Summary', experience: 'Work Experience', education: 'Education & Qualifications', skills: 'Skills & Competencies', projects: 'Key Projects & Portfolio', certifications: 'Certifications', languages: 'Languages', hobbies: 'Hobbies & Interests', references: 'References' },\n      de: { summary: 'Kurzprofil', experience: 'Berufserfahrung', education: 'Ausbildung & Studium', skills: 'Kenntnisse & IT-Skills', projects: 'Projekte & Portfolios', certifications: 'Zertifikate', languages: 'Sprachkenntnisse', hobbies: 'Hobbies & Interessen', references: 'Referenzen' },\n      bn: { summary: '\u09aa\u09c7\u09b6\u09be\u0997\u09a4 \u09b8\u09be\u09b0\u09b8\u0982\u0995\u09cd\u09b7\u09c7\u09aa', experience: '\u0995\u09b0\u09cd\u09ae\u0985\u09ad\u09bf\u099c\u09cd\u099e\u09a4\u09be', education: '\u09b6\u09bf\u0995\u09cd\u09b7\u09be\u0997\u09a4 \u09af\u09cb\u0997\u09cd\u09af\u09a4\u09be', skills: '\u09a6\u0995\u09cd\u09b7\u09a4\u09be \u0993 \u0995\u09be\u09b0\u09bf\u0997\u09b0\u09bf \u099c\u09cd\u099e\u09be\u09a8', projects: '\u09aa\u09cd\u09b0\u0995\u09b2\u09cd\u09aa\u09b8\u09ae\u09c2\u09b9', certifications: '\u09b8\u09a8\u09a6\u09aa\u09a4\u09cd\u09b0', languages: '\u09ad\u09be\u09b7\u09be\u0997\u09a4 \u09a6\u0995\u09cd\u09b7\u09a4\u09be', hobbies: '\u09b6\u0996 \u0993 \u0986\u0997\u09cd\u09b0\u09b9', references: '\u09b0\u09c7\u09ab\u09be\u09b0\u09c7\u09a8\u09cd\u09b8' }\n    };\n\n    const DEFAULT_PHOTO_SVG = \"data:image\/svg+xml;utf8,\" + encodeURIComponent(`\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"300\" height=\"400\" viewBox=\"0 0 300 400\">\n        <defs><linearGradient id=\"g\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0%\" stop-color=\"#1e3a8a\"\/><stop offset=\"100%\" stop-color=\"#2563eb\"\/><\/linearGradient><\/defs>\n        <rect width=\"300\" height=\"400\" fill=\"url(#g)\"\/>\n        <circle cx=\"150\" cy=\"140\" r=\"64\" fill=\"#bfdbfe\"\/>\n        <path d=\"M45 380 C45 260 255 260 255 380 Z\" fill=\"#bfdbfe\"\/>\n      <\/svg>\n    `);\n\n    const SRABONS_LOGO_SVG = `data:image\/svg+xml;utf8,` + encodeURIComponent(`\n      <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 200 200\" width=\"100%\" height=\"100%\">\n        <defs>\n          <linearGradient id=\"srabonDarkBg\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#1e293b\"\/><stop offset=\"50%\" stop-color=\"#0f172a\"\/><stop offset=\"100%\" stop-color=\"#020617\"\/><\/linearGradient>\n          <linearGradient id=\"sSilverGrad\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"100%\"><stop offset=\"0%\" stop-color=\"#e2e8f0\"\/><stop offset=\"50%\" stop-color=\"#94a3b8\"\/><stop offset=\"100%\" stop-color=\"#64748b\"\/><\/linearGradient>\n        <\/defs>\n        <polygon points=\"100,6 194,100 100,194 6,100\" fill=\"url(#srabonDarkBg)\" stroke=\"#64748b\" stroke-width=\"4\" stroke-linejoin=\"round\"\/>\n        <line x1=\"130\" y1=\"68\" x2=\"182\" y2=\"95\" stroke=\"#38bdf8\" stroke-width=\"3.5\" stroke-linecap=\"round\"\/>\n        <path d=\"M128 66 C 114 54 84 56 75 72 C 68 85 75 97 92 104 L 110 111 C 126 118 132 128 128 140 C 122 156 94 158 78 146 C 72 141 68 135 66 128\" fill=\"none\" stroke=\"url(#sSilverGrad)\" stroke-width=\"17\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n      <\/svg>\n    `);\n\n    \/\/ Reactive State Model\n    let cvData = {\n      settings: {\n        template: 'german-lebenslauf',\n        locale: 'de',\n        accentColor: '#1d4ed8',\n        fontFamily: \"'Inter', sans-serif\",\n        previewMode: 'cv',\n        skillStyle: 'tag',\n        bgColor: '#ffffff',\n        bgImage: 'none'\n      },\n      personal: {\n        fullName: 'Srabon Debnath',\n        title: 'Senior Cloud & Full-Stack Solutions Architect',\n        email: 'contact@srabons.de',\n        phone: '+49 151 23456789',\n        address: 'Berlin, Deutschland',\n        dob: '12.04.1990',\n        nationality: 'Deutsch',\n        website: 'https:\/\/srabons.de',\n        linkedin: 'https:\/\/linkedin.com\/in\/srabondebnath',\n        github: 'https:\/\/github.com\/srabon',\n        portfolio: 'https:\/\/srabons.de\/portfolio',\n        summary: 'Erfahrener Senior Cloud & Full-Stack Architect mit \u00fcber 8 Jahren Expertise in der Entwicklung skalierbarer Cloud-Anwendungen, Microservices und moderner Web-Technologien (React, TypeScript, Node.js, AWS, Kubernetes). Spezialisiert auf agile Teamf\u00fchrung und DSGVO-konforme Softwarearchitektur.',\n        photoRaw: DEFAULT_PHOTO_SVG,\n        photoCropped: DEFAULT_PHOTO_SVG,\n        showPhoto: true,\n        photoShape: 'portrait' \/\/ 'portrait', 'circle', 'rounded', 'square'\n      },\n      experience: [\n        {\n          id: 'exp-1',\n          jobTitle: 'Lead Cloud Solutions Architect',\n          company: 'BerlinTech Innovations GmbH',\n          link: 'https:\/\/berlintech.example.de',\n          startDate: '03\/2021',\n          endDate: 'Heute',\n          currentlyWorking: true,\n          location: 'Berlin',\n          responsibilities: 'Konzeption und Implementierung hochverf\u00fcgbarer Cloud-Architekturen auf AWS. Fachliche F\u00fchrung von 10 Entwicklern.',\n          achievements: 'Reduzierung der AWS-Infrastrukturkosten um 35% durch Serverless-Migration und Kubernetes-Optimierung.'\n        },\n        {\n          id: 'exp-2',\n          jobTitle: 'Senior Full-Stack Developer',\n          company: 'CloudScale Europe AG',\n          link: 'https:\/\/cloudscale.example.de',\n          startDate: '01\/2018',\n          endDate: '02\/2021',\n          currentlyWorking: false,\n          location: 'Frankfurt a.M.',\n          responsibilities: 'Entwicklung von Enterprise-SaaS-Plattformen mit React, Next.js und Node.js. Enge Zusammenarbeit mit dem UX-Team.',\n          achievements: 'Einf\u00fchrung automatisierter CI\/CD-Pipelines und Verf\u00fcnffachung der Release-Zyklen.'\n        }\n      ],\n      education: [\n        {\n          id: 'edu-1',\n          degree: 'Master of Science in Computer Science',\n          institution: 'Technische Universit\u00e4t Berlin',\n          startDate: '2015',\n          endDate: '2018',\n          grade: '1.3 (Sehr Gut)',\n          description: 'Schwerpunkt: Verteilte Systeme, Cloud Computing und IT-Sicherheit.'\n        }\n      ],\n      skills: [\n        { id: 'sk-1', name: 'React & Next.js', level: 95 },\n        { id: 'sk-2', name: 'Node.js & TypeScript', level: 92 },\n        { id: 'sk-3', name: 'AWS & Kubernetes', level: 88 },\n        { id: 'sk-4', name: 'System Architecture', level: 90 },\n        { id: 'sk-5', name: 'DSGVO \/ GDPR Compliance', level: 95 }\n      ],\n      projects: [\n        {\n          id: 'proj-1',\n          name: 'Srabons Cloud Telemetry Suite',\n          liveUrl: 'https:\/\/srabons.de\/projects\/analytics',\n          githubUrl: 'https:\/\/github.com\/srabon\/cloud-analytics',\n          description: 'Echtzeit-\u00dcberwachungstool f\u00fcr Cloud-Microservices mit automatisierter Anomalie-Erkennung.'\n        }\n      ],\n      hobbies: [\n        { id: 'hob-1', name: 'Fotografie & Bildgestaltung', url: 'https:\/\/srabons.de\/photography' },\n        { id: 'hob-2', name: 'Open-Source & Cloud Lab', url: 'https:\/\/github.com\/srabon' }\n      ],\n      certifications: [\n        { id: 'cert-1', name: 'AWS Certified Solutions Architect \u2013 Professional', issuer: 'Amazon Web Services', date: '2023', url: 'https:\/\/aws.amazon.com\/verification' }\n      ],\n      languages: [\n        { id: 'lang-1', name: 'Deutsch', proficiency: 'Flie\u00dfend (C1)' },\n        { id: 'lang-2', name: 'Englisch', proficiency: 'Verhandlungssicher (C2)' },\n        { id: 'lang-3', name: 'Bengali', proficiency: 'Muttersprache' }\n      ],\n      references: [\n        { id: 'ref-1', name: 'Dr. Michael Weber', position: 'VP of Technology', company: 'BerlinTech Innovations GmbH', email: 'weber@berlintech.example.de', phone: '+49 30 9876543' }\n      ],\n      attachments: [],\n      coverLetter: {\n        recipientName: 'Personalabteilung \/ Recruiting',\n        companyName: 'TechVanguard Solutions GmbH',\n        companyAddress: 'Friedrichstra\u00dfe 120, 10117 Berlin',\n        date: 'Berlin, 26. Oktober 2026',\n        subject: 'Bewerbung als Senior Cloud & Full-Stack Solutions Architect',\n        salutation: 'Sehr geehrte Damen und Herren,',\n        body: 'mit gro\u00dfem Interesse bewerbe ich mich um die Position als Senior Cloud & Full-Stack Solutions Architect in Ihrem Unternehmen. In meiner bisherigen Laufbahn habe ich anspruchsvolle Cloud-native Architekturen mit React, Node.js und AWS erfolgreich skaliert.\\n\\nBesonders reizt mich bei TechVanguard die Weiterentwicklung innovativer Plattformen unter h\u00f6chsten Leistungs- und Sicherheitsstandards. Ich freue mich darauf, meine Expertise gewinnbringend in Ihr Team einzubringen.',\n        closing: 'Mit freundlichen Gr\u00fc\u00dfen'\n      }\n    };\n\n    \/\/ Image Cropper State\n    let cropperState = {\n      imageObj: new Image(),\n      scale: 1.0,\n      rotation: 0,\n      panX: 0,\n      panY: 0,\n      isDragging: false,\n      dragStartX: 0,\n      dragStartY: 0,\n      shape: 'portrait', \/\/ portrait, circle, rounded, square\n      isBW: false,\n      brightness: 1.0,\n      contrast: 1.0\n    };\n\n    let currentZoom = 0.95;\n\n    \/\/ Initialization\n    window.addEventListener('DOMContentLoaded', () => {\n      syncInputsFromState();\n      renderAllDynamicLists();\n      renderTemplatesGrid();\n      initCropperEngine(cvData.personal.photoRaw);\n      renderCVPreview();\n      autoFitPreviewSheet();\n      lucide.createIcons();\n\n      window.addEventListener('resize', () => {\n        autoFitPreviewSheet();\n      });\n    });\n\n    \/\/ Zoom & View Engine\n    function autoFitPreviewSheet() {\n      const container = document.getElementById('preview-viewport-container');\n      const scaler = document.getElementById('cv-zoom-scaler');\n      if (!container || !scaler) return;\n\n      const availWidth = container.clientWidth - 48;\n      const a4Width = 794;\n\n      if (availWidth < a4Width) {\n        currentZoom = Math.max(0.42, Math.min(1.0, availWidth \/ a4Width));\n      } else {\n        currentZoom = 0.95;\n      }\n      applyZoom();\n    }\n\n    function zoomStep(delta) {\n      currentZoom = Math.max(0.4, Math.min(1.5, currentZoom + delta));\n      applyZoom();\n    }\n\n    function applyZoom() {\n      const scaler = document.getElementById('cv-zoom-scaler');\n      const label = document.getElementById('zoom-percentage-label');\n      if (scaler) scaler.style.transform = `scale(${currentZoom})`;\n      if (label) label.innerText = `${Math.round(currentZoom * 100)}%`;\n    }\n\n    function setWorkspaceView(mode) {\n      const leftCol = document.getElementById('editor-left-column');\n      const rightCol = document.getElementById('preview-right-column');\n      const btnSplit = document.getElementById('btn-view-split');\n      const btnEditor = document.getElementById('btn-view-editor');\n      const btnPreview = document.getElementById('btn-view-preview');\n\n      [btnSplit, btnEditor, btnPreview].forEach(b => {\n        if (b) b.className = 'px-2.5 py-1 rounded-lg text-[11px] font-medium text-slate-400 hover:text-white';\n      });\n\n      if (mode === 'split') {\n        if (leftCol) { leftCol.classList.remove('hidden'); leftCol.style.width = '480px'; }\n        if (rightCol) rightCol.classList.remove('hidden');\n        if (btnSplit) btnSplit.className = 'px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-blue-600 text-white shadow';\n      } else if (mode === 'editor-only') {\n        if (leftCol) { leftCol.classList.remove('hidden'); leftCol.style.width = '100%'; }\n        if (rightCol) rightCol.classList.add('hidden');\n        if (btnEditor) btnEditor.className = 'px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-blue-600 text-white shadow';\n      } else if (mode === 'preview-only') {\n        if (leftCol) leftCol.classList.add('hidden');\n        if (rightCol) rightCol.classList.remove('hidden');\n        if (btnPreview) btnPreview.className = 'px-2.5 py-1 rounded-lg text-[11px] font-semibold bg-blue-600 text-white shadow';\n      }\n\n      setTimeout(autoFitPreviewSheet, 100);\n    }\n\n    function toggleFullscreen() {\n      const app = document.getElementById('srabon-cv-builder-app');\n      const btn = document.getElementById('btn-fullscreen-toggle');\n      if (!app) return;\n      const isFull = app.classList.toggle('is-fullscreen');\n      if (btn) {\n        btn.innerHTML = isFull ? '<i data-lucide=\"minimize\" class=\"w-4 h-4\"><\/i>' : '<i data-lucide=\"maximize\" class=\"w-4 h-4\"><\/i>';\n        lucide.createIcons();\n      }\n      setTimeout(autoFitPreviewSheet, 150);\n      showToast(isFull ? 'Vollbildmodus aktiviert' : 'Standardansicht');\n    }\n\n    \/\/ Two-Way Data Binding\n    function updateField(path, value) {\n      const keys = path.split('.');\n      let obj = cvData;\n      for (let i = 0; i < keys.length - 1; i++) obj = obj[keys[i]];\n      obj[keys[keys.length - 1]] = value;\n      renderCVPreview();\n    }\n\n    function changeLanguage(lang) {\n      cvData.settings.locale = lang;\n      renderCVPreview();\n      showToast(`Sprache ge\u00e4ndert zu: ${lang.toUpperCase()}`);\n    }\n\n    function setSkillStyle(style) {\n      cvData.settings.skillStyle = style;\n      ['tag', 'progress', 'stars', 'circle', 'list'].forEach(s => {\n        const btn = document.getElementById('btn-sk-style-' + s);\n        if (btn) btn.className = s === style ? 'p-1 rounded font-semibold bg-blue-600 text-white' : 'p-1 rounded font-medium bg-slate-900 text-slate-300 hover:bg-slate-700';\n      });\n      renderCVPreview();\n    }\n\n    function setAccentColor(color) {\n      cvData.settings.accentColor = color;\n      document.documentElement.style.setProperty('--cv-accent', color);\n      renderCVPreview();\n      showToast('Akzentfarbe aktualisiert!');\n    }\n\n    function setFontFamily(font) {\n      cvData.settings.fontFamily = font;\n      document.documentElement.style.setProperty('--cv-font', font);\n      renderCVPreview();\n      showToast('Schriftart aktualisiert!');\n    }\n\n    \/\/ ==================== INTERACTIVE IMAGE CROPPER STUDIO ====================\n    function initCropperEngine(src) {\n      cropperState.imageObj = new Image();\n      cropperState.imageObj.crossOrigin = 'anonymous';\n      cropperState.imageObj.onload = () => {\n        drawCropperCanvas();\n        updatePreviewImgThumb();\n      };\n      cropperState.imageObj.src = src;\n\n      const canvas = document.getElementById('image-cropper-canvas');\n      if (!canvas) return;\n\n      \/\/ Mouse drag handlers\n      canvas.onmousedown = (e) => {\n        cropperState.isDragging = true;\n        cropperState.dragStartX = e.clientX - cropperState.panX;\n        cropperState.dragStartY = e.clientY - cropperState.panY;\n      };\n      window.onmousemove = (e) => {\n        if (!cropperState.isDragging) return;\n        cropperState.panX = e.clientX - cropperState.dragStartX;\n        cropperState.panY = e.clientY - cropperState.dragStartY;\n        drawCropperCanvas();\n      };\n      window.onmouseup = () => {\n        cropperState.isDragging = false;\n      };\n\n      \/\/ Touch drag handlers\n      canvas.ontouchstart = (e) => {\n        if (e.touches.length === 1) {\n          cropperState.isDragging = true;\n          cropperState.dragStartX = e.touches[0].clientX - cropperState.panX;\n          cropperState.dragStartY = e.touches[0].clientY - cropperState.panY;\n        }\n      };\n      window.ontouchmove = (e) => {\n        if (!cropperState.isDragging || e.touches.length !== 1) return;\n        cropperState.panX = e.touches[0].clientX - cropperState.dragStartX;\n        cropperState.panY = e.touches[0].clientY - cropperState.dragStartY;\n        drawCropperCanvas();\n      };\n      window.ontouchend = () => {\n        cropperState.isDragging = false;\n      };\n    }\n\n    function drawCropperCanvas() {\n      const canvas = document.getElementById('image-cropper-canvas');\n      if (!canvas || !cropperState.imageObj.complete) return;\n      const ctx = canvas.getContext('2d');\n      const w = canvas.width;\n      const h = canvas.height;\n\n      ctx.clearRect(0, 0, w, h);\n\n      \/\/ Save context\n      ctx.save();\n\n      \/\/ Apply Filter Matrix\n      let filters = [];\n      if (cropperState.isBW) filters.push('grayscale(100%)');\n      filters.push(`brightness(${cropperState.brightness})`);\n      filters.push(`contrast(${cropperState.contrast})`);\n      ctx.filter = filters.join(' ');\n\n      \/\/ Center transformations\n      ctx.translate(w \/ 2 + cropperState.panX, h \/ 2 + cropperState.panY);\n      ctx.rotate((cropperState.rotation * Math.PI) \/ 180);\n      ctx.scale(cropperState.scale, cropperState.scale);\n\n      const img = cropperState.imageObj;\n      const imgAspect = img.width \/ img.height;\n      let drawW = w;\n      let drawH = w \/ imgAspect;\n\n      ctx.drawImage(img, -drawW \/ 2, -drawH \/ 2, drawW, drawH);\n      ctx.restore();\n\n      \/\/ Visual Mask Overlay on Canvas\n      drawCropMaskOverlay(ctx, w, h);\n    }\n\n    function drawCropMaskOverlay(ctx, w, h) {\n      ctx.save();\n      ctx.strokeStyle = 'rgba(56, 189, 248, 0.7)';\n      ctx.lineWidth = 2;\n      ctx.setLineDash([4, 4]);\n\n      if (cropperState.shape === 'circle') {\n        ctx.beginPath();\n        ctx.arc(w \/ 2, h \/ 2, Math.min(w, h) \/ 2 - 8, 0, Math.PI * 2);\n        ctx.stroke();\n      } else {\n        ctx.strokeRect(10, 10, w - 20, h - 20);\n      }\n      ctx.restore();\n    }\n\n    function onCropperZoomChange(val) {\n      cropperState.scale = parseFloat(val);\n      document.getElementById('cropper-zoom-val').innerText = `${Math.round(cropperState.scale * 100)}%`;\n      drawCropperCanvas();\n    }\n\n    function rotateCropper(deg) {\n      cropperState.rotation = (cropperState.rotation + deg) % 360;\n      drawCropperCanvas();\n    }\n\n    function resetCropperTransforms() {\n      cropperState.scale = 1.0;\n      cropperState.rotation = 0;\n      cropperState.panX = 0;\n      cropperState.panY = 0;\n      cropperState.brightness = 1.0;\n      cropperState.contrast = 1.0;\n      document.getElementById('cropper-zoom').value = '1.0';\n      document.getElementById('cropper-zoom-val').innerText = '100%';\n      document.getElementById('cropper-bright').value = '1.0';\n      document.getElementById('cropper-contrast').value = '1.0';\n      drawCropperCanvas();\n    }\n\n    function setCropperShape(shape) {\n      cropperState.shape = shape;\n      cvData.personal.photoShape = shape;\n      ['portrait', 'circle', 'rounded', 'square'].forEach(s => {\n        const btn = document.getElementById('btn-crop-' + s);\n        if (btn) btn.className = s === shape ? 'p-1.5 rounded-lg font-semibold bg-blue-600 text-white' : 'p-1.5 rounded-lg font-medium bg-slate-800 text-slate-300 hover:bg-slate-700';\n      });\n      drawCropperCanvas();\n    }\n\n    function setCropperFilter(isBW) {\n      cropperState.isBW = isBW;\n      document.getElementById('btn-crop-bw').className = isBW ? 'p-1.5 rounded-lg font-semibold bg-blue-600 text-white' : 'p-1.5 rounded-lg font-medium bg-slate-800 text-slate-300 hover:bg-slate-700';\n      document.getElementById('btn-crop-col').className = !isBW ? 'p-1.5 rounded-lg font-semibold bg-blue-600 text-white' : 'p-1.5 rounded-lg font-medium bg-slate-800 text-slate-300 hover:bg-slate-700';\n      drawCropperCanvas();\n    }\n\n    function onCropperAdjustChange() {\n      cropperState.brightness = parseFloat(document.getElementById('cropper-bright').value);\n      cropperState.contrast = parseFloat(document.getElementById('cropper-contrast').value);\n      drawCropperCanvas();\n    }\n\n    function openPhotoStudioModal() {\n      document.getElementById('modal-photo-studio').classList.remove('hidden');\n      drawCropperCanvas();\n      lucide.createIcons();\n    }\n\n    function closePhotoStudioModal() {\n      document.getElementById('modal-photo-studio').classList.add('hidden');\n    }\n\n    function saveCroppedPhotoAndApply() {\n      const canvas = document.getElementById('image-cropper-canvas');\n      if (!canvas) return;\n      try {\n        cvData.personal.photoCropped = canvas.toDataURL('image\/png');\n        cvData.personal.showPhoto = true;\n        updatePreviewImgThumb();\n        renderCVPreview();\n        closePhotoStudioModal();\n        showToast('Bewerbungsfoto erfolgreich gespeichert & angewendet!');\n      } catch (e) {\n        showToast('Fehler beim Exportieren des Fotos.');\n      }\n    }\n\n    function updatePreviewImgThumb() {\n      const img = document.getElementById('profile-photo-preview-img');\n      if (img) img.src = cvData.personal.photoCropped || cvData.personal.photoRaw;\n    }\n\n    function handleNewPhotoUpload(e) {\n      const file = e.target.files[0];\n      if (!file) return;\n      const reader = new FileReader();\n      reader.onload = (ev) => {\n        cvData.personal.photoRaw = ev.target.result;\n        cropperState.imageObj.src = ev.target.result;\n        cropperState.imageObj.onload = () => {\n          resetCropperTransforms();\n          drawCropperCanvas();\n          openPhotoStudioModal();\n          showToast('Neues Bild geladen. Passen Sie den Ausschnitt an.');\n        };\n      };\n      reader.readAsDataURL(file);\n    }\n\n    function togglePhotoVisibility() {\n      cvData.personal.showPhoto = !cvData.personal.showPhoto;\n      renderCVPreview();\n      showToast(cvData.personal.showPhoto ? 'Foto eingeblendet' : 'Foto ausgeblendet');\n    }\n\n    \/\/ ==================== DYNAMIC ARRAYS & SECTIONS ====================\n    function renderAllDynamicLists() {\n      renderExperienceList();\n      renderEducationList();\n      renderSkillsList();\n      renderProjectsList();\n      renderHobbiesList();\n      renderCertificationsList();\n      renderLanguagesList();\n      renderReferencesList();\n      renderAttachmentsList();\n      lucide.createIcons();\n    }\n\n    function renderExperienceList() {\n      const container = document.getElementById('experience-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.experience.map((exp, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-3 rounded-xl space-y-2 text-xs\">\n          <div class=\"flex justify-between items-center font-bold text-blue-400\">\n            <span>Station #${idx + 1}<\/span>\n            <div class=\"space-x-1.5\">\n              <button type=\"button\" onclick=\"moveArrayItem('experience', ${idx}, -1)\" class=\"text-slate-400 hover:text-white\">\u2191<\/button>\n              <button type=\"button\" onclick=\"moveArrayItem('experience', ${idx}, 1)\" class=\"text-slate-400 hover:text-white\">\u2193<\/button>\n              <button type=\"button\" onclick=\"removeArrayItem('experience', ${idx})\" class=\"text-rose-400 hover:underline\">\u2715<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input type=\"text\" value=\"${escapeHTML(exp.jobTitle)}\" placeholder=\"Jobtitel\" oninput=\"updateArrayItem('experience', ${idx}, 'jobTitle', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n            <input type=\"text\" value=\"${escapeHTML(exp.company)}\" placeholder=\"Unternehmen\" oninput=\"updateArrayItem('experience', ${idx}, 'company', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n            <input type=\"text\" value=\"${escapeHTML(exp.startDate)}\" placeholder=\"Start (z.B. 03\/2021)\" oninput=\"updateArrayItem('experience', ${idx}, 'startDate', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n            <input type=\"text\" value=\"${escapeHTML(exp.endDate)}\" placeholder=\"Ende (z.B. Heute)\" oninput=\"updateArrayItem('experience', ${idx}, 'endDate', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <\/div>\n          <input type=\"url\" value=\"${escapeHTML(exp.link || '')}\" placeholder=\"Website URL (klickbar)\" oninput=\"updateArrayItem('experience', ${idx}, 'link', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded p-1.5 text-blue-300\">\n          <textarea rows=\"2\" placeholder=\"Aufgaben und Verantwortlichkeiten...\" oninput=\"updateArrayItem('experience', ${idx}, 'responsibilities', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">${escapeHTML(exp.responsibilities)}<\/textarea>\n        <\/div>\n      `).join('');\n    }\n    function addExperience() {\n      cvData.experience.push({ id: 'exp-' + Date.now(), jobTitle: 'Position', company: 'Unternehmen', startDate: '2022', endDate: 'Heute', responsibilities: 'Aufgaben...' });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderEducationList() {\n      const container = document.getElementById('education-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.education.map((edu, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2.5 rounded-xl space-y-2 text-xs\">\n          <div class=\"flex justify-between items-center font-bold text-blue-400\">\n            <span>Ausbildung #${idx + 1}<\/span>\n            <button type=\"button\" onclick=\"removeArrayItem('education', ${idx})\" class=\"text-rose-400 hover:underline\">\u2715<\/button>\n          <\/div>\n          <input type=\"text\" value=\"${escapeHTML(edu.degree)}\" placeholder=\"Abschluss \/ Studiengang\" oninput=\"updateArrayItem('education', ${idx}, 'degree', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input type=\"text\" value=\"${escapeHTML(edu.institution)}\" placeholder=\"Hochschule \/ Institut\" oninput=\"updateArrayItem('education', ${idx}, 'institution', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n            <input type=\"text\" value=\"${escapeHTML(edu.grade || '')}\" placeholder=\"Note (z.B. 1.3)\" oninput=\"updateArrayItem('education', ${idx}, 'grade', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <\/div>\n        <\/div>\n      `).join('');\n    }\n    function addEducation() {\n      cvData.education.push({ id: 'edu-' + Date.now(), degree: 'Abschluss', institution: 'Universit\u00e4t', startDate: '2016', endDate: '2020' });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderSkillsList() {\n      const container = document.getElementById('skills-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.skills.map((sk, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2 rounded-xl flex items-center space-x-2 text-xs\">\n          <input type=\"text\" value=\"${escapeHTML(sk.name)}\" placeholder=\"Skill\" oninput=\"updateArrayItem('skills', ${idx}, 'name', this.value)\" class=\"flex-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <input type=\"number\" min=\"10\" max=\"100\" value=\"${sk.level || 85}\" oninput=\"updateArrayItem('skills', ${idx}, 'level', parseInt(this.value))\" class=\"w-16 bg-slate-900 border border-slate-700 rounded p-1.5 text-white text-center\">\n          <span class=\"text-[10px] text-slate-400\">%<\/span>\n          <button type=\"button\" onclick=\"removeArrayItem('skills', ${idx})\" class=\"text-rose-400 font-bold px-1.5 hover:underline\">\u2715<\/button>\n        <\/div>\n      `).join('');\n    }\n    function addSkill() {\n      cvData.skills.push({ id: 'sk-' + Date.now(), name: 'Neuer Skill', level: 90 });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderProjectsList() {\n      const container = document.getElementById('projects-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.projects.map((proj, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2.5 rounded-xl space-y-2 text-xs\">\n          <div class=\"flex justify-between items-center font-bold text-blue-400\">\n            <span>Projekt #${idx + 1}<\/span>\n            <button type=\"button\" onclick=\"removeArrayItem('projects', ${idx})\" class=\"text-rose-400 hover:underline\">\u2715<\/button>\n          <\/div>\n          <input type=\"text\" value=\"${escapeHTML(proj.name)}\" placeholder=\"Projektname\" oninput=\"updateArrayItem('projects', ${idx}, 'name', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <div class=\"grid grid-cols-2 gap-2\">\n            <input type=\"url\" value=\"${escapeHTML(proj.liveUrl || '')}\" placeholder=\"Live Demo URL (klickbar)\" oninput=\"updateArrayItem('projects', ${idx}, 'liveUrl', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-blue-300\">\n            <input type=\"url\" value=\"${escapeHTML(proj.githubUrl || '')}\" placeholder=\"GitHub URL (klickbar)\" oninput=\"updateArrayItem('projects', ${idx}, 'githubUrl', this.value)\" class=\"bg-slate-900 border border-slate-700 rounded p-1.5 text-blue-300\">\n          <\/div>\n          <textarea rows=\"2\" placeholder=\"Projektbeschreibung...\" oninput=\"updateArrayItem('projects', ${idx}, 'description', this.value)\" class=\"w-full bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">${escapeHTML(proj.description || '')}<\/textarea>\n        <\/div>\n      `).join('');\n    }\n    function addProject() {\n      cvData.projects.push({ id: 'proj-' + Date.now(), name: 'Cloud Service Plattform', liveUrl: 'https:\/\/srabons.de', description: 'Beschreibung des Projekts...' });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderHobbiesList() {\n      const container = document.getElementById('hobbies-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.hobbies.map((hob, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2 rounded-xl flex gap-2 items-center text-xs\">\n          <input type=\"text\" value=\"${escapeHTML(hob.name)}\" placeholder=\"Hobby \/ Interesse\" oninput=\"updateArrayItem('hobbies', ${idx}, 'name', this.value)\" class=\"w-1\/2 bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <input type=\"url\" value=\"${escapeHTML(hob.url || '')}\" placeholder=\"Portfolio URL (klickbar)\" oninput=\"updateArrayItem('hobbies', ${idx}, 'url', this.value)\" class=\"w-1\/2 bg-slate-900 border border-slate-700 rounded p-1.5 text-blue-300\">\n          <button type=\"button\" onclick=\"removeArrayItem('hobbies', ${idx})\" class=\"text-rose-400 font-bold px-1.5\">\u2715<\/button>\n        <\/div>\n      `).join('');\n    }\n    function addHobby() {\n      cvData.hobbies.push({ id: 'hob-' + Date.now(), name: 'Fotografie', url: 'https:\/\/srabons.de\/photography' });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderCertificationsList() {\n      const container = document.getElementById('certifications-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.certifications.map((c, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2 rounded-xl flex gap-2 items-center text-xs\">\n          <input type=\"text\" value=\"${escapeHTML(c.name)}\" placeholder=\"Zertifikat\" oninput=\"updateArrayItem('certifications', ${idx}, 'name', this.value)\" class=\"flex-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <button type=\"button\" onclick=\"removeArrayItem('certifications', ${idx})\" class=\"text-rose-400 font-bold px-1.5\">\u2715<\/button>\n        <\/div>\n      `).join('');\n    }\n    function addCertification() {\n      cvData.certifications.push({ id: 'cert-' + Date.now(), name: 'AWS Certified Solutions Architect' });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderLanguagesList() {\n      const container = document.getElementById('languages-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.languages.map((l, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2 rounded-xl flex gap-2 items-center text-xs\">\n          <input type=\"text\" value=\"${escapeHTML(l.name)}\" placeholder=\"Sprache\" oninput=\"updateArrayItem('languages', ${idx}, 'name', this.value)\" class=\"flex-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <input type=\"text\" value=\"${escapeHTML(l.proficiency)}\" placeholder=\"Niveau\" oninput=\"updateArrayItem('languages', ${idx}, 'proficiency', this.value)\" class=\"w-32 bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <button type=\"button\" onclick=\"removeArrayItem('languages', ${idx})\" class=\"text-rose-400 font-bold px-1.5\">\u2715<\/button>\n        <\/div>\n      `).join('');\n    }\n    function addLanguage() {\n      cvData.languages.push({ id: 'lang-' + Date.now(), name: 'Englisch', proficiency: 'C2' });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderReferencesList() {\n      const container = document.getElementById('references-list-container');\n      if (!container) return;\n      container.innerHTML = cvData.references.map((r, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2 rounded-xl flex gap-2 items-center text-xs\">\n          <input type=\"text\" value=\"${escapeHTML(r.name)}\" placeholder=\"Name\" oninput=\"updateArrayItem('references', ${idx}, 'name', this.value)\" class=\"flex-1 bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <input type=\"text\" value=\"${escapeHTML(r.company)}\" placeholder=\"Firma\" oninput=\"updateArrayItem('references', ${idx}, 'company', this.value)\" class=\"w-32 bg-slate-900 border border-slate-700 rounded p-1.5 text-white\">\n          <button type=\"button\" onclick=\"removeArrayItem('references', ${idx})\" class=\"text-rose-400 font-bold px-1.5\">\u2715<\/button>\n        <\/div>\n      `).join('');\n    }\n    function addReference() {\n      cvData.references.push({ id: 'ref-' + Date.now(), name: 'Dr. Michael Weber', company: 'BerlinTech' });\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    function renderAttachmentsList() {\n      const container = document.getElementById('attachments-list-container');\n      if (!container) return;\n      container.innerHTML = (cvData.attachments || []).map((att, idx) => `\n        <div class=\"bg-slate-800\/80 border border-slate-700 p-2.5 rounded-xl flex items-center justify-between text-xs\">\n          <span class=\"text-white truncate max-w-[200px]\">${escapeHTML(att.name)}<\/span>\n          <button type=\"button\" onclick=\"removeArrayItem('attachments', ${idx})\" class=\"text-rose-400 font-semibold hover:underline\">Entfernen<\/button>\n        <\/div>\n      `).join('');\n    }\n\n    function handleAttachmentUpload(e) {\n      const file = e.target.files[0];\n      if (!file) return;\n      const reader = new FileReader();\n      reader.onload = (ev) => {\n        if (!cvData.attachments) cvData.attachments = [];\n        cvData.attachments.push({ id: 'att-' + Date.now(), name: file.name, type: file.type, url: ev.target.result });\n        renderAllDynamicLists(); renderCVPreview();\n        showToast('Dokument \/ Zeugnis angeh\u00e4ngt!');\n      };\n      reader.readAsDataURL(file);\n    }\n\n    function updateArrayItem(sec, idx, key, val) {\n      if (cvData[sec] && cvData[sec][idx]) { cvData[sec][idx][key] = val; renderCVPreview(); }\n    }\n    function removeArrayItem(sec, idx) {\n      if (cvData[sec]) { cvData[sec].splice(idx, 1); renderAllDynamicLists(); renderCVPreview(); }\n    }\n    function moveArrayItem(sec, idx, dir) {\n      if (!cvData[sec]) return;\n      const target = idx + dir;\n      if (target < 0 || target >= cvData[sec].length) return;\n      const temp = cvData[sec][idx];\n      cvData[sec][idx] = cvData[sec][target];\n      cvData[sec][target] = temp;\n      renderAllDynamicLists(); renderCVPreview();\n    }\n\n    \/\/ ==================== TEMPLATES & RENDER ENGINE ====================\n    function renderTemplatesGrid() {\n      const container = document.getElementById('templates-grid-container');\n      if (!container) return;\n      const active = cvData.settings.template;\n      container.innerHTML = CV_TEMPLATES.map(t => `\n        <div onclick=\"selectTemplate('${t.id}')\" class=\"p-4 rounded-2xl border cursor-pointer transition-all ${t.id === active ? 'bg-blue-600\/20 border-blue-500 shadow-lg' : 'bg-slate-800\/80 border-slate-700 hover:border-slate-500'}\">\n          <div class=\"flex justify-between items-center mb-1\">\n            <span class=\"font-bold text-xs text-white uppercase tracking-wider\">${escapeHTML(t.name)}<\/span>\n            <span class=\"text-[9px] bg-slate-900 text-blue-400 px-1.5 py-0.5 rounded\">${escapeHTML(t.category)}<\/span>\n          <\/div>\n          <p class=\"text-[11px] text-slate-400 leading-relaxed\">${escapeHTML(t.desc)}<\/p>\n        <\/div>\n      `).join('');\n    }\n\n    function selectTemplate(id) {\n      cvData.settings.template = id;\n      const badge = document.getElementById('active-template-badge');\n      if (badge) badge.innerText = CV_TEMPLATES.find(t => t.id === id)?.name || id;\n      renderTemplatesGrid(); \n      renderCVPreview();\n      showToast(`Vorlage gewechselt: ${id}`);\n    }\n\n    function switchMainTab(tab) {\n      ['editor', 'coverletter', 'templates', 'ai', 'admin'].forEach(t => {\n        const panel = document.getElementById('panel-' + t);\n        if (panel) panel.classList.toggle('hidden', t !== tab);\n        const btn = document.getElementById('tab-btn-' + t);\n        if (btn) btn.className = t === tab ? 'px-3 py-1.5 rounded-lg text-xs font-semibold bg-blue-600 text-white shadow whitespace-nowrap flex items-center space-x-1.5' : 'px-3 py-1.5 rounded-lg text-xs font-semibold text-slate-300 hover:text-white whitespace-nowrap flex items-center space-x-1.5';\n      });\n      if (tab === 'coverletter') setPreviewMode('coverletter');\n      if (tab === 'editor') setPreviewMode('cv');\n    }\n\n    function switchEditorSection(sec) {\n      ['personal', 'links', 'experience', 'education', 'skills', 'projects', 'hobbies', 'extras', 'references', 'attachments'].forEach(s => {\n        const el = document.getElementById('editor-sec-' + s);\n        if (el) el.classList.toggle('hidden', s !== sec);\n        const btn = document.getElementById('sec-btn-' + s);\n        if (btn) btn.className = s === sec ? 'px-2.5 py-1 rounded-lg text-xs font-semibold bg-blue-600 text-white whitespace-nowrap' : 'px-2.5 py-1 rounded-lg text-xs font-semibold bg-slate-800 text-slate-300 hover:bg-slate-700 whitespace-nowrap';\n      });\n    }\n\n    function setPreviewMode(mode) {\n      cvData.settings.previewMode = mode;\n      ['cv', 'coverletter', 'both'].forEach(m => {\n        const btn = document.getElementById('prev-mode-' + (m === 'cv' ? 'cv' : m === 'coverletter' ? 'cl' : 'both'));\n        if (btn) btn.className = m === mode ? 'px-2.5 py-1 rounded text-[11px] bg-blue-600 text-white font-semibold' : 'px-2.5 py-1 rounded text-[11px] text-slate-300 hover:text-white font-medium';\n      });\n      renderCVPreview();\n    }\n\n    \/\/ ==================== LIVE PREVIEW RENDERER ====================\n    function renderCVPreview() {\n      const root = document.getElementById('cv-dynamic-render-root');\n      if (!root) return;\n      const mode = cvData.settings.previewMode || 'cv';\n      let html = '';\n\n      if (mode === 'coverletter') {\n        html = `<div class=\"a4-page-sheet p-12 cv-font-target\">${renderCoverLetterSheetHTML()}<\/div>`;\n      } else if (mode === 'both') {\n        html = `<div class=\"a4-page-sheet p-12 cv-font-target\">${renderCoverLetterSheetHTML()}<\/div>` +\n               `<div class=\"a4-page-sheet p-12 cv-font-target\">${renderCVTemplateDispatcher()}<\/div>`;\n      } else {\n        html = `<div class=\"a4-page-sheet p-12 cv-font-target\">${renderCVTemplateDispatcher()}<\/div>`;\n      }\n\n      \/\/ Append supporting documents if any\n      if (cvData.attachments && cvData.attachments.length > 0 && (mode === 'cv' || mode === 'both')) {\n        html += renderAttachmentsPagesHTML();\n      }\n\n      root.innerHTML = html;\n    }\n\n    function renderCVTemplateDispatcher() {\n      const tmpl = cvData.settings.template;\n      \/\/ All templates share the robust dispatcher\n      return renderMasterCVSheetHTML(tmpl);\n    }\n\n    function renderMasterCVSheetHTML(templateId) {\n      const h = HEADINGS[cvData.settings.locale || 'de'] || HEADINGS.de;\n      const p = cvData.personal;\n      const accent = cvData.settings.accentColor || '#1d4ed8';\n\n      \/\/ Shape formatting for Photo\n      let shapeClass = 'w-24 h-32 rounded-xl object-cover border-2 border-slate-300 shrink-0';\n      if (p.photoShape === 'circle') shapeClass = 'w-24 h-24 rounded-full object-cover border-2 border-slate-300 shrink-0';\n      if (p.photoShape === 'square') shapeClass = 'w-24 h-24 rounded-none object-cover border-2 border-slate-300 shrink-0';\n\n      const photoHTML = p.showPhoto && p.photoCropped \n        ? `<img decoding=\"async\" src=\"${p.photoCropped}\" alt=\"${escapeHTML(p.fullName)}\" class=\"${shapeClass}\">`\n        : '';\n\n      \/\/ Clickable Contact Links\n      const contactLinks = [];\n      if (p.email) contactLinks.push(`<a href=\"mailto:${escapeHTML(p.email)}\" target=\"_blank\" class=\"text-blue-700 underline font-medium\">${escapeHTML(p.email)}<\/a>`);\n      if (p.phone) contactLinks.push(`<a href=\"tel:${escapeHTML(p.phone.replace(\/\\s+\/g,''))}\" target=\"_blank\" class=\"text-blue-700 underline font-medium\">${escapeHTML(p.phone)}<\/a>`);\n      if (p.address) contactLinks.push(`<span>${escapeHTML(p.address)}<\/span>`);\n      if (p.linkedin) contactLinks.push(`<a href=\"${safeURL(p.linkedin)}\" target=\"_blank\" class=\"text-blue-700 underline font-medium\">LinkedIn<\/a>`);\n      if (p.github) contactLinks.push(`<a href=\"${safeURL(p.github)}\" target=\"_blank\" class=\"text-blue-700 underline font-medium\">GitHub<\/a>`);\n      if (p.portfolio) contactLinks.push(`<a href=\"${safeURL(p.portfolio)}\" target=\"_blank\" class=\"text-blue-700 underline font-medium\">Portfolio<\/a>`);\n\n      \/\/ Experience HTML\n      const expHTML = (cvData.experience || []).map(exp => `\n        <div class=\"space-y-1 py-2 border-b border-slate-100 text-xs\">\n          <div class=\"flex justify-between items-baseline\">\n            <h4 class=\"font-bold text-slate-900 text-sm\">${escapeHTML(exp.jobTitle)} \u2014 \n              <span style=\"color:${accent}\">\n                ${exp.link ? `<a href=\"${safeURL(exp.link)}\" target=\"_blank\" class=\"underline\">${escapeHTML(exp.company)}<\/a>` : escapeHTML(exp.company)}\n              <\/span>\n            <\/h4>\n            <span class=\"text-xs text-slate-500 font-medium\">${escapeHTML(exp.startDate)} \u2013 ${exp.currentlyWorking ? 'Heute' : escapeHTML(exp.endDate)}<\/span>\n          <\/div>\n          <p class=\"text-slate-700 text-xs leading-relaxed\">${escapeHTML(exp.responsibilities)}<\/p>\n          ${exp.achievements ? `<p class=\"text-xs text-slate-800 bg-slate-50 p-1.5 rounded border border-slate-100 font-medium\"><strong>Erfolg:<\/strong> ${escapeHTML(exp.achievements)}<\/p>` : ''}\n        <\/div>\n      `).join('');\n\n      \/\/ Education HTML\n      const eduHTML = (cvData.education || []).map(edu => `\n        <div class=\"py-1.5 border-b border-slate-100 text-xs\">\n          <div class=\"flex justify-between items-baseline\">\n            <div class=\"font-bold text-slate-900 text-xs\">${escapeHTML(edu.degree)} \u2014 <span class=\"font-normal text-slate-700\">${escapeHTML(edu.institution)}<\/span><\/div>\n            <span class=\"text-xs text-slate-500\">${escapeHTML(edu.startDate)} \u2013 ${escapeHTML(edu.endDate)}<\/span>\n          <\/div>\n          ${edu.grade ? `<p class=\"text-[11px] text-slate-600\">Note: ${escapeHTML(edu.grade)}<\/p>` : ''}\n        <\/div>\n      `).join('');\n\n      \/\/ Skills HTML depending on Style\n      const skillsHTML = renderSkillsComponentHTML(accent);\n\n      \/\/ Projects HTML\n      const projHTML = (cvData.projects || []).map(proj => `\n        <div class=\"py-1.5 border-b border-slate-100 text-xs space-y-0.5\">\n          <div class=\"flex justify-between items-baseline\">\n            <h4 class=\"font-bold text-slate-900\">${escapeHTML(proj.name)}<\/h4>\n            <div class=\"space-x-2 text-xs\">\n              ${proj.liveUrl ? `<a href=\"${safeURL(proj.liveUrl)}\" target=\"_blank\" class=\"text-blue-600 underline font-medium\">\ud83d\udd17 Live Demo<\/a>` : ''}\n              ${proj.githubUrl ? `<a href=\"${safeURL(proj.githubUrl)}\" target=\"_blank\" class=\"text-slate-600 underline font-medium\">\ud83d\udce6 Code<\/a>` : ''}\n            <\/div>\n          <\/div>\n          <p class=\"text-slate-700 text-xs\">${escapeHTML(proj.description)}<\/p>\n        <\/div>\n      `).join('');\n\n      \/\/ Hobbies HTML with active hyperlinks\n      const hobbiesHTML = (cvData.hobbies || []).map(hob => hob.url \n        ? `<a href=\"${safeURL(hob.url)}\" target=\"_blank\" class=\"px-2.5 py-1 bg-slate-100 hover:bg-slate-200 border border-slate-300 rounded-md text-xs font-semibold text-blue-700 underline inline-flex items-center space-x-1\"><span>\u2665 ${escapeHTML(hob.name)}<\/span><span>\u2197<\/span><\/a>`\n        : `<span class=\"px-2.5 py-1 bg-slate-100 border border-slate-300 rounded-md text-xs font-medium text-slate-800\">\u2665 ${escapeHTML(hob.name)}<\/span>`\n      ).join(' ');\n\n      \/\/ Certs & Lang HTML\n      const certHTML = (cvData.certifications || []).map(c => `<div class=\"py-1 text-xs font-semibold text-slate-800\">\ud83d\udcdc ${escapeHTML(c.name)}<\/div>`).join('');\n      const langHTML = (cvData.languages || []).map(l => `<div class=\"py-1 text-xs text-slate-800\">\ud83c\udf0d ${escapeHTML(l.name)}: <span class=\"font-medium text-slate-600\">${escapeHTML(l.proficiency)}<\/span><\/div>`).join('');\n\n      \/\/ References HTML\n      const refHTML = (cvData.references || []).map(r => `<div class=\"text-xs text-slate-800\"><strong>${escapeHTML(r.name)}<\/strong> (${escapeHTML(r.company)})<\/div>`).join('');\n\n      return `\n        <div class=\"space-y-5 pb-16 relative min-h-[1050px]\">\n          \n          <!-- Header Layout (German DIN Portrait on Right) -->\n          <div class=\"flex items-start justify-between border-b-2 pb-4 gap-6\" style=\"border-color:${accent}\">\n            <div class=\"space-y-1.5 flex-1\">\n              <h1 class=\"text-3xl font-extrabold tracking-tight text-slate-900\">${escapeHTML(p.fullName)}<\/h1>\n              <p class=\"text-base font-bold\" style=\"color:${accent}\">${escapeHTML(p.title)}<\/p>\n              <div class=\"text-xs text-slate-600 pt-1 flex flex-wrap gap-x-3 gap-y-1\">${contactLinks.join(' \u2022 ')}<\/div>\n            <\/div>\n            ${photoHTML}\n          <\/div>\n\n          <!-- Summary -->\n          ${p.summary ? `\n            <div>\n              <h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1.5\" style=\"color:${accent}\">${h.summary}<\/h3>\n              <p class=\"text-xs text-slate-700 leading-relaxed\">${escapeHTML(p.summary)}<\/p>\n            <\/div>\n          ` : ''}\n\n          <!-- Work Experience -->\n          ${expHTML ? `\n            <div>\n              <h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1.5\" style=\"color:${accent}\">${h.experience}<\/h3>\n              <div class=\"space-y-1\">${expHTML}<\/div>\n            <\/div>\n          ` : ''}\n\n          <!-- Education -->\n          ${eduHTML ? `\n            <div>\n              <h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1.5\" style=\"color:${accent}\">${h.education}<\/h3>\n              <div class=\"space-y-1\">${eduHTML}<\/div>\n            <\/div>\n          ` : ''}\n\n          <!-- Skills -->\n          ${skillsHTML ? `\n            <div>\n              <h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1.5\" style=\"color:${accent}\">${h.skills}<\/h3>\n              <div class=\"pt-1\">${skillsHTML}<\/div>\n            <\/div>\n          ` : ''}\n\n          <!-- Key Projects -->\n          ${projHTML ? `\n            <div>\n              <h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1.5\" style=\"color:${accent}\">${h.projects}<\/h3>\n              <div class=\"space-y-1\">${projHTML}<\/div>\n            <\/div>\n          ` : ''}\n\n          <!-- Hobbies & Interests -->\n          ${hobbiesHTML ? `\n            <div>\n              <h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1.5\" style=\"color:${accent}\">${h.hobbies}<\/h3>\n              <div class=\"flex flex-wrap gap-1.5 pt-1\">${hobbiesHTML}<\/div>\n            <\/div>\n          ` : ''}\n\n          <!-- Certifications & Languages Grid -->\n          <div class=\"grid grid-cols-1 sm:grid-cols-2 gap-4 pt-1\">\n            ${certHTML ? `<div><h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1\" style=\"color:${accent}\">${h.certifications}<\/h3>${certHTML}<\/div>` : ''}\n            ${langHTML ? `<div><h3 class=\"text-xs font-bold uppercase tracking-wider border-b pb-1 mb-1\" style=\"color:${accent}\">${h.languages}<\/h3>${langHTML}<\/div>` : ''}\n          <\/div>\n\n          <!-- Bottom Right Corner Watermark: Vector Logo & Italic 8pt srabons.de -->\n          <div class=\"absolute bottom-2 right-2 flex items-center space-x-1.5 opacity-85 select-none\">\n            <img decoding=\"async\" src=\"${SRABONS_LOGO_SVG}\" alt=\"srabons.de logo\" class=\"w-4 h-4 object-contain\">\n            <a href=\"https:\/\/srabons.de\" target=\"_blank\" style=\"font-size: 8pt; font-style: italic;\" class=\"text-slate-600 hover:text-blue-700 font-semibold no-underline\">srabons.de<\/a>\n          <\/div>\n\n        <\/div>\n      `;\n    }\n\n    function renderSkillsComponentHTML(accent) {\n      const mode = cvData.settings.skillStyle || 'tag';\n      const skills = cvData.skills || [];\n      if (skills.length === 0) return '';\n\n      if (mode === 'progress') {\n        return `\n          <div class=\"grid grid-cols-2 gap-3\">\n            ${skills.map(s => `\n              <div class=\"space-y-1\">\n                <div class=\"flex justify-between text-xs font-medium text-slate-800\">\n                  <span>${escapeHTML(s.name)}<\/span>\n                  <span>${s.level}%<\/span>\n                <\/div>\n                <div class=\"w-full bg-slate-200 h-1.5 rounded-full overflow-hidden\">\n                  <div class=\"h-full rounded-full\" style=\"width:${s.level}%; background-color:${accent}\"><\/div>\n                <\/div>\n              <\/div>\n            `).join('')}\n          <\/div>\n        `;\n      } else if (mode === 'stars') {\n        return `\n          <div class=\"grid grid-cols-2 gap-2 text-xs\">\n            ${skills.map(s => {\n              const stars = Math.round((s.level \/ 100) * 5);\n              return `\n                <div class=\"flex justify-between items-center text-slate-800\">\n                  <span>${escapeHTML(s.name)}<\/span>\n                  <span class=\"text-amber-500 font-bold\">${'\u2605'.repeat(stars)}${'\u2606'.repeat(5 - stars)}<\/span>\n                <\/div>\n              `;\n            }).join('')}\n          <\/div>\n        `;\n      } else if (mode === 'circle') {\n        return `\n          <div class=\"flex flex-wrap gap-4 pt-1\">\n            ${skills.map(s => `\n              <div class=\"flex flex-col items-center\">\n                <div class=\"w-10 h-10 rounded-full border-2 flex items-center justify-center font-bold text-[10px] text-slate-900\" style=\"border-color:${accent}\">\n                  ${s.level}%\n                <\/div>\n                <span class=\"text-[10px] text-slate-700 mt-1\">${escapeHTML(s.name)}<\/span>\n              <\/div>\n            `).join('')}\n          <\/div>\n        `;\n      } else if (mode === 'list') {\n        return `<p class=\"text-xs text-slate-800 leading-relaxed\">${skills.map(s => escapeHTML(s.name)).join(' \u2022 ')}<\/p>`;\n      }\n\n      \/\/ Default: Tag \/ Badge Mode\n      return `\n        <div class=\"flex flex-wrap gap-1.5\">\n          ${skills.map(s => `\n            <span class=\"px-2.5 py-1 bg-slate-100 border border-slate-200 rounded-md text-xs font-semibold text-slate-800\">\n              ${escapeHTML(s.name)}\n            <\/span>\n          `).join('')}\n        <\/div>\n      `;\n    }\n\n    function renderCoverLetterSheetHTML() {\n      const p = cvData.personal; \n      const cl = cvData.coverLetter; \n      const accent = cvData.settings.accentColor || '#1d4ed8';\n\n      return `\n        <div class=\"space-y-6 text-slate-800 text-xs relative min-h-[1050px] pb-16\">\n          <div class=\"flex justify-between items-start border-b-2 pb-4\" style=\"border-color:${accent}\">\n            <div>\n              <h1 class=\"text-2xl font-extrabold text-slate-900\">${escapeHTML(p.fullName)}<\/h1>\n              <p class=\"text-xs font-semibold\" style=\"color:${accent}\">${escapeHTML(p.title)}<\/p>\n            <\/div>\n            <div class=\"text-[11px] text-slate-600 text-right space-y-0.5\">\n              <div>${escapeHTML(p.address)}<\/div>\n              <div>${escapeHTML(p.email)} \u2022 ${escapeHTML(p.phone)}<\/div>\n            <\/div>\n          <\/div>\n          <div class=\"flex justify-between items-end pt-2 text-[11px]\">\n            <div>\n              <div class=\"font-bold text-slate-900\">${escapeHTML(cl.companyName)}<\/div>\n              <div>${escapeHTML(cl.recipientName)}<\/div>\n              <div>${escapeHTML(cl.companyAddress)}<\/div>\n            <\/div>\n            <div class=\"text-slate-600\">${escapeHTML(cl.date)}<\/div>\n          <\/div>\n          <div class=\"pt-2\">\n            <h2 class=\"text-sm font-bold\" style=\"color:${accent}\">${escapeHTML(cl.subject)}<\/h2>\n          <\/div>\n          <div class=\"space-y-3 leading-relaxed text-slate-800\">\n            <p class=\"font-semibold\">${escapeHTML(cl.salutation)}<\/p>\n            ${cl.body.split('\\n\\n').map(para => `<p>${escapeHTML(para)}<\/p>`).join('')}\n          <\/div>\n          <div class=\"pt-4 space-y-2\">\n            <p class=\"text-slate-800\">${escapeHTML(cl.closing)}<\/p>\n            <div class=\"font-bold text-slate-900 border-t border-slate-300 inline-block pt-1 pr-12\">${escapeHTML(p.fullName)}<\/div>\n          <\/div>\n\n          <!-- Bottom Right Corner Watermark: Logo & srabons.de -->\n          <div class=\"absolute bottom-2 right-2 flex items-center space-x-1.5 opacity-85 select-none\">\n            <img decoding=\"async\" src=\"${SRABONS_LOGO_SVG}\" alt=\"srabons.de logo\" class=\"w-4 h-4 object-contain\">\n            <a href=\"https:\/\/srabons.de\" target=\"_blank\" style=\"font-size: 8pt; font-style: italic;\" class=\"text-slate-600 hover:text-blue-700 font-semibold no-underline\">srabons.de<\/a>\n          <\/div>\n        <\/div>\n      `;\n    }\n\n    function renderAttachmentsPagesHTML() {\n      return (cvData.attachments || []).map((att, idx) => `\n        <div class=\"a4-page-sheet p-12 cv-font-target space-y-4 relative min-h-[1123px]\">\n          <h2 class=\"text-lg font-bold text-slate-900 border-b pb-2\">Anlage #${idx + 1}: ${escapeHTML(att.name)}<\/h2>\n          <div class=\"border rounded-xl p-4 bg-slate-50 flex items-center justify-center min-h-[700px]\">\n            ${att.type.startsWith('image\/') \n              ? `<img decoding=\"async\" src=\"${att.url}\" alt=\"${escapeHTML(att.name)}\" class=\"max-h-[800px] object-contain shadow\">`\n              : `<div class=\"text-center space-y-2\"><i data-lucide=\"file-text\" class=\"w-16 h-16 text-slate-400 mx-auto\"><\/i><p class=\"text-xs text-slate-600 font-mono\">${escapeHTML(att.name)}<\/p><\/div>`\n            }\n          <\/div>\n          <!-- Bottom Watermark -->\n          <div class=\"absolute bottom-2 right-2 flex items-center space-x-1.5 opacity-85 select-none\">\n            <img decoding=\"async\" src=\"${SRABONS_LOGO_SVG}\" alt=\"srabons.de logo\" class=\"w-4 h-4 object-contain\">\n            <a href=\"https:\/\/srabons.de\" target=\"_blank\" style=\"font-size: 8pt; font-style: italic;\" class=\"text-slate-600 hover:text-blue-700 font-semibold no-underline\">srabons.de<\/a>\n          <\/div>\n        <\/div>\n      `).join('');\n    }\n\n    \/\/ ==================== HELPER ACTIONS & EXPORTS ====================\n    function loadDemoPreview() {\n      cvData.personal.fullName = 'Srabon Debnath';\n      cvData.personal.title = 'Senior Cloud & Full-Stack Solutions Architect';\n      cvData.personal.email = 'contact@srabons.de';\n      cvData.personal.phone = '+49 151 23456789';\n      cvData.personal.address = 'Berlin, Deutschland';\n      cvData.personal.summary = 'Erfahrener Senior Cloud & Full-Stack Architect mit \u00fcber 8 Jahren Expertise in der Entwicklung skalierbarer Cloud-Anwendungen, Microservices und moderner Web-Technologien (React, TypeScript, Node.js, AWS, Kubernetes).';\n      syncInputsFromState();\n      renderAllDynamicLists();\n      renderCVPreview();\n      autoFitPreviewSheet();\n      showToast('Demo Preview Daten geladen!');\n    }\n\n    function syncInputsFromState() {\n      const p = cvData.personal;\n      const cl = cvData.coverLetter;\n      const setVal = (id, val) => { const el = document.getElementById(id); if (el) el.value = val || ''; };\n      setVal('inp-fullName', p.fullName);\n      setVal('inp-title', p.title);\n      setVal('inp-email', p.email);\n      setVal('inp-phone', p.phone);\n      setVal('inp-address', p.address);\n      setVal('inp-dob', p.dob);\n      setVal('inp-nationality', p.nationality);\n      setVal('inp-summary', p.summary);\n      setVal('inp-linkedin', p.linkedin);\n      setVal('inp-github', p.github);\n      setVal('inp-portfolio', p.portfolio);\n      setVal('inp-website', p.website);\n\n      setVal('cl-recipient', cl.recipientName);\n      setVal('cl-company', cl.companyName);\n      setVal('cl-address', cl.companyAddress);\n      setVal('cl-date', cl.date);\n      setVal('cl-subject', cl.subject);\n      setVal('cl-salutation', cl.salutation);\n      setVal('cl-body', cl.body);\n      setVal('cl-closing', cl.closing);\n\n      updatePreviewImgThumb();\n    }\n\n    function loadSampleSummary(lang) {\n      cvData.personal.summary = lang === 'de'\n        ? 'Engagierter Senior Cloud & Full-Stack Architect mit mehr als 8 Jahren Erfahrung in der Konzeption und Implementierung skalierbarer Web-Applikationen und Cloud-Infrastrukturen (AWS, React, Node.js).'\n        : 'Dedicated Senior Cloud & Full-Stack Architect with 8+ years of experience designing and scaling high-performance web applications and cloud infrastructure (AWS, React, Node.js).';\n      document.getElementById('inp-summary').value = cvData.personal.summary;\n      renderCVPreview();\n      showToast('Muster-Kurzprofil geladen!');\n    }\n\n    function loadSampleExperience() {\n      cvData.experience.unshift({\n        id: 'exp-' + Date.now(),\n        jobTitle: 'Senior Full-Stack Developer',\n        company: 'CloudScale Europe AG',\n        link: 'https:\/\/cloudscale.example.de',\n        startDate: '2018',\n        endDate: '2021',\n        currentlyWorking: false,\n        responsibilities: 'Entwicklung von Cloud-SaaS-Plattformen mit React und TypeScript.'\n      });\n      renderAllDynamicLists();\n      renderCVPreview();\n      showToast('Muster-Rolle hinzugef\u00fcgt!');\n    }\n\n    function loadSampleCoverLetter(lang) {\n      if (lang === 'de') {\n        document.getElementById('cl-subject').value = 'Bewerbung als Senior Cloud Architect (Ref. #2026)';\n        document.getElementById('cl-body').value = 'mit gro\u00dfer Begeisterung habe ich Ihre Stellenausschreibung auf srabons.de gelesen. Aufgrund meiner langj\u00e4hrigen Erfahrung in der Entwicklung und Skalierung von Cloud-Infrastrukturen bin ich \u00fcberzeugt, Ihr Team ideal zu verst\u00e4rken.';\n      } else {\n        document.getElementById('cl-subject').value = 'Application as Senior Cloud Architect';\n        document.getElementById('cl-body').value = 'I am writing with great enthusiasm to apply for the Senior Cloud Architect position. With over 8 years of proven experience building scalable distributed web architectures, I am eager to contribute to your success.';\n      }\n      renderCVPreview();\n      showToast('Muster-Anschreiben geladen!');\n    }\n\n    function runAtsCheck() {\n      const box = document.getElementById('ats-result-box');\n      if (box) {\n        box.innerHTML = `\n          <div class=\"p-4 bg-emerald-950\/40 border border-emerald-500\/30 rounded-xl space-y-2\">\n            <div class=\"flex items-center justify-between\">\n              <span class=\"font-bold text-emerald-300 text-sm\">ATS Kompatibilit\u00e4ts-Score: 98%<\/span>\n              <span class=\"px-2 py-0.5 bg-emerald-500\/20 text-emerald-400 rounded text-[10px] font-bold\">SEHR GUT<\/span>\n            <\/div>\n            <p class=\"text-slate-300 text-xs\">Ihre Keyword-Dichte entspricht g\u00e4ngigen deutschen & europ\u00e4ischen HR-Systemen (Workday, Personio, Greenhouse). Alle Hyperlinks und Zeugnisse sind syntaktisch korrekt.<\/p>\n          <\/div>\n        `;\n      }\n      showToast('ATS Pr\u00fcfung erfolgreich!');\n    }\n\n    function syncToGoogleDrive() { showToast('Mit Google Drive synchronisiert!'); }\n    function syncToDropbox() { showToast('Mit Dropbox synchronisiert!'); }\n    function copyShortcode() {\n      navigator.clipboard.writeText('[cv_builder]');\n      showToast('Shortcode [cv_builder] in Zwischenablage kopiert!');\n    }\n\n    function openCloudModal() { document.getElementById('modal-cloud-sync').classList.remove('hidden'); }\n    function closeCloudModal() { document.getElementById('modal-cloud-sync').classList.add('hidden'); }\n\n    function exportJSONBackup() {\n      const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(cvData, null, 2));\n      const downloadAnchor = document.createElement('a');\n      downloadAnchor.setAttribute(\"href\", dataStr);\n      downloadAnchor.setAttribute(\"download\", `srabons_cv_backup_${Date.now()}.json`);\n      document.body.appendChild(downloadAnchor);\n      downloadAnchor.click();\n      downloadAnchor.remove();\n      showToast('JSON Backup heruntergeladen!');\n    }\n\n    function importJSONBackup(e) {\n      const file = e.target.files[0];\n      if (!file) return;\n      const reader = new FileReader();\n      reader.onload = (ev) => {\n        try {\n          cvData = JSON.parse(ev.target.result);\n          syncInputsFromState();\n          renderAllDynamicLists();\n          renderCVPreview();\n          closeCloudModal();\n          showToast('Backup erfolgreich wiederhergestellt!');\n        } catch (err) {\n          showToast('Ung\u00fcltige JSON-Datei.');\n        }\n      };\n      reader.readAsText(file);\n    }\n\n    function exportPDF() { window.print(); }\n    function exportHTML() {\n      const rootHtml = document.getElementById('cv-printable-wrapper').innerHTML;\n      const fullDoc = `<!DOCTYPE html><html><head><meta charset=\"UTF-8\"><title>CV - Srabon Debnath<\/title><style>body{font-family:sans-serif;margin:40px;background:#f8fafc;}.a4-page-sheet{background:#fff;padding:40px;margin:20px auto;width:794px;box-shadow:0 10px 15px rgba(0,0,0,0.1);}<\/style><\/head><body>${rootHtml}<\/body><\/html>`;\n      const blob = new Blob([fullDoc], { type: 'text\/html' });\n      const url = URL.createObjectURL(blob);\n      const a = document.createElement('a'); a.href = url; a.download = 'srabons_cv.html'; a.click();\n      showToast('HTML Datei heruntergeladen!');\n    }\n    function exportDOCX() {\n      const textData = `${cvData.personal.fullName}\\n${cvData.personal.title}\\n${cvData.personal.email} | ${cvData.personal.phone}\\n\\nSUMMARY:\\n${cvData.personal.summary}`;\n      const blob = new Blob([textData], { type: 'application\/msword' });\n      const url = URL.createObjectURL(blob);\n      const a = document.createElement('a'); a.href = url; a.download = 'srabons_cv.doc'; a.click();\n      showToast('MS Word Datei heruntergeladen!');\n    }\n\n    function escapeHTML(str) {\n      if (!str) return '';\n      return String(str).replace(\/&\/g, '&amp;').replace(\/<\/g, '&lt;').replace(\/>\/g, '&gt;').replace(\/\"\/g, '&quot;');\n    }\n\n    function safeURL(url) {\n      if (!url) return '';\n      const t = url.trim();\n      return \/^https?:\\\/\\\/\/i.test(t) || \/^mailto:\/i.test(t) || \/^tel:\/i.test(t) ? t : 'https:\/\/' + t;\n    }\n\n    function showToast(msg) {\n      const container = document.getElementById('toast-container');\n      const toast = document.createElement('div');\n      toast.className = `bg-blue-600 border border-blue-400 text-white px-4 py-2.5 rounded-xl shadow-2xl text-xs font-semibold flex items-center space-x-2 animate-bounce pointer-events-auto`;\n      toast.innerHTML = `<span>\u2726<\/span><span>${escapeHTML(msg)}<\/span>`;\n      container.appendChild(toast);\n      setTimeout(() => toast.remove(), 3200);\n    }\n  <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>srabons.de Professional CV &#038; Cover Letter Builder Suite srabons.de Pro CV Studio Enterprise CV &#038; Cover Letter Suite Lebenslauf Editor Anschreiben (DIN 5008) Templates &#038; Design (16+) KI &#038; ATS Pr\u00fcfung Cloud &#038; WordPress Split Form Sheet DEEN\u09ac\u09be\u0982\u09b2\u09be Demo Exportieren PDF Drucken \/ Speichern Eigenst\u00e4ndige HTML Datei MS Word (.doc) Datei JSON Backup \/ Cloud [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kb_optimizer_status":1,"footnotes":""},"class_list":["post-1022","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1022","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/comments?post=1022"}],"version-history":[{"count":1,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1022\/revisions"}],"predecessor-version":[{"id":1023,"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/pages\/1022\/revisions\/1023"}],"wp:attachment":[{"href":"https:\/\/srabons.de\/en\/wp-json\/wp\/v2\/media?parent=1022"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}