/* ==========================================================================
   Projekt-Editor Modal — „Live-Auftritt"
   Helles Theme, Marken-Grün #74b72a/#5a9023, --green-ink #3a6212 (AA).
   Zwei Bereiche: Formular links, Live-Vorschau (Karte + Steckbrief) rechts.
   ========================================================================== */
:root { --pe-green:#74b72a; --pe-green-d:#5a9023; --pe-ink:#3a6212; --pe-line:#e5e9e0; --pe-muted:#6b7280; --pe-bg:#f7f9f4; }

/* Breites 2-Pane-Modal (überschreibt .large für den Editor) */
#projectEditorModal .portal-modal-content.project-editor {
  max-width: min(96vw, 1080px); width: 96%; max-height: 94vh;
  display: flex; flex-direction: column; padding: 0; overflow: hidden;
}
#projectEditorModal .pe-i { flex-shrink: 0; vertical-align: middle; }

/* Header: hell + 4px grüner Top-Accent + grün-Gradient-Icon-Tile */
#projectEditorModal .pe-header { padding: 8px 18px !important; min-height: 0 !important; align-items: center; }
#projectEditorModal .pe-header .modal-title-section { margin: 0 !important; display: flex !important; flex-direction: row !important; align-items: center; gap: 10px; }
#projectEditorModal .pe-header .modal-title-text { margin: 0; }
#projectEditorModal .pe-icon-tile {
  width: 26px; height: 26px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2); color: #fff; flex-shrink: 0;
}
#projectEditorModal .pe-title { margin: 0; font-size: 15px; font-weight: 700; color: #fff; }
/* Keine schwarzen Icons — Portal erzwingt color:#333!important UND path{fill:#333!important}.
   Farbe grün/weiß setzen UND den <path>-Fill auf currentColor zwingen (folgt der Farbe). */
#projectEditorModal .pe-i { display: inline-flex !important; vertical-align: middle; flex: 0 0 auto; }
/* Portal setzt color:#333!important auf jeden Descendant -> currentColor unbrauchbar. Fill EXPLIZIT auf svg + alle Shapes. */
#projectEditorModal .pe-i, #projectEditorModal .pe-i * { fill: var(--pe-green-d) !important; }
#projectEditorModal .pe-icon-tile .pe-i, #projectEditorModal .pe-icon-tile .pe-i *,
#projectEditorModal .pe-btn-primary .pe-i, #projectEditorModal .pe-btn-primary .pe-i * { fill: #fff !important; }
#projectEditorModal .pe-close { color: #9ca3af; }

/* Body */
#projectEditorModal .pe-body { padding: 16px 18px; overflow-y: auto; flex: 1; }

/* Modus-Segmented */
#projectEditorModal .pe-modeswitch { display: inline-flex; gap: 4px; background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 10px; padding: 4px; margin-bottom: 14px; }
#projectEditorModal .pe-seg { display: inline-flex; align-items: center; gap: 6px; border: none; background: transparent; color: var(--pe-muted); font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
#projectEditorModal .pe-seg.is-active { background: #fff; color: var(--pe-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }

/* Suche (Edit) */
#projectEditorModal .pe-search { margin-bottom: 14px; position: relative; }
#projectEditorModal .pe-search-wrap { display: flex; align-items: center; gap: 8px; border: 1px solid var(--pe-line); border-radius: 9px; padding: 8px 12px; background: #fff; color: var(--pe-muted); }
#projectEditorModal .pe-search-wrap input { border: none; outline: none; flex: 1; font-size: 14px; color: #1f2937; }
#projectEditorModal .pe-search-results { position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 4px); background: #fff; border: 1px solid var(--pe-line); border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.1); max-height: 260px; overflow-y: auto; display: none; }
#projectEditorModal .pe-search-results.is-open { display: block; }
#projectEditorModal .pe-sr-item { padding: 10px 12px; cursor: pointer; font-size: 13px; border-bottom: 1px solid #f1f4ec; }
#projectEditorModal .pe-sr-item:hover, #projectEditorModal .pe-sr-item.is-active { background: var(--pe-bg); }
#projectEditorModal .pe-sr-item .pe-sr-meta { color: var(--pe-muted); font-size: 11px; }
#projectEditorModal .pe-sr-empty { padding: 12px; color: var(--pe-muted); font-size: 12px; }

