/* PDF Monster - Markdown-to-PDF
 * Layout-Prefix: .md2pdf-*  (Container, Editor, Preview, Optionen)
 * Preview-Prefix: .md-*     (Inhalt + Themes)
 */

/* ============ Layout-Container ============ */

.md2pdf-card {
  max-width: 1280px;
  margin: 24px auto;
  padding: 16px;
}

.md2pdf-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}

@media (max-width: 900px) {
  .md2pdf-grid { grid-template-columns: 1fr; }
}

.md2pdf-editor-panel,
.md2pdf-preview-panel {
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 520px;
}

.md2pdf-toolbar,
.md2pdf-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.md2pdf-label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text, #1f2937);
  margin-right: auto;
}

.md2pdf-preview-meta {
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
}

.md2pdf-file-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #f3f4f6;
  color: #111827;
  cursor: pointer;
  font-size: 0.85rem;
  border: 1px solid #e5e7eb;
}
.md2pdf-file-btn:hover { background: #e5e7eb; }

.md2pdf-mini-btn {
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: #374151;
  font-size: 0.85rem;
  cursor: pointer;
}
.md2pdf-mini-btn:hover { background: #f9fafb; }

.md2pdf-textarea {
  flex: 1;
  width: 100%;
  min-height: 420px;
  resize: vertical;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #111827;
  background: #fafafa;
}
.md2pdf-textarea:focus {
  outline: none;
  border-color: #6366f1;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.md2pdf-hint {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--muted, #6b7280);
}

.md2pdf-preview-scroll {
  flex: 1;
  overflow: auto;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #fafafa;
  padding: 4px;
  min-height: 420px;
  max-height: 70vh;
}

/* Optionen-Leiste */
.md2pdf-options {
  margin-top: 18px;
  padding: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
}

.md2pdf-options-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

@media (max-width: 900px) {
  .md2pdf-options-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .md2pdf-options-grid { grid-template-columns: 1fr; }
}

.md2pdf-option { display: flex; flex-direction: column; gap: 6px; }
.md2pdf-select,
.md2pdf-input {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #fff;
  font-size: 0.92rem;
  color: #111827;
}
.md2pdf-select:focus,
.md2pdf-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99,102,241,.15);
}

.md2pdf-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.md2pdf-privacy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--muted, #6b7280);
  margin: 0;
}

/* SEO Section */
.md2pdf-seo { padding: 32px 0; }
.md2pdf-seo .container { max-width: 980px; }
.md2pdf-seo h3 { margin-top: 22px; font-size: 1.15rem; }
.md2pdf-seo-list { padding-left: 20px; }
.md2pdf-seo-list li { margin-bottom: 6px; }

/* ============ Preview Inhalt (allgemeine Typografie, theme-unabhaengig) ============ */

.md-preview {
  padding: 28px 32px;
  border-radius: 8px;
  box-sizing: border-box;
  min-height: 100%;
  word-wrap: break-word;
}

.md-preview > *:first-child { margin-top: 0; }
.md-preview > *:last-child { margin-bottom: 0; }

