{ 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?.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?.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?.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).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(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(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 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");
  };

<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 => 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>}
      </div>
    );
  };

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={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={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={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>
          <div className="space-y-4">
            {groups.map((g, gi) => {
              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: TEF_BLUE_2, background: "#EEF2FF" }}>
                        <label className={lbl} style={{ color: TEF_BLUE }}>Standortname</label>
                        <input className={ctl} 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 || []).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={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 (nicht im Export)</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>
                  </tr>
                </thead>
                <tbody>
                  {(() => {
                    const out = []; let currGid = null;
                    for (let i = 0; i < offerLines.length; i++) {
                      const l = offerLines[i], next = offerLines[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";
                        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>
                          </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];
                        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>
                          </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>
                          </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>
                            </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>
                  </tr>

<tr>
                    <td colSpan={6} 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>
                  </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>
                  </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>
                    </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>
                    </tr>}
                  </>}
                </tbody>
              </table>
            </div>
          )}
        </div>
        <p className="text-center text-xs text-gray-400 mt-4">Sortieren & Löschen wirken auch oben im Kalkulator · Buttons erscheinen nicht im Export · Speichern als .json + .jpg</p>
        </>}
      </div>
    </div>
  );
}

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