/* Grid */
#projectEditorModal .pe-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: start; }
#projectEditorModal .pe-form { min-width: 0; }
#projectEditorModal .pe-zone { margin-bottom: 18px; }
#projectEditorModal .pe-zone-title { font-size: 11px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--pe-muted); margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--pe-line); }
#projectEditorModal .pe-row { display: flex; gap: 12px; }
#projectEditorModal .pe-field { flex: 1; margin-bottom: 12px; min-width: 0; }
#projectEditorModal .pe-field.pe-grow { flex: 3; }
#projectEditorModal .pe-field.pe-narrow { flex: 1; }
#projectEditorModal .pe-field label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; }
#projectEditorModal .pe-req { color: #dc2626; }
#projectEditorModal .pe-field input {
  width: 100%; height: 42px; box-sizing: border-box; border: 1px solid var(--pe-line); border-radius: 8px;
  padding: 0 12px; font-size: 14px; color: #1f2937; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
#projectEditorModal .pe-field input:focus { border-color: var(--pe-green); box-shadow: 0 0 0 3px rgba(116,183,42,.14); }
#projectEditorModal .pe-field input[readonly] { background: var(--pe-bg); color: #4b5563; }
#projectEditorModal .pe-field input.pe-invalid { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
#projectEditorModal .pe-suffix-wrap { position: relative; }
#projectEditorModal .pe-suffix-wrap input { padding-right: 46px; }
/* Zentrierung OHNE transform (Portal killt transform:none!important -> Suffix rutschte nach unten) */
#projectEditorModal .pe-suffix { position: absolute; right: 12px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 12px; color: var(--pe-muted); pointer-events: none; }
/* kWp aus PVIR: gesperrt (ausgegraut, aber gut lesbar) + Herkunfts-Badge */
#projectEditorModal input.pe-locked { background: #eef2e8; color: var(--pe-ink); -webkit-text-fill-color: var(--pe-ink); opacity: 1; cursor: not-allowed; border-color: var(--pe-line); }
#projectEditorModal .pe-pvir-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(90,144,35,.12); color: var(--pe-green-d); font-size: 11px; font-weight: 600; vertical-align: middle; }
/* hidden-Attribut durchsetzen (meine display-Regel oben schlägt sonst [hidden]{display:none}) */
#projectEditorModal .pe-pvir-badge[hidden] { display: none !important; }
#projectEditorModal .pe-pvir-badge .pe-i { width: 12px; height: 12px; }
#projectEditorModal .pe-hint { font-size: 11px; color: var(--pe-muted); min-height: 14px; }
#projectEditorModal .pe-plz-msg { font-size: 11.5px; min-height: 14px; margin-bottom: 4px; }
#projectEditorModal .pe-plz-msg.pe-ok { color: var(--pe-ink); }
#projectEditorModal .pe-plz-msg.pe-warn { color: #b45309; }
#projectEditorModal .pe-why { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 11.5px; color: var(--pe-muted); margin-top: 4px; }
#projectEditorModal .pe-why .pe-i { color: var(--pe-green-d); }
#projectEditorModal .pe-why-sep { opacity: .5; }

/* Live-Pane */
#projectEditorModal .pe-live { position: sticky; top: 0; min-width: 0; }
#projectEditorModal .pe-map { height: 290px; border-radius: 11px; overflow: hidden; border: 1px solid var(--pe-line); background: var(--pe-bg); position: relative; }
/* z-index+deckender bg: überdeckt die Leaflet-Kacheln, wenn der Empty-State wieder gezeigt wird (Reset) */
#projectEditorModal .pe-map-empty { position: absolute; inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 20px; font-size: 12px; color: var(--pe-muted); background: var(--pe-bg); }

