/* ============================================================
   StreamKeks – Obsidian Publish Dark Theme
   Erstellt von Frank Herberg · Mai 2026
   ============================================================ */

/* ── 1. FARB-VARIABLEN (Dark Theme) ── */
body.theme-dark,
body {
  /* Hintergründe */
  --background-primary:          #0d1117;
  --background-primary-alt:      #111820;
  --background-secondary:        #161b22;
  --background-secondary-alt:    #1c2230;
  --background-tertiary:         #1f2937;
  --background-modifier-border:  #30363d;
  --background-modifier-hover:   rgba(255,255,255,0.06);
  --background-modifier-active:  rgba(255,255,255,0.10);

  /* Text */
  --text-normal:                 #e6edf3;
  --text-muted:                  #8b949e;
  --text-faint:                  #4d5566;
  --text-on-accent:              #ffffff;
  --text-error:                  #f85149;
  --text-success:                #3fb950;

  /* Akzentfarbe (Teal-Blau – passt zu StreamKeks) */
  --text-accent:                 #2cb5e8;
  --text-accent-hover:           #58cbf5;
  --interactive-accent:          #2cb5e8;
  --interactive-accent-hover:    #1a9fd4;
  --interactive-accent-rgb:      44, 181, 232;

  /* Interaktiv */
  --interactive-normal:          #21262d;
  --interactive-hover:           #30363d;

  /* Scrollbar */
  --scrollbar-bg:                transparent;
  --scrollbar-thumb-bg:          #30363d;
  --scrollbar-active-thumb-bg:   #484f58;

  /* Code */
  --code-background:             #161b22;
  --code-normal:                 #79c0ff;
  --code-comment:                #6e7681;
  --code-string:                 #a5d6ff;
  --code-keyword:                #ff7b72;

  /* Callout-Farben */
  --callout-default:             44, 181, 232;
  --callout-info:                44, 181, 232;
  --callout-check:               63, 185, 80;
  --callout-done:                63, 185, 80;
  --callout-warning:             210, 153, 34;
  --callout-caution:             210, 153, 34;
  --callout-danger:              248, 81, 73;
  --callout-error:               248, 81, 73;
  --callout-summary:             139, 148, 158;
  --callout-tip:                 44, 181, 232;
  --callout-important:           163, 113, 247;
  --callout-quote:               139, 148, 158;

  /* Tabellen */
  --table-header-background:     #161b22;
  --table-row-alt-background:    rgba(255,255,255,0.03);
  --table-selection:             rgba(44,181,232,0.12);

  /* Schrift */
  --font-text-size:              16px;
  --line-height-normal:          1.75;
  --font-monospace:              'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
}

/* ── 2. BASIS-LAYOUT ── */
body {
  background-color: var(--background-primary);
  color:            var(--text-normal);
  font-size:        var(--font-text-size);
  line-height:      var(--line-height-normal);
}

/* ── 3. NAVIGATION / SIDEBAR ── */
.nav-view-outer,
.site-body-left-column {
  background-color: var(--background-secondary);
  border-right: 1px solid var(--background-modifier-border);
}

.nav-file-title,
.nav-folder-title {
  color:      var(--text-muted);
  border-radius: 4px;
  padding:    3px 8px;
  transition: background 0.15s, color 0.15s;
}

.nav-file-title:hover,
.nav-folder-title:hover {
  background: var(--background-modifier-hover);
  color:      var(--text-normal);
}

.nav-file-title.is-active {
  background: rgba(44, 181, 232, 0.15);
  color:      var(--text-accent);
  font-weight: 600;
}

.nav-folder-title-content {
  color: var(--text-normal);
  font-weight: 600;
}

/* ── 4. SEITEN-HEADER / TITEL ── */
.publish-site-header {
  background-color: var(--background-secondary);
  border-bottom:    1px solid var(--background-modifier-border);
  padding:          12px 20px;
}

.site-header-text {
  color:       var(--text-accent);
  font-weight: 700;
  font-size:   1.1em;
  letter-spacing: 0.02em;
}

/* ── 5. HAUPT-CONTENT-BEREICH ── */
.markdown-preview-view,
.markdown-reading-view {
  max-width:  1200px;
  margin:     0 auto;
  padding:    32px 40px;
}

/* Startseite – etwas weniger Innenabstand */
body.startseite .markdown-preview-view,
body.startseite .markdown-reading-view,
.startseite .markdown-preview-view,
.startseite .markdown-reading-view,
.markdown-preview-view.startseite,
.markdown-reading-view.startseite {
  padding: 24px 32px;
}

/* Überschriften */
.markdown-preview-view h1 {
  color:         var(--text-accent);
  font-size:     2em;
  font-weight:   700;
  border-bottom: 2px solid var(--background-modifier-border);
  padding-bottom: 0.3em;
  margin-bottom:  0.8em;
}

