/* ===================================================
   HandwerkAI - Profi-Werkzeuge
   Modale Werkzeuge, Ergebniskarten, Sprachaufnahme
   =================================================== */

/* ===== 1. MODAL-RAHMEN ===== */
.hw-modal .hw-modal-content {
    height: auto;
    max-height: 92vh;
    width: 100%;
}

.hw-modal .hw-modal-header {
    padding: 18px 24px;
}

.hw-modal-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}

.hw-modal-subtitle {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: 0;
    margin-top: 2px;
}

.hw-modal-body {
    padding: 22px 24px;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.hw-modal-footer {
    padding: 14px 24px;
    border-top: 1px solid var(--border-subtle);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    background: var(--bg-surface);
}

/* ===== 2. WERKZEUG-AUSWAHL ===== */
.hw-tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.hw-tool-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    cursor: pointer;
    text-align: left;
    font-family: var(--font-body);
    transition: all var(--transition-fast);
}

.hw-tool-card:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.hw-tool-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.hw-tool-text {
    flex: 1;
    min-width: 0;
}

.hw-tool-text strong {
    display: block;
    font-size: 0.95rem;
    color: var(--text-primary);
    margin-bottom: 3px;
}

.hw-tool-text small {
    display: block;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    line-height: 1.45;
}

.hw-tool-arrow {
    color: var(--text-muted);
    font-size: 0.8rem;
}

/* Werkzeugleiste auf dem Startbildschirm */
.hw-tool-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 4px auto 18px;
    max-width: 780px;
}

.hw-tool-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.84rem;
    font-weight: 500;
    font-family: var(--font-body);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hw-tool-chip i {
    color: var(--primary);
}

.hw-tool-chip:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    color: var(--text-primary);
    transform: translateY(-1px);
}

/* ===== 3. FORMULARE ===== */
.hw-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.hw-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hw-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hw-form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.hw-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 12px;
}

.hw-field-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.hw-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.9rem;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.hw-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.hw-textarea {
    resize: vertical;
    line-height: 1.5;
}

.hw-input-sm {
    padding: 6px 8px;
    font-size: 0.85rem;
}

.hw-input-num { text-align: right; max-width: 110px; }
.hw-input-unit { max-width: 80px; }

.hw-hint {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.hw-full { grid-column: 1 / -1; }

.hw-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.86rem;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

.hw-check input { accent-color: var(--primary); width: 16px; height: 16px; }

.hw-inline-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

/* ===== 4. BUTTONS ===== */
.hw-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-strong);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.hw-btn:hover:not(:disabled) {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-soft);
}

.hw-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.hw-btn-primary {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
    box-shadow: var(--shadow-primary);
}

.hw-btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: #fff;
}

.hw-btn-ghost { border-color: transparent; background: transparent; }
.hw-btn-ghost:hover:not(:disabled) { background: var(--bg-surface-hover); }

.hw-btn-danger-soft { color: var(--danger); border-color: #fecaca; }
.hw-btn-danger-soft:hover:not(:disabled) { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.hw-btn-sm { padding: 6px 11px; font-size: 0.79rem; }

.hw-icon-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    flex-shrink: 0;
    transition: all var(--transition-fast);
}

.hw-icon-btn:hover { background: var(--danger-bg); color: var(--danger); }

/* ===== 5. HINWEISE, LISTEN, TABELLEN ===== */
.hw-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-left: 3.5px solid var(--primary);
    font-size: 0.83rem;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 12px 0;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}

.hw-note i {
    color: var(--primary);
    font-size: 0.9rem;
    margin-top: 2px;
    flex-shrink: 0;
}

.hw-note-warn {
    background: rgba(245, 158, 11, 0.04);
    border-color: rgba(245, 158, 11, 0.22);
    border-left: 3.5px solid #F59E0B;
}

.hw-note-warn i { color: #D97706; }

.hw-muted { color: var(--text-tertiary); }
.hw-small { font-size: 0.82rem; }

.hw-list {
    margin: 8px 0 14px;
    padding-left: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hw-list li {
    position: relative;
    padding-left: 18px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.hw-list li::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--primary);
}

.hw-list-warn li::before {
    background: #F59E0B;
}

.hw-table-wrap {
    overflow-x: auto;
    margin: 8px 0 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-body);
}

