/* ─── Reset & Base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body { font-family: 'DM Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
       background: #f1f5f9; color: #1e293b; line-height: 1.6; }
a { color: inherit; text-decoration: none; }

/* ─── Layout ────────────────────────────────────────────────────────────────── */
.layout { display: flex; min-height: 100vh; }

/* ─── Sidebar ───────────────────────────────────────────────────────────────── */
.sidebar { width: 220px; background: #0f172a; color: #94a3b8; display: flex;
           flex-direction: column; flex-shrink: 0; position: sticky; top: 0; height: 100vh; }
.sidebar-logo { display: flex; align-items: center; gap: .75rem; padding: 1.375rem 1.25rem;
                border-bottom: 1px solid #1e293b; }
.sidebar-logo-text { display:flex; flex-direction:column; gap:.05rem; }
.sidebar-logo-name { font-size:.95rem; font-weight:800; color:#f1f5f9; line-height:1.15;
  letter-spacing:-.01em; }
.sidebar-logo-sub { font-size:.6rem; color:#475569; text-transform:uppercase;
  letter-spacing:.1em; font-weight:500; }
.sidebar-nav { flex: 1; padding: .75rem .75rem; display: flex; flex-direction: column; gap: .25rem; }
.nav-item { display: flex; align-items: center; gap: .625rem; padding: .625rem .75rem;
            border-radius: 8px; font-size: .875rem; color: #94a3b8; transition: all .15s; }
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }
.nav-item:hover { background: #1e293b; color: #f1f5f9; }
.nav-item.active { background: var(--c-brand-500); color: #fff; }
.sidebar-footer { padding: 1rem 1.25rem; border-top: 1px solid #1e293b; }
.api-hint { display: flex; align-items: center; gap: .5rem; font-size: .75rem; color: #94a3b8; margin-bottom: .5rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #f59e0b; flex-shrink: 0; }
.dot.orange { background: #f59e0b; }
.dot.green { background: #22c55e; }
.version { font-size: .7rem; color: #475569; }

/* ─── Content ───────────────────────────────────────────────────────────────── */
.content { flex: 1; padding: 2rem 2.5rem; max-width: 100%; overflow-x: hidden; }

/* ─── Page Header ───────────────────────────────────────────────────────────── */
.page-header { display: flex; justify-content: space-between; align-items: flex-start;
               margin-bottom: 2rem; gap: 1rem; }
.page-title { font-size: 1.75rem; font-weight: 700; color: #0f172a; }
.page-subtitle { color: #64748b; margin-top: .25rem; }
.breadcrumb { font-size: .8rem; color: #64748b; margin-bottom: .5rem; }
.breadcrumb a:hover { color: var(--c-brand-500); }

/* ─── Buttons ───────────────────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.125rem;
       border-radius: 8px; font-size: .875rem; font-weight: 500; cursor: pointer;
       border: none; transition: all .15s; white-space: nowrap; }
.btn:disabled { opacity: .6; cursor: not-allowed; }
.btn-primary { background: var(--c-brand-500); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--c-brand-600); }
.btn-outline { background: transparent; color: var(--c-brand-500); border: 1.5px solid var(--c-brand-500); }
.btn-outline:hover:not(:disabled) { background: var(--c-brand-50); }
.btn-ghost { background: transparent; color: #64748b; }
.btn-ghost:hover { color: #1e293b; }
.btn-lg { padding: .75rem 1.5rem; font-size: 1rem; }
.btn-sm { padding: .375rem .75rem; font-size: .8rem; }

/* ─── Cards ─────────────────────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.25rem; }
.project-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
                padding: 1.25rem 1.5rem; transition: all .2s; cursor: pointer; display: block; }
.project-card:hover { border-color: var(--c-brand-500); box-shadow: 0 4px 20px rgba(99,102,241,.12); transform: translateY(-2px); }
.project-card-header { display: flex; gap: .5rem; margin-bottom: .75rem; }
.project-name { font-size: 1.1rem; font-weight: 600; color: #0f172a; margin-bottom: .375rem; }
.project-meta { display: flex; align-items: center; gap: .35rem; color: #64748b; font-size: .8rem; margin-bottom: .5rem; }
.project-stats { display: flex; justify-content: space-between; align-items: center; margin-top: .75rem; }
.project-date { font-size: .75rem; color: #94a3b8; margin-top: .375rem; }

/* ─── Badges ────────────────────────────────────────────────────────────────── */
.branche-badge { background: var(--c-brand-50); color: var(--c-brand-600); font-size: .7rem; font-weight: 600;
                 padding: .2rem .5rem; border-radius: 4px; }
.local-badge { background: #fef3c7; color: #d97706; font-size: .7rem; font-weight: 600;
               padding: .2rem .5rem; border-radius: 4px; }
.anrede-tag { background: #f1f5f9; color: #64748b; font-size: .7rem; padding: .2rem .5rem; border-radius: 4px; }

/* ─── Empty State ───────────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 4rem 2rem; }
.empty-state svg { margin-bottom: 1.5rem; }
.empty-state h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: .5rem; color: #0f172a; }
.empty-state p { color: #64748b; margin-bottom: 1.5rem; max-width: 400px; margin-left: auto; margin-right: auto; }

/* ─── Wizard ────────────────────────────────────────────────────────────────── */
.wizard-container { max-width: 780px; margin: 0 auto; }
.wizard-container.wizard-wide { max-width: 1120px; }

/* Progress — verbundene Schritte */
.wizard-progress { position:relative; display:flex; margin-bottom:1.75rem;
  background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  padding:1rem 1.5rem; align-items:center; overflow:hidden; }
.wizard-progress::before { content:''; position:absolute; top:50%; left:3.5rem; right:3.5rem;
  height:1.5px; background:#e2e8f0; transform:translateY(-8px); z-index:0; pointer-events:none; }
.wizard-progress .step { display:flex; flex-direction:column; align-items:center; gap:.3rem;
  font-size:.72rem; font-weight:600; color:#94a3b8; flex:1; position:relative; z-index:1; }
.wizard-progress .step span { width:32px; height:32px; border-radius:50%; background:#fff;
  border:2px solid #e2e8f0; display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:800; transition:all .2s; box-shadow:0 0 0 3px #fff; }
.wizard-progress .step.active { color:var(--c-brand-500); }
.wizard-progress .step.active span { background:var(--c-brand-500); color:#fff; border-color:var(--c-brand-500);
  box-shadow:0 0 0 4px rgba(99,102,241,.15), 0 0 0 7px #fff; }
.wizard-progress .step.done { color:#16a34a; }
.wizard-progress .step.done span { background:#f0fdf4; color:#16a34a; border-color:#86efac; }

/* Card */
.wizard-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  padding:2rem; box-shadow:0 2px 8px rgba(0,0,0,.04); }
.wizard-title { font-size:1.35rem; font-weight:700; color:#0f172a; margin-bottom:.375rem; }
.wizard-subtitle { color:#64748b; font-size:.875rem; line-height:1.55; }
.wizard-title-row { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; }

.wizard-actions { display:flex; justify-content:space-between; align-items:center;
  gap:.75rem; margin-top:2rem; padding-top:1.25rem; border-top:1px solid #f1f5f9; }
.wizard-form { margin-top:1.5rem; }

/* Section Labels — prominent mit Akzentlinie */
.form-section-label { font-size:.7rem; font-weight:700; color:#374151; text-transform:uppercase;
  letter-spacing:.07em; margin:1.75rem 0 .875rem; padding:.5rem .875rem;
  background:#f8fafc; border-radius:6px; border-left:3px solid var(--c-brand-500);
  display:flex; align-items:center; justify-content:space-between; }
.form-section-label .wiz-section-toggle { font-size:.75rem; font-weight:500;
  color:#94a3b8; cursor:pointer; text-transform:none; letter-spacing:0;
  background:none; border:none; padding:0; font-family:inherit; }
.form-section-label .wiz-section-toggle:hover { color:var(--c-brand-500); }

/* Collapsible optional sections */
.wiz-optional-body { transition:none; }
.wiz-optional-body.collapsed { display:none; }

/* ─── Forms ─────────────────────────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: .375rem; }
.form-group label { font-size: .875rem; font-weight: 500; color: #374151; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom: 1.25rem; }
.form-input, .form-select { padding: .625rem .875rem; border: 1.5px solid #e2e8f0; border-radius: 8px;
                             font-size: .9rem; color: #1e293b; background: #fff; transition: border-color .15s;
                             width: 100%; }
.form-input:focus, .form-select:focus { outline: none; border-color: var(--c-brand-500); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }
.form-input::placeholder { color: #c4cdd8; font-style: italic; font-weight: 400; }
.form-input-lg { font-size: 1rem; padding: .75rem 1rem; flex: 1; }
.input-hint { font-size: .78rem; color: #94a3b8; margin-top: .375rem; }
.label-hint { display: block; font-size: .75rem; color: #94a3b8; font-weight: 400; }
.local-block { background: #f8fafc; border-radius: 8px; padding: 1rem; margin-top: .5rem; }

.toggle-group { display: flex; gap: .75rem; margin-top: .25rem; }
.toggle-option { cursor: pointer; }
.toggle-option input { display: none; }
.toggle-btn { display: block; padding: .75rem 1.25rem; border: 1.5px solid #e2e8f0; border-radius: 8px;
              text-align: center; transition: all .15s; }
.toggle-btn strong { display: block; font-size: 1rem; color: #0f172a; }
.toggle-btn small { font-size: .75rem; color: #64748b; }
.toggle-option input:checked + .toggle-btn { border-color: var(--c-brand-500); background: var(--c-brand-50); }
.toggle-option input:checked + .toggle-btn strong { color: var(--c-brand-600); }
.checkbox-label { display: flex; align-items: center; gap: .625rem; cursor: pointer;
                  padding: .875rem 1rem; border: 1.5px solid #e2e8f0; border-radius: 8px; }
.checkbox-label input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--c-brand-500); flex-shrink: 0; }
.checkbox-label span { font-weight: 500; }

/* ─── Keyword Step ──────────────────────────────────────────────────────────── */
.keyword-input-area { margin: 1.5rem 0; }
.keyword-input-row { display: flex; gap: .75rem; margin-top: .375rem; }
.loading-state { display: flex; align-items: center; gap: 1rem; padding: 1.5rem;
                 background: #f8fafc; border-radius: 8px; color: #64748b; margin: 1rem 0; }
.spinner { width: 24px; height: 24px; border: 3px solid #e2e8f0; border-top-color: var(--c-brand-500);
           border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.result-overview { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.result-badge { display: inline-flex; align-items: center; padding: .35rem .75rem; border-radius: 100px;
                font-size: .8rem; font-weight: 500; }
.badge-blue { background: #dbeafe; color: #1d4ed8; }
.badge-purple { background: #ede9fe; color: #6d28d9; }
.badge-green { background: #dcfce7; color: #15803d; }
.badge-orange { background: #fef3c7; color: #d97706; }
.badge-gray { background: #f1f5f9; color: #475569; }
.badge-red { background: #fee2e2; color: #dc2626; }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.info-card { background: #f8fafc; border-radius: 10px; padding: 1rem 1.25rem; }
.info-label { font-size: .75rem; color: #64748b; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .25rem; }
.info-value { font-size: 1.1rem; font-weight: 700; color: #0f172a; margin-bottom: .2rem; }
.info-hint { font-size: .75rem; color: #94a3b8; }

.cluster-section h3, .paa-section h3, .wdf-section h3 { font-size: .95rem; font-weight: 600;
  color: #374151; margin-bottom: .75rem; }
.cluster-grid { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; }
.cluster-group { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.cluster-label { font-size: .75rem; font-weight: 600; padding: .2rem .5rem; border-radius: 4px; width: 110px; flex-shrink: 0; }
.cluster-blue { background: #dbeafe; color: #1d4ed8; }
.cluster-purple { background: #ede9fe; color: #6d28d9; }
.cluster-green { background: #dcfce7; color: #15803d; }
.cluster-orange { background: #fef3c7; color: #d97706; }
.cluster-red { background: #fee2e2; color: #dc2626; }
.cluster-teal { background: #ccfbf1; color: #0f766e; }
.kw-chip { font-size: .8rem; padding: .2rem .6rem; border-radius: 4px; background: #f8fafc;
           border: 1px solid #e2e8f0; color: #374151; }
.kw-blue { border-color: #bfdbfe; background: #eff6ff; }
.kw-purple { border-color: #ddd6fe; background: #f5f3ff; }
.kw-green { border-color: #bbf7d0; background: #f0fdf4; }
.kw-orange { border-color: #fed7aa; background: #fff7ed; }
.kw-red { border-color: #fecaca; background: #fef2f2; }
.kw-teal { border-color: #99f6e4; background: #f0fdfa; color: #0f766e; }

.paa-item { padding: .5rem .75rem; background: #f8fafc; border-radius: 6px; font-size: .85rem;
            color: #374151; margin-bottom: .4rem; border-left: 3px solid var(--c-brand-500); }
.term-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.term-chip { background: #f0fdf4; border: 1px solid #bbf7d0; color: #15803d;
             font-size: .8rem; padding: .2rem .6rem; border-radius: 4px; }
.wdf-section { margin-bottom: 1.5rem; }

/* ─── Structure Builder ─────────────────────────────────────────────────────── */
.structure-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.element-palette { background: #f8fafc; border-radius: 10px; padding: 1rem; }
.element-palette h3 { font-size: .875rem; font-weight: 600; margin-bottom: .25rem; }
.palette-hint { font-size: .75rem; color: #94a3b8; margin-bottom: .75rem; }
.palette-group { margin-bottom: 1rem; }
.palette-label { font-size: .7rem; font-weight: 600; color: #94a3b8; text-transform: uppercase;
                 letter-spacing: .04em; margin-bottom: .375rem; }
.palette-item { display: block; width: 100%; text-align: left; padding: .4rem .6rem; font-size: .82rem;
                background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; cursor: pointer;
                margin-bottom: .3rem; color: #374151; transition: all .15s; }
.palette-item:hover { border-color: var(--c-brand-500); color: var(--c-brand-500); background: var(--c-brand-50); }
.palette-local { border-top: 1px solid #e2e8f0; padding-top: .75rem; margin-top: .25rem; }

.structure-builder { display: flex; flex-direction: column; gap: 1rem; }
.structure-header { display: flex; justify-content: space-between; align-items: center; }
.structure-header h3 { font-size: .95rem; font-weight: 600; }
.structure-meta { display: flex; gap: .75rem; font-size: .8rem; color: #64748b; }
.element-list { min-height: 200px; border: 1.5px dashed #e2e8f0; border-radius: 8px; padding: .75rem; }
.element-empty { text-align: center; padding: 2.5rem; color: #94a3b8; font-size: .875rem; }
.element-row { display: flex; align-items: center; gap: .75rem; padding: .625rem .875rem;
               background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: .4rem; }
.element-drag-handle { color: #94a3b8; cursor: grab; font-size: 1.2rem; }
.element-info { flex: 1; display: flex; align-items: center; gap: .75rem; font-size: .85rem; }
.element-typ-badge { background: var(--c-brand-50); color: var(--c-brand-600); font-size: .7rem; padding: .15rem .4rem;
                     border-radius: 4px; font-weight: 600; white-space: nowrap; }
.element-label { color: #374151; font-weight: 500; }
.element-words { color: #94a3b8; font-size: .75rem; margin-left: auto; }
.element-actions { display: flex; gap: .375rem; }
.icon-btn { background: none; border: 1px solid #e2e8f0; width: 26px; height: 26px; border-radius: 4px;
            cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
            font-size: .75rem; color: #64748b; transition: all .15s; }
.icon-btn:hover { background: #f1f5f9; }
.icon-btn-danger:hover { background: #fee2e2; color: #dc2626; border-color: #fecaca; }

.template-bar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.template-label { font-size: .8rem; color: #64748b; }
.template-btn { padding: .3rem .75rem; font-size: .8rem; background: #f8fafc; border: 1px solid #e2e8f0;
                border-radius: 6px; cursor: pointer; transition: all .15s; color: #374151; }
.template-btn:hover { border-color: var(--c-brand-500); color: var(--c-brand-500); }
.page-settings { background: #f8fafc; border-radius: 8px; padding: 1rem; }

/* ─── Content Editor (Step 4) ───────────────────────────────────────────────── */
.generate-controls { display: flex; gap: .75rem; margin: 1.5rem 0 1rem; }
.progress-wrap { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.progress-bar { flex: 1; height: 6px; background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--c-brand-500); border-radius: 3px; transition: width .3s; }
#progress-text { font-size: .8rem; color: #64748b; white-space: nowrap; }

.elements-editor { display: flex; flex-direction: column; gap: .875rem; }
.element-editor { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.element-editor-header { display: flex; justify-content: space-between; align-items: center;
                          padding: .625rem .875rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; }
.element-editor-meta { display: flex; align-items: center; gap: .625rem; }
.element-editor-actions { display: flex; align-items: center; gap: .625rem; }
.word-count { font-size: .78rem; color: #64748b; }
.gen-status { font-size: .9rem; min-width: 18px; text-align: center; }
.gen-status.loading { animation: pulse 1s infinite; }
.gen-status.done { color: #22c55e; }
.gen-status.error { color: #dc2626; }
@keyframes pulse { 0%,100% { opacity:1; } 50% { opacity:.4; } }

.element-content { padding: .875rem; }
.content-textarea { width: 100%; border: 1px solid #e2e8f0; border-radius: 6px; padding: .625rem .75rem;
                    font-size: .875rem; color: #1e293b; line-height: 1.7; resize: vertical;
                    font-family: inherit; transition: border-color .15s; }
.content-textarea:focus { outline: none; border-color: var(--c-brand-500); }
.content-textarea.empty { color: #94a3b8; }
.char-counter { font-size: .72rem; color: #94a3b8; text-align: right; margin-top: .25rem; }

.quality-score-mini { display: flex; flex-direction: column; align-items: center; }
.quality-score-mini #quality-value { font-size: 1.5rem; font-weight: 700; }
.quality-label { font-size: .7rem; color: #64748b; }
.score-good { color: #16a34a; }
.score-ok { color: #d97706; }
.score-bad { color: #dc2626; }

/* ─── Step 5 Export ─────────────────────────────────────────────────────────── */
.export-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin: 1.5rem 0; }
.export-section { background: #f8fafc; border-radius: 10px; padding: 1.25rem; }
.export-section h3 { font-size: .95rem; font-weight: 600; margin-bottom: .875rem; }
.meta-preview { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; }
.meta-row { display: flex; align-items: center; gap: .625rem; font-size: .85rem; }
.copy-btn { background: none; border: 1px solid #e2e8f0; border-radius: 5px; cursor: pointer;
            font-size: .8rem; padding: .15rem .35rem; color: #64748b; flex-shrink: 0;
            transition: background .15s, color .15s; line-height: 1; }
.copy-btn:hover { background: #f1f5f9; color: #0f172a; }
.copy-btn-text { font-size: .78rem; padding: .2rem .5rem; }
.copy-btn-abs { position: absolute; top: .4rem; right: .4rem; }
.meta-label { font-size: .72rem; font-weight: 600; color: #64748b; text-transform: uppercase;
              width: 90px; flex-shrink: 0; }
.meta-value { color: #1e293b; flex: 1; }
.meta-hint { color: #94a3b8; font-style: italic; }
.meta-len { font-size: .72rem; padding: .1rem .3rem; border-radius: 3px; flex-shrink: 0; }
.len-ok { background: #dcfce7; color: #15803d; }
.len-warn { background: #fef3c7; color: #d97706; }
.meta-empty { color: #94a3b8; font-size: .85rem; font-style: italic; }

.schema-blocks { display: flex; flex-direction: column; gap: .75rem; margin-top: .75rem; }
.schema-block { background: #fff; border-radius: 6px; overflow: hidden; border: 1px solid #e2e8f0; position: relative; }
.schema-type { background: var(--c-brand-50); color: var(--c-brand-600); font-size: .75rem; font-weight: 600;
               padding: .3rem .75rem; }
.schema-code { font-size: .75rem; padding: .75rem; overflow-x: auto; color: #1e293b;
               line-height: 1.5; max-height: 200px; overflow-y: auto; }
.robots-code { font-size: .8rem; background: #0f172a; color: #7dd3fc; padding: 1rem;
               border-radius: 8px; line-height: 1.8; font-family: 'Courier New', monospace; }
.og-preview { margin-top: .5rem; }

.quality-score-big { text-align: center; }
.quality-score-number { font-size: 2.5rem; font-weight: 800; }
.quality-score-label { font-size: .75rem; color: #64748b; }
.quality-checks { display: flex; gap: .375rem; justify-content: center; flex-wrap: wrap; margin-top: .5rem; }
.qc { font-size: .7rem; padding: .15rem .4rem; border-radius: 3px; font-weight: 500; }
.qc.ok { background: #dcfce7; color: #15803d; }
.qc.fail { background: #fee2e2; color: #dc2626; }
.quality-pill { font-size: .78rem; padding: .2rem .5rem; border-radius: 4px; font-weight: 600; }

.cluster-suggestion-section { margin: 1.5rem 0; }
.cluster-suggestion-section h3 { font-size: .95rem; font-weight: 600; margin-bottom: .375rem; }
.section-hint { font-size: .82rem; color: #64748b; margin-bottom: .875rem; }
.cluster-pillar { background: var(--c-brand-50); border-radius: 8px; padding: .875rem 1rem; margin-top: .875rem; border-left: 3px solid var(--c-brand-500); }
.cluster-pillar-header { display: flex; align-items: center; gap: .75rem; font-size: .875rem; }
.cluster-items { display: flex; flex-direction: column; gap: .4rem; margin-top: .5rem; }
.cluster-item { display: flex; align-items: center; gap: .75rem; font-size: .85rem; padding: .5rem .875rem;
                background: #fff; border: 1px solid #e2e8f0; border-radius: 6px; }
.cluster-kw { color: var(--c-brand-500); font-size: .78rem; flex: 1; }
.cluster-words { color: #94a3b8; font-size: .75rem; white-space: nowrap; }
.cluster-badge { font-size: .7rem; font-weight: 600; padding: .15rem .4rem; border-radius: 4px; white-space: nowrap; }
.cluster-badge.pillar { background: var(--c-brand-50); color: var(--c-brand-600); }
.cluster-badge.informational { background: #dbeafe; color: #1d4ed8; }
.cluster-badge.commercial { background: #ede9fe; color: #6d28d9; }
.cluster-badge.transactional { background: #dcfce7; color: #15803d; }
.cluster-badge.local { background: #fef3c7; color: #d97706; }
.cluster-badge.standalone { background: #f1f5f9; color: #64748b; }
.cluster-badge.cluster { background: #dbeafe; color: #1d4ed8; }

.export-actions { margin: 1rem 0; }
.export-actions h3 { font-size: .95rem; font-weight: 600; margin-bottom: .75rem; }
.export-buttons { display: flex; gap: .75rem; flex-wrap: wrap; }

/* ─── Table ─────────────────────────────────────────────────────────────────── */
.table-wrap { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; padding: .75rem 1rem; font-size: .8rem; font-weight: 600;
                 color: #64748b; text-transform: uppercase; letter-spacing: .04em;
                 border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.data-table td { padding: .875rem 1rem; border-bottom: 1px solid #f1f5f9; font-size: .875rem; }
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: #fafbff; }
.table-kw { font-weight: 500; color: #0f172a; }
.table-slug { font-size: .75rem; color: #94a3b8; margin-top: .15rem; }
.project-meta-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-top: .5rem; }

/* ─── Alerts ────────────────────────────────────────────────────────────────── */
.alert { padding: .75rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .875rem; }
.alert-error { background: #fee2e2; color: #dc2626; }
.alert-success { background: #dcfce7; color: #15803d; }

/* ─── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .content { padding: 1rem; }
  .form-row { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .export-grid { grid-template-columns: 1fr; }
  .structure-layout { grid-template-columns: 1fr; }
  .seitenziel-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ─── Suchintention ─────────────────────────────────────────────────────────── */
.intention-section { margin-bottom: 1.25rem; }
.intention-badges { display: flex; gap: .5rem; flex-wrap: wrap; }
.intention-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .35rem .85rem; border-radius: 20px;
  border: 1.5px solid #e2e8f0; background: #fff;
  font-size: .8rem; cursor: pointer; transition: all .15s;
  color: #64748b; white-space: nowrap;
}
.intention-badge:hover:not(.active) { border-color: #c4b5fd; color: var(--c-brand-500); }
.intention-badge.active { background: #ede9fe; border-color: var(--c-brand-500); color: var(--c-brand-600); font-weight: 600; }

/* ─── Seitenziel ────────────────────────────────────────────────────────────── */
/* ─── Seitenvorschläge (Step 2) ──────────────────────────────────────────── */
.sv-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; padding:.75rem 1rem; margin-bottom:.5rem; transition:border-color .15s; }
.sv-card:hover { border-color:#c4b5fd; }
.sv-top { display:flex; align-items:flex-start; gap:.75rem; }
.sv-icon { font-size:1.25rem; flex-shrink:0; margin-top:.1rem; }
.sv-meta { flex:1; min-width:0; }
.sv-keyword { font-size:.875rem; font-weight:700; color:#1e293b; margin-bottom:.25rem; }
.sv-tags { display:flex; gap:.35rem; flex-wrap:wrap; }
.sv-tag { font-size:.7rem; padding:.15rem .45rem; border-radius:4px; background:#f1f5f9; color:#64748b; }
.sv-intent { background:#ede9fe; color:var(--c-brand-500); }
.sv-slug { background:#f0fdf4; color:#16a34a; font-family:monospace; }
.sv-anlegen-btn { flex-shrink:0; align-self:center; }
.sv-beschreibung { font-size:.8rem; color:#374151; margin-top:.5rem; padding-left:2rem; }
.sv-warum { font-size:.75rem; color:#64748b; margin-top:.3rem; padding-left:2rem; }

.seitenziel-section { margin-bottom: 1.5rem; }
.section-label { font-size: .875rem; font-weight: 600; color: #374151; margin-bottom: .75rem; }
.seitenziel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .625rem; margin-bottom: .875rem; }
.seitenziel-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 10px;
                   padding: .75rem .875rem; cursor: pointer; text-align: left; display: flex;
                   flex-direction: column; gap: .2rem; transition: all .15s; }
.seitenziel-card:hover { border-color: var(--c-brand-500); background: #fafbff; }
.seitenziel-card.active { border-color: var(--c-brand-500); background: var(--c-brand-50); }
.seitenziel-icon { font-size: 1.25rem; }
.seitenziel-label { font-size: .8rem; font-weight: 600; color: #1e293b; line-height: 1.3; }
.seitenziel-range { font-size: .7rem; color: #94a3b8; }
.seitenziel-hint { font-size: .82rem; color: #64748b; background: #f8fafc;
                   padding: .625rem .875rem; border-radius: 6px; border-left: 3px solid var(--c-brand-500); }
.seitenziel-tag { background: var(--c-brand-50); color: var(--c-brand-600); font-size: .75rem; padding: .15rem .4rem;
                  border-radius: 4px; font-weight: 500; }
.ziel-range { background: #f0fdf4; color: #15803d; font-size: .75rem; padding: .15rem .5rem;
              border-radius: 4px; font-weight: 500; }
.section-badge { background: #dbeafe; color: #1d4ed8; font-size: .7rem; padding: .15rem .4rem;
                 border-radius: 4px; font-weight: 600; margin-left: .375rem; }

/* ─── Screenshot Upload ─────────────────────────────────────────────────────── */
.palette-screenshot { border-top: 1px solid #e2e8f0; padding-top: .75rem; margin-top: .25rem; }
.screenshot-upload-btn { display: block; width: 100%; text-align: center; padding: .5rem;
                          background: var(--c-brand-50); border: 1.5px dashed var(--c-brand-500); border-radius: 6px;
                          cursor: pointer; font-size: .82rem; color: var(--c-brand-600); font-weight: 500;
                          transition: all .15s; }
.screenshot-upload-btn:hover { background: var(--c-brand-100); }
.screenshot-status { font-size: .75rem; margin-top: .375rem; min-height: 1.1em; }
.screenshot-status.loading { color: var(--c-brand-500); }
.screenshot-status.done { color: #16a34a; }
.screenshot-status.error { color: #dc2626; }

/* ─── Hreflang ──────────────────────────────────────────────────────────────── */
.hreflang-section { margin: 1.5rem 0; background: #f8fafc; border-radius: 10px; padding: 1.25rem; }
.hreflang-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; }
.hreflang-check { display: flex; align-items: center; gap: .375rem; font-size: .875rem;
                  cursor: pointer; color: #374151; }
.hreflang-check input { accent-color: var(--c-brand-500); width: 15px; height: 15px; }

/* ─── DESIGN TOKENS (3 Schichten, app-weit) ──────────────────────────────────── */
/* Rein additiv: alle Primitive sind die Tailwind-Werte, die der Code SCHON nutzt,
   d.h. jedes semantische Token löst auf identisches Hex auf → null Pixel-Änderung.
   Migration je Seite = Hex → semantisches Token (gleicher Wert). Marken-Flip =
   nur die --c-brand-*-Rampe ändern. Finn ist BEWUSST ein eigener Namespace. */
:root {
  /* ═══ L1 PRIMITIVE — Roh-Rampen (nie direkt in Templates verwenden) ═══ */
  /* neutral (slate) — schon de-facto die Grau-Palette der App */
  --c-neutral-50:#f8fafc;  --c-neutral-100:#f1f5f9; --c-neutral-200:#e2e8f0;
  --c-neutral-300:#cbd5e1; --c-neutral-400:#94a3b8; --c-neutral-500:#64748b;
  --c-neutral-600:#475569; --c-neutral-700:#334155; --c-neutral-800:#1e293b;
  --c-neutral-900:#0f172a;
  /* brand (indigo) — DIE swappbare Marken-Rampe (Patrick-Flip = nur dieser Block) */
  --c-brand-50:#eef2ff;  --c-brand-100:#e0e7ff; --c-brand-200:#c7d2fe;
  --c-brand-300:#a5b4fc; --c-brand-400:#818cf8; --c-brand-500:#6366f1;
  --c-brand-600:#4f46e5; --c-brand-700:#4338ca; --c-brand-800:#3730a3;
  --c-brand-900:#312e81;
  /* status: ok (green) / warn (amber) / bad (red) — Werte aus dem Bestand */
  --c-ok-50:#f0fdf4;  --c-ok-100:#dcfce7; --c-ok-200:#bbf7d0; --c-ok-300:#86efac;
  --c-ok-500:#22c55e; --c-ok-600:#16a34a; --c-ok-700:#15803d; --c-ok-800:#166534;
  --c-warn-50:#fffbeb;  --c-warn-100:#fef3c7; --c-warn-200:#fde68a; --c-warn-300:#fcd34d;
  --c-warn-500:#f59e0b; --c-warn-600:#d97706; --c-warn-700:#b45309; --c-warn-800:#92400e;
  --c-bad-50:#fef2f2;  --c-bad-100:#fee2e2; --c-bad-200:#fecaca; --c-bad-300:#fca5a5;
  --c-bad-500:#ef4444; --c-bad-600:#dc2626; --c-bad-700:#b91c1c; --c-bad-800:#991b1b;
  /* info (blue) — getrennt von brand (sonst kippt ein Marken-Flip die Info-Farbe) */
  --c-info-50:#eff6ff; --c-info-200:#bfdbfe; --c-info-700:#0369a1; --c-info-800:#1e40af;

  /* ═══ L2 SEMANTISCH — die EINZIGEN Tokens, die Templates verwenden dürfen ═══ */
  --text:var(--c-neutral-800); --text-muted:var(--c-neutral-500); --text-strong:var(--c-neutral-900);
  --surface:var(--c-neutral-50); --surface-sunken:var(--c-neutral-100); --surface-card:#ffffff;
  --border:var(--c-neutral-200); --border-strong:var(--c-neutral-300);
  --brand:var(--c-brand-500); --brand-strong:var(--c-brand-600); --brand-soft:var(--c-brand-50);
  --on-brand:#ffffff;
  --ok:var(--c-ok-600);   --ok-soft:var(--c-ok-50);   --ok-text:var(--c-ok-800);
  --warn:var(--c-warn-600); --warn-soft:var(--c-warn-50); --warn-text:var(--c-warn-800);
  --bad:var(--c-bad-600);  --bad-soft:var(--c-bad-50);  --bad-text:var(--c-bad-800);
  --info:var(--c-info-700); --info-soft:var(--c-info-50); --info-text:var(--c-info-800);

  /* Finn — eigene Assistent-Identität, BEWUSST getrennt von --brand */
  --finn:#1B3A35; --finn-deep:#0F2820; --finn-accent:#4ade80;

  /* ═══ L2 SPACING — 4px-Skala ═══ */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem;

  /* ═══ L2 TYPO-Skala ═══ */
  --fs-xs:.72rem; --fs-sm:.8rem; --fs-base:.875rem; --fs-md:1rem;
  --fs-lg:1.25rem; --fs-xl:1.5rem; --fs-2xl:2rem;
  --lh-tight:1.25; --lh-normal:1.5; --lh-relaxed:1.65;
  --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* ═══ VISUELLE SPRACHE — Radius / Elevation (Karten-System) ═══ */
  --radius-sm:6px; --radius:10px; --radius-lg:16px; --radius-full:9999px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);  --shadow:0 1px 3px rgba(15,23,42,.10);
  --shadow-md:0 4px 12px rgba(15,23,42,.08); --shadow-lg:0 8px 30px rgba(15,23,42,.12);

  /* ═══ KOMPAT — die 10 Alt-Variablen bleiben gültig (identische Werte) ═══ */
  --primary:var(--c-brand-500); --primary-dark:var(--c-brand-600); --primary-light:var(--c-brand-50);
  --success:var(--c-ok-500); --warning:var(--c-warn-500); --danger:var(--c-bad-500);
}

/* ─── Toast Notifications ───────────────────────────────────────────────────── */
.toast-container { position:fixed; top:1.25rem; right:1.25rem; z-index:9999;
  display:flex; flex-direction:column; gap:.5rem; pointer-events:none; }
.toast { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 1rem;
  border-radius:10px; font-size:.875rem; font-weight:500; pointer-events:all;
  box-shadow:0 4px 20px rgba(0,0,0,.1); animation:toastIn .2s ease;
  max-width:360px; line-height:1.4; }
.toast.out { animation:toastOut .2s ease forwards; }
@keyframes toastIn  { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
@keyframes toastOut { from{opacity:1;transform:translateX(0)} to{opacity:0;transform:translateX(20px)} }
.toast-success { background:#f0fdf4; color:#15803d; border:1px solid #86efac; }
.toast-error   { background:#fef2f2; color:#dc2626; border:1px solid #fca5a5; }
.toast-warn    { background:#fffbeb; color:#d97706; border:1px solid #fcd34d; }
.toast-info    { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.toast-icon    { font-size:1rem; flex-shrink:0; margin-top:.05rem; }
.toast-msg     { flex:1; }
.toast-close   { margin-left:auto; cursor:pointer; opacity:.4; background:none; border:none;
  font-size:1rem; color:inherit; padding:0; line-height:1; flex-shrink:0; }
.toast-close:hover { opacity:1; }

/* ─── Modal ─────────────────────────────────────────────────────────────────── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(15,23,42,.5);
  z-index:9998; align-items:center; justify-content:center; padding:1rem;
  backdrop-filter:blur(2px); }
.modal-overlay.open { display:flex; }
.modal-box { background:#fff; border-radius:16px; padding:2rem; max-width:440px; width:100%;
  box-shadow:0 20px 60px rgba(0,0,0,.15); animation:modalIn .2s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.modal-icon-wrap { text-align:center; font-size:2.5rem; margin-bottom:1rem; }
.modal-title { font-size:1.1rem; font-weight:700; color:#0f172a; margin-bottom:.5rem; }
.modal-body-text { font-size:.9rem; color:#64748b; line-height:1.6; margin-bottom:1.5rem; }
.modal-actions { display:flex; gap:.75rem; justify-content:flex-end; }

/* ─── Tooltips ──────────────────────────────────────────────────────────────── */
.tt { position:relative; display:inline-flex; align-items:center; }
.tt-icon { width:14px; height:14px; border-radius:50%; background:#e2e8f0; color:#64748b;
  font-size:.6rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center;
  cursor:help; flex-shrink:0; margin-left:.3rem; transition:background .15s; }
.tt-icon:hover { background:var(--c-brand-500); color:#fff; }
.tt-text { display:none; position:absolute; bottom:calc(100% + 8px); left:50%;
  transform:translateX(-50%); background:#0f172a; color:#f1f5f9; font-size:.75rem;
  line-height:1.5; padding:.5rem .75rem; border-radius:8px; white-space:normal;
  max-width:220px; z-index:9000; box-shadow:0 4px 15px rgba(0,0,0,.2);
  pointer-events:none; min-width:140px; }
.tt-text::after { content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:#0f172a; }
.tt:hover .tt-text { display:block; }

/* ─── Tabs ──────────────────────────────────────────────────────────────────── */
.tab-nav { display:flex; border-bottom:2px solid var(--border); margin-bottom:1.5rem; }
.tab-btn { padding:.625rem 1.25rem; font-size:.875rem; font-weight:500; color:#64748b;
  background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-2px;
  cursor:pointer; transition:all .15s; white-space:nowrap; display:flex; align-items:center; gap:.4rem; }
.tab-btn:hover { color:#0f172a; }
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); }
.tab-count { font-size:.65rem; font-weight:700; padding:.1rem .4rem; border-radius:10px;
  background:#f1f5f9; color:#64748b; }
.tab-count.alert { background:#fee2e2; color:#dc2626; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }

/* ─── Zweistufige Projekt-Navigation (Gruppe = Segmented-Control → Unter-Tabs = Unterstrich) ── */
.group-nav { display:inline-flex; gap:.2rem; background:var(--surface); border:1px solid var(--border);
  border-radius:11px; padding:.3rem; margin-bottom:1.1rem; }
.group-btn { display:flex; align-items:center; gap:.45rem; padding:.5rem 1.05rem; font-size:.9rem;
  font-weight:600; color:var(--text-muted); background:transparent; border:none; border-radius:8px;
  cursor:pointer; transition:color .15s, background .15s, box-shadow .15s; white-space:nowrap; }
.group-btn:hover { color:var(--text); }
.group-btn.active { color:var(--primary); background:#fff; box-shadow:0 1px 3px rgba(15,23,42,.1); }
.group-ic { font-size:1rem; line-height:1; }
/* Unter-Tabs reuse das etablierte .tab-btn-Muster (Unterstrich) — nur Container + Sichtbarkeit hier */
.subtab-row { display:none; gap:.25rem; border-bottom:2px solid var(--border); margin-bottom:1.5rem; flex-wrap:wrap; }
.subtab-row.active { display:flex; }
.group-banner { display:none; margin-bottom:1.25rem; }
.group-banner.active { display:block; }
.ri-promo { display:flex; align-items:center; gap:.9rem; padding:.8rem 1.05rem; text-decoration:none;
  background:var(--primary-light); border:1px solid var(--border); border-radius:10px;
  transition:border-color .15s, box-shadow .15s; }
.ri-promo:hover { border-color:var(--primary); box-shadow:0 2px 10px rgba(99,102,241,.1); }
.ri-promo-ic { font-size:1.35rem; line-height:1; }
.ri-promo-txt { display:flex; flex-direction:column; gap:.1rem; flex:1; min-width:0; }
.ri-promo-txt strong { font-size:.92rem; color:var(--text); }
.ri-promo-txt span { font-size:.8rem; color:var(--text-muted); }
.ri-promo-cta { font-size:.85rem; font-weight:700; color:var(--primary); white-space:nowrap; }

/* ─── Status Pipeline Badges ────────────────────────────────────────────────── */
.status-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem;
  font-weight:600; padding:.2rem .6rem; border-radius:99px; white-space:nowrap; }
.status-dot { width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; }
.status-draft     { background:#f1f5f9; color:#64748b; }
.status-keywords  { background:#dbeafe; color:#1d4ed8; }
.status-structure { background:#ede9fe; color:#6d28d9; }
.status-content   { background:#fef3c7; color:#d97706; }
.status-exported  { background:#dcfce7; color:#15803d; }
.status-next-cta  { background:var(--c-brand-50); color:var(--primary); cursor:pointer; border:none; font-family:inherit; }
.status-next-cta:hover { background:var(--c-brand-100); }

/* ─── Stats Strip ───────────────────────────────────────────────────────────── */
.stats-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.75rem; }
.stat-card { background:#fff; border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.25rem; display:flex; flex-direction:column; gap:.15rem; }
.stat-label { font-size:.72rem; color:#64748b; font-weight:600; text-transform:uppercase; letter-spacing:.05em; }
.stat-value { font-size:1.75rem; font-weight:800; color:#0f172a; line-height:1.1; }
.stat-sub   { font-size:.75rem; color:#94a3b8; }
.stat-card.accent { border-color:var(--primary); background:var(--primary-light); }
.stat-card.accent .stat-value { color:var(--primary); }
.stat-card.danger { border-color:#fca5a5; background:#fef2f2; }
.stat-card.danger .stat-value { color:#dc2626; }

/* ─── Dropdown ──────────────────────────────────────────────────────────────── */
.dropdown { position:relative; display:inline-flex; }
.dropdown-menu { display:none; position:absolute; top:calc(100% + 6px); right:0; background:#fff;
  border:1px solid var(--border); border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.1); z-index:200; min-width:168px; padding:.375rem 0; }
.dropdown.open .dropdown-menu { display:block; }
.dropdown-item { display:flex; align-items:center; gap:.625rem; padding:.625rem 1rem;
  font-size:.875rem; color:#374151; cursor:pointer; background:none; border:none;
  width:100%; text-align:left; text-decoration:none; transition:background .1s; font-family:inherit; }
.dropdown-item:hover { background:#f8fafc; }
.dropdown-item.danger { color:#dc2626; }
.dropdown-item.danger:hover { background:#fef2f2; }
.dropdown-divider { height:1px; background:#f1f5f9; margin:.25rem 0; }
.dropdown-icon { font-size:.9rem; }

/* ─── Skeleton Loaders ──────────────────────────────────────────────────────── */
.skeleton { background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%);
  background-size:200% 100%; animation:skeletonAnim 1.4s ease infinite; border-radius:6px; }
@keyframes skeletonAnim { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-text { height:.875rem; margin-bottom:.5rem; border-radius:4px; }
.skeleton-text.w60 { width:60%; }
.skeleton-text.w80 { width:80%; }
.skeleton-block { height:100px; border-radius:10px; }

/* ─── Section Card ──────────────────────────────────────────────────────────── */
.section-card { background:#fff; border:1px solid var(--border); border-radius:12px;
  margin-bottom:1.25rem; overflow:hidden; }
.section-card-header { display:flex; align-items:center; justify-content:space-between;
  padding:.875rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--border);
  gap:1rem; flex-wrap:wrap; }
.section-card-title { font-size:.9rem; font-weight:600; color:#0f172a;
  display:flex; align-items:center; gap:.5rem; }
.section-card-body { padding:1.25rem; }
.section-card-body.no-pad { padding:0; }

/* ─── Info Banner ───────────────────────────────────────────────────────────── */
.info-banner { display:flex; align-items:flex-start; gap:.75rem; padding:.75rem 1rem;
  border-radius:8px; font-size:.85rem; line-height:1.55; margin-bottom:1rem; }
.info-banner-icon { font-size:1rem; flex-shrink:0; margin-top:.05rem; }
.info-banner.info    { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.info-banner.success { background:#f0fdf4; color:#15803d; border:1px solid #86efac; }
.info-banner.warn    { background:#fffbeb; color:#92400e; border:1px solid #fcd34d; }
.info-banner.neutral { background:#f8fafc; color:#374151; border:1px solid var(--border); }

/* ─── Progress Dots (Dashboard Cards) ──────────────────────────────────────── */
.progress-dots { display:flex; align-items:center; gap:.3rem; }
.pdot { width:9px; height:9px; border-radius:50%; background:#e2e8f0; flex-shrink:0;
  transition:background .2s; }
.pdot.done   { background:#22c55e; }
.pdot.active { background:var(--primary); }
.pdots-label { font-size:.72rem; color:#94a3b8; margin-left:.35rem; white-space:nowrap; }

/* ─── Enhanced Project Cards ────────────────────────────────────────────────── */
.project-card-body { flex:1; }
.project-card-footer { display:flex; align-items:center; justify-content:space-between;
  margin-top:.875rem; padding-top:.75rem; border-top:1px solid #f1f5f9; gap:.5rem; }
.project-card-next { font-size:.72rem; font-weight:600; color:var(--primary);
  display:flex; align-items:center; gap:.25rem; flex:1; min-width:0; }
.project-card-next.done { color:#22c55e; }
.project-card-metric { font-size:.72rem; color:#64748b; display:flex; align-items:center; gap:.25rem; white-space:nowrap; }

/* ─── Sidebar Nav Groups ────────────────────────────────────────────────────── */
.nav-group-label { font-size:.62rem; font-weight:700; color:#475569; text-transform:uppercase;
  letter-spacing:.09em; padding:.875rem .75rem .3rem; }
.sidebar-project-ctx { margin:.5rem .75rem .25rem; padding:.5rem .75rem;
  background:rgba(99,102,241,.15); border-radius:8px; border-left:2px solid var(--c-brand-500); }
.sidebar-project-ctx-label { font-size:.62rem; color:#94a3b8; text-transform:uppercase;
  letter-spacing:.07em; font-weight:600; }
.sidebar-project-ctx-name { font-size:.78rem; color:#e2e8f0; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:.15rem; }

/* ─── Wizard Step Context Bar ───────────────────────────────────────────────── */
.step-ctx { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  padding:.6rem 1rem; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; margin-bottom:1.25rem; font-size:.8rem; color:#475569; }
.step-ctx-val { font-weight:600; color:#1e293b; }
.step-ctx-sep { color:#d1d5db; }

/* ─── Form Section Labels ───────────────────────────────────────────────────── */
.form-section-label { font-size:.72rem; font-weight:700; color:#64748b;
  text-transform:uppercase; letter-spacing:.06em; margin:1.5rem 0 .875rem;
  padding-bottom:.5rem; border-bottom:1px solid #f1f5f9; }

/* ─── form-control alias ────────────────────────────────────────────────────── */
.form-control { padding:.625rem .875rem; border:1.5px solid #e2e8f0; border-radius:8px;
  font-size:.9rem; color:#1e293b; background:#fff; transition:border-color .15s; width:100%; }
.form-control:focus { outline:none; border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(99,102,241,.1); }

/* ─── Header Actions ────────────────────────────────────────────────────────── */
.header-actions { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

/* ─── Proj Detail: GSC Property Select ─────────────────────────────────────── */
#propertySelect { max-width:320px; font-size:.85rem; }

/* ─── Step3 Block Library (moved from inline) ──────────────────────────────── */
.s3-layout { display:grid; grid-template-columns:320px 1fr; gap:1.5rem; margin-top:1.5rem; }
@media(max-width:900px){ .s3-layout{ grid-template-columns:1fr; } }
.s3-panel-title { font-size:.95rem; font-weight:700; margin:0 0 .25rem; }
.s3-panel-hint { font-size:.78rem; color:var(--text-muted); margin:0 0 1rem; }
.s3-library { display:flex; flex-direction:column; gap:.75rem; }
.local-seo-banner { background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px;
  padding:.6rem .9rem; font-size:.8rem; color:#1e40af; }
.block-library { display:flex; flex-direction:column; gap:.4rem; }
.block-card { display:flex; align-items:center; gap:.75rem; padding:.6rem .75rem;
  border:1px solid var(--border); border-radius:8px; background:#fff; cursor:pointer;
  text-align:left; transition:border-color .15s,background .15s; width:100%; }
.block-card:hover { border-color:var(--primary); background:#fafbff; }
.block-card-icon { font-size:1.25rem; flex-shrink:0; width:1.75rem; text-align:center; }
.block-card-label { font-size:.85rem; font-weight:600; color:var(--text); }
.block-card-desc { font-size:.73rem; color:var(--text-muted); margin-top:.1rem; }
.einzelelemente-section { margin-top:.5rem; }
.einzelelemente-toggle { font-size:.8rem; font-weight:600; color:var(--text-muted);
  cursor:pointer; padding:.3rem 0; user-select:none; }
.einzelelemente-hint { font-size:.75rem; color:var(--text-muted); margin:.4rem 0; font-style:italic; }
.einzelelemente-grid { display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.el-btn { font-size:.73rem; padding:.25rem .6rem; border:1px solid var(--border);
  border-radius:5px; background:#f9fafb; cursor:pointer; white-space:nowrap; }
.el-btn:hover { border-color:var(--primary); background:#f3f0ff; }
.el-btn.no-block-selected { opacity:.4; cursor:not-allowed; }
.screenshot-section { margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--border); }
.screenshot-label { font-size:.75rem; font-weight:600; color:var(--text-muted); margin-bottom:.4rem; }
.s3-builder { display:flex; flex-direction:column; gap:.75rem; min-width:0; }
.s3-builder-header { display:flex; justify-content:space-between; align-items:baseline;
  flex-wrap:wrap; gap:.5rem; }
.s3-meta { display:flex; gap:.75rem; font-size:.78rem; color:var(--text-muted); }
.builder-empty { border:2px dashed var(--border); border-radius:10px; padding:2.5rem;
  text-align:center; color:var(--text-muted); font-size:.85rem; }
.page-block { border:1px solid var(--border); border-radius:10px; overflow:hidden; background:#fff; }
.page-block.selected { border-color:var(--primary); box-shadow:0 0 0 2px #ede9fe; }
.page-block-header { display:flex; align-items:center; gap:.5rem; padding:.6rem .85rem;
  background:#fafafa; cursor:pointer; user-select:none; border-bottom:1px solid var(--border); }
.page-block-icon { font-size:1rem; }
.page-block-name { font-size:.85rem; font-weight:600; flex:1; }
.page-block-count { font-size:.73rem; color:var(--text-muted); }
.block-toggle { font-size:.7rem; color:var(--text-muted); transition:transform .2s; }
.block-toggle.open { transform:rotate(90deg); }
.page-block-body { padding:.5rem .85rem .75rem; display:none; }
.page-block-body.open { display:block; }
.block-move-btns { display:flex; gap:.25rem; margin-left:auto; }
.block-move-btn { background:none; border:1px solid var(--border); border-radius:4px;
  font-size:.7rem; padding:1px 5px; cursor:pointer; color:var(--text-muted); }
.block-move-btn:hover { border-color:var(--primary); color:var(--primary); }
.element-row { display:flex; align-items:center; gap:.5rem; padding:.3rem .2rem;
  border-bottom:1px solid #f3f4f6; font-size:.8rem; }
.element-row:last-child { border-bottom:none; }
.element-row-label { flex:1; color:var(--text); }
.element-row-words { font-size:.7rem; color:var(--text-muted); white-space:nowrap; }
.element-row-actions { display:flex; gap:.15rem; }
.add-element-row { margin-top:.4rem; }
.add-element-select { font-size:.75rem; padding:.2rem .5rem; border:1px solid var(--border);
  border-radius:5px; background:#f9fafb; }
.add-element-btn-sm { font-size:.73rem; padding:.2rem .55rem; border:1px solid var(--primary);
  border-radius:5px; background:#f3f0ff; color:var(--primary); cursor:pointer; margin-left:.25rem; }
.add-element-btn-sm:hover { background:var(--primary); color:#fff; }
.vorlage-bar { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding:.6rem .75rem;
  background:#f8fafc; border:1px solid var(--border); border-radius:8px; }
.vorlage-label { font-size:.75rem; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.vorlage-btn { font-size:.78rem; padding:.3rem .7rem; border:1px solid var(--border);
  border-radius:6px; background:#fff; cursor:pointer; }
.vorlage-btn:hover { border-color:var(--primary); background:#f3f0ff; color:var(--primary); }
.cluster-radio-group { display:flex; flex-direction:column; gap:.4rem; margin-top:.4rem; }
.cluster-radio { display:flex; align-items:flex-start; gap:.5rem; cursor:pointer; }
.cluster-radio input { margin-top:.2rem; flex-shrink:0; }

/* ─── Step 1 Accordion ───────────────────────────────────────────────────────── */
.acc-section { border:1px solid #e2e8f0; border-radius:10px; margin-bottom:.625rem;
  overflow:hidden; transition:box-shadow .15s; }
.acc-section.open { box-shadow:0 1px 6px rgba(0,0,0,.06); }
.acc-header { width:100%; display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  background:#f8fafc; border:none; cursor:pointer; text-align:left; font-family:inherit;
  transition:background .12s; }
.acc-header:hover { background:#f1f5f9; }
.acc-section.open .acc-header { background:#fff; border-bottom:1px solid #f1f5f9; }
.acc-header-static { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  background:#f8fafc; border-bottom:1px solid #e2e8f0; }
.acc-section.open .acc-header-static { background:var(--c-brand-50); border-bottom:1px solid var(--c-brand-100); }
.acc-header-left { flex:1; min-width:0; }
.acc-title { font-size:.85rem; font-weight:700; color:#0f172a; display:block; }
.acc-sub { font-size:.72rem; color:#94a3b8; margin-top:.1rem; display:block; }
.acc-badge { font-size:.65rem; font-weight:700; background:#f1f5f9; color:#64748b;
  border:1px solid #e2e8f0; padding:.15rem .45rem; border-radius:4px; white-space:nowrap;
  flex-shrink:0; }
.acc-badge-required { font-size:.65rem; font-weight:700; background:var(--c-brand-50); color:var(--c-brand-600);
  border:1px solid var(--c-brand-200); padding:.15rem .45rem; border-radius:4px; white-space:nowrap; }
.acc-chevron { flex-shrink:0; color:#94a3b8; transition:transform .2s; }
.acc-body { padding:.875rem 1rem; background:#fff; }
.acc-body.collapsed { display:none; }
.cluster-radio-label strong { font-size:.83rem; display:block; }
.cluster-radio-label small { font-size:.73rem; color:var(--text-muted); }
.field-hint { display:block; font-size:.72rem; font-weight:400; color:var(--text-muted);
  margin-top:.15rem; font-style:normal; }
.page-settings-block { border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.1rem; background:#fafafa; }

/* ─── Responsive additions ──────────────────────────────────────────────────── */
@media (max-width:768px) {
  .stats-strip { grid-template-columns:repeat(2,1fr); }
  .tab-btn { padding:.5rem .75rem; font-size:.8rem; }
}

/* ─── label-optional (Wizard forms) ────────────────────────────────────────── */
.label-optional { font-weight:400; text-transform:none; letter-spacing:0;
  font-size:.75rem; color:var(--text-muted); margin-left:.4rem; }

/* ─── page-settings (Step 3 block) ─────────────────────────────────────────── */
.page-settings { border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.1rem; background:#fafafa; }

/* ─── Step4 block-section layout ───────────────────────────────────────────── */
.block-section { border:1px solid var(--border); border-radius:10px;
  overflow:hidden; margin-bottom:1rem; }
.block-section-header { display:flex; justify-content:space-between; align-items:center;
  padding:.55rem 1rem; background:#f8fafc; cursor:pointer; user-select:none; gap:.5rem; }
.block-section-header:hover { background:#f0f4f8; }
.block-header-left { display:flex; align-items:center; gap:.55rem; flex:1; min-width:0; }
.block-section-name { font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); white-space:nowrap; }
.block-el-count { font-size:.7rem; color:var(--text-muted); }
.block-status-badge { font-size:.69rem; font-weight:600; border-radius:4px;
  padding:1px 7px; white-space:nowrap; }
.block-header-right { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.block-toggle-chevron { font-size:.75rem; color:var(--text-muted);
  transition:transform .2s; display:inline-block; }
.block-body { border-top:1px solid var(--border); }
.block-body .element-editor { border-bottom:1px solid var(--border); }
.block-body .element-editor:last-child { border-bottom:none; }

/* ─── Step4 content-preview types ──────────────────────────────────────────── */
.content-preview { padding:.75rem 1rem; background:#f8fafc; border-top:1px solid var(--border); }
.faq-preview { display:flex; flex-direction:column; gap:.6rem; }
.faq-q { font-weight:600; font-size:.85rem; color:var(--text); }
.faq-a { font-size:.82rem; color:var(--text-muted); padding-left:1rem;
  border-left:2px solid var(--border); margin-top:.15rem; }
.vorteil-preview { display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media(max-width:700px){ .vorteil-preview{ grid-template-columns:1fr; } }
.vorteil-item { border:1px solid var(--border); border-radius:8px; padding:.6rem .8rem; }
.vorteil-item strong { font-size:.83rem; display:block; margin-bottom:.2rem; }
.vorteil-item p { font-size:.78rem; color:var(--text-muted); margin:0; }
.bp-preview { margin:.25rem 0 0 1.25rem; padding:0; }
.bp-preview li { font-size:.83rem; padding:.2rem 0; }
.prozess-preview { display:flex; flex-direction:column; gap:.5rem; }
.prozess-item { display:flex; gap:.75rem; align-items:flex-start; }
.prozess-num { background:var(--primary); color:#fff; border-radius:50%;
  width:1.5rem; height:1.5rem; display:flex; align-items:center; justify-content:center;
  font-size:.75rem; font-weight:700; flex-shrink:0; margin-top:.1rem; }
.prozess-title { font-weight:600; font-size:.83rem; }
.prozess-desc { font-size:.78rem; color:var(--text-muted); }
.stat-preview { display:flex; gap:.75rem; flex-wrap:wrap; }
.stat-item { text-align:center; padding:.5rem .9rem; background:#fff;
  border:1px solid var(--border); border-radius:8px; min-width:100px; }
.stat-num { font-size:1.4rem; font-weight:700; color:var(--primary); }
.stat-label { font-size:.73rem; font-weight:600; margin-top:.1rem; }
.stat-ctx { font-size:.68rem; color:var(--text-muted); margin-top:.15rem; }
.cta-preview { display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.cta-btn-preview { background:var(--primary); color:#fff; padding:.5rem 1.25rem;
  border-radius:6px; font-weight:600; font-size:.88rem; }
.cta-subtext { font-size:.78rem; color:#6b7280; }
.cta-loss { font-size:.75rem; color:#b45309; font-style:italic; }

/* ─── Danger button override in modals ──────────────────────────────────────── */
.btn-danger-confirm { background:#ef4444 !important; color:#fff !important; }
.btn-danger-confirm:hover { background:#dc2626 !important; }

/* ─── Google Fonts Import ───────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ─── Dashboard Ranking Widget ──────────────────────────────────────────────── */
.ranking-widget { background:#0f172a; border-radius:14px; padding:1.5rem; margin-bottom:1.5rem; }
.ranking-widget-header { display:flex; align-items:center; justify-content:space-between;
  margin-bottom:1.25rem; }
.ranking-widget-title { font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.1em; color:#475569; }
.ranking-widget-meta { font-size:.72rem; color:#334155; }
.ranking-cols { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
@media(max-width:640px){ .ranking-cols{ grid-template-columns:1fr; } }
.ranking-col-label { font-size:.65rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; margin-bottom:.625rem; }
.ranking-col-up   .ranking-col-label { color:#22c55e; }
.ranking-col-down .ranking-col-label { color:#ef4444; }
.ranking-row { display:flex; align-items:center; gap:.625rem; padding:.45rem .625rem;
  border-radius:8px; margin-bottom:.3rem; transition:background .15s; cursor:default; }
.ranking-row:hover { background:#1e293b; }
.ranking-delta { font-size:.75rem; font-weight:800; min-width:2.5rem; text-align:right;
  font-variant-numeric:tabular-nums; }
.ranking-delta-up   { color:#4ade80; }
.ranking-delta-down { color:#f87171; }
.ranking-pos-now { font-size:.7rem; font-weight:600; color:#64748b;
  background:#1e293b; padding:.1rem .4rem; border-radius:4px;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.ranking-kw { font-size:.82rem; color:#cbd5e1; flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.ranking-kunde { font-size:.68rem; color:#475569; white-space:nowrap; }
.ranking-empty { color:#334155; font-size:.82rem; padding:.5rem 0; }

/* ─── Dashboard Action Bar ──────────────────────────────────────────────────── */
.action-bar { display:flex; gap:.75rem; margin-bottom:1.5rem; flex-wrap:wrap; }
.action-chip { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem;
  border-radius:99px; font-size:.8rem; font-weight:600; text-decoration:none;
  transition:all .15s; border:1.5px solid transparent; cursor:pointer; }
.action-chip-red   { background:#fef2f2; color:#dc2626; border-color:#fecaca; }
.action-chip-red:hover   { background:#fee2e2; }
.action-chip-amber { background:#fffbeb; color:#d97706; border-color:#fcd34d; }
.action-chip-amber:hover { background:#fef3c7; }
.action-chip-blue  { background:#eff6ff; color:#2563eb; border-color:#bfdbfe; }
.action-chip-blue:hover  { background:#dbeafe; }
.action-chip-green { background:#f0fdf4; color:#16a34a; border-color:#86efac; }
.action-chip-green:hover { background:#dcfce7; }

/* ─── Sidebar User Chip ─────────────────────────────────────────────────────── */
.user-chip { display:flex; align-items:center; gap:.625rem; padding:.625rem .75rem;
  border-radius:8px; cursor:pointer; width:100%; background:none; border:none;
  text-align:left; color:#94a3b8; transition:background .15s; font-family:inherit; }
.user-chip:hover { background:#1e293b; }
.user-chip-info { flex:1; min-width:0; }
.user-chip-name { font-size:.8rem; font-weight:600; color:#e2e8f0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-chip-role { font-size:.68rem; color:#64748b; }
.user-chip-chevron { font-size:.7rem; color:#475569; flex-shrink:0; }
.dropdown-menu-up { bottom:calc(100% + 6px); top:auto !important; }

/* ─── Project Card — enhanced ───────────────────────────────────────────────── */
.project-card { background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  padding:1.25rem 1.5rem; transition:all .2s; cursor:pointer; display:flex;
  flex-direction:column; }
.project-card:hover { border-color:var(--c-brand-500); box-shadow:0 8px 24px rgba(99,102,241,.1);
  transform:translateY(-2px); }
.project-card-footer { display:flex; align-items:center; justify-content:space-between;
  margin-top:auto; padding-top:.875rem; border-top:1px solid #f1f5f9; gap:.5rem; }

/* ─── Opportunity Action Cards ──────────────────────────────────────────────── */
.opp-card { border:1px solid var(--border); border-radius:10px; padding:1rem 1.1rem;
  margin-bottom:.625rem; background:#fff; transition:border-color .15s; }
.opp-card:hover { border-color:#94a3b8; }
.opp-card-top { display:flex; align-items:flex-start; gap:.625rem; margin-bottom:.5rem; }
.opp-card-meta { flex:1; }
.opp-card-title { font-size:.875rem; font-weight:600; color:#0f172a; margin-bottom:.2rem; }
.opp-card-explain { font-size:.82rem; color:#475569; line-height:1.5; margin-bottom:.625rem; }
.opp-card-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }

/* ─── Content area tweak ────────────────────────────────────────────────────── */
.content { flex:1; padding:1.75rem 2.25rem; max-width:100%; overflow-x:hidden; }
@media(max-width:768px){ .content { padding:1rem; } }

/* ─── Dashboard Intelligence Grid ──────────────────────────────────────────── */
.intel-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; margin-bottom:1.5rem; }
@media(max-width:768px){ .intel-grid{ grid-template-columns:1fr; } }
.intel-panel { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.intel-panel-header { display:flex; align-items:center; gap:.75rem; padding:.875rem 1.25rem;
  border-bottom:1px solid #f1f5f9; }
.intel-panel-title { font-size:.82rem; font-weight:700; color:#0f172a; }
.intel-panel-sub { font-size:.72rem; color:#94a3b8; margin-top:.1rem; }
.intel-panel-body { padding:.375rem 0; max-height:272px; overflow-y:auto; }
.intel-panel-body::-webkit-scrollbar { width:4px; }
.intel-panel-body::-webkit-scrollbar-track { background:transparent; }
.intel-panel-body::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }
.intel-row { display:flex; align-items:center; gap:.5rem; padding:.45rem 1.25rem;
  transition:background .12s; text-decoration:none; }
.intel-row:hover { background:#f8fafc; }
.intel-pos-badge { font-size:.7rem; font-weight:700; background:#f1f5f9; color:#64748b;
  padding:.1rem .4rem; border-radius:5px; white-space:nowrap; min-width:3.5rem;
  text-align:center; flex-shrink:0; }
.intel-pos-badge.pos-close { background:#fef3c7; color:#92400e; }
.intel-kw { font-size:.82rem; color:#1e293b; flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.intel-meta { font-size:.72rem; color:#94a3b8; white-space:nowrap; flex-shrink:0; }
.intel-kunde { font-size:.68rem; color:#94a3b8; white-space:nowrap; flex-shrink:0; }
.intel-empty { padding:1.25rem 1.25rem; font-size:.82rem; color:#94a3b8; }
.intel-task-row { display:flex; align-items:center; gap:.75rem; padding:.5rem 1.25rem;
  transition:background .12s; text-decoration:none; }
.intel-task-row:hover { background:#f8fafc; }
.intel-task-name { font-size:.83rem; font-weight:600; color:#1e293b; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.intel-task-tags { display:flex; gap:.3rem; flex-wrap:wrap; flex-shrink:0; }
.intel-tag-alert { font-size:.65rem; font-weight:700; background:#fef2f2;
  color:#dc2626; border:1px solid #fecaca; padding:.1rem .4rem; border-radius:4px; }
.intel-tag-warn { font-size:.65rem; font-weight:700; background:#fffbeb;
  color:#d97706; border:1px solid #fcd34d; padding:.1rem .4rem; border-radius:4px; }
.intel-tag-info { font-size:.65rem; font-weight:700; background:#f0fdf4;
  color:#16a34a; border:1px solid #bbf7d0; padding:.1rem .4rem; border-radius:4px; }

/* ─── URL Analyse View ──────────────────────────────────────────────────────── */
.url-analyse-layout { display:grid; grid-template-columns:2fr 3fr; gap:1.5rem; margin-top:1.5rem; }
@media(max-width:900px){ .url-analyse-layout{ grid-template-columns:1fr; } }
.analyse-ist { display:flex; flex-direction:column; gap:.875rem; }
.analyse-field { background:#fff; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; }
.analyse-field-label { font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#64748b; padding:.5rem 1rem; background:#f8fafc;
  border-bottom:1px solid #f1f5f9; }
.analyse-field-value { padding:.625rem 1rem; font-size:.875rem; color:#1e293b; line-height:1.5; }
.analyse-field-value.missing { color:#94a3b8; font-style:italic; }
.analyse-field-meta { font-size:.72rem; color:#94a3b8; padding:0 1rem .5rem; }
.heading-list { padding:.5rem 1rem; display:flex; flex-direction:column; gap:.2rem; }
.heading-item { display:flex; align-items:baseline; gap:.5rem; font-size:.82rem; }
.heading-level { font-size:.65rem; font-weight:700; color:var(--c-brand-500); background:var(--c-brand-50);
  padding:.1rem .35rem; border-radius:3px; flex-shrink:0; }
.heading-text { color:#374151; }
.analyse-stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; }
.analyse-stat { background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:.75rem 1rem; text-align:center; }
.analyse-stat-val { font-size:1.4rem; font-weight:800; color:#0f172a; }
.analyse-stat-lbl { font-size:.7rem; color:#94a3b8; margin-top:.15rem; }

.analyse-claude { background:#fff; border:1px solid #e2e8f0; border-radius:12px; overflow:hidden; }
.analyse-claude-header { padding:1rem 1.25rem; background:#0f172a; }
.analyse-claude-title { font-size:.85rem; font-weight:700; color:#f1f5f9; }
.analyse-claude-sub { font-size:.72rem; color:#475569; margin-top:.15rem; }
.analyse-claude-body { padding:1.25rem; }
.analyse-section { margin-bottom:1.25rem; }
.analyse-section:last-child { margin-bottom:0; }
.analyse-section-title { font-size:.75rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; color:#64748b; margin-bottom:.625rem; }
.analyse-finding { display:flex; gap:.625rem; padding:.5rem .75rem; border-radius:8px;
  margin-bottom:.375rem; font-size:.83rem; align-items:flex-start; }
.analyse-finding-critical { background:#fef2f2; border:1px solid #fecaca; }
.analyse-finding-warn { background:#fffbeb; border:1px solid #fcd34d; }
.analyse-finding-ok { background:#f0fdf4; border:1px solid #bbf7d0; }
.finding-icon { flex-shrink:0; margin-top:.1rem; }
.finding-text { color:#1e293b; line-height:1.45; }
.analyse-massnahme { display:flex; align-items:flex-start; gap:.625rem; padding:.5rem .75rem;
  border-radius:8px; background:#f8fafc; border:1px solid #e2e8f0; margin-bottom:.375rem; }
.massnahme-prio { font-size:.65rem; font-weight:700; padding:.15rem .4rem; border-radius:4px;
  white-space:nowrap; flex-shrink:0; margin-top:.1rem; }
.massnahme-prio-hoch { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.massnahme-prio-mittel { background:#fffbeb; color:#d97706; border:1px solid #fcd34d; }
.massnahme-text { font-size:.82rem; color:#374151; line-height:1.45; }

/* ─── URL Analyse Input Panel ───────────────────────────────────────────────── */
.ua-input-panel { display:none; background:#fff; border:1px solid #e2e8f0;
  border-radius:12px; margin-bottom:1.25rem; overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.06); }
.ua-input-panel.open { display:block; }
.ua-input-panel-header { display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.25rem; background:#f8fafc; border-bottom:1px solid #f1f5f9; }
.ua-input-panel-title { display:flex; align-items:center; gap:.5rem;
  font-size:.85rem; font-weight:600; color:#1e293b; }
.ua-input-hint-badge { font-size:.68rem; font-weight:500; color:#94a3b8;
  background:#f1f5f9; padding:.15rem .5rem; border-radius:4px; }
.ua-panel-close { background:none; border:none; color:#94a3b8; cursor:pointer;
  font-size:1rem; padding:.25rem .375rem; border-radius:4px; transition:all .15s; }
.ua-panel-close:hover { background:#e2e8f0; color:#475569; }
.ua-input-panel-body { padding:1rem 1.25rem; }
.ua-input-desc { font-size:.82rem; color:#64748b; margin-bottom:.875rem; line-height:1.5; }
.ua-input-row { display:flex; gap:.625rem; max-width:560px; }
.ua-input-row input { flex:1; padding:.625rem .875rem; border:1.5px solid #e2e8f0;
  border-radius:8px; font-size:.875rem; font-family:inherit; transition:border-color .15s;
  color:#1e293b; }
.ua-input-row input:focus { outline:none; border-color:var(--c-brand-500);
  box-shadow:0 0 0 3px rgba(99,102,241,.08); }
.ua-input-row input::placeholder { color:#c4cdd8; }

/* ─── URL Analyse Loading ────────────────────────────────────────────────────── */
.ua-loading { display:flex; align-items:center; gap:1rem; background:#fff;
  border:1px solid #e2e8f0; border-radius:12px; padding:1.5rem 1.5rem;
  box-shadow:0 2px 8px rgba(0,0,0,.05); }

/* ─── URL Analyse Result Card ───────────────────────────────────────────────── */
.ua-result-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06); }

.ua-result-header { display:flex; align-items:center; justify-content:space-between;
  padding:.75rem 1.25rem; background:#0f172a; gap:1rem; flex-wrap:wrap; }
.ua-result-url-row { display:flex; align-items:center; gap:.5rem; flex:1; flex-wrap:wrap; }
.ua-result-url-text { font-size:.8rem; color:#94a3b8; font-family:'Courier New',monospace;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:380px; }
.ua-intent-badge { font-size:.68rem; font-weight:700; background:rgba(99,102,241,.25);
  color:var(--c-brand-300); padding:.15rem .5rem; border-radius:4px; white-space:nowrap; flex-shrink:0; }
.ua-gsc-badge { font-size:.72rem; color:#6ee7b7; background:rgba(34,197,94,.12);
  padding:.15rem .625rem; border-radius:4px; white-space:nowrap; flex-shrink:0; }
.ua-close-x { background:none; border:none; color:#475569; cursor:pointer;
  font-size:.9rem; padding:.25rem .4rem; border-radius:4px; transition:all .15s;
  flex-shrink:0; }
.ua-close-x:hover { background:#1e293b; color:#94a3b8; }

.ua-hauptproblem { display:flex; align-items:flex-start; gap:.75rem; padding:.875rem 1.25rem;
  background:#fff; border-left:3px solid #ef4444; border-bottom:1px solid #f1f5f9;
  font-size:.875rem; font-weight:500; color:#1e293b; line-height:1.5; }
.ua-hp-icon { font-size:1rem; flex-shrink:0; margin-top:.05rem; color:#ef4444; }

/* ─── UA KPI Row ────────────────────────────────────────────────────────────── */
.ua-kpi-row { display:flex; align-items:center; padding:.625rem 1.25rem;
  border-bottom:1px solid #f1f5f9; background:#fff; gap:0; flex-wrap:wrap; }
.ua-kpi { display:flex; flex-direction:column; align-items:center; padding:.25rem .875rem;
  gap:.1rem; }
.ua-kpi-val { font-size:1.05rem; font-weight:700; color:#0f172a; line-height:1.1; }
.ua-kpi-lbl { font-size:.65rem; color:#94a3b8; text-transform:uppercase;
  letter-spacing:.05em; font-weight:500; }
.ua-kpi-sep { width:1px; height:2rem; background:#e2e8f0; flex-shrink:0; }

/* ─── UA Sections ───────────────────────────────────────────────────────────── */
.ua-section { padding:1rem 1.25rem; border-bottom:1px solid #f1f5f9; }
.ua-section-label { font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; color:#94a3b8; margin-bottom:.625rem; }

.ua-massnahme { display:flex; align-items:flex-start; gap:.75rem; padding:.5rem 0;
  border-bottom:1px solid #f8fafc; }
.ua-massnahme:last-of-type { border-bottom:none; }
.ua-massnahme-num { width:1.375rem; height:1.375rem; border-radius:50%;
  background:#f1f5f9; color:#475569; font-size:.72rem; font-weight:700;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  margin-top:.1rem; }
.ua-massnahme-body { flex:1; }
.ua-massnahme-title { font-size:.84rem; color:#1e293b; line-height:1.45;
  font-weight:500; margin-bottom:.3rem; }
.ua-massnahme-meta { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.ua-massnahme-aufwand { font-size:.7rem; color:#94a3b8; }

.ua-more { margin-top:.375rem; }
.ua-more summary { font-size:.78rem; color:var(--c-brand-500); cursor:pointer; padding:.25rem 0;
  list-style:none; font-weight:500; }
.ua-more summary:hover { color:var(--c-brand-600); }

/* ─── UA Finn Block ─────────────────────────────────────────────────────────── */
.ua-finn-block { display:flex; align-items:flex-start; gap:.875rem;
  padding:1rem 1.25rem; background:#f0fdf4; border-top:1px solid #dcfce7;
  border-bottom:1px solid #dcfce7; }
.ua-finn-avatar { width:30px; height:30px; border-radius:8px;
  background:#dcfce7; display:flex; align-items:center;
  justify-content:center; font-size:.95rem; flex-shrink:0; margin-top:.1rem; }
.ua-finn-content { flex:1; }
.ua-finn-label { font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#15803d; margin-bottom:.25rem; }
.ua-finn-text { font-size:.84rem; color:#166534; line-height:1.55; }
.ua-finn-ask-btn { background:#fff; border:1px solid #86efac;
  color:#16a34a; font-size:.72rem; font-weight:600; padding:.375rem .625rem;
  border-radius:6px; cursor:pointer; white-space:nowrap; flex-shrink:0;
  font-family:inherit; transition:all .15s; align-self:center; }
.ua-finn-ask-btn:hover { background:#dcfce7; border-color:#4ade80; }

/* ─── UA IST/SOLL Vergleich ─────────────────────────────────────────────────── */
.ua-ist-soll { background:#f8fafc; border:1px solid #e2e8f0; border-radius:6px;
  padding:.5rem .75rem; margin-top:.375rem; font-size:.78rem; line-height:1.5; }
.ua-ist-line { color:#94a3b8; margin-bottom:.15rem; }
.ua-ist-line code { color:#dc2626; background:#fef2f2; padding:.05rem .25rem;
  border-radius:3px; font-size:.75rem; }
.ua-soll-line { color:#64748b; }
.ua-soll-line code { color:#15803d; background:#f0fdf4; padding:.05rem .25rem;
  border-radius:3px; font-size:.75rem; font-weight:600; }
.ua-position-hint { font-size:.68rem; color:#94a3b8; margin-bottom:.3rem;
  text-transform:uppercase; letter-spacing:.04em; }

/* ─── UA Finn Fragen Block ──────────────────────────────────────────────────── */
.ua-fragen-block { padding:.875rem 1.25rem; border-bottom:1px solid #f1f5f9; }
.ua-fragen-title { font-size:.72rem; font-weight:700; color:var(--c-brand-500);
  margin-bottom:.5rem; display:flex; align-items:center; gap:.4rem; }
.ua-frage-btn { display:block; width:100%; text-align:left; padding:.4rem .75rem;
  font-size:.8rem; color:#374151; background:#f8fafc; border:1px solid #e2e8f0;
  border-radius:6px; cursor:pointer; margin-bottom:.3rem; font-family:inherit;
  transition:all .15s; }
.ua-frage-btn:hover { border-color:var(--c-brand-500); background:var(--c-brand-50); color:var(--c-brand-600); }
.ua-frage-btn:last-child { margin-bottom:0; }

/* ─── UA Result Actions ─────────────────────────────────────────────────────── */
.ua-result-actions { display:flex; gap:.625rem; align-items:center;
  padding:.875rem 1.25rem; flex-wrap:wrap; }

/* ─── Intel Panel Improvements ──────────────────────────────────────────────── */
.intel-panel { box-shadow:0 1px 4px rgba(0,0,0,.05); }
.intel-panel-header { gap:.625rem; }

/* Quick Wins row with action */
.intel-row-qw { align-items:center; }
.intel-pos-badge.pos-top   { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.intel-pos-badge.pos-close { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }
.intel-action-btn { display:inline-flex; align-items:center; justify-content:center;
  width:24px; height:24px; border-radius:6px; background:#f1f5f9; color:#475569;
  font-size:.85rem; font-weight:700; text-decoration:none; flex-shrink:0;
  transition:all .15s; }
.intel-action-btn:hover { background:var(--c-brand-500); color:#fff; }

/* ─── Outreach ──────────────────────────────────────────────────────────────── */

/* SMTP Status Dot */
.or-smtp-dot { display:inline-block; width:8px; height:8px; border-radius:50%;
  flex-shrink:0; margin-right:.25rem; }
.or-smtp-on  { background:#22c55e; }
.or-smtp-off { background:#ef4444; }

/* Position checkboxes */
.or-pos-grid { display:flex; gap:.5rem; flex-wrap:wrap; }
.or-pos-label { display:flex; align-items:center; gap:.35rem; font-size:.84rem;
  cursor:pointer; padding:.3rem .625rem; border:1.5px solid #e2e8f0; border-radius:6px;
  background:#fff; transition:all .15s; user-select:none; }
.or-pos-label:has(input:checked) { border-color:var(--c-brand-500); background:var(--c-brand-50); color:var(--c-brand-600); font-weight:500; }
.or-pos-label input { accent-color:var(--c-brand-500); width:13px; height:13px; }

/* ── Outreach-Startkarte (Senior-Redesign 29.06.) — aufs echte Design-System gehoben ────────── */
.or-panel { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; margin-bottom:var(--sp-5); }
.or-panel__head { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border); background:linear-gradient(180deg,var(--brand-soft),transparent); }
.or-panel__ic { width:38px; height:38px; flex-shrink:0; border-radius:var(--radius); display:flex;
  align-items:center; justify-content:center; background:var(--brand); color:#fff; box-shadow:var(--shadow-sm); }
.or-panel__ttl { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-strong); letter-spacing:-.01em; }
.or-panel__sub { font-size:var(--fs-xs); color:var(--text-muted); margin-top:.1rem; }
.or-panel__body { padding:var(--sp-5); }
.or-field-label { display:block; font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text);
  margin-bottom:.4rem; }
.or-field-label .label-optional { font-weight:var(--fw-normal); color:var(--text-muted); }
.or-hint { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5; margin:-.1rem 0 .6rem; }

/* Segmentierter Ziel-Seiten-Wähler — ersetzt die 29-Checkbox-Wand */
.or-seg { display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-3); }
.or-seg-btn { display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; text-align:left;
  padding:.7rem .9rem; border:1.5px solid var(--border); border-radius:var(--radius); background:var(--surface-card);
  cursor:pointer; transition:border-color .15s, background .15s, box-shadow .15s; font-family:inherit; position:relative; }
.or-seg-btn:hover { border-color:var(--border-strong); }
.or-seg-btn.is-on { border-color:var(--brand); background:var(--brand-soft); box-shadow:var(--shadow-sm); }
.or-seg-btn.is-on::after { content:'✓'; position:absolute; top:.5rem; right:.6rem; font-size:.7rem;
  font-weight:var(--fw-bold); color:var(--brand-strong); }
.or-seg-t { font-size:var(--fs-base); font-weight:var(--fw-bold); color:var(--text-strong); }
.or-seg-btn.is-on .or-seg-t { color:var(--brand-strong); }
.or-seg-s { font-size:var(--fs-xs); color:var(--text-muted); }

/* Kampagnen-Liste als Karten-Reihen (statt nackter Tabelle) */
.or-list { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.or-list__head { display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) var(--sp-5);
  border-bottom:1px solid var(--border); }
.or-list__title { font-size:var(--fs-sm); font-weight:var(--fw-bold); color:var(--text-strong); }
.or-list__count { font-size:var(--fs-xs); color:var(--text-muted); }
.or-row { display:flex; align-items:center; gap:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; text-decoration:none; }
.or-row:last-child { border-bottom:none; }
.or-row:hover { background:var(--surface-sunken); }
.or-row__main { flex:1; min-width:0; }
.or-row__kw { font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.or-row__meta { font-size:var(--fs-xs); color:var(--text-muted); margin-top:.15rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.or-row__stat { text-align:center; flex-shrink:0; min-width:62px; }
.or-row__stat-num { font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-strong); line-height:1; }
.or-row__stat-num.is-warn { color:var(--warn-text); }
.or-row__stat-lbl { font-size:.65rem; color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.2rem; }
.or-row__chev { flex-shrink:0; color:var(--text-muted); }

/* Numbers in table */
.or-num   { font-weight:700; font-size:.9rem; color:#0f172a; }
.or-blue  { color:#0ea5e9; }
.or-green { color:#22c55e; }
.or-red   { color:#ef4444; }
.or-dash  { color:#d1d5db; font-size:.875rem; }

/* Pipeline */
.or-pipeline { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.or-stage { flex:1; min-width:80px; text-align:center; }
.or-stage-count { font-size:1.75rem; font-weight:800; color:#64748b; line-height:1.1; }
.or-stage-label { font-size:.7rem; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:#94a3b8; margin:.2rem 0 .5rem; }
.or-stage-bar { height:3px; background:#e2e8f0; border-radius:2px;
  margin:0 auto; transition:width .3s; width:100%; }
.or-stage-arrow { font-size:1.1rem; color:#cbd5e1; flex-shrink:0; }

/* Activity rows */
.or-activity-row { display:flex; align-items:center; gap:1rem; padding:.75rem 1.25rem;
  border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
.or-activity-row:last-child { border-bottom:none; }
.or-activity-name { flex:1; min-width:160px; }
.or-activity-badges { display:flex; gap:.375rem; flex-wrap:wrap; flex:2; }
.or-badge { font-size:.72rem; font-weight:600; padding:.2rem .5rem;
  border-radius:5px; white-space:nowrap; }
.or-badge-green  { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.or-badge-blue   { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.or-badge-red    { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.or-badge-amber  { background:#fffbeb; color:#d97706; border:1px solid #fcd34d; }

/* ─── Kunden-Seite ──────────────────────────────────────────────────────────── */

/* Filter-Bar */
.kf-bar { display:flex; align-items:center; gap:.875rem; margin-bottom:1.25rem;
  flex-wrap:wrap; }
.kf-search-wrap { position:relative; display:flex; align-items:center;
  flex:1; min-width:220px; max-width:380px; }
.kf-search-icon { position:absolute; left:.75rem; color:#94a3b8; pointer-events:none; flex-shrink:0; }
.kf-search-input { width:100%; padding:.5rem .75rem .5rem 2.25rem; border:1.5px solid #e2e8f0;
  border-radius:8px; font-size:.875rem; font-family:inherit; transition:border-color .15s;
  color:#1e293b; background:#fff; }
.kf-search-input:focus { outline:none; border-color:var(--c-brand-500); box-shadow:0 0 0 3px rgba(99,102,241,.08); }
.kf-search-input::placeholder { color:#c4cdd8; }
.kf-clear-btn { position:absolute; right:.625rem; background:none; border:none;
  color:#94a3b8; cursor:pointer; font-size:.8rem; padding:.15rem .25rem;
  display:flex; align-items:center; }
.kf-clear-btn:hover { color:#475569; }
.kf-chips { display:flex; gap:.375rem; }
.kf-chip { display:inline-flex; align-items:center; gap:.375rem; padding:.375rem .75rem;
  border-radius:99px; font-size:.8rem; font-weight:500; border:1.5px solid #e2e8f0;
  background:#fff; color:#64748b; cursor:pointer; transition:all .15s; font-family:inherit; }
.kf-chip:hover { border-color:var(--c-brand-500); color:var(--c-brand-600); }
.kf-chip.active { background:var(--c-brand-500); border-color:var(--c-brand-500); color:#fff; }
.kf-chip-count { font-size:.7rem; font-weight:700; padding:.05rem .3rem;
  border-radius:4px; background:rgba(255,255,255,.25); }
.kf-chip:not(.active) .kf-chip-count { background:#f1f5f9; color:#94a3b8; }
.kf-branche-select { padding:.4rem .75rem; border:1.5px solid #e2e8f0; border-radius:8px;
  font-size:.82rem; font-family:inherit; color:#374151; background:#fff;
  cursor:pointer; transition:border-color .15s; }
.kf-branche-select:focus { outline:none; border-color:var(--c-brand-500); }
.kf-result-count { font-size:.78rem; color:#94a3b8; margin-left:auto; white-space:nowrap; }

/* Table */
.kunden-table-wrap { background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.kunden-table { width:100%; border-collapse:collapse; }
.kunden-table thead tr { background:#f8fafc; }
.kunden-table th { padding:.625rem 1rem; font-size:.72rem; font-weight:700;
  color:#64748b; text-transform:uppercase; letter-spacing:.05em;
  border-bottom:1px solid #e2e8f0; text-align:left; white-space:nowrap; }
.kth-center { text-align:center !important; }
.kth-action { width:48px; }
.kunden-table td { padding:.75rem 1rem; border-bottom:1px solid #f1f5f9;
  vertical-align:middle; }
.kunden-table tr:last-child td { border-bottom:none; }
.kunden-table tbody tr { transition:background .1s; }
.kunden-table tbody tr:hover { background:#fafbff; }

/* Cells */
.ktd-center { text-align:center; }
.ktd-datum { font-size:.78rem; color:#94a3b8; white-space:nowrap; }
.ktd-action { text-align:center; }

.kunden-name-link { text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
.kunden-name { font-size:.9rem; font-weight:600; color:#0f172a; }
.kunden-name-link:hover .kunden-name { color:var(--c-brand-500); }
.kunden-archiv-badge { font-size:.62rem; font-weight:700; background:#f1f5f9;
  color:#64748b; padding:.1rem .35rem; border-radius:3px; }
.kunden-sub { display:flex; align-items:center; gap:.375rem; margin-top:.2rem; flex-wrap:wrap; }
.kunden-ort { font-size:.72rem; color:#94a3b8; }

.kunden-num { font-size:.9rem; font-weight:600; color:#1e293b; }
.kunden-dash { color:#d1d5db; font-size:.875rem; }

.kunden-score { font-size:.82rem; font-weight:700; padding:.2rem .5rem;
  border-radius:6px; }
.ks-good { background:#dcfce7; color:#15803d; }
.ks-ok   { background:#fef3c7; color:#d97706; }
.ks-bad  { background:#fee2e2; color:#dc2626; }

.kunden-gsc { font-size:.75rem; font-weight:600; white-space:nowrap; }
.kunden-gsc-on  { color:#16a34a; }
.kunden-gsc-off { color:#d1d5db; }

.kunden-opp-badge { font-size:.68rem; font-weight:700; background:#fef2f2;
  color:#dc2626; border:1px solid #fecaca; padding:.15rem .45rem; border-radius:4px;
  white-space:nowrap; }

.kunden-open-btn { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:6px; background:#f1f5f9; color:#475569;
  text-decoration:none; transition:all .15s; }
.kunden-open-btn:hover { background:var(--c-brand-500); color:#fff; }

/* Empty state */
.kunden-empty { display:flex; flex-direction:column; align-items:center;
  gap:.625rem; padding:3rem 2rem; text-align:center; color:#94a3b8;
  font-size:.875rem; }

/* ─── Dashboard Intelligence Layout ────────────────────────────────────────── */
.dash-intel { display:flex; flex-direction:column; gap:1.125rem; margin-bottom:1.75rem; }
.dash-intel-row2 { display:grid; grid-template-columns:1fr 1fr; gap:1.125rem; }
@media(max-width:768px){ .dash-intel-row2{ grid-template-columns:1fr; } }

/* Ranking Radar — dark card */
.dash-radar { background:#0f172a; border-radius:16px; padding:1.375rem 1.5rem; }
.dash-radar-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:1.125rem; }
.dash-radar-title { display:flex; align-items:center; gap:.5rem; font-size:.7rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.12em; color:#475569; }
.dash-radar-meta { font-size:.7rem; color:#1e3a5f; background:#0c1f36; padding:.2rem .6rem;
  border-radius:99px; }
.dash-radar-cols { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media(max-width:640px){ .dash-radar-cols{ grid-template-columns:1fr; } }
.dash-rcol-hd { font-size:.62rem; font-weight:800; text-transform:uppercase;
  letter-spacing:.1em; padding:.25rem 0; margin-bottom:.5rem; }
.dash-rcol-hd.up   { color:#22d3ee; border-bottom:1px solid rgba(34,211,238,.15); }
.dash-rcol-hd.down { color:#f87171; border-bottom:1px solid rgba(248,113,113,.15); }
.dash-rrow { display:flex; align-items:center; gap:.5rem; padding:.375rem .5rem; border-radius:8px;
  text-decoration:none; transition:background .15s; margin-bottom:.15rem; }
.dash-rrow:hover { background:#1e293b; }
.dash-rdelta { font-size:.72rem; font-weight:800; min-width:2.25rem; text-align:right;
  font-variant-numeric:tabular-nums; flex-shrink:0; }
.dash-rdelta.up   { color:#34d399; }
.dash-rdelta.down { color:#f87171; }
.dash-rpos { font-size:.68rem; font-weight:700; color:#64748b; background:#1e293b;
  padding:.1rem .35rem; border-radius:4px; white-space:nowrap; flex-shrink:0;
  font-variant-numeric:tabular-nums; }
.dash-rkw { font-size:.8rem; color:#cbd5e1; flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.dash-rkunde { font-size:.65rem; color:#334155; white-space:nowrap; flex-shrink:0; }
.dash-rempty { font-size:.78rem; color:#1e3a5f; padding:.5rem 0; }

/* Intel side panels */
.dash-intel-panels { display:flex; flex-direction:column; gap:1rem; }
.dash-intel-panel { background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  overflow:hidden; flex:1; min-height:0; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.dash-ip-head { display:flex; align-items:center; gap:.75rem; padding:.75rem 1rem;
  border-bottom:1px solid #f1f5f9; }
.dash-ip-icon { width:28px; height:28px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; flex-shrink:0; }
.dash-ip-title { font-size:.8rem; font-weight:700; color:#0f172a; line-height:1.2; }
.dash-ip-sub { font-size:.68rem; color:#94a3b8; margin-top:.1rem; }
.dash-ip-body { overflow-y:auto; max-height:200px; }
.dash-ip-body::-webkit-scrollbar { width:3px; }
.dash-ip-body::-webkit-scrollbar-thumb { background:#e2e8f0; border-radius:2px; }
.dash-ip-row { display:flex; align-items:center; gap:.5rem; padding:.5rem 1rem;
  text-decoration:none; transition:background .12s; border-bottom:1px solid #f8fafc; }
.dash-ip-row:last-child { border-bottom:none; }
.dash-ip-row:hover { background:#f8fafc; }
.dash-ip-kw { font-size:.8rem; color:#1e293b; flex:1; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.dash-ip-name { font-size:.8rem; font-weight:600; color:#1e293b; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dash-ip-meta { font-size:.7rem; color:#94a3b8; white-space:nowrap; flex-shrink:0; }
.dash-ip-tags { display:flex; gap:.25rem; flex-wrap:wrap; flex-shrink:0; }
.dash-ip-arrow { font-size:.8rem; color:#c4cdd8; flex-shrink:0; transition:color .12s; }
.dash-ip-row:hover .dash-ip-arrow { color:var(--c-brand-500); }
.dash-ip-empty { padding:.875rem 1rem; font-size:.78rem; color:#94a3b8; }
.dash-pos-pill { font-size:.68rem; font-weight:700; padding:.1rem .4rem; border-radius:5px;
  background:#f1f5f9; color:#64748b; white-space:nowrap; flex-shrink:0;
  font-variant-numeric:tabular-nums; }
.dash-pos-pill.pos-green { background:#dcfce7; color:#15803d; }
.dash-pos-pill.pos-amber { background:#fef3c7; color:#92400e; }
.dash-tag-hoch { font-size:.62rem; font-weight:700; background:#fef2f2; color:#dc2626;
  border:1px solid #fecaca; padding:.1rem .35rem; border-radius:4px; white-space:nowrap; }
.dash-tag-warn { font-size:.62rem; font-weight:700; background:#fffbeb; color:#d97706;
  border:1px solid #fcd34d; padding:.1rem .35rem; border-radius:4px; white-space:nowrap; }
.dash-tag-info { font-size:.62rem; font-weight:700; background:#f0fdf4; color:#16a34a;
  border:1px solid #bbf7d0; padding:.1rem .35rem; border-radius:4px; white-space:nowrap; }

/* ─── Project Table (Dashboard) ─────────────────────────────────────────────── */
.proj-table-wrap { background:#fff; border:1px solid #e2e8f0; border-radius:14px;
  overflow:hidden; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.proj-table { width:100%; border-collapse:collapse; }
.proj-table thead tr { background:#f8fafc; }
.proj-table th { padding:.625rem 1rem; font-size:.68rem; font-weight:700; color:#94a3b8;
  text-transform:uppercase; letter-spacing:.06em; border-bottom:1px solid #e2e8f0;
  text-align:left; white-space:nowrap; }
.pth-c { text-align:center !important; }
.pth-action { width:40px; }
.proj-table td { padding:.75rem 1rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.proj-table tbody tr:last-child td { border-bottom:none; }
.proj-table tbody tr { transition:background .1s; }
.proj-table tbody tr:hover { background:#fafbff; }
.ptd-name { font-size:.875rem; font-weight:600; color:#0f172a; line-height:1.3; }
.ptd-sub { display:flex; align-items:center; gap:.375rem; margin-top:.2rem; flex-wrap:wrap; }
.ptd-branche { font-size:.68rem; color:#94a3b8; }
.ptd-ort { font-size:.68rem; color:#94a3b8; }
.ptd-ort::before { content:'·'; margin-right:.375rem; }
.ptd-c { text-align:center; }
.ptd-num { font-size:.875rem; font-weight:600; color:#1e293b; }
.ptd-qual { font-size:.78rem; font-weight:700; padding:.15rem .45rem; border-radius:5px; }
.qual-good { background:#dcfce7; color:#15803d; }
.qual-ok   { background:#fef3c7; color:#d97706; }
.qual-bad  { background:#fee2e2; color:#dc2626; }
.ptd-dash { color:#d1d5db; font-size:.875rem; }
.ptd-gsc { font-size:1rem; line-height:1; }
.ptd-gsc.on  { color:#22c55e; }
.ptd-gsc.off { color:#e2e8f0; }
.ptd-opp { font-size:.72rem; font-weight:700; background:#fef2f2; color:#dc2626;
  border:1px solid #fecaca; padding:.15rem .45rem; border-radius:4px; }
.ptd-date { font-size:.75rem; color:#94a3b8; white-space:nowrap; }
.ptd-open-btn { display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:7px; background:#f1f5f9; color:#64748b;
  text-decoration:none; transition:all .15s; }
.ptd-open-btn:hover { background:var(--c-brand-500); color:#fff; }
/* Workflow badges */
.wf-badge { display:inline-block; font-size:.7rem; font-weight:700; padding:.2rem .55rem;
  border-radius:5px; white-space:nowrap; }
.wf-done     { background:#dcfce7; color:#15803d; border:1px solid #bbf7d0; }
.wf-export   { background:#eef2f7; color:#3f5168; border:1px solid #d6deea; }
.wf-content  { background:#fff7ed; color:#c2410c; border:1px solid #fdba74; }
.wf-keywords { background:#fffbeb; color:#b45309; border:1px solid #fcd34d; }
.wf-draft    { background:#f1f5f9; color:#475569; border:1px solid #e2e8f0; }

/* ─── Wizard Tooltip ─────────────────────────────────────────────────────────── */
.tip-icon { display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; border-radius:50%; background:#e2e8f0; color:#64748b;
  font-size:.62rem; font-weight:800; cursor:help; flex-shrink:0;
  line-height:1; position:relative; vertical-align:middle; }
.tip-icon:hover { background:var(--c-brand-500); color:#fff; }
.tip-icon[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #e2e8f0;
  padding: .5rem .75rem;
  border-radius: 8px;
  font-size: .72rem;
  font-weight: 400;
  line-height: 1.55;
  white-space: normal;
  width: 240px;
  z-index: 500;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s .1s;
  text-align: left;
}
.tip-icon[data-tip]:hover::after { opacity: 1; }

/* ─── Step 2 Badge Overrides ─────────────────────────────────────────────────── */
.result-badge { display:inline-flex; align-items:center; padding:.3rem .75rem;
  border-radius:6px; font-size:.75rem; font-weight:700; }
.result-overview { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.badge-blue   { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.badge-purple { background:#f5f3ff; color:#5b21b6; border:1px solid #c4b5fd; }
.badge-green  { background:#f0fdf4; color:#166534; border:1px solid #86efac; }
.badge-orange { background:#fff7ed; color:#c2410c; border:1px solid #fdba74; }
.badge-gray   { background:#f8fafc; color:#475569; border:1px solid #e2e8f0; }

/* ─── Step 3 SVG Icon Block Cards ────────────────────────────────────────────── */
.block-card-icon { flex-shrink:0; width:32px; height:32px; border-radius:8px;
  display:flex; align-items:center; justify-content:center; background:#f1f5f9; }
.block-card:hover .block-card-icon { background:var(--c-brand-50); }
.seitenziel-icon { display:flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:8px; background:#f1f5f9; margin-bottom:.25rem; }
.seitenziel-card:hover .seitenziel-icon,
.seitenziel-card.active .seitenziel-icon { background:var(--c-brand-50); }

/* ─── Step 2 Redesign ───────────────────────────────────────────────────────── */
.s2-result-header { display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.875rem 1rem; background:#f8fafc; border:1px solid #e2e8f0;
  border-radius:10px; margin-bottom:1rem; flex-wrap:wrap; }
.s2-badges-row { display:flex; gap:.375rem; flex-wrap:wrap; align-items:center; }
.s2-metrics-row { display:flex; align-items:center; gap:0; }
.s2-metric { text-align:center; padding:0 1rem; }
.s2-metric:first-child { padding-left:0; }
.s2-metric-val { font-size:1rem; font-weight:800; color:#0f172a; line-height:1.2; }
.s2-metric-lbl { font-size:.65rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;
  margin-top:.1rem; }
.s2-metric-sep { width:1px; height:2rem; background:#e2e8f0; flex-shrink:0; }
.s2-metric-src { font-size:.6rem; color:#d97706; margin-top:.15rem; line-height:1.3; }

/* Keyword quality panel */
.s2-quality-panel { border-radius:10px; padding:1rem 1.125rem; border:1.5px solid #e2e8f0;
  background:#f8fafc; margin-bottom:1rem; }
.s2-qp-top { display:flex; gap:1rem; align-items:flex-start; flex-wrap:wrap; }
.s2-qp-score-wrap { text-align:center; min-width:64px; flex-shrink:0; }
.s2-qp-score { font-size:1.75rem; font-weight:800; color:#0f172a; line-height:1.1; }
.s2-qp-score-label { font-size:.72rem; font-weight:700; color:#1e293b; margin-top:.2rem; }
.s2-qp-est { font-size:.65rem; color:#94a3b8; margin-top:.1rem; }
.s2-qp-text { font-size:.82rem; color:#374151; line-height:1.6; flex:1; min-width:200px; }
.s2-qp-problem { margin-top:.625rem; font-size:.78rem; color:#dc2626; background:#fef2f2;
  border-radius:6px; padding:.4rem .75rem; border:1px solid #fecaca; }
.s2-qp-alts { margin-top:.875rem; border-top:1px solid #e2e8f0; padding-top:.875rem; }
.s2-qp-alts-label { font-size:.72rem; font-weight:700; color:#475569; margin-bottom:.625rem;
  text-transform:uppercase; letter-spacing:.05em; }

/* Alternative keyword cards — spacious */
.s2-alt-card { border:1.5px solid #e2e8f0; border-radius:8px; padding:.75rem .875rem;
  margin-bottom:.5rem; background:#fff; transition:border-color .15s; }
.s2-alt-card:last-child { margin-bottom:0; }
.s2-alt-card.top1 { border-color:var(--c-brand-500); background:#fafbff; }
.s2-alt-top { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem; }
.s2-alt-kw { background:transparent; border:none; padding:0; font-size:.9rem; font-weight:700;
  color:#1e293b; cursor:pointer; font-family:inherit; text-align:left; }
.s2-alt-card.top1 .s2-alt-kw { color:var(--c-brand-700); }
.s2-alt-kw:hover { color:var(--c-brand-500); text-decoration:underline; }
.s2-alt-rank { font-size:.65rem; font-weight:700; background:var(--c-brand-50); color:var(--c-brand-600);
  padding:.1rem .4rem; border-radius:4px; }
.s2-alt-intent { font-size:.65rem; padding:.1rem .4rem; border-radius:4px; font-weight:600; }
.s2-alt-intent-t { background:#dcfce7; color:#15803d; }
.s2-alt-intent-l { background:#fef3c7; color:#92400e; }
.s2-alt-intent-i { background:#dbeafe; color:#1d4ed8; }
.s2-alt-intent-c { background:#f3e8ff; color:#6d28d9; }
.s2-alt-reason { font-size:.75rem; color:#64748b; line-height:1.5; }
.s2-alt-h1 { font-size:.72rem; color:#475569; font-style:italic; margin-top:.2rem; }
.s2-alts-more { display:flex; flex-wrap:wrap; gap:.375rem; margin-top:.5rem; }
.s2-alt-chip { background:#fff; border:1px solid #e2e8f0; border-radius:5px; padding:.25rem .6rem;
  font-size:.78rem; cursor:pointer; color:#475569; font-family:inherit; transition:all .12s; }
.s2-alt-chip:hover { border-color:var(--c-brand-500); color:var(--c-brand-700); background:var(--c-brand-50); }

/* Debate Badge + OPTIONEN_KARTE */
.s2-debate-badge { margin-top:.625rem; padding:.25rem .6rem; border-radius:5px;
  font-size:.72rem; font-weight:700; align-items:center; gap:.3rem; }
.s2-debate-optionen { margin-top:.875rem; border-top:1px solid #fed7aa; padding-top:.875rem; }
.s2-debate-optionen-titel { font-size:.72rem; font-weight:700; color:#92400e; margin-bottom:.5rem; }
.s2-debate-option { border:1.5px solid #fed7aa; border-radius:8px; padding:.625rem .875rem;
  margin-bottom:.5rem; background:#fff; }
.s2-debate-option:last-child { margin-bottom:0; }
.s2-debate-option-label { font-size:.7rem; font-weight:800; color:#c2410c;
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:.3rem; }
.s2-debate-option-body { font-size:.8rem; color:#374151; line-height:1.5; }
.s2-debate-wenn { color:#78350f; font-weight:600; }
.s2-debate-dann { color:#1e293b; margin-left:.25rem; }
.s2-debate-score { font-size:.7rem; color:#94a3b8; margin-top:.25rem; }

/* Seitenziel panel */
.s2-seitenziel-panel { background:#fff; border:1px solid #e2e8f0; border-radius:10px;
  padding:.875rem 1rem; margin-bottom:1rem; }
.s2-panel-title { font-size:.82rem; font-weight:700; color:#0f172a; margin-bottom:.625rem; }
.s2-panel-hint { font-size:.75rem; font-weight:400; color:#94a3b8; margin-left:.375rem; }
.s2-sz-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:.375rem; }
@media(max-width:640px){ .s2-sz-grid{ grid-template-columns:repeat(2,1fr); } }
.s2-sz-btn { background:#fff; border:1.5px solid #e2e8f0; border-radius:8px; padding:.5rem .5rem;
  cursor:pointer; text-align:center; transition:all .15s; font-family:inherit; }
.s2-sz-btn:hover { border-color:var(--c-brand-500); background:#f5f3ff; }
.s2-sz-btn.active { border-color:var(--c-brand-500); background:var(--c-brand-50); }
.s2-sz-label { font-size:.75rem; font-weight:600; color:#1e293b; line-height:1.3; }
.s2-sz-range { font-size:.65rem; color:#94a3b8; margin-top:.15rem; }

/* Sections */
.s2-section { margin-bottom:1.125rem; }
.s2-section-title { font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#64748b; margin-bottom:.625rem; }
.s2-competitors .paa-item { display:flex; justify-content:space-between; align-items:center; }

/* ─── Outreach Redesign ──────────────────────────────────────────────────────── */
.or-kpi-bar { display:flex; align-items:center; background:#fff; border:1px solid #e2e8f0;
  border-radius:12px; padding:.875rem 1.25rem; margin-bottom:1.25rem;
  box-shadow:0 1px 3px rgba(0,0,0,.04); }
.or-kpi-item { flex:1; text-align:center; }
.or-kpi-val { font-size:1.5rem; font-weight:800; color:#0f172a; line-height:1.1; }
.or-kpi-blue { color:#0ea5e9; }
.or-kpi-green { color:#22c55e; }
.or-kpi-red { color:#ef4444; }
.or-kpi-lbl { font-size:.7rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.05em;
  margin-top:.2rem; display:flex; align-items:center; justify-content:center; gap:.375rem; }
.or-kpi-rate { font-size:.68rem; font-weight:700; background:#f1f5f9; color:#475569;
  padding:.1rem .35rem; border-radius:4px; }
.or-kpi-sep { width:1px; height:2.5rem; background:#e2e8f0; flex-shrink:0; margin:0 .5rem; }

/* Funnel */
.or-funnel-card { background:#fff; border:1px solid #e2e8f0; border-radius:12px;
  padding:1.125rem 1.25rem; margin-bottom:1.25rem; }
.or-funnel-title { font-size:.72rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.07em; color:#64748b; margin-bottom:1rem; }
.or-funnel { display:flex; align-items:center; gap:.375rem; }
.or-funnel-stage { flex:1; display:flex; flex-direction:column; align-items:center; gap:.3rem; }
.or-funnel-count { font-size:1.5rem; font-weight:800; line-height:1; }
.or-funnel-bar-wrap { width:100%; height:6px; background:#f1f5f9; border-radius:3px; overflow:hidden; }
.or-funnel-bar { height:100%; border-radius:3px; transition:width .5s; min-width:4px; }
.or-funnel-label { font-size:.68rem; font-weight:600; color:#94a3b8; text-transform:uppercase;
  letter-spacing:.05em; }
.or-funnel-arrow { font-size:1rem; color:#d1d5db; flex-shrink:0; align-self:center;
  margin-bottom:1.2rem; }

/* Activity feed */
.or-act-row { display:flex; align-items:center; gap:1rem; padding:.75rem 1rem;
  border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }
.or-act-row:last-child { border-bottom:none; }
.or-act-info { flex:1; min-width:160px; }
.or-act-name { font-size:.875rem; font-weight:600; color:#0f172a; }
.or-act-sub { font-size:.72rem; color:#94a3b8; margin-top:.1rem; }
.or-act-badges { display:flex; gap:.375rem; flex-wrap:wrap; flex:2; }
.or-act-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem;
  font-weight:600; padding:.2rem .5rem; border-radius:5px; white-space:nowrap; }
.or-act-green { background:#f0fdf4; color:#15803d; border:1px solid #bbf7d0; }
.or-act-blue  { background:#eff6ff; color:#1d4ed8; border:1px solid #bfdbfe; }
.or-act-red   { background:#fef2f2; color:#dc2626; border:1px solid #fecaca; }
.or-act-amber { background:#fffbeb; color:#d97706; border:1px solid #fcd34d; }
.or-act-time  { font-size:.72rem; color:#94a3b8; white-space:nowrap; flex-shrink:0; }

/* ══════════════════════════════════════════════════════════════════════════════
   SEITEN-DOKTOR — Befund-Hero, Behandlungsplan-Blöcke, IST/SOLL, Aktionen
   ══════════════════════════════════════════════════════════════════════════════ */
.doc-hero { display:flex; gap:1.5rem; align-items:flex-start; flex-wrap:wrap; }
.doc-hero-main { flex:1; min-width:240px; }
.doc-label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:#94a3b8; }
.doc-kernbefund { font-size:1.02rem; font-weight:600; color:#1e293b; line-height:1.5; margin:.1rem 0 .55rem; }
.doc-plan { display:flex; gap:.45rem; font-size:.9rem; color:var(--c-brand-800); background:var(--c-brand-50);
  border:1px solid var(--c-brand-200); border-radius:9px; padding:.55rem .8rem; line-height:1.5; }
.doc-plan b { color:var(--c-brand-700); white-space:nowrap; }

/* Score-Ring (Wert + Farbe per inline --p / --c) */
.doc-ring { --p:0; --c:#94a3b8; width:92px; height:92px; border-radius:50%; flex-shrink:0;
  background:conic-gradient(var(--c) calc(var(--p)*1%), #e8edf3 0); display:flex;
  align-items:center; justify-content:center; }
.doc-ring-inner { width:70px; height:70px; border-radius:50%; background:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center; }
.doc-ring-val { font-size:1.55rem; font-weight:800; line-height:1; }
.doc-ring-lbl { font-size:.53rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; margin-top:.12rem; }

.doc-pills { display:flex; gap:.4rem; flex-wrap:wrap; margin-top:.8rem; }
.doc-pill { font-size:.72rem; font-weight:600; padding:.22rem .6rem; border-radius:999px; border:1px solid transparent; cursor:default; }
.doc-pill-green { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }
.doc-pill-amber { background:#fef3c7; color:#b45309; border-color:#fde68a; }
.doc-pill-red   { background:#fee2e2; color:#b91c1c; border-color:#fecaca; }
.doc-pill-blue  { background:var(--c-brand-50); color:var(--c-brand-700); border-color:var(--c-brand-200); }
.doc-pill-gray  { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }

.doc-progress { display:flex; align-items:center; gap:.7rem; margin-top:.95rem; padding-top:.85rem;
  border-top:1px solid #eef2f6; flex-wrap:wrap; }
.doc-progress-track { flex:1; min-width:110px; max-width:280px; height:7px; background:#e2e8f0; border-radius:4px; overflow:hidden; }
.doc-progress-fill { height:100%; background:#22c55e; border-radius:4px; transition:width .4s ease; }

.doc-why { margin-top:.8rem; }
.doc-why > summary { cursor:pointer; font-size:.78rem; font-weight:600; color:var(--c-brand-500); list-style:none; }
.doc-why > summary::-webkit-details-marker { display:none; }
.doc-why > summary:hover { color:var(--c-brand-600); }
.doc-why-body { margin-top:.6rem; display:flex; flex-direction:column; gap:.55rem; font-size:.84rem; color:#334155; line-height:1.55; }
.doc-why-body .src { border-left:3px solid var(--c,var(--c-brand-500)); padding-left:.65rem; }

/* Export-CTA (der ehrliche nächste Schritt) */
.doc-export { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  background:var(--c-brand-50); border:1px solid var(--c-brand-200);
  border-radius:12px; padding:.85rem 1.1rem; margin:1.4rem 0; }
.doc-export-txt { flex:1; min-width:200px; font-size:.84rem; color:var(--c-brand-800); line-height:1.5; }

/* Abschnitts-Überschriften */
.doc-section { margin:1.75rem 0 .8rem; }
.doc-section-title { font-size:1.08rem; font-weight:700; color:#0f172a; margin:0 0 .15rem; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.doc-section-sub { font-size:.82rem; color:#64748b; line-height:1.5; }

/* Block-Karte (aufklappbar) */
.doc-block { border:1px solid #e2e8f0; border-radius:10px; margin-bottom:.55rem; background:#fff; }
.doc-block[open] { box-shadow:0 2px 10px rgba(0,0,0,.05); border-color:#cbd5e1; }
.doc-block-head { display:flex; align-items:center; gap:.55rem; padding:.7rem .85rem; cursor:pointer; list-style:none; }
.doc-block-head::-webkit-details-marker { display:none; }
.doc-block-head:hover { background:#f8fafc; border-radius:10px; }
.doc-block[open] .doc-block-head { border-radius:10px 10px 0 0; }
.doc-type { font-size:.64rem; font-weight:700; color:#475569; background:#f1f5f9; border-radius:5px;
  padding:.16rem .5rem; white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; flex-shrink:0; }
.doc-verdikt { font-size:.66rem; font-weight:700; border-radius:5px; padding:.16rem .5rem; white-space:nowrap; border:1px solid; flex-shrink:0; }
.doc-preview { flex:1; min-width:0; font-size:.84rem; color:#475569; line-height:1.45;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-chevron { color:#94a3b8; font-size:.7rem; transition:transform .2s; flex-shrink:0; }
.doc-block[open] .doc-chevron { transform:rotate(90deg); }
.doc-block-body { padding:.2rem .85rem .85rem; }
.doc-reason { font-size:.86rem; color:#1e293b; line-height:1.55; margin:.5rem 0; }

/* IST → SOLL untereinander */
.doc-istsoll { border:1px solid #e2e8f0; border-radius:8px; overflow:hidden; margin:.55rem 0; }
.doc-ist { background:#fef2f2; padding:.5rem .7rem; font-size:.83rem; color:#7f1d1d; line-height:1.5; border-bottom:1px solid #fee2e2; white-space:pre-wrap; }
.doc-soll { background:#f0fdf4; padding:.5rem .7rem; font-size:.83rem; color:#14532d; line-height:1.5; white-space:pre-wrap; }
.doc-io-lbl { font-size:.61rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; display:block; margin-bottom:.18rem; }
.doc-ist .doc-io-lbl { color:#dc2626; } .doc-soll .doc-io-lbl { color:#16a34a; }

/* Evidenz / Belege in Klartext */
.doc-evidence { font-size:.8rem; color:#475569; background:#f8fafc; border:1px solid #e2e8f0; border-radius:7px; padding:.5rem .7rem; margin:.5rem 0; line-height:1.5; }
.doc-tags { display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.4rem; }
.doc-tag { font-size:.72rem; font-weight:600; padding:.16rem .5rem; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; color:#475569; }

/* Aktions-Zeile */
.doc-actions { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.6rem; }
.doc-microcopy { font-size:.72rem; color:#94a3b8; flex-basis:100%; line-height:1.4; margin-top:-.05rem; }
.doc-done { font-size:.8rem; font-weight:600; color:#16a34a; }
.doc-muted { opacity:.55; }

/* ══ Seiten-Doktor 2.0 — Workflow-Band, einheitliche Empfehlungs-Karte ══════════ */

/* Workflow-Stepper: macht das mentale Modell sichtbar (Entwurf → Export → Website) */
.doc-flow { background:#fff; border:1px solid var(--border); border-radius:12px; padding:.85rem 1.05rem; margin-bottom:1rem; }
.doc-flow-steps { display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.doc-flow-step { display:flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600; color:#94a3b8; }
.doc-flow-step .doc-flow-no { width:22px; height:22px; border-radius:50%; background:#f1f5f9; color:#94a3b8;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; flex-shrink:0; }
.doc-flow-step.done { color:#16a34a; }
.doc-flow-step.done .doc-flow-no { background:#dcfce7; color:#16a34a; }
.doc-flow-step.active { color:var(--c-brand-700); }
.doc-flow-step.active .doc-flow-no { background:var(--c-brand-500); color:#fff; box-shadow:0 0 0 3px var(--c-brand-100); }
.doc-flow-arrow { color:#cbd5e1; font-size:.9rem; }
.doc-flow-legend { margin-top:.7rem; padding-top:.7rem; border-top:1px solid #f1f5f9;
  display:flex; gap:1.1rem; flex-wrap:wrap; font-size:.78rem; color:#64748b; line-height:1.5; }
.doc-flow-legend b { color:#334155; }
.doc-flow-legend .k { display:inline-flex; align-items:center; gap:.3rem; }

/* Einheitliche Empfehlungs-Karte — EIN Muster für alle Maßnahmen-Typen */
.doc-rec { border:1px solid var(--border); border-left-width:3px; border-radius:10px; background:#fff;
  padding:.8rem .9rem; margin-bottom:.6rem; }
.doc-rec.lever-hoch   { border-left-color:#ef4444; }
.doc-rec.lever-mittel { border-left-color:#f59e0b; }
.doc-rec.lever-niedrig{ border-left-color:#cbd5e1; }
.doc-rec.is-applied   { border-left-color:#16a34a; background:#f6fef9; }
.doc-rec.is-rejected  { opacity:.55; }
.doc-rec-head { display:flex; align-items:center; gap:.45rem; flex-wrap:wrap; margin-bottom:.4rem; }
.doc-what { font-size:.92rem; font-weight:700; color:#0f172a; line-height:1.4; margin:.1rem 0 .35rem; }

/* Art-der-Änderung-Badge (ersetzt/ergänzt/neu/Meta/Typ/entfernt) — ersetzt das Verb im Button */
.doc-badge { font-size:.66rem; font-weight:700; padding:.16rem .5rem; border-radius:6px; white-space:nowrap;
  border:1px solid transparent; text-transform:uppercase; letter-spacing:.03em; }
.doc-badge-replace { background:var(--c-brand-50); color:var(--c-brand-700); border-color:var(--c-brand-200); }
.doc-badge-add     { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.doc-badge-new     { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.doc-badge-meta    { background:#fef3c7; color:#b45309; border-color:#fde68a; }
.doc-badge-type    { background:#f1f5f9; color:#475569; border-color:#e2e8f0; }
.doc-badge-remove  { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }

/* „in Ordnung"-Sammelzeile statt vieler grüner Einzelkarten */
.doc-ok { border:1px solid #bbf7d0; background:#f0fdf4; border-radius:10px; margin-bottom:.6rem; }
.doc-ok > summary { cursor:pointer; list-style:none; padding:.7rem .9rem; display:flex; align-items:center; gap:.5rem;
  font-size:.86rem; font-weight:600; color:#15803d; }
.doc-ok > summary::-webkit-details-marker { display:none; }
.doc-ok > summary:hover { background:#ecfdf3; border-radius:10px; }
.doc-ok-list { padding:.2rem .9rem .8rem; display:flex; flex-direction:column; gap:.4rem; }
.doc-ok-item { display:flex; align-items:flex-start; gap:.5rem; font-size:.82rem; color:#475569; line-height:1.45; }
.doc-ok-item .doc-type { flex-shrink:0; }

/* Inline-Hilfe „Was bedeutet Übernehmen?" */
.doc-btn-help { font-size:.72rem; color:#94a3b8; background:none; border:none; cursor:pointer; padding:.1rem .2rem; }
.doc-btn-help:hover { color:var(--c-brand-500); text-decoration:underline; }

/* ══ Seiten-Doktor 3.0 — Prioritäten-Liste (Lighthouse/Semrush-Muster) ══════════ */

/* Kompakter Befund-Kopf (schlanker als die alte Hero-Karte) */
.doc-head { display:flex; gap:1.2rem; align-items:flex-start; flex-wrap:wrap; }
.doc-head .doc-ring { width:78px; height:78px; }
.doc-head .doc-ring-inner { width:60px; height:60px; }
.doc-head .doc-ring-val { font-size:1.3rem; }

/* Zähler-Leiste über der Liste */
.doc-counts { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; margin:0 0 .7rem; font-size:.8rem; }
.doc-counts-title { font-size:.9rem; font-weight:700; color:#0f172a; margin-right:.2rem; }
.doc-count { display:inline-flex; align-items:center; gap:.4rem; font-weight:600; color:#475569; }
.doc-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; display:inline-block; }
.doc-dot-hoch   { background:#ef4444; }
.doc-dot-mittel { background:#f59e0b; }
.doc-dot-niedrig{ background:#cbd5e1; }
.doc-count-ok { margin-left:auto; color:#16a34a; font-weight:600; }

/* Eine Maßnahme = eine eingeklappte Zeile, Details auf Klick */
.doc-task { border:1px solid var(--border); border-radius:10px; margin-bottom:.5rem; background:#fff; transition:box-shadow .15s; }
.doc-task.lever-hoch   { border-left:3px solid #ef4444; }
.doc-task.lever-mittel { border-left:3px solid #f59e0b; }
.doc-task.lever-niedrig{ border-left:3px solid #cbd5e1; }
.doc-task.is-done { opacity:.6; }
.doc-task[open] { box-shadow:0 3px 12px rgba(15,23,42,.07); }
.doc-task-head { display:flex; align-items:center; gap:.5rem; padding:.6rem .8rem; cursor:pointer; list-style:none; }
.doc-task-head::-webkit-details-marker { display:none; }
.doc-task-head:hover { background:#f8fafc; border-radius:10px; }
.doc-task[open] .doc-task-head { border-bottom:1px solid #f1f5f9; border-radius:10px 10px 0 0; background:#fcfcfd; }
.doc-task-title { flex:1; min-width:0; font-size:.87rem; font-weight:600; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.doc-task[open] .doc-task-title { white-space:normal; }
.doc-task[open] .doc-chevron { transform:rotate(90deg); }
.doc-task-body { padding:.55rem .85rem .8rem; }
.doc-scope { font-size:.58rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-brand-700);
  background:var(--c-brand-50); border:1px solid var(--c-brand-200); border-radius:5px; padding:.1rem .4rem; flex-shrink:0; }

/* Schubladen (Sekundäres: seitenweit, eigene Seiten, Laborwerte, erledigt) */
.doc-drawer { margin-top:.7rem; border:1px solid var(--border); border-radius:10px; background:#fff; }
.doc-drawer > summary { cursor:pointer; list-style:none; padding:.7rem .85rem; font-size:.86rem; font-weight:600;
  color:#334155; display:flex; align-items:center; gap:.55rem; }
.doc-drawer > summary::-webkit-details-marker { display:none; }
.doc-drawer > summary:hover { background:#f8fafc; border-radius:10px; }
.doc-drawer[open] > summary { border-bottom:1px solid #f1f5f9; }
.doc-drawer[open] .doc-chevron { transform:rotate(90deg); }
.doc-drawer-count { margin-left:auto; font-size:.74rem; font-weight:700; color:#64748b; background:#f1f5f9; border-radius:999px; padding:.1rem .5rem; }
.doc-drawer-body { padding:.7rem .85rem .85rem; }

/* ══ Seiten-Doktor 4.0 — Befund-Report in EINER schmalen Lesespalte ════════════════
   Belegt (Baymard/NN/G): Fließtext >80 Zeichen/Zeile wird unleserlich; Audit-Tools
   (Lighthouse/Semrush/Ahrefs) zentrieren eine schmale Spalte und zeigen die Befunde
   OFFEN (kein Akkordeon-Wald). Severity rot/orange/grau + Icon, nicht nur Farbe. */
.doc-page { max-width:940px; margin:0 auto; }
.doc-page .doc-kernbefund { max-width:60ch; }   /* Lesemaß für den Befund-Satz */
.doc-page .doc-reason { max-width:68ch; }        /* Lesemaß für Begründungen */
.doc-prose { max-width:68ch; }

/* Severity-Überschrift über jeder Gruppe */
.doc-sev { display:flex; align-items:center; gap:.5rem; margin:1.5rem 0 .65rem; font-size:.96rem;
  font-weight:800; letter-spacing:-.01em; }
.doc-sev:first-of-type { margin-top:.4rem; }
.doc-sev-icon { width:19px; height:19px; border-radius:50%; flex-shrink:0; display:inline-flex;
  align-items:center; justify-content:center; font-size:.72rem; font-weight:900; color:#fff; line-height:1; }
.doc-sev-n { font-weight:700; font-size:.78rem; color:#94a3b8; background:#f1f5f9; border-radius:999px; padding:.05rem .5rem; }
.doc-sev-hoch   { color:#b91c1c; } .doc-sev-hoch .doc-sev-icon   { background:#ef4444; }
.doc-sev-mittel { color:#b45309; } .doc-sev-mittel .doc-sev-icon { background:#f59e0b; }
.doc-sev-niedrig{ color:#475569; } .doc-sev-niedrig .doc-sev-icon{ background:#94a3b8; }

/* Eine Maßnahme = eine offene Karte (severity-farbiger linker Rand) */
.doc-find { border:1px solid var(--border); border-left:4px solid #cbd5e1; border-radius:10px;
  background:#fff; padding:.8rem .95rem .85rem; margin-bottom:.6rem; }
.doc-find.sev-hoch   { border-left-color:#ef4444; }
.doc-find.sev-mittel { border-left-color:#f59e0b; }
.doc-find.sev-niedrig{ border-left-color:#cbd5e1; }
.doc-find.is-applied { border-left-color:#16a34a; background:#f6fef9; }
.doc-find.is-rejected{ opacity:.5; }
.doc-find-head { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; margin-bottom:.45rem; }
.doc-find-ctx { font-size:.78rem; color:#64748b; min-width:0; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100%; }

/* ══ Seiten-Doktor 5.0 — INHALT-DOKUMENT (die Lösung = optimierter/neuer Text) ═════
   Patrick-Grundsatz: nicht der SEO-Bericht ist das Produkt, sondern die fertigen
   optimierten/neuen Inhalte. Seite = lebendiges Dokument der Blöcke; je Block die
   bessere Fassung sichtbar daneben; „Warum?" nur auf Abruf. Übernehmen → Text steht da. */

/* Diagnose-Zeile (SEO-Erklärung eingeklappt) */
.doc-diag { border:1px solid var(--border); border-radius:10px; background:#fff; margin-bottom:1rem; }
.doc-diag > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:.7rem; padding:.6rem .85rem; }
.doc-diag > summary::-webkit-details-marker { display:none; }
.doc-diag > summary:hover { background:#f8fafc; border-radius:10px; }
.doc-diag[open] > summary { border-bottom:1px solid #f1f5f9; }
.doc-diag[open] .doc-chevron { transform:rotate(90deg); }
.doc-diag-score { width:34px; height:34px; flex-shrink:0; border:2px solid #94a3b8; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.92rem; font-weight:800; }
.doc-diag-lead { flex:1; min-width:0; font-size:.88rem; color:#334155; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-diag-lead strong { color:#0f172a; }
.doc-diag-body { padding:.85rem .95rem 1rem; }
.doc-diag-body .doc-kernbefund { max-width:64ch; }

/* Aktionsleiste über dem Dokument */
.doc-istbanner { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; padding:.6rem .9rem;
  border-radius:10px; margin-bottom:1.1rem; font-size:.86rem; line-height:1.5; }
.doc-istbanner > span { flex:1; min-width:240px; }
.doc-istbanner.is-live { background:#f0fdf4; border:1px solid #bbf7d0; color:#166534; }
.doc-istbanner.is-warn { background:#fffbeb; border:1px solid #fde68a; color:#92400e; }
/* Block 2 — Selbstkontrolle/Reflexion: ruhiges Slate, kein Alarm (Doktrin: Indiz, kein Verbot). */
.doc-istbanner.is-reflexion { background:#f8fafc; border:1px solid #cbd5e1; color:#334155; }
/* Block 3 — Befund-Gedächtnis: ruhiges Slate-Band (Buchführung, kein Alarm). */
.doc-istbanner.is-gedaechtnis { background:#f1f5f9; border:1px solid #cbd5e1; color:#334155; }
/* Slice 1 — Keyword-Fokus-Karte: Detail-/Empfehlungs-/Beleg-Zeilen ruhig, app-nativ (kein Inline-Style).
   Belege sind der Trust-Spine: gedämpft, aber lesbar — jede Empfehlung trägt ihren prüfbaren Beleg. */
.doc-fokus-zeile { display:block; margin-top:.3rem; font-size:.8rem; opacity:.9; }
.doc-fokus-empf  { display:block; margin-top:.5rem; font-size:.85rem; }
.doc-fokus-beleg { display:block; margin:.12rem 0 0 1rem; font-size:.74rem; color:#64748b; }
.doc-fokus-beleg .doc-fokus-typ { font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.66rem; }
/* „seit N Läufen offen" — sanfter Dringlichkeits-Hinweis, kein Rot. */
.doc-seit-badge { display:inline-block; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#92400e; background:#fffbeb; border:1px solid #fde68a; border-radius:.5rem; padding:.08rem .4rem; margin-left:.4rem; vertical-align:middle; }
.doc-actionbar { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; padding:.7rem .95rem;
  background:#0f172a; border-radius:10px; margin-bottom:1.1rem; }
.doc-actionbar-t { flex:1; min-width:200px; display:flex; flex-direction:column; gap:.1rem; }
.doc-actionbar-t > strong { color:#fff; font-size:.98rem; }
.doc-actionbar-sub { font-size:.78rem; color:#94a3b8; }

/* Das Dokument */
.doc-doc { display:flex; flex-direction:column; gap:1.1rem; }
.doc-sech { font-size:.8rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:#94a3b8;
  margin:1.6rem 0 .2rem; }

/* Sektion: logischer Abschnitt der Seite (Hero, Leistungen, FAQ …) — bündelt die Blöcke,
   so wie ein Senior die Seite liest. Linke Farbkante = holistisches Sektions-Urteil. */
.doc-sek { border:1px solid var(--border); border-radius:12px; background:#fff; overflow:hidden;
  border-left:4px solid #cbd5e1; }
.doc-sek-green { border-left-color:#22c55e; }
.doc-sek-amber { border-left-color:#f59e0b; }
.doc-sek-red { border-left-color:#ef4444; }
.doc-sek-neu { border:1px dashed var(--c-brand-200); border-left:4px solid var(--c-brand-300); background:#fbfaff; }
.doc-sek-head { padding:.6rem .85rem; background:#f8fafc; border-bottom:1px solid #eef2f7; }
.doc-sek-neu .doc-sek-head { background:var(--c-brand-50); border-bottom-color:var(--c-brand-200); }
.doc-sek-titlerow { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.doc-sek-name { font-size:.96rem; font-weight:800; color:#0f172a; }
.doc-sek-eyebrow { font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--c-brand-500); background:var(--c-brand-50); border-radius:5px; padding:.12rem .45rem; }
.doc-sek-htype { font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:#64748b; background:#f1f5f9; border-radius:4px; padding:.1rem .4rem; }
.doc-sek-badge { font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.04em;
  border-radius:6px; padding:.16rem .5rem; white-space:nowrap; }
.doc-sek-badge-green { background:#dcfce7; color:#15803d; }
.doc-sek-badge-amber { background:#fef3c7; color:#92400e; }
.doc-sek-badge-red { background:#fee2e2; color:#b91c1c; }
.doc-sek-funktion { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#475569; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:5px; padding:.1rem .4rem;
  white-space:nowrap; cursor:help; }
.doc-sek-meta { font-size:.72rem; color:#94a3b8; font-weight:600; margin-top:.2rem; }
.doc-sek-urteil { font-size:.86rem; color:#334155; line-height:1.5; margin-top:.4rem; }
.doc-sek-body { display:flex; flex-direction:column; gap:.6rem; padding:.7rem .85rem .85rem; }

/* Ein Block der Seite */
.doc-blk { border:1px solid var(--border); border-radius:10px; background:#fff; padding:.7rem .9rem .8rem; }
.doc-blk.has-sugg { border-color:#cbd5e1; box-shadow:0 1px 4px rgba(15,23,42,.04); }
.doc-blk.is-new { border:1px dashed var(--c-brand-200); background:#fbfaff; }
.doc-blk.to-remove .doc-blk-text { text-decoration:line-through; opacity:.5; }
.doc-blk-bar { display:flex; align-items:center; gap:.5rem; margin-bottom:.35rem; }
.doc-blk-type { font-size:.62rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  color:#64748b; background:#f1f5f9; border-radius:5px; padding:.14rem .45rem; }
.doc-type-new { color:var(--c-brand-700); background:var(--c-brand-50); }
.doc-blk.is-merge { border:1px dashed var(--c-brand-200); background:#f8f8ff; }
.doc-type-merge { color:var(--c-brand-800); background:var(--c-brand-100); }
/* W2 — Aufwand-Chip (Impact pro Aufwand) + Sequenzierungs-Leiste „Wo anfangen?" */
.doc-auf { display:inline-flex; align-items:center; gap:.2rem; font-size:.62rem; font-weight:700;
  border-radius:5px; padding:.14rem .45rem; margin-left:.35rem; white-space:nowrap; }
.doc-auf-klein  { color:#15803d; background:#dcfce7; }
.doc-auf-mittel { color:#b45309; background:#fef3c7; }
.doc-auf-gross  { color:#b91c1c; background:#fee2e2; }
.doc-seq { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:.55rem 0 1rem;
  padding:.55rem .8rem; background:#fafafa; border:1px solid #eef0f4; border-radius:10px; }
.doc-seq-lead { font-weight:700; font-size:.78rem; color:#475569; margin-right:.2rem; }
.doc-seq-step { font-size:.74rem; font-weight:600; border-radius:7px; padding:.22rem .55rem; }
.doc-seq-step b { font-size:.82rem; }
.doc-seq-step em { font-style:normal; opacity:.7; font-weight:500; }
.doc-seq-arrow { color:#cbd5e1; font-weight:700; }
/* W4 — Verlinkungs-Empfehlungen aus der Diagnose (vor dem engine-Plan) */
.doc-links-diag { border-left:3px solid var(--c-brand-400); padding-left:.7rem; }
.doc-blk-newtyp { font-size:.66rem; color:#94a3b8; }
.doc-blk-opt { font-size:.68rem; font-weight:700; color:#16a34a; background:#dcfce7; border-radius:5px; padding:.14rem .45rem; }
.doc-blk-stark { font-size:.68rem; font-weight:600; color:#15803d; background:transparent; border:1px solid #bbf7d0; border-radius:5px; padding:.12rem .42rem; cursor:help; }
.doc-blk-edit { margin-left:auto; background:none; border:none; cursor:pointer; font-size:.85rem; opacity:.35; padding:.1rem .2rem; line-height:1; }
.doc-blk-edit:hover { opacity:1; }
.doc-blk-text { font-size:.92rem; color:#1e293b; line-height:1.62; white-space:pre-wrap; max-width:72ch; }
.doc-blk-editor { margin-top:.55rem; }

/* D: FAQ als echte Frage/Antwort-Liste statt pre-wrap-Textwand */
.doc-faq { margin:0; max-width:72ch; display:flex; flex-direction:column; gap:.55rem; }
.doc-faq-q { font-size:.9rem; font-weight:700; color:#0f172a; line-height:1.45;
  padding-left:1.3rem; position:relative; }
.doc-faq-q::before { content:"F"; position:absolute; left:0; top:0; font-size:.62rem; font-weight:800;
  color:var(--c-brand-700); background:var(--c-brand-50); border-radius:4px; padding:.05rem .3rem; line-height:1.35; }
.doc-faq-a { margin:0 0 .15rem; font-size:.88rem; color:#334155; line-height:1.6;
  padding-left:1.3rem; position:relative; }
.doc-faq-a::before { content:"A"; position:absolute; left:0; top:.05rem; font-size:.62rem; font-weight:800;
  color:#15803d; background:#dcfce7; border-radius:4px; padding:.05rem .3rem; line-height:1.35; }

/* B: gefaltete Ergänzung — kompakter Hinweis statt zweitem großem Textkasten */
.doc-fold { margin-top:.5rem; border-left:3px dashed var(--c-brand-200); background:#fafaff;
  border-radius:0 8px 8px 0; padding:.5rem .75rem; }
.doc-fold-t { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--c-brand-700); }
.doc-fold-r { font-size:.82rem; color:#475569; line-height:1.5; margin-top:.25rem; }
.doc-fold-prev { font-size:.8rem; color:#64748b; line-height:1.55; margin-top:.3rem; max-width:72ch;
  white-space:pre-wrap; border-left:2px solid #e2e8f0; padding-left:.55rem; }

/* E: „Du vs. Konkurrenz" — schon berechneter Wettbewerbs-Vergleich, oben sichtbar statt vergraben */
.doc-vs { margin:0 0 1rem; border:1px solid #e2e8f0; border-radius:10px; background:#fff;
  padding:.7rem .9rem .8rem; }
.doc-vs-head { display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; margin-bottom:.55rem; }
.doc-vs-head strong { font-size:.92rem; color:#0f172a; }
.doc-vs-stand { font-size:.72rem; color:#94a3b8; }
.doc-vs-grid { display:flex; flex-wrap:wrap; gap:1.4rem; }
.doc-vs-cell { flex:1; min-width:170px; }
.doc-vs-label { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }
.doc-vs-num { font-size:1.35rem; font-weight:800; margin-top:.15rem; line-height:1.1; }
.doc-vs-num span { font-size:.78rem; font-weight:600; color:#94a3b8; }
.doc-vs-bar { height:6px; border-radius:999px; background:#f1f5f9; overflow:hidden; margin:.35rem 0 .25rem; }
.doc-vs-bar span { display:block; height:100%; border-radius:999px; }
.doc-vs-sub { font-size:.76rem; color:#64748b; line-height:1.45; }
.doc-vs-link { margin-top:.3rem; background:none; border:none; padding:0; cursor:pointer;
  font-size:.76rem; font-weight:600; color:var(--c-brand-700); text-decoration:none; }
.doc-vs-link:hover { text-decoration:underline; }

/* U4/Teil 2+3: Interne Verlinkung + Weitere Seiten (im Doktor sichtbar, nicht vergraben) */
.doc-links, .doc-cluster { border:1px solid #e2e8f0; border-radius:10px; background:#fff;
  padding:.75rem .9rem; margin-bottom:1rem; }
.doc-links-empty { display:flex; align-items:center; gap:.9rem; flex-wrap:wrap; justify-content:space-between; }
.doc-links-empty span { font-size:.84rem; color:#475569; line-height:1.5; flex:1; min-width:240px; }
.doc-links-grp { padding:.2rem 0; }
.doc-links-grp + .doc-links-grp { margin-top:.7rem; padding-top:.7rem; border-top:1px solid #f1f5f9; }
.doc-links-h { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:#64748b; margin-bottom:.45rem; }
.doc-links-h em { font-style:normal; color:#0f172a; }
.doc-links-cnt { display:inline-block; font-size:.68rem; font-weight:700; color:var(--c-brand-700);
  background:var(--c-brand-50); border-radius:99px; padding:.05rem .4rem; margin-left:.2rem; }
.doc-link-row { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.84rem;
  padding:.32rem 0; border-bottom:1px solid #f8fafc; }
.doc-link-row:last-child { border-bottom:none; }
.doc-link-anchor { font-weight:600; color:#0f172a; }
.doc-link-arrow { color:#94a3b8; }
.doc-link-ziel { color:#475569; font-family:ui-monospace,monospace; font-size:.8rem; }
.doc-link-realurl { color:#94a3b8; font-size:.72rem; }
.doc-link-state { margin-left:auto; font-size:.7rem; font-weight:700; padding:.1rem .45rem; border-radius:99px; }
.doc-link-state.is-on { color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; }
.doc-link-state.is-off { color:#92400e; background:#fffbeb; border:1px solid #fde68a; }
.doc-links-allon { font-size:.82rem; color:#15803d; margin-top:.5rem; }
.doc-links-none { font-size:.82rem; color:#94a3b8; }
.doc-links-hint { font-size:.76rem; color:#94a3b8; margin-top:.4rem; line-height:1.45; }
.doc-links-foot { font-size:.76rem; color:#94a3b8; margin-top:.6rem; padding-top:.5rem; border-top:1px solid #f1f5f9; }
.doc-cluster-row { padding:.4rem 0; border-bottom:1px solid #f8fafc; }
.doc-cluster-row:last-child { border-bottom:none; }
.doc-cluster-thema { font-size:.86rem; font-weight:600; color:var(--c-brand-700); }
.doc-cluster-pillar { font-size:.66rem; font-weight:700; color:var(--c-brand-700); background:var(--c-brand-50);
  border:1px solid var(--c-brand-200); border-radius:5px; padding:.05rem .35rem; margin-left:.3rem; }
.doc-cluster-grund { font-size:.8rem; color:#64748b; margin-top:.15rem; line-height:1.5; }

/* Vorschlag = die Lösung, direkt unter dem Block.
   30.06. aufs Token-/Karten-System gehoben: echte weiße Karte (Surface + voller Rahmen + weicher
   Schatten) statt flachem Links-Balken auf getöntem Grund. Der Typ-Akzent lebt im linken Rand +
   im farbigen Tag, die Fläche bleibt ruhig weiß (Senior-Look, Stripe/Linear). */
.doc-sugg { margin-top:.7rem; border:1px solid var(--border); border-left:3px solid var(--c-ok-500);
  background:var(--surface-card); border-radius:10px; padding:.8rem .9rem .85rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04); }
.doc-sugg.is-danger { border-left-color:var(--c-bad-500); }
.doc-sugg.is-new { border-left-color:var(--brand); margin-top:0; }
/* Wahrheits-Gate ②: Vorschlag bezieht sich auf einen seit der Untersuchung überarbeiteten Block —
   gedämpft (amber-Akzent), damit klar ist, dass er nicht mehr aktiv anwendbar ist. */
.doc-sugg.is-veraltet { border-left-color:var(--c-warn-500); opacity:.9; }
.doc-sugg.is-veraltet .doc-sugg-tag { color:var(--c-warn-700); }
.doc-sugg-tag { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--c-ok-700); margin-bottom:.45rem; }
.doc-sugg.is-danger .doc-sugg-tag { color:var(--c-bad-700); }
.doc-sugg-text { font-size:.93rem; color:var(--text-strong); line-height:1.62; white-space:pre-wrap; max-width:72ch;
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:8px; padding:.6rem .75rem; }
.doc-sugg-note { font-size:.76rem; color:var(--text-muted); margin-top:.35rem; }
/* Block 1 — IST→SOLL: der echte Bestandstext zuerst (ruhiges Sunken, klar als „aktuell" markiert),
   darunter der Vorschlag. Kein Rot — der Bestand ist kein Fehler, nur der Vergleichsanker. */
.doc-sugg-ist { background:var(--surface-sunken); border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem;
  margin-bottom:.45rem; }
.doc-sugg-ist-lab { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-muted); margin-bottom:.25rem; }
.doc-sugg-ist-txt { font-size:.88rem; color:var(--text); line-height:1.55; white-space:pre-wrap; max-width:72ch; }
.doc-sugg-soll-lab { font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--c-ok-700); margin-bottom:.25rem; }
/* Wort-Diff „Was ändert sich?" — Gelöschtes durchgestrichen-grau, Neues kräftig hervorgehoben (kein Alarm-Rot). */
.doc-sugg-diff { margin-bottom:.45rem; }
.doc-sugg-diff > summary { font-size:.74rem; color:var(--text-muted); cursor:pointer; user-select:none;
  padding:.15rem 0; }
.doc-sugg-diff > summary:hover { color:var(--text); }
.doc-diff { font-size:.88rem; line-height:1.6; white-space:pre-wrap; max-width:72ch; margin-top:.3rem;
  background:var(--surface-card); border:1px solid var(--border); border-radius:8px; padding:.5rem .7rem; }
.doc-diff-del { text-decoration:line-through; color:var(--c-neutral-400); background:var(--c-neutral-100); border-radius:3px; padding:0 .1em; }
.doc-diff-ins { text-decoration:none; color:var(--text-strong); font-weight:600; background:var(--c-warn-100); border-radius:3px; padding:0 .1em; }
/* Block 2/C: editierbarer SOLL-Vorschlag (Patrick passt den Text vor dem Übernehmen an) */
.doc-sugg-edit { width:100%; box-sizing:border-box; font-size:.93rem; color:var(--text-strong); line-height:1.6;
  font-family:inherit; background:var(--surface-card); border:1px solid var(--border); border-radius:8px; padding:.6rem .75rem;
  resize:vertical; min-height:84px; }
.doc-sugg-edit:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft); }
.doc-sugg-badges { display:flex; flex-wrap:wrap; gap:.35rem; margin:.4rem 0 .1rem; }
.doc-sugg-badges:empty { display:none; }
.doc-mini-badge { font-size:.72rem; font-weight:600; padding:.12rem .5rem; border-radius:999px;
  background:var(--c-neutral-100); border:1px solid var(--border); color:var(--c-neutral-600); cursor:default; }
.doc-mini-badge.is-ok  { background:var(--c-ok-50); border-color:var(--c-ok-200); color:var(--c-ok-700); }
.doc-mini-badge.is-warn{ background:var(--c-warn-50); border-color:var(--c-warn-200); color:var(--c-warn-700); }
.doc-mini-badge.is-bad { background:var(--c-bad-50); border-color:var(--c-bad-200); color:var(--c-bad-700); }
.doc-sugg-budget-hinweis { font-size:.74rem; color:#92400e; align-self:center; }
.doc-spinner { width:16px; height:16px; border:2px solid #fde68a; border-top-color:#92400e;
  border-radius:50%; display:inline-block; animation:spin .8s linear infinite; vertical-align:middle; }
/* Schlanke, ruhige Lade-/Hintergrund-Leiste (kein Alarm-Gelb, keine große Box). */
.doc-verdicht-strip { display:flex; align-items:center; gap:.5rem; margin:0 0 1rem;
  padding:.5rem .8rem; background:var(--surface,#f8fafc); border:1px solid var(--border,#e2e8f0);
  border-radius:8px; font-size:.83rem; color:var(--text-muted,#475569); }
.doc-spinner-sm { width:13px; height:13px; border:2px solid #cbd5e1; border-top-color:var(--c-brand-500);
  border-radius:50%; display:inline-block; flex:0 0 auto; animation:spin .8s linear infinite; }
.doc-sugg-newtitle { font-size:.92rem; font-weight:600; color:var(--c-brand-800); line-height:1.5; margin-bottom:.5rem; max-width:72ch; }

/* „Warum?" — auf Abruf */
.doc-detail-btn { background:none; border:none; cursor:pointer; font-size:.76rem; color:#64748b; padding:.1rem .2rem; }
.doc-detail-btn:hover { color:#334155; text-decoration:underline; }
.doc-detail { margin-top:.55rem; padding-top:.5rem; border-top:1px dashed #e2e8f0; }
.doc-btn-danger { background:#dc2626; color:#fff; }
.doc-btn-danger:hover { background:#b91c1c; }

/* ══ Seiten-Doktor 6.0 — Sticky-Cockpit + Fokus-Modus/Stubs (Recherche 16.06.) ════════
   Belegt: Lighthouse „Passed audits" eingeklappt + GitHub „Files changed" (Unverändertes
   strukturell kollabiert) + sticky Summary (Wayfinding). Nur Darstellung, kein Wiring. */

/* .content hat overflow-x:hidden → erzeugt einen Scroll-/Clipping-Kontext, der position:sticky
   bricht. Für die Doktor-Seite gezielt neutralisieren (Spalte ist 940px zentriert, kein H-Overflow).
   Sticky ist jetzt die Tab-Leiste (.doc-tabs), nicht mehr das Cockpit. */
.content:has(.doc-tabs) { overflow: visible; }

.doc-cockpit { position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:1rem;
  flex-wrap:wrap; padding:.6rem .9rem; margin:0 0 1rem; background:#0f172a; border-radius:12px;
  box-shadow:0 6px 22px rgba(15,23,42,.18); }
.doc-cockpit-main { display:flex; align-items:center; gap:.7rem; flex:1; min-width:200px; }
.doc-cockpit-score { width:36px; height:36px; flex-shrink:0; border:2px solid #64748b; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.95rem; font-weight:800; background:#fff; }
.doc-cockpit-txt { display:flex; flex-direction:column; gap:.05rem; min-width:0; }
.doc-cockpit-txt > strong { color:#fff; font-size:.95rem; line-height:1.25; }
.doc-cockpit-strat { font-size:.76rem; color:#94a3b8; line-height:1.3; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; max-width:52ch; }
.doc-cockpit-stats { display:flex; gap:.4rem; flex-wrap:wrap; align-items:center; }
.doc-cockpit-chip { font-size:.74rem; font-weight:700; padding:.2rem .55rem; border-radius:999px; white-space:nowrap; }
.doc-cockpit-chip.is-todo { background:rgba(245,158,11,.22); color:#fcd34d; }
.doc-cockpit-chip.is-ok { background:rgba(34,197,94,.18); color:#86efac; }
.doc-cockpit-chip.is-applied { background:rgba(99,102,241,.24); color:var(--c-brand-200); }
.doc-cockpit-actions { display:flex; align-items:center; gap:.5rem; }
.doc-mode { display:inline-flex; background:#f1f5f9; border:1px solid var(--border); border-radius:8px; padding:2px; }
.doc-mode-btn { border:none; background:transparent; color:#64748b; font-size:.78rem; font-weight:600;
  padding:.3rem .65rem; border-radius:6px; cursor:pointer; white-space:nowrap; }
.doc-mode-btn:hover { color:#0f172a; }
.doc-mode-btn.is-active { background:#fff; color:#0f172a; box-shadow:0 1px 2px rgba(15,23,42,.12); }
.doc-mode-btn.is-active:hover { color:#0f172a; }
.doc-cockpit-prog { flex-basis:100%; height:4px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden; }
.doc-cockpit-prog > span { display:block; height:100%; background:#22c55e; border-radius:3px; transition:width .4s ease; }

/* Stub = kollabierter Block/Sektion ohne To-do. Text bleibt im DOM (copyDoc/Lesemodus). */
.doc-stub { border:1px solid var(--border); border-radius:10px; background:#fff; }
.doc-stub > summary { cursor:pointer; list-style:none; }
.doc-stub > summary::-webkit-details-marker { display:none; }
.doc-stub[open] > summary .doc-chevron { transform:rotate(90deg); }

/* Block-Stub: dünne 1-Zeile */
.doc-blk-stubhead { display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem; }
.doc-blk-stub > summary:hover { background:#f8fafc; border-radius:10px; }
.doc-blk-stubprev { flex:1; min-width:0; font-size:.83rem; color:#64748b; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.doc-blk-okmark { color:#16a34a; font-weight:800; font-size:.85rem; flex-shrink:0; }
.doc-blk-okmark.is-applied { color:var(--c-brand-700); }
.doc-blk-stubbody { padding:.55rem .85rem .8rem; border-top:1px solid #f1f5f9; }
.doc-blk-stubedit { margin-top:.5rem; }
.doc-blk-stubedit .doc-blk-edit { opacity:.7; font-size:.78rem; }
.doc-blk-stubedit .doc-blk-edit:hover { opacity:1; }

/* Sektions-Stub: eine Zeile pro To-do-freier Sektion (Hero · stark · 4 Blöcke) */
.doc-sek-stub { overflow:hidden; border-left:4px solid #cbd5e1; }
.doc-sek-stub.doc-sek-green { border-left-color:#22c55e; }
.doc-sek-stub.doc-sek-amber { border-left-color:#f59e0b; }
.doc-sek-stub.doc-sek-red { border-left-color:#ef4444; }
.doc-sek-stub > summary.doc-sek-stubhead { display:flex; align-items:center; gap:.55rem; padding:.65rem .85rem; background:#f8fafc; }
.doc-sek-stub > summary:hover { background:#f1f5f9; }
.doc-sek-stub[open] > summary { border-bottom:1px solid #eef2f7; }
.doc-stub-mark { color:#16a34a; font-weight:800; flex-shrink:0; }
.doc-sek-stub .doc-sek-name { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-stub-count { margin-left:auto; font-size:.72rem; color:#94a3b8; font-weight:600; white-space:nowrap; }
.doc-sek-stubbody { padding:.7rem .85rem .85rem; display:flex; flex-direction:column; gap:.5rem; }
.doc-stub-headline { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; padding-bottom:.4rem; border-bottom:1px solid #f1f5f9; }
.doc-stub-headtext { font-size:.92rem; color:#0f172a; }

@media (max-width:768px) {
  .doc-cockpit { gap:.6rem; }
  .doc-cockpit-strat { max-width:30ch; }
}

/* ══ Seiten-Doktor 7.0 — Tabs nach Änderungs-Art (sticky) + gruppierte Maßnahmen (Recherche 16.06) ══ */
.doc-tabs { position:sticky; top:0; z-index:30; display:flex; gap:.15rem; border-bottom:2px solid var(--border);
  margin:0 0 1rem; flex-wrap:wrap; align-items:center; background:var(--bg,#f8fafc);
  padding:.15rem 0 0; box-shadow:0 6px 10px -8px rgba(15,23,42,.12); }
.doc-tab { border:none; background:none; cursor:pointer; font-size:.86rem; font-weight:600; color:#64748b;
  padding:.55rem .8rem; border-bottom:2px solid transparent; margin-bottom:-2px; display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap; }
.doc-tab:hover { color:#334155; }
.doc-tab.is-active { color:var(--primary,var(--c-brand-700)); border-bottom-color:var(--primary,var(--c-brand-700)); }
.doc-tab-cnt { font-size:.72rem; font-weight:800; color:#fff; background:#f59e0b; border-radius:999px; padding:.02rem .42rem; }
.doc-tab.is-active .doc-tab-cnt { background:var(--primary,var(--c-brand-700)); }
.doc-tabs-sep { flex:1 1 auto; min-width:.5rem; }              /* schiebt die Ansichts-Tabs nach rechts */
.doc-tab-util { color:#94a3b8; font-weight:600; }
.doc-tab-util:hover { color:#475569; }

/* ══ Seiten-Doktor 8.0 — schlanker Kopf-Streifen, Panel-Intro, Quick-Win-Priorisierung, sprechende Zeilen
   (Patrick 16.06: Änderungs-Art = Tab; jede Zeile selbsterklärend; sticky nur wo es nützt) ══ */
.doc-summary { display:flex; align-items:center; gap:.85rem; flex-wrap:wrap; padding:.6rem .85rem;
  margin:0 0 .9rem; background:var(--surface-card); border:1px solid var(--border); border-radius:12px; }
.doc-summary-score { width:34px; height:34px; flex-shrink:0; border:2px solid var(--c-neutral-500); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:.92rem; font-weight:800; }
.doc-summary-txt { display:flex; flex-direction:column; gap:.05rem; min-width:0; flex:1; }
.doc-summary-txt > strong { font-size:.95rem; color:var(--text-strong); line-height:1.25; }
.doc-summary-strat { font-size:.78rem; color:var(--text-muted); line-height:1.3; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:60ch; }
/* Richtungs-Signal im Kopf: Tag (besser/schlechter/stabil) + Sparkline + Δ — ruhige Status-Farben, kein Alarm */
.doc-summary-trend { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }
.doc-summary-trend-tag { font-size:.72rem; font-weight:700; padding:.12rem .5rem; border-radius:999px; white-space:nowrap; }
.doc-summary-trend-tag.is-up { color:var(--c-ok-700); background:var(--c-ok-100); }
.doc-summary-trend-tag.is-flat { color:var(--c-ok-700); background:var(--c-ok-50); }
.doc-summary-trend-tag.is-down { color:var(--c-warn-700); background:var(--c-warn-100); }
.doc-summary-spark { display:inline-flex; align-items:center; color:var(--c-neutral-400); }
.doc-summary-trend-delta { font-size:.78rem; font-weight:700; }
.doc-summary-trend-delta.is-up { color:var(--c-ok-600); }
.doc-summary-trend-delta.is-flat { color:var(--text-muted); }
.doc-summary-trend-delta.is-down { color:var(--c-warn-600); }
.doc-summary-prog { display:flex; flex-direction:column; gap:.25rem; min-width:150px; }
.doc-summary-prog-bar { height:6px; background:var(--c-neutral-100); border-radius:3px; overflow:hidden; }
.doc-summary-prog-bar > span { display:block; height:100%; background:var(--c-ok-500); border-radius:3px; transition:width .4s ease; }
.doc-summary-prog-lab { font-size:.72rem; color:var(--text-muted); font-weight:600; white-space:nowrap; }
.doc-summary-actions { display:flex; align-items:center; gap:.5rem; }

/* Panel-Kopf: sagt klar, was dieser Tab ist + dass man nur zum Übernehmen aufklappt */
.doc-panel-intro { display:flex; align-items:flex-start; gap:.6rem; margin:.2rem 0 .9rem; }
.doc-panel-ic { font-size:1.25rem; line-height:1.4; }
.doc-panel-intro strong { font-size:1.02rem; color:#0f172a; }
.doc-panel-cnt { font-size:.74rem; font-weight:700; color:#475569; background:#e2e8f0; border-radius:999px; padding:.05rem .5rem; }
.doc-panel-sub { font-size:.78rem; color:#64748b; line-height:1.4; margin-top:.15rem; }

/* Quick-Win-Zwischenüberschrift innerhalb eines Änderungs-Tabs */
.doc-mlist { display:flex; flex-direction:column; gap:.5rem; }
.doc-qw-head { display:flex; align-items:center; gap:.5rem; margin:.7rem 0 .1rem; font-size:.82rem; font-weight:800;
  color:#334155; padding-bottom:.25rem; border-bottom:1px dashed #e2e8f0; }
.doc-qw-head:first-child { margin-top:0; }
.doc-qw-head.doc-auf-klein { color:#15803d; }
.doc-qw-head.doc-auf-gross { color:#9a3412; }
.doc-qw-cnt { font-size:.7rem; font-weight:700; color:#64748b; background:#f1f5f9; border-radius:999px; padding:.03rem .45rem; }

/* Teil C — Sektions-Kopf in der Maßnahmen-Liste (Bereich der Seite). Ruhiger Slate-Akzent mit linker
   Leiste, kein Rot; eigene Klasse statt .doc-sek-head, um Kollision mit den „Ganze Seite"-Stubs zu meiden. */
.doc-msek { display:flex; align-items:center; gap:.5rem; margin:.95rem 0 .35rem; padding-left:.5rem; border-left:3px solid #cbd5e1; }
.doc-msek:first-child { margin-top:.15rem; }
.doc-msek-name { font-size:.8rem; font-weight:800; color:#475569; text-transform:uppercase; letter-spacing:.04em; }
.doc-msek-cnt { font-size:.7rem; font-weight:700; color:#64748b; background:#f1f5f9; border-radius:999px; padding:.03rem .45rem; }

/* Sprechende Aktions-Zeile: Aktion + Inhalt + 1-Zeilen-Grund SICHTBAR, ohne aufzuklappen */
.doc-arow-head { align-items:flex-start; }
.doc-arow-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:.15rem; }
.doc-arow-line { display:flex; align-items:center; gap:.45rem; min-width:0; }
.doc-arow-line .doc-arow-prev { flex:1; min-width:0; font-weight:600; color:#1e293b; }
.doc-arow-why { font-size:.78rem; color:#64748b; line-height:1.4;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.doc-arow .doc-row-badge { flex-shrink:0; margin-top:.1rem; }
.doc-arow .doc-auf { flex-shrink:0; align-self:center; }

@media (max-width:768px) {
  .doc-summary-strat { max-width:34ch; }
  .doc-tabs-sep { flex-basis:100%; min-width:0; }
}
.doc-tabpanel[hidden] { display:none; }

/* Maßnahmen-Gruppe (nach Art der Änderung) */
.doc-mgroup { border:1px solid var(--border); border-radius:12px; background:#fff; margin-bottom:.7rem; overflow:hidden; }
.doc-mgroup > summary { cursor:pointer; list-style:none; display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; background:#f8fafc; }
.doc-mgroup > summary::-webkit-details-marker { display:none; }
.doc-mgroup > summary:hover { background:#f1f5f9; }
.doc-mgroup[open] > summary { border-bottom:1px solid #eef2f7; }
.doc-mgroup-ic { font-size:1.05rem; }
.doc-mgroup-label { font-weight:800; color:#0f172a; font-size:.95rem; }
.doc-mgroup-cnt { font-size:.74rem; font-weight:700; color:#475569; background:#e2e8f0; border-radius:999px; padding:.05rem .5rem; }
.doc-mgroup .doc-chevron { margin-left:auto; }
.doc-mgroup[open] > summary .doc-chevron { transform:rotate(90deg); }
.doc-mgroup-body { padding:.6rem .7rem .7rem; display:flex; flex-direction:column; gap:.45rem; }
.doc-allclear { border:1px solid #bbf7d0; background:#f0fdf4; color:#15803d; border-radius:12px;
  padding:1rem 1.1rem; font-size:.9rem; font-weight:600; }

/* Ranking-Hebel — stützender Ratgeber prominent im Hauptbefund (18.06.). Indigo wie der Diagnose-Akzent
   (.doc-links-diag), klickbar als Sprung in den Verlinkung-Tab. */
.doc-hebel { display:flex; align-items:center; gap:.85rem; margin:.2rem 0 .9rem; padding:.85rem 1rem;
  border:1px solid var(--c-brand-200); border-left:4px solid var(--c-brand-500); background:var(--c-brand-50); border-radius:12px;
  cursor:pointer; transition:background .12s, box-shadow .12s; }
.doc-hebel:hover { background:var(--c-brand-100); box-shadow:0 1px 6px rgba(99,102,241,.18); }
.doc-hebel:focus-visible { outline:2px solid var(--c-brand-500); outline-offset:2px; }
.doc-hebel-ic { font-size:1.3rem; line-height:1; flex:0 0 auto; }
.doc-hebel-body { flex:1 1 auto; min-width:0; }
.doc-hebel-h { font-size:.9rem; font-weight:700; color:var(--c-brand-800); line-height:1.35; }
.doc-hebel-sub { font-size:.82rem; color:var(--c-brand-700); margin-top:.2rem; line-height:1.4; }
.doc-hebel-kw { font-size:.72rem; color:var(--c-brand-500); background:#fff; border:1px solid var(--c-brand-200); border-radius:6px;
  padding:.05rem .35rem; white-space:nowrap; }
.doc-hebel-cta { flex:0 0 auto; font-size:.8rem; font-weight:700; color:var(--c-brand-600); white-space:nowrap; }

/* Aktion-Zeile (ein Vorschlag, eingeklappt) */
.doc-arow { border:1px solid var(--border); border-left:4px solid #cbd5e1; border-radius:9px; background:#fff; }
.doc-arow.badge-work, .doc-arow.badge-add, .doc-arow.badge-new { border-left-color:#f59e0b; }
.doc-arow.badge-remove { border-left-color:#ef4444; }
.doc-arow.badge-meta { border-left-color:var(--c-brand-500); }
.doc-arow > summary { cursor:pointer; list-style:none; }
.doc-arow > summary::-webkit-details-marker { display:none; }
.doc-arow[open] { box-shadow:0 2px 10px rgba(15,23,42,.06); }
.doc-arow-head { display:flex; align-items:center; gap:.5rem; padding:.5rem .75rem; }
.doc-arow > summary:hover { background:#f8fafc; border-radius:9px; }
.doc-arow-prev { flex:1; min-width:0; font-size:.84rem; color:#475569; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-arow[open] .doc-chevron { transform:rotate(90deg); }
.doc-arow-body { padding:.2rem .8rem .75rem; }

/* Aktion-Badge in der Zeile */
.doc-row-badge { font-size:.66rem; font-weight:700; padding:.16rem .5rem; border-radius:6px; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.03em; flex-shrink:0; border:1px solid transparent; }
.doc-row-badge.badge-work { background:#fef3c7; color:#92400e; border-color:#fde68a; }
.doc-row-badge.badge-add  { background:var(--c-brand-50); color:var(--c-brand-700); border-color:var(--c-brand-200); }
.doc-row-badge.badge-new  { background:#f0fdf4; color:#15803d; border-color:#bbf7d0; }
.doc-row-badge.badge-remove { background:#fef2f2; color:#b91c1c; border-color:#fecaca; }
.doc-row-badge.badge-meta { background:var(--c-brand-50); color:var(--c-brand-700); border-color:var(--c-brand-200); }
.doc-row-badge.badge-done { background:#dcfce7; color:#15803d; border-color:#bbf7d0; }

/* Dokument-Tab: Toolbar + schlanke Sektion (sek2) */
.doc-doc-toolbar { display:flex; align-items:center; gap:.8rem; flex-wrap:wrap; margin:0 0 .9rem; }
.doc-doc-hint { flex:1; min-width:200px; font-size:.8rem; color:#64748b; line-height:1.4; }
.doc-sek2 { border-left:4px solid #cbd5e1; padding:0 0 0 .9rem; margin-bottom:1.2rem; }
.doc-sek2.doc-sek2-green { border-left-color:#22c55e; } .doc-sek2.doc-sek2-amber { border-left-color:#f59e0b; }
.doc-sek2.doc-sek2-red { border-left-color:#ef4444; }
.doc-sek2-head { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-bottom:.2rem; }
.doc-sek2-name { font-size:1rem; font-weight:800; color:#0f172a; }
.doc-sek2-todo { font-size:.7rem; font-weight:700; color:#92400e; background:#fef3c7; border:1px solid #fde68a;
  border-radius:999px; padding:.08rem .5rem; }
.doc-sek2-urteil { font-size:.84rem; color:#475569; line-height:1.5; margin:.1rem 0 .55rem; max-width:68ch; }
.doc-sek2-body { display:flex; flex-direction:column; gap:.4rem; }
/* Inhalts-Zeile im Dokument-Tab nutzt doc-row-* (oben definiert) */
.doc-row { border:1px solid var(--border); border-left:4px solid #e2e8f0; border-radius:9px; background:#fff; }
.doc-row.sev-work { border-left-color:#f59e0b; } .doc-row.sev-remove { border-left-color:#ef4444; }
.doc-row.sev-ok { border-left-color:#e2e8f0; } .doc-row.is-applied { border-left-color:#22c55e; }
.doc-row > summary { cursor:pointer; list-style:none; }
.doc-row > summary::-webkit-details-marker { display:none; }
.doc-row-head { display:flex; align-items:center; gap:.5rem; padding:.45rem .75rem; }
.doc-row > summary:hover { background:#f8fafc; border-radius:9px; }
.doc-row-prev { flex:1; min-width:0; font-size:.84rem; color:#475569; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-row-ok { color:#16a34a; font-weight:800; flex-shrink:0; }
.doc-row[open] .doc-chevron { transform:rotate(90deg); }
.doc-row-body { padding:.2rem .8rem .75rem; }

/* ══ Seiten-Doktor 8.1 — visuelle Politur (Patrick 16.06: 1/10 → ruhige Hierarchie, kein Lärm) ══
   Belegt aus Recherche: sparsame Hervorhebung (Von Restorff), Severity als Punkt statt Dauer-Pille,
   ein Akzent, echte Weißräume, scannbare Zeilen. NUR Darstellung. */

/* Kopf-Streifen als EINE ruhige Kommandozeile */
.doc-summary { gap:1rem; padding:.7rem 1rem; border-radius:14px; box-shadow:0 1px 2px rgba(15,23,42,.04); }
.doc-summary-score { width:40px; height:40px; font-size:1rem; }
.doc-summary-txt > strong { font-size:1rem; }

/* Tab-Leiste: eine Zeile, bei Enge horizontal scrollbar statt umbrechen */
.doc-tabs { flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; gap:.05rem; padding-bottom:0; }
.doc-tabs::-webkit-scrollbar { height:0; }
.doc-tab { font-size:.84rem; padding:.6rem .7rem; gap:.35rem; }
.doc-tab-util { color:#94a3b8; }
.doc-tab-util.is-active { color:var(--primary,var(--c-brand-700)); }

/* Panel-Kopf: klare Überschrift + eine ruhige Zeile darunter */
.doc-panel-intro { display:block; margin:.1rem 0 1.1rem; }
.doc-panel-head { display:flex; align-items:center; gap:.5rem; }
.doc-panel-head strong { font-size:1.1rem; color:#0f172a; letter-spacing:-.01em; }
.doc-panel-ic { font-size:1.2rem; }
.doc-panel-sub { font-size:.82rem; color:#94a3b8; margin-top:.2rem; }

/* Quick-Win-Zwischentitel: zurückhaltend, klare Sektionierung */
.doc-qw-head { margin:1.1rem 0 .55rem; border:none; padding:0; font-size:.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.06em; color:#94a3b8; }
.doc-qw-head:first-child { margin-top:.2rem; }
.doc-qw-head.doc-auf-klein { color:#16a34a; }
.doc-qw-head.doc-auf-gross { color:#b45309; }
.doc-qw-cnt { background:none; padding:0; color:#cbd5e1; font-weight:700; }
.doc-mlist { gap:.4rem; }

/* ── Aktions-Zeile: ruhig, scannbar. Aktion-Pille raus (der Tab sagt sie schon), Severity = schmaler
   Farbstreifen links; Grund nur EINE Zeile; großzügiges Padding + Hover. ── */
.doc-arow { border:1px solid #eef2f7; border-left:3px solid #e2e8f0; border-radius:10px; }
.doc-arow.badge-work, .doc-arow.badge-add, .doc-arow.badge-new { border-left-color:#fbbf24; }
.doc-arow.badge-remove { border-left-color:#ef4444; }
.doc-arow.badge-meta { border-left-color:var(--c-brand-300); }
.doc-arow > summary:hover { background:#f8fafc; }
.doc-arow-head { padding:.65rem .85rem; gap:.7rem; align-items:center; }
/* Aktion-Wort: kleine, leise Versalien-Marke statt großer Farbpille */
.doc-arow > summary .doc-row-badge { background:none !important; border:none !important; padding:0 !important;
  font-size:.6rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:#b45309;
  white-space:nowrap; flex-shrink:0; min-width:5.2rem; margin-top:0; }
.doc-arow.badge-remove > summary .doc-row-badge { color:#dc2626; }
.doc-arow.badge-meta > summary .doc-row-badge { color:var(--c-brand-600); }
.doc-arow.badge-new > summary .doc-row-badge,
.doc-arow.badge-add > summary .doc-row-badge { color:#0f766e; }
.doc-arow-line .doc-row-type { font-size:.66rem; color:#94a3b8; font-weight:600; flex-shrink:0; }
.doc-arow-line .doc-arow-prev { font-weight:600; color:#0f172a; font-size:.88rem; }
.doc-arow-why { -webkit-line-clamp:1; font-size:.78rem; color:#94a3b8; margin-top:.1rem; }
/* Aufwand wird vom Quick-Win-Titel getragen → Pro-Zeile-Chip raus (kein Doppel-Signal) */
.doc-arow > summary .doc-auf { display:none; }
.doc-arow .doc-chevron { color:#cbd5e1; flex-shrink:0; }
.doc-arow[open] { border-color:#e2e8f0; box-shadow:0 4px 16px rgba(15,23,42,.07); }
.doc-arow[open] > summary { background:#f8fafc; border-bottom:1px solid #eef2f7; }

/* ══ Seiten-Doktor 8.2 — „Ganze Seite" als ruhige Dokument-Ansicht + Verlinkung-Tab (Patrick 16.06) ══ */
.doc-doc { display:flex; flex-direction:column; gap:.5rem; }
.doc-pg-sek { border:1px solid #eef2f7; border-radius:10px; background:#fff; }
.doc-pg-sek > summary { cursor:pointer; list-style:none; }
.doc-pg-sek > summary::-webkit-details-marker { display:none; }
.doc-pg-sekhead { display:flex; align-items:center; gap:.6rem; padding:.7rem .9rem; }
.doc-pg-sek > summary:hover { background:#f8fafc; border-radius:10px; }
.doc-pg-sek[open] > summary { border-bottom:1px solid #f1f5f9; border-radius:10px 10px 0 0; }
.doc-pg-sek[open] > summary .doc-chevron { transform:rotate(90deg); }
.doc-pg-sekname { font-weight:700; color:#0f172a; font-size:.95rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-pg-sektype { font-size:.62rem; color:#cbd5e1; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.doc-pg-sekflag { font-size:.64rem; font-weight:700; color:#b45309; background:#fef6e3; border-radius:999px; padding:.12rem .55rem; flex-shrink:0; }
.doc-pg-sekmeta { margin-left:auto; font-size:.72rem; color:#cbd5e1; font-weight:600; white-space:nowrap; flex-shrink:0; }
.doc-pg-sek .doc-chevron { color:#cbd5e1; flex-shrink:0; }
.doc-pg-sekbody { padding:.55rem .9rem .85rem; display:flex; flex-direction:column; gap:.4rem; }

/* Block-Zeile im Dokument: ruhig & neutral — Severity nur als leiser Farbstrich, kein lautes Badge */
.doc-row { border:1px solid #f3f5f9; border-left:1px solid #f3f5f9; border-radius:8px; }
.doc-row.sev-work   { border-left:2px solid #fde68a; }
.doc-row.sev-remove { border-left:2px solid #fecaca; }
.doc-row.sev-ok     { border-left:1px solid #f3f5f9; }
.doc-row.is-applied { border-left:2px solid #bbf7d0; }
.doc-row-head { padding:.5rem .75rem; gap:.55rem; }
.doc-row > summary:hover { background:#fafbfc; border-radius:8px; }
.doc-row-prev { font-size:.84rem; color:#334155; }
.doc-row-type { font-size:.62rem; color:#cbd5e1; text-transform:uppercase; letter-spacing:.04em; flex-shrink:0; }
.doc-row-flag { font-size:.64rem; font-weight:700; color:#b45309; white-space:nowrap; flex-shrink:0; }
.doc-row-flag.is-done { color:#16a34a; }
.doc-row .doc-chevron { color:#dbe2ea; flex-shrink:0; }

/* Verlinkung-Tab: dichte Versalien-Microlabels beruhigen */
#doctab-verlinkung .doc-sech { font-size:1rem; font-weight:800; color:#0f172a; margin:1.3rem 0 .6rem; }
#doctab-verlinkung .doc-sech:first-of-type { margin-top:.2rem; }

/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY-SCHICHT (Token-gebunden) — ersetzt Inline-style beim Seiten-Umbau.
   Bewusst klein gehalten; wächst evidenzgetrieben mit jeder konvertierten Seite.
   ═══════════════════════════════════════════════════════════════════════════════ */
/* Farbe / Hintergrund */
.u-text{color:var(--text)} .u-text-muted{color:var(--text-muted)} .u-text-strong{color:var(--text-strong)}
.u-text-brand{color:var(--brand)} .u-text-ok{color:var(--ok-text)} .u-text-warn{color:var(--warn-text)} .u-text-bad{color:var(--bad-text)}
.u-bg-surface{background:var(--surface)} .u-bg-sunken{background:var(--surface-sunken)} .u-bg-card{background:var(--surface-card)}
.u-bg-ok{background:var(--ok-soft)} .u-bg-warn{background:var(--warn-soft)} .u-bg-bad{background:var(--bad-soft)} .u-bg-info{background:var(--info-soft)}
.u-border{border:1px solid var(--border)} .u-border-strong{border:1px solid var(--border-strong)}
/* Radius / Elevation */
.u-radius{border-radius:var(--radius)} .u-radius-sm{border-radius:var(--radius-sm)} .u-radius-lg{border-radius:var(--radius-lg)}
.u-shadow{box-shadow:var(--shadow)} .u-shadow-md{box-shadow:var(--shadow-md)} .u-shadow-lg{box-shadow:var(--shadow-lg)}
/* Karte (visuelle Sprache: das eine Panel-Grundelement) */
.u-card{background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--sp-5)}
/* Typo */
.u-fs-xs{font-size:var(--fs-xs)} .u-fs-sm{font-size:var(--fs-sm)} .u-fs-base{font-size:var(--fs-base)}
.u-fs-lg{font-size:var(--fs-lg)} .u-fs-xl{font-size:var(--fs-xl)} .u-fs-2xl{font-size:var(--fs-2xl)}
.u-fw-medium{font-weight:var(--fw-medium)} .u-fw-semibold{font-weight:var(--fw-semibold)} .u-fw-bold{font-weight:var(--fw-bold)}
/* Layout-Helfer (decken die häufigsten Inline-style-Muster) */
.u-flex{display:flex} .u-flex-col{display:flex;flex-direction:column} .u-items-center{align-items:center}
.u-justify-between{justify-content:space-between} .u-flex-wrap{flex-wrap:wrap} .u-flex-1{flex:1}
.u-gap-1{gap:var(--sp-1)} .u-gap-2{gap:var(--sp-2)} .u-gap-3{gap:var(--sp-3)} .u-gap-4{gap:var(--sp-4)}
.u-mt-2{margin-top:var(--sp-2)} .u-mt-4{margin-top:var(--sp-4)} .u-mb-2{margin-bottom:var(--sp-2)} .u-mb-4{margin-bottom:var(--sp-4)}
.u-hidden{display:none}
/* Sichtbarer Fokus-Ring (WCAG 2.4.7) — app-weit, nie outline:none ohne Ersatz */
.u-focusable:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* ═══════════════════════════════════════════════════════════════════════════════
   UI-KOMPONENTEN (zu templates/_components/ui.html) — Token-gebunden, ruhig.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── hero_score: die EINE Zahl ─────────────────────────────────────────────── */
.hero-score{display:flex; align-items:center; gap:var(--sp-5); background:var(--surface-card);
  border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:var(--sp-5); }
.hero-score--ok{border-left-color:var(--ok)} .hero-score--warn{border-left-color:var(--warn)} .hero-score--bad{border-left-color:var(--bad)}
.hero-score__gauge{display:flex; align-items:baseline; gap:.1rem; flex-shrink:0; min-width:7rem; }
.hero-score__num{font-size:var(--fs-2xl); font-weight:var(--fw-bold); line-height:1; color:var(--text-strong); }
.hero-score--ok .hero-score__num{color:var(--ok)} .hero-score--warn .hero-score__num{color:var(--warn)} .hero-score--bad .hero-score__num{color:var(--bad)}
.hero-score__max{font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-muted); }
.hero-score__body{flex:1; min-width:0; }
.hero-score__label{font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--text); display:flex; align-items:center; gap:var(--sp-2); }
.hero-score__delta{font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:.05rem .35rem; border-radius:var(--radius-full); }
.hero-score__delta--up{color:var(--ok-text); background:var(--ok-soft)} .hero-score__delta--down{color:var(--bad-text); background:var(--bad-soft)}
.hero-score__hint{margin:.25rem 0 .5rem; font-size:var(--fs-sm); color:var(--text-muted); line-height:var(--lh-normal); }
.hero-score__track{position:relative; height:7px; background:var(--surface-sunken); border-radius:var(--radius-full); overflow:hidden; }
.hero-score__fill{position:absolute; inset:0 auto 0 0; background:var(--brand); border-radius:var(--radius-full); transition:width .4s ease; }
.hero-score--ok .hero-score__fill{background:var(--ok)} .hero-score--warn .hero-score__fill{background:var(--warn)} .hero-score--bad .hero-score__fill{background:var(--bad)}
.hero-score__ziel{position:absolute; top:-2px; width:2px; height:11px; background:var(--text-muted); opacity:.55; }
.hero-score__cta{flex-shrink:0; align-self:center; }

/* ── metric_row + badge-state ──────────────────────────────────────────────── */
.metric-row{display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--border); }
.metric-row:last-child{border-bottom:0}
.metric-row__label{flex:1; min-width:0; font-size:var(--fs-base); color:var(--text); display:flex; align-items:center; }
.metric-row__value{flex-shrink:0}
.metric-row__why{flex-shrink:0; background:none; border:0; color:var(--brand); font-size:var(--fs-sm); font-weight:var(--fw-medium); cursor:pointer; padding:.1rem .3rem; border-radius:var(--radius-sm); }
.metric-row__why:hover{text-decoration:underline}
.badge-state{font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:.15rem .55rem; border-radius:var(--radius-full); white-space:nowrap; }
.badge-state--ok{color:var(--ok-text); background:var(--ok-soft)} .badge-state--warn{color:var(--warn-text); background:var(--warn-soft)}
.badge-state--bad{color:var(--bad-text); background:var(--bad-soft)} .badge-state--neutral{color:var(--text-muted); background:var(--surface-sunken)}

/* ── term_check ────────────────────────────────────────────────────────────── */
.term-check{display:flex; align-items:center; gap:var(--sp-2); padding:.3rem .1rem; font-size:var(--fs-sm); list-style:none; }
.term-check__mark{flex-shrink:0; width:1.1rem; height:1.1rem; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--radius-full); font-size:var(--fs-xs); font-weight:var(--fw-bold); background:var(--surface-sunken); color:var(--text-muted); }
.term-check.is-done .term-check__mark{background:var(--ok-soft); color:var(--ok)}
.term-check.is-much .term-check__mark{background:var(--warn-soft); color:var(--warn)}
.term-check__term{flex:1; min-width:0; color:var(--text); }
.term-check.is-done .term-check__term{color:var(--text-muted)}
.term-check__count{flex-shrink:0; font-size:var(--fs-xs); color:var(--text-muted); }

/* ── ui-banner (getiert, Rot nur bei critical) ─────────────────────────────── */
.ui-banner{display:flex; align-items:flex-start; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius); border:1px solid var(--border); font-size:var(--fs-sm); line-height:var(--lh-normal); margin:var(--sp-2) 0; }
.ui-banner__icon{flex-shrink:0; line-height:1.4}
.ui-banner__body{flex:1; min-width:0; color:var(--text)}
.ui-banner__title{font-weight:var(--fw-semibold)}
.ui-banner__action{flex-shrink:0; background:none; border:0; color:var(--brand); font-weight:var(--fw-semibold); font-size:var(--fs-sm); cursor:pointer; }
.ui-banner__close{flex-shrink:0; background:none; border:0; color:var(--text-muted); cursor:pointer; line-height:1; padding:0 .2rem; }
.ui-banner--info{background:var(--info-soft); border-color:var(--c-info-200)} .ui-banner--info .ui-banner__icon{color:var(--info)}
.ui-banner--success{background:var(--ok-soft); border-color:var(--c-ok-200)} .ui-banner--success .ui-banner__icon{color:var(--ok)}
.ui-banner--warn{background:var(--warn-soft); border-color:var(--c-warn-200)} .ui-banner--warn .ui-banner__icon{color:var(--warn)}
.ui-banner--critical{background:var(--bad-soft); border-color:var(--c-bad-200)} .ui-banner--critical .ui-banner__icon{color:var(--bad)}

/* ── ui-field (WCAG-Formularfeld) ──────────────────────────────────────────── */
.ui-field{display:flex; flex-direction:column; gap:var(--sp-1); margin-bottom:var(--sp-4)}
.ui-field__label{font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text)}
.ui-field__req{color:var(--bad)}
.ui-field__input{font:inherit; font-size:var(--fs-base); color:var(--text); padding:.55rem .7rem;
  border:1.5px solid var(--border-strong); border-radius:var(--radius-sm); background:var(--surface-card); transition:border-color .15s; }
.ui-field__input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.ui-field.is-invalid .ui-field__input{border-color:var(--bad)}
.ui-field__hint{font-size:var(--fs-xs); color:var(--text-muted)}
.ui-field__error{font-size:var(--fs-xs); color:var(--bad-text); font-weight:var(--fw-medium)}

/* ── empty_state (nie leer) ────────────────────────────────────────────────── */
.empty-state{text-align:center; padding:var(--sp-7) var(--sp-5); max-width:30rem; margin:0 auto; }
.empty-state__icon{font-size:var(--fs-2xl); color:var(--brand); opacity:.8; margin-bottom:var(--sp-2)}
.empty-state__title{font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--text-strong); margin:0 0 var(--sp-2)}
.empty-state__text{font-size:var(--fs-base); color:var(--text-muted); line-height:var(--lh-relaxed); margin:0 0 var(--sp-4)}
.empty-state__actions{display:flex; gap:var(--sp-3); justify-content:center; flex-wrap:wrap}

/* btn-Icon */
.btn__icon{margin-right:.4rem; line-height:1}

/* ── Seiten-Doktor v2 (Strangler-Fig Frontend-Umbau, neue Informationsarchitektur) ── */
.doc-v2{max-width:64rem; margin:0 auto; display:flex; flex-direction:column; gap:var(--sp-5)}
.doc-v2__head{display:flex; flex-direction:column; gap:var(--sp-1)}
.doc-v2__lead{color:var(--text); font-size:var(--fs-base); line-height:var(--lh-relaxed); margin:0}

/* Prioritäten-Streifen — „was zuerst?" (Slice 2): Quick Wins zuerst, Rest progressiv. */
.doc-prio{display:flex; flex-direction:column; gap:var(--sp-3)}
.doc-prio__title{margin:0; color:var(--text-strong); font-weight:600}
.doc-prio__list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-2)}
.doc-prio__item{display:flex; align-items:center; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); background:var(--surface-card);
  border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-sm)}
.doc-prio__chip{flex:none; display:inline-flex; align-items:center;
  padding:2px var(--sp-2); border-radius:var(--radius-full); font-size:var(--fs-xs);
  font-weight:600; white-space:nowrap; background:var(--surface-sunken); color:var(--text-muted)}
.doc-prio__item--klein .doc-prio__chip{background:var(--brand-soft); color:var(--brand-strong)}
.doc-prio__body{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1}
.doc-prio__label{color:var(--text-strong); font-weight:600}
.doc-prio__area{font-weight:400}
.doc-prio__why{margin:0; line-height:var(--lh-normal);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.doc-prio__rest{margin-top:var(--sp-1)}
.doc-prio__more{cursor:pointer; color:var(--brand); font-size:var(--fs-sm); user-select:none}
.doc-prio__rest .doc-prio__list{margin-top:var(--sp-2)}
.doc-prio__clear{margin:0; color:var(--ok-text); font-weight:500}
.doc-prio__hint{margin:0}
/* Anklickbare Hebel-Zeile: die ganze Zeile ist der Sprung in den Reiter (Schaufenster MIT Tür). */
.doc-prio__item{padding:0; overflow:hidden; transition:border-color .12s, box-shadow .12s}
.doc-prio__jump{display:flex; align-items:center; gap:var(--sp-3); width:100%; text-align:left;
  background:none; border:none; padding:var(--sp-3) var(--sp-4); margin:0; cursor:pointer; font:inherit; color:inherit}
.doc-prio__go{flex:none; color:var(--text-muted); font-size:var(--fs-md); transition:transform .12s, color .12s}
.doc-prio__item:hover{border-color:var(--brand)}
.doc-prio__item:hover .doc-prio__go{transform:translateX(3px); color:var(--brand-strong)}
.doc-prio__jump:focus-visible{outline:2px solid var(--brand); outline-offset:-2px}

/* ══ Doktor v2 — Dokument + Live-Schiene (Slice 3, bestätigte IA „Editor + rechte Schiene") ══
   Markt-Konvention (Surfer/Clearscope): die Seite selbst ist die Arbeitsfläche, rechts eine
   mitlaufende Mess-Schiene. Ausschliesslich Design-Tokens (hex_drift). */
.doc-v2{max-width:78rem}

/* Hero: EINE Zahl links, Kernbefund + Aktion rechts. */
.doc-hero{display:flex; gap:var(--sp-5); align-items:center; flex-wrap:wrap;
  padding:var(--sp-4) var(--sp-5); background:var(--surface-card);
  border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm)}
.doc-hero__score{flex:none}
.doc-hero__lead{flex:1; min-width:16rem; display:flex; flex-direction:column; gap:var(--sp-2)}
.doc-hero__befund{margin:0; color:var(--text); font-size:var(--fs-md); line-height:var(--lh-relaxed)}
.doc-hero__strat{margin:0; line-height:var(--lh-normal)}
.doc-hero__actions{display:flex; gap:var(--sp-2); margin-top:var(--sp-1)}

/* „Was zuerst?" — eingeklappte Schnell-Triage (das Dokument unten ist die Arbeitsfläche). */
.doc-prio-fold{background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--sp-2) var(--sp-4)}
.doc-prio-fold[open]{padding-bottom:var(--sp-4)}
.doc-prio-fold__sum{cursor:pointer; color:var(--text-strong); font-weight:600; user-select:none; list-style:none}
.doc-prio-fold__sum::-webkit-details-marker{display:none}
.doc-prio-fold[open] .doc-prio-fold__sum{margin-bottom:var(--sp-3)}

/* Zwei-Spalten-Raster: Dokument flexibel, Schiene fix ~22rem. */
.doc-v2__grid{display:grid; grid-template-columns:minmax(0,1fr) 22rem; gap:var(--sp-5); align-items:start}
.doc-v2__doc{display:flex; flex-direction:column; gap:var(--sp-3); min-width:0}
.doc-v2__doc-h{margin-bottom:var(--sp-1)}
.doc-v2__lade{display:flex; gap:var(--sp-2); align-items:center;
  padding:var(--sp-3) var(--sp-4); background:var(--info-soft); color:var(--info-text);
  border:1px solid var(--border); border-radius:var(--radius); font-size:var(--fs-sm)}
.doc-v2__startrow{display:flex; justify-content:center; margin-top:var(--sp-3)}

/* Sektion = ein Dokument-Abschnitt; saubere eingeklappt, Arbeits-Abschnitte offen. */
.doc-sek{background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden}
.doc-sek.is-work{border-left:3px solid var(--warn)}
.doc-sek--pw{border-left:2px solid var(--brand)}
.doc-sek__head{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
  padding:var(--sp-3) var(--sp-4); cursor:pointer; user-select:none; list-style:none}
.doc-sek__head::-webkit-details-marker{display:none}
.doc-sek__name{font-weight:600; color:var(--text-strong); min-width:0}
.doc-sek__type{font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase;
  letter-spacing:.03em; background:var(--surface-sunken); padding:1px var(--sp-2); border-radius:var(--radius-sm)}
.doc-sek__flag{font-size:var(--fs-xs); font-weight:600; padding:2px var(--sp-2); border-radius:var(--radius-full)}
.doc-sek__flag.is-work{background:var(--warn-soft); color:var(--warn-text)}
.doc-sek__flag.is-ok{background:var(--ok-soft); color:var(--ok-text)}
.doc-sek__meta{margin-left:auto; font-size:var(--fs-xs)}
.doc-sek__body{padding:0 var(--sp-4) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3)}
.doc-sek .doc-chevron{transition:transform .15s ease; color:var(--text-muted);
  font-size:var(--fs-lg); line-height:1; margin-left:var(--sp-1)}
.doc-sek[open] .doc-chevron{transform:rotate(90deg)}

/* Rechte Mess-Schiene — sticky, ruhige Karten. */
.doc-rail{position:sticky; top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-3)}
.doc-rail__card{background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius); padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-sm)}
.doc-rail__h{font-size:var(--fs-sm); font-weight:600; color:var(--text-strong); margin-bottom:var(--sp-2)}
.doc-rail__checks{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1); font-size:var(--fs-sm)}
.doc-rail__checks .is-ok{color:var(--ok-text)}
.doc-rail__checks .is-miss{color:var(--text-muted)}
.doc-rail__meta{margin-top:var(--sp-2)}
.doc-rail__note{margin-top:var(--sp-2); line-height:var(--lh-normal)}
.doc-rail__spark{margin-top:var(--sp-1)}
.doc-rail__export{margin-top:var(--sp-1); text-align:center}

/* Term-Checkliste „du X× · Median Y×" — Klartext, grün wenn erfüllt. */
.doc-term{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.doc-term__row{display:flex; align-items:center; gap:var(--sp-2); font-size:var(--fs-sm)}
.doc-term__box{flex:none; width:1.1rem; text-align:center; color:var(--text-muted)}
.doc-term__name{flex:1; min-width:0; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-term__cnt{flex:none; font-variant-numeric:tabular-nums}
.doc-term__row.is-done .doc-term__box{color:var(--ok)}
.doc-term__row.is-done .doc-term__name{color:var(--text-muted)}

/* Wort-Budget-Balken. */
.doc-budget__num{font-weight:600; color:var(--text-strong)}
.doc-budget__bar{height:6px; background:var(--surface-sunken); border-radius:var(--radius-full);
  overflow:hidden; margin:var(--sp-2) 0}
.doc-budget__bar > span{display:block; height:100%; background:var(--ok); border-radius:var(--radius-full)}
.doc-budget__bar.is-low > span{background:var(--warn)}

/* Schmal: Schiene unter das Dokument klappen. */
@media (max-width:60rem){
  .doc-v2__grid{grid-template-columns:1fr}
  .doc-rail{position:static}
}

/* ════════════════════════════════════════════════════════════════════════════════
   SEITEN-DOKTOR v2 — VISUELLE VEREDELUNG (29.06., Wettbewerber-Niveau)
   Ziel (Patrick): ruhig/seriös (Linear/Stripe) + Daten-Dashboard-Klarheit, EINE Schrift,
   EINE Typo-Skala, keine Farb-/Emoji-Konfetti. Alles unter `.doc-v2` gescoped → die alten
   Karten-Regeln (1622–2285, klassische Seite/Prod) bleiben UNBERÜHRT; hier gewinnen wir per
   Spezifität (`.doc-v2 .x` > `.x`) und vereinheitlichen die ~64 Ad-hoc-Größen auf `--fs-*`.
   Ausschliesslich Design-Tokens (keine Roh-Hex). ════════════════════════════════════════ */

/* ── EINE Schrift für den ganzen Doktor-Bildschirm (head-Block lädt Hanken Grotesk). ── */
.doc-v2, .doc-v2 input, .doc-v2 textarea, .doc-v2 button{
  font-family:'Hanken Grotesk','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.doc-v2{color:var(--text); font-size:var(--fs-base); line-height:var(--lh-relaxed); letter-spacing:-.003em}
.doc-v2 strong{font-weight:var(--fw-semibold); color:var(--text-strong)}
/* Zahlen tabellarisch ausrichten (Dashboard-Klarheit). */
.doc-v2 .doc-term__cnt, .doc-v2 .doc-budget__num, .doc-v2 .hero-score__gauge,
.doc-v2 .doc-rail__metric{font-variant-numeric:tabular-nums}

/* ── EIN Eyebrow-Stil für ALLE Mikro-Labels (ersetzt 6 verschiedene .6–.68rem-Varianten). ── */
.doc-v2 .doc-sugg-tag, .doc-v2 .doc-sugg-ist-lab, .doc-v2 .doc-sugg-soll-lab,
.doc-v2 .doc-blk-type, .doc-v2 .doc-sek-htype, .doc-v2 .doc-arow .doc-row-type,
.doc-v2 .doc-rail__h{
  font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.05em;
  text-transform:uppercase; color:var(--text-muted); line-height:var(--lh-tight);
}
.doc-v2 .doc-rail__h{letter-spacing:.06em; margin-bottom:var(--sp-3)}

/* ── Kopfzeile + Vorschau-Banner ───────────────────────────────────────────────── */
.doc-v2__head .page-title{font-size:var(--fs-xl); font-weight:var(--fw-bold); letter-spacing:-.02em; color:var(--text-strong)}
.doc-v2__ctx{font-size:var(--fs-sm); color:var(--text-muted)}

/* ── HERO: EINE selbstbewusste Zahl, ruhige Fläche, dezenter Status-Strich. ──────── */
.doc-v2 .doc-hero{padding:var(--sp-5) var(--sp-6); border-radius:var(--radius-lg);
  border:1px solid var(--border); box-shadow:var(--shadow-sm)}
.doc-v2 .hero-score{background:transparent; border:none; box-shadow:none; padding:0; gap:var(--sp-6)}
.doc-v2 .hero-score__gauge{min-width:8.5rem}
.doc-v2 .hero-score__num{font-size:3.4rem; font-weight:var(--fw-bold); letter-spacing:-.04em}
.doc-v2 .hero-score__max{font-size:var(--fs-lg)}
/* Kernbefund = ruhiger Kontext, NICHT die Schlagzeile (die Zahl ist die Schlagzeile). Bewusst kleiner
   und gedämpft, auf 3 Zeilen begrenzt; die volle Diagnose lebt im Reiter „Analyse". */
.doc-v2 .doc-hero__befund{font-size:var(--fs-sm); font-weight:var(--fw-normal);
  line-height:var(--lh-relaxed); color:var(--text-muted); max-width:62ch;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}

/* Strategie — ruhige weiße Karte mit EINEM dünnen Marken-Strich (kein lila Voll-Slab mehr).
   Der Marken-Akzent (Indigo) ist die EINZIGE dekorative Farbe der Seite → Farb-Disziplin. */
/* Diagnose-Block im Überblick (doc-diag/doc-hebel/doc-why) — s. Regeln unten beim doc-snap__diag. */

/* ── ÜBERBLICK-Panel (Patrick 30.06.): Score + Kernbefund + KPI-Strip ganz oben, vor den Empfehlungen.
   Ersetzt den schmalen Hero; Kernbefund breitenbegrenzt, Strategie als klar klickbarer Aufklapper. ── */
.doc-v2 .doc-snapshot{background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-5) var(--sp-6); box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column; gap:var(--sp-4)}
/* Kopf = EIN lückenloses Raster: optionaler Score (über 2 Spalten) + KPI-Kacheln als gleichhohe Zellen.
   Die Zahl der KPIs ist DATENABHÄNGIG (Dichte/Lesbarkeit/Abdeckung fallen ohne Daten weg) → KEINE feste
   „2 Reihen"-Annahme. grid-auto-flow:dense schließt entstehende Lücken; ohne Score (kein Qualitäts-Verlauf)
   wird die Score-Zelle GAR NICHT gerendert (Template), die KPIs füllen dann ab Spalte 1. (Senior 30.06.) */
.doc-v2 .doc-snap__metrics{display:grid; gap:var(--sp-3); grid-template-columns:repeat(2,1fr);
  grid-auto-flow:row dense; align-items:stretch}
@media(min-width:62rem){.doc-v2 .doc-snap__metrics{grid-template-columns:repeat(4,1fr)}}
.doc-v2 .doc-snap__score{grid-column:1 / -1}
@media(min-width:62rem){.doc-v2 .doc-snap__score{grid-column:span 2}}
.doc-v2 .doc-snap__actions{display:flex; gap:var(--sp-2); flex-wrap:wrap; align-items:center}
/* Export = seltenste Aktion → leiser Text-Link, per margin-left:auto nach rechts abgesetzt (KEIN
   gleichrangiger Button neben den zwei Haupt-Aktionen). */
.doc-v2 .doc-snap__export{margin-left:auto; font-size:var(--fs-sm); font-weight:var(--fw-medium);
  color:var(--text-muted); text-decoration:none; white-space:nowrap}
.doc-v2 .doc-snap__export:hover{color:var(--brand-strong); text-decoration:underline}
.doc-v2 .doc-snap__hint{margin:var(--sp-2) 0 0; line-height:var(--lh-relaxed)}
.doc-v2 .doc-snap__hint strong{color:var(--text-strong)}
.doc-v2 .doc-kpi{display:flex; flex-direction:column; gap:.15rem; padding:var(--sp-3);
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-md)}
.doc-v2 .doc-kpi__lab{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  color:var(--text-muted); font-weight:var(--fw-semibold)}
.doc-v2 .doc-kpi__val{font-size:1.5rem; font-weight:var(--fw-bold); color:var(--text-strong);
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; line-height:1.15}
.doc-v2 .doc-kpi__val--kw{font-size:var(--fs-base); line-height:var(--lh-normal); overflow-wrap:anywhere; hyphens:auto}
.doc-v2 .doc-kpi__val.is-ok{color:var(--ok-text)}
.doc-v2 .doc-kpi__val.is-warn{color:var(--warn-text)}
.doc-v2 .doc-kpi__sub{font-size:var(--fs-xs); color:var(--text-muted); line-height:var(--lh-normal)}
.doc-v2 .doc-kpi__note{font-size:var(--fs-xs); color:var(--text-muted); margin-top:.15rem}
.doc-v2 .doc-kpi__chip{display:inline-block; font-size:var(--fs-xs); font-weight:var(--fw-medium);
  padding:.05rem .35rem; border-radius:var(--radius-sm); background:var(--surface-card);
  border:1px solid var(--border); color:var(--text-muted); margin-right:.2rem}
.doc-v2 .doc-kpi__chip.is-ok{color:var(--ok-text); border-color:var(--ok)}
.doc-v2 .doc-snap__kw{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center;
  border-top:1px solid var(--border); padding-top:var(--sp-3)}
.doc-v2 .doc-snap__kw-lab{font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); margin-right:.25rem}
.doc-v2 .doc-tag--gap{background:var(--warn-bg,#fdf6ec); border-color:var(--warn); color:var(--warn-text)}
.doc-v2 .doc-kpi__bench{font-size:var(--fs-xs); color:var(--text-muted); font-weight:var(--fw-medium); margin-top:.1rem}
/* Diagnose-Block unter den KPIs — klare Lese-Hierarchie: Kurzdiagnose → wichtigster Hebel (Callout)
   → ausführliche Begründung (Aufklapper). Voll-breit, kein Karte-in-Karte-Rahmen mehr. */
.doc-v2 .doc-snap__diag{border-top:1px solid var(--border); padding-top:var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-4)}

/* Kurzdiagnose = der Befund, mit dezenter Eyebrow-Beschriftung für Struktur. */
.doc-v2 .doc-diag{display:flex; flex-direction:column; gap:.3rem}
.doc-v2 .doc-diag__eyebrow{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  font-weight:var(--fw-semibold); color:var(--text-muted)}
.doc-v2 .doc-diag__text{margin:0; font-size:var(--fs-base); line-height:var(--lh-relaxed);
  color:var(--text); max-width:78ch}

/* Wichtigster Hebel = kompakter, sofort sichtbarer Callout (brand-getönt, linker Akzent) — NICHT als
   full-width Streifen der die Empfehlungen wegschiebt. Label-Chip + Fließtext in einer Zeile. */
.doc-v2 .doc-hebel{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  background:var(--brand-soft); border-left:3px solid var(--brand); border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4)}
.doc-v2 .doc-hebel__lab{flex:none; font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em;
  font-weight:var(--fw-bold); color:var(--brand-strong); white-space:nowrap}
.doc-v2 .doc-hebel__text{margin:0; flex:1 1 20ch; font-size:var(--fs-sm); line-height:var(--lh-relaxed);
  color:var(--text-strong); max-width:78ch}

/* Ausführliche Begründung = schlichter Aufklapper OHNE Kasten (kein Karte-in-Karte). */
.doc-v2 .doc-why{font-size:var(--fs-sm)}
.doc-v2 .doc-why__summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center;
  gap:var(--sp-2); font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--brand-strong)}
.doc-v2 .doc-why__summary::-webkit-details-marker{display:none}
.doc-v2 .doc-why__summary::before{content:'▸'; color:var(--brand); font-size:var(--fs-xs); font-weight:var(--fw-bold)}
.doc-v2 .doc-why[open] .doc-why__summary::before{content:'▾'}
.doc-v2 .doc-why__summary:hover{text-decoration:underline}
.doc-v2 .doc-why__text{margin:var(--sp-3) 0 0; font-size:var(--fs-base); line-height:var(--lh-relaxed);
  color:var(--text); max-width:78ch}

/* ── Zwei-Spalten-Layout: Empfehlungen links, feste Analyse-Schiene rechts (Patrick: „sidebar rechts").
   Nutzt das bestehende .doc-v2__grid/.doc-rail (war im Tab-Umbau verwaist). Rail einspaltig → keine Lücken. ── */
.doc-v2 .doc-v2__main{min-width:0; display:flex; flex-direction:column; gap:var(--sp-3)}
.doc-v2 .doc-rail--analyse{gap:var(--sp-3)}
.doc-v2 .doc-rail__title{font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.08em;
  font-weight:var(--fw-bold); color:var(--text-muted); padding-bottom:var(--sp-1)}

/* Vorschau-Zeile (ersetzt das blaue Voll-Banner): eine ruhige Zeile, klassik-Link rechts. */
.doc-v2 .doc-v2__vorschau{display:flex; align-items:baseline; gap:var(--sp-3); flex-wrap:wrap;
  padding:var(--sp-2) 0; border-bottom:1px solid var(--border)}
.doc-v2 .doc-v2__klassik{margin-left:auto; color:var(--brand-strong); font-weight:var(--fw-medium); white-space:nowrap}
.doc-v2 .doc-v2__klassik:hover{text-decoration:underline}

/* Status-Marker (Keyword-Checks): ✓ grün / – grau — bewusst KEIN Kreis/Kästchen (kein Radio-Look). */
.doc-v2 .doc-check{display:inline-block; width:1.1rem; text-align:center; font-weight:var(--fw-bold)}
.doc-v2 .doc-rail__checks .is-ok .doc-check{color:var(--ok)}
.doc-v2 .doc-rail__checks .is-miss{color:var(--text-muted)}
.doc-v2 .doc-rail__checks .is-miss .doc-check{color:var(--border-strong)}
.doc-v2 .doc-check__lab{font-size:var(--fs-xs); color:var(--warn-text); font-weight:var(--fw-medium); margin-left:var(--sp-1)}
.doc-v2 .doc-term__box{font-weight:var(--fw-bold)}
.doc-v2 .doc-term__row .doc-term__box{color:var(--border-strong)}
.doc-v2 .doc-term__row.is-done .doc-term__box{color:var(--ok)}

/* ── Tiefen-Diagnose: qualitative Linsen als aufklappbare Status-Zeilen (kein Karten-Konfetti).
   EIN Punkt pro Dimension nach verdikt (grün/amber/rot), ein Wort, Detail erst auf Klick. ── */
.doc-v2 .doc-dim{border-top:1px solid var(--border)}
.doc-v2 .doc-dim:first-of-type{border-top:none}
.doc-v2 .doc-dim__row{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) 0;
  cursor:pointer; list-style:none}
.doc-v2 .doc-dim__row::-webkit-details-marker{display:none}
.doc-v2 .doc-dim__row::after{content:'›'; flex:none; color:var(--text-muted);
  transition:transform .15s ease}
.doc-v2 .doc-dim[open] .doc-dim__row::after{transform:rotate(90deg)}
.doc-v2 .doc-dim[open] .doc-dim__name{font-weight:var(--fw-semibold)}
.doc-v2 .doc-dim__dot{flex:none; width:.6rem; height:.6rem; border-radius:var(--radius-full);
  background:var(--text-muted)}
.doc-v2 .doc-dim__dot--ok{background:var(--ok)}
.doc-v2 .doc-dim__dot--warn{background:var(--warn)}
.doc-v2 .doc-dim__dot--bad{background:var(--bad)}
.doc-v2 .doc-dim__name{flex:1 1 auto; font-size:var(--fs-sm); color:var(--text-strong)}
.doc-v2 .doc-dim__verdikt{flex:none; font-size:var(--fs-xs); font-weight:var(--fw-semibold);
  text-transform:capitalize; color:var(--text-muted)}
.doc-v2 .doc-dim__verdikt--ok{color:var(--ok-text)}
.doc-v2 .doc-dim__verdikt--warn{color:var(--warn-text)}
.doc-v2 .doc-dim__verdikt--bad{color:var(--bad-text)}
.doc-v2 .doc-dim__panel{display:flex; flex-direction:column; gap:var(--sp-2);
  padding:0 0 var(--sp-3) calc(.6rem + var(--sp-2))}
.doc-v2 .doc-dim__do{font-size:var(--fs-sm); color:var(--text); line-height:var(--lh-normal)}
.doc-v2 .doc-dim__facts{font-size:var(--fs-xs); color:var(--text-muted)}
.doc-v2 .doc-dim__why{font-size:var(--fs-xs); color:var(--text-muted); line-height:var(--lh-normal)}

/* ── „Was zuerst?" — eingeklappte, ruhige Triage. ──────────────────────────────── */
.doc-v2 .doc-prio-fold{border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--sp-3) var(--sp-5)}
.doc-v2 .doc-prio-fold__sum{font-size:var(--fs-base)}
.doc-v2 .doc-prio__item{border-radius:var(--radius); box-shadow:none; border-left-width:2px}
.doc-v2 .doc-prio__chip{text-transform:uppercase; letter-spacing:.04em; font-size:var(--fs-xs)}

/* ── Dokument-Spalte: EINE verbundene Liste statt 11 schwebender Karten (Premium-„Dokument"). ──
   Der Container trägt Rahmen/Radius/Schatten EINMAL; die Zeilen darin sind durch Haarlinien
   getrennt, ohne eigenen Schatten/Radius. Arbeits-Zeilen behalten den Amber-Strich + Hebel-Chip;
   saubere Zeilen sind gedimmt (kein Akzent) → klare Hierarchie statt Gleichgewicht. */
.doc-v2__doc-h{font-size:var(--fs-sm); color:var(--text-muted)}
.doc-v2 .doc-doc-list{background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden}
.doc-v2 .doc-doc-list .doc-sek{border:none; border-radius:0; box-shadow:none;
  border-top:1px solid var(--border); border-left:3px solid transparent; transition:background .15s}
.doc-v2 .doc-doc-list .doc-sek:first-child{border-top:none}
.doc-v2 .doc-doc-list .doc-sek.is-work{border-left-color:var(--warn)}
.doc-v2 .doc-doc-list .doc-sek--pw{border-left-color:var(--brand)}
.doc-v2 .doc-doc-list .doc-sek:not(.is-work):not(.doc-sek--pw) .doc-sek__name{color:var(--text-muted); font-weight:var(--fw-medium)}
.doc-v2 .doc-doc-list .doc-sek[open]{background:var(--surface)}
.doc-v2 .doc-sek__head{padding:var(--sp-4) var(--sp-5); gap:var(--sp-3)}
.doc-v2 .doc-sek__name{font-size:var(--fs-md); font-weight:var(--fw-semibold); letter-spacing:-.01em}
.doc-v2 .doc-sek__flag{text-transform:uppercase; letter-spacing:.04em; font-size:var(--fs-xs); padding:3px var(--sp-2)}
.doc-v2 .doc-sek__body{padding:0 var(--sp-5) var(--sp-5); gap:var(--sp-4)}

/* Hero: zwei bewusste Spalten — Score-Modul links, Befund rechts mit dünner Trennlinie. */
.doc-v2 .doc-hero__lead{border-left:1px solid var(--border); padding-left:var(--sp-6)}
@media (max-width:60rem){ .doc-v2 .doc-hero__lead{border-left:none; padding-left:0} }

/* ── Befund-Zeile (aktion_row) = REDLINE am Block, KEINE Karte. ──────────────────────
   Der echte Bestandstext IST die Einheit; der Befund hängt als Verb daran (Google-Docs-/
   GitHub-PR-Muster). Nur ein 2px-Links-Strich (Verb-Farbe) + Haarlinien-Trenner — niemals
   ein zweiter Kasten in der Liste (tötet das „Karte-in-Karte"-Gefühl). */
.doc-v2 .doc-arow{border:none; border-radius:0; background:transparent;
  border-left:2px solid var(--border-strong); border-bottom:1px solid var(--border); transition:background .12s}
.doc-v2 .doc-arow:last-child{border-bottom:none}
.doc-v2 .doc-arow.badge-work, .doc-v2 .doc-arow.badge-add{border-left-color:var(--warn)}
.doc-v2 .doc-arow.badge-remove{border-left-color:var(--bad)}
.doc-v2 .doc-arow.badge-new, .doc-v2 .doc-arow.badge-meta{border-left-color:var(--brand)}
.doc-v2 .doc-arow:hover, .doc-v2 .doc-arow[open]{background:var(--surface)}
.doc-v2 .doc-arow-head{display:flex; align-items:flex-start; gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4); cursor:pointer; user-select:none; list-style:none}
.doc-v2 .doc-arow-head::-webkit-details-marker{display:none}
.doc-v2 .doc-arow-main{flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1)}
.doc-v2 .doc-arow-ctx{display:flex; align-items:center; gap:var(--sp-2)}
/* Bestandstext = echter Block-Inhalt, voll lesbar (eingeklappt auf 4 Zeilen begrenzt, offen ganz). */
.doc-v2 .doc-arow-prev{color:var(--text-strong); font-size:var(--fs-base); line-height:var(--lh-normal);
  white-space:pre-wrap; max-width:74ch; overflow:hidden;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical}
.doc-v2 .doc-arow[open] .doc-arow-prev{-webkit-line-clamp:unset; color:var(--text)}
/* Verdikt-Zeile: Verb akzentfarben (eine Farbe je Strich) + EIN knapper Grund-Satz. */
.doc-v2 .doc-arow-verdict{display:flex; align-items:baseline; gap:var(--sp-2); min-width:0}
/* Verb als kleiner Anker-Pill (Stripe-Status-Muster) — ein scanbarer Fixpunkt je Zeile, Farbe = Strich. */
.doc-v2 .doc-row-verb{flex:none; font-size:var(--fs-xs); font-weight:var(--fw-semibold); color:var(--warn-text);
  background:var(--warn-soft); border-radius:var(--radius-sm); padding:1px var(--sp-2); white-space:nowrap}
.doc-v2 .doc-arow.badge-remove .doc-row-verb{color:var(--bad-text); background:var(--bad-soft)}
.doc-v2 .doc-arow.badge-new .doc-row-verb, .doc-v2 .doc-arow.badge-meta .doc-row-verb{color:var(--brand-strong); background:var(--brand-soft)}
/* Grund EINZEILIG eingeklappt (scanbar), voll beim Aufklappen — beendet die „Wand aus grauem Fließtext". */
.doc-v2 .doc-arow-why{flex:1; min-width:0; font-size:var(--fs-sm); color:var(--text-muted);
  line-height:var(--lh-normal); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.doc-v2 .doc-arow[open] .doc-arow-why{white-space:normal; overflow:visible}
.doc-v2 .doc-arow .doc-row-type{background:none; padding:0; flex:none}
.doc-v2 .doc-arow-body{padding:var(--sp-1) var(--sp-4) var(--sp-4)}

/* Mehrere Befunde am SELBEN Block = EIN Block (Spec: „one block, findings stacked"): der
   Bestandstext + Typ stehen nur in der ERSTEN Zeile; die Folge-Befunde zeigen nur ihr Verb +
   Grund und hängen ohne Trennlinie darunter → keine doppelt gerenderte Überschrift mehr. */
.doc-v2 .doc-blockgroup .doc-arow:not(:first-of-type) .doc-arow-ctx,
.doc-v2 .doc-blockgroup .doc-arow:not(:first-of-type) .doc-arow-prev{display:none}
.doc-v2 .doc-blockgroup .doc-arow:not(:last-of-type){border-bottom:none}
.doc-v2 .doc-blockgroup .doc-arow:not(:first-of-type) .doc-arow-head{padding-top:0}
/* Diff-Aufklapper: nur EIN Chevron (Standard-Dreieck ausblenden — sonst ▶ + ▾ Doppelmarke). */
.doc-v2 .doc-sugg-diff > summary{list-style:none; cursor:pointer}
.doc-v2 .doc-sugg-diff > summary::-webkit-details-marker{display:none}
.doc-v2 .doc-arow .doc-chevron{flex:none; color:var(--text-muted); font-size:var(--fs-lg); line-height:1.1; transition:transform .15s}
.doc-v2 .doc-arow[open] > .doc-arow-head .doc-chevron{transform:rotate(90deg)}

/* Aufwand: ruhiges Mini-Text-Tag rechts (keine Pille, kein Emoji). */
.doc-v2 .doc-auf{flex:none; font-size:var(--fs-xs); font-weight:var(--fw-medium); color:var(--text-muted);
  white-space:nowrap; padding-top:2px}
.doc-v2 .doc-seit-badge{font-size:var(--fs-xs); color:var(--warn-text); background:var(--warn-soft);
  padding:1px var(--sp-2); border-radius:var(--radius-full); margin-left:var(--sp-2); font-weight:var(--fw-medium);
  text-transform:none; letter-spacing:0}

/* ── Vorschlag (sugg): KEINE eigene Karte — der Zeilen-Strich trägt schon die Farbe. Der
   Vorschlagstext sitzt in EINEM gefüllten Panel (Fill, kein Rahmen/Schatten) → keine Karte-
   in-Karte. Im aufgeklappten Befund (doc-arow-body) entfallen Verb-Tag + IST-Wiederholung
   (beides steht schon in der Zeile); die Wort-Diff bleibt auf Abruf. ── */
.doc-v2 .doc-sugg{margin:0; background:transparent; border:none; border-radius:0; padding:0}
.doc-v2 .doc-arow-body .doc-sugg-tag, .doc-v2 .doc-arow-body .doc-sugg-ist{display:none}
/* AUSNAHME: Der fertige Entwurfs-Text eines NEUEN Abschnitts (.doc-sugg.is-draft) lebt ebenfalls in
   .doc-sugg-ist — er ist aber KEINE redundante IST-Wiederholung, sondern der eigentliche Liefer-
   gegenstand (kopieren + auf die Seite übertragen). Die Verbergen-Regel darüber darf ihn NICHT treffen,
   sonst steht im aufgeklappten Befund nur der Kopieren-Knopf ohne Text (Bug 05.07.: „die Texte fehlen").
   Höhere Spezifität (is-draft) → gewinnt gegen die allgemeine Verbergen-Regel, nur für Entwürfe. */
.doc-v2 .doc-arow-body .doc-sugg.is-draft .doc-sugg-ist{display:block}
.doc-v2 .doc-sugg-tag{margin-bottom:var(--sp-2); display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.doc-v2 .doc-sugg.is-danger .doc-sugg-tag{color:var(--bad-text)}
.doc-v2 .doc-sugg.is-draft .doc-sugg-tag{color:var(--warn-text)}

/* IST/Entwurf-Vorschau (z.B. neuer Abschnitt, der KEINEN Bestandstext in der Zeile hat). */
.doc-v2 .doc-sugg-ist{background:var(--surface-sunken); border:none;
  border-radius:var(--radius-sm); padding:var(--sp-3); margin:var(--sp-2) 0}
.doc-v2 .doc-sugg-ist-lab{margin-bottom:var(--sp-1)}
.doc-v2 .doc-sugg-ist-txt{font-size:var(--fs-sm); color:var(--text); line-height:var(--lh-relaxed)}
.doc-v2 .doc-sugg-ist-txt.is-pre{white-space:pre-wrap}
.doc-v2 .doc-sugg-soll-lab{display:block; margin:0 0 var(--sp-2); color:var(--text-muted)}
/* Vorschlag = gefülltes Lese-Panel (Text) bzw. Editor (textarea) — Fill statt Rahmen. */
.doc-v2 .doc-sugg-text{font-size:var(--fs-base); color:var(--text-strong); line-height:var(--lh-relaxed);
  max-width:72ch; background:var(--surface-sunken); border-radius:var(--radius-sm);
  padding:var(--sp-3) var(--sp-4); white-space:pre-wrap}
.doc-v2 .doc-sugg-edit{width:100%; box-sizing:border-box; font-size:var(--fs-base); color:var(--text-strong);
  line-height:var(--lh-relaxed); border:1px solid var(--border-strong); border-radius:var(--radius-sm);
  padding:var(--sp-3); background:var(--surface-card)}
.doc-v2 .doc-sugg-edit:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.doc-v2 .doc-sugg-newtitle{font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-strong);
  line-height:var(--lh-normal); margin-bottom:var(--sp-2); max-width:68ch; letter-spacing:-.01em}
.doc-v2 .doc-sugg-note{font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-2)}
.doc-v2 .doc-sugg-diff > summary{font-size:var(--fs-sm); color:var(--text-muted)}
.doc-v2 .doc-mini-badge{font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:2px var(--sp-2);
  border-radius:var(--radius-full); background:var(--surface-sunken); color:var(--text-muted)}
.doc-v2 .doc-mini-badge.is-ok{background:var(--ok-soft); color:var(--ok-text)}
.doc-v2 .doc-mini-badge.is-warn{background:var(--warn-soft); color:var(--warn-text)}

/* Aktionen + „Warum?" — Knopfreihe ruhig, primär klar. */
.doc-v2 .doc-actions{display:flex; flex-wrap:wrap; gap:var(--sp-2); margin-top:var(--sp-3); align-items:center}
.doc-v2 .doc-detail-btn{background:none; border:none; cursor:pointer; color:var(--text-muted);
  font-size:var(--fs-sm); font-weight:var(--fw-medium); padding:var(--sp-1) 0}
.doc-v2 .doc-detail-btn:hover{color:var(--brand)}
.doc-v2 .doc-detail{margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:1px solid var(--border)}
.doc-v2 .doc-reason{font-size:var(--fs-sm); color:var(--text-muted); line-height:var(--lh-relaxed)}
.doc-v2 .doc-evidence{font-size:var(--fs-sm); color:var(--text-muted); margin-top:var(--sp-2); line-height:var(--lh-relaxed)}
.doc-v2 .copy-btn, .doc-v2 .doc-btn-danger{font-size:var(--fs-sm)}
.doc-v2 .copy-btn.is-copied{color:var(--ok)}

/* Tags / Themen-Chips — eine ruhige Pille; Fehler-Variante dezent rot. */
.doc-v2 .doc-tag{font-size:var(--fs-xs); font-weight:var(--fw-medium); padding:2px var(--sp-2);
  border-radius:var(--radius-full); background:var(--surface-sunken); border:1px solid var(--border); color:var(--text-muted)}
.doc-v2 .doc-tag--err{background:var(--bad-soft); border-color:var(--c-bad-200); color:var(--bad-text)}

/* ── Neuer Abschnitt / Zusammenführen (doc-blk): gleiche Redline-Logik wie die Befund-Zeile —
   2px-Links-Strich (indigo = Zusatz, info = Merge), KEINE Karte. ── */
.doc-v2 .doc-blk{background:transparent; border:none; border-radius:0; border-left:2px solid var(--brand);
  border-bottom:1px solid var(--border); padding:var(--sp-3) var(--sp-4);
  display:flex; flex-direction:column; gap:var(--sp-2)}
.doc-v2 .doc-blk:last-child{border-bottom:none}
.doc-v2 .doc-blk.is-merge{border-left-color:var(--info)}
.doc-v2 .doc-blk .doc-sugg{border:none; border-left:none; padding:0; margin:0}
.doc-v2 .doc-blk-bar{display:flex; align-items:center; gap:var(--sp-2)}
.doc-v2 .doc-blk-type{padding:0; background:none; color:var(--brand-strong)}
.doc-v2 .doc-blk-type.doc-type-draft{background:none; color:var(--warn-text)}
.doc-v2 .doc-blk-type.doc-type-merge{background:none; color:var(--info-text)}
.doc-v2 .doc-blk-newtyp{font-size:var(--fs-xs); color:var(--text-muted); margin-left:auto}

/* Faktenwarnung + Live-Hinweis: getönte Hinweis-Boxen (kein hartes Rot/Schrei). */
.doc-v2 .doc-fakten-warn{margin:var(--sp-3) 0 0; padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:var(--bad-soft); border:1px solid var(--c-bad-200); color:var(--bad-text);
  font-size:var(--fs-sm); line-height:var(--lh-normal)}
.doc-v2 .doc-fakten-list{margin:var(--sp-1) 0 0; padding-left:1.1rem}
.doc-v2 .doc-fakten-extra{margin-top:var(--sp-2)}
.doc-v2 .doc-code{background:var(--surface-card); padding:0 .25rem; border-radius:3px;
  font-family:ui-monospace,'Courier New',monospace; font-size:.92em}
.doc-v2 .doc-livehint{margin:var(--sp-3) 0 var(--sp-1); padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm);
  background:var(--warn-soft); border:1px solid var(--c-warn-200); color:var(--warn-text);
  font-size:var(--fs-sm); line-height:var(--lh-normal)}

/* ── Saubere Blöcke (blk_stub): gedimmte Einzeile OHNE Strich/Karte — sie treten zurück, damit
   das Dokument von oben nach unten lesbar bleibt; Klick → Volltext + Editor. ─────── */
.doc-v2 .doc-blk-stub{border:none; border-radius:0; background:transparent; border-bottom:1px solid var(--border)}
.doc-v2 .doc-blk-stub:last-child{border-bottom:none}
.doc-v2 .doc-blk-stubhead{display:flex; align-items:center; gap:var(--sp-2);
  padding:var(--sp-2) var(--sp-4) var(--sp-2) calc(var(--sp-4) + 2px);
  cursor:pointer; user-select:none; list-style:none}
.doc-v2 .doc-blk-stubhead:hover{background:var(--surface)}
.doc-v2 .doc-blk-stubhead::-webkit-details-marker{display:none}
.doc-v2 .doc-blk-stub .doc-blk-type{color:var(--text-muted)}
.doc-v2 .doc-blk-stubprev{flex:1; min-width:0; color:var(--text-muted); font-size:var(--fs-sm);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.doc-v2 .doc-blk-okmark{flex:none; color:var(--ok); font-weight:var(--fw-bold); font-size:var(--fs-sm)}
.doc-v2 .doc-blk-okmark.is-applied{color:var(--brand)}
.doc-v2 .doc-blk-stubbody{padding:0 var(--sp-4) var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-2)}
.doc-v2 .doc-blk-text{font-size:var(--fs-sm); color:var(--text); line-height:var(--lh-relaxed); white-space:pre-wrap}
.doc-v2 .doc-blk-edit{background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:var(--fs-sm)}
.doc-v2 .doc-blk-edit:hover{color:var(--brand)}
.doc-v2 .doc-stub-headline{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.doc-v2 .doc-stub-headtext{font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text-strong)}
.doc-v2 .content-textarea{width:100%; box-sizing:border-box; font-family:inherit; font-size:var(--fs-sm);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:var(--sp-2)}
.doc-v2 .doc-faq{margin:0}
.doc-v2 .doc-faq-q{font-weight:var(--fw-semibold); color:var(--text-strong); font-size:var(--fs-sm); margin-top:var(--sp-2)}
.doc-v2 .doc-faq-a{font-size:var(--fs-sm); color:var(--text-muted); line-height:var(--lh-relaxed)}

/* ── RECHTE MESS-SCHIENE — echtes Dashboard-Panel statt blanker Kästen. ─────────── */
.doc-v2 .doc-rail__card{border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-5); box-shadow:var(--shadow-sm)}
.doc-v2 .doc-rail__h{padding-bottom:var(--sp-2); border-bottom:1px solid var(--border)}
.doc-v2 .doc-rail__checks li{display:flex; align-items:center; gap:var(--sp-2); padding:var(--sp-1) 0; font-size:var(--fs-sm)}
.doc-v2 .doc-rail__checks .is-ok{color:var(--text); font-weight:var(--fw-medium)}
.doc-v2 .doc-rail__meta{font-size:var(--fs-sm); color:var(--text-muted)}
.doc-v2 .doc-rail__note{font-size:var(--fs-xs); color:var(--text-muted)}
.doc-v2 .doc-rail__export{margin-top:var(--sp-2)}

/* Term-Checkliste: aufgeräumte Zeilen, Zahl rechtsbündig (tabellarisch). */
.doc-v2 .doc-term__row{padding:var(--sp-1) 0; border-bottom:1px solid var(--surface-sunken)}
.doc-v2 .doc-term__row:last-child{border-bottom:none}
.doc-v2 .doc-term__name{font-size:var(--fs-sm)}
.doc-v2 .doc-term__cnt{font-size:var(--fs-xs); color:var(--text-muted)}

/* Umfang-Budget: große tabellarische Zahl + ruhiger Balken. */
.doc-v2 .doc-budget__num{font-size:var(--fs-lg); font-weight:var(--fw-bold); color:var(--text-strong); letter-spacing:-.02em}
.doc-v2 .doc-budget__num span{font-size:var(--fs-sm); font-weight:var(--fw-normal)}
.doc-v2 .doc-budget__bar{height:8px; margin:var(--sp-3) 0 var(--sp-2)}

@media (max-width:60rem){
  .doc-v2 .hero-score__num{font-size:2.6rem}
  .doc-v2 .doc-hero{padding:var(--sp-4) var(--sp-4)}
}

/* ══ v2 — Tab-Leiste nach Änderungs-Art (Token-rein, ruhig; überschreibt die klassische .doc-tab-Optik
   NUR unter .doc-v2, Prod/Klassik unberührt). Zähler ruhig-neutral statt amber-auf-jedem-Tab. ══ */
.doc-v2 .doc-v2__tabs{position:sticky; top:0; z-index:30; display:flex; flex-wrap:wrap; align-items:center;
  gap:var(--sp-1); margin:0; padding:var(--sp-1) 0 0; background:var(--surface);
  border-bottom:1px solid var(--border); box-shadow:none}
.doc-v2 .doc-tab{border:none; background:none; cursor:pointer; font-size:var(--fs-sm); font-weight:600;
  color:var(--text-muted); padding:var(--sp-2) var(--sp-3); border-bottom:2px solid transparent;
  margin-bottom:-1px; display:inline-flex; align-items:center; gap:var(--sp-2); white-space:nowrap;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0; transition:color .12s ease, background .12s ease}
.doc-v2 .doc-tab:hover{color:var(--text-strong); background:var(--surface-sunken)}
.doc-v2 .doc-tab.is-active{color:var(--brand-strong); border-bottom-color:var(--brand)}
.doc-v2 .doc-tab-cnt{font-size:var(--fs-xs); font-weight:700; color:var(--text-muted);
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:999px; padding:.02rem .42rem}
.doc-v2 .doc-tab.is-active .doc-tab-cnt{color:#fff; background:var(--brand); border-color:var(--brand)}
.doc-v2 .doc-tabs-sep{flex:1 1 auto; min-width:var(--sp-2)}
.doc-v2 .doc-tab-util{color:var(--text-muted); font-weight:600}
.doc-v2 .doc-tab-util:hover{color:var(--text-strong)}
.doc-v2 .doc-tab-util.is-active{color:var(--brand-strong)}

/* Panel-Kopf je Tab — sagt klar, was dieser Tab ist */
.doc-v2 .doc-panel-intro{display:block; margin:var(--sp-2) 0 var(--sp-4)}
.doc-v2 .doc-panel-head{display:flex; align-items:center; gap:var(--sp-2)}
.doc-v2 .doc-panel-head strong{font-size:var(--fs-lg); color:var(--text-strong); letter-spacing:-.01em}
.doc-v2 .doc-panel-cnt{font-size:var(--fs-xs); font-weight:700; color:var(--text-muted);
  background:var(--surface-sunken); border:1px solid var(--border); border-radius:999px; padding:.05rem .5rem}
.doc-v2 .doc-panel-sub{margin-top:var(--sp-1)}

/* Element-Typ-Filter: ruhige Pillen-Toggles (Linse über der Abschnitts-Gruppierung). Aktiv = Marke. */
.doc-v2 .doc-typfilter{display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-2);
  margin:0 0 var(--sp-4); padding-bottom:var(--sp-3); border-bottom:1px solid var(--border)}
.doc-v2 .doc-typfilter__lab{flex:none; margin-right:var(--sp-1)}
.doc-v2 .doc-typchip{display:inline-flex; align-items:center; gap:var(--sp-1); cursor:pointer;
  font-size:var(--fs-sm); font-weight:var(--fw-medium); color:var(--text-muted);
  background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-full);
  padding:var(--sp-1) var(--sp-3); transition:color .12s, background .12s, border-color .12s}
.doc-v2 .doc-typchip:hover{color:var(--text-strong); border-color:var(--border-strong)}
.doc-v2 .doc-typchip.is-active{color:var(--brand-strong); background:var(--brand-soft); border-color:var(--brand)}
.doc-v2 .doc-typchip:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.doc-v2 .doc-typchip-cnt{font-size:var(--fs-xs); font-weight:var(--fw-bold); color:var(--text-muted)}
.doc-v2 .doc-typchip.is-active .doc-typchip-cnt{color:var(--brand-strong)}
/* Filter blendet Zeilen/leere Bereichs-Köpfe via [hidden] aus — die display:flex-Klassenregel oben
   schlägt sonst die schwache UA-Regel [hidden]{display:none}; darum explizit + spezifisch nachziehen. */
.doc-v2 .doc-msek[hidden], .doc-v2 .doc-arow[hidden]{display:none}

/* Bereich-Kopf (Seiten-Abschnitt) innerhalb eines Tabs — ruhiger Anker, kein Alarm */
.doc-v2 .doc-mlist{display:flex; flex-direction:column; gap:var(--sp-2)}
.doc-v2 .doc-msek{display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-5) 0 var(--sp-1);
  padding-left:var(--sp-2); border-left:2px solid var(--border-strong)}
.doc-v2 .doc-msek:first-child{margin-top:0}
.doc-v2 .doc-msek-name{font-size:var(--fs-xs); font-weight:700; color:var(--text-muted);
  text-transform:uppercase; letter-spacing:.05em}
.doc-v2 .doc-msek-cnt{font-size:var(--fs-xs); font-weight:600; color:var(--text-muted);
  background:var(--surface-sunken); border-radius:999px; padding:.03rem .45rem}
.doc-v2 .doc-qw-head{display:flex; align-items:center; gap:var(--sp-2); margin:var(--sp-3) 0 var(--sp-1);
  font-size:var(--fs-xs); font-weight:700; color:var(--text-muted)}
.doc-v2 .doc-qw-cnt{font-size:var(--fs-xs); color:var(--text-muted); background:var(--surface-sunken);
  border-radius:999px; padding:.03rem .45rem}
.doc-v2 .doc-allclear{padding:var(--sp-3) var(--sp-4); border-radius:var(--radius);
  background:var(--ok-soft); color:var(--ok-text); border:1px solid var(--ok); font-weight:600}

/* „Ganze Seite"-Tab: Lese-/Bearbeiten-Sektionen ruhig (kein Karten-Chrome) */
.doc-v2 .doc-doc-toolbar{display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  flex-wrap:wrap; margin-bottom:var(--sp-3)}
.doc-v2 .doc-mode{display:inline-flex; border:1px solid var(--border); border-radius:var(--radius-sm); overflow:hidden}
.doc-v2 .doc-mode-btn{border:none; background:var(--surface-card); cursor:pointer; font-size:var(--fs-xs);
  font-weight:600; color:var(--text-muted); padding:var(--sp-1) var(--sp-3)}
.doc-v2 .doc-mode-btn.is-active{background:var(--brand-soft); color:var(--brand-strong)}
.doc-v2 .doc-pg-sek{border:none; border-bottom:1px solid var(--border); background:transparent}
.doc-v2 .doc-pg-sekhead{display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; list-style:none;
  padding:var(--sp-3) 0}
.doc-v2 .doc-pg-sekhead::-webkit-details-marker{display:none}
.doc-v2 .doc-pg-sekname{font-weight:600; color:var(--text-strong); flex:1; min-width:0}
.doc-v2 .doc-pg-sektype{font-size:var(--fs-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:.04em}
.doc-v2 .doc-pg-sekflag{font-size:var(--fs-xs); font-weight:600; color:var(--warn-text);
  background:var(--warn-soft); border-radius:999px; padding:.03rem .5rem}
.doc-v2 .doc-pg-sekmeta{font-size:var(--fs-xs)}

/* „Analyse"-Tab: Messwert-Karten als responsives Raster (Reuse der Rail-Karten-Optik) */
.doc-v2 .doc-analyse-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:var(--sp-4); align-items:start}

/* „Verlinkung"-Tab: Abschnitts-Überschrift ruhig */
.doc-v2 .doc-sech{font-size:var(--fs-base); font-weight:700; color:var(--text-strong);
  margin:var(--sp-5) 0 var(--sp-2)}
.doc-v2 .doc-link-state.is-on{color:var(--ok-text)}
.doc-v2 .doc-link-state.is-off{color:var(--text-muted)}

/* ════════════════════════════════════════════════════════════════════════════════════════
   APP-SHELL v2 (base_v2.html) — system-weite Hülle, 29.06.2026.
   EINE Marke (Ricknify-Grün) statt drei (Slate-Sidebar + Indigo-Aktiv + grünes Logo + grüner Finn).
   ALLES unter .ui-v2 gescoped → klassische base.html + alle Alt-Seiten bleiben unberührt (Prod).
   Recherche-Anker: Stripe-Farbhierarchie (neutrale Basis + EIN Akzent + Status getrennt),
   Linear-Dichte/4px-Raster + linker Aktiv-Indikator, Hanken Grotesk als charaktervolle Web-Schrift.
   Hex hier ERLAUBT (token_disziplin scannt nur *_v2.html Templates, nicht CSS). ═══════════════ */
.ui-v2 {
  font-family:'Hanken Grotesk','DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  /* Marken-Flip NUR im v2-Scope: KOMPLETTE Indigo-Rampe → Ricknify-Tiefgrün-Teal. Weil alle
     semantischen Tokens (--brand/--primary/…) und 179 vorher hartcodierte Komponenten-Stellen jetzt
     auf --c-brand-* zeigen, kaskadiert dieser EINE Block durch die ganze App. Status-Grün (--ok =
     helles Blattgrün) bleibt getrennt → Stripe-Trennung Akzent ≠ Status. */
  --c-brand-50:#eef4f1;  --c-brand-100:#d8e8e1; --c-brand-200:#b4d3c7;
  --c-brand-300:#82b5a3; --c-brand-400:#4c9079; --c-brand-500:#1B3A35;
  --c-brand-600:#143029; --c-brand-700:#0F2820; --c-brand-800:#0b1e18;
  --c-brand-900:#07140f;
  /* Sidebar-eigene Rampe (dunkle Marken-Schiene) */
  --side-bg-top:#0F2820; --side-bg-bot:#173a30;
  --side-text:#9fb6ac; --side-text-strong:#f3f8f6; --side-muted:#628075;
  --side-hover:rgba(255,255,255,.06); --side-active:rgba(74,222,128,.15);
  --side-border:rgba(255,255,255,.07);
  /* KRITISCH: die SEMANTISCHEN Marken-Tokens HIER neu binden. In :root wurden sie gegen das
     DORTIGE (indigo) --c-brand-* aufgelöst und als Indigo eingefroren → jede Komponente, die
     var(--primary)/var(--brand) statt var(--c-brand-*) nutzt (Reiter, Links, Akzente), blieb sonst
     indigo. Hier neu deklariert lösen sie sich im .ui-v2-Scope gegen das grüne --c-brand-* auf. */
  --brand:var(--c-brand-500); --brand-strong:var(--c-brand-600); --brand-soft:var(--c-brand-50);
  --primary:var(--c-brand-500); --primary-dark:var(--c-brand-600); --primary-light:var(--c-brand-50);
}

/* ── Sidebar als grüne Marken-Schiene ──────────────────────────────────────────────────── */
.ui-v2 .sidebar { background:linear-gradient(180deg,var(--side-bg-top) 0%,var(--side-bg-bot) 100%);
  color:var(--side-text); border-right:1px solid var(--side-border); }
.ui-v2 .sidebar-logo { border-bottom:1px solid var(--side-border); }
.ui-v2 .ui-v2-logo-mark { display:inline-flex; }
.ui-v2 .sidebar-logo-name { color:var(--side-text-strong); }
.ui-v2 .ui-v2-logo-accent { color:var(--finn-accent); }
.ui-v2 .sidebar-logo-sub { color:var(--side-muted); }
.ui-v2 .nav-group-label { color:var(--side-muted); }
.ui-v2 .nav-group-label--spaced { margin-top:var(--sp-3); }
.ui-v2 .nav-item { color:var(--side-text); border-radius:var(--radius-sm); font-weight:var(--fw-medium); }
.ui-v2 .nav-item:hover { background:var(--side-hover); color:var(--side-text-strong); }
.ui-v2 .nav-item.active { background:var(--side-active); color:var(--side-text-strong);
  box-shadow:inset 2px 0 0 var(--finn-accent); }
.ui-v2 .sidebar-footer { border-top:1px solid var(--side-border); }
.ui-v2 .version { color:var(--side-muted); margin-top:.5rem; padding:.25rem .75rem; }
.ui-v2 .user-chip-name { color:var(--side-text-strong); }
.ui-v2 .user-chip-role { color:var(--side-muted); }
.ui-v2 .user-chip:hover { background:var(--side-hover); }
.ui-v2 .user-avatar { background:var(--side-active); color:var(--finn-accent); }

/* ── Finn-Assistent — von Inline-Lila auf grüne Klassen (eine Identität) ──────────────────── */
.ui-v2 .finn-fab-wrap { position:fixed; bottom:24px; right:24px; z-index:9000; }
.ui-v2 .finn-fab { width:52px; height:52px; border-radius:50%; background:var(--finn); border:none;
  cursor:pointer; box-shadow:0 4px 20px rgba(15,40,32,.35); display:flex; align-items:center;
  justify-content:center; color:var(--finn-accent); transition:transform .2s, box-shadow .2s; }
.ui-v2 .finn-fab:hover { transform:scale(1.08); box-shadow:0 6px 26px rgba(15,40,32,.45); }
.ui-v2 .finn-panel { position:fixed; bottom:88px; right:24px; width:360px; max-width:calc(100vw - 48px);
  background:var(--surface-card); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  border:1px solid var(--border); z-index:9000; overflow:hidden; display:flex; flex-direction:column; }
.ui-v2 .finn-panel[hidden] { display:none; }
.ui-v2 .finn-head { background:linear-gradient(135deg,var(--finn-deep),var(--finn)); padding:16px 18px;
  display:flex; align-items:center; gap:10px; flex-shrink:0; color:#fff; }
.ui-v2 .finn-head-icon { width:36px; height:36px; background:rgba(74,222,128,.2); border-radius:10px;
  display:flex; align-items:center; justify-content:center; color:var(--finn-accent); }
.ui-v2 .finn-head-name { font-size:14px; font-weight:700; color:#fff; }
.ui-v2 .finn-head-sub { font-size:11px; color:rgba(255,255,255,.55); }
.ui-v2 .finn-head-close { margin-left:auto; background:none; border:none; color:rgba(255,255,255,.55);
  cursor:pointer; font-size:18px; line-height:1; padding:4px 8px; }
.ui-v2 .finn-head-close:hover { color:#fff; }
.ui-v2 .finn-messages { height:300px; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; }
.ui-v2 .finn-greeting { background:var(--ok-soft); border-radius:10px; padding:12px 14px; font-size:13px;
  color:var(--ok-text); line-height:1.6; }
.ui-v2 .finn-chips { display:flex; flex-wrap:wrap; gap:6px; }
.ui-v2 .finn-chip { font-size:11px; padding:5px 10px; background:var(--surface-sunken); border:none;
  border-radius:6px; cursor:pointer; color:var(--text); font-family:inherit; transition:background .15s; }
.ui-v2 .finn-chip:hover { background:var(--border); }
.ui-v2 .finn-msg-user { align-self:flex-end; background:var(--finn); color:#fff;
  border-radius:10px 10px 2px 10px; padding:10px 14px; font-size:13px; max-width:85%; line-height:1.5; }
.ui-v2 .finn-msg-finn { align-self:flex-start; background:var(--surface); border:1px solid var(--border);
  border-radius:10px 10px 10px 2px; padding:10px 14px; font-size:13px; max-width:90%; line-height:1.6; color:var(--text-strong); }
.ui-v2 .finn-msg-loading { align-self:flex-start; color:var(--text-muted); font-size:13px; padding:6px 0; }
.ui-v2 .finn-inputbar { padding:12px; border-top:1px solid var(--border); display:flex; gap:8px; flex-shrink:0; }
.ui-v2 .finn-input { flex:1; border:1.5px solid var(--border); border-radius:8px; padding:9px 12px;
  font-size:13px; font-family:inherit; outline:none; transition:border-color .15s; color:var(--text); }
.ui-v2 .finn-input:focus { border-color:var(--finn); }
.ui-v2 .finn-send { width:36px; height:36px; background:var(--finn); border:none; border-radius:8px;
  cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; color:#fff; }
.ui-v2 .finn-send:hover { background:var(--finn-deep); }

/* ════════════════════════════════════════════════════════════════════════════════════════
   DASHBOARD v2 — Senior-Redesign (29.06.2026). Nicht-Reskin: echte Informations-Hierarchie.
   Aufbau: (1) KPI-Band — Headline-Zahlen zuerst, (2) Ranking-Radar als Balken-Visualisierung,
   (3) Handlungs-Spalten, (4) ruhige Portfolio-Tabelle mit Avatar/Qualitäts-Balken.
   Alles unter .ui-v2 gescoped → klassische Shell + Tests unberührt. Tokens aus dem v2-System. ═══ */

/* ── Sektion-Überschrift (kleines Label über jedem Block) ──────────────────────────────── */
.ui-v2 .dx-eyebrow { font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.08em;
  text-transform:uppercase; color:var(--text-muted); margin:0 0 var(--sp-3); display:flex;
  align-items:center; gap:var(--sp-2); }
.ui-v2 .dx-eyebrow::after { content:''; flex:1; height:1px; background:var(--border); }

/* ── (1) KPI-Band ──────────────────────────────────────────────────────────────────────── */
.ui-v2 .dx-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-bottom:var(--sp-6); }
@media (max-width:1100px){ .ui-v2 .dx-kpis { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .ui-v2 .dx-kpis { grid-template-columns:1fr; } }
.ui-v2 .dx-kpi { position:relative; background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:var(--sp-5); box-shadow:var(--shadow-sm); overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease; }
.ui-v2 .dx-kpi:hover { box-shadow:var(--shadow-md); transform:translateY(-2px); }
.ui-v2 .dx-kpi::before { content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c-brand-400); opacity:.0; transition:opacity .18s; }
.ui-v2 .dx-kpi:hover::before { opacity:1; }
.ui-v2 .dx-kpi-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); }
.ui-v2 .dx-kpi-label { font-size:var(--fs-xs); font-weight:var(--fw-semibold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-muted); }
.ui-v2 .dx-kpi-ic { width:30px; height:30px; border-radius:var(--radius-sm); display:flex; align-items:center;
  justify-content:center; background:var(--c-brand-50); color:var(--c-brand-600); flex-shrink:0; }
.ui-v2 .dx-kpi-num { font-size:2.4rem; font-weight:var(--fw-bold); line-height:1; color:var(--text-strong);
  font-variant-numeric:tabular-nums; letter-spacing:-.02em; display:flex; align-items:baseline; gap:.15em; }
.ui-v2 .dx-kpi-unit { font-size:var(--fs-lg); font-weight:var(--fw-semibold); color:var(--text-muted); }
.ui-v2 .dx-kpi-foot { margin-top:var(--sp-3); font-size:var(--fs-sm); color:var(--text-muted); display:flex; align-items:center; gap:var(--sp-2); }
.ui-v2 .dx-chip { font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:.1rem .45rem; border-radius:var(--radius-full); }
.ui-v2 .dx-chip--up { color:var(--ok-text); background:var(--ok-soft); }
.ui-v2 .dx-chip--down { color:var(--bad-text); background:var(--bad-soft); }
.ui-v2 .dx-chip--neutral { color:var(--text-muted); background:var(--surface-sunken); }

/* ── (2/3) Intel-Raster ────────────────────────────────────────────────────────────────── */
.ui-v2 .dx-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--sp-4); margin-bottom:var(--sp-6); align-items:start; }
@media (max-width:1100px){ .ui-v2 .dx-grid { grid-template-columns:1fr; } }
.ui-v2 .dx-card { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.ui-v2 .dx-card-hd { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--border); }
.ui-v2 .dx-card-hd h3 { margin:0; font-size:var(--fs-md); font-weight:var(--fw-bold); color:var(--text-strong);
  display:flex; align-items:center; gap:var(--sp-2); }
.ui-v2 .dx-card-hd .dx-meta { font-size:var(--fs-xs); color:var(--text-muted); font-weight:var(--fw-medium); }
.ui-v2 .dx-card-bd { padding:var(--sp-3) var(--sp-5) var(--sp-5); }

/* Ranking-Radar — zwei Spalten Gewinner/Verlierer mit Delta-Balken */
.ui-v2 .dx-radar { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
@media (max-width:560px){ .ui-v2 .dx-radar { grid-template-columns:1fr; } }
.ui-v2 .dx-rcol-hd { font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.04em; text-transform:uppercase;
  margin:var(--sp-2) 0 var(--sp-3); display:flex; align-items:center; gap:var(--sp-2); }
.ui-v2 .dx-rcol-hd.up { color:var(--ok-text); } .ui-v2 .dx-rcol-hd.down { color:#9e6055; }
.ui-v2 .dx-rrow { display:grid; grid-template-columns:1fr auto; gap:.1rem var(--sp-2); padding:var(--sp-2) 0;
  text-decoration:none; border-bottom:1px solid var(--border); transition:background .12s; }
.ui-v2 .dx-rrow:last-child { border-bottom:0; }
.ui-v2 .dx-rrow:hover { background:var(--surface-sunken); }
.ui-v2 .dx-rkw { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; }
.ui-v2 .dx-rdelta { font-size:var(--fs-xs); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; align-self:center; }
/* Ruhiges Design: Ranking-Rückgang ist Normalität, kein Notfall → entsättigtes Clay-Rot statt Alarm-Rot,
   Verlierer optisch ZURÜCKGENOMMEN ggü. Gewinner-Grün. */
.ui-v2 .dx-rdelta.up { color:var(--ok); } .ui-v2 .dx-rdelta.down { color:#a8675c; }
.ui-v2 .dx-rmeta { grid-column:1; font-size:var(--fs-xs); color:var(--text-muted); }
.ui-v2 .dx-rbar { grid-column:1 / -1; height:4px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden; margin-top:.2rem; }
.ui-v2 .dx-rbar i { display:block; height:100%; border-radius:var(--radius-full); }
.ui-v2 .dx-rbar.up i { background:var(--ok); } .ui-v2 .dx-rbar.down i { background:#d6a99f; }
.ui-v2 .dx-rempty { font-size:var(--fs-sm); color:var(--text-muted); padding:var(--sp-4) 0; text-align:center; }

/* Handlungs-Liste (Quick Wins / Aufgaben) */
.ui-v2 .dx-list { display:flex; flex-direction:column; }
.ui-v2 .dx-li { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) 0; text-decoration:none;
  border-bottom:1px solid var(--border); transition:padding-left .14s; }
.ui-v2 .dx-li:last-child { border-bottom:0; }
.ui-v2 .dx-li:hover { padding-left:var(--sp-2); }
.ui-v2 .dx-pos { flex-shrink:0; min-width:38px; height:26px; border-radius:var(--radius-sm); display:flex;
  align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:var(--fw-bold);
  font-variant-numeric:tabular-nums; background:var(--ok-soft); color:var(--ok-text); }
.ui-v2 .dx-pos.amber { background:var(--warn-soft); color:var(--warn-text); }
.ui-v2 .dx-li-main { flex:1; min-width:0; }
.ui-v2 .dx-li-kw { font-size:var(--fs-sm); font-weight:var(--fw-semibold); color:var(--text-strong);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ui-v2 .dx-li-sub { font-size:var(--fs-xs); color:var(--text-muted); }
.ui-v2 .dx-li-arrow { color:var(--text-muted); flex-shrink:0; opacity:0; transition:opacity .14s; }
.ui-v2 .dx-li:hover .dx-li-arrow { opacity:1; }
.ui-v2 .dx-li-tags { display:flex; gap:var(--sp-1); flex-shrink:0; }
.ui-v2 .dx-tag { font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:.1rem .4rem; border-radius:var(--radius-sm); }
.ui-v2 .dx-tag--hoch { background:var(--bad-soft); color:var(--bad-text); }
.ui-v2 .dx-tag--warn { background:var(--warn-soft); color:var(--warn-text); }
.ui-v2 .dx-tag--info { background:var(--c-brand-50); color:var(--c-brand-600); }

/* Erklärsatz unter einer Karten-Überschrift (Status → Insight) */
.ui-v2 .dx-explain { font-size:var(--fs-xs); color:var(--text-muted); line-height:1.5; margin:0 0 var(--sp-3);
  padding-bottom:var(--sp-3); border-bottom:1px solid var(--border); }
/* Explizite Aktion pro Zeile (Insight → Aktion): immer sichtbares Verb, kein verstecktes Pfeilchen */
.ui-v2 .dx-cta { flex-shrink:0; display:inline-flex; align-items:center; gap:.2rem; font-size:var(--fs-xs);
  font-weight:var(--fw-bold); color:var(--c-brand-600); background:var(--c-brand-50); padding:.25rem .55rem;
  border-radius:var(--radius-sm); white-space:nowrap; transition:background .14s, color .14s; }
.ui-v2 .dx-li:hover .dx-cta { background:var(--c-brand-500); color:#fff; }
.ui-v2 .dx-cta--neutral { color:var(--text-muted); background:var(--surface-sunken); }
.ui-v2 .dx-li:hover .dx-cta--neutral { background:var(--c-brand-500); color:#fff; }

/* ── (4) Portfolio-Tabelle ─────────────────────────────────────────────────────────────── */
.ui-v2 .dx-portfolio { background:var(--surface-card); border:1px solid var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); overflow:hidden; }
.ui-v2 .dx-ptable { width:100%; border-collapse:collapse; }
.ui-v2 .dx-ptable thead th { font-size:var(--fs-xs); font-weight:var(--fw-bold); letter-spacing:.04em;
  text-transform:uppercase; color:var(--text-muted); text-align:left; padding:var(--sp-3) var(--sp-4);
  border-bottom:1px solid var(--border); background:var(--surface); }
.ui-v2 .dx-ptable th.c, .ui-v2 .dx-ptable td.c { text-align:center; }
.ui-v2 .dx-ptable tbody tr { cursor:pointer; transition:background .12s; }
.ui-v2 .dx-ptable tbody tr:hover { background:var(--surface-sunken); }
.ui-v2 .dx-ptable td { padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--border); vertical-align:middle; }
.ui-v2 .dx-ptable tbody tr:last-child td { border-bottom:0; }
.ui-v2 .dx-kunde { display:flex; align-items:center; gap:var(--sp-3); }
.ui-v2 .dx-avatar { width:34px; height:34px; border-radius:var(--radius); flex-shrink:0; display:flex;
  align-items:center; justify-content:center; font-size:var(--fs-sm); font-weight:var(--fw-bold);
  background:var(--c-brand-500); color:#fff; letter-spacing:.02em; }
.ui-v2 .dx-kunde-name { font-size:var(--fs-base); font-weight:var(--fw-semibold); color:var(--text-strong); }
.ui-v2 .dx-kunde-sub { font-size:var(--fs-xs); color:var(--text-muted); display:flex; gap:var(--sp-2); margin-top:.05rem; }
.ui-v2 .dx-wf { font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:.2rem .55rem; border-radius:var(--radius-full); white-space:nowrap; }
.ui-v2 .dx-wf.wf-done{background:var(--ok-soft);color:var(--ok-text)} .ui-v2 .dx-wf.wf-export{background:var(--c-brand-50);color:var(--c-brand-600)}
.ui-v2 .dx-wf.wf-content{background:var(--warn-soft);color:var(--warn-text)} .ui-v2 .dx-wf.wf-keywords{background:var(--warn-soft);color:var(--warn-text)}
.ui-v2 .dx-wf.wf-draft{background:var(--surface-sunken);color:var(--text-muted)}
.ui-v2 .dx-qual { display:inline-flex; flex-direction:column; align-items:center; gap:.2rem; min-width:54px; }
.ui-v2 .dx-qual-val { font-size:var(--fs-sm); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.ui-v2 .dx-qual-track { width:48px; height:4px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden; }
.ui-v2 .dx-qual-track i { display:block; height:100%; border-radius:var(--radius-full); }
.ui-v2 .dx-qual.good .dx-qual-val{color:var(--ok)} .ui-v2 .dx-qual.good .dx-qual-track i{background:var(--ok)}
.ui-v2 .dx-qual.ok .dx-qual-val{color:var(--warn)} .ui-v2 .dx-qual.ok .dx-qual-track i{background:var(--warn)}
.ui-v2 .dx-qual.bad .dx-qual-val{color:var(--bad)} .ui-v2 .dx-qual.bad .dx-qual-track i{background:var(--bad)}
.ui-v2 .dx-dash { color:var(--text-muted); }
.ui-v2 .dx-dot { font-size:.8rem; } .ui-v2 .dx-dot.on{color:var(--ok)} .ui-v2 .dx-dot.off{color:var(--border-strong)}
.ui-v2 .dx-opp { font-size:var(--fs-xs); font-weight:var(--fw-bold); padding:.15rem .5rem; border-radius:var(--radius-full); background:var(--bad-soft); color:var(--bad-text); }

/* ── Wizard-Fortschritt als dx-Stepper (system-weit: alle 5 Schritte + projekt_bearbeiten) ──────
   NUR im .ui-v2-Scope → Klassik-Shell (base.html) bleibt pixelgleich (Strangler-Fig). Reines CSS auf
   server-gerendertem Markup (.wizard-progress > .step.active/.done > span) — KEIN JS berührt.
   Hebung ggü. flach: grün gefüllter Pfad bis zum aktiven Schritt + solide Häkchen-Badges + tief-grüner
   Aktiv-Badge mit weichem Halo + ruhige künftige Schritte. 0 rohe Hex (nur Tokens). */
.ui-v2 .wizard-progress { background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 1px 2px rgba(11,30,24,.05); }
/* globale flache Linie aus → wird durch grün-füllbare Segmente je Schritt ersetzt */
.ui-v2 .wizard-progress::before { display:none; }
.ui-v2 .wizard-progress .step::after { content:''; position:absolute; top:50%; transform:translateY(-8px);
  right:50%; width:100%; height:2px; background:var(--border); z-index:0; }
.ui-v2 .wizard-progress .step:first-child::after { display:none; }
/* Segment, das in einen erreichten (done/active) Schritt führt, ist grün → fortlaufende Füllung */
.ui-v2 .wizard-progress .step.done::after,
.ui-v2 .wizard-progress .step.active::after { background:var(--ok); }
/* künftiger Schritt: ruhige neutrale Plakette; Halo in Flächenfarbe maskiert die Linie dahinter */
.ui-v2 .wizard-progress .step { color:var(--text-muted); font-weight:var(--fw-semibold); }
.ui-v2 .wizard-progress .step span { width:34px; height:34px; background:var(--surface-card);
  border:2px solid var(--border-strong); color:var(--text-muted); font-weight:var(--fw-bold);
  box-shadow:0 0 0 4px var(--surface-card); transition:all .2s; }
/* aktiver Schritt: Ricknify-Tiefgrün, weicher Halo + Schatten */
.ui-v2 .wizard-progress .step.active { color:var(--c-brand-500); }
.ui-v2 .wizard-progress .step.active span { background:var(--c-brand-500); color:var(--surface-card);
  border-color:var(--c-brand-500); box-shadow:0 0 0 4px var(--c-brand-50), 0 2px 6px rgba(27,58,53,.28); }
/* erledigter Schritt: solides Status-Grün mit weißem Häkchen (statt blasser Tönung) */
.ui-v2 .wizard-progress .step.done { color:var(--text); }
.ui-v2 .wizard-progress .step.done span { background:var(--ok); color:var(--surface-card);
  border-color:var(--ok); box-shadow:0 0 0 4px var(--surface-card); }

/* ── Wizard Schritt 1: 2-Spalten-Layout + sticky „Profil-Stärke"-Schiene (NUR .ui-v2) ───────────
   Senior-Umbau (kein Recolor): das wichtigste Orientierungs-Element — wie vollständig ist das Profil
   + welcher Geschäftsinfo-Bereich ist dünn — war ein winziges Floating-Widget unten rechts (überlappte
   Footer). Wird zur rechten Schiene: Gesamt-Score + pro Bereich Füll-Anzeige, jede Zeile anklickbar →
   klappt die Akkordeon-Sektion auf + scrollt hin. Reines Additiv: alle Formularfelder/JS-Hooks/IDs
   bleiben. Klassik-Shell pixelgleich (Schiene default display:none, altes Float-Widget bleibt dort).
   0 rohe Hex (nur Tokens). */
.wiz-layout { }                                   /* Klassik: einfacher Block-Wrapper, kein visueller Effekt */
.wiz-rail { display:none; }                       /* Klassik: unsichtbar — altes Float-Widget regiert weiter */
.ui-v2 .wizard-container.wiz-has-rail { max-width:1120px; }
.ui-v2 .wiz-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:1.5rem; align-items:start; }
.ui-v2 .wiz-rail { display:block; position:sticky; top:1rem; }
.ui-v2 .profil-float { display:none; }            /* altes Eck-Widget im neuen Layout aus */

.ui-v2 .wiz-rail-card { background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:0 1px 2px rgba(11,30,24,.05); padding:1.1rem 1.15rem; }
.ui-v2 .wiz-rail-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:.6rem; }
.ui-v2 .wiz-rail-title { font-size:.8rem; font-weight:var(--fw-bold); letter-spacing:.02em;
  text-transform:uppercase; color:var(--text-muted); }
.ui-v2 .wiz-rail-score { font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; color:var(--c-brand-500); }
.ui-v2 .wiz-rail-bar { height:7px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden; }
.ui-v2 .wiz-rail-bar > i { display:block; height:100%; border-radius:var(--radius-full);
  background:var(--c-brand-500); width:0; transition:width .3s; }
.ui-v2 .wiz-rail-hint { font-size:.72rem; color:var(--text-muted); margin:.45rem 0 .9rem; line-height:1.35; }

.ui-v2 .wiz-rail-sections { display:flex; flex-direction:column; gap:.15rem; }
.ui-v2 .wiz-rail-sec { display:flex; align-items:center; gap:.6rem; width:100%; text-align:left;
  background:none; border:none; border-radius:var(--radius-sm); padding:.4rem .45rem; cursor:pointer; transition:background .12s; }
.ui-v2 .wiz-rail-sec:hover { background:var(--surface-sunken); }
.ui-v2 .wiz-rail-sec-name { flex:1; font-size:.78rem; color:var(--text); min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ui-v2 .wiz-rail-sec-track { flex:0 0 42px; height:4px; border-radius:var(--radius-full); background:var(--surface-sunken); overflow:hidden; }
.ui-v2 .wiz-rail-sec-track > i { display:block; height:100%; border-radius:var(--radius-full); background:var(--c-brand-400); width:0; transition:width .3s; }
.ui-v2 .wiz-rail-sec.full .wiz-rail-sec-track > i { background:var(--ok); }
.ui-v2 .wiz-rail-sec.empty .wiz-rail-sec-track > i { background:var(--border-strong); }
.ui-v2 .wiz-rail-sec-cnt { flex:0 0 auto; font-size:.68rem; font-variant-numeric:tabular-nums; color:var(--text-muted); min-width:26px; text-align:right; }
.ui-v2 .wiz-rail-sec.empty .wiz-rail-sec-name { color:var(--text-muted); }
.ui-v2 .wiz-rail-note { margin-top:.9rem; padding-top:.8rem; border-top:1px solid var(--border);
  font-size:.7rem; color:var(--text-muted); line-height:1.4; }

@media (max-width:980px){
  .ui-v2 .wizard-container.wiz-has-rail { max-width:780px; }
  .ui-v2 .wiz-layout { grid-template-columns:1fr; }
  .ui-v2 .wiz-rail { position:static; margin-top:1rem; }
}

/* ── Wizard Schritt 1: KI-Auto-Befüller als Assist-Karte (NUR .ui-v2) ───────────────────────────
   Senior-Umbau (kein Recolor): die zwei stärksten Zeit-Hebel des Wizards — „Profil aus Website
   extrahieren" + „Brand Voice analysieren" (Claude füllt das ganze Formular aus der Kundenseite vor)
   — lagen als 11px-Inline-Link im URL-Label + grauer Mini-Button = praktisch unsichtbar. Werden zur
   prominenten Karte oben im Formular. Ruft DIESELBEN Funktionen (extrahiereProfil/analysiereBrandVoice),
   KEIN JS geändert, KEINE ID bewegt → Auto-Befüllung unangetastet. Status erscheint weiter in den
   Badges am URL-Feld direkt darunter. In .ui-v2 werden die jetzt redundanten Inline-Trigger ausgeblendet.
   Klassik-Shell pixelgleich (Karte default display:none, Inline-Links bleiben). 0 rohe Hex (nur Tokens). */
.wiz-assist { display:none; }                     /* Klassik: aus — alte Inline-Links regieren weiter */
.ui-v2 .wiz-assist { display:flex; gap:.9rem; align-items:flex-start; margin-bottom:1.25rem;
  padding:1rem 1.15rem; border-radius:var(--radius-lg);
  background:var(--c-brand-50); border:1px solid var(--c-brand-200); }
.ui-v2 .wiz-assist-icon { flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center;
  border-radius:var(--radius); background:var(--c-brand-500); color:var(--surface-card); font-size:1rem; }
.ui-v2 .wiz-assist-body { flex:1; min-width:0; }
.ui-v2 .wiz-assist-title { font-size:.95rem; font-weight:var(--fw-bold); color:var(--c-brand-500); margin-bottom:.2rem; }
.ui-v2 .wiz-assist-text { font-size:.78rem; color:var(--text-muted); line-height:1.45; margin:0 0 .7rem; }
.ui-v2 .wiz-assist-text strong { color:var(--text); font-weight:var(--fw-semibold); }
.ui-v2 .wiz-assist-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.ui-v2 .wiz-assist-btn { font-size:.8rem; font-weight:var(--fw-semibold); padding:.45rem .85rem;
  border-radius:var(--radius-sm); cursor:pointer; transition:all .12s;
  background:var(--surface-card); border:1px solid var(--c-brand-200); color:var(--c-brand-500); }
.ui-v2 .wiz-assist-btn:hover { border-color:var(--c-brand-400); background:var(--surface); }
.ui-v2 .wiz-assist-btn.primary { background:var(--c-brand-500); border-color:var(--c-brand-500); color:var(--surface-card); }
.ui-v2 .wiz-assist-btn.primary:hover { background:var(--c-brand-400); border-color:var(--c-brand-400); }
/* in .ui-v2 die jetzt redundanten Inline-Trigger aus (Badges/Status bleiben sichtbar) */
.ui-v2 .wiz-inline-assist { display:none; }
.ui-v2 #profil-extrakt-btn { display:none; }
@media (max-width:980px){ .ui-v2 .wiz-assist { flex-direction:column; gap:.6rem; } }

/* ── Wizard Schritt 2: Handlungs-Hierarchie + Marken-Kohärenz (NUR .ui-v2) ──────────────────────
   Senior-Umbau (KEIN Recolor als Selbstzweck): das Analyse-Ergebnis war ein flacher Stapel
   gleichgewichtiger Slate-Karten — Metrik-Streifen, Verdikt-Panel, Cluster lasen sich alle gleich
   laut, der Nutzer fand „ist das Keyword gut + was tue ich JETZT?" nicht. Drei strukturelle Hebel,
   alle rein visuell (kein Template/JS angefasst → Analyse-Flow unangetastet, Klassik pixelgleich):
   1) VERDIKT = Held: das Würdigkeits-Panel wird angehoben (Schatten/Radius/größerer Score) — es bleibt
      semantisch grün/amber/rot (Inline-JS setzt bg/border je Score, gewollt = Ampel).
   2) METRIK-STREIFEN = Beleg, nicht Schlagzeile: in eine ruhige, eingesenkte Stat-Leiste demotet.
   3) SEKTIONEN getiert: Titel mit Marken-Akzentstrich → Cluster/Wettbewerber/WDF lesen sich als
      nachgeordnete Tiefe statt als weitere Held-Karten.
   Dazu Marken-Kohärenz (Pflicht „kein Violett"): „Hauptkeyword"-Label, Seitentyp-Hover, commercial-
   Intent-Chips waren ROH-violett (#ede9fe/#f5f3ff/#f3e8ff) — im Grün-System umgefärbt auf Marken-Teal.
   0 rohe Hex (nur Tokens / Marken-Rampe, die in .ui-v2 komplett auf Teal zeigt). */

/* 1) Verdikt-Panel als Held — Schatten/Radius anheben; bg/border/Score-Farbe setzt Inline-JS (Ampel) */
.ui-v2 .s2-quality-panel { border-radius:var(--radius-lg); padding:1.15rem 1.3rem;
  box-shadow:var(--shadow-sm); }
.ui-v2 .s2-qp-score { font-size:2.3rem; letter-spacing:-.02em; }
.ui-v2 .s2-qp-score-label { font-size:.75rem; }
.ui-v2 .s2-qp-text { color:var(--text); }

/* 2) Metrik-Streifen demoten — ruhige eingesenkte Beleg-Leiste statt Schlagzeile */
.ui-v2 .s2-result-header { background:var(--surface-sunken); border:1px solid var(--border);
  border-radius:var(--radius); }
.ui-v2 .s2-metric-val { color:var(--text); font-size:.95rem; }
.ui-v2 .s2-metric-lbl { color:var(--text-muted); }
.ui-v2 .s2-metric-sep { background:var(--border); }

/* 3) Sektionen tieren — Marken-Akzentstrich vor dem Titel macht nachgeordnete Tiefe sichtbar */
.ui-v2 .s2-section-title { color:var(--text-muted); display:flex; align-items:center; gap:.5rem; }
.ui-v2 .s2-section-title::before { content:''; width:3px; height:.78rem; border-radius:var(--radius-full);
  background:var(--c-brand-400); flex:0 0 auto; }

/* Seitentyp-Panel + Buttons tokenisieren; Hover war ROH-violett (#f5f3ff) → Marken-Teal */
.ui-v2 .s2-seitenziel-panel { background:var(--surface-card); border:1px solid var(--border);
  border-radius:var(--radius); }
.ui-v2 .s2-panel-title { color:var(--text); }
.ui-v2 .s2-sz-btn { background:var(--surface-card); border:1.5px solid var(--border); border-radius:var(--radius-sm); }
.ui-v2 .s2-sz-btn:hover { border-color:var(--c-brand-500); background:var(--c-brand-50); }
.ui-v2 .s2-sz-btn.active { border-color:var(--c-brand-500); background:var(--c-brand-50); }
.ui-v2 .s2-sz-label { color:var(--text); }

/* Marken-Kohärenz: „Hauptkeyword"-Cluster + commercial-Intent waren violett → Marken-Teal */
.ui-v2 .cluster-purple { background:var(--c-brand-100); color:var(--c-brand-700); }
.ui-v2 .kw-purple { border-color:var(--c-brand-200); background:var(--c-brand-50); color:var(--c-brand-700); }
.ui-v2 .badge-purple { background:var(--c-brand-50); color:var(--c-brand-700); border-color:var(--c-brand-200); }
.ui-v2 .s2-alt-intent-c { background:var(--c-brand-100); color:var(--c-brand-700); }

/* ── Wizard Schritt 3: Marken-Kohärenz + Palette/Canvas-Hierarchie (NUR .ui-v2) ──────────
   Senior-Befund: die IA (links Block-Bibliothek = Palette, rechts Seitenaufbau = Canvas) ist
   schon gut — kein Umbau nötig. Was fehlt, ist Design-System-Disziplin:
   1) ICON-REGENBOGEN: 18 Icons tragen INLINE style="color:#6366f1/#8b5cf6/#ec4899…" (Indigo/
      Violett/Pink). Inline schlägt CSS → der Regenbogen bleibt selbst im grünen Shell sichtbar
      (genau das „Violett", das raus soll, + der Amateur-Tell; ein Design-System hat MONOCHROME
      Icons, das Label trägt die Bedeutung — Linear/Stripe). Neutralisiert auf ein ruhiges Marken-
      Teal; nur hier ist !important nötig, weil es Inline-Styles schlagen muss.
   2) VIOLETT in Live-Zuständen: intention-badge.active (#ede9fe), page-block.selected-Ring
      (#ede9fe), Hover-Border (#c4b5fd) feuern bei JEDER Auswahl → auf Marken-Token.
   3) Bläuliche #fafbff-Hover → Marken-Teal-50 (Kohärenz mit dem Rest des Wizards).
   4) HIERARCHIE-HEBEL (nicht Farbe): Canvas (rechte Spalte) als eingesenkte Arbeitsfläche, damit
      Palette≠Canvas klar liest. Template/JS unberührt, Klassik pixelgleich. */

/* 1) Icons monochrom — !important schlägt die Inline-Farben */
.ui-v2 .block-card-icon svg,
.ui-v2 .seitenziel-icon svg { color:var(--c-brand-400) !important; }
.ui-v2 .block-card:hover .block-card-icon svg,
.ui-v2 .seitenziel-card:hover .seitenziel-icon svg,
.ui-v2 .seitenziel-card.active .seitenziel-icon svg { color:var(--c-brand-600) !important; }

/* 2) Violett-Lecks der Auswahl-Zustände → Marken-Teal */
.ui-v2 .intention-badge:hover:not(.active) { border-color:var(--c-brand-200); color:var(--c-brand-600); }
.ui-v2 .intention-badge.active { background:var(--c-brand-50); border-color:var(--c-brand-500); color:var(--c-brand-700); }
.ui-v2 .page-block.selected { border-color:var(--c-brand-500); box-shadow:0 0 0 2px var(--c-brand-100); }

/* 3) Off-Brand-Hover → Marken-Teal-50 */
.ui-v2 .block-card:hover { border-color:var(--c-brand-500); background:var(--c-brand-50); }
.ui-v2 .seitenziel-card:hover { border-color:var(--c-brand-500); background:var(--c-brand-50); }

/* 4) Canvas-Hierarchie: rechte Spalte als eingesenkte Arbeitsfläche (Palette≠Canvas) */
.ui-v2 .s3-builder { background:var(--surface-sunken); border:1px solid var(--border); border-radius:var(--radius-lg); padding:1rem 1.1rem; }
.ui-v2 .s3-builder .page-block { background:var(--surface-card); }
.ui-v2 .s3-panel-hint, .ui-v2 .s3-meta { color:var(--text-muted); }

/* ── Wizard Schritt 4: kein-Violett-Kohärenz + EINE Gate-Banner-Familie (NUR .ui-v2) ──
   Befund (Senior): Bones tragen (Generieren → Editieren → Qualität → Export), aber Marken-Brüche
   feuern im Normalfluss: WDF-Term-Chips + „Differenziert"-Badge in Violett (#ede9fe/#6d28d9/#5b21b6),
   und das YMYL-Gate ist eine eigene Violett-Insel (#fdf4ff/#d8b4fe) NEBEN vier amber Geschwister-Gates
   (lokal/profil/branche/token). Ruhiges Design = EINE Warn-Sprache (amber/grün); das Icon+Label trägt
   die Spezifik, nicht die Farbe (Stripe/Linear). JS-Indigo-Akzente (#6366f1 = Klassik-Brand-500) sind
   separat im Template auf var(--c-brand-*) umgestellt → shell-adaptiv (Klassik bleibt indigo, v2 teal).
   STRUKTUR-Schuld (Banner-Lawine: bis zu ~6 gestapelte Gates VOR dem Generieren-Button) bewusst NICHT
   hier — das ist ein REGEL-6-Vorschlag (verhaltensändernd, trifft auch die Klassik-Shell). */
/* 1) Violett-Akzente (Term-Chip + „Differenziert"-Badge) → Marken-Teal */
.ui-v2 .wdf-term-chip { background:var(--c-brand-50) !important; color:var(--c-brand-700) !important; }
.ui-v2 [id^="comp-badge-"] { background:var(--c-brand-50) !important; color:var(--c-brand-700) !important; }
/* 2) YMYL-Gate in die amber Warn-Familie seiner Geschwister-Gates (kein Violett-Sonderweg) */
.ui-v2 #ymyl-warnung-bar { background:var(--warn-soft) !important; border-color:var(--c-warn-200) !important; color:var(--warn-text) !important; }
.ui-v2 #ymyl-signale-fehlend { color:var(--warn-text) !important; }
.ui-v2 #ymyl-warnung-bar .btn[onclick^="generiereSeite"] { background:var(--warn) !important; }