-Marker zeigt Browser-eigenes Dreieck — wir lassen
das so, weil's vertraut ist und auf den ersten Blick erkennbar
ankündigt, dass hier was zum Aufklappen ist. */
details.stammdaten-help > summary {
list-style: revert; /* nutzt Browser-Default-Marker */
user-select: none;
}
details.stammdaten-help[open] > summary {
margin-bottom: .25rem;
}
details.stammdaten-help > summary:hover {
text-decoration: underline;
}
table.data-table .inline-edit.save-error {
background: var(--c-red-bg);
border-color: var(--c-err);
}
/* ── Dropzone (PDF-Upload mit Drag & Drop) ─────────────────────────── */
.dropzone {
position: relative;
border: 2px dashed var(--c-border-2);
border-radius: var(--radius);
background: #fafbfc;
padding: 0;
cursor: pointer;
transition: border-color .15s, background .15s;
}
.dropzone:hover { border-color: var(--c-primary); background: #f3f7fb; }
.dropzone.is-dragover {
border-color: var(--c-primary);
background: var(--c-blue-bg);
border-style: solid;
}
/* Während ein Upload läuft (JS setzt .is-busy + aria-busy):
Dropzone ist gedimmt, klick/drag wird sichtbar verweigert. Verhindert
parallele PDF-Uploads, die jeweils einen separaten Anthropic-Call
produzieren würden. Hover-Effekt explizit zurücknehmen, damit die
Sperre auch beim Mouse-Over deutlich bleibt. */
.dropzone.is-busy {
opacity: .55;
cursor: not-allowed !important;
pointer-events: none; /* Drag&Drop-Events blockieren */
border-style: solid;
border-color: var(--c-border-2);
background: #f3f3f3;
}
.dropzone.is-busy:hover {
border-color: var(--c-border-2);
background: #f3f3f3;
}
.dropzone input[type="file"] {
position: absolute; inset: 0;
opacity: 0; cursor: pointer;
width: 100%; height: 100%;
}
.dropzone-inner {
padding: 2rem 1.5rem;
text-align: center;
pointer-events: none; /* damit nur der äußere Klick zählt */
}
.dropzone-inner button { pointer-events: auto; }
.dropzone-icon { font-size: 2.4rem; margin-bottom: .5rem; opacity: .6; }
.dropzone-text { margin: 0 0 .35rem; font-size: 1rem; }
.dropzone-text strong { color: var(--c-primary); }
.dropzone-inner .btn-link { font-size: 1rem; padding: 0; }
/* Indeterminate-Animation für unbekannten Fortschritt (KI-Analyse) */
.progress-bar.indeterminate {
background: linear-gradient(
90deg,
var(--c-primary) 0%,
var(--c-primary-2) 30%,
var(--c-primary) 60%,
var(--c-primary-2) 100%
);
background-size: 200% 100%;
animation: indeterminateMove 1.4s linear infinite;
}
@keyframes indeterminateMove {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* ── Fortschrittsbalken (Batch-Verarbeitung) ───────────────────────── */
.progress-panel {
border-left: 4px solid var(--c-primary);
}
.progress-bar-wrap {
width: 100%;
background: #eef0f3;
border-radius: 999px;
overflow: hidden;
height: 14px;
}
.progress-bar {
height: 100%;
background: linear-gradient(90deg, var(--c-primary), var(--c-primary-2));
transition: width .3s ease;
border-radius: 999px;
}
/* ── Status-Zeile unter dem Projekt-Titel ──────────────────────────── */
.status-row {
display: flex;
align-items: center;
gap: .35rem;
margin-top: .35rem;
flex-wrap: wrap;
}
.status-row .btn-link {
font-size: .82rem;
color: var(--c-muted);
padding: .15rem .4rem;
}
.status-row .btn-link:hover {
color: var(--c-primary);
background: #f0f2f5;
border-radius: 3px;
text-decoration: none;
}
/* ── Inline-Edit Projekt-Titel (Stift) ─────────────────────────────── */
.project-title-wrap {
display: flex;
align-items: center;
gap: .35rem;
margin: 0;
flex-wrap: wrap;
}
.project-title-display {
cursor: text;
}
.project-title-display:hover {
background: linear-gradient(transparent 75%, rgba(31, 78, 121, .12) 75%);
border-radius: 3px;
padding: 0 .15rem;
margin: 0 -.15rem;
}
.project-title-input {
font-size: 1.45rem;
font-weight: 700;
line-height: 1.15;
padding: .15rem .45rem;
border: 2px solid var(--c-primary);
border-radius: var(--radius);
width: auto;
min-width: 280px;
max-width: 100%;
background: #fff;
color: var(--c-text);
font-family: inherit;
}
.title-edit-btn {
background: transparent;
color: var(--c-muted);
padding: .15rem .4rem;
font-size: .9rem;
border: 0;
border-radius: 4px;
line-height: 1;
cursor: pointer;
opacity: 0;
transition: opacity .15s ease;
}
.project-title-wrap:hover .title-edit-btn,
.title-edit-btn:focus { opacity: 1; }
.title-edit-btn:hover {
background: #f0f2f5;
color: var(--c-primary);
}
.project-title-wrap.saving .project-title-input { opacity: .55; }
.project-title-wrap.saved .project-title-display {
animation: titleSaved 1.2s ease-out;
}
@keyframes titleSaved {
0% { background-color: #b9e6c5; }
100% { background-color: transparent; }
}
/* ── PDF-Import Review-Tabelle ─────────────────────────────────────── */
table.review-table {
font-size: .9rem;
}
table.review-table th {
font-size: .72rem;
padding: .5rem .35rem;
}
table.review-table td {
padding: .35rem;
vertical-align: top;
}
table.review-table input {
width: 100%;
padding: .35rem .5rem;
font-size: .88rem;
box-sizing: border-box;
}
table.review-table input.num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Bestehender Eintrag → leicht ausgegraut, Default-Häkchen aus */
table.review-table tr.row-exists td {
background: #fafbfc;
}
table.review-table tr.row-exists input[type="text"],
table.review-table tr.row-exists input[type="number"],
table.review-table tr.row-exists input:not([type]) {
color: var(--c-muted);
}
/* ── Audit-Log Filter-Form ─────────────────────────────────────────── */
form.audit-filter {
display: grid;
grid-template-columns: 1.4fr 1.4fr 0.9fr 0.9fr auto;
gap: .75rem 1rem;
align-items: end;
}
form.audit-filter .field { margin-bottom: 0; }
form.audit-filter button + .btn { margin-left: .5rem; }
@media (max-width: 800px) {
form.audit-filter { grid-template-columns: 1fr 1fr; }
}
/* Audit-Log: lange Filenames / Tokens in der Details-Spalte umbrechen.
Ohne diese Regeln sprengt ein einzelner Underscore-String (z.B.
"Angebot_2026-05-001_BSR_018_Metallbauarbeiten_LV_15082023.pdf") die
ganze Tabelle, weil der Browser bei `_` per Default nicht trennt und
die Auto-Layout-Engine die Spalte content-getrieben aufbläst. */
.data-table td.audit-details {
overflow-wrap: anywhere;
word-break: break-word;
}
/* ── Wizard: Schritt-Indikator + Footer ────────────────────────────── */
.wizard-steps {
background: #fff;
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: .65rem 1rem;
margin-bottom: 1.25rem;
box-shadow: var(--shadow);
}
.wizard-steps ol {
list-style: none;
margin: 0; padding: 0;
display: flex; flex-wrap: wrap;
gap: .25rem;
align-items: center;
}
.wizard-steps .step {
padding: .3rem .85rem;
border-radius: 999px;
font-size: .88rem;
color: var(--c-muted);
background: #f0f2f5;
}
.wizard-steps .step a, .wizard-steps .step span { color: inherit; text-decoration: none; }
.wizard-steps .step + .step::before {
content: "→";
color: var(--c-muted);
margin-right: .25rem;
margin-left: -.5rem;
padding-right: .35rem;
}
.wizard-steps .step-active { background: var(--c-primary); color: #fff; font-weight: 600; }
.wizard-steps .step-done { background: var(--c-green-bg); color: var(--c-ok); }
.wizard-steps .step-done a:hover { text-decoration: underline; }
.wizard-steps .step-pending { opacity: .55; }
.wizard-footer {
margin-top: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap; gap: .75rem;
}
/* ── Verweis-Hinweis (z.B. "wie Pos. 01.0010") ─────────────────────── */
.ref-hint {
background: #fff7d6;
border: 1px solid #f0c674;
border-left: 4px solid var(--c-warn);
border-radius: var(--radius);
padding: .5rem .75rem;
margin: .5rem 0 .75rem;
font-size: .9rem;
color: var(--c-text);
}
.ref-hint a {
display: inline-block;
margin: 0 .15rem;
padding: 0 .3rem;
background: #fff;
border-radius: 3px;
text-decoration: none;
font-weight: 600;
}
.ref-hint a:hover { text-decoration: underline; }
/* ── Langtext-Block (Position aufgeklappt, Baubeschreibung) ───────── */
.longtext-block { margin: .5rem 0 1rem; }
.longtext-block summary {
cursor: pointer;
color: var(--c-primary);
font-size: .85rem;
padding: .25rem 0;
user-select: none;
}
.longtext-block summary:hover { text-decoration: underline; }
pre.longtext {
white-space: pre-wrap;
word-break: break-word;
background: #fafbfc;
border: 1px solid var(--c-border);
border-left: 3px solid var(--c-primary);
border-radius: 0 var(--radius) var(--radius) 0;
padding: .75rem 1rem;
margin: .5rem 0 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: .88rem;
line-height: 1.45;
color: var(--c-text);
max-height: 480px;
overflow-y: auto;
}
/* Editierbarer Langtext (ersetzt das alte Read-Only-) */
.longtext-editor { margin: .5rem 0 0; }
textarea.longtext-edit {
width: 100%;
box-sizing: border-box;
background: #fafbfc;
border: 1px solid var(--c-border);
border-left: 3px solid var(--c-primary);
border-radius: 0 var(--radius) var(--radius) 0;
padding: .75rem 1rem;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: .88rem;
line-height: 1.45;
color: var(--c-text);
resize: vertical;
min-height: 6rem;
overflow: hidden; /* Auto-Resize via JS — kein interner Scrollbalken */
}
textarea.longtext-edit:focus {
outline: none;
border-color: var(--c-primary);
background: #fff;
}
.longtext-edit-toolbar {
display: flex;
align-items: center;
gap: .75rem;
margin-top: .5rem;
}
.longtext-edit-toolbar .btn-sm {
padding: .35rem .9rem;
font-size: .82rem;
}
.longtext-edit-status { font-size: .8rem; }
/* ── LV-Position: Status-Indikator ──────────────────────────────────
Konzept: alle "fertig kalkulierten" Positionen (egal ob Stammdaten,
KI oder manuell) bekommen eine einheitliche grüne Tönung + grünen Balken.
Rote Positionen ("muss noch") bleiben neutral und stechen so hervor.
*/
tr.pos-row > td:first-child {
border-left: 4px solid transparent;
}
/*
Zwei Stufen:
1. Nur „gematched" (Status grün/gelb gesetzt, KI war noch nicht dran):
Zeile bleibt komplett WEISS — Status-Badge (gelb/rot) zeigt den
Vorab-Match-Status an, das reicht. Sonst wirken Zeilen vor der
KI-Schätzung fälschlich „fertig grün".
2. Tatsächlich kalkuliert (.is-calculated, gesetzt sobald KI gelaufen
ist bzw. die Position vollständig aus Stammdaten kommt): kräftige
Stripe + dezente Hintergrund-Tönung — signalisiert „Position fertig".
So sieht der User auf einen Blick, was noch durch die KI muss.
Nur error/manual zeigen schon vor Kalkulation eine farbige Markierung,
weil sie vom User aktiv bearbeitet werden müssen.
*/
tr.pos-row.status-red > td:first-child { border-left-color: #e88; }
/* status-manual: User-Zuweisung – orange Markierung */
tr.pos-row.status-manual > td:first-child { border-left-color: #f0a040; }
/* status-error: KI-Fehler – kräftiges Rot, stärker als reiner red */
tr.pos-row.status-error > td:first-child { border-left-color: #d84040; }
/* Wenn tatsächlich kalkuliert: kräftige Stripe + Tönung */
tr.pos-row.status-yellow.is-calculated > td:first-child,
tr.pos-row.status-green.is-calculated > td:first-child,
tr.pos-row.status-ki_only.is-calculated > td:first-child {
border-left-color: #4a9362;
}
tr.pos-row.status-yellow.is-calculated > td,
tr.pos-row.status-green.is-calculated > td,
tr.pos-row.status-ki_only.is-calculated > td { background-color: rgba(74, 147, 98, .10); }
/* status-manual: dezente orange Tönung – „User hat zugewiesen, ggf. prüfen" */
tr.pos-row.status-manual > td { background-color: rgba(240, 160, 64, .10); }
/* status-error: deutlichere rote Tönung – „KI ist gescheitert, hier muss was passieren" */
tr.pos-row.status-error > td { background-color: rgba(216, 64, 64, .12); }
/* status-red: keine Tönung – sticht als "noch zu tun" heraus */
/* ── Info-only Zeilen (Section-Header / Hinweistexte aus X83) ──────────
Strukturelle LV-Elemente, die NICHT kalkuliert werden, aber in der
Tabelle inline mit den Positionen stehen, damit das LV in seiner
Original-Gliederung sichtbar bleibt. */
tr.info-only > td {
background-color: #f1f3f6;
border-top: 2px solid var(--c-border);
}
tr.info-only.info-section > td {
/* Untertitel als deutliche Zwischenüberschrift */
background-color: #e8eef5;
color: var(--c-text);
font-weight: 600;
font-size: .98rem;
padding-top: .85rem;
padding-bottom: .55rem;
}
tr.info-only.info-hint > td {
/* Hinweistexte: dezenter, mit linker Akzent-Leiste. Inhalt ist als
-Block aufklappbar — Italic-Style nur in der Summary, im
aufgeklappten Volltext wieder normal. */
border-left: 3px solid #b8c2d1;
color: var(--c-muted);
padding: .55rem 1rem;
}
tr.info-only .info-text {
white-space: pre-wrap;
line-height: 1.45;
}
.info-hint-details > summary {
cursor: pointer;
list-style: none;
user-select: none;
padding: .15rem 0;
}
.info-hint-details > summary::-webkit-details-marker { display: none; }
.info-hint-details > summary:hover {
color: var(--c-text);
}
.info-hint-details[open] > summary {
border-bottom: 1px dashed var(--c-border);
padding-bottom: .35rem;
margin-bottom: .25rem;
}
/* Aufklapp-Button: dreht sich, wenn die Zeile geöffnet ist.
Generisch auf jede Zeile mit .open — funktioniert dann auch auf der
Matching-Seite, wo der Wrapper tr nicht .pos-row sondern .match-row heißt. */
.toggle-btn {
display: inline-block;
transition: transform .2s ease-in-out;
font-size: 1rem;
line-height: 1;
}
tr.open .toggle-btn {
transform: rotate(180deg);
}
/* ── Live-Highlight für gerade fertig kalkulierte LV-Zeilen ────────── */
tr.pos-row.just-estimated > td {
/* startet hellgrün, fadet über 2.4s zurück */
animation: justEstimated 2.4s ease-out;
}
@keyframes justEstimated {
0% { background-color: #b9e6c5; } /* sattes Hellgrün am Anfang */
25% { background-color: #d6f1de; }
100% { background-color: transparent; }
}
/* ── Aufklappbare Detail-Zeilen (Projekt-Show) ─────────────────────── */
tr.cost-detail { display: none; background: #fafbfc; }
tr.cost-detail.open { display: table-row; }
tr.cost-detail > td { padding: .5rem 1rem 1rem; }
tr.costline-material td { background: rgba(26, 127, 55, .04); }
tr.costline-labor td { background: rgba(180, 83, 9, .04); }
tr.costline-equipment td{ background: rgba(31, 78, 121, .04); }
tr.costline-markup td { background: rgba(126, 34, 206, .05); }
/* ── Flash-Messages ─────────────────────────────────────────────────── */
.flash {
padding: .65rem 1rem;
border-radius: var(--radius);
margin-bottom: 1rem;
font-size: .92rem;
line-height: 1.5;
border: 1px solid transparent;
/* `pre-line` kollabiert mehrfache Whitespaces zu einem (wie normales
HTML) — wichtig, weil das Layout-Template aus Lesbarkeits-Gründen
eingerückt wird und sonst die Indentation als sichtbarer Leerraum
VOR dem Flash-Text gerendert würde. Newlines bleiben aber erhalten,
damit mehrzeilige Flashes (z.B. „Setup-Link\n\n...") weiterhin
korrekt umbrechen. */
white-space: pre-line;
/* `overflow-wrap: break-word` greift NUR bei wirklich unbreakable
Strings (z.B. lange URLs ohne Whitespace). Vorher stand hier
`word-break: break-word`, das aggressiver ist und auch Wörter mit
Bindestrichen wie „E-Mail" mitten im Wort umgebrochen hat — sah
in schmalen Boxen wie der Login-Card hässlich aus. */
overflow-wrap: break-word;
word-break: normal;
}
.flash-success { background: var(--c-green-bg); color: var(--c-ok); border-color: #b8dcc1; }
.flash-error { background: var(--c-red-bg); color: var(--c-err); border-color: #f4bcbc; }
.flash-warning { background: var(--c-yellow-bg); color: var(--c-warn); border-color: #f0c674; }
.flash-info { background: var(--c-blue-bg); color: var(--c-primary); border-color: #c7d8ec; }
/* ──────────────────────────────────────────────────────────────────────
Dashboard Split-Layout: links Aktions-/Projekt-Stack, rechts Cross-Sell
────────────────────────────────────────────────────────────────────── */
.dashboard-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.25rem;
margin-top: 1.5rem;
/* `align-items: start` statt `stretch`: jede Spalte behält ihre
natürliche Höhe. Vorher hat das stretch zusammen mit `flex: 1` auf
der rechten Card dafür gesorgt, dass die Cross-Sell-Box auf die
volle Höhe der linken Spalte gezogen wurde — bei vielen Projekten
entstand dadurch viel Leerraum unter dem Angebot. */
align-items: start;
}
.dashboard-split.is-single {
/* Wenn keine Cross-Sell-Angebote da sind, fällt der Stack auf 1 Spalte */
grid-template-columns: 1fr;
}
.dashboard-split-left {
display: flex;
flex-direction: column;
gap: 1.25rem;
min-width: 0;
}
.dashboard-split-right {
display: flex;
flex-direction: column;
min-width: 0;
}
@media (max-width: 980px) {
.dashboard-split {
grid-template-columns: 1fr;
}
}
/* ──────────────────────────────────────────────────────────────────────
„Letzte Projekte"-Tabelle auf dem Dashboard
Lange Projekt-Namen abschneiden statt das Layout zu sprengen, und
den Auftragswert nicht umbrechen (das „€" bleibt am Betrag).
────────────────────────────────────────────────────────────────────── */
.dashboard-split-left .data-table {
table-layout: fixed;
width: 100%;
}
.recent-projects-name {
/* Ellipsis-Truncation auf Zellen-Ebene: greift unabhängig von der
PHP-seitigen Hartkappe und passt sich der tatsächlichen Spalten-
breite an. */
max-width: 1px; /* table-layout: fixed nimmt sich die übrige Breite */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.recent-projects-name a {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
vertical-align: bottom;
}
.dashboard-split-left .data-table .num {
/* „24.542.483,02 €" darf nicht zwischen Betrag und € umbrechen. */
white-space: nowrap;
}
/* ──────────────────────────────────────────────────────────────────────
Cross-Selling-Gallery auf dem Dashboard
Ein Angebot sichtbar, Pfeile + Punkt-Indikator + Swipe-Geste.
────────────────────────────────────────────────────────────────────── */
.cross-sell-gallery {
position: relative;
margin-top: .25rem;
}
.cross-sell-viewport {
overflow: hidden;
border-radius: var(--radius);
}
.cross-sell-track {
list-style: none;
margin: 0;
padding: 0;
display: flex;
transition: transform .35s cubic-bezier(.4, .15, .2, 1);
will-change: transform;
}
.cross-sell-track.is-dragging {
transition: none;
}
.cross-sell-slide {
flex: 0 0 100%;
min-width: 100%;
/* Flex-Item soll nicht horizontal "schrumpfen" wegen langer Texte */
box-sizing: border-box;
}
.cross-sell-arrow {
position: absolute;
top: 90px; /* mittig auf dem Bild (Bild ist 180px hoch) */
width: 38px;
height: 38px;
border-radius: 50%;
border: 1px solid var(--c-border);
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(4px);
color: var(--c-text);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
transition: background .15s, transform .12s;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
padding: 0;
}
.cross-sell-arrow:hover {
background: #fff;
transform: scale(1.05);
}
.cross-sell-arrow:active {
transform: scale(.95);
}
.cross-sell-arrow:disabled {
opacity: 0;
pointer-events: none;
}
.cross-sell-prev { left: .6rem; }
.cross-sell-next { right: .6rem; }
.cross-sell-dots {
display: flex;
justify-content: center;
gap: .4rem;
margin-top: .85rem;
}
.cross-sell-dot {
width: 8px;
height: 8px;
padding: 0;
border-radius: 50%;
border: 0;
background: var(--c-border-2);
cursor: pointer;
transition: background .15s, transform .15s;
}
.cross-sell-dot:hover {
background: var(--c-muted);
}
.cross-sell-dot.is-active {
background: var(--c-primary);
transform: scale(1.3);
}
/* Admin-Formular für Cross-Sell-Angebote */
.stacked-form > label,
.stacked-form > fieldset {
display: block;
margin-bottom: 1rem;
}
.stacked-form label > span {
display: block;
margin-bottom: .25rem;
font-weight: 500;
font-size: .9rem;
}
.stacked-form label > span em {
color: var(--c-err);
font-style: normal;
}
.stacked-form .grid-2 > label {
display: block;
margin-bottom: 1rem;
}
.stacked-form fieldset {
border: 1px solid var(--c-border);
border-radius: var(--radius);
padding: .9rem 1rem;
background: #fafbfc;
}
.stacked-form fieldset legend {
padding: 0 .4rem;
font-weight: 500;
font-size: .92rem;
color: var(--c-muted);
}
.stacked-form .inline-checkbox {
display: flex;
align-items: center;
gap: .5rem;
margin: .5rem 0;
font-weight: normal;
font-size: .92rem;
}
.stacked-form .inline-checkbox input[type="checkbox"] {
width: auto;
margin: 0;
}
.stacked-form .form-actions {
display: flex;
gap: .6rem;
margin-top: 1.25rem;
}
.cross-sell-current-image img {
max-width: 360px;
width: 100%;
height: auto;
border-radius: var(--radius);
border: 1px solid var(--c-border);
}
.image-spec-hint {
background: var(--c-blue-bg);
border: 1px solid #d8c989;
border-radius: var(--radius);
padding: .65rem .85rem;
margin-bottom: .9rem;
line-height: 1.5;
}
.image-spec-hint strong {
color: var(--c-text);
}
/* ──────────────────────────────────────────────────────────────────────
FAQ-Akkordeon im Hilfe-Bereich
────────────────────────────────────────────────────────────────────── */
.faq-section h2 {
margin: 0 0 1rem;
}
.faq-item {
border-top: 1px solid var(--c-border);
padding: .5rem 0;
}
.faq-item:first-of-type {
border-top: 0;
}
.faq-item summary {
cursor: pointer;
padding: .5rem 0;
user-select: none;
list-style: none;
position: relative;
padding-left: 1.5rem;
line-height: 1.45;
color: var(--c-text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
content: "▸";
position: absolute;
left: 0;
top: .55rem;
font-size: .85rem;
color: var(--c-primary);
transition: transform .15s ease;
transform-origin: center;
}
.faq-item[open] summary::before {
transform: rotate(90deg);
}
.faq-item summary:hover {
color: var(--c-primary);
}
.faq-body {
padding: .25rem 0 .85rem 1.5rem;
line-height: 1.6;
color: var(--c-text);
}
.faq-body p:first-child { margin-top: 0; }
.faq-body p:last-child { margin-bottom: 0; }
.faq-body ul, .faq-body ol {
margin: .5rem 0;
padding-left: 1.4rem;
}
.faq-body code {
background: var(--c-bg);
padding: .1rem .35rem;
border-radius: 3px;
font-size: .92em;
}
/* Während live laufender (oder pausierter) KI-Schätzung blenden wir die
destruktiven Action-Buttons (Kalkulation zurücksetzen, KI-Schätzung neu
starten, Excel-Export) komplett aus. Klick auf eines dieser drei Elemente
würde den laufenden Batch verfälschen oder eine inkonsistente Datei
exportieren. Der User soll während des Laufs nur Pause / Fortsetzen /
Abbrechen sehen — alles andere ist erst wieder sinnvoll, wenn der Batch
abgeschlossen ist (dann entfernt finishBatch() die body-Klasse wieder).
Navigation auf andere Seiten bleibt erlaubt: der Worker läuft serverseitig
weiter, autoResumeBatchIfRunning() nimmt das Polling beim Wiederkehren
automatisch auf. */
body.is-calculating .nav-blocked-during-batch {
display: none !important;
}
/* Pause/Fortsetzen-Paar: das jeweils inaktive Element bleibt sichtbar, ist
aber deutlich gedimmt und nicht klickbar. Damit ist immer klar, welche
Aktion gerade möglich ist und welche „die andere Seite" wäre. */
.estimate-action-pair button[disabled] {
opacity: .45;
cursor: not-allowed;
}
/* ──────────────────────────────────────────────────────────────────────
Modal-Dialog (bbConfirm / bbAlert) im Bauboost-Look
Ersetzt die nativen Browser-confirm/alert-Boxen.
────────────────────────────────────────────────────────────────────── */
.bb-modal-overlay {
position: fixed;
inset: 0;
background: rgba(20, 22, 26, .55);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
animation: bb-overlay-in .14s ease-out;
}
.bb-modal-overlay.is-closing {
animation: bb-overlay-out .12s ease-in forwards;
}
.bb-modal {
background: var(--c-surface);
border: 1px solid var(--c-border);
border-radius: var(--radius);
box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
max-width: 480px;
width: 100%;
padding: 1.25rem 1.5rem 1.1rem;
animation: bb-modal-in .16s cubic-bezier(.2, .9, .3, 1.1);
}
.bb-modal-title {
margin: 0 0 .55rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--c-text);
}
.bb-modal-message {
margin: 0;
color: var(--c-text);
font-size: .94rem;
line-height: 1.55;
white-space: pre-wrap; /* damit \n im Text als echte Zeilenumbrüche erscheinen */
}
.bb-modal-actions {
display: flex;
justify-content: flex-end;
gap: .55rem;
margin-top: 1.25rem;
}
.bb-modal.is-danger [data-action="confirm"] {
background: var(--c-err);
border-color: var(--c-err);
}
.bb-modal.is-danger [data-action="confirm"]:hover {
background: #9d1818;
border-color: #9d1818;
}
@keyframes bb-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes bb-overlay-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes bb-modal-in {
from { opacity: 0; transform: translateY(-8px) scale(.97); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.bb-modal-overlay, .bb-modal { animation: none; }
}
/* ──────────────────────────────────────────────────────────────────────
KI-Disclaimer Dialog (HTML5