{ if (el) rowFieldRefs.current[r.id] = el; }} className={ctl} placeholder="z. B. Beratungspauschale" value={r.custName} onChange={e => patchRow(g.id, r.id, { custName: e.target.value })} /> patchRow(g.id, r.id, { qty: e.target.value })} onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); addRow(g.id); } }} /> patchRow(g.id, r.id, { standort: e.target.value })} /> patchRow(g.id, r.id, { monthly: e.target.value })} /> patchRow(g.id, r.id, { oneoff: e.target.value })} />

patchRow(g.id, r.id, { custDesc: e.target.value })} />
      </Field>
    </div>
  );

// ===== Produktzeile (Kalkulator) =====
  const renderRow = (g, r) => {
    if (g.area === "individuell") return renderCustomRow(g, r);
    if (g.area === "allipbasic") return renderBasicRow(g, r);
    if (g.area === "sdwan" || g.area === "sdwanmeraki") return renderSdwanRow(g, r);
    const p = getProduct(g.area, r.productId), products = CATALOG[g.area].products.filter(pp => !isDeleted(g.area, pp.id) || pp.id === r.productId);
    const hasLz = p?.laufzeiten?.length > 0, isQtyManual = p?.qty && p?.mengenBezug !== "nebenstellen", isOpen = p?.priceOpen, isLine = p?.extrasKind === "line", isMobile = !!p?.mobile;
    const qv = Math.max(1, Number(r.qty) || 1), stMax = p?.rabattType === "staffelMax" ? staffelPct(p.staffel, qv) : 0;
    const oMax = p?.office ? officeMax(p, g.managed) : 0, oPrice = p?.office ? officePrice(p, g.managed) : 0, oNoMgmt = p?.office ? officeNoMgmt(p, g.managed) : false;
    const showDarstellung = (p?.rabattType === "fix10" && r.discountFix) || (p?.rabattType === "staffelMax" && Number(r.discountPct) > 0) || (p?.rabattType === "officeMax" && Number(r.discountPct) > 0) || (isLine && r.lineProvider === "dtag" && ["10", "20", "30"].includes(r.lineRabatt)) || (isMobile && ["10", "20", "30"].includes(r.mobileRabatt)) || (p?.pureDiscount && Number(r.pureRabatt) > 0);
    return (
      <div key={r.id} className="rounded-lg border border-gray-200 bg-white p-3">
        <div className="flex flex-wrap gap-3 items-end">
          <SortArrows g={g} r={r} />
          <button onClick={() => duplicateRow(g.id, r.id)} className="p-2 rounded hover:bg-blue-50 mb-0.5 shrink-0" title="Produkt duplizieren"><Copy size={18} color={TEF_BLUE} /></button><button onClick={() => removeRow(g.id, r.id)} className="p-2 rounded hover:bg-red-50 mb-0.5 shrink-0" title="Produkt entfernen"><Trash2 size={18} color={TEF_RED} /></button>
          <Field label="Produkt" className="grow min-w-[200px]">
            <select ref={el => { if (el) rowFieldRefs.current[r.id] = el; }} className={ctl} value={r.productId} onChange={e => onProduct(g.id, r.id, g.area, e.target.value)}>
              <option value="">— wählen —</option>
              {products.map(pp => pp.isSeparator ? <option key={pp.id} disabled style={{ color: "#aaa" }}>{pp.name}</option> : <option key={pp.id} value={pp.id}>{pp.name}{isDeleted(g.area, pp.id) ? " (gelöscht)" : ""}</option>)}
            </select>
          </Field>
          {hasLz && <Field label="Laufzeit" className="w-40"><select className={ctl} value={r.term ?? ""} onChange={e => onRowTerm(g.id, r.id, g.area, Number(e.target.value))}>{p.laufzeiten.map(t => <option key={t} value={t}>{t} Monate</option>)}</select></Field>}
          {isQtyManual && <Field label={p.qtyLabel || "Menge"} className="w-28"><input type="number" min={p.qtyMin || 1} className={ctl} value={r.qty} onChange={e => patchRow(g.id, r.id, { qty: e.target.value })} onKeyDown={e => { if (e.key === "Enter") { e.preventDefault(); addRow(g.id); } }} /></Field>}
          {isQtyManual && p?.qtyMin > 1 && Number(r.qty) < p.qtyMin && <div className="text-[11px] self-center mb-2" style={{ color: TEF_RED }}>Mindestmenge {p.qtyMin} – wird in der Kalkulation automatisch angesetzt</div>}
          {p?.standort && <Field label="Standort (optional)" className="w-48"><input className={ctl} placeholder="z. B. Werk Kirchheim" value={r.standort} onChange={e => patchRow(g.id, r.id, { standort: e.target.value })} /></Field>}
          {isOpen && !isLine && <><Field label="Monatlich (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={r.monthly} onChange={e => patchRow(g.id, r.id, { monthly: e.target.value })} /></Field><Field label="Einmalig (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={r.oneoff} onChange={e => patchRow(g.id, r.id, { oneoff: e.target.value })} /></Field></>}
          {isLine && <>
            <Field label="Anbindung" className="w-36"><select className={ctl} value={r.lineProvider} onChange={e => patchRow(g.id, r.id, { lineProvider: e.target.value })}><option value="dtag">DTAG</option><option value="andere">Andere</option></select></Field>
            {r.lineProvider === "dtag" && <Field label="ONKZ" className="w-32"><input className={ctl} placeholder="z. B. 0711" value={r.onkz} onChange={e => patchRow(g.id, r.id, { onkz: e.target.value })} /></Field>}
            {r.lineProvider === "dtag" && <Field label="Rabatt" className="w-36"><select className={ctl} value={r.lineRabatt} onChange={e => { const v = e.target.value; if (v === "pricing") { const b = lineDtagBase(p, r); patchRow(g.id, r.id, { lineRabatt: v, monthly: b.monthly, oneoff: b.oneoff }); } else patchRow(g.id, r.id, { lineRabatt: v }); }}><option value="0">0 %</option><option value="10">10 %</option><option value="20">20 %</option><option value="30">30 %</option><option value="pricing">Pricing</option></select></Field>}
            {(r.lineProvider === "andere" || (r.lineProvider === "dtag" && r.lineRabatt === "pricing")) && <><Field label="Monatlich (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={r.monthly} onChange={e => patchRow(g.id, r.id, { monthly: e.target.value })} /></Field><Field label="Einmalig (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={r.oneoff} onChange={e => patchRow(g.id, r.id, { oneoff: e.target.value })} /></Field></>}
          </>}
          {isMobile && <>
            <Field label="Geschwindigkeit" className="w-44">
              <select className={ctl} value={r.mobileSpeed} onChange={e => patchRow(g.id, r.id, { mobileSpeed: e.target.value })}>
                {MOBILE_SPEEDS.map(s => <option key={s.key} value={s.key}>{s.label}</option>)}
              </select>
            </Field>
            <Field label="Rabatt" className="w-36">
              <select className={ctl} value={r.mobileRabatt} onChange={e => { const v = e.target.value; if (v === "pricing") { const b = mobileMainBase(r); patchRow(g.id, r.id, { mobileRabatt: v, monthly: b.monthly, oneoff: b.oneoff }); } else patchRow(g.id, r.id, { mobileRabatt: v }); }}>
                <option value="0">0 %</option><option value="10">10 %</option><option value="20">20 %</option><option value="30">30 %</option><option value="pricing">Pricing</option>
              </select>
            </Field>
            {r.mobileRabatt === "pricing" && <><Field label="Monatlich (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={r.monthly} onChange={e => patchRow(g.id, r.id, { monthly: e.target.value })} /></Field><Field label="Einmalig (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={r.oneoff} onChange={e => patchRow(g.id, r.id, { oneoff: e.target.value })} /></Field></>}
            <Field label="Antenne" className="w-64">
              <select className={ctl} value={r.antenne} onChange={e => patchRow(g.id, r.id, { antenne: e.target.value })}>
                <option value="">keine</option>
                {ANTENNEN.map(a => <option key={a.key} value={a.key}>{a.label} (+{eur(a.oneoff)} einmalig)</option>)}
              </select>
            </Field>
          </>}
          {p?.pureDiscount && <Field label="Rabatt" className="w-36">
            <select className={ctl} value={r.pureRabatt} onChange={e => patchRow(g.id, r.id, { pureRabatt: e.target.value })}>
              <option value="0">0 %</option><option value="10">10 %</option><option value="20">20 %</option>
              {Number(r.term) >= 36 && <option value="30">30 %</option>}
            </select>
          </Field>}
        </div>
        {p?.office && <div className="mt-2 text-xs text-gray-600">Preis: <b style={{ color: TEF_BLUE }}>{eur(oPrice)}</b> / Monat{oNoMgmt && <span style={{ color: TEF_RED }}> · Kein Management durch Telefónica</span>}</div>}
        {p?.inetFlat && <div className="mt-2">
          <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!r.internetFlat} onChange={e => patchRow(g.id, r.id, { internetFlat: e.target.checked })} />Internet-Flatrate <span className="text-xs text-gray-500">(+{eur(Number(r.term) >= 36 ? INET_FLAT.m36 : INET_FLAT.m24)} / Monat · separat, nicht rabattiert)</span></label>
        </div>}
        {p?.extrasKind && <div className="mt-2 flex flex-wrap gap-x-6 gap-y-2">
          <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!r.backup} onChange={e => { const checked = e.target.checked; patchRow(g.id, r.id, checked ? { backup: true } : { backup: false, express: false }); }} />Mobilfunk-Backup <span className="text-xs text-gray-500">(+{eur(backupMonthly(p.extrasKind, r.term))} / Monat)</span></label>
          {r.backup && <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!r.express} onChange={e => patchRow(g.id, r.id, { express: e.target.checked })} />Express-Bereitstellung <span className="text-xs text-gray-500">(+{eur(EXPRESS_PRICE[p.extrasKind])} einmalig)</span></label>}
        </div>}
        {p?.extrasKind && r.backup && <div className="mt-2"><Field label="Antenne" className="w-64">
          <select className={ctl} value={r.antenne} onChange={e => patchRow(g.id, r.id, { antenne: e.target.value })}>
            <option value="">keine</option>
            {ANTENNEN.map(a => <option key={a.key} value={a.key}>{a.label} (+{eur(a.oneoff)} einmalig)</option>)}
          </select>
        </Field></div>}
        {p?.wave && <div className="mt-2 flex flex-wrap gap-x-6 gap-y-2">
          <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!r.businessClass} onChange={e => patchRow(g.id, r.id, { businessClass: e.target.checked })} />Business Class Support (8h) <span className="text-xs text-gray-500">(+{eur(WAVE_SUPPORT_PRICE)} / Monat)</span></label>
        </div>}
        {p?.wave && <div className="mt-2 text-xs text-gray-600">„Line of Sight"-Test wird automatisch mit <b style={{ color: TEF_BLUE }}>{eur(WAVE_LOS_PRICE)}</b> einmalig als eigene Position ergänzt.</div>}
        {p?.maxKanal && <div className="mt-2 rounded-lg border p-3" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
          <div className="flex items-end gap-3 flex-wrap">
            <Field label="Sprachkanäle" className="w-36">
              <select className={ctl} value={r.kanal} onChange={e => patchRow(g.id, r.id, { kanal: Number(e.target.value) })}>
                {KANAL_STEPS.filter(s => s <= p.maxKanal).map(s => <option key={s} value={s}>{s}</option>)}
              </select>
            </Field>
            <div className="text-[11px] text-gray-500 mb-2">max. {p.maxKanal} Kanäle für diese Anbindung</div>
          </div>
          {r.kanal > 0 && <div className="mt-3 grid grid-cols-1 md:grid-cols-2 gap-3">
            {RICHTUNGEN.map(dir => {
              const t = (r.kanalTarife && r.kanalTarife[dir.key]) || { mode: "standard", min: 0 };
              const setT = (patch) => patchRow(g.id, r.id, { kanalTarife: { ...(r.kanalTarife || blankKanalTarife()), [dir.key]: { ...t, ...patch } } });
              return (
                <div key={dir.key} className="rounded-lg border border-gray-200 bg-white p-2.5">
                  <div className="text-sm font-semibold mb-1.5" style={{ color: TEF_BLUE }}>{dir.label}</div>
                  <select className={ctl} value={t.mode} onChange={e => setT({ mode: e.target.value })}>
                    <option value="standard">Standard (kostenlos)</option>
                    <option value="fairuse">Fair Use</option>
                    <option value="pooling">Pooling</option>
                  </select>
                  {t.mode === "fairuse" && <div className="text-[11px] text-gray-500 mt-1">+{eur(dir.fair)} je Sprachkanal</div>}
                  {t.mode === "pooling" && <div className="mt-2 flex items-end gap-2">
                    <Field label="Minuten" className="w-28"><input type="number" min="0" className={ctl} value={t.min} onChange={e => setT({ min: Number(e.target.value) || 0 })} /></Field>
                    <div className="text-[11px] text-gray-500 mb-2">{dir.poolCt.toLocaleString("de-DE")} ct/Min</div>
                  </div>}
                </div>
              );
            })}
          </div>}
        </div>}
        {p?.mengenBezug === "nebenstellen" && <div className="mt-2 text-xs text-gray-600 bg-blue-50 rounded p-2 inline-block">Nebenstellen automatisch aus Basispaket + Lizenzen: <b style={{ color: TEF_BLUE }}>{totalNST}</b></div>}
        {p?.teamsCoupling && <label className="mt-2 flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!r.teamsCoupling} onChange={e => patchRow(g.id, r.id, { teamsCoupling: e.target.checked })} />Kopplung mit Microsoft Teams gewünscht <span className="text-xs text-gray-500">(+4 € je Sprachkanal)</span></label>}
        {(p?.abloese || p?.rabattType || showDarstellung) && <div className="mt-2 flex flex-wrap gap-3 items-end">
          {p?.abloese && <Field label="Ablöse" className="w-36"><select className={ctl} value={r.abloese} onChange={e => patchRow(g.id, r.id, { abloese: Number(e.target.value) })}><option value={0}>keine</option><option value={3}>3 Monate</option><option value={6}>6 Monate</option></select></Field>}
          {p?.rabattType === "fix10" && <label className="flex items-center gap-2 text-sm mb-2" style={{ color: TEF_GRAY }}><input type="checkbox" checked={r.discountFix} onChange={e => patchRow(g.id, r.id, { discountFix: e.target.checked })} />Bestandskundenrabatt 10 € / Monat</label>}
          {p?.rabattType === "staffelMax" && <Field label={`Rabatt monatlich (0–${stMax} %)`} className="w-48"><input type="number" min="0" max={stMax} className={ctl} value={r.discountPct} onChange={e => patchRow(g.id, r.id, { discountPct: Math.min(stMax, Math.max(0, Number(e.target.value) || 0)) })} /></Field>}
          {p?.rabattType === "officeMax" && <Field label={`Rabatt monatlich (0–${oMax} %)`} className="w-48"><input type="number" min="0" max={oMax} className={ctl} value={r.discountPct} onChange={e => patchRow(g.id, r.id, { discountPct: Math.min(oMax, Math.max(0, Number(e.target.value) || 0)) })} /></Field>}
          {showDarstellung && <Field label="Darstellung" className="w-52"><select className={ctl} value={r.discountMode} onChange={e => patchRow(g.id, r.id, { discountMode: e.target.value })}><option value="verrechnet">im Preis verrechnen</option><option value="zeile">als separate Zeile</option><option value="abzug">unter Preis abziehen</option></select></Field>}
        </div>}
        {p?.produkttyp === "lizenz" && (() => { const dp = dpStats(g); return (
          <div className="mt-2 rounded-lg border p-3" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
            <label className="flex items-center gap-2 text-sm font-medium" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!g.kombi} onChange={e => patchGroup(g.id, { kombi: e.target.checked })} />Kombi-Vorteil nutzen</label>
            <div className="text-xs text-gray-600 mt-2">Listenumsatz: <b style={{ color: TEF_BLUE }}>{eur(dp.umsatz)}</b> <span className="text-gray-500">({dp.bezahl} Bezahlmonate)</span> · Max. Rabatt: <b style={{ color: TEF_BLUE }}>{dp.maxPct} %</b></div>
            <div className="flex flex-wrap gap-3 items-end mt-2">
              <Field label={`Rabatt monatlich (0–${dp.maxPct} %)`} className="w-44"><input type="number" min="0" max={dp.maxPct} className={ctl} value={g.dpPct} onChange={e => patchGroup(g.id, { dpPct: Math.min(dp.maxPct, Math.max(0, Number(e.target.value) || 0)) })} /></Field>
              {Number(g.dpPct) > 0 && <Field label="Darstellung" className="w-52"><select className={ctl} value={g.dpMode} onChange={e => patchGroup(g.id, { dpMode: e.target.value })}><option value="verrechnet">im Preis verrechnen</option><option value="zeile">als separate Zeile</option><option value="abzug">unter Preis abziehen</option></select></Field>}
            </div>
            <div className="text-[11px] text-gray-500 mt-1">Gilt nur auf zusätzliche Lizenzen.</div>
          </div>
        ); })()}
        {isOpen && !isLine && <div className="mt-2 inline-flex items-center gap-1 text-amber-600 font-medium text-xs"><AlertTriangle size={13} /> Preis offen – bitte Monats-/Einmalpreis eintragen</div>}
        {isLine && r.lineProvider === "dtag" && r.lineRabatt !== "pricing" && (() => { const b = lineDtagBase(p, r); return <div className="mt-2 text-xs text-gray-600">Preisband: <b style={{ color: TEF_BLUE }}>{b.region}</b>{!r.onkz && <span className="text-gray-400"> (Standard – bitte ONKZ eingeben)</span>} · DTAG-Listenpreis: <b style={{ color: TEF_BLUE }}>{eur(b.monthly)}</b> / Monat{b.oneoff ? <> · {eur(b.oneoff)} einmalig</> : ""}{Number(r.lineRabatt) > 0 && <> · nach {r.lineRabatt}% Rabatt: <b style={{ color: TEF_BLUE }}>{eur(b.monthly * (1 - Number(r.lineRabatt) / 100))}</b> / Monat</>}</div>; })()}
        {isLine && r.lineProvider === "dtag" && r.lineRabatt === "pricing" && <div className="mt-2 text-xs text-gray-600">Preisband: <b style={{ color: TEF_BLUE }}>{onkzRegion(r.onkz)}</b> · Preisfelder mit DTAG-Listenpreis vorbefüllt, frei überschreibbar.</div>}
        {isLine && (r.lineProvider === "andere" || (r.lineProvider === "dtag" && r.lineRabatt === "pricing")) && <div className="mt-2 inline-flex items-center gap-1 text-amber-600 font-medium text-xs"><AlertTriangle size={13} /> Preis offen – bitte Monats-/Einmalpreis eintragen</div>}
        {isMobile && r.mobileRabatt !== "pricing" && (() => { const b = mobileMainBase(r); const pct = Number(r.mobileRabatt) || 0; const disc = (b.baseM + b.speedM) * (1 - pct / 100) + b.flatM; return <div className="mt-2 text-xs text-gray-600">Mobile Main: <b style={{ color: TEF_BLUE }}>{eur(b.baseM)}</b> + {b.speed.label}: <b style={{ color: TEF_BLUE }}>{eur(b.speedM)}</b> + Internet-Flat: <b style={{ color: TEF_BLUE }}>{eur(b.flatM)}</b>{pct > 0 && <> · nach {pct}% Rabatt (auf Mobile Main + Geschwindigkeit): <b style={{ color: TEF_BLUE }}>{eur(disc)}</b> / Monat</>}</div>; })()}
        {isMobile && r.mobileRabatt === "pricing" && <div className="mt-2 text-xs text-gray-600">Preisfelder mit Listenpreis (ohne Rabatt) vorbefüllt, frei überschreibbar.</div>}
        {isMobile && r.mobileRabatt === "pricing" && <div className="mt-2 inline-flex items-center gap-1 text-amber-600 font-medium text-xs"><AlertTriangle size={13} /> Preis offen – bitte Monats-/Einmalpreis eintragen</div>}
        {isMobile && mobileMainBase(r).speedUnpriced && <div className="mt-2 inline-flex items-center gap-1 text-amber-600 font-medium text-xs"><AlertTriangle size={13} /> Preis für {mobileMainBase(r).speed.label} noch nicht hinterlegt</div>}
      </div>
    );
  };

