/* Gemeinsame Inhalts-Bausteine für Gazelle (Editor, Vorschau) UND die öffentliche Website:
   Lightbox, Layouts im Beitragstext, Datei-Kürzel, Beitragsansicht, Personenkarte.
   Akzentfarbe über --content-accent (Gazelle: App-Grün, Website: gruene.de-Grün). */

/* --- Lightbox --- */
.sc-lightbox { position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.82); padding:24px; }
.sc-lightbox.open { display:flex; }
.sc-lightbox-content { max-width:95vw; max-height:92vh; display:flex; align-items:center; justify-content:center; }
.sc-lightbox-media { max-width:95vw; max-height:92vh; border-radius:6px; box-shadow:0 8px 40px rgba(0,0,0,.5); }
.sc-lightbox-close { position:absolute; top:16px; right:20px; width:40px; height:40px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:1.3rem; cursor:pointer; line-height:1; }
.sc-lightbox-close:hover { background:rgba(255,255,255,.3); }

/* Lightbox: Blättern bei mehreren Bildern */
.sc-lightbox-nav, .sc-lightbox-counter { display:none; }
.sc-lightbox.gallery .sc-lightbox-nav { display:flex; align-items:center; justify-content:center; position:absolute; top:50%; transform:translateY(-50%);
    width:48px; height:48px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:2rem; line-height:1; cursor:pointer; }
