/* ==========================================================================
   Infomails: Design-Karten, Farbwahl, Baukasten-Editor, Bildbibliothek. Baut auf app.css auf.
   Farben kommen aus den Daten und werden per Skript (data-farbe) gesetzt,
   die Content-Security-Policy erlaubt kein style="..." im HTML.
   ========================================================================== */

/* Design-Übersicht */
.design-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.design-karte { display: flex; flex-direction: column; overflow: hidden; }
.design-karte .card-body { flex: 1; }
.design-vorschau { display: flex; gap: 10px; align-items: center; padding: 22px; min-height: 90px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.design-daten { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 12px 0 0; font-size: 0.92rem; }
.design-daten dt { color: var(--text-muted); }
.design-daten dd { margin: 0; overflow-wrap: anywhere; }

/* Farbfelder */
.farbfeld { display: inline-block; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border-strong); flex: none; background: var(--surface-2); }
.farbfeld--gross { width: 44px; height: 44px; border-radius: 8px; }

/* Farbwahl im Formular */
.farbraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px 24px; }
.farbwahl { display: flex; align-items: center; gap: 12px; }
.farbwaehler { width: 52px; height: 36px; padding: 2px; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--surface); cursor: pointer; }
.farbwaehler:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Design-Kennzeichnung in der Infomail-Liste */
.infomail-design--cumodis { background: var(--cumodis-soft); color: var(--cumodis-text); border-color: transparent; }
.infomail-design--duf { background: var(--projekt-soft); color: var(--projekt-text); border-color: transparent; }


/* ---- Editor: links Grunddaten und Bausteine, rechts Vorschau und Testversand ---- */
/* Der Editor nutzt die ganze Fensterbreite (das Formular ist sonst auf 1100 px begrenzt).
   Ab 1400 px ist der Inhaltsbereich zweigeteilt: links scrollt der Editor, rechts steht die Vorschau fest, bündig am Rand, unter der
   Kopfleiste bis zum unteren Fensterrand. Dabei scrollt nicht die Seite, sondern nur die linke Hälfte. Darunter steht die Vorschau
   unter dem Editor und scrollt mit. */