.md-preview h1, .md-preview h2, .md-preview h3,
.md-preview h4, .md-preview h5, .md-preview h6 {
  font-weight: 700;
  line-height: 1.25;
  margin: 1.4em 0 0.5em;
}
.md-preview h1 { font-size: 2em; padding-bottom: 0.3em; border-bottom: 1px solid #e5e7eb; }
.md-preview h2 { font-size: 1.5em; padding-bottom: 0.25em; border-bottom: 1px solid #eee; }
.md-preview h3 { font-size: 1.25em; }
.md-preview h4 { font-size: 1.05em; }
.md-preview h5 { font-size: 0.95em; }
.md-preview h6 { font-size: 0.85em; color: #6b7280; }

.md-preview p { margin: 0 0 1em; line-height: 1.7; }
.md-preview ul, .md-preview ol { margin: 0 0 1em; padding-left: 1.6em; line-height: 1.7; }
.md-preview li { margin: 0.2em 0; }
.md-preview li > ul, .md-preview li > ol { margin: 0.3em 0; }

.md-preview a { color: #2563eb; text-decoration: underline; }
.md-preview a:hover { color: #1d4ed8; }

.md-preview img { max-width: 100%; height: auto; border-radius: 4px; }

.md-preview blockquote {
  margin: 0 0 1em;
  padding: 0.4em 1em;
  border-left: 4px solid #d1d5db;
  background: #f9fafb;
  color: #374151;
  font-style: italic;
}

.md-preview code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: #f3f4f6;
  padding: 0.15em 0.4em;
  border-radius: 4px;
  font-size: 0.92em;
}
.md-preview pre {
  background: #1f2937;
  color: #f9fafb;
  padding: 14px 16px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0 0 1em;
  line-height: 1.5;
  font-size: 0.9em;
}
.md-preview pre code {
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

.md-preview table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 1em;
  font-size: 0.95em;
}
.md-preview table th,
.md-preview table td {
  border: 1px solid #d1d5db;
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}
.md-preview table th { background: #f3f4f6; font-weight: 600; }
.md-preview table tr:nth-child(even) td { background: #fafafa; }

.md-preview hr {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 1.4em 0;
}

.md-preview input[type="checkbox"] { margin-right: 6px; }

/* ============ Theme: default ============ */
.md-preview.md-theme-default {
  background: #ffffff;
  color: #1f2937;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ============ Theme: github ============ */
.md-preview.md-theme-github {
  background: #ffffff;
  color: #24292f;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif;
}
.md-preview.md-theme-github h1,
.md-preview.md-theme-github h2 { border-bottom: 1px solid #d0d7de; }
.md-preview.md-theme-github a { color: #0969da; }
.md-preview.md-theme-github code { background: rgba(175,184,193,.2); color: #24292f; }
.md-preview.md-theme-github pre { background: #f6f8fa; color: #24292f; }
.md-preview.md-theme-github pre code { color: #24292f; }
.md-preview.md-theme-github blockquote { border-left-color: #d0d7de; background: transparent; color: #57606a; font-style: normal; }
.md-preview.md-theme-github table th { background: #f6f8fa; }

/* ============ Theme: minimal ============ */
.md-preview.md-theme-minimal {
  background: #ffffff;
  color: #111111;
  font-family: Georgia, 'Times New Roman', serif;
  max-width: 760px;
  margin: 0 auto;
}
.md-preview.md-theme-minimal h1,
.md-preview.md-theme-minimal h2,
.md-preview.md-theme-minimal h3,
.md-preview.md-theme-minimal h4 { font-family: Georgia, serif; border: none; }
.md-preview.md-theme-minimal h1 { font-size: 2.1em; text-align: center; margin-bottom: 0.8em; }
.md-preview.md-theme-minimal a { color: #111; text-decoration: underline; }
.md-preview.md-theme-minimal blockquote { background: transparent; border-left-color: #999; color: #333; }
.md-preview.md-theme-minimal pre { background: #f7f7f7; color: #111; }
.md-preview.md-theme-minimal pre code { color: #111; }

/* ============ Theme: dark ============ */
.md-preview.md-theme-dark {
  background: #0f172a;
  color: #e2e8f0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}
.md-preview.md-theme-dark h1,
.md-preview.md-theme-dark h2 { border-bottom-color: #1e293b; }
.md-preview.md-theme-dark h6 { color: #94a3b8; }
.md-preview.md-theme-dark a { color: #60a5fa; }
.md-preview.md-theme-dark code { background: #1e293b; color: #fbbf24; }
.md-preview.md-theme-dark pre { background: #020617; color: #e2e8f0; }
.md-preview.md-theme-dark pre code { color: inherit; }
.md-preview.md-theme-dark blockquote { background: #1e293b; border-left-color: #475569; color: #cbd5e1; }
.md-preview.md-theme-dark table th,
.md-preview.md-theme-dark table td { border-color: #334155; }
.md-preview.md-theme-dark table th { background: #1e293b; }
.md-preview.md-theme-dark table tr:nth-child(even) td { background: #111c34; }
.md-preview.md-theme-dark hr { border-top-color: #1e293b; }

/* ============ Font-size factor ============ */
.md-preview.md-size-s { font-size: 0.88rem; }
.md-preview.md-size-m { font-size: 1rem; }
.md-preview.md-size-l { font-size: 1.15rem; }