.markdown-preview-view h2 {
  color:       var(--text-normal);
  font-size:   1.5em;
  font-weight: 600;
  border-bottom: 1px solid var(--background-modifier-border);
  padding-bottom: 0.2em;
  margin-top:  1.8em;
}

.markdown-preview-view h3 {
  color:       var(--text-accent);
  font-size:   1.15em;
  font-weight: 600;
  margin-top:  1.5em;
}

.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  color:       var(--text-muted);
  font-weight: 600;
}

/* Links */
.markdown-preview-view a,
a.internal-link,
a.external-link {
  color:           var(--text-accent);
  text-decoration: none;
  border-bottom:   1px solid transparent;
  transition:      border-color 0.2s, color 0.2s;
}

.markdown-preview-view a:hover,
a.internal-link:hover,
a.external-link:hover {
  color:        var(--text-accent-hover);
  border-bottom-color: var(--text-accent-hover);
}

/* ── 6. TABELLEN ── */
.markdown-preview-view table {
  border-collapse: collapse;
  width:           100%;
  margin:          1.5em 0;
  font-size:       0.93em;
  border:          1px solid var(--background-modifier-border);
  border-radius:   6px;
  overflow:        hidden;
}

.markdown-preview-view th {
  background-color: var(--table-header-background);
  color:            var(--text-accent);
  font-weight:      600;
  text-align:       left;
  padding:          10px 14px;
  border-bottom:    2px solid var(--background-modifier-border);
}

.markdown-preview-view td {
  padding:     8px 14px;
  border-bottom: 1px solid var(--background-modifier-border);
  color:         var(--text-normal);
}

.markdown-preview-view tr:last-child td {
  border-bottom: none;
}

.markdown-preview-view tr:nth-child(even) td {
  background-color: var(--table-row-alt-background);
}

.markdown-preview-view tr:hover td {
  background-color: rgba(44, 181, 232, 0.06);
}

/* ── 7. CALLOUTS ── */
.callout {
  border-radius:    6px;
  padding:          14px 18px;
  margin:           1.2em 0;
  border-left-width: 4px;
  border-left-style: solid;
  background-color: rgba(var(--callout-color, var(--callout-default)), 0.08);
  border-left-color: rgb(var(--callout-color, var(--callout-default)));
}

.callout-title {
  font-weight:  600;
  font-size:    0.95em;
  margin-bottom: 6px;
  color:        rgb(var(--callout-color, var(--callout-default)));
  display:      flex;
  align-items:  center;
  gap:          6px;
}

.callout-content {
  color:       var(--text-normal);
  font-size:   0.95em;
  line-height: 1.7;
}

/* Check / Done – Grün */
.callout[data-callout="check"],
.callout[data-callout="done"] {
  --callout-color: var(--callout-check);
  background-color: rgba(63, 185, 80, 0.08);
  border-left-color: rgb(63, 185, 80);
}

/* Warning / Caution – Amber */
.callout[data-callout="warning"],
.callout[data-callout="caution"] {
  --callout-color: var(--callout-warning);
  background-color: rgba(210, 153, 34, 0.08);
  border-left-color: rgb(210, 153, 34);
}

/* Danger / Error – Rot */
.callout[data-callout="danger"],
.callout[data-callout="error"] {
  --callout-color: var(--callout-danger);
  background-color: rgba(248, 81, 73, 0.08);
  border-left-color: rgb(248, 81, 73);
}

/* Summary – Grau */
.callout[data-callout="summary"] {
  background-color: rgba(139, 148, 158, 0.08);
  border-left-color: rgb(139, 148, 158);
}

/* Info / Tip – Teal */
.callout[data-callout="info"],
.callout[data-callout="tip"] {
  background-color: rgba(44, 181, 232, 0.08);
  border-left-color: rgb(44, 181, 232);
}

/* ── 8. CODE-BLÖCKE ── */
.markdown-preview-view code {
  background:    var(--code-background);
  color:         var(--code-normal);
  font-family:   var(--font-monospace);
  font-size:     0.88em;
  padding:       2px 6px;
  border-radius: 4px;
  border:        1px solid var(--background-modifier-border);
}

.markdown-preview-view pre {
  background:    var(--code-background);
  border:        1px solid var(--background-modifier-border);
  border-radius: 8px;
  padding:       18px 20px;
  overflow-x:    auto;
  margin:        1.2em 0;
}

.markdown-preview-view pre code {
  background: transparent;
  border:     none;
  padding:    0;
  font-size:  0.9em;
  color:      var(--text-normal);
  line-height: 1.6;
}

/* ── 9. BLOCKQUOTES ── */
.markdown-preview-view blockquote {
  border-left:  3px solid var(--text-accent);
  margin:       1.2em 0;
  padding:      10px 18px;
  background:   rgba(44, 181, 232, 0.05);
  border-radius: 0 6px 6px 0;
  color:         var(--text-muted);
  font-style:    italic;
}

