/* Angebots-Arbeitsplatz (Vorschau 26.09.2026).
   Nutzt die HUD-Farben (--akz, --glas, --linie …), aber ruhiger: Fließtext in einer
   Grotesk statt Mono, weil hier Positionstexte gelesen und geprüft werden. */

.ak, .ak-leadblock { --ak-sans: "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif; }
.ak { font-family: var(--ak-sans); font-size: 15px; }
.ak .mini, .ak-leadblock .mini { font-family: var(--mono); }

.ak-raster { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .ak-raster { grid-template-columns: 1fr; } }

/* Seitenleiste */
.ak-seite { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 12px; }
.ak-filter { display: flex; gap: 4px; }
.ak-filter button { flex: 1; background: transparent; border: 1px solid var(--linie2); border-radius: 7px; padding: 6px 0;
  font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--ink3); cursor: pointer; }
.ak-filter button.an { border-color: var(--akz); color: var(--akz); }
.ak-liste { display: flex; flex-direction: column; gap: 8px; max-height: calc(100vh - 260px); overflow-y: auto; padding-right: 2px; }
.ak-job { text-align: left; background: var(--glas); border: 1px solid var(--linie); border-radius: 10px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; font-family: var(--ak-sans); color: var(--ink); }
.ak-job:hover { border-color: var(--linie2); }
.ak-job.an { border-color: var(--akz); box-shadow: inset 3px 0 0 var(--akz); }
.ak-job b { font-weight: 600; font-size: 14.5px; }
.ak-job small { color: var(--ink3); font-size: 12.5px; }
.ak-leer { color: var(--ink3); font-size: 14px; padding: 12px 4px; }

/* Hauptfläche */
.ak-haupt { background: var(--glas); border: 1px solid var(--linie); border-radius: var(--r); padding: 22px; display: flex;
  flex-direction: column; gap: 18px; min-height: 60vh; }