.hw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.84rem;
}

.hw-table th {
    text-align: left;
    padding: 8px 11px;
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}

.hw-table td {
    padding: 8px 11px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    color: var(--text-primary);
}

.hw-table tr:last-child td {
    border-bottom: none;
}

.hw-table .num, .hw-table th.num { text-align: right; white-space: nowrap; }
.hw-table-compact td { padding: 6px 8px; font-size: 0.82rem; }
.hw-table tbody tr:hover { background: var(--bg-surface); }

.hw-table-sum td { border-bottom: none; padding: 4px 8px; }
.hw-table-sum tr.hw-sum td {
    border-top: 2px solid var(--text-primary);
    font-weight: 700;
    font-size: 0.95rem;
    padding-top: 8px;
}

.hw-sum-block { max-width: 380px; margin-left: auto; }

.hw-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    vertical-align: middle;
}

.hw-tag-calc { background: var(--success-bg); color: #047857; }
.hw-tag-must { background: var(--danger-bg); color: #b91c1c; }

.hw-check-cell { width: 34px; }
.hw-check-cell input { width: 17px; height: 17px; accent-color: var(--primary); }

.hw-pre {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 14px;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 0.79rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--text-primary);
    max-height: 420px;
    overflow-y: auto;
}

/* Der Rechenweg steht im Chat, ist aber kein Code-Block:
   die dunkle Chat-Formatierung für <pre> darf ihn nicht überdecken. */
.message-content pre.hw-pre {
    background: var(--bg-surface);
    color: var(--text-primary);
    padding: 14px;
    margin: 0;
}

/* ===== 6. ERGEBNISKARTEN IM CHAT ===== */
.hw-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
    margin: 4px 0 10px;
}

.hw-card-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.hw-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--primary-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.hw-card-head h3 {
    font-family: var(--font-heading);
    font-size: 0.98rem;
    font-weight: 600;
    margin: 0 0 3px;
    color: var(--text-primary);
    line-height: 1.35;
}

.hw-card-head p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-tertiary);
    line-height: 1.45;
}

.hw-card h4 {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    font-weight: 600;
    margin: 16px 0 6px;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
    letter-spacing: -0.01em;
}

.hw-card h4 i { color: var(--primary); font-size: 0.82rem; }

.hw-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.hw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

.hw-doc-body h2 {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    margin: 16px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.hw-doc-body ul { padding-left: 20px; margin-bottom: 10px; }
.hw-doc-body li { margin-bottom: 4px; }
.hw-doc-body table { width: 100%; border-collapse: collapse; font-size: 0.84rem; margin: 8px 0; }
.hw-doc-body th, .hw-doc-body td { border: 1px solid var(--border-subtle); padding: 6px 9px; text-align: left; }
.hw-doc-body th { background: var(--bg-surface); }
.hw-doc-body .note {
    background: var(--bg-surface);
    border-left: 3.5px solid var(--primary);
    padding: 9px 13px;
    font-size: 0.82rem;
    margin: 10px 0;
}

/* ===== 7. FOTOANALYSE ===== */
.hw-dropzone {
    border: 2px dashed var(--border-strong);
    border-radius: var(--radius-lg);
    padding: 28px 20px;
    text-align: center;
    cursor: pointer;
    background: var(--bg-surface);
    transition: all var(--transition-fast);
    margin-bottom: 14px;
}

.hw-dropzone:hover, .hw-dropzone-active {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.hw-dropzone i { font-size: 1.8rem; color: var(--primary); display: block; margin-bottom: 8px; }
.hw-dropzone strong { display: block; color: var(--text-primary); margin-bottom: 4px; font-size: 0.92rem; }
.hw-dropzone small { color: var(--text-tertiary); font-size: 0.78rem; }

.hw-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
}

.hw-thumb {
    position: relative;
    width: 110px;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all var(--transition-fast);
}

.hw-thumb:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

.hw-thumb img { width: 100%; height: 85px; object-fit: cover; display: block; }

.hw-thumbs-small .hw-thumb { width: 88px; border-radius: var(--radius-sm); }
.hw-thumbs-small .hw-thumb img { height: 66px; }

.hw-thumb-name {
    display: block;
    font-size: 0.66rem;
    padding: 3px 5px;
    color: var(--text-tertiary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hw-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 23, 42, 0.75);
    color: #fff;
    cursor: pointer;
    font-size: 0.7rem;
    line-height: 1;
}

.hw-thumb-remove:hover { background: var(--danger); }

.hw-cause {
    border: 1px solid var(--border-subtle);
    border-left: 3.5px solid var(--border-strong);
    border-radius: var(--radius-md);
    padding: 10px 13px;
    margin-bottom: 8px;
    background: var(--bg-surface);
    transition: all var(--transition-fast);
}

.hw-cause:hover {
    border-color: var(--border-strong);
    background: var(--bg-card);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

.hw-cause-hoch {
    border-left-color: #EF4444;
    background: rgba(239, 68, 68, 0.02);
    border-color: rgba(239, 68, 68, 0.22);
}

.hw-cause-mittel {
    border-left-color: #F59E0B;
    background: rgba(245, 158, 11, 0.02);
    border-color: rgba(245, 158, 11, 0.22);
}

.hw-cause-niedrig {
    border-left-color: #94A3B8;
    background: var(--bg-surface);
    border-color: var(--border-subtle);
}

.hw-cause-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 5px;
}

.hw-cause-head strong {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.4;
}

.hw-cause p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.hw-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex-shrink: 0;
}