#projectEditorModal .pe-visibility { display: flex; gap: 4px; background: var(--pe-bg); border: 1px solid var(--pe-line); border-radius: 10px; padding: 4px; margin: 12px 0 6px; }
#projectEditorModal .pe-vis { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; background: transparent; color: var(--pe-muted); font-size: 12.5px; font-weight: 600; padding: 8px; border-radius: 7px; cursor: pointer; transition: background .15s, color .15s; }
#projectEditorModal .pe-vis.is-active[data-vis="public"] { background: #fff; color: var(--pe-ink); box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#projectEditorModal .pe-vis.is-active[data-vis="intern"] { background: #fff; color: #6b7280; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
#projectEditorModal .pe-vis-note { font-size: 11px; color: var(--pe-muted); margin-bottom: 12px; }

/* Live-Card (Steckbrief-Vorschau) */
#projectEditorModal .pe-card { border: 1px solid var(--pe-line); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .2s, opacity .2s; }
#projectEditorModal .pe-card.is-intern { opacity: .82; }
#projectEditorModal .pe-card.is-public { box-shadow: 0 0 0 2px rgba(116,183,42,.35); }
#projectEditorModal .pe-hero { position: relative; aspect-ratio: 16/9; background: var(--pe-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; overflow: hidden; }
#projectEditorModal .pe-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
#projectEditorModal .pe-hero-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--pe-muted); font-size: 12px; }
#projectEditorModal .pe-hero-empty .pe-i { color: #b8c2ac; }
#projectEditorModal .pe-hero-actions { position: absolute; top: 8px; right: 8px; display: none; gap: 6px; }
#projectEditorModal .pe-hero.has-img .pe-hero-empty { display: none; }
#projectEditorModal .pe-hero.has-img:hover .pe-hero-actions { display: flex; }
#projectEditorModal .pe-hero-actions button { width: 30px; height: 30px; border-radius: 7px; border: none; background: rgba(255,255,255,.92); color: #374151; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.2); }
#projectEditorModal .pe-hero-actions button:hover { color: var(--pe-green-d); }
#projectEditorModal .pe-cardbody { padding: 10px 14px; }
#projectEditorModal .pe-card-title { font-size: 14px; font-weight: 700; color: #1f2937; }
#projectEditorModal .pe-card-meta { font-size: 12px; color: var(--pe-muted); margin-top: 2px; }
#projectEditorModal .pe-gallery-wrap { padding: 0 14px 12px; }
#projectEditorModal .pe-gallery-label { font-size: 11px; color: var(--pe-muted); margin-bottom: 6px; }
#projectEditorModal .pe-gallery { display: flex; gap: 6px; flex-wrap: wrap; }
#projectEditorModal .pe-gallery-add { width: 46px; height: 46px; border: 1px dashed var(--pe-line); border-radius: 8px; background: var(--pe-bg); color: var(--pe-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; }
#projectEditorModal .pe-gallery-add:hover { border-color: var(--pe-green); color: var(--pe-green-d); }
#projectEditorModal .pe-gthumb { position: relative; width: 46px; height: 46px; border-radius: 8px; overflow: hidden; border: 1px solid var(--pe-line); }
#projectEditorModal .pe-gthumb img { width: 100%; height: 100%; object-fit: cover; }
#projectEditorModal .pe-gthumb-x { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; display: none; align-items: center; justify-content: center; padding: 0; }
#projectEditorModal .pe-gthumb:hover .pe-gthumb-x { display: flex; }

/* Footer */
#projectEditorModal .pe-footer { display: flex !important; justify-content: flex-end; align-items: center; gap: 10px; padding: 10px 18px !important; min-height: 0 !important; border-top: 1px solid var(--pe-line); background: #fff; }
#projectEditorModal .pe-btn { display: inline-flex; align-items: center; gap: 7px; border-radius: 8px; font-size: 14px; font-weight: 600; padding: 10px 18px; cursor: pointer; border: 1px solid transparent; transition: background .15s, box-shadow .15s; }
#projectEditorModal .pe-btn-secondary { background: #fff; border-color: var(--pe-line); color: #4b5563; }
#projectEditorModal .pe-btn-secondary:hover { background: var(--pe-bg); }
#projectEditorModal .pe-btn-primary { background: var(--pe-green); color: #fff !important; }
#projectEditorModal .pe-btn-primary:hover { background: var(--pe-green-d); }
#projectEditorModal .pe-btn-primary .pe-i { color: #fff; }