/* ── 10. HORIZONTALE LINIE ── */
.markdown-preview-view hr {
  border:     none;
  border-top: 1px solid var(--background-modifier-border);
  margin:     2em 0;
}

/* ── 11. BILDER ── */
.markdown-preview-view img {
  max-width:    100%;
  border-radius: 8px;
  border:       1px solid var(--background-modifier-border);
  display:      block;
  margin:       1.2em auto;
}

/* ── 12. SUCHE ── */
.search-input-container input {
  background:   var(--background-secondary);
  border:       1px solid var(--background-modifier-border);
  color:        var(--text-normal);
  border-radius: 6px;
  padding:      8px 12px;
  transition:   border-color 0.2s;
}

.search-input-container input:focus {
  border-color: var(--text-accent);
  outline:      none;
  box-shadow:   0 0 0 2px rgba(44, 181, 232, 0.2);
}

/* ── 13. OUTLINE (Inhaltsverzeichnis) ── */
.outline-item {
  color:   var(--text-muted);
  padding: 2px 0;
  transition: color 0.15s;
}

.outline-item:hover,
.outline-item.is-active {
  color: var(--text-accent);
}

/* ── 14. BACKLINKS ── */
.backlink-pane .tree-item-inner {
  color: var(--text-muted);
  font-size: 0.9em;
}

.backlink-pane .tree-item-inner:hover {
  color: var(--text-accent);
}

/* ── 15. SCROLLBAR (Webkit) ── */
::-webkit-scrollbar {
  width:  8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background:    var(--scrollbar-thumb-bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-active-thumb-bg);
}

/* ── 16. TAGS ── */
.tag {
  background:    rgba(44, 181, 232, 0.12);
  color:         var(--text-accent);
  border:        1px solid rgba(44, 181, 232, 0.3);
  border-radius: 12px;
  padding:       2px 10px;
  font-size:     0.82em;
  text-decoration: none;
  transition:    background 0.15s;
}

.tag:hover {
  background: rgba(44, 181, 232, 0.22);
}

/* ── 17. FETT / KURSIV ── */
.markdown-preview-view strong {
  color:       var(--text-normal);
  font-weight: 700;
}

.markdown-preview-view em {
  color:      var(--text-muted);
  font-style: italic;
}

/* ── 18. LISTEN ── */
.markdown-preview-view ul,
.markdown-preview-view ol {
  padding-left: 1.8em;
  margin:       0.6em 0;
}

.markdown-preview-view li {
  margin-bottom: 0.3em;
  line-height:   1.75;
}

/* ── 19. GRAPH-VIEW ── */
.graph-view.color-fill {
  color: var(--text-accent);
}

/* ── 20. RESPONSIVE (Mobil) ── */
@media (max-width: 900px) {
  .markdown-preview-view,
  .markdown-reading-view {
    padding: 20px 18px;
  }

  .markdown-preview-view h1 {
    font-size: 1.6em;
  }
}

@media (max-width: 768px) {
  .markdown-preview-view table {
    font-size: 0.82em;
    display:   block;
    overflow-x: auto;
  }

  .markdown-preview-view th,
  .markdown-preview-view td {
    padding: 6px 10px;
  }
}

/* ── 22. NAVIGATION – ORDNER-BEREINIGUNG ── */

/* "03 - Privat" und "Soziale Medien" in der Navigation ausblenden */
.nav-folder-title[data-path="03 - Privat"],
.nav-folder[data-path="03 - Privat"] > .nav-folder-title,
.nav-folder-title[data-path="03 - Privat/Soziale Medien"],
.nav-folder[data-path="03 - Privat/Soziale Medien"] > .nav-folder-title {
  display: none !important;
}

/* Einrückung der ausgeblendeten Ebenen entfernen → StreamKeks rückt an die Wurzel */
.nav-folder[data-path="03 - Privat"] > .nav-folder-children,
.nav-folder[data-path="03 - Privat/Soziale Medien"] > .nav-folder-children {
  padding-left: 0 !important;
  margin-left:  0 !important;
}

/* "Attachments" ausblenden – enthält nur das Logo, kein navigierbarer Inhalt */
.nav-folder[data-path="Attachments"],
.nav-folder-title[data-path="Attachments"] {
  display: none !important;
}

