/* Angebotsgenerator: form column, sticky preview of an A4 letter (DIN 5008 form B), print rules. */
.ag-page { font-family: var(--bt-font); background: var(--bt-bg); color: var(--bt-ink-2); margin: 0; }
.ag-wrap { max-width: 1320px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.ag-wrap h1 { color: var(--bt-ink); font-size: 1.9rem; margin: 0.5rem 0 0.25rem; letter-spacing: -0.01em; }
.ag-lede { margin: 0 0 1rem; max-width: 70ch; }
.ag-notice { background: var(--bt-warning-soft); border: 1px solid var(--bt-border-strong); border-left: 3px solid var(--bt-warning); border-radius: var(--bt-radius-sm); padding: 0.6rem 0.9rem; font-size: 0.85rem; margin: 0 0 1rem; color: var(--bt-ink-2); }
.ag-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin: 0 0 1rem; }
.ag-toolbar .grow { flex: 1; }
.ag-toolbar label { font-size: 0.875rem; display: inline-flex; align-items: center; gap: 0.4rem; }
.ag-tabs { display: none; gap: 0.5rem; margin: 0 0 1rem; }
.ag-tabs .bt-btn[aria-pressed="true"] { background: var(--bt-ink); color: var(--bt-on-ink); border-color: var(--bt-ink); }

.ag-grid { display: grid; grid-template-columns: minmax(0, 500px) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.ag-side { position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }

.ag-sec { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); margin: 0 0 0.75rem; }
.ag-sec > summary { cursor: pointer; padding: 0.75rem 1rem; font-weight: 600; color: var(--bt-ink); display: flex; align-items: center; gap: 0.6rem; list-style: none; }
.ag-sec > summary::-webkit-details-marker { display: none; }
.ag-sec > summary::after { content: ""; margin-left: auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--bt-muted); border-bottom: 2px solid var(--bt-muted); transform: rotate(45deg); transition: transform 0.15s; }
.ag-sec[open] > summary::after { transform: rotate(-135deg); }
.ag-sec > summary:focus-visible { outline: 2px solid var(--bt-accent); outline-offset: -2px; border-radius: var(--bt-radius); }
.ag-num { width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--bt-ink); color: var(--bt-on-ink); font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }
.ag-fields { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.75rem; padding: 0 1rem 1rem; }
.ag-line .ag-fields { padding: 0.5rem 0 0; }
.ag-field[hidden] { display: none; }
.ag-w3 { grid-column: span 3; } .ag-w4 { grid-column: span 4; } .ag-w6 { grid-column: span 6; } .ag-w8 { grid-column: span 8; } .ag-w12 { grid-column: span 12; }
.ag-field label, .ag-label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--bt-ink-2); margin: 0 0 0.25rem; }
.ag-field input[type="text"], .ag-field input[type="email"], .ag-field input[type="number"], .ag-field input[type="date"], .ag-field select, .ag-field textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.9rem; padding: 0.45rem 0.6rem; background: var(--bt-surface); color: var(--bt-ink); border: 1px solid var(--bt-border-strong); border-radius: var(--bt-radius-sm); }
.ag-field input:focus, .ag-field select:focus, .ag-field textarea:focus { outline: 2px solid var(--bt-accent); outline-offset: 1px; }
.ag-field textarea { resize: vertical; }
.ag-check-label { display: flex !important; align-items: flex-start; gap: 0.5rem; font-weight: 400 !important; }
.ag-check-label input { margin-top: 0.2rem; }
.ag-hint { margin: 0.25rem 0 0; font-size: 0.78rem; color: var(--bt-muted); }
.ag-inline { display: flex; gap: 0.4rem; }
.ag-inline input { flex: 1; min-width: 0; }
.ag-file { display: none; }
.ag-logo-row { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.ag-logo-prev { max-height: 2.5rem; max-width: 8rem; border: 1px solid var(--bt-border); border-radius: 4px; background: #fff; padding: 2px; }
.ag-logo-opts { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; }
.ag-logo-opts[hidden], .ag-logo-prev[hidden], .ag-logo-row [hidden] { display: none; }
.ag-logo-opts label { margin: 0; }
.ag-logo-opts select { width: auto; font: inherit; padding: 0.3rem 0.5rem; border: 1px solid var(--bt-border-strong); border-radius: var(--bt-radius-sm); background: var(--bt-surface); color: var(--bt-ink); }

.ag-line { border: 1px solid var(--bt-border); border-radius: var(--bt-radius-sm); padding: 0.5rem 0.75rem 0.75rem; margin: 0 0 0.75rem; background: var(--bt-surface-2); min-width: 0; }
.ag-line legend { font-size: 0.8rem; font-weight: 600; color: var(--bt-ink); padding: 0 0.3rem; }
.ag-line-tools { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.6rem; }
.ag-sm { padding: 0.25rem 0.6rem !important; font-size: 0.78rem !important; }
.ag-lines { margin: 0.75rem 0; }

.ag-panel { background: var(--bt-surface); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); }
.ag-panel > summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; color: var(--bt-ink); display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: baseline; }
.ag-check-sum.bad { color: var(--bt-danger); } .ag-check-sum.warn { color: var(--bt-warning); } .ag-check-sum.ok { color: var(--bt-success); }
.ag-check-sum { font-weight: 600; font-size: 0.85rem; }
#ag-check-list, #ag-check-list ul { list-style: none; margin: 0; padding: 0 1rem 0.75rem; display: grid; gap: 0.4rem; }
#ag-check-list ul { padding: 0.4rem 0 0; }
.ag-ci { display: flex; gap: 0.6rem; font-size: 0.82rem; align-items: baseline; }
.ag-tag { flex: none; min-width: 4.6rem; text-align: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; border-radius: 4px; padding: 0.1rem 0.35rem; border: 1px solid currentColor; }
.ag-ci.pflicht .ag-tag { color: var(--bt-danger); background: var(--bt-danger-soft); }
.ag-ci.empfohlen .ag-tag { color: var(--bt-warning); background: var(--bt-warning-soft); }
.ag-ci.ok .ag-tag { color: var(--bt-success); background: var(--bt-success-soft); }
.ag-ct small { display: block; color: var(--bt-muted); font-size: 0.72rem; }
.ag-done summary { cursor: pointer; font-size: 0.82rem; color: var(--bt-muted); }
.ag-law { margin: 0; padding: 0 1rem 0.9rem; font-size: 0.75rem; color: var(--bt-muted); }
.ag-fit { margin: 0; font-size: 0.82rem; }
.ag-fit.ok { color: var(--bt-success); } .ag-fit.bad { color: var(--bt-danger); font-weight: 600; }