.hw-badge-hoch {
    background: #FEF2F2;
    color: #DC2626;
    border: 1px solid rgba(220, 38, 38, 0.2);
}

.hw-badge-mittel {
    background: #FFFBEB;
    color: #D97706;
    border: 1px solid rgba(217, 119, 6, 0.2);
}

.hw-badge-niedrig {
    background: #F1F5F9;
    color: #64748B;
    border: 1px solid var(--border-subtle);
}
.hw-badge-niedrig { background: var(--bg-surface-hover); color: var(--text-tertiary); }

/* ===== 8. AUFMASS-RECHNER ===== */
.hw-calc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr);
    gap: 18px;
    align-items: start;
}

.hw-calc-result {
    position: sticky;
    top: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 16px;
    max-height: 72vh;
    overflow-y: auto;
}

.hw-calc-result h4 {
    font-family: var(--font-heading);
    font-size: 0.86rem;
    margin: 14px 0 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-primary);
}

.hw-calc-result h4:first-child { margin-top: 0; }
.hw-calc-result h4 i { color: var(--primary); font-size: 0.8rem; }

.hw-section {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 14px;
    margin-bottom: 14px;
    background: var(--bg-card);
}

.hw-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.hw-section-head h4 {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
}

.hw-section-head h4 i { color: var(--primary); }
.hw-section-head > div { display: flex; gap: 6px; }

.hw-aufmass-row {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    padding: 10px;
    margin-bottom: 8px;
    background: var(--bg-surface);
}

.hw-aufmass-abzug {
    background: var(--danger-bg);
    border-color: #fecaca;
}

.hw-aufmass-top {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.hw-flex { flex: 1; min-width: 0; }

.hw-aufmass-dims, .hw-param-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hw-param-grid { margin-top: 4px; }

.hw-dim {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 92px;
    flex: 0 1 auto;
}

.hw-dim > span {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    font-weight: 600;
}

.hw-dim input { width: 100%; }
.hw-dim-check { justify-content: flex-end; }
.hw-dim-check input { width: 18px; height: 18px; accent-color: var(--danger); margin-top: 4px; }

.hw-work-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    padding: 8px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    margin-bottom: 7px;
    background: var(--bg-surface);
    flex-wrap: wrap;
}

.hw-work-unit {
    font-size: 0.76rem;
    color: var(--text-tertiary);
    padding-bottom: 8px;
    min-width: 34px;
}

.hw-bezug {
    font-size: 0.83rem;
    color: var(--text-secondary);
    padding: 8px 10px;
    background: var(--primary-light);
    border-radius: var(--radius-sm);
    margin: 8px 0;
}

.hw-details { margin: 10px 0; }

.hw-details summary {
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
    padding: 4px 0;
}

.hw-steps { margin-top: 8px; }

.hw-step {
    display: flex;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--border-subtle);
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.hw-step-nr {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem;
    font-weight: 700;
    flex-shrink: 0;
}