.ak-kopf { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.ak-kopf h2 { font: 600 24px/1.25 var(--ak-sans); margin: 4px 0 8px; outline: none; border-radius: 6px; padding: 2px 4px; margin-left: -4px; }
.ak-kopf h2[contenteditable="true"]:hover, .ak-kopf h2:focus { background: rgba(255,255,255,.05); }
.ak-eyebrow { font: 600 11px/1.4 var(--mono); letter-spacing: .14em; color: var(--akz); }
.ak-zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ak-rechts { margin-left: auto; display: flex; gap: 8px; }
.ak-klein { font-size: 13px; color: var(--ink3); }
.ak-klein.gut { color: var(--gut); } .ak-klein.warn, .warn { color: var(--warn); }
.dim { opacity: .75; }

.ak-pill { font: 600 11px/1 var(--ak-sans); letter-spacing: .02em; padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  background: rgba(255,255,255,.07); color: var(--ink2); }
.ak-pill.s-in_arbeit, .ak-pill.s-neu { background: rgba(var(--akz-rgb),.14); color: var(--akz); }
.ak-pill.s-wartet_auf_freigabe, .ak-pill.s-offen { background: rgba(232,163,58,.14); color: var(--warn); }
.ak-pill.s-anfrage_offen { background: rgba(120,170,255,.13); color: #9cc2ff; }
.ak-pill.s-freigegeben, .ak-pill.s-in_hero { background: rgba(63,191,51,.14); color: var(--gut); }
.ak-pill.s-fehler { background: rgba(255,82,82,.13); color: var(--rot); }
.ak-pill.s-verworfen { background: rgba(255,255,255,.05); color: var(--ink3); text-decoration: line-through; }

.ak-chip { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--linie2); border-radius: 8px; padding: 5px 10px;
  background: rgba(255,255,255,.03); color: var(--ink); font: 500 13.5px/1.2 var(--ak-sans); }
.ak-chip.klick { cursor: pointer; } .ak-chip.klick:hover { border-color: var(--akz); color: var(--akz); }
.ak-chip button { background: none; border: 0; color: var(--ink3); cursor: pointer; }

.ak-kt { display: flex; border: 1px solid var(--linie2); border-radius: 8px; overflow: hidden; }
.ak-kt button { background: transparent; border: 0; padding: 8px 12px; font: 600 11px/1 var(--mono); letter-spacing: .08em;
  color: var(--ink3); cursor: pointer; }
.ak-kt button.an { background: var(--akz); color: #140800; }

/* Ablage */
.ak-drop { border: 2px dashed var(--linie2); border-radius: 12px; display: flex; flex-direction: column; align-items: center;
  gap: 8px; text-align: center; cursor: pointer; transition: border-color .15s, background .15s; }
.ak-drop.gross { padding: 44px 20px; }
.ak-drop.klein { padding: 12px; margin-top: 8px; }
.ak-drop b { font: 600 17px/1.3 var(--ak-sans); }
.ak-drop.klein b { font-size: 13px; font-weight: 500; color: var(--ink2); }
.ak-drop small { color: var(--ink3); font-size: 13px; max-width: 520px; }
.ak-drop svg { width: 38px; height: 38px; fill: none; stroke: var(--akz); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ak-drop:hover, .ak-ueber .ak-drop, .ak-drop.ak-ueber, .ak-dateien.ak-ueber { border-color: var(--akz); background: rgba(var(--akz-rgb),.07); }
#v-angebote.ak-ueber .ak-haupt { outline: 2px dashed var(--akz); outline-offset: 4px; }

.ak-dateien { display: flex; flex-wrap: wrap; gap: 8px; border: 1px dashed transparent; border-radius: 10px; padding: 4px; margin: -4px; }
.ak-datei { display: inline-flex; border: 1px solid var(--linie2); border-radius: 8px; overflow: hidden; }
.ak-datei button { background: rgba(255,255,255,.03); border: 0; color: var(--ink2); padding: 6px 10px; cursor: pointer; font: 13px var(--ak-sans); }
.ak-datei button:hover { color: var(--akz); }
.ak-datei .weg { border-left: 1px solid var(--linie); color: var(--ink3); }
.ak-dazu { background: none; border: 1px dashed var(--linie2); border-radius: 8px; color: var(--ink3); padding: 6px 12px;
  cursor: pointer; font: 13px var(--ak-sans); }
.ak-dazu:hover { color: var(--akz); border-color: var(--akz); }

/* Schritte */
.ak-schritte { display: flex; gap: 6px; flex-wrap: wrap; }
.ak-schritte span { flex: 1 1 110px; font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 10px;
  border-radius: 7px; background: rgba(255,255,255,.04); color: var(--ink3); }
.ak-schritte .fertig { background: rgba(63,191,51,.12); color: var(--gut); }
.ak-schritte .laeuft { background: var(--akz); color: #140800; }
.ak-schritte .fehler { background: rgba(255,82,82,.16); color: var(--rot); }

.ak-laeuft { display: flex; gap: 12px; align-items: center; color: var(--ink2); }
.ak-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--linie2); border-top-color: var(--akz);
  animation: dreh 0.9s linear infinite; flex: none; }
.ak-fehler { border: 1px solid rgba(255,82,82,.4); background: rgba(255,82,82,.08); border-radius: 10px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ak-zus { color: var(--ink2); max-width: 75ch; line-height: 1.55; }

/* Tabelle */
.ak-tab { overflow-x: auto; border: 1px solid var(--linie); border-radius: 10px; }
.ak-tab table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 14px; }
.ak-tab th { text-align: left; font: 600 11px/1 var(--mono); letter-spacing: .1em; color: var(--ink3); padding: 11px 12px;
  background: rgba(0,0,0,.25); border-bottom: 1px solid var(--linie); }
.ak-tab td { padding: 11px 12px; border-top: 1px solid var(--linie); vertical-align: top; }
.ak-tab .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ak-tab tr.offen td { background: rgba(232,163,58,.06); }
.ak-tab tr.alt td { color: var(--ink3); }
.ak-pill.s-verworfen-n { background: rgba(255,255,255,.06); color: var(--ink3); }
.ak-quellen { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.ak-q { font-size: 11.5px; color: var(--akz); border: 1px solid rgba(var(--akz-rgb),.35); border-radius: 5px; padding: 1px 7px;
  max-width: 340px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
.ak-q.rw { color: var(--ink3); border-color: var(--linie2); }

.ak-eingabe { width: 100%; background: rgba(0,0,0,.3); border: 1px solid var(--linie2); border-radius: 7px; padding: 8px 10px;
  color: var(--ink); font: 14px/1.4 var(--ak-sans); }
.ak-eingabe:focus { outline: 0; border-color: var(--akz); }
.ak-eingabe.n { text-align: right; width: 96px; }
.ak-eingabe.k { width: 64px; }
textarea.ak-eingabe { resize: vertical; }

/* Summe */
.ak-summe { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  border-top: 1px solid var(--linie); padding-top: 16px; }
.ak-gross { font: 700 36px/1 var(--ak-sans); color: var(--akz); font-variant-numeric: tabular-nums; margin-bottom: 6px; }
.ak-btn { background: var(--akz); color: #140800; border: 0; border-radius: 8px; padding: 12px 20px; cursor: pointer;
  font: 700 12px/1 var(--mono); letter-spacing: .12em; }
.ak-btn:hover { background: var(--akz-tief); }
.ak-btn:disabled { opacity: .45; cursor: default; }
.ak-btn.breit { width: 100%; padding: 13px; }
.ak-btn:focus-visible, .ak-job:focus-visible, .ak-drop:focus-within { outline: 2px solid var(--akz); outline-offset: 2px; }

.ak-block { display: flex; flex-direction: column; gap: 10px; }
.ak-block h3 { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.ak-offen { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; color: var(--ink2); font-size: 14px; }
.ak-offen li::marker { color: var(--warn); }
.ak-anfrage { border: 1px solid var(--linie2); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ak-anfrage.weg { opacity: .5; }
.ak-treffer { display: flex; flex-direction: column; gap: 6px; }
.ak-treffer button { text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--linie); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; color: var(--ink); font: 14px var(--ak-sans); display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.ak-treffer button:hover { border-color: var(--akz); }
.ak-treffer span { color: var(--ink3); font-size: 13px; }
.ak-treffer em { color: var(--warn); font-style: normal; font-size: 12.5px; margin-left: auto; }
.ak-zuordnen { border: 1px solid rgba(232,163,58,.35); border-radius: 10px; padding: 14px; }

.ak-fuss { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--linie); padding-top: 14px; }
.ak-frage { display: inline-flex; gap: 8px; align-items: center; color: var(--rot); font-size: 13.5px; }

.ak-toast { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 40; background: #111820;
  border: 1px solid var(--linie2); border-radius: 10px; padding: 11px 18px; font: 14px var(--ak-sans); color: var(--ink);
  box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: min(92vw, 560px); }
.ak-toast.gut { border-color: rgba(63,191,51,.5); } .ak-toast.rot { border-color: rgba(255,82,82,.6); color: #ffb3b3; }

/* Block in der Lead-Akte */
.ak-leadblock { font-family: var(--ak-sans); display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.ak-leadblock:empty { display: none; }
.ak-lb-kopf { font: 600 11px/1 var(--mono); letter-spacing: .14em; color: var(--ink3); }
.ak-lb-v { text-align: left; background: rgba(255,255,255,.03); border: 1px solid var(--linie); border-radius: 8px; padding: 8px 10px;
  color: var(--ink); cursor: pointer; font: 13.5px var(--ak-sans); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ak-lb-v:hover { border-color: var(--akz); }
.ak-lb-v.alt { opacity: .7; }

@media (prefers-reduced-motion: reduce) { .ak-spinner { animation: none; } }

/* HERO-Übergabe */
.ak-hero { border: 1px solid rgba(63,191,51,.3); border-radius: 12px; padding: 16px; }
.ak-hero a.ak-btn { text-decoration: none; display: inline-block; }
.ak-kopier { cursor: copy; }
.ak-kopier:hover { color: var(--akz); }
.ak-kopier.kopiert { color: var(--gut); }

/* Ablage überall: ruhiger Rahmen ums ganze Fenster, klickt nichts weg (pointer-events: none) */
.ak-overlay { position: fixed; inset: 10px; z-index: 60; pointer-events: none; border: 2px dashed var(--akz);
  border-radius: 18px; background: rgba(0,0,0,.35); display: grid; place-items: center; }
body.ak-zone .ak-overlay { display: none; }
.ak-ov-karte { background: var(--bg2); border: 1px solid var(--linie2); border-radius: 14px; padding: 22px 30px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: "Inter", system-ui, sans-serif; }
.ak-ov-karte b { font-size: 18px; font-weight: 600; }
.ak-ov-karte small { color: var(--ink3); font-size: 13.5px; }
.ak-ov-karte svg { width: 34px; height: 34px; fill: none; stroke: var(--akz); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Plan: Mengenliste */
.ak-mengen { border: 1px solid rgba(var(--akz-rgb), .35); border-radius: 12px; padding: 16px; }
.ak-abgleich { font-size: 14px; padding: 9px 12px; border-radius: 8px; background: rgba(255,255,255,.04); }
.ak-abgleich.gut { color: var(--gut); } .ak-abgleich.warn { color: var(--warn); }
.ak-eingabe.k2 { width: auto; padding: 6px 8px; }
.ak-mengen .ak-tab table { min-width: 760px; }
.ak-pill.s-mengen_pruefen { background: rgba(var(--akz-rgb), .16); color: var(--akz); }

/* Ausstattungsblatt */
.ak-ausst { border: 1px solid var(--linie2); border-radius: 12px; padding: 16px; }
.ak-au-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.ak-au-gruppe { display: flex; flex-direction: column; gap: 8px; }
.ak-au-gruppe > b { font: 600 11px/1 var(--mono); letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; }
.ak-au-feld { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--ink2); }
.ak-au-feld > span { display: flex; gap: 6px; align-items: center; justify-content: space-between; }
.ak-au-feld em { font-style: normal; }
.ak-au-feld small { color: var(--ink3); font-size: 12px; }
.ak-au-feld.fehlt .ak-eingabe { border-color: rgba(255,82,82,.6); }
.ak-au-feld .ak-eingabe.k2 { width: 100%; }
.ak-rf { border-left: 3px solid var(--warn); padding: 6px 12px; background: rgba(232,163,58,.06); border-radius: 6px; }

.ak-typen > summary { cursor: pointer; font: 600 11px/1.6 var(--mono); letter-spacing: .1em; color: var(--ink3); padding: 4px 0; }
.ak-typen[open] > summary { color: var(--akz); }