/* Schritt 10f: Mailing – Mails & Erinnerungen je Veranstaltung (.em-*) und Seite Mein Bereich › Mailing (.ml-*).
   Farben wie css/vdg-design.css: Grün #cae2a6, helle Fläche #f7faf1, Kästen 24px. */

/* ---------- Veranstaltung › Mails & Erinnerungen ---------- */
.em-page .em-testmode,.ml-testmode{background:#fff6e0;border:1px solid #f0d9a0;color:#6b4a10;border-radius:12px;padding:10px 14px;margin:12px 0;font-size:14.5px}
.em-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0 8px}
.em-card,.ml-card{background:#fff;border:1px solid #e3ebe0;border-radius:24px;padding:20px 22px}
.em-card h2,.ml-card h2{font-size:20px;margin:0 0 8px;color:#0a0a0b}
.em-card h2 small,.ml-card h2 small{font-weight:500;font-size:14px;color:#6b7a70}
.em-card p{margin:0 0 12px;color:#3d4d5e;font-size:15px}
.em-inline{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.em-inline input{flex:1 1 220px;min-width:0;padding:9px 12px;border:1px solid #d9e3d5;border-radius:12px;font:inherit}
.em-h2{font-size:24px;margin:30px 0 6px;color:#0a0a0b}
.em-lead{color:#4a5a4f;margin:0 0 14px;max-width:90ch}
.em-lead code{background:#f7faf1;border:1px solid #e0eecb;border-radius:6px;padding:1px 5px;font-size:13.5px}
.em-slots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.em-slot{background:#fff;border:1px solid #e3ebe0;border-radius:22px;padding:18px 20px;display:grid;gap:10px;align-content:start}
.em-slot.is-suggested{border-color:#e7c66b;box-shadow:inset 4px 0 0 #e7c66b}
.em-slot.is-approved,.em-slot.is-due{border-color:#cae2a6;box-shadow:inset 4px 0 0 #7fb069}
.em-slot.is-done{background:#f7faf1}
.em-slot-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:flex-start}
.em-slot-head h3{margin:0;font-size:19px}
.em-due{color:#3d4d5e;font-size:14.5px;margin-top:2px}
.em-pill{display:inline-block;border-radius:999px;padding:4px 11px;font-size:13.5px;font-weight:600;background:#eef3e8;color:#3d4d5e}
.em-pill.is-todo{background:#fff1c9;color:#6b4a10}
.em-pill.is-ok{background:#cae2a6;color:#0a0a0a}
.em-pill.is-sent{background:#1c5027;color:#fff}
.em-pill.is-warn{background:#fde2d8;color:#8a2c12}
.em-pill.is-off{background:#eef0ee;color:#6b7280}
.em-switch{display:flex;gap:8px;align-items:center;font-size:15px}
.em-field{display:grid;gap:4px;font-size:14.5px;color:#3d4d5e}
.em-field small{color:#7a877e}
.em-field input,.em-field textarea{font:inherit;padding:9px 11px;border:1px solid #d9e3d5;border-radius:12px;background:#fff;width:100%;box-sizing:border-box}
.em-actions{display:flex;flex-wrap:wrap;gap:8px}
.em-sent-text p{margin:6px 0 0;color:#4a5a4f;font-size:14.5px}
.em-preview{border-top:1px solid #e3ebe0;padding-top:10px}
.em-preview-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;margin-bottom:6px}
.em-preview iframe,.ml-compose-preview iframe{width:100%;height:560px;border:1px solid #dbe8e1;border-radius:12px;background:#fff}
.em-history td,.em-history th{font-size:14.5px}
@media(max-width:980px){.em-grid{grid-template-columns:1fr}.em-slots{grid-template-columns:1fr}}

/* ---------- Mein Bereich › Mailing ---------- */
#page-mein .ml-tabs{margin:6px 0 18px;display:flex;flex-wrap:wrap;gap:8px}
#page-mein .ml-badge{display:inline-block;min-width:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:#e7c66b;color:#3a2a00;font-size:12.5px;text-align:center;line-height:20px}
#page-mein .ml-card{margin:0 0 16px}
#page-mein .ml-lead{color:#4a5a4f;margin:0 0 10px;max-width:90ch}
#page-mein .ml-muted{color:#6b7a70;font-size:14px}
#page-mein .ml-note{background:#fff1c9;border-radius:12px;padding:9px 13px;display:inline-block}
#page-mein .ml-note.is-ok{background:#f7faf1}
#page-mein .ml-warn{color:#a3361b;font-weight:600}
#page-mein .ml-events{display:grid;gap:10px}
#page-mein .ml-event{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto;gap:14px;align-items:center;background:#fff;border:1px solid #e3ebe0;border-radius:18px;padding:14px 16px}
#page-mein .ml-event.is-empty{opacity:.75}
#page-mein .ml-event-title{font-weight:700;color:#0a0a0b;text-decoration:none;font-size:16.5px}
#page-mein .ml-event-title:hover{text-decoration:underline}
#page-mein .ml-event-meta{font-size:14px;color:#4a5a4f;margin-top:2px}
#page-mein .ml-chips{display:flex;flex-wrap:wrap;gap:6px}
#page-mein .ml-chip{display:grid;border-radius:12px;padding:5px 10px;font-size:13.5px;font-weight:600;background:#eef0ee;color:#3d4d5e;min-width:84px}
#page-mein .ml-chip small{font-weight:500;font-size:12.5px}
#page-mein .ml-chip.is-suggested{background:#fff1c9;color:#6b4a10}
#page-mein .ml-chip.is-approved,#page-mein .ml-chip.is-due{background:#cae2a6;color:#0a0a0a}
#page-mein .ml-chip.is-sent{background:#1c5027;color:#fff}
#page-mein .ml-chip.is-missed{background:#fde2d8;color:#8a2c12}
#page-mein .ml-split{display:grid;grid-template-columns:minmax(260px,340px) minmax(0,1fr);gap:16px;align-items:start}
#page-mein .ml-side h2{font-size:17px;margin:4px 0 10px}
#page-mein .ml-side h2 + .ml-list{margin-bottom:18px}
#page-mein .ml-newlist{display:flex;gap:6px;margin-bottom:12px}
#page-mein .ml-newlist input{flex:1;min-width:0;padding:8px 10px;border:1px solid #d9e3d5;border-radius:12px;font:inherit}
#page-mein .ml-list{display:grid;gap:4px}
#page-mein .ml-list-item{display:grid;text-align:left;border:1px solid transparent;background:none;border-radius:12px;padding:8px 10px;font:inherit;cursor:pointer}
#page-mein .ml-list-item small{color:#6b7a70;font-size:13px}
#page-mein .ml-list-item:hover{background:#f7faf1}
#page-mein .ml-list-item.active{background:#cae2a6}
#page-mein .ml-detail-head{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
#page-mein .ml-detail-head h2{margin:2px 0}
#page-mein .ml-detail-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start}
#page-mein .ml-rename{display:flex;flex-wrap:wrap;gap:6px}
#page-mein .ml-rename input{padding:8px 10px;border:1px solid #d9e3d5;border-radius:12px;font:inherit}
#page-mein .ml-rename input[name=name]{font-weight:700;font-size:17px;min-width:220px}
#page-mein .ml-add{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#f7faf1;border:1px solid #e0eecb;border-radius:18px;padding:14px 16px;margin-bottom:12px}
#page-mein .ml-add h3{margin:0 0 8px;font-size:16px}
#page-mein .ml-add-col{display:grid;gap:8px;align-content:start}
#page-mein .ml-add input[type=search]{padding:8px 10px;border:1px solid #d9e3d5;border-radius:12px;font:inherit}
#page-mein .ml-checks{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14.5px}
#page-mein .ml-res{list-style:none;margin:0;padding:0;display:grid;gap:4px;max-height:260px;overflow:auto}
#page-mein .ml-res li{display:flex;justify-content:space-between;gap:8px;align-items:center;background:#fff;border-radius:10px;padding:6px 8px}
#page-mein .ml-res small{color:#6b7a70}
#page-mein .ml-res em{color:#6b7a70;font-size:13px}
#page-mein .ml-count{margin:8px 0;font-size:14.5px;color:#3d4d5e}
#page-mein .ml-x{border:0;background:none;color:#8a2c12;cursor:pointer;font-size:15px}
#page-mein tr.is-optout td{color:#8a958d}
#page-mein .ml-compose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
#page-mein .ml-compose-preview{position:sticky;top:150px;background:#fff;border:1px solid #e3ebe0;border-radius:24px;padding:14px}
#page-mein .ml-prev-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;margin-bottom:8px}
#page-mein .ml-prev-nav{display:flex;gap:6px;align-items:center}
#page-mein .ml-prev-nav button{border:1px solid #d9e3d5;background:#fff;border-radius:999px;width:28px;height:28px;cursor:pointer}
#page-mein .ml-step{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#cae2a6;font-size:14px;margin-right:6px;vertical-align:2px}
#page-mein .ml-picks{display:grid;gap:12px;max-height:340px;overflow:auto}
#page-mein .ml-pick-h{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#3d4d5e;margin-bottom:4px}
#page-mein .ml-pick{display:flex;gap:8px;align-items:flex-start;padding:6px 8px;border-radius:10px;cursor:pointer}
#page-mein .ml-pick span{display:grid}
#page-mein .ml-pick small{color:#6b7a70;font-size:13px}
#page-mein .ml-pick.is-on{background:#f7faf1}
#page-mein .ml-field{display:grid;gap:4px;font-size:14.5px;color:#3d4d5e;margin:8px 0}
#page-mein .ml-field small{color:#7a877e}
#page-mein .ml-field > input,#page-mein .ml-block input,#page-mein .ml-block textarea,#page-mein .ml-block select{font:inherit;padding:9px 11px;border:1px solid #d9e3d5;border-radius:12px;background:#fff;width:100%;box-sizing:border-box}
#page-mein .ml-styles{display:grid;gap:4px}
#page-mein .ml-style{display:flex;gap:8px;align-items:center;padding:7px 10px;border:1px solid #e3ebe0;border-radius:12px;cursor:pointer;font-size:15px}
#page-mein .ml-style.is-on{background:#cae2a6;border-color:#cae2a6}
#page-mein .ml-block{border:1px solid #e3ebe0;border-radius:16px;padding:10px 12px;margin-bottom:10px;display:grid;gap:6px;background:#fff}
#page-mein .ml-block-head{display:flex;justify-content:space-between;align-items:center;font-size:14.5px}
#page-mein .ml-block-head button{border:1px solid #d9e3d5;background:#fff;border-radius:8px;cursor:pointer;margin-left:4px;padding:1px 7px}
#page-mein .ml-row2{display:grid;grid-template-columns:1fr 1.4fr;gap:6px}
#page-mein .ml-addblocks{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 8px}
#page-mein .ml-send-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
#page-mein .ml-progress{margin-top:10px;background:#f7faf1;border-radius:12px;padding:9px 12px}
#page-mein .ml-progress.is-done{background:#cae2a6}
@media(max-width:980px){
  #page-mein .ml-split,#page-mein .ml-compose,#page-mein .ml-add{grid-template-columns:1fr}
  #page-mein .ml-event{grid-template-columns:1fr}
  #page-mein .ml-compose-preview{position:static}
}
/* Schritt 10g: wichtige Information */
#page-mein .ml-important{display:flex;gap:10px;align-items:flex-start;margin-top:10px;padding:10px 12px;border:1px solid #f0d9a0;background:#fffaf0;border-radius:14px;cursor:pointer;font-size:15px}
#page-mein .ml-important small{display:block;color:#6b5a30;font-size:13.5px;margin-top:3px}
#page-mein .ml-important.is-on{background:#fff1c9;border-color:#e7c66b}
#page-mein .ml-imp-tag{display:inline-block;background:#fff1c9;color:#6b4a10;border-radius:999px;padding:1px 8px;font-size:12.5px;font-weight:600}

/* ---------- Schritt 10h: Erinnerung bearbeiten (Bausteine + Vorschau) ---------- */
.em-slot.is-open{grid-column:1 / -1}
.em-summary b{display:block;margin-bottom:4px}
.em-summary p{margin:0;color:#4a5a4f;font-size:14.5px}
.em-edited{display:block;margin-top:6px;color:#6b7a70;font-size:13px}
.em-hint{color:#6b7a70;font-size:13.5px}
.em-editor{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:start}
.em-editor-form{display:grid;gap:10px}
.em-field select{font:inherit;padding:9px 11px;border:1px solid #d9e3d5;border-radius:12px;background:#fff}
.em-editor-preview{position:sticky;top:150px}
.em-editor-preview .em-preview-head{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:14px;margin-bottom:6px}
.em-editor-preview iframe{width:100%;height:640px;border:1px solid #dbe8e1;border-radius:12px;background:#fff}
/* gemeinsamer Baukasten (js/ui/mail-blocks.js) */
.mb-list{display:grid;gap:8px;margin:4px 0 8px}
.mb-block{border:1px solid #e3ebe0;border-radius:14px;padding:10px 12px;display:grid;gap:6px;background:#fff}
.mb-block.is-eventinfo,.mb-block.is-calendar{background:#f7faf1;border-style:dashed}
.mb-head{display:flex;justify-content:space-between;align-items:center;font-size:14.5px}
.mb-head button{border:1px solid #d9e3d5;background:#fff;border-radius:8px;cursor:pointer;margin-left:4px;padding:1px 7px;font:inherit}
.mb-head button:disabled{opacity:.4;cursor:default}
.mb-x{color:#8a2c12}
.mb-block input,.mb-block textarea,.mb-block select{font:inherit;padding:8px 10px;border:1px solid #d9e3d5;border-radius:10px;background:#fff;width:100%;box-sizing:border-box}
.mb-row2{display:grid;grid-template-columns:1fr 1.4fr;gap:6px}
.mb-hint{color:#6b7a70;font-size:13.5px}
.mb-add{display:flex;flex-wrap:wrap;gap:6px}
@media(max-width:980px){.em-editor{grid-template-columns:1fr}.em-editor-preview{position:static}.mb-row2{grid-template-columns:1fr}}

/* ---------- Schritt 10i: Automatik + Standard-Vorlage ---------- */
.ml-auto{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:16px;border-width:2px}
.ml-auto.is-on{background:#F7FAF1;border-color:#CAE2A6}
.ml-auto-main{display:flex;gap:14px;align-items:flex-start;flex:1 1 420px;min-width:0}
.ml-auto-main p{margin:0;color:#3d4a40;line-height:1.5}
.ml-auto-icon{flex:0 0 44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:22px;background:#eef1ec;color:#55635a}
.ml-auto.is-on .ml-auto-icon{background:#CAE2A6;color:#0a0a0b}
.ml-tpls{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:10px}
.ml-tpl{min-width:0;border:1px solid #e3ebe0;border-radius:16px;padding:12px 14px;background:#fff}
.ml-tpl select,.ml-tpl input,.ml-tpl textarea{max-width:100%;min-width:0}
.ml-tpl.is-open{border-color:#CAE2A6;background:#fcfdf9}
.ml-tpl.is-off .ml-tpl-sum{opacity:.7}
.ml-tpl-head{display:grid;grid-template-columns:minmax(150px,220px) minmax(0,1fr) auto;gap:12px;align-items:center}
.ml-tpl-head h3{margin:0;font-size:16px;color:#0a0a0b}
.ml-tpl-head small{color:#6b7a70}
.ml-tpl-sum{min-width:0;overflow-wrap:anywhere}
.ml-tpl .em-editor{margin-top:12px}
#page-mein .ml-chip.is-auto{background:#e4f0d2;color:#1c5027}
.em-lead.em-auto-on{background:#F7FAF1;border:1px solid #CAE2A6;border-radius:14px;padding:10px 14px}
@media(max-width:720px){.ml-tpl{padding:10px}.ml-tpl-head{grid-template-columns:minmax(0,1fr)}.ml-tpl-head .btn{justify-self:start}}

/* Schritt 10l: Gruß und Signatur der Sammelmail */
.ml-sender{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 14px}
.ml-sender .ml-field:last-child{grid-column:1 / -1}
@media(max-width:720px){.ml-sender{grid-template-columns:minmax(0,1fr)}}

/* Schritt 10m: Signatur bearbeiten */
.sg-page .ml-card{margin-bottom:14px}
.sg-page .ml-card h2 small{font-weight:500;font-size:14px;color:#6b7a70}
.sg-rows{display:grid;gap:10px;margin:8px 0 10px}
.sg-row{border:1px solid #e3ebe0;border-radius:14px;padding:10px 12px;background:#fcfdf9}
.sg-row.is-off{opacity:.7}
.sg-row-head{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}
.sg-row-head span{display:flex;gap:4px}
.sg-row-head button{border:1px solid #dbe5d6;background:#fff;border-radius:8px;width:30px;height:28px;cursor:pointer}
.sg-row-head button:disabled{opacity:.35;cursor:default}
.sg-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sg-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;flex:1}
.sg-imgrow{display:flex;gap:12px;align-items:flex-start}
.sg-img{flex:0 0 auto;width:var(--sg-size);display:grid;gap:6px;justify-items:start}
.sg-img img{max-width:100%;max-height:120px;border:1px solid #e3ebe0;border-radius:6px;background:#fff}
.sg-img.is-empty span{display:grid;place-items:center;width:100%;min-height:48px;border:1px dashed #b9cfae;border-radius:8px;color:#8a958c;font-size:13px;background:#fff}
.sg-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:4px 0 20px}
@media(max-width:900px){.sg-grid3{grid-template-columns:minmax(0,1fr)}}
@media(max-width:720px){.sg-grid2{grid-template-columns:minmax(0,1fr)}.sg-imgrow{flex-direction:column}.sg-img{width:100%}}
.sg-img .btn{white-space:nowrap}
.sg-row-img .sg-img img{max-width:100%}
.sg-img{width:auto;min-width:var(--sg-size);max-width:100%}

/* Schritt 10o: FGC – Serienmail an alle Angemeldeten */
.fgc-mailbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#F7FAF1;border:1px solid #CAE2A6;border-radius:14px;padding:10px 14px;margin:0 0 12px}
.fgc-mailbar span{flex-basis:100%;font-size:14px;color:#3d4a40}
/* 10o: Verteiler auf dem Handy ohne Querscrollen */
@media(max-width:820px){#page-mein .ml-split,#page-mein .ml-compose,#page-mein .ml-add{grid-template-columns:minmax(0,1fr)}#page-mein .ml-side,#page-mein .ml-detail{min-width:0}#page-mein .ml-newlist{display:flex;flex-wrap:wrap;gap:6px}#page-mein .ml-newlist input{flex:1 1 160px;min-width:0}}
#page-wissen .team-only .btn{white-space:normal;max-width:100%}

/* Schritt 12x: Ablauf der Mails und Bestätigungstexte */
.em-flow ol{margin:6px 0 8px;padding-left:20px;display:grid;gap:6px}
.em-flow li b{display:block;font-size:14px}
.em-flow li small{display:block;color:#5b6670;font-size:12.5px}
.em-flow li.is-off{opacity:.55}
.em-conf .em-editor-form{padding:4px 2px 2px}
.em-conf textarea{width:100%;font:inherit;padding:8px 10px;border:1px solid #cfd8c8;border-radius:10px}
/* Schritt 12y: Zeitpunkt ändern, Vorschau der Bestätigung */
.em-due small{color:#5b6670}
.em-due-edit{margin-top:8px;flex-wrap:wrap;gap:8px}
.em-due-edit input{padding:6px 8px;border:1px solid #cfd8c8;border-radius:8px;font:inherit}
.em-conf-preview{margin:10px 0}
.em-conf-preview iframe{width:100%;height:520px;border:1px solid #e1e6dd;border-radius:10px;background:#fff}

/* Schritt 13d: Bild zuschneiden (js/ui/img-crop.js) und Größenregler der Aktionsbilder */
.ic-ov{position:fixed;inset:0;background:rgba(15,25,20,.6);z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.ic-dlg{background:#fff;border-radius:16px;padding:20px 22px;max-width:700px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.35)}
.ic-dlg h2{margin:0 0 4px}
.ic-hint,.ic-info{font-size:13.5px;color:#5b6670;margin:4px 0 10px}
.ic-fmts{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.ic-fmt{border:1px solid #cfd8c8;background:#fff;border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.ic-fmt.on{background:#1c5027;color:#fff;border-color:#1c5027}
.ic-stage{display:flex;justify-content:center;background:repeating-conic-gradient(#eef1ea 0% 25%, #fff 0% 50%) 50%/20px 20px;padding:12px;border-radius:10px}
.ic-frame{position:relative;overflow:hidden;cursor:grab;touch-action:none;outline:2px solid #1c5027}
.ic-frame:active{cursor:grabbing}
.ic-frame img{position:absolute;max-width:none;user-select:none;pointer-events:none}
.ic-zoom{display:flex;align-items:center;gap:10px;margin:12px 0 0;font-size:14px}.ic-zoom input{flex:1}
.ic-btns{display:flex;justify-content:flex-end;gap:10px;margin-top:10px}
.sg-range{display:block}.sg-range input{width:100%}
.sg-img .btn+.btn{margin-top:6px}