.hw-step-abzug .hw-step-nr { background: var(--danger-bg); color: var(--danger); }

/* ===== 9. ANGEBOTS-EDITOR ===== */
.hw-offer-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.hw-offer-head h3 { font-family: var(--font-heading); font-size: 1.05rem; margin: 0 0 3px; }
.hw-offer-head p { margin: 0; font-size: 0.8rem; }

.hw-offer-table td { vertical-align: top; }
.hw-offer-table input, .hw-offer-table textarea { margin-bottom: 4px; }
.hw-pos-desc { font-size: 0.8rem; resize: vertical; }
.hw-pos-nr { font-weight: 700; color: var(--text-tertiary); white-space: nowrap; }

.hw-pos-cat {
    display: inline-block;
    font-size: 0.68rem;
    padding: 1px 7px;
    border-radius: var(--radius-full);
    background: var(--bg-surface-hover);
    color: var(--text-tertiary);
    font-weight: 600;
}

.hw-row-total { font-weight: 600; }

/* ===== 10. TABS ===== */
.hw-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 10px;
}

.hw-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-subtle);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hw-tab:hover { border-color: var(--primary); color: var(--primary); }

.hw-tab.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.hw-tab.active i { color: #fff; }
.hw-tab i { color: var(--primary); }

/* ===== 11. RECHERCHE-QUELLEN ===== */
.hw-source-list { display: flex; flex-direction: column; gap: 7px; margin: 8px 0 14px; }

.hw-source {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 11px 13px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    text-decoration: none;
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.hw-source:hover { border-color: var(--primary); background: var(--primary-soft); }

.hw-source-nr {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

.hw-source-body { flex: 1; min-width: 0; }
.hw-source-body strong { display: block; font-size: 0.86rem; margin-bottom: 2px; }
.hw-source-body small { display: block; font-size: 0.77rem; color: var(--text-tertiary); line-height: 1.45; }
.hw-source-domain { color: var(--primary) !important; font-weight: 600; margin-bottom: 2px; }
.hw-source > i { color: var(--text-muted); font-size: 0.75rem; margin-top: 4px; }

.hw-quicklinks { display: flex; flex-wrap: wrap; gap: 7px; margin: 8px 0 12px; }

.hw-quicklink {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid var(--border-subtle);
    background: var(--bg-surface);
    color: var(--text-secondary);
    font-size: 0.78rem;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.hw-quicklink:hover { border-color: var(--primary); color: var(--primary); }

.hw-fn {
    font-size: 0.7rem;
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
    vertical-align: super;
    margin-left: 2px;
}

/* ===== 12. SPRACHFUNKTION ===== */
.hw-voice-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 18px 0 22px;
}

.hw-mic-big {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    box-shadow: var(--shadow-primary);
    transition: transform var(--transition-fast), background var(--transition-fast);
}

.hw-mic-big:hover { transform: scale(1.04); }

.hw-mic-recording {
    background: var(--danger);
    animation: hwPulseRing 1.6s infinite;
}

@keyframes hwPulseRing {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70% { box-shadow: 0 0 0 20px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.hw-voice-status { font-size: 0.88rem; color: var(--text-secondary); text-align: center; }

.hw-voice-timer {
    font-family: 'Consolas', monospace;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-tertiary);
}

.hw-transcript {
    min-height: 150px;
    max-height: 300px;
    overflow-y: auto;
    padding: 14px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-input);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--text-primary);
}

.hw-transcript:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.hw-transcript:empty::before { content: attr(data-placeholder); color: var(--text-muted); }
.hw-interim { color: var(--text-muted); font-style: italic; }

.hw-voice-hints {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--text-tertiary);
    background: var(--bg-surface);
    padding: 10px 13px;
    border-radius: var(--radius-sm);
}

.hw-voice-hints i { color: var(--accent); margin-right: 5px; }

.action-speak.hw-speaking { color: var(--danger) !important; }

/* ===== 13. TOASTS & LADEZUSTAND ===== */
.hw-toast-host {
    position: fixed;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    pointer-events: none;
}

.hw-toast {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 17px;
    border-radius: var(--radius-full);
    background: var(--text-primary);
    color: #fff;
    font-size: 0.85rem;
    box-shadow: var(--shadow-float);
    animation: hwToastIn 0.25s ease;
    max-width: 90vw;
}

.hw-toast-success { background: #047857; }
.hw-toast-error { background: #b91c1c; }
.hw-toast-warn { background: #c2410c; }
.hw-toast-out { opacity: 0; transform: translateY(8px); transition: all 0.3s ease; }

@keyframes hwToastIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.hw-spinner {
    display: inline-block;
    width: 13px;
    height: 13px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: hwSpin 0.7s linear infinite;
    vertical-align: -1px;
}

@keyframes hwSpin { to { transform: rotate(360deg); } }

.hw-busy-indicator {
    position: fixed;
    bottom: 22px;
    right: 22px;
    z-index: 350;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 16px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float);
    font-size: 0.83rem;
    color: var(--text-secondary);
}

.hw-busy-indicator .hw-spinner { color: var(--primary); }

/* ===== 14. RESPONSIV ===== */
@media (max-width: 1024px) {
    .hw-calc-layout { grid-template-columns: 1fr; }
    .hw-calc-result { position: static; max-height: none; }
    .hw-form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
    .hw-modal { padding: 0; align-items: flex-end; }
    .hw-modal .hw-modal-content { max-height: 96vh; border-radius: 18px 18px 0 0; }
    .hw-modal-body { padding: 16px; }
    .hw-modal-footer { padding: 12px 16px; }
    .hw-modal-footer .hw-btn { flex: 1; justify-content: center; }
    .hw-form-grid, .hw-form-grid-2, .hw-form-grid-3, .hw-form-grid-4 { grid-template-columns: 1fr; }
    .hw-tool-grid { grid-template-columns: 1fr; }
    .hw-input { font-size: 16px; } /* verhindert Auto-Zoom auf iOS */
    .hw-dim { min-width: 78px; flex: 1 1 78px; }
    .hw-sum-block { max-width: none; }
    .hw-card { padding: 14px; }
    .hw-tool-row { gap: 6px; }
    .hw-tool-chip { font-size: 0.79rem; padding: 8px 12px; }
}

/* ===== 15. CHAT-VORLAGEN ===== */
/* Alle Werkzeuge laufen im Eingabefeld: Vorlage einfügen, ausfüllen, absenden. */

.hw-tool-hint {
    max-width: 780px;
    margin: -8px auto 20px;
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.hw-tool-hint strong {
    font-family: var(--font-mono, monospace);
    color: var(--primary);
}

/* Bezugspunkt für Vorlagen-Menü, Anhänge und Vorschläge */
.input-card { position: relative; }

/* --- Schrägstrich-Menü --- */
.hw-slash {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 10px);
    z-index: 300;
    max-height: 340px;
    overflow-y: auto;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    padding: 6px;
}

.hw-slash-head {
    padding: 8px 10px 6px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.hw-slash-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 9px 10px;
    border: none;
    background: transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    transition: background var(--transition-fast);
}

.hw-slash-item:hover,
.hw-slash-item.active {
    background: var(--primary-soft);
}

.hw-slash-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: var(--radius-sm);
    background: var(--bg-subtle, #F1F5F9);
    color: var(--primary);
    font-size: 0.85rem;
}

.hw-slash-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}

.hw-slash-text strong {
    font-family: var(--font-mono, monospace);
    font-size: 0.87rem;
    color: var(--text-primary);
}

.hw-slash-text small {
    font-size: 0.76rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-slash-label {
    font-size: 0.74rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Ausgefüllt wird eine Vorlage, nicht eine Frage: kompaktere Schrift. */
.input-card textarea.hw-vorlage-feld {
    font-size: 1rem;
    line-height: 1.55;
}

/* --- Fotos am Eingabefeld --- */
.hw-anhang {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hw-anhang .hw-thumb { width: 88px; }
.hw-anhang .hw-thumb img { height: 64px; }

/* Datei wird gerade auf das Eingabefeld gezogen (js/script.js). */
.input-card.hw-ablage-ziel {
    border-color: #0284c7;
    border-style: dashed;
    box-shadow: var(--shadow-lg), 0 0 0 4px rgba(2, 132, 199, 0.22);
}

.input-card.hw-ablage-ziel::after {
    content: 'Hier loslassen zum Anhängen';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    background: rgba(240, 249, 255, 0.92);
    color: #0369a1;
    font-weight: 600;
    pointer-events: none;
    z-index: 5;
}

body.dark-mode .input-card.hw-ablage-ziel::after {
    background: rgba(12, 74, 110, 0.9);
    color: #e0f2fe;
}

/* --- Abgeschickte Vorlage im Chat --- */
.hw-vorlage-echo {
    white-space: pre-wrap;
    font-size: 0.92rem;
    line-height: 1.5;
}

.hw-card-lade {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
}

.hw-card-lade .hw-spinner { color: var(--primary); }

/* --- Diktat --- */
.hw-diktat-pille {
    position: fixed;
    left: 50%;
    bottom: 104px;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-float);
    font-size: 0.85rem;
    max-width: min(92vw, 620px);
}

.hw-diktat-punkt {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: var(--text-muted);
}

.hw-diktat-punkt.aktiv {
    background: var(--danger);
    animation: hwPuls 1.3s ease-in-out infinite;
}

@keyframes hwPuls {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

.hw-diktat-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-secondary);
}

.hw-diktat-text em {
    font-style: normal;
    color: var(--text-muted);
}

.hw-diktat-sprache {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    padding: 3px 6px;
    color: var(--text-secondary);
    /* Lange Namen ("Nederlands (Niederländisch)") sollen den Text nicht verdrängen. */
    max-width: 11rem;
    text-overflow: ellipsis;
}

/* Auf dem Handy hat das Mitgesprochene Vorrang; "Shqip (Alban…" reicht. */
@media (max-width: 480px) {
    .hw-diktat-sprache { max-width: 6.5rem; }
}

/* --- Vorschlag nach dem Diktat --- */
.hw-vorschlag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--primary-soft);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.hw-vorschlag span i { color: var(--primary); margin-right: 6px; }

/* --- Angebotskarte im Chat --- */
.hw-offer-card .hw-offer-table { font-size: 0.84rem; }
.hw-offer-card .hw-field { margin-top: 12px; }
/* Leistungsbeschreibungen sind meist drei Zeilen lang – so bleiben sie lesbar. */
.hw-offer-card .hw-pos-desc { min-height: 64px; }

@media (max-width: 768px) {
    .hw-slash { max-height: 260px; }
    .hw-slash-label { display: none; }
    .hw-diktat-pille { bottom: 88px; }
}

/* ===================================================
   KUNDEN, AUFTRÄGE, AUFNAHME, GEWERK
   =================================================== */

/* --- Gewerk wählen --- */
.hw-gewerk-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.hw-gewerk-karte {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 14px 16px;
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    cursor: pointer;
    text-align: left;
    transition: all var(--transition-fast);
}

.hw-gewerk-karte:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    transform: translateY(-1px);
}

.hw-gewerk-karte.aktiv {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.hw-gewerk-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}

.hw-gewerk-text { flex: 1; min-width: 0; }
.hw-gewerk-text strong { display: block; font-size: 0.95rem; color: var(--text-primary); margin-bottom: 2px; }
.hw-gewerk-text small { display: block; font-size: 0.78rem; color: var(--text-tertiary); }
.hw-gewerk-haken { color: var(--primary); font-size: 0.95rem; }

/* --- Listenzeilen für Kunden und Aufträge --- */
.hw-zeilen {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.hw-zeile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    background: var(--bg-card);
    border: none;
    border-bottom: 1px solid var(--border-subtle);
    cursor: pointer;
    text-align: left;
    transition: background var(--transition-fast);
}

.hw-zeile:last-child { border-bottom: none; }
.hw-zeile:hover { background: var(--bg-surface); }

.hw-zeile-text { flex: 1; min-width: 0; }

.hw-zeile-text strong {
    display: block;
    font-size: 0.9rem;
    color: var(--text-primary);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hw-zeile-text small { display: block; font-size: 0.78rem; color: var(--text-tertiary); }
.hw-zeile-pfeil { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; }

.hw-zeile-avatar {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.88rem;
    flex-shrink: 0;
}

/* Die Statusfarbe des Auftrags – auf der Baustelle das Erste, was zählt. */
.hw-status-punkt {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.hw-filter-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.hw-filter-chip {
    padding: 5px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.hw-filter-chip:hover { border-color: var(--primary); color: var(--primary); }
.hw-filter-chip.aktiv { background: var(--primary); border-color: var(--primary); color: var(--text-on-primary); }

/* --- Auftrag aufnehmen --- */
.hw-aufnahme {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
}

.hw-mic-gross {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-full);
    border: none;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover));
    color: var(--text-on-primary);
    font-size: 2.2rem;
    cursor: pointer;
    box-shadow: 0 10px 24px -8px var(--primary-glow);
    transition: transform var(--transition-fast);
}

.hw-mic-gross:hover { transform: scale(1.04); }

.hw-mic-gross.aktiv {
    background: linear-gradient(135deg, #EF4444, #B91C1C);
    animation: hw-mic-puls 1.6s ease-in-out infinite;
}

@keyframes hw-mic-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45); }
    50% { box-shadow: 0 0 0 16px rgba(239, 68, 68, 0); }
}

