/* Stufe 10: Angebot online annehmen + E-Mail-Vorlagen (angebot-online.js) – nutzt die Farben aus index.html (:root) */
.ao-karte { border-left:4px solid var(--red); }
.ao-kopf { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.ao-kopf h3 { margin:0; } .ao-alle { font-size:12.5px; font-weight:500; color:var(--muted); margin-left:6px; } .ao-kopf .btns { margin:0; display:flex; gap:8px; flex-wrap:wrap; }
.ao-ang { border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin:8px 0; background:#fff; }
.ao-ang.ao-neu { border-color:var(--red); box-shadow:0 0 0 2px #e6374122; }
.ao-ang-kopf { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.ao-ang-kopf > b { font-size:15px; }
.ao-chip { display:inline-block; border-radius:999px; padding:2px 10px; font-size:12.5px; font-weight:600; white-space:nowrap; background:#f1ede8; color:var(--ink); }
.ao-chip.ao-offen { background:#fff4dc; color:#8a5a00; } .ao-chip.ao-ok { background:#e3f4e8; color:var(--good); } .ao-chip.ao-nein { background:#fde8e8; color:var(--bad); }
.ao-chip.ao-warn { background:#fdeee0; color:#a34d00; } .ao-chip.ao-grau { background:#eee; color:#777; } .ao-chip.ao-rot { background:var(--red); color:#fff; }
.ao-antwort { margin:8px 0 2px; padding:8px 10px; border-radius:8px; font-size:14px; } .ao-antwort.ok { background:#eef8f0; } .ao-antwort.nein { background:#fdf1f1; }
.ao-rueckfrage { margin:8px 0 2px; padding:8px 10px; border-radius:8px; background:#fff6ec; font-size:14px; }
.ao-zitat { white-space:pre-wrap; margin-top:4px; font-size:14px; line-height:1.45; }
.ao-akt { display:flex; flex-wrap:wrap; gap:6px; align-items:center; margin-top:8px; }
.ao-akt a.btn { text-decoration:none; }
.ao-status { font-size:13px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; margin-left:auto; }
.ao-status select, td select[data-ao-status] { padding:5px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; background:#fff; }
.ao-mails { margin-top:10px; } .ao-mails > summary { cursor:pointer; font-weight:600; padding:4px 0; }
.ao-mail { border-top:1px solid var(--line); padding:6px 0; } .ao-mail > summary { cursor:pointer; }
.ao-frisch { background:#fffbea; }
/* Dialoge */
.ao-dlg .er-inhalt label.idoc-feld { display:block; margin:6px 0; font-size:13px; color:var(--muted); }
.ao-dlg .er-inhalt label.idoc-feld input, .ao-dlg .er-inhalt label.idoc-feld select, .ao-dlg .er-inhalt label.idoc-feld textarea { display:block; width:100%; margin-top:3px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); background:#fff; box-sizing:border-box; }
.ao-dlg textarea { resize:vertical; min-height:200px; line-height:1.45; }
.ao-raster { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:4px 14px; }
.ao-raster-2 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.ao-feld { margin:10px 0; } .ao-lbl { display:block; font-size:13px; color:var(--muted); margin-bottom:4px; }
.ao-pdfs, .ao-anh { display:grid; gap:6px; max-height:260px; overflow:auto; padding:2px; }
.ao-pdf { display:flex; gap:10px; align-items:flex-start; padding:8px 10px; border:1px solid var(--line); border-radius:8px; cursor:pointer; background:#fff; }
.ao-pdf:has(input:checked) { border-color:var(--red); background:#fff7f6; }
.ao-dlg .er-inhalt input[type=radio], .ao-dlg .er-inhalt input[type=checkbox] { width:auto; flex:none; }
.ao-pdf > span { flex:1; min-width:0; overflow-wrap:anywhere; }
.ao-pdf input[type=radio] { margin-top:3px; accent-color:var(--red); flex:none; } .ao-pdf input[type=file] { display:block; margin-top:6px; max-width:100%; }
.ao-anh .vg-check { display:flex; gap:8px; align-items:center; font-size:14px; }
.ao-platz { display:flex; flex-wrap:wrap; gap:4px; align-items:center; margin:4px 0 8px; } .ao-platz .chip { padding:3px 8px; font-size:12px; font-family:ui-monospace,Consolas,monospace; }
.ao-warn { background:#fff6ec; border:1px dashed #e9b98a; border-radius:10px; padding:8px 12px; font-size:14px; }
.ao-rahmen { height:60vh; margin-top:8px; border:1px solid var(--line); border-radius:10px; }
.ao-linkzeile { display:flex; gap:8px; margin:10px 0; } .ao-linkzeile input { flex:1; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; font-size:13px; }
/* Zusatzseite „Angebote“ – Listen und Kacheln wachsen mit der vollen Breite (Gerüst ohne Höchstbreite), nur Formulare behalten eine Lesebreite */
#aoEinstForm, .ao-vl-form { max-width:900px; }
.ao-reiter { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 14px; } .ao-reiter .chip.an { background:var(--ink); color:#fff; border-color:var(--ink); }
.ao-kacheln { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; margin-bottom:14px; }
.ao-kachel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px; display:grid; gap:2px; }
.ao-kachel span { font-size:13px; color:var(--muted); } .ao-kachel b { font-size:26px; line-height:1.1; } .ao-kachel small { color:var(--muted); }
.ao-kachel.ok b { color:var(--good); } .ao-kachel.warn b { color:#a34d00; }
.ao-auf-zeile { margin-top:2px; font-size:13px; } .ao-auf > summary { cursor:pointer; color:var(--muted); } .ao-auf[open] > summary { margin-bottom:2px; }
td .ao-chip { margin:0 4px 4px 0; }
.ao-filter { margin:0 0 10px; font-size:14px; } .ao-filter select { padding:5px 8px; border:1px solid var(--line); border-radius:8px; font:inherit; }
.ao-tabelle { overflow-x:auto; background:#fff; border:1px solid var(--line); border-radius:12px; }
.ao-tabelle table { width:100%; border-collapse:collapse; font-size:14px; }
.ao-tabelle th, .ao-tabelle td { padding:8px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.ao-tabelle th { font-size:12.5px; color:var(--muted); font-weight:600; white-space:nowrap; background:#faf7f4; }
.ao-tabelle td small { display:block; color:var(--muted); font-size:12px; } .ao-tabelle .r { text-align:right; white-space:nowrap; }
.ao-tabelle tr.ao-neu td:first-child { box-shadow:inset 3px 0 0 var(--red); }
.ao-tabelle td select { margin-top:4px; display:block; }
.ao-alt { color:var(--bad); }
.ao-linkbtn { background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--ink); cursor:pointer; text-align:left; text-decoration:underline; text-decoration-color:#d8cfc4; }
.ao-vorlagen { display:grid; grid-template-columns:220px 1fr; gap:14px; align-items:start; }
.ao-vl-liste { display:grid; gap:4px; } .ao-vl-liste button { text-align:left; border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 10px; font:inherit; cursor:pointer; }
.ao-vl-liste button.an { border-color:var(--red); background:#fff7f6; font-weight:600; } .ao-vl-liste .ao-vl-neu { border-style:dashed; color:var(--muted); }
.ao-vl-form label.idoc-feld { display:block; margin:6px 0; font-size:13px; color:var(--muted); }
.ao-vl-form input, .ao-vl-form textarea { display:block; width:100%; margin-top:3px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; color:var(--ink); box-sizing:border-box; }
.ao-vl-form textarea { min-height:260px; resize:vertical; line-height:1.45; }
#aoEinstForm label.idoc-feld, #aoKontoDlg label.idoc-feld { display:block; margin:6px 0; font-size:13px; color:var(--muted); }
#aoEinstForm input:not([type=checkbox]), #aoEinstForm textarea { display:block; width:100%; margin-top:3px; padding:9px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; box-sizing:border-box; }
@media (max-width:760px) {
  .ao-vorlagen { grid-template-columns:1fr; }
  .ao-status { margin-left:0; }
  .ao-tabelle { border:0; background:none; }
  .ao-tabelle table, .ao-tabelle tbody, .ao-tabelle tr, .ao-tabelle td { display:block; width:100%; }
  .ao-tabelle thead { display:none; }
  .ao-tabelle tr { background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; padding:6px 4px; }
  .ao-tabelle td { border:0; padding:4px 10px; display:flex; gap:10px; justify-content:space-between; text-align:right; }
  .ao-tabelle td::before { content:attr(data-label); color:var(--muted); font-size:12.5px; text-align:left; flex:none; }
  .ao-tabelle td:first-child { display:block; text-align:left; font-size:15px; } .ao-tabelle td:first-child::before { display:none; }
  .ao-tabelle td small { display:inline; margin-left:6px; } .ao-tabelle .r { text-align:right; }
  .ao-tabelle td select { display:inline-block; margin:0 0 0 6px; }
}