.sc-lightbox.gallery .sc-lightbox-nav:hover { background:rgba(255,255,255,.3); }
.sc-lightbox-nav.prev { left:16px; }
.sc-lightbox-nav.next { right:16px; }
.sc-lightbox.gallery .sc-lightbox-counter { display:block; position:absolute; bottom:14px; left:0; right:0; text-align:center; color:#fff; font-size:.9rem; opacity:.85; }

/* Layouts im Beitragstext – gelten im Editor und in der Beitragsansicht (später Website).
   Klassen siehe NewsHtmlSanitizer.LayoutClasses und html-editor.js. */
:is(.jodit-wysiwyg, .news-body) img { max-width:100%; height:auto; }
:is(.jodit-wysiwyg, .news-body) .gz-cols { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:12px 0; }
:is(.jodit-wysiwyg, .news-body) .gz-cols.gz-1-1 { grid-template-columns:1fr 1fr; }
:is(.jodit-wysiwyg, .news-body) .gz-cols.gz-1-2 { grid-template-columns:1fr 2fr; }
:is(.jodit-wysiwyg, .news-body) .gz-cols.gz-2-1 { grid-template-columns:2fr 1fr; }
:is(.jodit-wysiwyg, .news-body) .gz-cols.gz-1-1-1 { grid-template-columns:1fr 1fr 1fr; }
:is(.jodit-wysiwyg, .news-body) .gz-cols.gz-1-2-1 { grid-template-columns:1fr 2fr 1fr; }
:is(.jodit-wysiwyg, .news-body) .gz-cols.gz-1-1-1-1 { grid-template-columns:repeat(4, 1fr); }
:is(.jodit-wysiwyg, .news-body) .gz-col > :first-child { margin-top:0; }
:is(.jodit-wysiwyg, .news-body) .gz-col img { display:block; width:100%; height:auto; }
.jodit-wysiwyg .gz-col { outline:1px dashed #c9c9c9; outline-offset:2px; min-height:2em; }
:is(.jodit-wysiwyg, .news-body) .gz-gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px; margin:12px 0; }
.jodit-wysiwyg .gz-gallery { outline:1px dashed #c9c9c9; outline-offset:2px; min-height:2em; }
:is(.jodit-wysiwyg, .news-body) .gz-gallery img { width:100%; height:140px; object-fit:cover; }
/* Im Editor landen Galeriebilder im Absatz des Platzhalters – der Absatz soll das Raster nicht aufbrechen. */
:is(.jodit-wysiwyg, .news-body) .gz-gallery > p { display:contents; }
:is(.jodit-wysiwyg, .news-body) .gz-video iframe { width:100%; max-width:720px; aspect-ratio:16/9; height:auto; border:0; }
.news-body img { cursor:zoom-in; }
.news-body a img { cursor:pointer; }

/* Datei-Links: Typ-Kürzel voranstellen (Farben wie die Datei-Badges im Chat). */
:is(.jodit-wysiwyg, .news-body) a:is([href$=".pdf" i], [href$=".doc" i], [href$=".docx" i], [href$=".odt" i],
    [href$=".xls" i], [href$=".xlsx" i], [href$=".ods" i], [href$=".ppt" i], [href$=".pptx" i], [href$=".odp" i])::before {
    display:inline-block; min-width:2.3em; padding:0 .35em; margin-right:.45em; border-radius:3px;
    font-size:.68em; font-weight:800; line-height:1.6; letter-spacing:.02em; color:#fff; text-align:center; vertical-align:.15em;
}
:is(.jodit-wysiwyg, .news-body) a[href$=".pdf" i]::before { content:"PDF"; background:#d93025; }
:is(.jodit-wysiwyg, .news-body) a:is([href$=".doc" i], [href$=".docx" i], [href$=".odt" i])::before { content:"DOC"; background:#2b579a; }
:is(.jodit-wysiwyg, .news-body) a:is([href$=".xls" i], [href$=".xlsx" i], [href$=".ods" i])::before { content:"XLS"; background:#217346; }
:is(.jodit-wysiwyg, .news-body) a:is([href$=".ppt" i], [href$=".pptx" i], [href$=".odp" i])::before { content:"PPT"; background:#c43e1c; }

@media (max-width: 820px) {
    :is(.jodit-wysiwyg, .news-body) .gz-cols[class] { grid-template-columns:1fr; }
    :is(.jodit-wysiwyg, .news-body) img[style*="float"] { float:none !important; display:block; margin:8px 0 !important; }
}

/* Beitragsansicht (Vorschau in Gazelle und Website) */
.news-article { max-width:820px; background:#fff; border-radius:8px; padding:28px 32px; box-shadow:0 1px 3px rgba(0,0,0,.08); line-height:1.6; color:#1d1c1d; }
.news-article .news-title { margin:0 0 4px; font-size:1.6rem; line-height:1.25; }
.news-article .news-date { color:#616061; font-size:.9rem; margin-bottom:16px; }
.news-article .news-title-img { display:block; width:100%; max-height:420px; object-fit:cover; border-radius:6px; margin-bottom:16px; }
.news-article .news-title-img:not([data-lightbox="off"]) { cursor:zoom-in; }
.news-article .news-teaser { font-weight:600; }
.news-body h2, .news-body h3, .news-body h4 { line-height:1.3; margin:1.2em 0 .4em; }
.news-body table { border-collapse:collapse; margin:12px 0; }
.news-body td, .news-body th { border:1px solid #ddd; padding:6px 8px; }
.news-body blockquote { margin:12px 0; padding:4px 16px; border-left:4px solid var(--content-accent, #005538); color:#3d3d3d; }
@media (max-width: 820px) { .news-article { padding:18px 16px; } }

/* Personenkarte (Vorschau, später Website) */
.person-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:16px; }
/* Foto links, Text fließt mit Abstand darum herum (flow-root hält das Foto innerhalb der Karte). */
.person-card { display:flow-root; background:#fff; border-radius:8px; padding:16px; box-shadow:0 1px 3px rgba(0,0,0,.08); line-height:1.45; }
.person-photo { float:left; width:120px; height:120px; margin:2px 16px 8px 0; border-radius:6px; object-fit:cover; display:flex;
    align-items:center; justify-content:center; background:#e3ece8; color:var(--content-accent, #005538); font-weight:800; font-size:2rem; }
.person-name { font-weight:800; font-size:.98rem; }
.person-function { color:var(--content-accent, #005538); font-weight:600; font-size:.8rem; margin-bottom:6px; }
/* Linksbündig statt Blocksatz: neben dem schmalen Foto rissen im Blocksatz große Wortlücken auf. */
.person-bio { font-size:.82rem; color:#3d3d3d; text-align:left; hyphens:auto; }
.person-bio p { margin:0 0 6px; }
.person-email { font-size:.78rem; word-break:break-all; }
@media (max-width: 560px) { .person-photo { width:96px; height:96px; margin-right:12px; font-size:1.6rem; } }