/* "publish.css" aus der Navigation ausblenden */
.nav-file-title[data-path="publish.css"],
.nav-file[data-path="publish.css"] {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════
   21. STARTSEITE / LANDING PAGE
   ══════════════════════════════════════════════════════════ */

/* Hero-Bereich */
.sk-hero {
  display:         flex;
  align-items:     center;
  gap:             32px;
  padding:         48px 0 32px;
  margin-bottom:   8px;
}

.sk-hero-logo {
  flex-shrink: 0;
}

.sk-logo-img {
  width:         200px;
  height:        auto;
  border-radius: 12px;
  border:        2px solid var(--background-modifier-border);
  display:       block;
  margin:        0 !important;
  box-shadow:    0 4px 32px rgba(44, 181, 232, 0.2);
}

.sk-hero-text {
  flex: 1;
}

.sk-title {
  font-size:      3em !important;
  font-weight:    800 !important;
  letter-spacing: 0.08em;
  color:          var(--text-accent) !important;
  border-bottom:  none !important;
  margin-bottom:  4px !important;
  padding-bottom: 0 !important;
  line-height:    1.1;
  text-shadow:    0 0 40px rgba(44, 181, 232, 0.3);
}

.sk-subtitle {
  color:       var(--text-normal);
  font-size:   1.1em;
  font-weight: 500;
  margin:      4px 0 8px;
  letter-spacing: 0.03em;
}

.sk-tagline {
  color:     var(--text-muted);
  font-size: 0.95em;
  font-style: italic;
  margin:    0;
}

/* Trennlinie mit Gradient */
.sk-divider {
  height:     1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(44, 181, 232, 0.4) 20%,
    rgba(44, 181, 232, 0.4) 80%,
    transparent
  );
  margin: 32px 0;
}

/* Karten-Grid – auto-fill verteilt Karten automatisch auf verfügbare Breite */
.sk-cards {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   16px;
  margin:                16px 0 8px;
  width:                 100%;
}

.sk-card {
  background:    var(--background-secondary);
  border:        1px solid var(--background-modifier-border);
  border-radius: 10px;
  padding:       20px 22px;
  transition:    border-color 0.2s, box-shadow 0.2s, transform 0.15s;
  position:      relative;
  overflow:      hidden;
}

.sk-card::before {
  content:  '';
  position: absolute;
  top:      0;
  left:     0;
  right:    0;
  height:   3px;
  border-radius: 10px 10px 0 0;
}

.sk-card-science::before { background: linear-gradient(to right, #2cb5e8, #58cbf5); }
.sk-card-music::before   { background: linear-gradient(to right, #a371f7, #c397ff); }
.sk-card-archive::before { background: linear-gradient(to right, #3fb950, #56d364); }
.sk-card-hive::before    { background: linear-gradient(to right, #e3b341, #f5cc6b); }

.sk-card:hover {
  border-color: rgba(44, 181, 232, 0.4);
  box-shadow:   0 4px 20px rgba(44, 181, 232, 0.1);
  transform:    translateY(-2px);
}

.sk-card h3 {
  color:       var(--text-accent) !important;
  font-size:   1em !important;
  font-weight: 600 !important;
  margin-top:  0 !important;
  margin-bottom: 8px !important;
}

.sk-card p {
  color:     var(--text-muted);
  font-size: 0.88em;
  line-height: 1.6;
  margin:    6px 0;
}

.sk-card-music h3  { color: #c397ff !important; }
.sk-card-archive h3 { color: #56d364 !important; }
.sk-card-hive h3   { color: #f5cc6b !important; }

/* Social-Buttons */
.sk-social {
  display:    flex;
  gap:        12px;
  flex-wrap:  wrap;
  margin:     20px 0 8px;
}

.sk-social-btn {
  display:        inline-block;
  padding:        10px 22px;
  border-radius:  6px;
  font-weight:    600;
  font-size:      0.9em;
  text-decoration: none !important;
  border:         none !important;
  transition:     opacity 0.2s, transform 0.15s;
  letter-spacing: 0.02em;
}

.sk-social-btn:hover {
  opacity:   0.85;
  transform: translateY(-1px);
}

.sk-btn-youtube {
  background: #cc0000;
  color:      #fff !important;
}

.sk-btn-hive {
  background: #e31337;
  color:      #fff !important;
}

.sk-btn-tiktok {
  background: #010101;
  color:      #fff !important;
  border:     1px solid #333 !important;
}

/* Footer */
.sk-footer {
  margin-top:  40px;
  padding-top: 20px;
  border-top:  1px solid var(--background-modifier-border);
  color:       var(--text-faint);
  font-size:   0.82em;
  text-align:  center;
  line-height: 1.8;
}

.sk-footer strong {
  color: var(--text-muted) !important;
}

.sk-footer em {
  color: var(--text-faint) !important;
}

/* Responsive Landing Page */
@media (max-width: 768px) {
  .sk-hero {
    flex-direction: column;
    text-align:     center;
    padding:        32px 0 20px;
    gap:            20px;
  }

  .sk-logo-img {
    width: 120px;
  }

  .sk-title {
    font-size: 2.2em !important;
  }

  .sk-cards {
    grid-template-columns: 1fr;
  }

  .sk-social {
    justify-content: center;
  }
}