/* ════════════════════════════════════════════════════════════════════════
   GEMA — Elektroberechnungen, geteiltes Design (el_base.css)
   ════════════════════════════════════════════════════════════════════════
   Gemeinsame Optik ALLER el_-Module. Muster: das Inline-CSS von
   sb_druckverlust/sb_druckdispositiv — hier einmal zentral, damit sechs
   parallel entwickelte Module nicht sechsmal dasselbe neu erfinden.

   EINBINDEN (Reihenfolge ist Pflicht):
     <link rel="stylesheet" href="el_base.css"/>        ← zuerst
     <style> … modul-eigenes CSS … </style>             ← überschreibt Basis
     <link rel="stylesheet" href="gema_responsive.css"/>← IMMER zuletzt

   gema_responsive.css setzt Nav-Höhe, Safe-Area und die Phone-Ansicht mit
   !important — das ist gewollt und darf hier nicht gegengesteuert werden.

   Akzentfarbe = Gold (#ca8a04) wie die Elektro-Kategorie auf index.html.
   Ampel: .ok grün · .warn amber · .err rot — Bedeutung modulübergreifend
   gleich (grün i.O., amber nahe am Grenzwert, rot Grenzwert überschritten).
   ════════════════════════════════════════════════════════════════════════ */

:root{
  --bg:#f4f6fb; --bg2:#edf0f7; --sur:#fff; --sur2:#f8faff;
  --brd:#e2e7f0; --brd2:#cdd4e4;
  --txt:#111827; --txt2:#374151; --mut:#64748b; --mut2:#94a3b8;

  --el:#ca8a04; --el-dk:#a16207; --el-lt:#eab308;
  --el-bg:#fefce8; --el-bg2:#fef9c3; --el-bd:#fde68a;

  --grn:#059669; --grn-bg:#ecfdf5; --grn-bd:#a7f3d0;
  --amber:#d97706; --amber-bg:#fffbeb; --amber-bd:#fde68a;
  --red:#dc2626; --red-bg:#fef2f2; --red-bd:#fecaca;
  --blue:#1d4ed8; --blue-bg:#eff6ff; --blue-bd:#bfdbfe;

  --r:10px; --r-lg:16px;
  --sh-sm:0 1px 3px rgba(0,0,0,.06);
  --sh:0 4px 14px rgba(0,0,0,.08);
  --sh-lg:0 16px 48px rgba(0,0,0,.12);
  --sans:"DM Sans",ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);-webkit-font-smoothing:antialiased}