.content .form.editor-formular { max-width: none; }
.editor { --vorschau-breite: clamp(540px, 46vw, 780px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.editor-links, .editor-rechts { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (min-width: 1400px) {
    .main:has(> .content.editor-seite) { height: 100vh; overflow: hidden; }
    .content.editor-seite { padding: 0; gap: 0; flex: 1; min-height: 0; overflow: hidden; }
    .content.editor-seite > .alert { flex: none; margin: 16px clamp(16px, 2.5vw, 48px) 0; }
    .content.editor-seite > .editor-formular { flex: 1; min-height: 0; }
    .editor-formular > .editor { height: 100%; grid-template-columns: minmax(0, 1fr) var(--vorschau-breite); gap: 0; align-items: stretch; }
    .editor-links { min-height: 0; overflow-y: auto; padding: 32px clamp(16px, 2.5vw, 48px) 48px; }
    .editor-rechts { min-height: 0; gap: 0; border-left: 1px solid var(--border); background: var(--surface); }
    .editor-rechts .vorschau-karte { flex: 1; min-height: 0; border: 0; border-radius: 0; box-shadow: none; }
}
/* Grunddaten: aufklappbar, zugeklappt als eine Zeile */
.grunddaten > summary { list-style: none; cursor: pointer; }
.grunddaten > summary::-webkit-details-marker { display: none; }
.grunddaten-kopf { gap: 14px; }
.grunddaten-kopf h2 { flex: none; }
.grunddaten-kurz { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.88rem; }
.grunddaten[open] .grunddaten-kurz { visibility: hidden; }
.grunddaten-pfeil { display: grid; color: var(--text-muted); transition: transform 0.15s; }
.grunddaten[open] .grunddaten-pfeil { transform: rotate(180deg); }
.grunddaten > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--radius); }

/* Element setzen: Piktogramme der Bausteine */
.element-leiste { margin-bottom: 20px; }
.element-titel { margin: 0 0 10px; }
.element-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.element { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 6px 7px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); cursor: pointer; font: inherit; }
.element:hover { border-color: var(--accent); background: var(--accent-soft); }
.element:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.element-name { font-size: 0.78rem; line-height: 1.2; text-align: center; }
.pk { display: block; width: 100%; max-width: 104px; height: auto; }
.pk-zeile { fill: var(--border-strong); }
.pk-bild { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.pk-berg { fill: var(--accent); opacity: 0.55; }
.pk-akzent { fill: var(--accent); }
.pk-hell { fill: var(--surface); }
.pk-flaeche { fill: var(--surface-2); stroke: var(--border); stroke-width: 1; }
.element:hover .pk-flaeche { fill: var(--surface); }

.bausteine { display: flex; flex-direction: column; gap: 14px; }
.baukasten-leer { margin: 0 0 12px; }

.baustein { margin: 0; padding: 0; min-width: 0; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.baustein.is-gezogen { opacity: 0.45; }
.baustein-kopf { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 12px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: 10px 10px 0 0; }
.baustein-griff { display: grid; color: var(--text-muted); cursor: grab; }
.baustein-titel { padding: 0; margin: 0; font-weight: 600; flex: 1; float: none; width: auto; }
.baustein-aktionen { display: flex; gap: 2px; }
.baustein-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px 16px; padding: 14px 16px 16px; }
.baustein-feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.baustein-feld--breit { grid-column: 1 / -1; }
.baustein-label { font-size: 0.86rem; font-weight: 600; color: var(--text); }

.textformat-leiste { display: flex; flex-wrap: wrap; gap: 4px; }
.bildwahl { display: flex; align-items: center; gap: 12px; }
.bildwahl .input { flex: 1; min-width: 0; }
.bildwahl-vorschau { width: 64px; height: 48px; object-fit: contain; border: 1px solid var(--border); border-radius: 6px; background: repeating-conic-gradient(#e5e7eb 0% 25%, #ffffff 0% 50%) 50% / 12px 12px; flex: none; }
.bildwahl-vorschau[hidden] { display: none; }

.palette { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--border-strong); }
.palette-titel { font-weight: 600; margin-right: 4px; }

/* Vorschau: Der Rahmen ist 700 px (Desktop: Mail 600 px plus Rand) oder 390 px (Handy) breit. Reicht der Platz nicht, verkleinert app.js
   ihn mit --skala (Maßstab 0 bis 1); das Blatt ist dann entsprechend schmaler, die Mail wird nur kleiner gezeichnet, nie umgebrochen. */
.vorschau-karte { display: flex; flex-direction: column; overflow: hidden; }
.vorschau-werkzeuge { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vorschau-umschalter { display: flex; gap: 6px; }
.vorschau-umschalter .btn.is-active { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.vorschau-rahmen { --rahmen-breite: 700px; --skala: 1; flex: 1; min-height: 480px; padding: 12px; background: var(--surface-2); overflow: hidden; display: flex; justify-content: center; }
.vorschau-rahmen--handy { --rahmen-breite: 390px; }
.vorschau-blatt { width: calc(var(--rahmen-breite) * var(--skala)); height: 100%; overflow: hidden; border: 1px solid var(--border); border-radius: 8px; background: #ffffff; flex: none; }
.vorschau-frame { display: block; width: var(--rahmen-breite); height: calc(100% / var(--skala)); border: 0; background: #ffffff; transform: scale(var(--skala)); transform-origin: top left; }
@media (max-width: 1399px) {
    .vorschau-rahmen { flex: none; height: 75vh; }
}
.vorschau-test { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.vorschau-test-feld { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; }

/* Versand */
.versand-wahl { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.versand-wahl .baustein-feld { flex: 1 1 320px; }
.versenden-leiste { margin-bottom: 16px; }
.pruefliste { list-style: none; margin: 0; padding: 0; }
.pruefpunkt { display: flex; gap: 12px; align-items: flex-start; padding: 12px 22px; border-bottom: 1px solid var(--border); }
.pruefpunkt:last-child { border-bottom: 0; }
.pruefpunkt-symbol { display: grid; margin-top: 1px; }
.pruefpunkt--ok .pruefpunkt-symbol { color: var(--success); }
.pruefpunkt--warnung .pruefpunkt-symbol { color: var(--warning); }
.pruefpunkt--fehler .pruefpunkt-symbol { color: var(--danger); }
.versand-fortschritt { display: flex; flex-direction: column; gap: 16px; }
.versand-fortschritt progress { width: 100%; height: 14px; accent-color: var(--accent); }
.versand-fortschritt .kennzahlen { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }

/* Verteiler */
.zusatz-formular { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; }
.zusatz-formular .baustein-feld { flex: 1 1 220px; }
.kundenauswahl { list-style: none; margin: 12px 0 0; padding: 0; max-height: 360px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.kundenauswahl li { padding: 7px 12px; border-bottom: 1px solid var(--border); }
.kundenauswahl li:last-child { border-bottom: 0; }
.kundenauswahl li[hidden] { display: none; }

/* Bildbibliothek */
.medien-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 20px; }
.medien-karte { display: flex; flex-direction: column; overflow: hidden; }
.medien-karte .card-body { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.medien-bild { display: grid; place-items: center; height: 160px; padding: 12px; background: repeating-conic-gradient(#eceff3 0% 25%, #ffffff 0% 50%) 50% / 16px 16px; border-bottom: 1px solid var(--border); }
.medien-bild img { max-width: 100%; max-height: 100%; object-fit: contain; }
.medien-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.medien-alt { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; align-items: flex-start; }
.medien-alt .baustein-feld { width: 100%; }

/* Bausteine zuklappen: der Kopf zeigt dann den Anfang des Inhalts */
.baustein-kurz { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.85rem; }
.baustein:not(.is-zu) .baustein-kurz { visibility: hidden; }
.baustein.is-zu .baustein-felder { display: none; }
.baustein.is-zu .baustein-kopf { border-bottom: 0; border-radius: 10px; }
.baustein [data-aktion="einklappen"] svg { transition: transform 0.15s; }
.baustein.is-zu [data-aktion="einklappen"] svg { transform: rotate(-90deg); }
.baustein-titel { flex: none; }
/* Bild ersetzen */
.medien-ersetzen { margin-top: 8px; }
.medien-ersetzen > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.medien-ersetzen > summary::-webkit-details-marker { display: none; }
.medien-ersetzen-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin-top: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.medien-ersetzen-form .baustein-feld { width: 100%; }

/* Design-Karten: mehrere Aktionen, eigene Designs ohne eigene Kennfarbe */
.design-aktionen { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.design-aktionen form { margin: 0; }
.infomail-design { background: var(--surface-2); color: var(--text); border-color: var(--border); }

.design-logo { height: 36px; width: auto; max-width: 110px; object-fit: contain; margin-right: 6px; }