*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:#f3f5f8;color:#172033;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;display:flex;flex-direction:column;min-height:100vh}
.topbar{padding:clamp(10px,2vw,16px) clamp(16px,4vw,32px);padding-left:clamp(70px,7vw,92px);position:relative;background:#101827;color:#fff;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;box-shadow:0 6px 20px rgba(16,24,39,.18);flex-shrink:0}
.eyebrow{font-size:12px;letter-spacing:.24em;color:#7dd3fc;font-weight:800}
.topbar h1{margin:2px 0 0;font-size:clamp(18px,2.6vw,24px)}
/* Digital-Twin-Unterzeile (Variante 2): ruhig/edel unter dem Titel. */
.topbar .brand-sub{margin:3px 0 0;font-size:clamp(12px,1.5vw,14px);font-weight:500;color:#8fa4bd;letter-spacing:.01em}
/* Blauer Marken-Block links: durchgehend ueber die volle Hoehe, buendig am linken Rand (wie Mockup
   Variante 2). Etwas heller/blauer als der Balken -> liest sich als eigener Block. Spaeter kommt hier
   das Logo hinein. */
.brand-rail{position:absolute;left:0;top:0;bottom:0;width:clamp(44px,4.6vw,60px);background:#1e3a5f;border-right:1px solid #2b4a72}
.version{border:1px solid rgba(255,255,255,.18);padding:8px 12px;border-radius:999px;font-size:12px;color:#d7e4f4;white-space:nowrap;text-decoration:none;display:inline-block;cursor:pointer;transition:background .12s ease,border-color .12s ease}
.version:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.35);color:#fff}
main{padding:clamp(10px,2vw,18px);max-width:1900px;margin:auto;width:100%;flex:1;display:flex;flex-direction:column;gap:14px;min-height:0}
.upload-panel,.workspace-bar,.viewer-card,.panel,.stats{background:#fff;border:1px solid #dfe5ee;border-radius:14px;box-shadow:0 5px 16px rgba(26,39,64,.06)}
.upload-panel,.workspace-bar,.stats,.bottom-grid{flex-shrink:0}
.upload-panel{padding:clamp(12px,1.6vw,18px);display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center}
.upload-panel h2,.panel h2{margin:0 0 6px}
.upload-panel p{margin:0;color:#667085}
form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
input[type=file]{max-width:460px;width:100%;border:1px dashed #b8c2d1;padding:10px;border-radius:9px;background:#f8fafc}
button{border:0;border-radius:9px;padding:12px 17px;background:#0888e1;color:#fff;font-weight:750;cursor:pointer}
button:hover{filter:brightness(.96)}
/* SEKUNDÄR-Baustein – überall gleich: weiss, neutraler Rahmen, dunkle Schrift. */
button.secondary{background:#fff;color:#263248;border:1px solid #c6ccd6}
button.secondary:hover{background:#f4f7fb;border-color:#9aa6b6;filter:none}
/* Readme-Button hervorheben: rot mit schwarzem Text. */
/* Benutzeranleitung: kein Rot mehr – Traniva-Blau; Aufmerksamkeits-Puls bis zum ersten Klick. */
/* Benutzeranleitung = Sekundär (weiss/Rahmen, „überall gleich"); Anmeldung trägt die Primär-Logik (blau, wenn angemeldet). */
#help-btn{background:#fff;color:#263248;border:1px solid #c6ccd6;font-weight:700}
#help-btn:hover{background:#f4f7fb;border-color:#9aa6b6}
#help-btn:not(.seen){animation:taomAttnPulse 2.4s ease-in-out infinite}
/* Einstellungen: Aufmerksamkeits-Puls bis zum ersten Klick (wird sonst leicht uebersehen). */
#settings-toggle:not(.seen){animation:taomAttnPulse 2.4s ease-in-out infinite}
@keyframes taomAttnPulse{0%,100%{box-shadow:0 0 0 0 rgba(8,136,225,0)}50%{box-shadow:0 0 0 4px rgba(8,136,225,.55)}}
.status{grid-column:1/-1;padding:10px 12px;border-radius:8px;background:#eef7ff;color:#245b84;font-size:14px}
.status.error{background:#fff0f0;color:#9a2d2d}
.status.success{background:#ecfdf3;color:#18794e}
.workspace-bar{padding:12px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.workspace-bar span{display:block;color:#7a8495;font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.workspace-bar strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;word-break:break-all}
.toolbar{display:flex;flex-wrap:wrap;gap:8px}
.stats{padding:10px 16px;display:flex;flex-wrap:wrap;gap:12px 24px;color:#667085;font-size:14px}
.stats strong{color:#172033}
/* KPI-Kacheln (aufgebohrter Ergebnis-Balken) */
.stats.kpis{gap:10px;padding:8px 12px;align-items:stretch}
.stats.kpis .kpi{display:flex;flex-direction:column;justify-content:center;background:#f8fafc;border:1px solid #e6ebf1;border-radius:10px;padding:6px 14px;min-width:82px}
.stats.kpis .kpi b{font-size:19px;line-height:1.05;color:#1f2733;font-weight:800}
.stats.kpis .kpi i{font-size:10.5px;color:#64748b;font-style:normal;margin-top:3px;letter-spacing:.01em}
.stats.kpis .kpi.big{background:#eef6ff;border-color:#bcdcfa}
.stats.kpis .kpi.big b{color:#0a6fc0}
.viewer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px;flex:1;min-height:460px}
.viewer-card{overflow:hidden;display:flex;flex-direction:column;min-height:0}
.card-title{padding:10px 16px;border-bottom:1px solid #e6eaf0;display:flex;gap:10px;align-items:center;flex-shrink:0}
.card-title-main{display:flex;flex:1;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between;min-width:0}
.card-title span{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:#7c8798}
.card-title h2{margin:2px 0 0;font-size:18px}
/* Prozess-Überschrift (fett) in der KPI-Leiste – rechts, damit man auf einen Blick sieht,
   an welchem Prozess man arbeitet. Leer -> ausgeblendet. */
/* Prozessmodell-Name mittig in der Leiste (nimmt den Restplatz nach den Kacheln und zentriert darin). */
.stats.kpis .kpi-proc-title{flex:1 1 auto;min-width:0;align-self:center;text-align:center;font-weight:800;font-size:15px;letter-spacing:.01em;color:#0a2540;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 18px}
.stats.kpis .kpi-proc-title:empty{display:none}
.stats.kpis .kpi-proc-title:empty{display:none}
.stats.kpis .kpi-proc-title::before{content:"▦";color:#1769aa;font-weight:900;margin-right:8px;font-size:13px;vertical-align:1px}
.zoom-controls{display:flex;align-items:center;gap:6px}
.zctl{padding:6px 10px;font-size:13px;border-radius:7px;background:#edf2f7;color:#263248;font-weight:800;line-height:1}
.zoom-level{min-width:44px;text-align:center;font-size:12px;color:#4b5768;font-weight:700}
.link-group{display:flex;gap:8px;flex-wrap:wrap}
.link-btn{color:#263248;font-weight:600;text-decoration:none;background:#fff;border:1px solid #c6ccd6;border-radius:8px;padding:7px 12px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.link-btn:hover{background:#f4f7fb;border-color:#9aa6b6}
.editor-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 16px;border-bottom:1px solid #e6eaf0;background:#fbfcfe;flex-shrink:0}
.editor-toolbar.disabled{opacity:.45;pointer-events:none}
.tool-btn{padding:8px 12px;font-size:13px;border-radius:8px;font-weight:700}
.tool-btn[data-add]{background:#eaf3fb;color:#1769aa}
.tool-btn.primary{background:#0888e1;color:#fff}
.tool-btn.secondary{background:#edf2f7;color:#263248}
.tool-hint{font-size:12px;color:#8b95a7;margin-left:4px}
.editor-body{position:relative;flex:1;min-height:0;overflow:hidden}
.canvas{min-height:280px;position:relative;overflow:hidden;background:#fff}
.editor-body .canvas{position:absolute;inset:0;width:100%;height:100%}
.canvas.editable{cursor:grab}
.canvas.editable.panning{cursor:grabbing}
#original-canvas{cursor:grab}
.canvas.panning{cursor:grabbing}
.connect-anchor.anchor-hot{filter:drop-shadow(0 0 3px rgba(249,115,22,.9))}
.taom-edge.edge-reconnecting{opacity:.3}
.attr-inline-btn{width:100%;background:#eef2f8;color:#233; border:1px solid #cfe0f1;border-radius:8px;padding:8px 10px;font-size:12.5px;font-weight:650;cursor:pointer}
.attr-inline-btn:hover{background:#e2e9f3}
.empty-message{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#8b95a7;background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 12px,#f7f9fb 12px,#f7f9fb 24px)}
.process-svg{width:100%;height:100%;display:block;transform-origin:0 0;overflow:visible}
.svg-label{width:100%;height:100%;display:flex;align-items:center;justify-content:center;text-align:center;font:12px/1.25 Inter,Arial,sans-serif;overflow:hidden;padding:2px;overflow-wrap:anywhere;word-break:break-word;hyphens:auto}
.vertical-label{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:650}
.taom-shape:hover>*{filter:drop-shadow(0 2px 4px rgba(15,23,42,.25))}
.taom-shape,.taom-edge{cursor:pointer}
.lane-grip{cursor:move;fill:transparent!important;stroke:none!important}
/* Selektion: KEIN Umfaerben der Shape-Inhalte mehr (Badges/Beschriftung bleiben lesbar).
   Stattdessen ein dezenter blauer Ring (sel-halo) AUSSERHALB des Shapes, per JS gezeichnet. */
.taom-edge.selected polyline,.taom-edge.selected path{stroke:#2563eb;stroke-width:2.4}
.sel-halo{fill:none;stroke:#2563eb;stroke-width:1.8;pointer-events:none;filter:drop-shadow(0 0 2px rgba(37,99,235,.55))}
.sel-halo.multi{stroke-width:1.4;opacity:.75;filter:none}
.taom-shape.drop-target>*{stroke:#18794e;stroke-width:4}
.connect-anchor{cursor:crosshair}
.edge-handle{cursor:pointer}
.connect-drag-line{pointer-events:none}
.inline-edit{position:fixed;z-index:80;border:2px solid #1769aa;border-radius:6px;padding:3px 7px;font:12px/1.25 Inter,Arial,sans-serif;background:#fff;box-shadow:0 6px 16px rgba(16,24,39,.2)}
.dock-panel{position:absolute;top:0;bottom:0;z-index:20;padding:14px;overflow:auto;background:#fbfcfe;transition:width .15s ease;box-shadow:0 0 26px rgba(16,24,39,.18)}
.dock-panel.dock-left{left:0;border-right:1px solid #e6eaf0;width:230px}
.dock-panel.dock-right{right:0;border-left:1px solid #e6eaf0;width:280px}
.dock-panel.disabled{opacity:.5;pointer-events:none}
.dock-panel.collapsed{width:44px;padding:14px 8px;overflow:hidden}
.dock-header{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #e6eaf0}
.dock-panel.collapsed .dock-header{flex-direction:column;gap:10px;border-bottom:0}
.dock-title{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#7c8798;white-space:nowrap}
.dock-panel.collapsed .dock-title{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;margin:0}
.dock-toggle{background:#0888e1;color:#fff;border-radius:7px;padding:5px 9px;font-weight:800;line-height:1;flex-shrink:0;font-size:12px;box-shadow:0 1px 3px rgba(8,136,225,.35)}
.dock-toggle:hover{background:#0a76c4}
.dock-panel.collapsed .dock-body{display:none}
.palette-filter{display:flex;flex-wrap:wrap;gap:4px;padding:4px 2px 10px;position:sticky;top:0;background:#fff;z-index:2}
.palette-filter-chip{border:1px solid #d5dbe3;background:#f2f5f9;color:#3a4759;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;cursor:pointer}
.palette-filter-chip.active{background:#0888e1;color:#fff;border-color:#0888e1}
.palette-category{margin-bottom:16px}
.palette-category h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#98a2b3}
.palette-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.palette-item{display:flex;flex-direction:column;align-items:center;gap:5px;padding:8px 4px;border:1px solid #e1e7ef;border-radius:9px;background:#fff;cursor:pointer;font-size:10.5px;line-height:1.15;text-align:center;color:#344054}
.palette-item:hover{background:#f0f7ff;border-color:#b8d4ef}
.palette-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;position:relative}
.palette-icon-svg{width:100%;height:100%;overflow:visible}
/* TAOM-Besonderheit (z. B. Phase): hervorgehobenes Item + Badge. */
.palette-item-taom{border-color:#c7d2fe;background:linear-gradient(180deg,#f5f7ff,#eef2ff)}
.palette-item-taom:hover{background:#e8edff;border-color:#a5b4fc}
.palette-item-taom .palette-label{color:#4338ca;font-weight:700}
.palette-taom-badge{position:absolute;top:-4px;right:-6px;background:#4338ca;color:#fff;font:800 7px/1 Inter,Arial,sans-serif;letter-spacing:.04em;padding:2px 4px;border-radius:5px;box-shadow:0 1px 3px rgba(40,30,120,.3)}
#editor-align-phases.locked-lite{opacity:.7}
#editor-align-phases.locked-lite::after{content:'🔒';margin-left:5px;font-size:11px}
.attr-empty{color:#8b95a7;font-size:13px}
.attr-section{margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid #eef1f5}
.attr-section:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.attr-section-title{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#98a2b3;margin:0 0 10px}
.meta-lang-switch{display:inline-flex;gap:0;margin:0 0 10px;border:1px solid #d6deea;border-radius:7px;overflow:hidden}
.meta-lang-btn{background:#fff;color:#5b6675;border:0;padding:4px 12px;font-weight:700;font-size:12px;cursor:pointer;line-height:1.4}
.meta-lang-btn+.meta-lang-btn{border-left:1px solid #d6deea}
.meta-lang-btn.active{background:#0888e1;color:#fff}
.attr-hint{color:#8b95a7;font-size:11px;line-height:1.4;margin:8px 0 0}
.attr-section-title .pi-jira-epic{float:right;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#5243aa;background:#f4f0fb;border:1px solid #e6ddf7;border-radius:8px;padding:2px 8px}
.attr-section-title .pi-jira-epic img{display:block}
.attr-lastedit{color:#8b95a7;font-size:11px;line-height:1.4;margin:8px 0 0}
.attr-lastedit:empty{display:none;margin:0}
.attr-lastedit strong{color:#475569}
/* Änderungsverwaltung-Popup */
.taom-cl-modal{width:min(640px,94vw);max-height:82vh;display:flex;flex-direction:column}
.taom-cl-body{margin-top:10px;overflow:auto}
.taom-cl-audit{font-size:12.5px;color:#334155;background:#f3f6fb;border:1px solid #e2e9f3;border-radius:8px;padding:8px 12px;margin:0 0 10px}
.taom-cl-row{display:flex;gap:12px;justify-content:space-between;align-items:baseline;padding:6px 2px;border-bottom:1px solid #f0f3f8;font-size:12.5px}
.taom-cl-row .clr-main{color:#1f2733}
.taom-cl-row .clr-at{color:#8b95a7;white-space:nowrap;font-size:11.5px}
.taom-cl-row.unsaved{background:#fffbea}
.taom-cl-sep{margin:12px 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#b7791f;font-weight:700}
.taom-cl-empty{color:#8b95a7;font-size:13px;padding:8px 2px}
.taom-cl-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 8px}
.taom-cl-filters .cl-f{font:inherit;font-size:12.5px;padding:6px 8px;border:1px solid #d3dae3;border-radius:8px;background:#fff}
.taom-cl-filters .cl-q{flex:1 1 200px;min-width:150px}
.taom-cl-filters .cl-date{font-size:12px;color:#50575e;display:inline-flex;align-items:center;gap:4px}
.taom-cl-filters .cl-date input{font:inherit;font-size:12px;padding:5px 6px;border:1px solid #d3dae3;border-radius:8px}
.taom-cl-filters .cl-reset{font:inherit;font-size:12px;padding:6px 10px;border:1px solid #d3dae3;border-radius:8px;background:#f7f9fc;cursor:pointer}
.taom-cl-filters .cl-reset:hover{background:#eef4fb}
.taom-cl-summary{font-size:12px;color:#6b7787;margin:0 0 8px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.taom-cl-summary .cl-nav{display:inline-flex;align-items:center;gap:4px;margin-left:auto}
.taom-cl-summary .cl-nav button{border:1px solid #cfe0f2;background:#eef6ff;color:#0a6fc0;border-radius:6px;width:24px;height:24px;cursor:pointer;font-size:14px;line-height:1}
.taom-cl-summary .cl-nav button:hover{background:#dcecfb}
.taom-cl-row.cl-current{background:#eef6ff;outline:2px solid #bcdcfa;border-radius:6px}
.taom-cl-body mark{background:#fff3b0;color:inherit;border-radius:2px;padding:0 1px}
.taom-cl-row .clr-tag{font-size:10px;background:#fef3c7;color:#92600a;border:1px solid #fde68a;border-radius:5px;padding:0 5px;margin-left:6px;text-transform:uppercase;letter-spacing:.03em}
.attr-export label.attr-row-inline{margin:0}
/* Blueprint-Button (JIRA/Confluence) in der Prozess-Info: fuer alle sichtbar, ohne Lizenz gesperrt. */
.attr-blueprint-wrap{margin-top:14px}
/* Auffaelliges Badge ueber dem Button: "Digital Twin - TAOM TRANIVA Methode". */
.attr-blueprint-badge{display:flex;align-items:center;gap:8px;justify-content:center;margin-bottom:8px;padding:6px 12px;border-radius:999px;font-weight:800;font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:#fff;background:linear-gradient(90deg,#f59e0b,#0788e2,#0a6fc0);background-size:200% 100%;animation:taomBadgeShift 4s ease-in-out infinite;box-shadow:0 2px 8px rgba(7,136,226,.28)}
.attr-blueprint-badge .abb-dot{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.8);animation:taomBadgePulse 1.6s ease-out infinite}
@keyframes taomBadgeShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes taomBadgePulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 7px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.attr-blueprint-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:9px;padding:11px 14px;font:inherit;font-weight:700;font-size:12.5px;cursor:pointer;background:#0888e1;color:#fff;box-shadow:0 1px 3px rgba(8,136,225,.28)}
.attr-blueprint-btn:hover{background:#0a76c4}
.attr-blueprint-btn .abx-ic{font-size:15px;line-height:1}
.attr-blueprint-btn.locked{background:#eef1f5;color:#98a2b3;box-shadow:none;cursor:not-allowed;border:1px solid #e2e7ee}
.attr-blueprint-btn.locked:hover{background:#eef1f5}
.attr-blueprint-btn .abx-lock{font-size:12px;line-height:1;opacity:.85}
/* Anklickbare Phasen-Baender im Editor: Hover-Feedback + Cursor. */
.taom-phase-bands--interactive .taom-phase-band-hit{transition:fill-opacity .12s ease}
.taom-phase-bands--interactive .taom-phase-band-hit:hover{fill-opacity:.24!important;stroke-opacity:.75!important}
/* Phasen-Editor-Overlay. */
.taom-phase-modal-ov{position:fixed;inset:0;background:rgba(15,23,42,.42);display:flex;align-items:center;justify-content:center;z-index:11000;padding:20px}
.taom-phase-modal{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(2,20,50,.35);width:min(680px,94vw);max-height:90vh;overflow:auto;padding:18px 20px}
.taom-phase-modal .tpm-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;font-size:15px;color:#0f2942}
.taom-phase-modal .tpm-id{background:#eef4fb;color:#0a6fc0;font-weight:800;font-size:12px;padding:3px 9px;border-radius:999px}
.taom-phase-modal .tpm-x{margin-left:auto;border:0;background:transparent;font-size:18px;line-height:1;color:#8b95a7;cursor:pointer;padding:2px 6px;border-radius:6px}
.taom-phase-modal .tpm-x:hover{background:#f1f4f9;color:#334}
.taom-phase-modal .tpm-row{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:650;color:#4b5768;margin-bottom:14px}
.taom-phase-modal .tpm-name{padding:9px 11px;border:1px solid #d3dae3;border-radius:9px;font:inherit;font-size:14px;font-weight:600}
.taom-phase-modal .tpm-desc{padding:10px 12px;border:1px solid #d3dae3;border-radius:9px;font:inherit;font-size:13px;line-height:1.5;resize:vertical;min-height:180px}
.taom-phase-modal .tpm-name[readonly],.taom-phase-modal .tpm-desc[readonly]{background:#f7f9fc;color:#475}
.taom-phase-modal .tpm-meta{font-size:12px;color:#6b7789;margin:0 0 8px}
.taom-phase-modal .tpm-hint{font-size:12px;color:#9a6a00;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:8px 10px;margin:0 0 10px}
.taom-phase-modal .tpm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.taom-phase-modal .tpm-save{border:0;background:#0888e1;color:#fff;font-weight:700;padding:10px 20px;border-radius:9px;font:inherit;cursor:pointer}
.taom-phase-modal .tpm-save:hover{background:#0a76c4}
.taom-phase-modal .tpm-close{border:1px solid #d3dae3;background:#fff;color:#475;font-weight:600;padding:10px 18px;border-radius:9px;font:inherit;cursor:pointer}
.taom-phase-modal .tpm-close:hover{background:#f1f5fb}
/* TAOM/Traniva-Branding in Popup & Attribut-Fenster. */
.tpm-brand{display:inline-flex;align-items:center;gap:6px;font-weight:800;font-size:11px;letter-spacing:.03em;text-transform:uppercase;color:#0a6fc0;background:#eef4fb;padding:3px 9px;border-radius:999px}
.tpm-brand-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#0788e2)}
/* Phasen-Attribut-Fenster (Einfachklick) im rechten Panel. */
.taom-phase-attr .tpa-id{display:inline-block;background:#eef4fb;color:#0a6fc0;font-weight:800;font-size:12px;padding:3px 9px;border-radius:999px;margin-bottom:10px}
.taom-phase-attr input[type="text"]{padding:8px 10px;border:1px solid #d3dae3;border-radius:8px;font:inherit;font-size:13px;font-weight:600}
.taom-phase-attr .tpa-swatches{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.taom-phase-attr .tpa-sw{width:24px;height:24px;border-radius:6px;border:2px solid #fff;box-shadow:0 0 0 1px #d3dae3;cursor:pointer;padding:0;font-size:11px;font-weight:800;color:#475;line-height:1}
.taom-phase-attr .tpa-sw.sel{box-shadow:0 0 0 2px #0a6fc0}
.taom-phase-attr .tpa-reset{background:#f1f4f9}
.taom-phase-attr .tpa-lockrow{flex-direction:row;align-items:center;gap:8px}
.taom-phase-attr .tpa-order{display:flex;gap:8px;margin-top:4px}
.taom-phase-attr .tpa-order button{flex:1;border:1px solid #d3dae3;background:#fff;color:#475;font:inherit;font-size:12px;font-weight:600;padding:8px 6px;border-radius:8px;cursor:pointer}
.taom-phase-attr .tpa-order button:hover:not(:disabled){background:#f1f5fb}
.taom-phase-attr .tpa-editbtn{width:100%;margin-top:10px;border:0;background:#0888e1;color:#fff;font:inherit;font-weight:700;font-size:12.5px;padding:10px 14px;border-radius:9px;cursor:pointer}
.taom-phase-attr .tpa-editbtn:hover{background:#0a76c4}
.taom-phase-attr button:disabled{opacity:.5;cursor:not-allowed}
/* Herkunftssiegel-Anzeige in der Prozess-Info */
.fp-row{display:flex;gap:10px;padding:3px 0;font-size:12px;align-items:baseline}
.fp-row span{min-width:92px;color:#8b95a7;flex-shrink:0}
.fp-row strong{color:#344054;font-weight:600;word-break:break-word}
.fp-ai-icon{margin:4px 0 2px}
.fp-ai-icon svg{height:20px;width:auto;display:block}
.fp-history{margin:8px 0 0;border-top:1px dashed #e6eaf0;padding-top:8px}
.fp-hist-title{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:#98a2b3;margin:0 0 4px}
.fp-hist-row{display:flex;justify-content:space-between;gap:8px;font-size:11px;padding:2px 0}
.fp-hist-row span{color:#344054;font-weight:600}
.fp-hist-row em{color:#8b95a7;font-style:normal;flex-shrink:0}
/* Rechtsklick-Kontextmenü */
.ctx-menu{position:fixed;z-index:99999;min-width:200px;background:#fff;border:1px solid #d6deea;border-radius:8px;box-shadow:0 8px 28px rgba(16,24,40,.18);padding:5px;font:13px/1.3 Inter,ui-sans-serif,system-ui,sans-serif;color:#1f2733;user-select:none}
.ctx-menu.hidden{display:none}
.ctx-item{position:relative;padding:7px 12px;border-radius:6px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:8px}
.ctx-item:hover{background:#eef4fb}
.ctx-item.danger{color:#b02525}
.ctx-item.danger:hover{background:#fdecec}
.ctx-sep{height:1px;background:#eef1f5;margin:4px 6px}
.ctx-has-sub::after{content:"›";margin-left:auto;color:#98a2b3;font-size:15px;line-height:1}
.ctx-sub{position:absolute;left:100%;top:-5px;margin-left:2px;min-width:190px;background:#fff;border:1px solid #d6deea;border-radius:8px;box-shadow:0 8px 28px rgba(16,24,40,.18);padding:5px;display:none}
.ctx-has-sub:hover>.ctx-sub{display:block}
.attr-row{display:flex;flex-direction:column;gap:5px;font-size:12px;color:#4b5768;font-weight:650;margin-bottom:12px}
.attr-row:last-child{margin-bottom:0}
.attr-row-inline{flex-direction:row;align-items:center;gap:8px}
.attr-row-inline input[type=checkbox]{width:16px;height:16px}
.attr-row input[type=text],.attr-row input[type=number],.attr-row select,.attr-row textarea{border:1px solid #d8dfe9;border-radius:7px;padding:8px 9px;font:13px/1.3 Inter,Arial,sans-serif;background:#fff;resize:vertical}
.attr-row input:read-only{background:#f0f2f5;color:#7a8495;cursor:default}
.attr-row textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}
.attr-row input[type=color]{width:100%;height:34px;border:1px solid #d8dfe9;border-radius:7px;padding:2px;background:#fff}
.bottom-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.panel{padding:16px;min-height:180px}
.workspace-list{display:grid;gap:8px;margin-top:12px}
.workspace-item{width:100%;text-align:left;padding:10px 12px;border:1px solid #e1e7ef;border-radius:9px;background:#fff;color:#172033;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px}
.workspace-item:hover{background:#f6f9fc}
.workspace-item strong{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;word-break:break-all}
.workspace-item small{color:#778196}
pre{margin:12px 0 0;background:#111827;color:#d6e1f1;padding:14px;border-radius:10px;min-height:120px;white-space:pre-wrap;overflow:auto}
.hidden{display:none}
@media(max-width:1100px){
  .upload-panel{grid-template-columns:1fr}
  form{align-items:stretch;flex-direction:column}
  .workspace-bar{align-items:flex-start;flex-direction:column}
  .viewer-grid{min-height:0}
}
@media(max-width:900px){
  .dock-panel.dock-left,.dock-panel.dock-right{width:82vw;max-width:300px}
  .dock-panel.collapsed{width:44px}
}
@media(max-width:640px){
  .topbar{flex-direction:column;align-items:flex-start}
  .card-title{flex-direction:column;align-items:flex-start}
  .canvas{min-height:360px}
  .tool-hint{width:100%;order:99}
}

/* ---------- Original-Card einklappbar ---------- */
.viewer-grid.original-collapsed{grid-template-columns:56px 1fr}
#original-card.collapsed-card .card-title-main,
#original-card.collapsed-card #original-canvas{display:none}
#original-card.collapsed-card{min-width:0}
.collapsed-label{display:none}
#original-card.collapsed-card .card-title{flex-direction:column;gap:10px;align-items:center}
#original-card.collapsed-card .collapsed-label{display:block;writing-mode:vertical-rl;transform:rotate(180deg);font-size:11px;color:#7c8798;text-transform:uppercase;letter-spacing:.06em}

/* ---------- Verlauf/Protokoll einklappbar ---------- */
.bottom-grid.hidden{display:none}

/* ---------- Einstellungen-Popover ---------- */
.settings-wrap{position:relative}
.settings-panel{position:absolute;top:calc(100% + 8px);right:0;width:250px;background:#fff;border:1px solid #dfe5ee;border-radius:12px;box-shadow:0 12px 32px rgba(16,24,39,.18);padding:14px;z-index:60}
.settings-panel input[type=range]{width:100%}
#set-zoomspeed-val{font-size:11px;color:#7a8495}

/* ---------- Undo/Redo Buttons ---------- */
.tool-btn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- Settings: Login-Gate ---------- */
.settings-hint{font-size:11px;color:#8b95a7;margin:0 0 10px;line-height:1.4}
.settings-error{margin-top:8px;padding:8px 10px;border-radius:8px;background:#fff0f0;color:#9a2d2d;font-size:12px}

/* ---------- Learning Extraction Status ---------- */
.learning-status{font-size:11px;color:#8b95a7;margin-top:2px;min-height:14px}

/* ---------- Eckpunkt-Handles, Lösch-Badge, Quick-Add-Popup ---------- */
.corner-handle{cursor:move}
.delete-badge{cursor:pointer}
.delete-badge circle{transition:fill-opacity .1s ease}
.delete-badge:hover circle{fill-opacity:1}
.quick-add-popup{position:fixed;z-index:90;background:#fff;border:1px solid #dfe5ee;border-radius:12px;box-shadow:0 14px 34px rgba(16,24,39,.22);padding:10px;max-width:250px}
.quick-add-linetype{display:flex;gap:6px;margin-bottom:8px;padding-bottom:8px;border-bottom:1px solid #eef1f5}
.linetype-btn{flex:1;padding:6px;border-radius:7px;background:#f3f5f8;display:flex;align-items:center;justify-content:center}
.linetype-btn.active{background:#e0630f;box-shadow:inset 0 0 0 1px #c2540a}
.linetype-btn.active svg line{stroke:#fff !important}
.quick-add-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.quick-add-popup .palette-item{width:72px}

/* ---------- Jira/Confluence-Verknüpfungen ---------- */
.attr-links{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.attr-link{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;color:#1769aa;text-decoration:none;padding:7px 9px;border:1px solid #cfe0f1;border-radius:7px;background:#f0f7ff}
.attr-link:hover{background:#e2f0ff}

/* ---------- Resize-Handles, Sperren/Ausblenden ---------- */
.resize-handle{cursor:nwse-resize}
.resize-handle[data-corner="ne"],.resize-handle[data-corner="sw"]{cursor:nesw-resize}
.settings-row-btns{display:flex;gap:8px;margin-top:4px}
.settings-row-btns .tool-btn{flex:1;padding:8px 6px;font-size:12px}

/* ---------- Markierter Canvas-Punkt & Linientyp-Popup-Label ---------- */
.marked-point{pointer-events:none}
.linetype-popup-label{font-size:12px;font-weight:700;color:#4b5768;margin-bottom:8px;text-align:center}

/* ---------- Danger-Button (Workspace löschen) ---------- */
.tool-btn.danger{background:#fde8e8;color:#9a2d2d}
.tool-btn.danger:hover{background:#fbd5d5}

/* ---------- Topbar rechts (Anleitung + Version) ---------- */
.topbar-right{display:flex;align-items:center;gap:12px}
/* Sprach-Umschalter: gleiche Groesse/Optik wie die uebrigen Topbar-Elemente (vorher zu klein). */
#taom-lang-select{padding:0 34px 0 16px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:15px;font-weight:700;line-height:1;cursor:pointer;height:44px;box-sizing:border-box;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center;transition:background-color .12s ease,border-color .12s ease}
#taom-lang-select:hover{background-color:rgba(255,255,255,.22);border-color:rgba(255,255,255,.45)}
#taom-lang-select:focus{outline:2px solid rgba(7,136,226,.6);outline-offset:1px}
/* Kopf-Bedienelemente einheitlich (auf dunklem Navy): gleiche Höhe + Radius, „Glas"-Sekundär,
   eine klare Primär-CTA (Benutzeranleitung blau). So passt der Kopf zum neuen Button-System. */
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-right button,.topbar-right .version,#taom-lang-select{height:42px;box-sizing:border-box;border-radius:9px}
.topbar-right button{padding:0 15px;display:inline-flex;align-items:center;gap:7px;font-weight:750}
.topbar-right .secondary{background:#fff;color:#263248;border:1px solid #c6ccd6}
.topbar-right .secondary:hover{background:#f4f7fb;border-color:#9aa6b6;filter:none}
/* Kopf-Icons: schlanke SVG-Linien-Icons (keine Emojis) – fügen sich ins Gesamtbild ein. */
.topbar-right .tbi,.link-btn .tbi{width:15px;height:15px;flex:0 0 auto}
.topbar-right .version{padding:0 14px;display:inline-flex;align-items:center;font-size:12.5px}
/* Original-Seite (links): „Export ▾" als Dropdown – gleiche Bausteine wie der Editor-Toolbar rechts. */
#original-export{position:relative}
#original-export .tb-menu{position:absolute;top:calc(100% + 5px);right:0;z-index:60;background:#fff;border:1px solid #d7dbe0;border-radius:10px;box-shadow:0 8px 24px rgba(9,30,66,.18);padding:5px;min-width:200px;display:flex;flex-direction:column;gap:2px}
#original-export .tb-menu.hidden{display:none}
#original-export .tb-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;border-radius:7px;padding:8px 10px;font-size:12.5px;font-weight:600;color:#42526e;cursor:pointer;text-decoration:none}
#original-export .tb-menu-item:hover{background:#eef4ff;color:#0b6bcb}
#original-export .tb-menu-item.hidden{display:none}
#taom-lang-select option{color:#111}
/* Globale Hilfe-Tooltips (Buttons & Objekte). */
.taom-help-tip{position:fixed;z-index:12000;pointer-events:none;background:#0f2942;color:#fff;font:500 12px/1.45 Inter,Arial,sans-serif;padding:8px 11px;border-radius:8px;box-shadow:0 8px 24px rgba(2,20,50,.35);opacity:0;transform:translateY(-2px);transition:opacity .12s ease,transform .12s ease;max-width:320px}
.taom-help-tip.show{opacity:1;transform:translateY(0)}
/* Anmelde-Button in der Topbar + Auth-Popup. */
#taom-auth-btn{height:44px;box-sizing:border-box;display:inline-flex;align-items:center;font-weight:700}
.taom-auth-modal{width:min(440px,94vw)}
.taom-auth-modal .ta-demo-btn{border:1px solid #cfe0f1;background:#f0f7ff;color:#0a6fc0;font:inherit;font-weight:700;padding:10px 14px;border-radius:9px;cursor:pointer}
.taom-auth-modal .ta-demo-btn:hover{background:#e3f0fd}
.taom-auth-modal .ta-link-btn{width:100%;margin-top:6px;border:0;background:transparent;color:#0a6fc0;font:inherit;font-weight:700;cursor:pointer;padding:8px;text-align:center}
.taom-auth-modal .ta-link-btn:hover{text-decoration:underline}
.taom-auth-modal .ta-chk{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:#3a4658;font-weight:600;line-height:1.35;cursor:pointer}
.taom-auth-modal .ta-chk input{margin-top:2px}
.taom-auth-modal #ta-reg,.taom-auth-modal #ta-contact{border-top:1px solid #eef1f5;margin-top:8px;padding-top:10px}
.taom-auth-modal select,.taom-auth-modal textarea{padding:8px 10px;border:1px solid #d3dae3;border-radius:8px;font:inherit;font-size:13px}

/* ---------- Anleitungs-Modal ---------- */
.help-modal{position:fixed;inset:0;z-index:200;background:rgba(16,24,39,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.help-modal.hidden{display:none}
.help-modal-inner{background:#fff;border-radius:16px;max-width:900px;width:100%;max-height:88vh;display:flex;flex-direction:column;box-shadow:0 30px 70px rgba(16,24,39,.35)}
.help-modal-header{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid #e6eaf0;flex-shrink:0}
.help-modal-header h2{margin:0;font-size:19px}
.help-modal-body{padding:20px 22px 28px;overflow:auto}
.help-modal-body .lm-lic{display:inline-block;background:#fff7ed;color:#9a6a00;border:1px solid #fed7aa;border-radius:6px;padding:0 6px;font-size:11px;font-weight:700;vertical-align:middle;white-space:nowrap}
.help-modal-body h3{margin:22px 0 8px;font-size:15px;color:#172033}
.help-modal-body h3:first-of-type{margin-top:10px}
.help-modal-body p{margin:0 0 10px;color:#344054;line-height:1.55;font-size:14px}
.help-modal-body ul{margin:0 0 12px;padding-left:20px;color:#344054;line-height:1.55;font-size:14px}
.help-modal-body li{margin-bottom:4px}
.help-modal-body code{background:#f0f2f5;border-radius:4px;padding:1px 5px;font-size:12.5px}
.help-note{background:#eef7ff;border:1px solid #cfe0f1;border-radius:9px;padding:10px 12px;font-size:13px;color:#245b84}

/* ---------- Schematische Layout-Karte in der Anleitung ---------- */
.help-layout-map{border:1px solid #dfe5ee;border-radius:12px;overflow:hidden;margin:14px 0 20px;font-size:12px}
.lm-row{padding:8px 12px;border-bottom:1px solid #e6eaf0;background:#f8fafc;color:#344054}
.lm-topbar{background:#101827;color:#fff}
.lm-split{display:flex;gap:0;border-bottom:1px solid #e6eaf0}
.lm-original{width:26%;padding:10px;background:#fff;border-right:1px solid #e6eaf0;color:#344054}
.lm-generated{flex:1;display:flex;flex-direction:column}
.lm-gentitle{padding:6px 10px;background:#fff;border-bottom:1px solid #eef1f5;color:#172033}
.lm-toolbar{padding:6px 10px;background:#fbfcfe;border-bottom:1px solid #eef1f5;color:#4b5768}
.lm-editor-row{display:flex;flex:1}
.lm-palette{width:22%;padding:10px;background:#fbfcfe;border-right:1px solid #eef1f5;color:#4b5768}
.lm-canvas{flex:1;padding:10px;background:repeating-linear-gradient(45deg,#fafbfc,#fafbfc 10px,#f3f5f8 10px,#f3f5f8 20px);color:#4b5768}
.lm-attrs{width:22%;padding:10px;background:#fbfcfe;border-left:1px solid #eef1f5;color:#4b5768}
.lm-bottom{background:#fde8e8;color:#9a2d2d}

/* ---------- Batch-Verarbeitung ---------- */
.hidden-file-input{display:none}
.settings-batch{margin-top:14px;padding-top:14px;border-top:1px solid #eef1f5}
.settings-batch .settings-hint{margin-bottom:8px}

/* ---------- Lizenz-Würdigung ---------- */
.help-modal-footer{margin-top:24px;padding-top:16px;border-top:1px solid #e6eaf0;text-align:center}
.licenses-modal-inner{max-width:640px}
.licenses-table{width:100%;border-collapse:collapse;margin:14px 0;font-size:13px}
.licenses-table th,.licenses-table td{text-align:left;padding:8px 10px;border-bottom:1px solid #eef1f5}
.licenses-table th{color:#7c8798;font-size:11px;text-transform:uppercase;letter-spacing:.05em}

/* ---------- TAOM Agent Prompt-Panel ---------- */
.taom-agent{margin:0 0 14px;border:1px solid #0a6fc0;border-radius:12px;background:#fff;box-shadow:0 2px 6px rgba(7,136,226,.18);overflow:hidden}
/* Zugeklappt: der ganze Balken pulsiert dezent, damit klar ist -> hier klicken, Eingabe oeffnet sich. */
.taom-agent:has(.taom-agent-toggle[aria-expanded="false"]){animation:taomAgentGlow 2.2s ease-in-out infinite}
@keyframes taomAgentGlow{0%,100%{box-shadow:0 2px 6px rgba(7,136,226,.18)}50%{box-shadow:0 0 0 3px rgba(7,136,226,.22),0 6px 18px rgba(7,136,226,.30)}}
/* TAOM-Agent-Balken in Traniva-Blau: faellt bewusst ins Auge (fett, groesser). */
.taom-agent-toggle{position:relative;width:100%;text-align:left;border:0;background:linear-gradient(90deg,#0788e2,#0a6fc0);padding:14px 18px;font:inherit;color:#fff;cursor:pointer;display:flex;align-items:center;gap:12px;overflow:hidden}
.taom-agent-toggle:hover{background:linear-gradient(90deg,#0a93f0,#0876cc)}
/* Wanderndes Licht-Highlight nur solange zugeklappt -> signalisiert Interaktivitaet. */
.taom-agent-toggle[aria-expanded="false"]::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-18deg);animation:taomAgentSheen 2.6s ease-in-out infinite;pointer-events:none}
@keyframes taomAgentSheen{0%{left:-45%}60%,100%{left:120%}}
.taom-agent-caret{display:inline-block;transition:transform .15s ease;color:#fff;font-size:16px;line-height:1}
.taom-agent-toggle[aria-expanded="true"] .taom-agent-caret{transform:rotate(90deg)}
/* Zugeklappt: Pfeil "wippt" leicht nach rechts, zieht den Blick auf das Aufklappen. */
.taom-agent-toggle[aria-expanded="false"] .taom-agent-caret{animation:taomCaretNudge 1.4s ease-in-out infinite}
@keyframes taomCaretNudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.taom-agent-label{display:flex;flex-direction:column;gap:2px}
.taom-agent-title{font-weight:800;font-size:16px;letter-spacing:.2px}
.taom-agent-sub{font-weight:600;font-size:11.5px;opacity:.94;text-transform:uppercase;letter-spacing:.4px}
/* Call-to-Action rechts im Balken: macht klar, dass man klicken kann. */
.taom-agent-cta{margin-left:auto;flex:none;background:#fff;color:#0a6fc0;font-weight:800;font-size:12.5px;padding:6px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 1px 2px rgba(0,0,0,.15);position:relative;z-index:1}
/* Live-Ticker: klassischer Lauftext, füllt DYNAMISCH die volle sichtbare Restbreite des blauen
   Balkens (flex:1) – passt sich responsiv an den Monitor an. Immer EINZEILIG (white-space:nowrap),
   Ränder weich ausgeblendet. Wird nie zweizeilig, auch bei kleiner Auflösung. */
.taom-agent-ticker{margin-left:14px;flex:1 1 auto;min-width:0;max-width:none;background:none;color:#eaf4ff;font-weight:600;font-size:13px;letter-spacing:.1px;padding:0;border-radius:0;box-shadow:none;overflow:hidden;white-space:nowrap;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%)}
.taom-agent-toggle{flex-wrap:nowrap}
.taom-agent-ticker .taom-ticker-track{display:inline-block;white-space:nowrap}
.taom-agent-toggle[aria-expanded="true"] .taom-agent-cta{display:none}
.taom-agent-body{padding:14px 16px;border-top:1px solid #eef1f5}
.taom-agent-intro{margin:0 0 10px;color:#5b6472;font-size:13px;line-height:1.4}
.taom-agent-log{display:flex;flex-direction:column;gap:8px;max-height:280px;overflow:auto;margin-bottom:10px}
.taom-agent-msg{padding:8px 11px;border-radius:10px;font-size:13px;line-height:1.45;white-space:pre-wrap;max-width:92%}
.taom-agent-msg.user{align-self:flex-end;background:#2563eb;color:#fff;border-bottom-right-radius:3px}
.taom-agent-msg.agent{align-self:flex-start;background:#f1f4f9;color:#1f2a37;border-bottom-left-radius:3px}
.taom-agent-msg.system{align-self:center;background:#fff7ed;color:#9a3412;border:1px solid #fed7aa;text-align:center}
.taom-agent-msg a{color:inherit;font-weight:600;text-decoration:underline}
.taom-agent-input{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap}
.taom-agent-recover{display:inline-flex;align-items:center;gap:7px;border:1px solid #c6ccd6;background:#fff;color:#263248;padding:0 14px;height:44px;box-sizing:border-box;border-radius:9px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.taom-agent-recover:hover{background:#f4f7fb;border-color:#9aa6b6}
.taom-agent-recover .tbi{width:15px;height:15px;flex:0 0 auto}
.taom-agent-input textarea{flex:1;resize:vertical;min-height:44px;padding:9px 11px;border:1px solid #d3dae3;border-radius:9px;font:inherit;font-size:13px}
.taom-agent-send{border:0;background:#0888e1;color:#fff;padding:0 20px;height:44px;box-sizing:border-box;border-radius:9px;font:inherit;font-weight:700;cursor:pointer}
.taom-agent-send:hover{background:#0a76c4}
.taom-agent-send:disabled{opacity:.6;cursor:default}
.taom-agent-mic{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid #c6ccd6;background:#fff;color:#263248;padding:0 14px;height:44px;box-sizing:border-box;border-radius:9px;font:inherit;font-weight:600;line-height:1;cursor:pointer}
.taom-agent-mic .mic-glyph{width:15px;height:15px;flex:0 0 auto;display:inline-flex}
.taom-agent-mic .mic-label{font-size:13px}
.taom-agent-mic:hover{background:#f1f5fb}
.taom-agent-mic.listening{background:#dc2626;border-color:#dc2626;color:#fff;animation:taomMicPulse 1.1s ease-in-out infinite}
@keyframes taomMicPulse{0%,100%{box-shadow:0 0 0 0 rgba(220,38,38,.5)}50%{box-shadow:0 0 0 6px rgba(220,38,38,0)}}

/* Prompt-Panel: kompakte Direktantwort + optionaler Verlauf */
.taom-agent-answer{margin-top:10px;display:flex;flex-direction:column}
.taom-agent-answer:empty{display:none}
.taom-agent-histtoggle{display:inline-flex;align-items:center;gap:6px;margin-top:10px;font-size:12px;color:#5b6472;cursor:pointer;user-select:none}
.taom-agent-histtoggle input{margin:0}

/* Antwort in die Prompt-Box integrieren + Verlauf-Sichtbarkeit korrekt (Spezifitaet) */
.taom-agent-box{border:1px solid #d3dae3;border-radius:10px;padding:6px;background:#fff}
.taom-agent-box .taom-agent-input{gap:6px}
.taom-agent-box .taom-agent-input textarea{border:0;background:transparent;min-height:40px}
.taom-agent-box .taom-agent-input textarea:focus{outline:none}
.taom-agent-answer{margin:6px 4px 2px;padding-top:8px;border-top:1px dashed #e6eaf0}
.taom-agent-answer:empty{display:none;margin:0;padding:0;border:0}
.taom-agent-answer .taom-agent-msg{max-width:100%}
.taom-agent-log.hidden{display:none}

/* Prompt-Panel als schwebendes Overlay: veraendert die Seitenhoehe NICHT, Editor bleibt gleich gross */
.taom-agent{position:relative;overflow:visible;z-index:40}
.taom-agent-body{position:absolute;left:0;right:0;top:100%;z-index:60;max-height:min(62vh,540px);overflow:auto;background:#fff;border:1px solid #e6eaf0;border-top:0;border-radius:0 0 12px 12px;box-shadow:0 16px 34px rgba(16,24,40,.20)}
.taom-agent-body .taom-agent-log{max-height:none;overflow:visible}

/* Verschiebbare externe Beschriftung (Editor) */
.svg-label.ext-label{cursor:move;border-radius:4px}
.svg-label.ext-label:hover{background:rgba(7,136,226,.10);outline:1px dashed rgba(7,136,226,.5)}

/* Befund-Karte Process Agent -> Quality Agent: oben rechts (neben den Attributen), offen, mit Schaltern */
.taom-critic-notice{position:fixed;right:16px;top:78px;z-index:60;background:#fff;border:1px solid #e6ebf1;border-left:4px solid #5aa172;border-radius:10px;box-shadow:0 10px 28px rgba(16,40,70,.16);padding:9px 10px 9px 12px;font:12.5px/1.4 Inter,Arial,sans-serif;max-width:340px;animation:tcnIn .18s ease-out}
.taom-critic-notice.fixed{border-left-color:#d98a3d}
@keyframes tcnIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.taom-critic-notice .tcn-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.taom-critic-notice .tcn-badge{font-weight:700;color:#0a6fc0}
.taom-critic-notice .tcn-state{color:#3a4759}
.taom-critic-notice .tcn-collapse{margin-left:auto;border:1px solid #e0e6ee;background:#f3f6fb;color:#5b6a7a;border-radius:6px;width:20px;height:20px;font-size:14px;line-height:1;cursor:pointer;padding:0}
.taom-critic-notice .tcn-close{border:0;background:none;color:#8a97a8;font-size:17px;cursor:pointer;line-height:1;padding:0 2px}
.taom-critic-notice .tcn-list{margin:7px 0 0;padding-left:16px;color:#5b6a7a}
.taom-critic-notice .tcn-list li{margin:2px 0}
.taom-critic-notice.collapsed .tcn-state,.taom-critic-notice.collapsed .tcn-list{display:none}
@media(max-width:900px){.taom-critic-notice{right:10px;top:64px;max-width:260px}}

/* Agenten-Flow in der Workspace-Leiste: dezent, teaser-artig ("die Agenten reden miteinander") */
.taom-agent-flow{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;min-height:22px;font:12px/1 Inter,Arial,sans-serif;color:#5b6a7a}
.taom-agent-flow:empty{display:none}
.taom-agent-flow span{display:inline;text-transform:none;letter-spacing:normal;color:inherit;font-size:12px}
.taom-agent-flow .taf-node{font-weight:700;color:#8a97a8;padding:3px 10px;border:1px solid #e6ebf1;border-radius:999px;background:#fff;white-space:nowrap;transition:all .2s}
.taom-agent-flow .taf-node.active{color:#0a6fc0;border-color:#bcdcfa;background:#eef6ff;box-shadow:0 0 0 3px rgba(7,136,226,.10)}
.taom-agent-flow .taf-link{display:inline-flex;gap:4px;align-items:center}
.taom-agent-flow .taf-link i{width:5px;height:5px;border-radius:50%;background:#cdd7e3;display:inline-block}
.taom-agent-flow.busy .taf-link i{background:#0a93f0;animation:tafDot 1s infinite ease-in-out}
.taom-agent-flow.busy .taf-link i:nth-child(2){animation-delay:.15s}
.taom-agent-flow.busy .taf-link i:nth-child(3){animation-delay:.3s}
@keyframes tafDot{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
.taom-agent-flow .taf-status{margin-left:4px;color:#5b6a7a}
.taom-agent-flow .taf-status.ok{color:#2f8f56;font-weight:700}
.taom-agent-flow .taf-status.fix{color:#c06a15;font-weight:700}
.taom-agent-flow .taf-node{display:inline-flex;align-items:center;gap:5px}
.taom-agent-flow.live .taf-link i{animation:tafMarch 1s infinite linear!important}
.taom-agent-flow.live .taf-link i:nth-child(2){animation-delay:.33s!important}
.taom-agent-flow.live .taf-link i:nth-child(3){animation-delay:.66s!important}
@keyframes tafMarch{0%{opacity:.15;transform:translateX(-3px)}50%{opacity:1;transform:translateX(1px)}100%{opacity:.15;transform:translateX(4px)}}
.taom-agent-flow .taf-ic{width:14px;height:14px;fill:currentColor;opacity:.7;flex:0 0 auto}
.taom-agent-flow .taf-node.active .taf-ic{opacity:1;fill:#0a6fc0}
.taom-agent-flow .taf-lbl{white-space:nowrap}
.taom-agent-flow .taf-life{width:7px;height:7px;border-radius:50%;background:#0a93f0;flex:0 0 auto;box-shadow:0 0 0 0 rgba(10,147,240,.5);animation:tafBlink 1.05s ease-in-out infinite}
.taom-agent-flow.wait .taf-node.active .taf-ic{fill:#c06a15}
.taom-agent-flow.wait .taf-life{background:#f59e0b;box-shadow:0 0 0 0 rgba(245,158,11,.5)}
@keyframes tafBlink{0%{opacity:1;box-shadow:0 0 0 0 rgba(10,147,240,.5)}70%{opacity:.35;box-shadow:0 0 0 5px rgba(10,147,240,0)}100%{opacity:1;box-shadow:0 0 0 0 rgba(10,147,240,0)}}
.taom-agent-flow.live .taf-status{color:#0a6fc0;font-weight:700}
.taom-agent-flow.live .taf-status::before{content:'';display:inline-block;width:7px;height:7px;border-radius:50%;background:#0a93f0;margin-right:6px;vertical-align:middle;animation:tafPulse 1.1s ease-in-out infinite}
.taom-agent-flow.wait .taf-status::before{background:#f59e0b}
.taom-agent-flow.wait .taf-status{color:#c06a15;font-weight:700}
@keyframes tafPulse{0%,100%{opacity:.35;transform:scale(.75)}50%{opacity:1;transform:scale(1.15)}}
/* Bau-Szene: Prozess-Agent baut eine Strasse (Segmente + Walze), Quality-Agent laeuft mit Lupe drueber */
.taom-agent-flow .tsc{height:22px;flex:0 1 210px;min-width:130px}
.taom-agent-flow .tsc svg{width:100%;height:22px;display:block;overflow:visible}
.taom-agent-flow .tsc .road{fill:#334155}
.taom-agent-flow .tsc .dash{fill:#f8d34e}
.taom-agent-flow .tsc .fig{stroke:#0a6fc0;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;fill:none}
.taom-agent-flow .tsc circle.head{fill:#0a6fc0;stroke:none}
.taom-agent-flow .tsc .drum{fill:#475569}
.taom-agent-flow .tsc .cab{fill:#f59e0b}
.taom-agent-flow .tsc .glass{stroke:#0a6fc0;stroke-width:1.7;fill:rgba(10,147,240,.12)}
.taom-agent-flow .tsc.build .seg{opacity:0;animation:tscLay 3.4s linear infinite}
.taom-agent-flow .tsc .s1{animation-delay:0s}.taom-agent-flow .tsc .s2{animation-delay:.42s}
.taom-agent-flow .tsc .s3{animation-delay:.84s}.taom-agent-flow .tsc .s4{animation-delay:1.26s}
.taom-agent-flow .tsc .s5{animation-delay:1.68s}.taom-agent-flow .tsc .s6{animation-delay:2.1s}
.taom-agent-flow .tsc .s7{animation-delay:2.52s}.taom-agent-flow .tsc .s8{animation-delay:2.94s}
@keyframes tscLay{0%{opacity:0}4%{opacity:1}100%{opacity:1}}
.taom-agent-flow .tsc.build .roller{animation:tscRoll 4.6s ease-in-out infinite alternate}
@keyframes tscRoll{0%{transform:translateX(8px)}100%{transform:translateX(116px)}}
/* Richtungswechsel: beim Zurueckfahren spiegeln, damit die Walze "umdreht" */
.taom-agent-flow .tsc.build .rollerbody{transform-box:fill-box;transform-origin:center;animation:tscFace 9.2s steps(1,end) infinite}
@keyframes tscFace{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.taom-agent-flow .tsc.review .roller{display:none}
.taom-agent-flow .tsc.review .seg{opacity:1}
.taom-agent-flow .tsc.build .inspector{display:none}
.taom-agent-flow .tsc .inspector{animation:tscWalk 3s ease-in-out infinite alternate}
@keyframes tscWalk{0%{transform:translateX(18px)}100%{transform:translateX(126px)}}
/* Umdrehen beim Zurueckgehen (rechts->links), damit der Pruefer in Laufrichtung schaut. */
.taom-agent-flow .tsc .inspectorbody{transform-box:fill-box;transform-origin:center;animation:tscFaceI 6s steps(1,end) infinite}
@keyframes tscFaceI{0%{transform:scaleX(1)}50%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
.taom-agent-flow .tsc .glassgrp{animation:tscBob .5s ease-in-out infinite}
@keyframes tscBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4px)}}
/* Jubel-Männchen (fertig) */
.taom-agent-flow .tsc.celebrate .jumper{transform-box:fill-box;transform-origin:center bottom;animation:tscJump .5s ease-in-out infinite}
@keyframes tscJump{0%,100%{transform:translateY(2px)}50%{transform:translateY(-4px)}}
.taom-agent-flow .tsc.celebrate .cf{animation:tscCf 1s linear infinite}
.taom-agent-flow .tsc.celebrate .c2{animation-delay:.25s}
.taom-agent-flow .tsc.celebrate .c3{animation-delay:.5s}
.taom-agent-flow .tsc.celebrate .c4{animation-delay:.75s}
@keyframes tscCf{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(12px)}}
/* Warte-Männchen (bereit) */
.taom-agent-flow .tsc.idleman .waiter{transform-box:fill-box;transform-origin:center bottom;animation:tscSway 2.6s ease-in-out infinite}
@keyframes tscSway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.taom-agent-flow .tsc.idleman .d{fill:#b91c1c;animation:tscDot3 1.5s ease-in-out infinite}
.taom-agent-flow .tsc.idleman .d2{animation-delay:.15s}
.taom-agent-flow .tsc.idleman .d3{animation-delay:.3s}
.taom-agent-flow .tsc.idleman .d4{animation-delay:.45s}
.taom-agent-flow .tsc.idleman .d5{animation-delay:.6s}
.taom-agent-flow .tsc.idleman .d6{animation-delay:.75s}
.taom-agent-flow .tsc.idleman .d7{animation-delay:.9s}
@keyframes tscDot3{0%,100%{opacity:.2}50%{opacity:1}}
@media(max-width:900px){.taom-agent-flow{display:none}}

/* ---- Agenten-Netzwerk: Shape-Ausarbeitung (Attribut-Panel) ---- */
.attr-enrich{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;padding:6px 8px;background:#f4f8fd;border:1px solid #dbe7f5;border-radius:8px}
.attr-enrich .ta-en{font-size:11.5px;font-weight:600}
.attr-enrich .ta-en.ok{color:#1a7f37}
.attr-enrich .ta-en.run{color:#0a6fc0}
.attr-enrich .ta-en.err{color:#b02525}
.attr-enrich .ta-en.idle{color:#8a97a8;font-weight:500}
.attr-enrich .attr-inline-btn{background:#0888e1;color:#fff;border:0;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer}
.attr-enrich .attr-inline-btn:hover{background:#0a6fc0}

/* ---- Kopf-Reihenfolge: Anmelden · Sprache · Benutzeranleitung · Version ---- */
.topbar-right{flex-wrap:wrap}
.topbar-right #taom-auth-btn{order:1}
.topbar-right #taom-lang-select{order:2}
.topbar-right #help-btn{order:3}
.topbar-right #version-link{order:4}
/* Einstellungen sitzt thematisch in der "Generated"-Editor-Toolbar (rechts), nicht im Kopf. */
.card-title .settings-wrap.in-editor{margin-left:auto}
.card-title .settings-wrap.in-editor .settings-panel{right:0;left:auto}

/* ---- Agenten-Roster (alle laut Rolle berechtigten Agenten; aktiver wird animiert) ---- */
.taom-agent-flow .taf-roster{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center}
.taom-agent-flow .taf-emo{font-size:13px;line-height:1}
.taom-agent-flow .taf-node.dim{opacity:.5}
.taom-agent-flow .taf-node.active{color:#0a6fc0;border-color:#bcdcfa;background:#eef6ff;box-shadow:0 0 0 2px rgba(10,147,240,.12)}
.taom-agent-flow .taf-run{display:inline-flex;gap:2px;align-items:center;margin-left:2px}
.taom-agent-flow .taf-run i{width:4px;height:4px;border-radius:50%;background:#0a93f0;animation:tafRun 1s ease-in-out infinite}
.taom-agent-flow .taf-run i:nth-child(2){animation-delay:.15s}
.taom-agent-flow .taf-run i:nth-child(3){animation-delay:.3s}
@keyframes tafRun{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}

/* Szene-Animation (Walze/Lupe/Wartemaennchen) kompakt zwischen Haupt- und Hilfsagenten */
.taom-agent-flow .taf-scene{display:inline-flex;align-items:center;margin:0 2px}
.taom-agent-flow .taf-scene svg{height:22px;width:auto}
/* Anmelden-Button: eingeloggt = Traniva-Blau, sonst grau (Standard-.secondary) */
.topbar-right #taom-auth-btn.taom-auth-on{background:#0888e1;color:#fff;border-color:#0888e1}
.topbar-right #taom-auth-btn.taom-auth-on:hover{background:#0a6fc0}

/* Shape-Editor / Aenderungskennzeichen im Attribut-Panel */
.attr-enrich{flex-wrap:wrap}
.attr-enrich-user{font-size:11px;color:#b45309;font-weight:700}
.attr-inline-btn.ghost{background:#fff;color:#0a6fc0;border:1px solid #bcdcfa}
.attr-inline-btn.ghost:hover{background:#eef6ff}

/* Lauftext (Laufschrift/Ticker) auf dem blauen Process-Agent-Balken */
.taom-agent-ticker{overflow:hidden;white-space:nowrap;flex:1 1 0;min-width:0;margin-left:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 4%,#000 96%,transparent 100%);
  animation:none}
.taom-ticker-track{display:inline-block;white-space:nowrap;will-change:transform;animation:taomTickerScroll 30s linear infinite}
.taom-agent-ticker:hover .taom-ticker-track{animation-play-state:paused}
@keyframes taomTickerScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== Editor-Toolbar: gruppiert + ruhiges Button-System (Mockup 1–2) ===== */
#editor-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:8px 12px}
#editor-toolbar .tb-group{display:flex;align-items:center;gap:4px}
#editor-toolbar .tb-div{width:1px;height:24px;background:#e3e6ea;margin:0 4px;flex:0 0 auto}
#editor-toolbar .tb-spacer{flex:1 1 auto}
#editor-toolbar .tool-btn{font-size:12.5px;font-weight:600;border-radius:8px;padding:8px 11px;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px;background:transparent;color:#42526e}
#editor-toolbar .tool-btn[hidden]{display:none!important}
#editor-toolbar .tool-btn.secondary{background:#fff;border-color:#c6ccd6}
#editor-toolbar .tool-btn.secondary:hover:not(:disabled){background:#f4f6f9}
#editor-toolbar .tool-btn.ghost{background:transparent;border-color:transparent}
#editor-toolbar .tool-btn.ghost:hover:not(:disabled){background:#eef1f5}
#editor-toolbar .tool-btn.primary{background:#0b6bcb;border-color:#0b6bcb;color:#fff}
#editor-toolbar .tool-btn.primary:hover:not(:disabled){background:#0a5aa8}
#editor-toolbar .tool-btn.danger{background:#fff;border-color:#eab7b1;color:#c0392b}
#editor-toolbar .tool-btn.danger:hover:not(:disabled){background:#fdecea}
#editor-toolbar .tool-btn .tbi{width:15px;height:15px;flex:0 0 auto}
#editor-toolbar .tb-dropdown{position:relative}
#editor-toolbar .tb-menu{position:absolute;top:calc(100% + 5px);left:0;z-index:60;background:#fff;border:1px solid #d7dbe0;border-radius:10px;box-shadow:0 8px 24px rgba(9,30,66,.18);padding:5px;min-width:210px;display:flex;flex-direction:column;gap:2px}
#editor-toolbar .tb-menu.hidden{display:none}
#editor-toolbar .tb-menu-item{display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:transparent;border:0;border-radius:7px;padding:8px 10px;font-size:12.5px;font-weight:600;color:#42526e;cursor:pointer;text-decoration:none}
#editor-toolbar .tb-menu-item:hover{background:#eef4ff;color:#0b6bcb}
#editor-toolbar .tb-menu-item[disabled]{opacity:.4;cursor:not-allowed}
#editor-toolbar .tb-menu-item.hidden{display:none}
#editor-toolbar .tool-hint{flex-basis:100%;order:9;margin-top:6px}
/* Export-Buttons des „Generated"-Kopfes sind jetzt im Toolbar-Menü „Export ▾" gespiegelt -> im Kopf ausblenden. */
#html-generated,#pdf-generated,#download-generated{display:none!important}

/* Einstellungs-Panel frei schwebend + scrollbar (nicht von der Editor-Karte abgeschnitten) */
.settings-panel{position:fixed;max-height:80vh;overflow-y:auto;width:280px;z-index:9000}
/* Verlauf & Protokoll: Kopf mit Ausblenden-Button + Höhe begrenzt */
.bottom-grid-head{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.bottom-grid-head span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#7a8495;font-weight:700}
.bottom-grid .panel{max-height:360px;overflow:auto}
.bottom-grid #log{max-height:300px;overflow:auto}

/* Aktions-Buttons (Workspace erzeugen · Neues leeres BPMN · Workspaces neu laden) in einer Zeile */
#upload-form .upload-actions{flex:1 1 100%;display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:flex-end}

/* Alles in EINE Zeile: Datei-Auswahl + die drei Aktionen nebeneinander */
#upload-form #file{width:auto;flex:0 1 auto;max-width:360px}
#upload-form .upload-actions{flex:0 1 auto}

/* Shape-Editor: Format-Toolbar, Vorschau, resizable Fenster */
.taom-shape-modal{resize:both;overflow:auto;min-width:460px;min-height:360px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column}
.taom-shape-modal .tpm-lbl{display:block;margin-bottom:4px}
/* Beschreibungs-Zeile fuellt den freien Platz -> Textfeld waechst beim Vergroessern des Fensters mit. */
.taom-shape-modal .tpm-row-desc{flex:1 1 auto;min-height:200px}
.taom-shape-modal .tpm-desc{width:100%;min-height:160px;flex:1 1 auto;resize:vertical;font:13px/1.5 Inter,Arial,sans-serif}
.taom-shape-modal .tpm-preview{flex:1 1 auto}
.taom-shape-modal .tpm-toolbar{display:flex;gap:4px;align-items:center;margin:0 0 6px;flex-wrap:wrap}
.taom-shape-modal .tpm-tb{padding:4px 9px;border:1px solid #dfe5ee;background:#fff;border-radius:6px;font-size:13px;cursor:pointer;color:#334155;line-height:1;min-width:28px}
.taom-shape-modal .tpm-tb:hover{background:#eef6ff;border-color:#bcdcfa}
.taom-shape-modal .tpm-tb-sp{flex:1}
.taom-shape-modal .tpm-tab{padding:4px 10px;border:1px solid #dfe5ee;background:#f8fafc;border-radius:6px;font-size:12px;cursor:pointer;color:#475569}
.taom-shape-modal .tpm-tab.active{background:#0888e1;color:#fff;border-color:#0888e1}
.taom-shape-modal .tpm-preview{border:1px solid #dfe5ee;border-radius:8px;padding:10px 12px;min-height:220px;overflow:auto;background:#fff}
.taom-shape-modal .tpm-preview h4{margin:.6em 0 .2em;font-size:14px;color:#1f2733}
.taom-shape-modal .tpm-preview p{margin:.35em 0}
.taom-shape-modal .tpm-preview ul,.taom-shape-modal .tpm-preview ol{margin:.35em 0 .35em 1.2em}
.taom-shape-modal .tpm-preview .tpm-empty{color:#98a2b3}
.taom-shape-modal .tpm-preview .tpm-md-img{max-width:100%;max-height:280px;height:auto;border:1px solid #e6ebf1;border-radius:8px;display:block;margin:8px 0}
.taom-shape-modal .tpm-desc.tpm-drop{outline:2px dashed #0888e1;outline-offset:-2px;background:#f2f9ff}
.taom-shape-modal .tpm-desc-hint{flex:0 0 auto;font-size:11px;color:#8a94a4;margin:5px 0 0}
.taom-shape-modal .hidden{display:none}

/* Anhänge im Shape-Editor */
.tpm-attach-row{margin-top:8px}
.tpm-attach-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.tpm-attach-add{padding:4px 10px;border:1px solid #bcdcfa;background:#eef6ff;color:#0a6fc0;border-radius:6px;font-size:12px;cursor:pointer;font-weight:650}
.tpm-attach-add:hover{background:#e2eefb}
.tpm-attach-list{display:flex;flex-wrap:wrap;gap:8px}
.tpm-att{display:flex;align-items:center;gap:6px;border:1px solid #e6ebf1;border-radius:8px;padding:6px 8px;background:#fbfcfe;font-size:12px}
.tpm-att img{width:42px;height:42px;object-fit:cover;border-radius:6px;border:1px solid #e6ebf1}
.tpm-att-ic{font-size:18px}
.tpm-att-name{max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#0a6fc0;text-decoration:none;font-weight:600}
a.tpm-att-name:hover{text-decoration:underline}
.tpm-att-size{color:#9aa4b2;font-size:11px}
.tpm-att-del{border:0;background:none;color:#98a2b3;cursor:pointer;font-size:14px;line-height:1}
.tpm-att-del:hover{color:#b02525}
.tpm-att-del:disabled{opacity:.4;cursor:default}
.tpm-attach-note{font-size:11.5px;color:#b45309;margin:6px 0 0}
.tpm-attach-note.ok{color:#15803d}
.tpm-attach-note.err{color:#b02525}
.tpm-attach-note.lic{color:#9a6a00;background:#fff7ed;border:1px solid #fed7aa;border-radius:8px;padding:7px 9px}
.tpm-attach-demo{font-size:11.5px;color:#5b6a7a;background:#f4f8fd;border:1px solid #dce7f4;border-radius:8px;padding:8px 10px;margin:8px 0 0;line-height:1.45}

/* Mehrfachauswahl (Shift/Strg-Klick, Shift+Rahmen) – dezenter als die Primär-Auswahl. */
/* Mehrfachauswahl bei Shapes ebenfalls ueber sel-halo (JS); hier nur noch die Kanten. */
.taom-edge.multi-selected polyline,.taom-edge.multi-selected path{stroke:#2563eb;stroke-width:2.2}
.marquee-rect{pointer-events:none}

/* Vorlagen-Leiste (Templates direkt laden) */
.taom-tpl-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.taom-tpl-bar:empty{display:none}
/* Prominentes Label „Vorlagen + Prompt" als Akzent-Pille – glitzert (pulst), bis der Nutzer
   das erste Mal eine Vorlage angeklickt hat (dann bekommt die Leiste .tpl-seen). */
.taom-tpl-label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;letter-spacing:.02em;color:#fff;background:linear-gradient(90deg,#0788e2,#0a6fc0);padding:5px 12px;border-radius:999px;box-shadow:0 2px 8px rgba(7,136,226,.28)}
.taom-tpl-label::before{content:"📋";font-size:13px}
.taom-tpl-bar:not(.tpl-seen) .taom-tpl-label{animation:taomAttnPulse 2.2s ease-in-out infinite}
.taom-tpl-btn{font-size:12.5px;position:relative;overflow:hidden}
/* Chevron-Affordance: signalisiert „Klick öffnet mehr (Vorschau + Prompt)". */
.taom-tpl-btn .ttb-more{margin-left:7px;color:#0a6fc0;font-weight:900;display:inline-block}
.taom-tpl-bar:not(.tpl-seen) .taom-tpl-btn .ttb-more{animation:taomCaretNudge 1.4s ease-in-out infinite}
/* „Glitzer": ein Licht-Sheen wandert über die Buttons, bis zur ersten Nutzung. */
.taom-tpl-bar:not(.tpl-seen) .taom-tpl-btn::after{content:"";position:absolute;top:0;left:-45%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(8,136,225,.28),transparent);transform:skewX(-18deg);animation:taomTplSheen 3s ease-in-out infinite;pointer-events:none}
@keyframes taomTplSheen{0%{left:-50%}60%,100%{left:130%}}
/* Vorlagen-Bestätigung: Beispiel-Prompt-Vorschau im Popup */
.taom-tpl-prompt{margin:8px 0 4px;max-height:230px;overflow:auto;white-space:pre-wrap;word-break:break-word;background:#f7fafc;border:1px solid #e6ebf1;border-radius:8px;padding:10px 12px;font-size:12.5px;line-height:1.45;color:#334155;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.taom-tpl-prompt.hidden{display:none}
.taom-tpl-modal #tpl-show-prompt{margin:2px 0 4px}
/* Vorlagen-Popup in der Größe veränderbar (wie der Editor-Bereich) – Ecke unten rechts ziehen.
   Flex-Layout, damit die Prompt-Box beim Vergrößern mitwächst. */
.taom-tpl-modal{resize:both;overflow:auto;min-width:360px;min-height:240px;max-width:96vw;max-height:92vh;display:flex;flex-direction:column}
/* Beim Vergrössern des Popups soll die Prompt-Box mitwachsen (nicht bei max-height:230px stehen bleiben
   und darunter leeren Weissraum lassen). flex:1 füllt den Rest der Höhe; overflow scrollt nur bei
   sehr langem Text INNERHALB der gewachsenen Box. */
.taom-tpl-modal .taom-tpl-prompt{flex:1 1 auto;max-height:none;min-height:120px}
/* Solange der Beispiel-Prompt NICHT eingeblendet ist, schiebt „margin-top:auto" die Buttons nach unten,
   damit auch dann kein grosser Leerraum über den Aktionen entsteht. */
.taom-tpl-modal .tpm-actions{margin-top:auto}
/* Antwort-Optionen einer Agenten-Rückfrage als Buttons */
.taom-ask-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.taom-ask-opt{font-size:12.5px}

/* Status-/Wartungsmeldungen (Admin, sprachabhängig) */
.taom-status-banner{margin:10px auto;max-width:1100px;padding:14px 22px;border:2px solid #c0392b;background:#fdecea;color:#b71c1c;font-size:22px;font-weight:800;letter-spacing:.3px;text-align:center;border-radius:10px;box-shadow:0 2px 10px rgba(192,57,43,.15)}
.taom-status-note{margin:8px auto;max-width:1100px;padding:8px 16px;border:1px solid #7c3aed;background:#f3e8ff;color:#5b21b6;font-size:14px;text-align:center;border-radius:8px}
.taom-status-banner[hidden],.taom-status-note[hidden]{display:none!important}