.hw-aufnahme-status {
    font-size: 0.88rem;
    color: var(--text-secondary);
    text-align: center;
    min-height: 20px;
}

.hw-aufnahme-status em { color: var(--text-tertiary); font-style: italic; }
.hw-aufnahme-text { width: 100%; resize: vertical; line-height: 1.5; }
.hw-aufnahme-karte .hw-table input { width: 100%; }

/* --- Fotos am Auftrag --- */
.hw-foto-gitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 12px;
}

.hw-foto {
    position: relative;
    margin: 0;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-card);
}

.hw-foto img {
    width: 100%;
    height: 128px;
    object-fit: cover;
    display: block;
    cursor: zoom-in;
    background: var(--bg-surface);
}

.hw-foto figcaption {
    padding: 8px 10px;
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.hw-foto figcaption strong { display: block; font-weight: 600; color: var(--text-primary); }
.hw-foto figcaption small { display: block; color: var(--text-tertiary); font-size: 0.72rem; margin-top: 3px; }

.hw-foto-hinweis {
    display: block;
    margin-top: 4px;
    color: #B45309;
    font-size: 0.74rem;
}

.hw-foto-hinweis i { margin-right: 4px; }

@media (max-width: 768px) {
    .hw-mic-gross { width: 112px; height: 112px; font-size: 2.6rem; }
    .hw-foto-gitter { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
}

/* ===== 20. ERFASSUNG UND BAUSTELLENBERICHT ===== */
.hw-erfassung-karte .hw-table input,
.hw-bericht-karte .hw-table input { width: 100%; }

.hw-erfassung-karte .hw-note a,
.hw-bericht-karte .hw-note a { color: var(--primary); font-weight: 600; }

/* Im Bericht sind die Bilder größer und die Unterschrift ist ein Feld. */
.hw-bericht-karte .hw-foto img { height: 150px; cursor: default; }
.hw-bericht-karte .hw-foto figcaption input { width: 100%; }

/* ===== 21. AUFTRAGSAKTE ===== */
#hw-auftrag-modal .hw-modal-body { background: var(--bg-surface); }
#hw-auftrag-modal .hw-akte-links { margin-right: auto; }

.hw-akte-ton-blau   { --akte-ton: #0284C7; }
.hw-akte-ton-orange { --akte-ton: #EA580C; }
.hw-akte-ton-gruen  { --akte-ton: #059669; }
.hw-akte-ton-lila   { --akte-ton: #7C3AED; }
.hw-akte-ton-gelb   { --akte-ton: #CA8A04; }

.hw-akte-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.hw-akte-status,
.hw-akte-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: var(--radius-full);
    font-size: 0.78rem;
    line-height: 1.3;
}

.hw-akte-status {
    font-weight: 700;
    color: var(--akte-farbe);
    background: color-mix(in srgb, var(--akte-farbe) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--akte-farbe) 28%, transparent);
}

.hw-akte-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--akte-farbe);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--akte-farbe) 22%, transparent);
}

.hw-akte-chip {
    color: var(--text-secondary);
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    font-weight: 500;
    text-decoration: none;
}

.hw-akte-chip i { color: var(--text-muted); font-size: 0.72rem; }
.hw-akte-chip-link { color: var(--primary); }
.hw-akte-chip-link i { color: var(--primary); }
.hw-akte-chip-link:hover { border-color: var(--primary); background: var(--primary-soft); }

/* Kennzahlen springen zum jeweiligen Abschnitt */
.hw-akte-zahlen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hw-akte-zahl {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    font-family: var(--font-body);
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.hw-akte-zahl:hover {
    border-color: var(--border-strong);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.hw-akte-zahl strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.hw-akte-zahl small {
    display: block;
    font-size: 0.74rem;
    color: var(--text-tertiary);
}

.hw-akte-zahl-icon,
.hw-akte-aktion > span,
.hw-akte-karte-icon,
.hw-akte-einstieg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--akte-ton, var(--primary));
    background: color-mix(in srgb, var(--akte-ton, var(--primary)) 12%, transparent);
}

.hw-akte-zahl-icon {
    width: 38px;
    height: 38px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}

/* Abschnittskarten */
.hw-akte-karte {
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 16px 18px;
    margin-bottom: 14px;
    scroll-margin-top: 8px;
}

.hw-akte-karte .hw-form-grid { margin-bottom: 4px; }
.hw-akte-karte .hw-field:last-child { margin-bottom: 0; }
.hw-akte-karte .hw-table-wrap { margin: 0; }

.hw-akte-karte-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.hw-akte-karte-kopf h4 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
}