input,select,button,textarea{font-family:var(--sans)}
input::placeholder{color:#cbd5e1}

/* ── NAV (Kanon: scripts/nav_uniform_test.mjs) ─────────────────────────── */
.g-nav{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);border-bottom:1px solid var(--brd);box-shadow:var(--sh-sm)}
.g-nav-inner{max-width:1600px;margin:0 auto;padding:0 18px;display:flex;align-items:center;gap:10px}
.g-nav-mark{height:28px;display:flex;align-items:center}
.g-nav-logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.g-nav-bc{display:flex;align-items:center;gap:2px;flex:1;min-width:0}
.g-nav-bc a,.g-nav-bc span{font-size:12px;color:var(--mut);text-decoration:none;padding:3px 6px;border-radius:5px;white-space:nowrap}
.g-nav-bc a:hover{background:var(--bg2)}
.bc-cur{color:var(--txt);font-weight:700}
.bc-sep{padding:0 1px;color:var(--mut2)}
.g-nav-right{margin-left:auto;display:flex;gap:5px;align-items:center;flex-shrink:0}
.g-nav-btn{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:7px;border:1px solid var(--brd2);background:var(--sur);color:var(--txt2);font-size:12px;font-weight:600;cursor:pointer;text-decoration:none;transition:.15s;white-space:nowrap}
.g-nav-btn:hover{background:var(--bg2)}
.g-nav-btn.primary{background:var(--el);border-color:var(--el);color:#fff;font-weight:700}
.g-nav-btn.primary:hover{background:var(--el-dk)}
.gema-feedback-btn{display:inline-flex;align-items:center;gap:5px;padding:6px 13px;border-radius:8px;border:none;background:#dc2626;color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit}
.gema-feedback-btn:hover{background:#b91c1c}

.pg{max-width:1600px;margin:0 auto;padding:16px 18px 80px}

/* ── HERO (Modul-Kopf, Kanon: .gema-hero — NICHT h1/p verwenden) ───────── */
.gema-hero{background:linear-gradient(135deg,#713f12 0%,#ca8a04 55%,#eab308 100%);border-radius:var(--r-lg);padding:18px 22px;margin-bottom:14px;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.gema-hero-in{position:relative;z-index:1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.gema-hero-ic{width:46px;height:46px;border-radius:12px;background:rgba(255,255,255,.15);border:1.5px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}
.gema-hero-title{font-size:19px;font-weight:900;color:#fff;letter-spacing:-.3px}
.gema-hero-norm{display:inline-block;font-size:11px;color:rgba(255,255,255,.92);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:2px 8px;border-radius:6px;margin-top:6px;font-weight:700;letter-spacing:.2px}
.gema-hero-sub{font-size:11.5px;color:rgba(255,255,255,.68);margin-top:3px;line-height:1.5}

/* ── PROJEKT-LEISTE (Objekt / Bearbeiter / Datum) ──────────────────────── */
.project-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding:10px 14px;margin-bottom:14px;background:var(--sur);border:1.5px solid var(--brd);border-radius:10px}
.pf{display:flex;flex-direction:column;gap:3px;flex:1;min-width:180px}
.pf label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);display:flex;align-items:center}
.pf input,.pf select{padding:7px 10px;border:1.5px solid var(--brd2);border-radius:8px;font-size:13px;background:var(--sur);color:var(--txt);outline:none;width:100%;height:auto}
.pf input:focus,.pf select:focus{border-color:var(--el)}
.obj-combo{width:100%}
.obj-combo-row{width:100%}
.obj-combo-toggle{margin-left:auto;padding:2px 8px;border-radius:6px;border:1px solid var(--brd2);background:var(--sur);color:var(--mut);font-size:10px;font-weight:700;cursor:pointer;text-transform:none;letter-spacing:0}
.obj-combo-toggle:hover{background:var(--bg2);color:var(--txt2)}

/* ── ERGEBNIS-LEISTE oben (kompakte Kennzahlen) ────────────────────────── */
.sum-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 14px;margin-bottom:12px;background:var(--el-bg);border:1.5px solid var(--el-bd);border-radius:10px}
.sum-item{font-size:12px;color:var(--mut);font-weight:600;white-space:nowrap}
.sum-item b{font-weight:900;color:var(--txt);font-size:14px}
.sum-item b.hl{color:var(--el-dk);font-size:15px}
.sum-sep{width:1px;height:20px;background:var(--el-bd);flex-shrink:0}

/* ── KARTE mit Ein-/Ausklappen ──────────────────────────────────────────
   Fold-Zustand pro Gerät in localStorage (gema_el_fold_v1) — NIE im
   AutoSave-Snapshot (das ist Geräte-UI, keine Berechnungsdaten). */
.el-card{background:var(--sur);border:1.5px solid var(--brd);border-radius:11px;box-shadow:var(--sh-sm);overflow:hidden;margin-bottom:14px}
.el-card-hd{padding:11px 14px;display:flex;align-items:center;gap:9px;background:var(--sur2);border-bottom:1px solid var(--brd);cursor:pointer;user-select:none}
.el-card-hd:hover{background:var(--bg2)}
.el-cx{font-size:11px;color:var(--mut2);transition:transform .15s;display:inline-block;transform:rotate(90deg)}
.el-card.zu .el-cx{transform:rotate(0deg)}
.el-card.zu .el-card-bd{display:none}
.el-card.zu .el-card-hd{border-bottom:none}
.el-secnum{width:22px;height:22px;border-radius:7px;background:var(--el);color:#fff;font-size:11.5px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.el-card-tt{font-size:13px;font-weight:800;flex:1;min-width:0}
.el-card-sub{font-size:10.5px;color:var(--mut);font-weight:600}
.el-card-bd{padding:14px}

/* ── FORMULAR ──────────────────────────────────────────────────────────── */
.el-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.fg{display:flex;flex-direction:column;gap:4px}
.fg>label{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--mut)}
.fg select,.fg input[type=text],.fg input[type=date]{padding:7px 10px;border:1.5px solid var(--brd2);border-radius:8px;font-size:13px;background:var(--sur);color:var(--txt);outline:none;width:100%}
.fg select:focus,.fg input:focus{border-color:var(--el)}
.fg-hint{font-size:10.5px;color:var(--mut2);line-height:1.45}

/* Zahlenfeld MIT angeschlossener Einheit — GEMA-Pflicht für freistehende
   numerische Eingaben (die Einheit steht in der Box, nicht im Label). */
.g-inp-group{display:flex;align-items:stretch;width:100%}
.g-inp{flex:1;min-width:0;padding:7px 10px;border:1.5px solid var(--brd2);border-right:0;border-radius:8px 0 0 8px;font-size:13px;background:var(--sur);color:var(--txt);outline:none}
.g-inp:focus{border-color:var(--el)}
.g-inp-unit{display:inline-flex;align-items:center;padding:0 10px;border:1.5px solid var(--brd2);border-radius:0 8px 8px 0;background:var(--bg2);color:var(--mut);font-size:11.5px;font-weight:700;white-space:nowrap}

/* ── ERGEBNIS-ZEILEN ────────────────────────────────────────────────────
   Jede zentrale Zeile trägt einen .frml-Chip mit der verwendeten Formel —
   die MUSS dem Code entsprechen. Keine Verweise auf Arbeitsvorlagen. */
.el-res{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--brd);flex-wrap:wrap}
.el-res:last-child{border-bottom:none}
.el-res-lbl{font-size:12.5px;color:var(--txt2);font-weight:600;flex:1;min-width:150px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.el-res-val{font-size:15px;font-weight:900;color:var(--txt);white-space:nowrap}
.el-res-val.hl{color:var(--el-dk);font-size:17px}
.el-res-val.ok{color:var(--grn)}
.el-res-val.warn{color:var(--amber)}
.el-res-val.err{color:var(--red)}
.frml{display:inline-block;padding:1px 7px;border-radius:5px;background:var(--bg2);border:1px solid var(--brd);font-size:10.5px;font-weight:700;color:var(--mut);white-space:nowrap}
.frml-block{margin-top:10px;padding:9px 12px;border-radius:8px;background:var(--bg2);border:1px solid var(--brd);font-size:10.5px;color:var(--mut);line-height:1.7}

/* ── STATUS / AMPEL ────────────────────────────────────────────────────── */
.el-status{padding:10px 14px;border-radius:9px;font-size:12.5px;font-weight:700;line-height:1.5;border:1.5px solid}
.el-status.ok{background:var(--grn-bg);border-color:var(--grn-bd);color:#065f46}
.el-status.warn{background:var(--amber-bg);border-color:var(--amber-bd);color:#92400e}
.el-status.err{background:var(--red-bg);border-color:var(--red-bd);color:#991b1b}
.el-bar{height:9px;border-radius:5px;background:var(--bg2);border:1px solid var(--brd);overflow:hidden;margin-top:8px}
.el-bar>i{display:block;height:100%;background:var(--grn);transition:width .25s,background .25s}
.el-bar.warn>i{background:var(--amber)}
.el-bar.err>i{background:var(--red)}

/* ── TABELLE ───────────────────────────────────────────────────────────── */
.el-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.el-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.el-tbl th{padding:8px 9px;text-align:left;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--mut);background:var(--sur2);border-bottom:1.5px solid var(--brd);white-space:nowrap}
.el-tbl td{padding:7px 9px;border-bottom:1px solid var(--brd);vertical-align:middle}
.el-tbl tbody tr:hover{background:var(--sur2)}
.el-tbl tfoot td{font-weight:900;background:var(--el-bg);border-top:1.5px solid var(--el-bd)}

/* ── HINWEISE ──────────────────────────────────────────────────────────── */
.el-hint{padding:9px 12px;border-radius:8px;background:var(--blue-bg);border:1.5px solid var(--blue-bd);color:#1e40af;font-size:11.5px;line-height:1.55}
.el-note{font-size:11px;color:var(--mut);line-height:1.6}

/* Gerüst-Banner — steht im leeren Modul und wird beim Ausbau ENTFERNT. */
.el-stub{padding:16px 18px;border-radius:11px;background:var(--amber-bg);border:1.5px dashed var(--amber-bd);color:#92400e;font-size:12.5px;line-height:1.65;margin-bottom:14px}
.el-stub b{font-weight:900}
.el-stub code{background:rgba(146,64,14,.09);padding:1px 5px;border-radius:4px;font-size:11.5px}

/* ── DRUCK ──────────────────────────────────────────────────────────────
   Eingeklappte Karten MÜSSEN im Ausdruck sichtbar sein — sonst fehlt ein
   ganzer Abschnitt im PDF (GEMA-Kanon, gilt für jedes Fold-Modul). */
@media print{
  .no-print,.g-nav,.el-stub{display:none!important}
  body{background:#fff}
  .pg{max-width:none;padding:0}
  .el-card{break-inside:avoid;box-shadow:none;border-color:#d1d5db}
  .el-card.zu .el-card-bd{display:block!important}
  .el-card.zu .el-card-hd{border-bottom:1px solid var(--brd)}
}

/* ── PHONE ─────────────────────────────────────────────────────────────── */
@media (max-width:640px){
  .pg{padding:12px 12px 60px}
  .el-grid{grid-template-columns:1fr}
  .el-res-val{font-size:14px}
  .el-res-val.hl{font-size:15px}
}