.ag-stage-box { background: var(--bt-surface-2); border: 1px solid var(--bt-border); border-radius: var(--bt-radius); padding: 0.75rem; }
.ag-stage { position: relative; width: 100%; overflow: hidden; }
.ag-scaler { transform-origin: top left; width: 210mm; }

/* ---------- The sheet (always paper white, regardless of theme) ---------- */
.sheet { position: relative; box-sizing: border-box; width: 210mm; min-height: 297mm; background: #fff; color: #1a1a1a; font-family: var(--bt-font); font-size: 9.5pt; line-height: 1.38; box-shadow: 0 2px 10px rgba(0,0,0,0.18); display: flex; flex-direction: column; }
.sheet.compact { font-size: 8.5pt; line-height: 1.28; }
.sheet .sh-pre { white-space: pre-line; }
.sh-head { position: absolute; top: 0; left: 0; right: 0; height: 42mm; padding: 11mm 20mm 0 25mm; display: flex; justify-content: space-between; align-items: flex-start; gap: 8mm; }
.sh-head.logo-left { flex-direction: row-reverse; }
.sh-head.logo-left .sh-head-text { text-align: right; }
.sh-head-text { font-size: 8pt; line-height: 1.35; color: #444; }
.sh-name { font-weight: 700; color: #111; font-size: 10pt; }
.sh-name-big { font-size: 15pt; letter-spacing: -0.01em; margin-bottom: 1mm; }
.sh-logo img { display: block; max-width: 70mm; height: auto; object-fit: contain; }
.sh-addr { position: absolute; top: 45mm; left: 25mm; width: 85mm; height: 45mm; }
.sh-return { font-size: 6.5pt; color: #555; border-bottom: 0.3mm solid #999; padding-bottom: 0.6mm; height: 5mm; box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin-bottom: 12.7mm; }
.sh-rcpt { font-size: 10pt; line-height: 1.3; }
.sh-info { position: absolute; top: 50mm; left: 125mm; width: 65mm; margin: 0; font-size: 8.5pt; display: grid; grid-template-columns: max-content 1fr; gap: 0.6mm 3mm; }
.sh-info dt { color: #555; } .sh-info dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.sh-body { flex: 1; padding: 98.5mm 20mm 0 25mm; }
.sh-subject { font-size: 11.5pt; margin: 0 0 4mm; color: #000; }
.sheet p { margin: 0 0 2.5mm; }
.sh-table { width: 100%; border-collapse: collapse; font-size: 8.8pt; margin: 4mm 0 2mm; }
.sheet.compact .sh-table { font-size: 8pt; }
.sh-table th { text-align: left; font-weight: 600; font-size: 7.8pt; color: #444; border-bottom: 0.4mm solid #222; padding: 1mm 1.5mm; white-space: nowrap; }
.sh-table td { padding: 1.1mm 1.5mm; border-bottom: 0.2mm solid #ccc; vertical-align: top; }
.sheet.compact .sh-table td { padding: 0.9mm 1.5mm; }
.sh-table .c { text-align: center; width: 8mm; } .sh-table .r { text-align: right; white-space: nowrap; }
.sh-lt { font-weight: 600; } .sh-ld { color: #444; font-size: 8pt; } .sh-opt { font-size: 7.5pt; color: #555; font-style: italic; }
.sh-table tr.is-opt td { color: #555; } .sh-sum.is-opt { font-style: italic; }
.sh-empty { text-align: center; color: #666; padding: 5mm; }
.sh-totals { margin: 2mm 0 4mm auto; width: 85mm; font-size: 9pt; }
.sh-trow { display: flex; justify-content: space-between; gap: 4mm; padding: 0.6mm 1.5mm; }
.sh-trow.strong { font-weight: 700; font-size: 10.5pt; border-top: 0.4mm solid #222; border-bottom: 0.8mm double #222; margin-top: 1mm; padding: 1.2mm 1.5mm; }
.sh-trow.small { font-size: 7.8pt; color: #555; }
.sh-terms { margin: 0 0 3mm; } .sh-term { font-size: 8.8pt; margin: 0 0 1.4mm !important; }
.sheet.compact .sh-term { font-size: 8pt; }
.sh-greet { margin-top: 3mm; } .sh-greet p { margin: 0 0 1mm; } .sh-signer { margin-top: 8mm !important; font-weight: 600; }
.sheet.compact .sh-signer { margin-top: 6mm !important; }
.sh-accept { margin-top: 4mm; border: 0.3mm solid #888; border-radius: 1mm; padding: 2.5mm 3mm 2mm; font-size: 8.5pt; break-inside: avoid; }
.sh-accept-l { display: flex; justify-content: space-between; gap: 10mm; margin-top: 8mm; font-size: 7pt; color: #555; }
.sh-accept-l span { flex: 1; border-top: 0.25mm solid #444; padding-top: 0.8mm; }
.sh-foot { margin: 5mm 20mm 0 25mm; padding: 2.5mm 0 8mm; border-top: 0.25mm solid #999; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6mm; font-size: 7pt; line-height: 1.35; color: #444; }
.sh-fcol div:first-child { font-weight: 600; color: #222; }

/* Narrow screens: editing and preview as two views */
@media (max-width: 1060px) {
    .ag-grid { grid-template-columns: minmax(0, 1fr); }
    .ag-tabs { display: flex; }
    .ag-side { position: static; max-height: none; overflow: visible; }
    #ag-app[data-view="edit"] .ag-side { display: none; }
    #ag-app[data-view="preview"] .ag-form { display: none; }
}
@media (max-width: 520px) { .ag-w3 { grid-column: span 6; } .ag-w4 { grid-column: span 12; } .ag-w8 { grid-column: span 12; } .ag-w6 { grid-column: span 12; } }

/* Print: only the sheet, true A4, no browser margins */
@page { size: A4; margin: 0; }
@media print {
    html, body { background: #fff !important; }
    .bt-topbar, .bt-footer, .ag-wrap > :not(.ag-grid), .ag-form, .ag-side > :not(.ag-stage-box), .ag-tabs { display: none !important; }
    .ag-wrap { max-width: none; padding: 0; }
    .ag-grid { display: block; }
    .ag-side { position: static; max-height: none; overflow: visible; display: block; }
    .ag-stage-box { border: 0; padding: 0; background: none; }
    .ag-stage { height: auto !important; overflow: visible; }
    .ag-scaler { transform: none !important; }
    .sheet { box-shadow: none; }
    #ag-app[data-view] .ag-side, #ag-app[data-view] .ag-form { display: block; }
    #ag-app .ag-form { display: none !important; }
}
.sheet.compact p { margin-bottom: 2mm; }
.sheet.compact .sh-foot { margin-top: 3mm; }
.sheet.compact .sh-accept { margin-top: 3mm; }
.sheet.compact .sh-accept-l { margin-top: 6mm; }
.sheet.compact .sh-greet { margin-top: 2mm; }