.hw-akte-karte-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
}

.hw-akte-karte-aktionen { display: flex; flex-wrap: wrap; gap: 6px; }

.hw-akte-blitz { animation: hw-akte-blitz 1.2s ease-out; }

@keyframes hw-akte-blitz {
    0% { box-shadow: 0 0 0 3px var(--primary); }
    100% { box-shadow: var(--shadow-sm); }
}

.hw-akte-leer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 14px;
    border: 1.5px dashed var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    text-align: center;
}

.hw-akte-leer i { font-size: 1.25rem; color: var(--text-muted); }

.hw-akte-leer p {
    margin: 0;
    max-width: 440px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-tertiary);
}

.hw-akte-leer strong { color: var(--text-secondary); }

/* Aktionskacheln */
.hw-akte-titel {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary);
    margin: 4px 2px 8px;
}

.hw-akte-aktionen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hw-akte-aktion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 8px 12px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast);
}

.hw-akte-aktion > span {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    transition: transform var(--transition-fast);
}

.hw-akte-aktion:hover {
    border-color: var(--primary);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.hw-akte-aktion:hover > span { transform: scale(1.06); }

.hw-akte-aktion:focus-visible,
.hw-akte-zahl:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Einstiege für Kunde und Baustelle */
.hw-akte-einstiege {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.hw-akte-einstieg {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: 6px 12px;
    padding: 14px 16px;
    border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border-subtle));
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--primary-soft), transparent 70%), var(--bg-card);
}

