/* ============================================================
   markdown-content.css
   Für dunkles Theme — #main_content
   Überschreibt Tailwind Preflight
   ============================================================ */

#main_content {
  --mc-font-body: 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mc-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;

  /* Farben — Dark als Standard */
  --mc-color-text:              #e2e8f0;
  --mc-color-text-muted:        #94a3b8;
  --mc-color-heading:           #f1f5f9;
  --mc-color-link:              #5eead4;
  --mc-color-link-hover:        #99f6e4;
  --mc-color-code-bg:           #1e293b;
  --mc-color-code-text:         #f9a8d4;
  --mc-color-pre-bg:            #0d1117;
  --mc-color-pre-text:          #e2e8f0;
  --mc-color-border:            #334155;
  --mc-color-blockquote:        #94a3b8;
  --mc-color-blockquote-border: #5eead4;
  --mc-color-table-header:      #1e293b;
  --mc-color-table-stripe:      #1a2234;
  --mc-color-table-hover:       #1f3045;
  --mc-color-mark-bg:           #713f12;
  --mc-color-mark-text:         #fef9c3;
  --mc-color-hr:                #334155;
  --mc-color-kbd-bg:            #1e293b;
  --mc-color-kbd-border:        #475569;

  /* Abstände */
  --mc-space-xs:  0.25rem;
  --mc-space-sm:  0.5rem;
  --mc-space-md:  1rem;
  --mc-space-lg:  1.5rem;
  --mc-space-xl:  2rem;
  --mc-space-2xl: 2.5rem;

  /* Schriftgrößen */
  --mc-text-xs:   0.75rem;
  --mc-text-sm:   0.875rem;
  --mc-text-base: 1rem;
  --mc-text-lg:   1.125rem;
  --mc-text-xl:   1.25rem;
  --mc-text-2xl:  1.5rem;
  --mc-text-3xl:  1.875rem;
  --mc-text-4xl:  2.25rem;

  /* Radius & Shadow */
  --mc-radius-sm:   0.25rem;
  --mc-radius-md:   0.375rem;
  --mc-radius-lg:   0.5rem;
  --mc-shadow-pre:  0 2px 8px rgba(0, 0, 0, 0.4);
}

/* ---- Basis ---- */
#main_content {
  font-family:   var(--mc-font-body);
  font-size:     var(--mc-text-base);
  line-height:   1.75;
  color:         var(--mc-color-text);
  word-break:    break-word;
  overflow-wrap: break-word;
}

/* ---- Überschriften ---- */
#main_content h1,
#main_content h2,
#main_content h3,
#main_content h4,
#main_content h5,
#main_content h6 {
  font-family:   var(--mc-font-body);
  font-weight:   700;
  line-height:   1.25;
  color:         var(--mc-color-heading);
  margin-top:    var(--mc-space-2xl);
  margin-bottom: var(--mc-space-md);
  text-wrap:     balance;
}

#main_content h1:first-child,
#main_content h2:first-child,
#main_content h3:first-child {
  margin-top: 0;
}

#main_content h1 { font-size: var(--mc-text-4xl); }
#main_content h2 {
  font-size:      var(--mc-text-3xl);
  padding-bottom: var(--mc-space-sm);
  border-bottom:  1px solid var(--mc-color-border);
}
#main_content h3 { font-size: var(--mc-text-2xl); }
#main_content h4 { font-size: var(--mc-text-xl); }
#main_content h5 { font-size: var(--mc-text-lg); }
#main_content h6 {
  font-size: var(--mc-text-base);
  color:     var(--mc-color-text-muted);
}

/* ---- Absätze ---- */
#main_content p {
  margin-top:    0;
  margin-bottom: var(--mc-space-lg);
  max-width:     72ch;
}

/* ---- Links ---- */
#main_content a {
  color:                     var(--mc-color-link);
  text-decoration:           underline;
  text-underline-offset:     3px;
  text-decoration-thickness: 1px;
  transition:                color 150ms ease;
}
#main_content a:hover {
  color: var(--mc-color-link-hover);
}

/* ---- Listen ---- */
#main_content ul,
#main_content ol {
  margin-top:    0;
  margin-bottom: var(--mc-space-lg);
  padding-left:  var(--mc-space-xl);
}
#main_content ul       { list-style-type: disc; }
#main_content ol       { list-style-type: decimal; }
#main_content ul ul    { list-style-type: circle; }
#main_content ul ul ul { list-style-type: square; }
#main_content li {
  margin-bottom: var(--mc-space-xs);
  display:       list-item;
}
#main_content li > ul,
#main_content li > ol {
  margin-top:    var(--mc-space-xs);
  margin-bottom: var(--mc-space-xs);
}

/* Task Lists (GFM) */
#main_content li.task-list-item {
  list-style:   none;
  padding-left: var(--mc-space-sm);
}
#main_content li.task-list-item input[type="checkbox"] {
  margin-right:   var(--mc-space-sm);
  vertical-align: middle;
  accent-color:   var(--mc-color-link);
}

/* ---- Inline Code ---- */
#main_content code {
  font-family:      var(--mc-font-mono);
  font-size:        0.875em;
  background-color: var(--mc-color-code-bg);
  color:            var(--mc-color-code-text);
  padding:          0.15em 0.4em;
  border-radius:    var(--mc-radius-sm);
  white-space:      pre-wrap;
  word-break:       break-word;
}