// helper: find row object by gid/rowId for preview arrows
  const findRow = (gid, rid) => {
    for (const g of groups) {
      if (g.id === gid) return { g, r: g.rows.find(x => x.id === rid) };
      if (g.area === "standort") for (const sg of g.subGroups || []) if (sg.id === gid) return { g: sg, r: sg.rows.find(x => x.id === rid) };
    }
    return null;
  };

// ===== Unterbereich-Karte innerhalb eines Standortangebots (gleiche Logik wie eine normale Bereichs-Karte) =====
  const renderSubGroupCard = (parentG, sg, sgi, totalSub) => {
    const kinds = new Set();
    for (const r of sg.rows) { const pp = getProduct(sg.area, r.productId); if (pp?.mdmKind) kinds.add(pp.mdmKind); }
    const mdmMix = kinds.has("managed") && kinds.has("unmanaged");
    return (
      <div key={sg.id} className="rounded-lg border-2 border-gray-200 overflow-hidden bg-white">
        <div className="flex flex-col md:flex-row">
          <div className="md:w-40 shrink-0 p-2.5 border-b md:border-b-0 md:border-r border-gray-200" style={{ background: "#F0F4FF" }}>
            <div className="flex items-center justify-between mb-1.5">
              <span className="text-[10px] font-bold inline-flex items-center gap-1" style={{ color: TEF_BLUE }}>
                Unterbereich {sgi + 1}
                {(() => { const n = plausibility.filter(x => x.gid === sg.id).length; const hasWarn = plausibility.some(x => x.gid === sg.id && x.level === "warn"); return n > 0 ? <span title={`${n} Hinweis(e) – siehe Plausibilitäts-Prüfung im Angebot`} className="inline-flex items-center justify-center rounded-full text-white text-[10px] font-bold w-4 h-4" style={{ background: hasWarn ? TEF_RED : TEF_BLUE }}>{n}</span> : null; })()}
              </span>
              <div className="flex items-center gap-0.5">
                <button onClick={() => moveSubGroupDir(parentG.id, sg.id, -1)} disabled={sgi <= 0} className="p-0.5 rounded hover:bg-white disabled:opacity-25" title="Unterbereich nach oben"><ChevronUp size={14} color={TEF_BLUE} /></button>
                <button onClick={() => moveSubGroupDir(parentG.id, sg.id, 1)} disabled={sgi >= totalSub - 1} className="p-0.5 rounded hover:bg-white disabled:opacity-25" title="Unterbereich nach unten"><ChevronDown size={14} color={TEF_BLUE} /></button>
              </div>
            </div>
            <label className={lbl} style={{ color: TEF_BLUE }}>Produktbereich</label>
            <select className={ctl} value={sg.area} onChange={e => setArea(sg.id, e.target.value)}>
              <option value="">— wählen —</option>
              {SUBAREAS.map(a => <option key={a.key} value={a.key}>{a.label}</option>)}
            </select>
            <div className="mt-2 flex items-center gap-2">
              <button onClick={() => duplicateSubGroup(parentG.id, sg.id)} className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-1 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }} title="Unterbereich duplizieren"><Copy size={12} /> duplizieren</button>
              <button onClick={() => removeSubGroup(parentG.id, sg.id)} className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-1 rounded hover:bg-red-50" style={{ color: TEF_RED }}><Trash2 size={12} /> entfernen</button>
            </div>
          </div>
          <div className="flex-1 min-w-0 p-3 space-y-2.5 bg-gray-50">
            {mdmMix && <div className="flex items-start gap-2 text-sm rounded p-2 border" style={{ color: TEF_RED, borderColor: TEF_RED, background: "#fdecea" }}><AlertTriangle size={15} className="mt-0.5 shrink-0" />Kein Mix aus Managed und Unmanaged möglich – bitte nur eine Variante wählen.</div>}
            {sg.area === "office365" && <div className="rounded-lg border p-2.5" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
              <label className="flex items-center gap-2 text-sm font-medium" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!sg.managed} onChange={e => patchGroup(sg.id, { managed: e.target.checked })} />Managed (Verwaltung durch Telefónica)</label>
              <div className="text-[11px] text-gray-500 mt-1">Steuert Preise & max. Rabatt aller Lizenzen. Ohne Managed-Preis wird License-Only-Preis genutzt.</div>
            </div>}
            {(sg.area === "sdwan" || sg.area === "sdwanmeraki") && <div className="rounded-lg border p-2.5" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
              <label className={lbl} style={{ color: TEF_BLUE }}>Standard-Laufzeit (Vorauswahl neuer Produkte)</label>
              <select className={ctl} value={sg.sdwanTerm || 60} onChange={e => patchGroup(sg.id, { sdwanTerm: Number(e.target.value) })}>{SDWAN_TERMS.map(t => <option key={t} value={t}>{t} Monate</option>)}</select>
              <div className="text-[11px] text-gray-500 mt-1">Neu hinzugefügte Produkte starten mit dieser Laufzeit. Je Zeile weiterhin einzeln änderbar.</div>
            </div>}
            {sg.area === "individuell" && <div className="rounded-lg border p-2.5" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
              <label className={lbl} style={{ color: TEF_BLUE }}>Produktbereich (frei)</label>
              <input className={ctl} placeholder="z. B. Professional Services" value={sg.customArea || ""} onChange={e => patchGroup(sg.id, { customArea: e.target.value })} />
              <div className="text-[11px] text-gray-500 mt-1">Erscheint im Angebot als Unter-Überschrift dieses Bereichs.</div>
            </div>}
            {!sg.area ? <p className="text-sm text-gray-400">Bitte links einen Produktbereich wählen.</p> : sg.area === "vpnconnect" ? renderVpnEditor(sg) : <>
              {sg.rows.map(r => renderRow(sg, r))}
              <button onClick={() => addRow(sg.id)} style={{ color: TEF_BLUE_2, borderColor: TEF_BLUE_2 }} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border-2 border-dashed text-sm font-semibold hover:bg-blue-50"><Plus size={15} /> Produkt hinzufügen</button>
            </>}
          </div>
        </div>
      </div>
    );
  };

