/* ITSK Forum – einheitliches Beitragsbild
 * Gilt für die Anzeige (.post-content) und den Editor (.ql-editor) gleichermaßen,
 * damit ein Beitrag beim Schreiben genauso aussieht wie später im Thema.
 * "html body" erhöht die Spezifität, damit Quills Reset (margin:0) überschrieben wird.
 */

/* ---------- Grundtext ---------- */
html body .post-content,
html body .ql-container .ql-editor {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--text, #f0eee9);
  overflow-wrap: anywhere;
}
html body .ql-container .ql-editor { padding: 16px 18px; }
html body .post-content > :first-child,
html body .ql-container .ql-editor > :first-child { margin-top: 0; }
html body .post-content > :last-child,
html body .ql-container .ql-editor > :last-child { margin-bottom: 0; }

/* ---------- Absätze ---------- */
html body .post-content p,
html body .ql-container .ql-editor p { margin: 0 0 0.85em; }

/* alte Beiträge mit vielen Leerzeilen kompakt anzeigen (nur Anzeige, nicht im Editor) */
html body .post-content p.leer { margin: 0; height: 0.35em; overflow: hidden; }

/* ---------- Überschriften ---------- */
html body .post-content :is(h1, h2, h3),
html body .ql-container .ql-editor :is(h1, h2, h3) {
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.2px;
  color: var(--text, #f0eee9);
}
html body .post-content h1,
html body .ql-container .ql-editor h1 { font-size: 1.55rem; margin: 1.3em 0 0.6em; }
html body .post-content h2,
html body .ql-container .ql-editor h2 {
  font-size: 1.3rem;
  margin: 1.4em 0 0.6em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--border, #262b36);
}
html body .post-content h3,
html body .ql-container .ql-editor h3 {
  font-size: 1.08rem;
  margin: 1.4em 0 0.45em;
  color: var(--accent, #4d9fff);
}

/* ---------- Listen (Quill-Darstellung, überall gleich) ---------- */
html body .post-content :is(ul, ol),
html body .ql-container .ql-editor :is(ul, ol) { margin: 0 0 1em; padding-left: 0.6em; }
html body .post-content li,
html body .ql-container .ql-editor li { margin: 0.2em 0; }
html body .post-content li::before,
html body .ql-container .ql-editor li::before { color: var(--accent, #4d9fff); font-weight: 600; }
/* Listen außerhalb von .ql-editor (z. B. Klartext-Beiträge) */
html body .post-content:not(.ql-editor) :is(ul, ol) { padding-left: 1.6em; }
html body .post-content:not(.ql-editor) li::marker { color: var(--accent, #4d9fff); }

/* ---------- Zitat / Hinweis-Box ---------- */
html body .post-content blockquote,
html body .ql-container .ql-editor blockquote {
  margin: 0 0 1em;
  padding: 10px 16px;
  border-left: 4px solid var(--accent, #4d9fff);
  background: var(--accent-soft, rgba(77,159,255,.12));
  border-radius: 0 8px 8px 0;
  color: var(--text, #f0eee9);
}

/* ---------- Code ---------- */
html body .post-content pre,
html body .ql-container .ql-editor pre.ql-syntax {
  margin: 0 0 1em;
  border-radius: 8px;
  font-size: 0.9rem;
  line-height: 1.55;
}
html body .post-content .pre-wrap { margin: 0 0 1em; }
html body .post-content .pre-wrap > pre { margin: 0; }

/* ---------- Trennlinie ---------- */
html body .post-content hr,
html body .ql-container .ql-editor hr {
  border: 0;
  height: 1px;
  background: var(--border, #262b36);
  margin: 1.6em 0;
}

/* ---------- Bilder, Videos, Links ---------- */
html body .post-content img,
html body .ql-container .ql-editor img { max-width: 100%; height: auto; border-radius: 8px; margin: 4px 0; }
html body .post-content iframe.ql-video,
html body .ql-container .ql-editor iframe.ql-video { margin: 0 0 1em; border-radius: 8px; }
html body .post-content a,
html body .ql-container .ql-editor a { color: var(--accent, #4d9fff); }

/* ---------- Grußzeile ---------- */
html body .post-content p.post-gruss { margin-top: 1.2em; }

/* ---------- Changelog-Überschriften (automatisch für T-Rex) ---------- */
html body .post-content .cl-label {
  display: inline-block;
  font-size: 1.05rem;
  margin: 1.3em 0 0.5em;
  padding: 2px 12px 2px 10px;
  border-bottom: 0;
  border-radius: 0 6px 6px 0;
}
html body .post-content .cl-neu {
  color: #8ce99a;
  border-left: 4px solid #8ce99a;
  background: rgba(140, 233, 154, 0.10);
}
html body .post-content .cl-behoben {
  color: #74c0fc;
  font-style: italic;
  border-left: 4px solid #74c0fc;
  background: rgba(116, 192, 252, 0.10);
}
html body .post-content .cl-bugfix {
  color: #ffa8a8;
  font-style: italic;
  border-left: 4px solid #ffa8a8;
  background: rgba(255, 168, 168, 0.10);
}
html body .post-content .cl-neu + :is(ul, ol) li::before { color: #8ce99a; }
html body .post-content .cl-behoben + :is(ul, ol) li::before { color: #74c0fc; }
html body .post-content .cl-bugfix + :is(ul, ol) li::before { color: #ffa8a8; }

/* ---------- Werkzeugleiste ---------- */
.ql-toolbar.ql-snow { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.ql-toolbar.ql-snow .ql-formats { margin-right: 8px; }
.ql-toolbar.ql-snow button.btn-autoformat {
  width: auto;
  height: 28px;
  padding: 3px 10px;
  margin-left: 4px;
  border: 1px solid var(--accent, #4d9fff);
  border-radius: 6px;
  background: var(--accent-soft, rgba(77,159,255,.12));
  color: var(--accent, #4d9fff);
  font: 500 0.85rem 'IBM Plex Sans', system-ui, sans-serif;
  white-space: nowrap;
}
.ql-toolbar.ql-snow button.btn-autoformat:hover { background: var(--accent, #4d9fff); color: #fff; }

.ql-toolbar.ql-snow .ql-formats:last-child { margin-left: auto; margin-right: 0; position: relative; }
.ql-toolbar.ql-snow button.btn-templates { border-color: var(--border, #262b36); color: var(--text, #f0eee9); background: rgba(255,255,255,0.04); }
.ql-toolbar.ql-snow button.btn-templates:hover { background: rgba(255,255,255,0.1); color: var(--text, #f0eee9); }

/* Vorlagen-Menü */
.tpl-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 50;
  min-width: 240px;
  background: var(--card, #181c25);
  border: 1px solid var(--border, #262b36);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  padding: 6px;
}
.tpl-menu .tpl-head { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8e95a3); padding: 6px 10px 4px; }
.tpl-menu .tpl-foot { font-size: 0.75rem; color: var(--muted, #8e95a3); padding: 6px 10px 4px; border-top: 1px solid var(--border, #262b36); margin-top: 4px; }
.ql-toolbar.ql-snow .tpl-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; height: auto; float: none;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--text, #f0eee9);
  font: 400 0.9rem 'IBM Plex Sans', system-ui, sans-serif;
  text-align: left;
}
.ql-toolbar.ql-snow .tpl-menu button:hover { background: var(--accent-soft, rgba(77,159,255,.12)); color: var(--accent, #4d9fff); }
.tpl-menu button span { width: 20px; text-align: center; }

/* Befehle / Code im Fließtext */
html body .post-content :not(pre) > code,
html body .ql-container .ql-editor :not(pre) > code {
  font-family: ui-monospace, 'Cascadia Code', Consolas, monospace;
  font-size: 0.88em;
  color: #9ecbff;
  background: #0b0d12;
  border: 1px solid var(--border, #262b36);
  border-radius: 5px;
  padding: 1px 6px;
}

/* deutsche Beschriftung der Auswahllisten */
.ql-snow .ql-picker.ql-header { width: 118px; }
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before { content: 'Text'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before { content: 'Titel'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before { content: 'Überschrift'; }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before { content: 'Zwischentitel'; }
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before { content: 'Normal'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before { content: 'Klein'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before { content: 'Groß'; }
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before { content: 'Riesig'; }

@media (max-width: 768px) {
  .ql-toolbar.ql-snow .ql-formats:last-child { margin-left: 0; }
  .tpl-menu { left: 0; right: auto; }
  html body .post-content,
  html body .ql-container .ql-editor { font-size: 1rem; }
  html body .ql-container .ql-editor { padding: 12px 14px; }
}