.hw-akte-einstieg-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
    grid-row: span 2;
}

.hw-akte-einstieg strong {
    display: block;
    font-size: 0.88rem;
    color: var(--text-primary);
}

.hw-akte-einstieg p {
    margin: 2px 0 0;
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--text-tertiary);
}

.hw-akte-einstieg .hw-btn {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
}

@media (max-width: 768px) {
    .hw-akte-zahlen { gap: 8px; }
    .hw-akte-zahl { flex-direction: column; align-items: flex-start; gap: 8px; padding: 10px 12px; }
    .hw-akte-zahl-icon { width: 32px; height: 32px; font-size: 0.85rem; }
    .hw-akte-aktionen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hw-akte-karte { padding: 14px; }
    .hw-akte-einstiege { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .hw-akte-aktionen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #hw-auftrag-modal .hw-form-grid-2 { grid-template-columns: 1fr; }
}

/* Preisliste: nur der gewählte Abschnitt ist sichtbar, alle bleiben im Dokument. */
.hw-modal [hidden] { display: none !important; }

/* Werkzeug-Karten und Steuerung nie mitdrucken */
@media print {
    .hw-modal, .hw-toast-host, .hw-busy-indicator, .hw-card-actions,
    .hw-slash, .hw-diktat-pille, .hw-vorschlag, .hw-anhang { display: none !important; }
}