// ===== Bearbeiten-Reiter =====
  const PRICE_LABELS = { m24: "Monatl. 24 Mon. (€)", m36: "Monatl. 36+ Mon. (€)", o24: "Einmalig 24 Mon. (€)", o36: "Einmalig 36+ Mon. (€)", loPrice: "Monatlich (€)", mgdPrice: "Monatl. Managed (€)" };
  const editAreas = AREAS.filter(a => (BASE_CATALOG[a.key]?.products || []).length > 0);
  const q = editSearch.trim().toLowerCase();
  const productOverridden = (key) => { const ov = overrides.products[key]; return ov && Object.keys(ov).length > 0; };
  const isDescEmpty = (areaKey, baseProd) => {
    const ov = overrides.products[`${areaKey}::${baseProd.id}`] || {};
    const desc = "desc" in ov ? ov.desc : baseProd.desc;
    return !Array.isArray(desc) || desc.length === 0;
  };

// ===== VPN Connect: ein Anschluss (Haupt oder Backup) =====
  const renderVpnConn = (g, role) => {
    const c = g[role];
    if (!c) return null;
    const term = Number(g.vpnTerm) || 36;
    const isMain = role === "main";
    const accessOpts = isMain ? ["asym", "link", "mobile", "ipsec"] : (vpnBackupOptions(g.main).map(o => o.access));
    const allowedForAccess = isMain ? null : (vpnBackupOptions(g.main).find(o => o.access === c.access));
    const bwList = c.access === "asym" ? (allowedForAccess?.bw || VPN_ASYM_BW) : c.access === "link" ? (allowedForAccess?.bw || VPN_LINK_BW) : c.access === "ipsec" ? (allowedForAccess?.bw || VPN_IPSEC_BW) : [];
    const base = vpnAccessBase(c, term), svc = vpnService(c, term, role);
    const manual = c.access === "link" && (c.provider === "andere" || c.rabatt === "pricing");
    return (
      <div className="rounded-lg border p-3" style={{ borderColor: TEF_BLUE_2, background: isMain ? "#F7FAFF" : "#FFF7F0" }}>
        <div className="text-xs font-bold mb-2" style={{ color: TEF_BLUE }}>{isMain ? "Hauptanschluss" : "Backup-Anschluss"}</div>
        <div className="flex flex-wrap gap-3 items-end">
          <Field label="Anschlussart" className="w-44"><select className={ctl} value={c.access} onChange={e => setVpnAccess(g.id, role, e.target.value)}>{accessOpts.map(a => <option key={a} value={a}>{VPN_ACCESS_LABEL[a]}</option>)}</select></Field>
          {c.access !== "mobile" && <Field label="Bandbreite" className="w-36"><select className={ctl} value={c.bw} onChange={e => patchVpnConn(g.id, role, { bw: e.target.value })}>{bwList.map(b => <option key={b} value={b}>bis {b} Mbit/s</option>)}</select></Field>}
          {c.access === "link" && <>
            <Field label="Anbindung" className="w-32"><select className={ctl} value={c.provider} onChange={e => patchVpnConn(g.id, role, { provider: e.target.value })}><option value="dtag">DTAG</option><option value="andere">Andere</option></select></Field>
            {c.provider === "dtag" && <Field label="ONKZ" className="w-28"><input className={ctl} placeholder="z. B. 0711" value={c.onkz} onChange={e => patchVpnConn(g.id, role, { onkz: e.target.value })} /></Field>}
          </>}
          {c.access === "mobile" && isMain && <Field label="Datentarif" className="w-36"><select className={ctl} value={c.dataPack} onChange={e => patchVpnConn(g.id, role, { dataPack: e.target.value })}>{Object.keys(VPN_DATAPACK_LABEL).map(k => <option key={k} value={k}>{VPN_DATAPACK_LABEL[k]}</option>)}</select></Field>}
          <Field label="Rabatt" className="w-32"><select className={ctl} value={c.rabatt} onChange={e => patchVpnConn(g.id, role, { rabatt: e.target.value })}>
            <option value="0">0 %</option>
            {c.access === "link" && <><option value="10">10 %</option><option value="20">20 %</option><option value="30">30 %</option></>}
            <option value="pricing">Pricing</option>
          </select></Field>
          {manual && <><Field label="Monatlich (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={c.manMonthly} onChange={e => patchVpnConn(g.id, role, { manMonthly: e.target.value })} /></Field><Field label="Einmalig (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={c.manOneoff} onChange={e => patchVpnConn(g.id, role, { manOneoff: e.target.value })} /></Field></>}
          {c.access === "mobile" && <Field label="Antenne (optional)" className="w-52"><select className={ctl} value={c.antenne} onChange={e => patchVpnConn(g.id, role, { antenne: e.target.value })}><option value="">— keine —</option>{Object.entries(VPN_ANTENNE).map(([k, v]) => <option key={k} value={k}>{v.label} ({eur(v.o)})</option>)}</select></Field>}
        </div>
        <div className="mt-2 flex items-center gap-4 flex-wrap">
          {c.access === "link" && <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!c.internet} onChange={e => patchVpnConn(g.id, role, { internet: e.target.checked })} />Option Internet</label>}
          {(c.access === "asym" || c.access === "link") && <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!c.qos} onChange={e => patchVpnConn(g.id, role, { qos: e.target.checked })} />Quality of Service</label>}
        </div>
        <div className="mt-2 text-xs text-gray-600">
          Access: <b style={{ color: TEF_BLUE }}>{eur(base.monthly)}</b>/Mon. {base.oneoff ? <>· {eur(base.oneoff)} einmalig </> : ""}
          {c.access === "link" && !manual && <>· Region <b>{base.region}</b>{!c.onkz && <span className="text-gray-400"> (ONKZ eingeben)</span>} </>}
          · {c.access === "mobile" ? <>Data-Pack <b style={{ color: TEF_BLUE }}>{eur(svc.svc)}</b> + MPLS {eur(svc.mpls)}</> : <>VPN-Service <b style={{ color: TEF_BLUE }}>{eur(svc.svc)}</b></>}
          {manual && <span className="text-amber-600"> · Preis manuell</span>}
        </div>
      </div>
    );
  };

// ===== VPN Connect: kompletter Standort-Editor =====
  const renderVpnEditor = (g) => {
    const backupPossible = vpnBackupOptions(g.main).length > 0;
    const anyQos = (g.main?.qos && (g.main.access === "asym" || g.main.access === "link")) || (g.backup?.qos && (g.backup.access === "asym" || g.backup.access === "link"));
    return (
      <div className="space-y-3">
        <div className="rounded-lg border p-3 flex flex-wrap gap-3 items-end" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
          <Field label="Standortname" className="grow min-w-[200px]"><input className={ctl} placeholder="z. B. Werk Kirchheim" value={g.vpnName || ""} onChange={e => patchGroup(g.id, { vpnName: e.target.value })} /></Field>
          <Field label="Laufzeit (bereichsweit)" className="w-44"><select className={ctl} value={g.vpnTerm || 36} onChange={e => setVpnTerm(Number(e.target.value))}>{VPN_TERMS.map(t => <option key={t} value={t}>{t} Monate</option>)}</select></Field>
        </div>
        {renderVpnConn(g, "main")}
        {g.backup ? <div className="space-y-2">
          {renderVpnConn(g, "backup")}
          <button onClick={() => toggleVpnBackup(g.id)} className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-1 rounded hover:bg-red-50" style={{ color: TEF_RED }}><Trash2 size={12} /> Backup-Anschluss entfernen</button>
        </div> : backupPossible ? (
          <button onClick={() => toggleVpnBackup(g.id)} style={{ color: TEF_BLUE_2, borderColor: TEF_BLUE_2 }} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border-2 border-dashed text-sm font-semibold hover:bg-blue-50"><Plus size={15} /> Backup-Anschluss hinzufügen</button>
        ) : <div className="text-xs text-gray-500 inline-flex items-center gap-1"><AlertTriangle size={12} /> Für die gewählte Hauptanschlussart ist laut Backup-Matrix kein Backup vorgesehen.</div>}
        <div className="rounded-lg border p-3" style={{ borderColor: "#e5e7eb" }}>
          <div className="text-xs font-bold mb-2" style={{ color: TEF_BLUE }}>Weitere Optionen (Standort)</div>
          <div className="flex flex-col gap-2">
            {g.backup && g.backup.access && <div className="flex items-center gap-3 flex-wrap">
              <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!g.backupPlus} onChange={e => patchGroup(g.id, { backupPlus: e.target.checked })} />Backup-Variante ++ (Redundanz über zwei Router, kostenfrei)</label>
              {g.backupPlus && <><Field label="Monatlich (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={g.bpM} onChange={e => patchGroup(g.id, { bpM: e.target.value })} /></Field><Field label="Einmalig (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={g.bpO} onChange={e => patchGroup(g.id, { bpO: e.target.value })} /></Field></>}
            </div>}
            <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!g.netflow} onChange={e => patchGroup(g.id, { netflow: e.target.checked })} />NetFlow ({eur(optPrice("vpn_netflow_o"))} einmalig)</label>
            <label className={"flex items-center gap-2 text-sm " + (anyQos ? "" : "opacity-40")} style={{ color: TEF_GRAY }}><input type="checkbox" disabled={!anyQos} checked={!!g.citrix && anyQos} onChange={e => patchGroup(g.id, { citrix: e.target.checked })} />Citrix Priorisierung ({eur(optPrice("vpn_citrix_o"))} einmalig){!anyQos && <span className="text-[11px] text-gray-400">– nur mit Quality of Service an einem Anschluss</span>}</label>
            <div className="flex items-center gap-3 flex-wrap">
              <label className="flex items-center gap-2 text-sm" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!g.advHw} onChange={e => patchGroup(g.id, { advHw: e.target.checked })} />Advanced Hardware (Aufpreis manuell)</label>
              {g.advHw && <><Field label="Monatlich (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={g.advHwM} onChange={e => patchGroup(g.id, { advHwM: e.target.value })} /></Field><Field label="Einmalig (€)" className="w-32"><input type="number" step="0.01" className={ctl} value={g.advHwO} onChange={e => patchGroup(g.id, { advHwO: e.target.value })} /></Field></>}
            </div>
          </div>
        </div>
      </div>
    );
  };

