/**
 * FWT Newsletter-Generator
 * Datei: tools/newsletter-generator/assets/newsletter-generator.css
 * Zweck: Aussehen des Baustein-Editors und der Erklaerungs-Box
 *
 * Stand: 2026-10-11
 * Wichtig: Der Editor liegt in einem Grid-Layout. Ohne "min-width: 0" machen
 * lange Woerter (Schluessel, Code) die ganze Seite breiter.
 */
.nl-explain { border: 2px solid #0f766e; border-radius: .75rem; background: #f0faf8; padding: 1rem 1.25rem; margin-bottom: 1.5rem; min-width: 0; max-width: 100%; color: #1c2333; }
.nl-explain-title { margin: 0 0 .5rem; }
.nl-explain__big { font-size: 1.05rem; }
.nl-explain code { white-space: normal; overflow-wrap: anywhere; }
.nl-explain ol, .nl-explain ul { padding-left: 1.4rem; }
.nl-explain li { margin-bottom: .35rem; }
.nl-strong { font-weight: 700; }

.nl-editor-wrap { margin-bottom: 1.5rem; min-width: 0; max-width: 100%; position: relative; }
.nl-editor-title { margin: 0 0 .5rem; }
.nl-editor { display: flex; flex-direction: column; gap: .75rem; min-width: 0; }

.nl-card { position: relative; border: 1px solid #aeb8c6; border-radius: .75rem; background: #fff; padding: .75rem 1rem; min-width: 0; }
.nl-card__head { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.nl-card__num { font-weight: 700; color: #0f766e; min-width: 2.5rem; }
.nl-field { display: block; margin-bottom: .6rem; min-width: 0; }
.nl-field--small { max-width: 11rem; }
.nl-label { display: block; font-size: .85rem; font-weight: 700; color: #3f4a5a; margin-bottom: .2rem; }
.nl-hint { display: block; font-size: .78rem; color: #3f4a5a; margin-top: .15rem; }
.nl-row { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; min-width: 0; }

.nl-input, .nl-textarea { box-sizing: border-box; width: 100%; min-width: 0; padding: .45rem .55rem; border: 1px solid #aeb8c6; border-radius: .4rem; font: inherit; font-size: .95rem; background: #fff; color: #1c2333; }
.nl-input--auto { width: auto; max-width: 100%; }
.nl-input--num { width: 6rem; }
.nl-textarea { min-height: 6rem; resize: vertical; }
.nl-input:focus, .nl-textarea:focus { outline: 3px solid #0f766e; outline-offset: 1px; }
.nl-input[aria-invalid="true"], .nl-textarea[aria-invalid="true"] { border-color: #9b1c1c; }
.nl-check { display: inline-flex; gap: .4rem; align-items: center; font-size: .92rem; cursor: pointer; }
.nl-check input { width: 1.1rem; height: 1.1rem; }

.nl-tools { display: flex; gap: .25rem; margin-left: auto; }
.nl-btn { min-width: 2.5rem; min-height: 2.5rem; border: 1px solid #aeb8c6; border-radius: .4rem; background: #f3f5f8; color: #1c2333; font: inherit; cursor: pointer; }
.nl-btn:hover { background: #e6ebf1; }
.nl-btn:focus-visible { outline: 3px solid #0f766e; outline-offset: 1px; }
.nl-btn--del { color: #9b1c1c; }
.nl-btn--add { padding: .45rem .9rem; font-weight: 600; }
.nl-addbar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: .25rem; }
.nl-count { font-size: .85rem; color: #4a5565; }

.nl-msg { margin-top: .75rem; padding: .75rem 1rem; border-radius: .6rem; border: 1px solid #aeb8c6; background: #f3f5f8; color: #1c2333; overflow-wrap: anywhere; }
.nl-msg--err { border-color: #9b1c1c; background: #fdf0f0; }
.nl-msg--key { border: 2px solid #0f766e; background: #f0faf8; }
.nl-key { display: block; margin: .5rem 0; padding: .6rem .8rem; background: #fff; border: 1px dashed #0f766e; border-radius: .4rem; font: 700 1.15rem/1.4 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .05em; overflow-wrap: anywhere; user-select: all; }

/* ---- Newsletter-Zusätze ---- */
.nl-explain h3 { margin: 1rem 0 .4rem; font-size: 1.05rem; }
.nl-tplbar { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; margin-bottom: .75rem; }
.nl-tplbar .nl-label { margin: 0; }
.nl-btn--text { min-width: 0; padding: .35rem .75rem; font-size: .9rem; }
.nl-imgfield { margin-bottom: .6rem; min-width: 0; }
.nl-imgrow { display: flex; flex-wrap: wrap; gap: .5rem .75rem; align-items: center; }
.nl-thumb { width: 4.5rem; height: 3.25rem; object-fit: cover; border: 1px solid #aeb8c6; border-radius: .35rem; background: #fff; }
.nl-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.nl-col { min-width: 0; border: 1px dashed #aeb8c6; border-radius: .5rem; padding: .6rem .75rem; }
@media (max-width: 40rem) { .nl-cols { grid-template-columns: minmax(0, 1fr); } }
.nl-msg:empty { display: none; }

.nl-colorfield { min-width: 0; }
.nl-colorrow { display: flex; align-items: center; gap: .5rem; }
.nl-color { width: 2.75rem; height: 2.25rem; padding: 0; border: 1px solid #aeb8c6; border-radius: .35rem; background: #fff; cursor: pointer; }
.nl-color:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================
   Zweispaltige Ansicht auf breiten Bildschirmen (ab 75rem = 1200 px)
   Links: Formular (scrollt mit der Seite). Rechts: Vorschau, die STEHEN BLEIBT.
   Ist die Mail länger als die Vorschau, scrollt die Vorschau in sich selbst.
   Darunter bleibt die Leiste mit den Knöpfen (Speichern, Kopieren ...) sichtbar.
   Auf schmaleren Bildschirmen bleibt alles untereinander wie bisher.
   Technik: :has() erkennt das Newsletter-Layout, ohne das gemeinsame Kit zu ändern.
   Ältere Browser ohne :has() zeigen einfach die bisherige Anordnung.
   ============================================================ */
@media (min-width: 75rem) {
    .site-wrap.gk-layout--stacked:has(.nl-editor-wrap) {
        width: min(calc(100% - 2rem), 112rem);
        max-width: none;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        align-items: start;
    }

    .gk-layout--stacked:has(.nl-editor-wrap) .gk-output {
        position: sticky;
        top: 1rem;
        display: flex;
        flex-direction: column;
        gap: .75rem;
        height: calc(100vh - 2rem);
        min-height: 24rem;
    }

    /* Vorschau-Karte füllt den freien Platz */
    .gk-layout--stacked:has(.nl-editor-wrap) .gk-output > .gk-card:first-child {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .gk-layout--stacked:has(.nl-editor-wrap) .gk-output > .gk-card:first-child .gk-stage {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
    }
    .gk-layout--stacked:has(.nl-editor-wrap) .gk-frame-wrap {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
    }
    /* Hinweise unter der Vorschau: begrenzt und selbst scrollbar */
    .gk-layout--stacked:has(.nl-editor-wrap) .gk-warn {
        max-height: 6.5rem;
        overflow-y: auto;
    }

    /* Knopf-Leiste: bleibt sichtbar, scrollt notfalls selbst */
    .gk-layout--stacked:has(.nl-editor-wrap) .gk-output > .gk-card:last-child {
        flex: 0 1 auto;
        max-height: 38%;
        overflow-y: auto;
    }
}

/* ============================================================
   Fehlermeldungen unter der Vorschau gut sichtbar (gelb statt kleines Grau)
   ============================================================ */
.nl-status--warn {
    margin: 0 .9rem .9rem !important;
    padding: .6rem .8rem !important;
    border-left: 4px solid #d97706;
    border-radius: .5rem;
    background: #fffbeb;
    color: #7c2d12 !important;
    font-size: .92rem !important;
    font-weight: 600;
}
/* Kurzes Aufleuchten des Feldes, zu dem die Seite gesprungen ist */
.nl-field-flash { outline: 3px solid #d97706; outline-offset: 2px; transition: outline-color .3s; }
.nl-mailgroup { margin-bottom: 1rem; }