/* Toast */
/* Verstecken via display (Portal erzwingt opacity:1/visibility:visible !important -> opacity:0 wirkungslos) */
#projectEditorModal .pe-toast { position: absolute; right: 18px; bottom: 70px; background: #1f2937; color: #fff; font-size: 13px; padding: 10px 16px; border-radius: 9px; box-shadow: 0 8px 24px rgba(0,0,0,.22); pointer-events: none; display: none; }
#projectEditorModal .pe-toast.is-show { display: block; }
#projectEditorModal .pe-toast.is-error { background: #b91c1c; }

/* Mobile */
@media (max-width: 900px) {
  /* Portal-min-width (~600px) schlägt sonst max-width -> Overflow auf schmalen Viewports */
  #projectEditorModal .portal-modal-content.project-editor { min-width: 0 !important; width: 96vw !important; max-width: 96vw !important; }
  #projectEditorModal .pe-grid { grid-template-columns: 1fr; gap: 16px; }
  #projectEditorModal .pe-live { position: static; }
  #projectEditorModal .pe-map { height: 220px; }
  #projectEditorModal .pe-footer { position: sticky; bottom: 0; }
}

/* Live-Map (Leaflet) + Pin */
#projectEditorModal .pe-map .leaflet-container { width: 100%; height: 100%; background: var(--pe-bg); font: inherit; }
/* Globale img{max-width:100%}-Härtung staucht sonst die 256px-Leaflet-Kacheln */
#projectEditorModal .pe-map img { max-width: none !important; max-height: none !important; }
#projectEditorModal .pe-map .leaflet-control-attribution { font-size: 9px; background: rgba(255,255,255,.7); }
#projectEditorModal .pe-pin-wrap { background: none; border: none; }
#projectEditorModal .pe-pin { display: block; filter: drop-shadow(0 3px 3px rgba(0,0,0,.28)); transform-origin: 50% 100%; }
#projectEditorModal .pe-pin.is-drop { animation: pe-pin-drop .32s cubic-bezier(0.16,1,0.3,1); }
#projectEditorModal .pe-pin.is-sharp { animation: pe-pin-sharp .4s cubic-bezier(0.16,1,0.3,1); }
@keyframes pe-pin-drop { 0% { transform: translateY(-16px); opacity: 0; } 60% { opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes pe-pin-sharp { 0% { transform: scale(.7); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }

/* Icon-Tile auf dem (portal-erzwungenen) grünen Header sichtbar */
#projectEditorModal .pe-icon-tile { background: rgba(255,255,255,0.2); box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  #projectEditorModal * { transition: none !important; animation: none !important; }
}

/* ===== Übersicht (Startansicht): Projekt-Liste im Prozess-Stil + Vollständigkeits-Ampel ===== */
/* Portal-Fallen: color:#333!important + path{fill:#333!important} -> Text/Icon-Farben EXPLIZIT mit !important. */
/* Portal bricht das [hidden]-Attribut: .pe-grid{display:grid} / .pe-footer{display:flex} überschreiben es,
   sonst bleiben Formular + Footer unter der Übersicht sichtbar. [hidden] hart durchsetzen -> sauberer Ansichts-Wechsel. */
#projectEditorModal [hidden] { display: none !important; }
#projectEditorModal .pe-overview { display: flex; flex-direction: column; gap: 14px; }
#projectEditorModal .pe-ov-bar { display: flex; gap: 12px; align-items: center; }
#projectEditorModal .pe-ov-new { display: inline-flex; align-items: center; gap: 6px; background: var(--pe-green, #74b72a); color: #fff !important; border: none; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
#projectEditorModal .pe-ov-new:hover { background: var(--pe-green-d, #5a9023); }
#projectEditorModal .pe-ov-new .pe-i, #projectEditorModal .pe-ov-new .pe-i * { fill: #fff !important; }
#projectEditorModal .pe-ov-search { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid #d1d5db; border-radius: 8px; padding: 0 12px; background: #fff; }
#projectEditorModal .pe-ov-search .pe-i, #projectEditorModal .pe-ov-search .pe-i * { fill: #9ca3af !important; }
#projectEditorModal .pe-ov-search input { flex: 1; border: none; outline: none; padding: 10px 0; font-size: 14px; background: transparent; color: #1f2937 !important; }
#projectEditorModal .pe-ov-list { display: flex; flex-direction: column; gap: 10px; max-height: 62vh; overflow-y: auto; padding-right: 2px; }
#projectEditorModal .pe-ov-msg { text-align: center; color: #9ca3af !important; padding: 30px; font-size: 14px; }

#projectEditorModal .pe-ov-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 12px 16px; cursor: pointer; transition: box-shadow 0.15s, border-color 0.15s; }
#projectEditorModal .pe-ov-row:hover { border-color: var(--pe-green, #74b72a); box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
#projectEditorModal .pe-ov-thumb { width: 68px; height: 68px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: #f3f4f6; }
#projectEditorModal .pe-ov-thumb-empty { width: 68px; height: 68px; border-radius: 8px; flex-shrink: 0; background: #f3f4f6; display: flex; align-items: center; justify-content: center; }
#projectEditorModal .pe-ov-thumb-empty .pe-i, #projectEditorModal .pe-ov-thumb-empty .pe-i * { fill: #cbd5e1 !important; }
#projectEditorModal .pe-ov-main { flex: 1; min-width: 0; }
#projectEditorModal .pe-ov-name { font-size: 15px; font-weight: 600; color: #1f2937 !important; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#projectEditorModal .pe-ov-addr { font-size: 13px; color: #6b7280 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#projectEditorModal .pe-ov-kpis { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
#projectEditorModal .pe-ov-kpi { text-align: right; }
#projectEditorModal .pe-ov-kpi b { display: block; font-size: 14px; font-weight: 600; color: #374151 !important; }
#projectEditorModal .pe-ov-kpi span { font-size: 11px; color: #9ca3af !important; text-transform: uppercase; letter-spacing: 0.3px; }

/* Vollständigkeits-Ampel */
#projectEditorModal .pe-ov-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 6px; white-space: nowrap; }
#projectEditorModal .pe-ov-status.is-ok { background: #f0fce0; color: #5a9023 !important; }
#projectEditorModal .pe-ov-status.is-warn { background: #fef9c3; color: #a16207 !important; }
#projectEditorModal .pe-ov-status .pe-i, #projectEditorModal .pe-ov-status .pe-i * { fill: currentColor !important; }
/* Kein farbiger Listenrand — die gelbe Ampel-Badge rechts reicht (Ronnie 06.07.) */

#projectEditorModal .pe-detail-head { margin-bottom: 10px; }
#projectEditorModal .pe-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--pe-green-d, #5a9023) !important; font-size: 14px; font-weight: 600; cursor: pointer; padding: 4px 0; }
#projectEditorModal .pe-back:hover { color: var(--pe-green, #74b72a) !important; }
#projectEditorModal .pe-back .pe-i, #projectEditorModal .pe-back .pe-i * { fill: var(--pe-green-d, #5a9023) !important; }

@media (max-width: 720px) {
  #projectEditorModal .pe-ov-bar { flex-wrap: wrap; }
  #projectEditorModal .pe-ov-kpis { gap: 12px; }
  #projectEditorModal .pe-ov-row { flex-wrap: wrap; }
}

/* (kWp-Hoheit-Warnung entfernt — PVIR wird live gezogen + Feld gesperrt, keine Warnung noetig) */