// ===== Standort-Import (CSV/Text, eine Spalte) =====
  const parseImportText = (text) => {
    const lines = (text || "").split(/\r?\n/);
    let names = lines.map(l => (l.split(/[;,\t]/)[0] || "").trim()).filter(Boolean);
    if (names.length && /^(standort|standorte|name|site|sites|filiale|filialen|location|standortname)$/i.test(names[0])) names = names.slice(1);
    return names;
  };
  const importSites = parseImportText(importText);
  const onImportFile = (e) => { const f = e.target.files?.[0]; if (!f) return; const rd = new FileReader(); rd.onload = () => { setImportText(String(rd.result || "")); setImportMsg(""); }; rd.readAsText(f); e.target.value = ""; };
  const [importBusy, setImportBusy] = useState(false);
  const onImportWorkbook = (e) => {
    const f = e.target.files?.[0]; if (!f) return; setImportBusy(true);
    const rd = new FileReader();
    rd.onload = () => {
      try {
        const wb = XLSX.read(rd.result, { type: "array" });
        const { groups: g, count } = parseImportWorkbook(wb);
        if (!g.length) { setImportMsg("Keine ausgefüllten Produktzeilen in der Excel-Vorlage gefunden. Bitte in den Bereichsblättern Produkte auswählen."); setImportBusy(false); return; }
        setGroups(g);
        const sites = new Set(); for (const grp of g) { if (grp.area === "vpnconnect") sites.add((grp.vpnName || "").trim()); else for (const r of (grp.rows || [])) sites.add((r.standort || "").trim()); }
        const nSites = [...sites].filter(Boolean).length;
        setImportMsg(`${count} Position(en) aus ${g.length} Bereich(en) importiert${nSites ? `, ${nSites} Standort(e) erkannt` : ""}. Tipp: Mit der Checkbox „Standortangebot" neben dem Kundennamen in ein Standortangebot umwandeln.`);
        setImportBusy(false); setTab("calc");
      } catch (err) { setImportMsg("Die Datei konnte nicht gelesen werden. Bitte die unveränderte Excel-Vorlage verwenden (.xlsx)."); setImportBusy(false); }
    };
    rd.onerror = () => { setImportMsg("Datei konnte nicht geladen werden."); setImportBusy(false); };
    rd.readAsArrayBuffer(f); e.target.value = "";
  };
  const wbImportRef = useRef(null);
  const downloadTemplate = () => {
    try {
      const bin = atob(TEMPLATE_XLSX_B64);
      const bytes = new Uint8Array(bin.length);
      for (let i = 0; i < bin.length; i++) bytes[i] = bin.charCodeAt(i);
      const blob = new Blob([bytes], { type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" });
      const url = URL.createObjectURL(blob);
      const a = document.createElement("a"); a.href = url; a.download = "TEF-Kalkulator-Import-Vorlage.xlsx";
      document.body.appendChild(a); a.click(); document.body.removeChild(a);
      setTimeout(() => URL.revokeObjectURL(url), 1500);
    } catch { alert("Vorlage konnte nicht heruntergeladen werden."); }
  };
  const applySiteName = (g, site) => {
    if (g.area === "vpnconnect") { g.vpnName = site; return; }
    if (g.area === "standort") { g.standortName = site; (g.subGroups || []).forEach(sg => applySiteName(sg, site)); return; }
    (g.rows || []).forEach(r => { r.standort = site; });
  };
  const doImportSites = () => {
    const sites = importSites;
    if (!sites.length) { setImportMsg("Keine Standorte erkannt – bitte eine Liste einfügen oder Datei hochladen (ein Standort je Zeile)."); return; }
    const template = groups.filter(g => g.area);
    let result = [];
    if (importAsStandort) {
      let subTemplate = [];
      for (const g of template) { if (g.area === "standort") subTemplate.push(...(g.subGroups || [])); else subTemplate.push(g); }
      subTemplate = subTemplate.filter(sg => sg.area);
      for (const site of sites) {
        const subs = subTemplate.length
          ? subTemplate.map(t => { const c = reidGroup(JSON.parse(JSON.stringify({ ...t, standortName: "" }))); return c; })
          : [newGroup()];
        result.push({ ...newGroup(), area: "standort", rows: [], standortName: site, subGroups: subs });
      }
    } else {
      if (!template.length) { setImportMsg("Für den Modus Vervielfachen bitte zuerst im Kalkulator ein Produkt anlegen, das je Standort kopiert werden soll."); return; }
      for (const site of sites) for (const t of template) { const c = reidGroup(JSON.parse(JSON.stringify(t))); applySiteName(c, site); result.push(c); }
    }
    if (!result.length) result = [newGroup()];
    setGroups(result);
    setImportMsg(`${sites.length} Standort(e) angelegt${importAsStandort ? " (als Standortangebote)" : " (vervielfacht)"}.`);
    setTab("calc");
  };

const renderImport = () => {
    const tplCount = groups.filter(g => g.area).length;
    return (
      <div className="bg-white rounded-b-xl shadow-sm p-5 md:p-7">
        <div className="mb-6 rounded-xl border-2 p-5" style={{ borderColor: TEF_BLUE_2, background: "#F7FAFF" }}>
          <h2 style={{ color: TEF_BLUE }} className="font-bold text-lg mb-1">Komplettes Angebot aus Excel-Vorlage importieren</h2>
          <p className="text-sm text-gray-600 mb-4 max-w-3xl">Lade die ausgefüllte <b>Excel-Import-Vorlage</b> hoch. Jedes Tabellenblatt steht für einen Produktbereich; je Zeile wählst du Standort, Produkt, Laufzeit, Menge und Optionen per Dropdown. Der Kalkulator erstellt daraus das fertige Angebot – die Excel enthält bewusst keine Preise/Berechnungen.</p>
          <input ref={wbImportRef} type="file" accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" onChange={onImportWorkbook} style={{ display: "none" }} />
          <div className="flex flex-wrap items-center gap-3">
            <button onClick={() => wbImportRef.current?.click()} disabled={importBusy} className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg text-white text-sm font-semibold disabled:opacity-50" style={{ background: TEF_BLUE }}><Upload size={16} /> {importBusy ? "Wird gelesen…" : "Excel-Vorlage hochladen (.xlsx)"}</button>
            <span className="text-xs text-gray-500">Bis zu 1.000 Standorte je Produktbereich. Danach per Checkbox „Standortangebot" umwandelbar.</span>
          </div>
          <p className="text-[11px] text-gray-500 mt-3">Du hast die Vorlage noch nicht? <button onClick={downloadTemplate} className="font-semibold underline hover:no-underline" style={{ color: TEF_BLUE }}>TEF-Kalkulator-Import-Vorlage.xlsx herunterladen</button> – einfach ausfüllen und hier wieder hochladen.</p>
        </div>

<h2 style={{ color: TEF_BLUE }} className="font-bold text-lg mb-1">Standorte importieren (nur Namensliste)</h2>
        <p className="text-sm text-gray-600 mb-5 max-w-3xl">Alternativ: Lade eine CSV-/Text-Datei mit <b>einer Spalte</b> hoch (ein Standort je Zeile) oder füge die Liste direkt ein. Die im Reiter „Kalkulator" angelegte Konfiguration dient als <b>Vorlage</b> und wird je Standort vervielfältigt.</p>
        <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
          <div>
            <label style={{ color: TEF_BLUE }} className={lbl}>Datei (CSV / TXT / TSV)</label>
            <input type="file" accept=".csv,.txt,.tsv,text/csv,text/plain" onChange={onImportFile} className="block w-full text-sm mb-3 file:mr-3 file:px-3 file:py-1.5 file:rounded file:border-0 file:text-white file:text-sm file:cursor-pointer" style={{ }} />
            <label style={{ color: TEF_BLUE }} className={lbl}>… oder Liste einfügen (ein Standort je Zeile)</label>
            <textarea className={ctl + " min-h-[160px] resize-y font-mono text-sm"} placeholder={"Werk Kirchheim\nFiliale Stuttgart\nLogistik Ulm"} value={importText} onChange={e => { setImportText(e.target.value); setImportMsg(""); }} />
          </div>
          <div>
            <label style={{ color: TEF_BLUE }} className={lbl}>Erkannte Standorte ({importSites.length})</label>
            <div className="rounded-lg border border-gray-200 p-2 min-h-[160px] max-h-[260px] overflow-auto bg-gray-50">
              {importSites.length === 0 ? <p className="text-sm text-gray-400 p-2">Noch keine Standorte erkannt.</p>
                : <ol className="list-decimal list-inside text-sm space-y-0.5">{importSites.map((s, i) => <li key={i} style={{ color: TEF_GRAY }}>{s}</li>)}</ol>}
            </div>
          </div>
        </div>

<div className="mt-5 rounded-lg border p-4" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
          <label className="flex items-center gap-2 text-sm font-semibold mb-2" style={{ color: TEF_GRAY }}>
            <input type="checkbox" checked={importAsStandort} onChange={e => setImportAsStandort(e.target.checked)} />
            Als Standortangebote anlegen
          </label>
          {importAsStandort
            ? <p className="text-xs text-gray-600">Je Standort wird ein <b>Standortangebot</b> mit dem Standortnamen angelegt. Die aktuellen Bereiche der Vorlage ({tplCount}) werden als <b>Unterbereiche</b> in jedes Standortangebot kopiert. Ideal für komplexe Vernetzungs-Konstrukte (z. B. je Standort All IP + SD-WAN + VPN-Backup).</p>
            : <p className="text-xs text-gray-600">Die aktuellen Bereiche/Produkte der Vorlage ({tplCount}) werden je Standort <b>kopiert</b>; der Standortname wird in das <b>Standort-Feld</b> jeder Zeile (bzw. den Namen bei VPN) eingetragen. Ideal, um <b>ein</b> Produkt mehrfach auszuweisen (z. B. 6× All IP Business mit Mobilfunk-Backup).</p>}
          <p className="text-[11px] text-amber-700 mt-2"><b>Achtung:</b> Der Import <b>ersetzt</b> die aktuelle Angebotsstruktur durch die vervielfältigte Vorlage.</p>
        </div>

{tplCount === 0 && <div className="mt-3 text-xs text-amber-700 inline-flex items-center gap-1"><AlertTriangle size={13} /> Aktuell ist keine Vorlage angelegt. {importAsStandort ? "Es werden leere Standortangebote erstellt, die du danach befüllst." : "Bitte zuerst im Kalkulator ein Produkt anlegen."}</div>}

<div className="mt-5 flex items-center gap-3">
          <button onClick={doImportSites} disabled={importSites.length === 0} style={{ background: TEF_BLUE }} className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white text-sm font-semibold disabled:opacity-40"><Upload size={16} /> {importSites.length || 0} Standort(e) anlegen</button>
          {importMsg && <span className="text-sm" style={{ color: TEF_BLUE }}>{importMsg}</span>}
        </div>
      </div>
    );
  };

return (
      <div className="bg-white rounded-b-xl shadow-sm p-5 md:p-7">
        <div className="flex items-start justify-between gap-3 flex-wrap mb-4">
          <div>
            <h2 style={{ color: TEF_BLUE }} className="font-bold text-lg">Produkte & Texte bearbeiten</h2>
            <p className="text-xs text-gray-500 mt-0.5">Änderungen gelten dauerhaft für diesen Kalkulator und werden automatisch gespeichert. Preisänderungen wirken sofort – auch auf bereits platzierte Produkte.</p>
          </div>
          <div className="flex items-center gap-2 flex-wrap">
            <button onClick={() => cfgRef.current?.click()} className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border text-xs font-semibold hover:bg-blue-50" style={{ color: TEF_BLUE, borderColor: TEF_BLUE }}><Upload size={14} /> Konfig importieren</button>
            <button onClick={exportConfig} className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border text-xs font-semibold hover:bg-blue-50" style={{ color: TEF_BLUE, borderColor: TEF_BLUE }}><Download size={14} /> Konfig exportieren</button>
            <button onClick={resetAllOverrides} className="inline-flex items-center gap-1.5 px-3 py-2 rounded-lg border text-xs font-semibold hover:bg-red-50" style={{ color: TEF_RED, borderColor: TEF_RED }}><RotateCcw size={14} /> Alles zurücksetzen</button>
          </div>
        </div>
        {cfgStatus && <div className="mb-3 text-xs font-medium" style={{ color: TEF_BLUE }}>{cfgStatus}</div>}

<div className="flex items-end gap-3 flex-wrap mb-5 p-3 rounded-lg" style={{ background: "#EEF2FF" }}>
          <Field label="Suche" className="grow min-w-[220px]">
            <div className="relative">
              <Search size={15} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
              <input className={ctl + " pl-8"} placeholder="Produktname, ID oder Optionstext …" value={editSearch} onChange={e => setEditSearch(e.target.value)} />
            </div>
          </Field>
          <Field label="Bereich" className="w-56">
            <select className={ctl} value={editArea} onChange={e => setEditArea(e.target.value)}>
              <option value="all">Alle Bereiche</option>
              {editAreas.map(a => <option key={a.key} value={a.key}>{a.label}</option>)}
              <option value="vpnconnect">VPN Connect</option>
              <option value="opts">Nur Optionen & Tarife</option>
            </select>
          </Field>
          <label className="flex items-center gap-2 text-sm mb-2" style={{ color: TEF_GRAY }}><input type="checkbox" checked={editChangedOnly} onChange={e => setEditChangedOnly(e.target.checked)} />nur geänderte</label>
          <label className="flex items-center gap-2 text-sm mb-2" style={{ color: TEF_GRAY }}><input type="checkbox" checked={editEmptyOnly} onChange={e => { editPinned.current = new Set(); setEditEmptyOnly(e.target.checked); }} />nur leere</label>
        </div>

{editArea !== "opts" && editArea !== "vpnconnect" && (productCount === 0
          ? <p className="text-sm text-gray-400 mb-6">Keine Produkte für diese Suche/Filter.</p>
          : areaBlocks)}

{(editArea === "all" || editArea === "vpnconnect") && !hasFilter && (() => {
          const vd = resolveVpnDesc(overrides.vpnDesc);
          const slot = (key, label) => (
            <div key={key} className="rounded-lg border bg-white p-3" style={{ borderColor: TEF_BLUE_2 }}>
              <div className="text-[11px] font-semibold mb-1" style={{ color: TEF_BLUE }}>{label}</div>
              <textarea className={ctl + " min-h-[60px] resize-y"} value={(vd[key] || []).join("\n")} onChange={e => setVpnDescField(key, e.target.value)} placeholder="eine Zeile je Stichpunkt · leer = keine" />
            </div>
          );
          return (
            <div className="mb-5">
              <h3 className="text-sm font-bold mb-2 pt-2 border-t flex items-center justify-between" style={{ color: TEF_BLUE }}>
                <span>VPN Connect – Beschreibungen</span>
                <button onClick={resetVpnDesc} className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-1 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }}><RotateCcw size={12} /> zurücksetzen</button>
              </h3>
              <p className="text-[11px] text-gray-500 mb-2">Bereichsweite Texte erscheinen als Überschrift jedes VPN-Standorts; je Zugangsart erscheinen sie an der jeweiligen Anschlusszeile im Angebot.</p>
              <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
                {slot("area", "Bereichsweit (z. B. Hardware inklusive, Gemanaged durch Telefónica)")}
                {slot("asym", "Asymmetrisch")}
                {slot("link", "Link Symmetrisch")}
                {slot("mobile", "Mobilfunk")}
                {slot("ipsec", "IPSec")}
              </div>
            </div>
          );
        })()}

{showOpts && optsChanged.length > 0 && <div className="mb-2">
          <h3 className="text-sm font-bold mb-2 pt-2 border-t" style={{ color: TEF_BLUE }}>Optionen & Tarife</h3>
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-3">
            {optsChanged.map(o => {
              const isLines = o.type === "lines";
              const cur = o.key in overrides.opts ? overrides.opts[o.key] : OPT_DEFAULTS[o.key];
              const changed = o.key in overrides.opts;
              return (
                <div key={o.key} className="rounded-lg border bg-white p-3" style={{ borderColor: changed ? TEF_BLUE_2 : "#e5e7eb" }}>
                  <div className="flex items-center justify-between gap-2 mb-1.5">
                    <div className="text-xs font-semibold" style={{ color: TEF_BLUE }}>{o.label}</div>
                    <div className="flex items-center gap-2">
                      {changed && <span className="text-[10px] font-bold px-2 py-0.5 rounded-full" style={{ color: "#fff", background: TEF_BLUE_2 }}>geändert</span>}
                      {changed && <button onClick={() => resetOpt(o.key)} className="inline-flex items-center gap-1 text-[11px] font-medium px-2 py-1 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }}><RotateCcw size={12} /> zurücksetzen</button>}
                    </div>
                  </div>
                  {isLines
                    ? <textarea className={ctl + " min-h-[80px] resize-y"} value={(cur || []).join("\n")} onChange={e => setOptField(o.key, e.target.value.split("\n"))} />
                    : <input className={ctl} value={cur || ""} onChange={e => setOptField(o.key, e.target.value)} />}
                </div>
              );
            })}
          </div>
        </div>}

{showOpts && (() => {
          const PRICE_SCHEMA = [
            { key: "basic_kanal2", label: "2. Sprachkanal (€/Monat)" },
            { key: "basic_router_dsl_1", label: "Router DSL Option 1 – Aufpreis (€/Monat)" },
            { key: "basic_router_dsl_2", label: "Router DSL Option 2 – Aufpreis (€/Monat)" },
            { key: "basic_router_cable_1", label: "Router Cable Option 1 – Aufpreis (€/Monat)" },
            { key: "basic_router_cable_2", label: "Router Cable Option 2 – Aufpreis (€/Monat)" },
            { key: "basic_router_fiber_1", label: "Router Fiber Option 1 – Aufpreis (€/Monat)" },
            { key: "basic_router_fiber_2", label: "Router Fiber Option 2 – Aufpreis (€/Monat)" },
            { key: "basic_router_fiber_3", label: "Router Fiber Option 3 – Aufpreis (€/Monat)" },
            { key: "basic_euplus_24", label: "Fair Use EU Plus – 24 Mon. (€/Monat)" },
            { key: "basic_euplus_36", label: "Fair Use EU Plus – 36+ Mon. (€/Monat)" },
            { key: "basic_worldselect_24", label: "Fair Use World Select – 24 Mon. (€/Monat)" },
            { key: "basic_worldselect_36", label: "Fair Use World Select – 36+ Mon. (€/Monat)" },
          ].filter(o => !q || o.label.toLowerCase().includes(q) || o.key.toLowerCase().includes(q));
          const shown = editChangedOnly ? PRICE_SCHEMA.filter(o => o.key in (overrides.optPrices || {})) : PRICE_SCHEMA;
          if (!shown.length) return null;
          return (
            <div className="mb-2">
              <h3 className="text-sm font-bold mb-2 pt-2 border-t" style={{ color: TEF_BLUE }}>All IP Basic – Optionspreise</h3>
              <p className="text-[11px] text-gray-500 mb-2">Beschreibungen dieser Optionen findest du oben unter „Optionen & Tarife" (EU Plus / World Select / Router-Namen / Sprachkanal-Texte).</p>
              <div className="grid grid-cols-2 md:grid-cols-4 gap-3">
                {shown.map(o => {
                  const changed = o.key in (overrides.optPrices || {});
                  const val = changed ? overrides.optPrices[o.key] : OPTPRICE_DEFAULTS[o.key];
                  return (
                    <div key={o.key} className="rounded-lg border bg-white p-3" style={{ borderColor: changed ? TEF_BLUE_2 : "#e5e7eb" }}>
                      <div className="flex items-center justify-between gap-1 mb-1.5">
                        <div className="text-[11px] font-semibold leading-tight" style={{ color: TEF_BLUE }}>{o.label}</div>
                        {changed && <button onClick={() => resetOptPrice(o.key)} className="shrink-0 inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }}><RotateCcw size={11} /></button>}
                      </div>
                      <input type="number" step="0.01" className={ctl} value={val ?? ""} onChange={e => setOptPrice(o.key, e.target.value)} />
                    </div>
                  );
                })}
              </div>
            </div>
          );
        })()}

{(() => {
          const priceCard = (key, label) => {
            if (q && !label.toLowerCase().includes(q) && !key.toLowerCase().includes(q)) return null;
            const changed = key in (overrides.optPrices || {});
            if (editChangedOnly && !changed) return null;
            const val = changed ? overrides.optPrices[key] : OPTPRICE_DEFAULTS[key];
            return (
              <div key={key} className="rounded-lg border bg-white p-3" style={{ borderColor: changed ? TEF_BLUE_2 : "#e5e7eb" }}>
                <div className="flex items-center justify-between gap-1 mb-1.5">
                  <div className="text-[11px] font-semibold leading-tight" style={{ color: TEF_BLUE }}>{label}</div>
                  {changed && <button onClick={() => resetOptPrice(key)} className="shrink-0 inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }}><RotateCcw size={11} /></button>}
                </div>
                <input type="number" step="0.01" className={ctl} value={val ?? ""} onChange={e => setOptPrice(key, e.target.value)} />
              </div>
            );
          };
          const tableCard = (key, label, terms) => {
            if (q && !label.toLowerCase().includes(q) && !key.toLowerCase().includes(q)) return null;
            const changed = key in (overrides.optTables || {});
            if (editChangedOnly && !changed) return null;
            const tbl = optTable(key);
            return (
              <div key={key} className="rounded-lg border bg-white p-3" style={{ borderColor: changed ? TEF_BLUE_2 : "#e5e7eb" }}>
                <div className="flex items-center justify-between gap-1 mb-1.5">
                  <div className="text-[11px] font-semibold leading-tight" style={{ color: TEF_BLUE }}>{label}</div>
                  {changed && <button onClick={() => resetOptTable(key)} className="shrink-0 inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }}><RotateCcw size={11} /></button>}
                </div>
                <div className="grid gap-1.5" style={{ gridTemplateColumns: `repeat(${terms.length}, minmax(0,1fr))` }}>
                  {terms.map(t => (
                    <div key={t}>
                      <div className="text-[10px] text-gray-400 mb-0.5">{t} Mon.</div>
                      <input type="number" step="0.01" className={ctl} value={tbl[t] ?? ""} onChange={e => setOptTableCell(key, t, e.target.value)} />
                    </div>
                  ))}
                </div>
              </div>
            );
          };

// ===== SD-WAN: Pauschalen, Aufschläge, Redundanz-Nachlässe =====
          const sdwanTableCards = [
            tableCard("sdwan_red_fortinet_sdwan", "Fortinet – Redundanz-Nachlass · SD-WAN (€/Monat)", SDWAN_TERMS),
            tableCard("sdwan_red_fortinet_atp", "Fortinet – Redundanz-Nachlass · Basic Security (€/Monat)", SDWAN_TERMS),
            tableCard("sdwan_red_fortinet_utp", "Fortinet – Redundanz-Nachlass · Advanced Security (€/Monat)", SDWAN_TERMS),
            tableCard("sdwan_red_meraki_sdwan", "Meraki – Redundanz-Nachlass · SD-WAN (€/Monat)", SDWAN_TERMS),
            tableCard("sdwan_red_meraki_atp", "Meraki – Redundanz-Nachlass · Basic Security (€/Monat)", SDWAN_TERMS),
            tableCard("sdwan_red_meraki_utp", "Meraki – Redundanz-Nachlass · Advanced Security (€/Monat)", SDWAN_TERMS),
            tableCard("sdwan_einr_router", "Einrichtung SD-WAN-Service – Router/VM (€ einmalig je Stück)", SDWAN_TERMS),
            tableCard("sdwan_einr_apsw", "Einrichtung SD-WAN-Service – Access Point/Switch (€ einmalig je Stück)", SDWAN_TERMS),
          ].filter(Boolean);
          const sdwanPriceCards = [
            priceCard("sdwan_remote_setup", "Remote-User – Einrichtung je 25er-Paket (€ einmalig)"),
            priceCard("sdwan_install_per_device", "Vor-Ort-Installation je Gerät (€ einmalig)"),
            priceCard("sdwan_ad_oneoff", "AD-Anbindung je Standort (€ einmalig)"),
            priceCard("sdwan_project_tier1", "Projektkosten 2–4 Standorte (€ einmalig)"),
            priceCard("sdwan_project_tier2", "Projektkosten 5–10 Standorte (€ einmalig)"),
          ].filter(Boolean);
          const sdwanSection = (sdwanTableCards.length > 0 || sdwanPriceCards.length > 0) && (
            <div className="mb-2">
              <h3 className="text-sm font-bold mb-2 pt-2 border-t" style={{ color: TEF_BLUE }}>SD-WAN – Pauschalen & Aufschläge (Fortinet + Meraki)</h3>
              <p className="text-[11px] text-gray-500 mb-2">Geräte-Einzelpreise (je Modell/Lizenztyp) bearbeitest du direkt am jeweiligen Produkt unter „SD-WAN Fortinet" / „SD-WAN Meraki" weiter oben.</p>
              {sdwanTableCards.length > 0 && <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">{sdwanTableCards}</div>}
              {sdwanPriceCards.length > 0 && <div className="grid grid-cols-2 md:grid-cols-4 gap-3">{sdwanPriceCards}</div>}
            </div>
          );

// ===== VPN Connect: kompletter Preiskatalog =====
          const vpnBwLabel = { "1": "bis 1", "2": "bis 2", "4": "bis 4", "6": "bis 6", "10": "bis 10", "16": "bis 16", "20": "bis 20", "25": "bis 25", "50": "bis 50", "100": "bis 100", "175": "bis 175", "200": "bis 200", "250": "bis 250", "500": "bis 500", "1000": "bis 1.000" };
          const vpnAccessCards = [
            tableCard("vpn_asym_low", "Asymmetrisch – niedrige Bandbreite (bis 100 Mbit/s, €/Monat)", VPN_TERMS),
            tableCard("vpn_asym_high", "Asymmetrisch – hohe Bandbreite (175/250 Mbit/s, €/Monat)", VPN_TERMS),
            tableCard("vpn_asym_oneoff", "Asymmetrisch – Einmalkosten (€)", VPN_TERMS),
            tableCard("vpn_mobile_m", "Mobilfunk – Grundpreis (€/Monat)", VPN_TERMS),
            tableCard("vpn_mobile_oneoff", "Mobilfunk – Einmalkosten (€)", VPN_TERMS),
            tableCard("vpn_ipsec_oneoff", "IPSec – Einmalkosten (€)", VPN_TERMS),
            tableCard("vpn_link_oneoff", "Link Symmetrisch – Einmalkosten (€)", VPN_TERMS),
          ].filter(Boolean);
          const vpnLinkCards = (region) => VPN_LINK_BW.map(bw => tableCard(`vpn_link_${region}_${bw}`, `Link ${region[0].toUpperCase() + region.slice(1)} – ${vpnBwLabel[bw] || bw} Mbit/s (€/Monat)`, VPN_TERMS)).filter(Boolean);
          const vpnLinkMetro = vpnLinkCards("metro"), vpnLinkRegio = vpnLinkCards("regio"), vpnLinkCountry = vpnLinkCards("country");
          const vpnSvcCards = [
            tableCard("vpn_svc_low", "Service-Pauschale – niedrige Bandbreite (€/Monat)", VPN_TERMS),
            tableCard("vpn_svc_high", "Service-Pauschale – hohe Bandbreite/Link (€/Monat)", VPN_TERMS),
            tableCard("vpn_svc_backup", "Service-Pauschale – Mobilfunk-Backup (€/Monat)", VPN_TERMS),
          ].filter(Boolean);
          const vpnDatapackCards = [
            tableCard("vpn_datapack_1g", `Datenpaket – ${VPN_DATAPACK_LABEL["1g"]} (€/Monat)`, VPN_TERMS),
            tableCard("vpn_datapack_5g", `Datenpaket – ${VPN_DATAPACK_LABEL["5g"]} (€/Monat)`, VPN_TERMS),
            tableCard("vpn_datapack_10g", `Datenpaket – ${VPN_DATAPACK_LABEL["10g"]} (€/Monat)`, VPN_TERMS),
            tableCard("vpn_datapack_25g", `Datenpaket – ${VPN_DATAPACK_LABEL["25g"]} (€/Monat)`, VPN_TERMS),
            tableCard("vpn_datapack_flat", `Datenpaket – ${VPN_DATAPACK_LABEL["flat"]} (€/Monat)`, VPN_TERMS),
          ].filter(Boolean);
          const vpnQosCards = [
            tableCard("vpn_qos_low", "Quality of Service – niedrig (bis 100 Mbit/s, €/Monat)", VPN_TERMS),
            tableCard("vpn_qos_mid", "Quality of Service – mittel (bis 500 Mbit/s, €/Monat)", VPN_TERMS),
            tableCard("vpn_qos_high", "Quality of Service – hoch (über 500 Mbit/s, €/Monat)", VPN_TERMS),
            tableCard("vpn_internet_m", "Option Internet – Grundpreis (€/Monat)", VPN_TERMS),
          ].filter(Boolean);
          const vpnFlatCards = [
            priceCard("vpn_internet_o", "Option Internet – Einmalkosten (€)"),
            priceCard("vpn_citrix_o", "Option Citrix Priorisierung (€ einmalig)"),
            priceCard("vpn_netflow_o", "Option NetFlow (€ einmalig)"),
            priceCard("vpn_mpls", "MPLS-Aufschlag Mobilfunk-Datenpaket (€/Monat)"),
            priceCard("vpn_antenne_in6", "Antenne – Indoor Decke bis 6 m (€ einmalig)"),
            priceCard("vpn_antenne_in15", "Antenne – Indoor Decke bis 15 m (€ einmalig)"),
            priceCard("vpn_antenne_outmast", "Antenne – Outdoor Mast (€ einmalig)"),
            priceCard("vpn_antenne_in25", "Antenne – Indoor Decke bis 2,5 m (€ einmalig)"),
            priceCard("vpn_antenne_in5", "Antenne – Indoor Decke bis 5 m (€ einmalig)"),
          ].filter(Boolean);
          const vpnAny = vpnAccessCards.length || vpnLinkMetro.length || vpnLinkRegio.length || vpnLinkCountry.length || vpnSvcCards.length || vpnDatapackCards.length || vpnQosCards.length || vpnFlatCards.length;
          const vpnSection = vpnAny && (
            <div className="mb-2">
              <h3 className="text-sm font-bold mb-2 pt-2 border-t" style={{ color: TEF_BLUE }}>VPN Connect – Preise</h3>
              {vpnAccessCards.length > 0 && <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">{vpnAccessCards}</div>}
              {vpnLinkMetro.length > 0 && <><div className="text-[11px] font-semibold mb-1.5" style={{ color: TEF_GRAY }}>Link Symmetrisch – Metro</div><div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">{vpnLinkMetro}</div></>}
              {vpnLinkRegio.length > 0 && <><div className="text-[11px] font-semibold mb-1.5" style={{ color: TEF_GRAY }}>Link Symmetrisch – Regio</div><div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">{vpnLinkRegio}</div></>}
              {vpnLinkCountry.length > 0 && <><div className="text-[11px] font-semibold mb-1.5" style={{ color: TEF_GRAY }}>Link Symmetrisch – Country</div><div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">{vpnLinkCountry}</div></>}
              {vpnSvcCards.length > 0 && <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">{vpnSvcCards}</div>}
              {vpnDatapackCards.length > 0 && <div className="grid grid-cols-1 md:grid-cols-3 gap-3 mb-3">{vpnDatapackCards}</div>}
              {vpnQosCards.length > 0 && <div className="grid grid-cols-1 md:grid-cols-2 gap-3 mb-3">{vpnQosCards}</div>}
              {vpnFlatCards.length > 0 && <div className="grid grid-cols-2 md:grid-cols-4 gap-3">{vpnFlatCards}</div>}
            </div>
          );

return <>{sdwanSection}{vpnSection}</>;
        })()}
      </div>
    );
  };

// ===== Bearbeiten-Reiter: Ende der Optionspreis-Sektionen =====
  return (
    <div style={{ background: TEF_BG }} className="min-h-screen p-4 md:p-8">
      <input ref={fileRef} type="file" accept=".json,application/json" onChange={onLoadFile} style={{ display: "none" }} />
      <input ref={cfgRef} type="file" accept=".json,application/json" onChange={importConfig} style={{ display: "none" }} />
      <div className="max-w-6xl mx-auto">
        <div style={{ background: TEF_BLUE }} className="rounded-t-xl px-6 py-5 flex items-center justify-between gap-3 flex-wrap">
          <div className="flex items-center gap-3">
            <div style={{ background: "#fff" }} className="w-10 h-10 rounded-full flex items-center justify-center"><span style={{ color: TEF_BLUE }} className="font-black text-lg">T</span></div>
            <div><div className="text-white font-bold text-lg leading-tight">Telefónica</div><div style={{ color: TEF_CYAN }} className="text-xs font-medium">B2B Angebots-Kalkulator</div></div>
          </div>
          {tab === "calc" && <div className="flex items-center gap-2">
            <button onClick={() => fileRef.current?.click()} className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/15 text-white text-sm font-semibold hover:bg-white/25"><FolderOpen size={16} /> Öffnen</button>
            <button onClick={saveOffer} className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white text-sm font-semibold" style={{ color: TEF_BLUE }}><Save size={16} /> Speichern</button>
            <button onClick={restoreAutoSave} title="Letzten automatisch gesicherten Stand laden (alle 60 Sek. im Hintergrund gesichert)" className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/15 text-white text-sm font-semibold hover:bg-white/25"><RotateCcw size={16} /> Letzten Stand wiederherstellen</button>
            <button onClick={resetOffer} title="Kunde, alle Bereiche und Produkte entfernen" className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white/15 text-white text-sm font-semibold hover:bg-red-500/40"><Trash2 size={16} /> Leeren</button>
            {lastAutoSave && <span className="text-[11px] text-white/70 hidden lg:inline">Auto-Save {lastAutoSave.toLocaleTimeString("de-DE")}</span>}
          </div>}
        </div>

{/* ===== TAB-LEISTE ===== */}
        <div className="bg-white border-b border-gray-200 flex items-stretch">
          <button onClick={() => setTab("calc")} className="inline-flex items-center gap-2 px-5 py-3 text-sm font-semibold border-b-2" style={{ color: tab === "calc" ? TEF_BLUE : "#6b7280", borderColor: tab === "calc" ? TEF_BLUE : "transparent" }}><Calculator size={16} /> Kalkulator</button>
          <button onClick={() => setTab("edit")} className="inline-flex items-center gap-2 px-5 py-3 text-sm font-semibold border-b-2" style={{ color: tab === "edit" ? TEF_BLUE : "#6b7280", borderColor: tab === "edit" ? TEF_BLUE : "transparent" }}><Settings size={16} /> Produkte & Texte bearbeiten</button>
          <button onClick={() => setTab("import")} className="inline-flex items-center gap-2 px-5 py-3 text-sm font-semibold border-b-2" style={{ color: tab === "import" ? TEF_BLUE : "#6b7280", borderColor: tab === "import" ? TEF_BLUE : "transparent" }}><Upload size={16} /> Standorte importieren</button>
        </div>

{tab === "edit" ? renderEditor() : tab === "import" ? renderImport() : <>
        <div className="bg-white rounded-b-xl shadow-sm p-5 md:p-7">
          <div className="mb-6 flex flex-wrap gap-4 items-end">
            <div className="grow max-w-md min-w-[240px]">
              <label style={{ color: TEF_BLUE }} className={lbl}>Kunde / Angebotsempfänger</label>
              <input className={ctl} placeholder="z. B. Ramsperger Automobile GmbH" value={customer} onChange={e => setCustomer(e.target.value)} />
            </div>
            <div className="w-56">
              <label style={{ color: TEF_BLUE }} className={lbl}>Laufzeit (alle Produkte setzen)</label>
              <select className={ctl} value="" onChange={e => { const v = Number(e.target.value); if (v) setAllTerms(v); }}>
                <option value="">— wählen —</option>
                {[12, 24, 36, 48, 60].map(t => <option key={t} value={t}>{t} Monate für alle</option>)}
              </select>
            </div>
            <div className="w-72 grow max-w-sm">
              <label style={{ color: TEF_BLUE }} className={lbl}>Suchen / Filtern</label>
              <div className="relative">
                <Search size={15} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-gray-400" />
                <input className={ctl + " pl-8 pr-8"} placeholder="Standort, Produkt oder Option/Tarif …" value={searchQuery} onChange={e => setSearchQuery(e.target.value)} />
                {searchQuery && <button onClick={() => setSearchQuery("")} className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 text-base leading-none" title="Suche leeren">✕</button>}
              </div>
              {searchMatch && <div className="text-[11px] text-gray-500 mt-1">{searchHitCount} Treffer – nicht passende Bereiche sind ausgeblendet</div>}
            </div>
            <label className="flex items-center gap-2 text-sm font-medium mb-2 cursor-pointer select-none" style={{ color: TEF_BLUE }} title="Wandelt das Angebot in ein Standortangebot um – ortsgebundene Bereiche kommen unter eine Standort-Ebene, MDM/Office 365 u. a. bleiben unverändert. Erneutes Deaktivieren macht die Umwandlung rückgängig.">
              <input type="checkbox" checked={isStandortOffer} onChange={toggleStandortOffer} />
              Standortangebot
            </label>
          </div>
          {emptyStandortGids.length > 0 && <div className="mb-4 flex items-center justify-between gap-3 rounded-lg border-2 px-3 py-2 text-sm" style={{ borderColor: TEF_RED, background: "#fdecea", color: TEF_RED }}>
            <span>{emptyStandortGids.length} Standort{emptyStandortGids.length > 1 ? "e" : ""} ohne Namen – bitte eintragen, damit das Angebot eindeutig ist.</span>
            <button onClick={focusFirstEmptyStandort} className="shrink-0 px-2.5 py-1 rounded font-semibold text-white" style={{ background: TEF_RED }}>hinspringen</button>
          </div>}
          <div className="space-y-4">
            {searchMatch && groups.every(g => !groupVisible(g.id)) && (
              <div className="text-center text-sm text-gray-400 py-6 rounded-xl border-2 border-dashed border-gray-200">Keine Treffer für „{searchQuery}" – Standort, Produkt oder Option/Tarif anders eingeben oder Suche leeren.</div>
            )}
            {groups.map((g, gi) => {
              if (!groupVisible(g.id)) return null;
              const kinds = new Set();
              for (const r of g.rows) { const pp = getProduct(g.area, r.productId); if (pp?.mdmKind) kinds.add(pp.mdmKind); }
              const mdmMix = kinds.has("managed") && kinds.has("unmanaged");
              return (
                <div key={g.id} className="rounded-xl border-2 border-gray-200 overflow-hidden">
                  <div className="flex flex-col md:flex-row">
                    <div className="md:w-44 shrink-0 p-3 border-b md:border-b-0 md:border-r border-gray-200" style={{ background: "#EEF2FF" }}>
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-[11px] font-bold inline-flex items-center gap-1" style={{ color: TEF_BLUE }}>
                          Bereich {gi + 1}
                          {(() => { const n = plausibility.filter(x => x.gid === g.id).length; const hasWarn = plausibility.some(x => x.gid === g.id && x.level === "warn"); return n > 0 ? <span title={`${n} Hinweis(e) – siehe Plausibilitäts-Prüfung im Angebot`} className="inline-flex items-center justify-center rounded-full text-white text-[10px] font-bold w-4 h-4" style={{ background: hasWarn ? TEF_RED : TEF_BLUE }}>{n}</span> : null; })()}
                        </span>
                        <div className="flex items-center gap-0.5">
                          <button onClick={() => moveGroupDir(g.id, -1)} disabled={gi <= 0} className="p-1 rounded hover:bg-white disabled:opacity-25" title="Bereich nach oben"><ChevronUp size={16} color={TEF_BLUE} /></button>
                          <button onClick={() => moveGroupDir(g.id, 1)} disabled={gi >= groups.length - 1} className="p-1 rounded hover:bg-white disabled:opacity-25" title="Bereich nach unten"><ChevronDown size={16} color={TEF_BLUE} /></button>
                        </div>
                      </div>
                      <label className={lbl} style={{ color: TEF_BLUE }}>Produktbereich</label>
                      <select className={ctl} value={g.area} onChange={e => setArea(g.id, e.target.value)}>
                        <option value="">— wählen —</option>
                        {AREAS.map(a => <option key={a.key} value={a.key}>{a.label}</option>)}
                      </select>
                      <div className="mt-3 flex items-center gap-2">
                        <button onClick={() => duplicateGroup(g.id)} className="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }} title="Bereich mit allen Produkten duplizieren"><Copy size={14} /> duplizieren</button>
                        <button onClick={() => removeGroup(g.id)} className="inline-flex items-center gap-1.5 text-xs font-medium px-2 py-1 rounded hover:bg-red-50" style={{ color: TEF_RED }}><Trash2 size={14} /> entfernen</button>
                      </div>
                      <div className="mt-2 flex items-center gap-2 flex-wrap">
                        <button onClick={() => saveBaseline(g)} className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-1 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }} title="Aktuellen Stand als Vergleichsbasis sichern (z. B. vor Nachverhandlung)"><Bookmark size={12} /> Status sichern</button>
                        {baselines[g.id] && <>
                          <button onClick={() => toggleDiff(g.id)} className="inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-1 rounded hover:bg-blue-50" style={{ color: TEF_BLUE }}><GitCompare size={12} /> {diffOpen[g.id] ? "Vergleich ausblenden" : "Vergleich anzeigen"}</button>
                          <button onClick={() => clearBaseline(g.id)} className="text-[11px] text-gray-400 hover:text-gray-600" title="Gesicherten Vergleichsstand verwerfen">Baseline löschen</button>
                        </>}
                      </div>
                    </div>
                    <div className="flex-1 min-w-0 p-4 space-y-3 bg-gray-50">
                      {mdmMix && <div className="flex items-start gap-2 text-sm rounded p-2.5 border" style={{ color: TEF_RED, borderColor: TEF_RED, background: "#fdecea" }}><AlertTriangle size={16} className="mt-0.5 shrink-0" />Kein Mix aus Managed und Unmanaged möglich – bitte nur eine Variante wählen.</div>}
                      {diffOpen[g.id] && baselines[g.id] && (() => {
                        const d = buildGroupDiff(baselines[g.id], g);
                        if (!d) return null;
                        const nothing = (d.kind === "rows" && !d.added.length && !d.removed.length && !d.changed.length) || (d.kind === "standort" && !d.subDiffs.length) || (d.kind === "vpn" && !d.changes.length);
                        return (
                          <div className="rounded-lg border p-3" style={{ borderColor: TEF_BLUE_2, background: "#F7FAFF" }}>
                            <div className="text-xs font-bold mb-2 flex items-center gap-1.5" style={{ color: TEF_BLUE }}><GitCompare size={13} /> Vergleich zum gesicherten Stand</div>
                            {nothing && <div className="text-xs text-gray-400">Keine Änderungen seit der letzten Sicherung.</div>}
                            {d.kind === "rows" && <div className="space-y-1">
                              {d.added.map((a, i) => <div key={"a" + i} className="text-xs" style={{ color: "#15803d" }}>+ Hinzugefügt: {a.name}</div>)}
                              {d.removed.map((a, i) => <div key={"r" + i} className="text-xs" style={{ color: TEF_RED }}>− Entfernt: {a.name}</div>)}
                              {d.changed.map((c, i) => <div key={"c" + i} className="text-xs" style={{ color: TEF_GRAY }}>✎ {c.name}{c.changes.length ? ": " + c.changes.join(" · ") : ""}</div>)}
                            </div>}
                            {d.kind === "standort" && <div className="space-y-1.5">
                              {d.subDiffs.map((s, i) => (
                                <div key={i} className="text-xs">
                                  <span className="font-semibold" style={{ color: TEF_BLUE }}>{s.label}:</span>{" "}
                                  {s.addedSub ? <span style={{ color: "#15803d" }}>neuer Unterbereich</span> : s.removedSub ? <span style={{ color: TEF_RED }}>Unterbereich entfernt</span> : <>
                                    {(s.added || []).map((a, j) => <span key={"a" + j} className="mr-2" style={{ color: "#15803d" }}>+ {a.name}</span>)}
                                    {(s.removed || []).map((a, j) => <span key={"r" + j} className="mr-2" style={{ color: TEF_RED }}>− {a.name}</span>)}
                                    {(s.changed || []).map((c, j) => <span key={"c" + j} className="mr-2" style={{ color: TEF_GRAY }}>✎ {c.name}{c.changes.length ? " (" + c.changes.join(" · ") + ")" : ""}</span>)}
                                  </>}
                                </div>
                              ))}
                            </div>}
                            {d.kind === "vpn" && <div className="space-y-1">{d.changes.map((c, i) => <div key={i} className="text-xs" style={{ color: TEF_GRAY }}>✎ {c}</div>)}</div>}
                          </div>
                        );
                      })()}
                      {g.area === "office365" && <div className="rounded-lg border p-3" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
                        <label className="flex items-center gap-2 text-sm font-medium" style={{ color: TEF_GRAY }}><input type="checkbox" checked={!!g.managed} onChange={e => patchGroup(g.id, { managed: e.target.checked })} />Managed (Verwaltung durch Telefónica)</label>
                        <div className="text-[11px] text-gray-500 mt-1">Steuert Preise & max. Rabatt aller Lizenzen. Ohne Managed-Preis wird License-Only-Preis genutzt.</div>
                      </div>}
                      {(g.area === "sdwan" || g.area === "sdwanmeraki") && <div className="rounded-lg border p-3" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
                        <label className={lbl} style={{ color: TEF_BLUE }}>Standard-Laufzeit (Vorauswahl neuer Produkte)</label>
                        <select className={ctl} value={g.sdwanTerm || 60} onChange={e => patchGroup(g.id, { sdwanTerm: Number(e.target.value) })}>{SDWAN_TERMS.map(t => <option key={t} value={t}>{t} Monate</option>)}</select>
                        <div className="text-[11px] text-gray-500 mt-1">Neu hinzugefügte Produkte starten mit dieser Laufzeit. Je Zeile weiterhin einzeln änderbar.</div>
                      </div>}
                      {g.area === "individuell" && <div className="rounded-lg border p-3" style={{ borderColor: TEF_BLUE_2, background: "#EEF2FF" }}>
                        <label className={lbl} style={{ color: TEF_BLUE }}>Produktbereich (frei)</label>
                        <input className={ctl} placeholder="z. B. Professional Services" value={g.customArea || ""} onChange={e => patchGroup(g.id, { customArea: e.target.value })} />
                        <div className="text-[11px] text-gray-500 mt-1">Erscheint im Angebot als Überschrift dieses Bereichs.</div>
                      </div>}
                      {g.area === "standort" && <div className="rounded-lg border p-3" style={{ borderColor: !(g.standortName || "").trim() ? TEF_RED : TEF_BLUE_2, background: !(g.standortName || "").trim() ? "#fdecea" : "#EEF2FF" }}>
                        <label className={lbl} style={{ color: !(g.standortName || "").trim() ? TEF_RED : TEF_BLUE }}>Standortname {!(g.standortName || "").trim() && <span className="font-normal">– bitte eintragen</span>}</label>
                        <input ref={el => { if (el) standortNameRefs.current[g.id] = el; }} className={ctl} style={!(g.standortName || "").trim() ? { borderColor: TEF_RED, borderWidth: 2 } : undefined} placeholder="z. B. Kirchheim" value={g.standortName || ""} onChange={e => patchGroup(g.id, { standortName: e.target.value })} />
                        <div className="text-[11px] text-gray-500 mt-1">Erscheint im Angebot als gemeinsame Überschrift über allen Unterbereichen.</div>
                      </div>}
                      {g.area === "vpnconnect" ? renderVpnEditor(g) : g.area === "standort" ? <div className="space-y-3">
                        {(g.subGroups || []).filter(sg => groupVisible(sg.id)).map((sg, sgi) => renderSubGroupCard(g, sg, sgi, (g.subGroups || []).length))}
                        <button onClick={() => addSubGroup(g.id)} style={{ color: TEF_BLUE_2, borderColor: TEF_BLUE_2 }} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border-2 border-dashed text-sm font-semibold hover:bg-blue-50"><Plus size={15} /> Unterbereich hinzufügen</button>
                      </div> : !g.area ? <p className="text-sm text-gray-400">Bitte links zuerst einen Produktbereich wählen.</p> : <>
                        {g.rows.map(r => renderRow(g, r))}
                        <button onClick={() => addRow(g.id)} style={{ color: TEF_BLUE_2, borderColor: TEF_BLUE_2 }} className="inline-flex items-center gap-2 px-3 py-1.5 rounded-lg border-2 border-dashed text-sm font-semibold hover:bg-blue-50"><Plus size={15} /> Produkt hinzufügen</button>
                      </>}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <button onClick={addGroup} style={{ background: TEF_BLUE }} className="mt-4 inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white text-sm font-semibold hover:opacity-90"><Plus size={16} /> Produktbereich hinzufügen</button>
        </div>

{/* ===== VORSCHAU ===== */}
        <div className="bg-white rounded-xl shadow-sm p-5 md:p-7 mt-6">
          <div className="flex items-center justify-between mb-4 flex-wrap gap-2">
            <h2 style={{ color: TEF_BLUE }} className="font-bold text-lg">Angebot (so wird es eingefügt)</h2>
            <div className="flex items-center gap-2">
              <button onClick={saveOfferExcel} disabled={offerLines.length === 0} className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border-2 text-sm font-semibold hover:bg-blue-50 disabled:opacity-40" style={{ color: TEF_BLUE, borderColor: TEF_BLUE }} title="Aktuelles Angebot als Excel-Liste exportieren (gleiche Struktur wie die Import-Vorlage, ohne Dropdowns)"><Download size={16} /> Excel Speichern</button>
              <button onClick={saveOffer} className="inline-flex items-center gap-2 px-4 py-2.5 rounded-lg border-2 text-sm font-semibold hover:bg-blue-50" style={{ color: TEF_BLUE, borderColor: TEF_BLUE }}><Save size={16} /> Speichern</button>
              <button onClick={copyOffer} disabled={offerLines.length === 0} style={{ background: copied ? TEF_CYAN : TEF_BLUE }} className="inline-flex items-center gap-2 px-5 py-2.5 rounded-lg text-white text-sm font-semibold disabled:opacity-40">
                {copied ? <Check size={16} /> : <Copy size={16} />}{copied ? "Kopiert!" : "Für PowerPoint kopieren"}
              </button>
            </div>
          </div>
          {plausibility.length > 0 && <div className="mb-4 rounded-lg border p-3" style={{ borderColor: plausibility.some(x => x.level === "warn") ? TEF_RED : TEF_BLUE_2, background: plausibility.some(x => x.level === "warn") ? "#FFF5F5" : "#EEF2FF" }}>
            <div className="flex items-center gap-2 mb-2 text-sm font-bold" style={{ color: plausibility.some(x => x.level === "warn") ? TEF_RED : TEF_BLUE }}><AlertTriangle size={16} /> Plausibilitäts-Prüfung ({plausibility.length})</div>
            <ul className="space-y-1">
              {plausibility.map((x, i) => <li key={i} className="flex items-start gap-2 text-xs" style={{ color: TEF_GRAY }}>
                <span className="mt-0.5 inline-block w-2 h-2 rounded-full shrink-0" style={{ background: x.level === "warn" ? TEF_RED : TEF_BLUE }} />
                <span>{x.msg}</span>
              </li>)}
            </ul>
            <div className="text-[11px] text-gray-400 mt-2">Hinweise erscheinen nicht im Export.</div>
          </div>}
          {offerLines.length === 0 ? <p className="text-sm text-gray-400">Noch kein Produkt ausgewählt.</p> : (
            <div className="overflow-x-auto">
              <p style={{ color: TEF_BLUE }} className="font-bold mb-1">Angebot{customer ? " – " + customer : ""}</p>
              <p className="text-xs text-gray-500 mb-3">Stand: {today} · ▲▼ zum Sortieren · Mülleimer zum Löschen · Checkbox rechts = für PowerPoint-Kopie berücksichtigen (nicht im Export sichtbar)</p>
              <style>{`.tef-offer-table th, .tef-offer-table td { border-color: #d1d5db !important; }`}</style>
              <table className="tef-offer-table w-full border-collapse text-sm">
                <thead>
                  <tr>
                    <th style={{ background: TEF_BLUE, width: 36 }} className="border border-gray-300"></th>
                    <th style={{ background: TEF_BLUE }} className="text-white font-semibold px-3 py-2 border border-gray-300 text-left">Produkt</th>
                    <th style={{ background: TEF_BLUE }} className="text-white font-semibold px-3 py-2 border border-gray-300 text-left">Beschreibung</th>
                    <th style={{ background: TEF_BLUE }} className="text-white font-semibold px-3 py-2 border border-gray-300 text-right">Monatlich</th>
                    <th style={{ background: TEF_BLUE }} className="text-white font-semibold px-3 py-2 border border-gray-300 text-right">Einmalig</th>
                    <th style={{ background: TEF_BLUE, width: 40 }} className="border border-gray-300"></th>
                    <th style={{ background: TEF_BLUE, width: 44 }} className="border border-gray-300 text-center" title="Für PowerPoint-Kopie auswählen (nicht im Export sichtbar)">
                      <input type="checkbox" checked={allLinesChecked} onChange={toggleAllLines} title="Alle Zeilen für die Kopie an-/abwählen" />
                    </th>
                  </tr>
                </thead>
                <tbody>
                  {(() => {
                    const out = []; let currGid = null;
                    const visibleLines = offerLines.filter(l => (l.type === "cluster" || l.type === "subcluster") ? groupVisible(l.gid) : lineVisibleInSearch(l));
                    for (let i = 0; i < visibleLines.length; i++) {
                      const l = visibleLines[i], next = visibleLines[i + 1];
                      if (l.type === "cluster") {
                        currGid = l.gid;
                        const gIdx = groups.findIndex(x => x.id === l.gid);
                        const gArea = groups.find(x => x.id === l.gid)?.area;
                        const isStandort = gArea === "standort";
                        const isVpn = gArea === "vpnconnect";
                        const headerLines = headerLineGroups[l.gid] || [];
                        const headerChecked = headerLines.length > 0 && headerLines.every(x => isLineIncluded(x));
                        const toggleHeaderLines = () => setExcludedLines(prev => { const n = new Set(prev); for (const x of headerLines) { const k = lineKey(x); if (headerChecked) n.add(k); else n.delete(k); } return n; });
                        out.push(
                          <tr key={`cl-${l.gid}`} style={{ background: "#D7E0FF" }}>
                            <td colSpan={6} className="border border-gray-300 font-bold" style={{ color: TEF_BLUE }}>
                              <div className="flex items-center justify-between px-3 py-1.5">
                                <div className="flex items-center gap-1.5">
                                  <span>{l.name}</span>
                                  <button onClick={() => moveGroupDir(l.gid, -1)} disabled={gIdx <= 0} className="p-0.5 rounded hover:bg-white/60 disabled:opacity-25" title="Bereich nach oben"><ChevronUp size={15} color={TEF_BLUE} /></button>
                                  <button onClick={() => moveGroupDir(l.gid, 1)} disabled={gIdx >= groups.length - 1} className="p-0.5 rounded hover:bg-white/60 disabled:opacity-25" title="Bereich nach unten"><ChevronDown size={15} color={TEF_BLUE} /></button>
                                  <button onClick={() => duplicateGroup(l.gid)} className="p-0.5 rounded hover:bg-white/60" title="Bereich duplizieren"><Copy size={15} color={TEF_BLUE} /></button>
                                  <button onClick={() => removeGroup(l.gid)} className="p-0.5 rounded hover:bg-red-50" title="Bereich entfernen"><Trash2 size={15} color={TEF_RED} /></button>
                                </div>
                                {isStandort && <div className="flex items-center gap-2">
                                  {visibleSums.has(l.gid) && standortSums[l.gid] && <span className="text-xs font-bold" style={{ color: TEF_BLUE }}>Standort gesamt: {eur(standortSums[l.gid].sumM)}/Mon. · {eur(standortSums[l.gid].sumO)} einmalig</span>}
                                  <button onClick={() => toggleSum(l.gid)} className="text-xs px-2 py-0.5 rounded border font-medium" style={{ color: TEF_BLUE, borderColor: TEF_BLUE, background: "white" }}>
                                    {visibleSums.has(l.gid) ? "Standortkosten ausblenden" : "Standortkosten einblenden"}
                                  </button>
                                </div>}
                                {!isStandort && <div className="flex items-center gap-1.5">
                                  {!isVpn && <button onClick={() => toggleAreaDesc(l.gid)} className="text-xs px-2 py-0.5 rounded border font-medium" style={{ color: TEF_BLUE, borderColor: TEF_BLUE, background: "white" }}>
                                    {(groups.find(x => x.id === l.gid)?.showDesc) ? "Produktbeschreibung ausblenden" : "Produktbeschreibung einblenden"}
                                  </button>}
                                  <button onClick={() => toggleSum(l.gid)} className="text-xs px-2 py-0.5 rounded border font-medium" style={{ color: TEF_BLUE, borderColor: TEF_BLUE, background: "white" }}>
                                    {visibleSums.has(l.gid) ? "Produktsummen ausblenden" : "Produktsummen einblenden"}
                                  </button>
                                </div>}
                              </div>
                              {l.desc?.length > 0 && <div className="px-3 pb-1.5 -mt-0.5 text-xs font-normal text-gray-600">{l.desc.map((d, di) => <div key={di}>{d}</div>)}</div>}
                            </td>
                            <td className="border border-gray-300 text-center align-middle" style={{ width: 44 }}>
                              {headerLines.length > 0 && <input type="checkbox" checked={headerChecked} onChange={toggleHeaderLines} title="Alle Zeilen dieses Bereichs (inkl. Unterbereiche) für die Kopie an-/abwählen" />}
                            </td>
                          </tr>
                        );
                      } else if (l.type === "subcluster") {
                        currGid = l.gid;
                        const parent = groups.find(x => x.id === l.pgid);
                        const siblings = parent?.subGroups || [];
                        const sIdx = siblings.findIndex(sg => sg.id === l.gid);
                        const sg = siblings[sIdx];
                        const headerLines = headerLineGroups[l.gid] || [];
                        const headerChecked = headerLines.length > 0 && headerLines.every(x => isLineIncluded(x));
                        const toggleHeaderLines = () => setExcludedLines(prev => { const n = new Set(prev); for (const x of headerLines) { const k = lineKey(x); if (headerChecked) n.add(k); else n.delete(k); } return n; });
                        out.push(
                          <tr key={`scl-${l.gid}`} style={{ background: "#EAF0FF" }}>
                            <td colSpan={6} className="border border-gray-300 font-semibold" style={{ color: TEF_BLUE }}>
                              <div className="flex items-center justify-between pl-8 pr-3 py-1.5">
                                <div className="flex items-center gap-1.5">
                                  <span>{l.name}</span>
                                  <button onClick={() => moveSubGroupDir(l.pgid, l.gid, -1)} disabled={sIdx <= 0} className="p-0.5 rounded hover:bg-white/60 disabled:opacity-25" title="Unterbereich nach oben"><ChevronUp size={14} color={TEF_BLUE} /></button>
                                  <button onClick={() => moveSubGroupDir(l.pgid, l.gid, 1)} disabled={sIdx >= siblings.length - 1} className="p-0.5 rounded hover:bg-white/60 disabled:opacity-25" title="Unterbereich nach unten"><ChevronDown size={14} color={TEF_BLUE} /></button>
                                  <button onClick={() => duplicateSubGroup(l.pgid, l.gid)} className="p-0.5 rounded hover:bg-white/60" title="Unterbereich duplizieren"><Copy size={14} color={TEF_BLUE} /></button>
                                  <button onClick={() => removeSubGroup(l.pgid, l.gid)} className="p-0.5 rounded hover:bg-red-50" title="Unterbereich entfernen"><Trash2 size={14} color={TEF_RED} /></button>
                                </div>
                                <div className="flex items-center gap-1.5">
                                  <button onClick={() => toggleAreaDesc(l.gid)} className="text-xs px-2 py-0.5 rounded border font-medium" style={{ color: TEF_BLUE, borderColor: TEF_BLUE, background: "white" }}>
                                    {sg?.showDesc ? "Produktbeschreibung ausblenden" : "Produktbeschreibung einblenden"}
                                  </button>
                                  <button onClick={() => toggleSum(l.gid)} className="text-xs px-2 py-0.5 rounded border font-medium" style={{ color: TEF_BLUE, borderColor: TEF_BLUE, background: "white" }}>
                                    {visibleSums.has(l.gid) ? "Produktsummen ausblenden" : "Produktsummen einblenden"}
                                  </button>
                                </div>
                              </div>
                              {l.desc?.length > 0 && <div className="pl-8 pr-3 pb-1.5 -mt-0.5 text-xs font-normal text-gray-600">{l.desc.map((d, di) => <div key={di}>{d}</div>)}</div>}
                            </td>
                            <td className="border border-gray-300 text-center align-middle" style={{ width: 44 }}>
                              {headerLines.length > 0 && <input type="checkbox" checked={headerChecked} onChange={toggleHeaderLines} title="Alle Zeilen dieses Unterbereichs für die Kopie an-/abwählen" />}
                            </td>
                          </tr>
                        );
                      } else {
                        const isProd = l.type === "product";
                        const fr = isProd ? findRow(l.gid, l.rowId) : null;
                        out.push(
                          <tr key={`${l.type}-${i}`} className={isProd ? "" : "bg-gray-50 italic text-gray-500"}>
                            <td className="border border-gray-300 text-center align-middle" style={{ width: 36 }}>
                              {isProd && fr?.r && <SortArrows g={fr.g} r={fr.r} size={14} />}
                            </td>
                            <td className="px-3 py-2 border border-gray-300 align-top">{l.name}{l.meta?.length > 0 && <div className="text-xs text-gray-400">{l.meta.join(" · ")}</div>}</td>
                            <td className="px-3 py-2 border border-gray-300 align-top text-xs text-gray-600">{(l.desc || []).map((d, di) => <div key={di}>{d}</div>)}</td>
                            <td className="px-3 py-2 border border-gray-300 text-right align-top">{eur(l.monthly)}{l.abloeseNote && <div className="text-xs" style={{ color: TEF_RED }}>{l.abloeseNote}</div>}{l.rabattNote && <div className="text-xs" style={{ color: TEF_RED }}>{l.rabattNote}</div>}</td>
                            <td className="px-3 py-2 border border-gray-300 text-right align-top">{eur(l.oneoff)}</td>
                            <td className="border border-gray-300 text-center align-middle" style={{ width: 40 }}>
                              {isProd && l.rowId != null && <button onClick={() => duplicateRow(l.gid, l.rowId)} className="p-1 rounded hover:bg-blue-50" title="Zeile duplizieren"><Copy size={16} color={TEF_BLUE} /></button>}
                              {isProd && l.rowId != null && <button onClick={() => removeRow(l.gid, l.rowId)} className="p-1 rounded hover:bg-red-50" title="Zeile löschen"><Trash2 size={16} color={TEF_RED} /></button>}
                            </td>
                            <td className="border border-gray-300 text-center align-middle" style={{ width: 44 }}>
                              <input type="checkbox" checked={isLineIncluded(l)} onChange={() => toggleLineIncluded(l)} title="Für PowerPoint-Kopie berücksichtigen" />
                            </td>
                          </tr>
                        );
                        if (currGid && (visibleSums.has(currGid) || showAllSums) && (!next || next.type === "cluster" || next.type === "subcluster")) {
                          const s = clusterSumsData[currGid];
                          if (s) out.push(
                            <tr key={`csum-${currGid}`} style={{ background: "#E8EDFF" }}>
                              <td className="border border-gray-300" style={{ background: "#E8EDFF" }}></td>
                              <td colSpan={2} className="px-3 py-1.5 border border-gray-300 font-semibold text-sm" style={{ color: TEF_BLUE }}>Summe {s.name}</td>
                              <td className="px-3 py-1.5 border border-gray-300 text-right font-semibold text-sm" style={{ color: TEF_BLUE }}>{eur(s.sumM)}</td>
                              <td className="px-3 py-1.5 border border-gray-300 text-right font-semibold text-sm" style={{ color: TEF_BLUE }}>{eur(s.sumO)}</td>
                              <td className="border border-gray-300" style={{ background: "#E8EDFF" }}></td>
                              <td className="border border-gray-300" style={{ background: "#E8EDFF" }}></td>
                            </tr>
                          );
                        }
                      }
                    }
                    return out;
                  })()}

<tr style={{ background: "#E6ECFF" }}>
                    <td className="border border-gray-300" style={{ background: "#E6ECFF" }}></td>
                    <td colSpan={2} style={{ color: TEF_BLUE }} className="px-3 py-2 border border-gray-300 font-bold">Gesamtsumme</td>
                    <td style={{ color: TEF_BLUE }} className="px-3 py-2 border border-gray-300 text-right font-bold">{eur(sumM)}</td>
                    <td style={{ color: TEF_BLUE }} className="px-3 py-2 border border-gray-300 text-right font-bold">{eur(sumO)}</td>
                    <td className="border border-gray-300" style={{ background: "#E6ECFF" }}></td>
                    <td className="border border-gray-300" style={{ background: "#E6ECFF" }}></td>
                  </tr>

<tr>
                    <td colSpan={7} className="px-2 py-1.5 border border-gray-300 text-right bg-gray-50">
                      <div className="flex flex-wrap gap-2 justify-end">
                        <button onClick={() => setShowAllSums(v => !v)} className="text-xs font-semibold px-3 py-1 rounded border" style={{ color: TEF_BLUE, borderColor: TEF_BLUE }}>{showAllSums ? "Bereichssummen ausblenden" : "Zusammenfassung je Bereich"}</button>
                        <button onClick={() => setShowTCO(v => !v)} className="text-xs font-semibold px-3 py-1 rounded border" style={{ color: TEF_BLUE, borderColor: TEF_BLUE }}>{showTCO ? "Gesamtkosten ausblenden" : "Gesamtkosten (Laufzeit)"}</button>
                        <button onClick={() => setShowSavings(v => !v)} className="text-xs font-semibold px-3 py-1 rounded border" style={{ color: showSavings ? TEF_RED : TEF_BLUE, borderColor: showSavings ? TEF_RED : TEF_BLUE }}>{showSavings ? "Ersparnis ausblenden" : "Ersparnis einblenden"}</button>
                      </div>
                    </td>
                  </tr>

{showSavings && <tr style={{ background: "#FFF5F5" }}>
                    <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                    <td colSpan={2} className="px-3 py-2 border border-gray-300 text-sm" style={{ color: TEF_RED }}>Bisherige IST-Kosten des Kunden (€/Monat, optional – sonst Vergleich ggü. Listenpreis)</td>
                    <td colSpan={2} className="px-3 py-1.5 border border-gray-300 text-right">
                      <input type="number" step="0.01" min="0" className={ctl + " text-right max-w-[140px] inline-block"} placeholder="z. B. 450" value={istKosten} onChange={e => setIstKosten(e.target.value)} />
                    </td>
                    <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                    <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                  </tr>}

{showTCO && primaryTerm > 0 && <tr style={{ background: "#EEF2FF" }}>
                    <td className="border border-gray-300" style={{ background: "#EEF2FF" }}></td>
                    <td colSpan={2} className="px-3 py-2 border border-gray-300 font-semibold text-sm" style={{ color: TEF_BLUE }}>Gesamtkosten über die Laufzeit (monatlich × Laufzeit + einmalig)</td>
                    <td colSpan={2} className="px-3 py-2 border border-gray-300 text-right font-semibold text-sm" style={{ color: TEF_BLUE }}>{eur(sumM * primaryTerm + sumO)}</td>
                    <td className="border border-gray-300" style={{ background: "#EEF2FF" }}></td>
                    <td className="border border-gray-300" style={{ background: "#EEF2FF" }}></td>
                  </tr>}

{showSavings && effSavM > 0 && <>
                    <tr style={{ background: "#FFF5F5" }}>
                      <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                      <td colSpan={2} className="px-3 py-2 border border-gray-300 font-semibold text-sm" style={{ color: TEF_RED }}>Ihre monatliche Ersparnis {vsIst ? "gegenüber Ihren bisherigen Kosten" : "gegenüber Listenpreis"}</td>
                      <td colSpan={2} className="px-3 py-2 border border-gray-300 text-right font-semibold text-sm" style={{ color: TEF_RED }}>{eur(effSavM)}</td>
                      <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                      <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                    </tr>
                    {primaryTerm > 0 && <tr style={{ background: "#FFF5F5" }}>
                      <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                      <td colSpan={2} className="px-3 py-2 border border-gray-300 font-semibold text-sm" style={{ color: TEF_RED }}>Ihre Gesamtersparnis über die Laufzeit</td>
                      <td colSpan={2} className="px-3 py-2 border border-gray-300 text-right font-semibold text-sm" style={{ color: TEF_RED }}>{eur(totalSavings)}</td>
                      <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                      <td className="border border-gray-300" style={{ background: "#FFF5F5" }}></td>
                    </tr>}
                  </>}
                </tbody>
              </table>
              <p className="text-[11px] text-gray-400 mt-2">{FOOTNOTE}</p>
            </div>
          )}
        </div>
        <p className="text-center text-xs text-gray-400 mt-4">Sortieren & Löschen wirken auch oben im Kalkulator · Checkbox-Spalte & Buttons erscheinen nicht im Export · Speichern als .json + .jpg enthält immer alle Zeilen, unabhängig von der Checkbox-Auswahl</p>
        </>}
      </div>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);