/* ---- Code-Block (pre > code) ---- */
#main_content pre {
  font-family:      var(--mc-font-mono);
  font-size:        var(--mc-text-sm);
  background-color: var(--mc-color-pre-bg);
  color:            var(--mc-color-pre-text);
  padding:          var(--mc-space-lg);
  border-radius:    var(--mc-radius-lg);
  overflow-x:       auto;
  margin-bottom:    var(--mc-space-xl);
  line-height:      1.6;
  box-shadow:       var(--mc-shadow-pre);
  tab-size:         2;
  border:           1px solid var(--mc-color-border);
}
#main_content pre code {
  background:    none;
  color:         inherit;
  padding:       0;
  font-size:     inherit;
  border-radius: 0;
  white-space:   pre;
  word-break:    normal;
}

/* ---- Blockquote ---- */
#main_content blockquote {
  margin:        0 0 var(--mc-space-xl) 0;
  padding:       var(--mc-space-sm) var(--mc-space-lg);
  border-left:   4px solid var(--mc-color-blockquote-border);
  background:    rgba(94, 234, 212, 0.05);
  border-radius: 0 var(--mc-radius-md) var(--mc-radius-md) 0;
  color:         var(--mc-color-blockquote);
}
#main_content blockquote > *:last-child { margin-bottom: 0; }
#main_content blockquote p { max-width: 100%; }

/* ---- Tabellen ---- */
#main_content table {
  width:           100%;
  border-collapse: collapse;
  margin-bottom:   var(--mc-space-xl);
  font-size:       var(--mc-text-sm);
  overflow-x:      auto;
  display:         block;
}
#main_content thead {
  background-color: var(--mc-color-table-header);
}
#main_content th,
#main_content td {
  padding:        var(--mc-space-sm) var(--mc-space-md);
  border:         1px solid var(--mc-color-border);
  text-align:     left;
  vertical-align: top;
}
#main_content th {
  font-weight: 600;
  color:       var(--mc-color-heading);
  white-space: nowrap;
}
#main_content tbody tr:nth-child(even) {
  background-color: var(--mc-color-table-stripe);
}
#main_content tbody tr:hover {
  background-color: var(--mc-color-table-hover);
}

/* ---- Horizontale Linie ---- */
#main_content hr {
  border:     none;
  border-top: 1px solid var(--mc-color-hr);
  margin:     var(--mc-space-2xl) 0;
}

/* ---- Bilder ---- */
#main_content img {
  max-width:     100%;
  height:        auto;
  display:       block;
  border-radius: var(--mc-radius-md);
  margin-bottom: var(--mc-space-md);
  border:        1px solid var(--mc-color-border);
}
#main_content figcaption {
  font-size:  var(--mc-text-sm);
  color:      var(--mc-color-text-muted);
  text-align: center;
  margin-top: var(--mc-space-xs);
}

/* ---- mark & kbd ---- */
#main_content mark {
  background-color: var(--mc-color-mark-bg);
  color:            var(--mc-color-mark-text);
  padding:          0.1em 0.25em;
  border-radius:    var(--mc-radius-sm);
}
#main_content kbd {
  font-family:   var(--mc-font-mono);
  font-size:     0.8em;
  background:    var(--mc-color-kbd-bg);
  border:        1px solid var(--mc-color-kbd-border);
  border-bottom: 2px solid var(--mc-color-kbd-border);
  border-radius: var(--mc-radius-sm);
  padding:       0.1em 0.4em;
  white-space:   nowrap;
  color:         var(--mc-color-text);
}

/* ---- Inline-Semantik ---- */
#main_content strong, #main_content b { font-weight: 700; }
#main_content em,     #main_content i { font-style: italic; }
#main_content del,    #main_content s {
  text-decoration: line-through;
  color:           var(--mc-color-text-muted);
}
#main_content abbr[title] {
  cursor:          help;
  text-decoration: underline dotted;
}
#main_content sub,
#main_content sup {
  font-size:      0.75em;
  line-height:    0;
  position:       relative;
  vertical-align: baseline;
}
#main_content sup { top:    -0.5em; }
#main_content sub { bottom: -0.25em; }

/* ---- Details / Summary ---- */
#main_content details {
  margin-bottom: var(--mc-space-lg);
  border:        1px solid var(--mc-color-border);
  border-radius: var(--mc-radius-md);
  padding:       var(--mc-space-sm) var(--mc-space-md);
  background:    var(--mc-color-code-bg);
}
#main_content summary {
  font-weight: 600;
  cursor:      pointer;
  user-select: none;
  color:       var(--mc-color-heading);
}
#main_content details[open] summary {
  margin-bottom:  var(--mc-space-md);
  border-bottom:  1px solid var(--mc-color-border);
  padding-bottom: var(--mc-space-sm);
}

/* ---- Fußnoten ---- */
#main_content .footnotes {
  font-size:   var(--mc-text-sm);
  color:       var(--mc-color-text-muted);
  border-top:  1px solid var(--mc-color-border);
  margin-top:  var(--mc-space-2xl);
  padding-top: var(--mc-space-md);
}
#main_content .footnotes ol {
  padding-left: var(--mc-space-lg);
}

/* ---- Responsiv (Mobile) ---- */
@media (max-width: 640px) {
  #main_content {
    --mc-text-4xl: 1.875rem;
    --mc-text-3xl: 1.5rem;
    --mc-text-2xl: 1.25rem;
  }
  #main_content pre {
    font-size:     var(--mc-text-xs);
    padding:       var(--mc-space-md);
    border-radius: var(--mc-radius-md);
  }
  #main_content table {
    font-size: var(--mc-text-xs);
  }
}

/* ---- Print ---- */
@media print {
  #main_content {
    --mc-color-text:    #111;
    --mc-color-heading: #000;
    --mc-color-border:  #ccc;
  }
  #main_content a              { text-decoration: none; color: inherit; }
  #main_content pre,
  #main_content code           { background: #f5f5f5; border: 1px solid #ddd; color: #111; }
  #main_content blockquote     { border-color: #999; background: transparent; }
}