:root
{
    /* Dunkle Basis – leicht kühler als Nord */
    --dark0_x:  33,39,48;   /* #212730 */
    --dark0:    rgb(var(--dark0_x));
    --dark1_x:  42,50,61;   /* #2a323d */
    --dark1:    rgb(var(--dark1_x));
    --dark2_x:  54,64,77;   /* #36404d */
    --dark2:    rgb(var(--dark2_x));
    --dark3_x:  76,90,108;  /* #4c5a6c */
    --dark3:    rgb(var(--dark3_x));

    /* Helle Basis – leicht bläulich */
    --light0_x: 214,223,231; /* #d6dfe7 */
    --light0:   rgb(var(--light0_x));
    --light1_x: 227,235,241; /* #e3ebf1 */
    --light1:   rgb(var(--light1_x));
    --light2_x: 239,245,248; /* #eff5f8 */
    --light2:   rgb(var(--light2_x));
    --light3_x: 250,252,253; /* #fafcfd */
    --light3:   rgb(var(--light3_x));

    /* Wasser-/Blaupalette */
    --frost0_x: 126,182,205; /* #7eb6cd */
    --frost0:   rgb(var(--frost0_x));
    --frost1_x: 79,158,201;  /* #4f9ec9 */
    --frost1:   rgb(var(--frost1_x));
    --frost2_x: 39,134,195;  /* #2786c3 */
    --frost2:   rgb(var(--frost2_x));
    --frost3_x: 27,104,166;  /* #1b68a6 */
    --frost3:   rgb(var(--frost3_x));

    /* Blatt-/Grünpalette */
    --red_x:    111,168,27;  /* umgedeutet: kräftiges Blattgrün */
    --red:      rgb(var(--red_x));
    --orange_x: 141,191,45;  /* helleres Grün */
    --orange:   rgb(var(--orange_x));
    --yellow_x: 187,219,102; /* sehr helles Grün */
    --yellow:   rgb(var(--yellow_x));
    --green_x:  128,176,28;  /* mittleres Grün */
    --green:    rgb(var(--green_x));
    --purple_x: 84,145,168;  /* entsättigtes Blaugrün statt Lila */
    --purple:   rgb(var(--purple_x));
}

body
{
    /* Akzent standardmäßig auf Wasserblau statt Rot */
    --accent-h: 203;
    --accent-s: 67%;
    --accent-l: 44%;

    --link-decoration:                none;
    --link-decoration-hover:          none;
    --link-external-decoration:       none;
    --link-external-decoration-hover: none;

    --tag-decoration:                 none;
    --tag-decoration-hover:           underline;
    --tag-padding-x:                  .5em;
    --tag-padding-y:                  .2em;
    --tag-radius:                     .5em;

    --tab-font-weight:                600;
    --bold-weight:                    600;

    --checkbox-radius:                0;

    --embed-border-left: 6px double var(--interactive-accent);
}

.theme-dark
{
    --color-red-rgb:                 var(--red_x);
    --color-red:                     var(--red);
    --color-purple-rgb:              var(--purple_x);
    --color-purple:                  var(--purple);
    --color-green-rgb:               var(--green_x);
    --color-green:                   var(--green);
    --color-cyan-rgb:                var(--frost1_x);
    --color-cyan:                    var(--frost1);
    --color-blue-rgb:                var(--frost3_x);
    --color-blue:                    var(--frost3);
    --color-yellow-rgb:              var(--yellow_x);
    --color-yellow:                  var(--yellow);
    --color-orange-rgb:              var(--orange_x);
    --color-orange:                  var(--orange);

    --background-primary:            var(--dark0);
    --background-primary-alt:        var(--dark0);
    --background-secondary:          var(--dark1);
    --background-secondary-alt:      var(--dark2);
    --background-modifier-border:    var(--dark2);

    --cursor-line-background:        rgba(var(--frost2_x), 0.18);

    --text-normal:                   var(--light2);
    --text-faint:                    var(--light0);
    --text-muted:                    var(--light1);

    --link-url:                      var(--frost1);

    /* kühlere Überschriften */
    --h1-color:                      var(--frost1);
    --h2-color:                      var(--frost2);
    --h3-color:                      var(--green);
    --h4-color:                      var(--purple);
    --h5-color:                      var(--yellow);
    --h6-color:                      var(--frost0);

    --text-highlight-bg:             var(--frost2);
    --text-highlight-fg:             var(--light3);

    --text-accent:                   var(--frost1);
    --text-accent-hover:             var(--green);

    --tag-color:                     var(--frost0);
    --tag-background:                var(--dark2);
    --tag-background-hover:          var(--dark1);

    --titlebar-text-color-focused:   var(--frost1);

    --inline-title-color:            var(--frost1);

    --bold-color:                    var(--yellow);
    --italic-color:                  var(--green);

    --checkbox-color:                var(--green);
    --checkbox-color-hover:          var(--green);
    --checkbox-border-color:         var(--green);
    --checkbox-border-color-hover:   var(--green);
    --checklist-done-color:          rgba(var(--light2_x), 0.5);

    --table-header-background:       rgb(38,47,58);
    --table-header-background-hover: var(--dark3);
    --table-row-even-background:     rgb(43,53,65);
    --table-row-odd-background:      rgb(48,59,72);
    --table-row-background-hover:    var(--dark3);

    --text-selection:                rgba(var(--frost2_x), 0.45);
    --flashing-background:           rgba(var(--green_x), 0.22);

    --code-normal:                   var(--frost0);
    --code-background:               var(--dark1);

    --mermaid-note:                  var(--frost3);
    --mermaid-loopline:              var(--frost1);
    --mermaid-exclude:               var(--dark3);
    --mermaid-seqnum:                var(--dark0);

    --icon-color-hover:              var(--frost1);
    --icon-color-focused:            var(--green);

    --nav-item-color-hover:          var(--frost1);
    --nav-item-color-active:         var(--green);
    --nav-file-tag:                  rgba(var(--yellow_x), 0.9);

    --graph-line:                    var(--dark3);
    --graph-node:                    var(--light3);
    --graph-node-tag:                var(--frost1);
    --graph-node-attachment:         var(--green);

    --calendar-hover:                var(--frost1);
    --calendar-background-hover:     var(--dark3);
    --calendar-week:                 var(--green);
    --calendar-today:                var(--green);

    --dataview-key:                  var(--text-faint);
    --dataview-key-background:       rgba(var(--frost2_x), 0.25);
    --dataview-value:                var(--text-faint);
    --dataview-value-background:     rgba(var(--green_x), 0.25);

    --tab-text-color-focused-active:         var(--green);
    --tab-text-color-focused-active-current: var(--frost1);
}

.theme-light
{
    --color-red-rgb:                 var(--red_x);
    --color-red:                     var(--red);
    --color-purple-rgb:              var(--purple_x);
    --color-purple:                  var(--purple);
    --color-green-rgb:               var(--green_x);
    --color-green:                   var(--green);
    --color-cyan-rgb:                var(--frost1_x);
    --color-cyan:                    var(--frost1);
    --color-blue-rgb:                var(--frost3_x);
    --color-blue:                    var(--frost3);
    --color-yellow-rgb:              var(--yellow_x);
    --color-yellow:                  var(--yellow);
    --color-orange-rgb:              var(--orange_x);
    --color-orange:                  var(--orange);

    --background-primary:            var(--light3);
    --background-primary-alt:        var(--light3);
    --background-secondary:          var(--light2);
    --background-secondary-alt:      var(--light1);
    --background-modifier-border:    var(--light1);

    --cursor-line-background:        rgba(var(--frost1_x), 0.10);

    --text-normal:                   var(--dark2);
    --text-faint:                    var(--dark0);
    --text-muted:                    var(--dark1);

    --link-url:                      var(--frost3);

    --h1-color:                      var(--frost3);
    --h2-color:                      var(--frost2);
    --h3-color:                      var(--green);
    --h4-color:                      var(--purple);
    --h5-color:                      var(--frost0);
    --h6-color:                      var(--red);

    --text-highlight-bg:             rgba(var(--frost0_x), 0.45);
    --text-highlight-fg:             var(--dark0);

    --text-accent:                   var(--frost3);
    --text-accent-hover:             var(--green);

    --tag-color:                     var(--dark3);
    --tag-background:                var(--light1);
    --tag-background-hover:          var(--light0);

    --titlebar-text-color-focused:   var(--frost3);

    --inline-title-color:            var(--frost3);

    --bold-color:                    var(--green);
    --italic-color:                  var(--frost3);

    --checkbox-color:                var(--green);
    --checkbox-color-hover:          var(--green);
    --checkbox-border-color:         var(--green);
    --checkbox-border-color-hover:   var(--green);
    --checklist-done-color:          rgba(var(--dark2_x), 0.4);

    --table-header-background:       rgba(var(--frost0_x), 0.18);
    --table-header-background-hover: rgba(var(--frost1_x), 0.35);
    --table-row-even-background:     rgba(var(--light2_x), 0.55);
    --table-row-odd-background:      rgba(var(--light2_x), 0.9);
    --table-row-background-hover:    rgba(var(--frost0_x), 0.28);

    --text-selection:                rgba(var(--frost1_x), 0.35);
    --flashing-background:           rgba(var(--green_x), 0.20);

    --code-normal:                   var(--frost3);
    --code-background:               rgba(var(--frost0_x), 0.12);

    --mermaid-note:                  var(--frost0);
    --mermaid-loopline:              var(--frost1);
    --mermaid-exclude:               var(--light0);
    --mermaid-seqnum:                var(--light0);

    --icon-color-hover:              var(--frost3);
    --icon-color-focused:            var(--green);

    --nav-item-color-hover:          var(--frost3);
    --nav-item-color-active:         var(--green);
    --nav-file-tag:                  rgba(var(--frost3_x), 0.85);

    --graph-line:                    var(--light0);
    --graph-node:                    var(--dark3);
    --graph-node-tag:                var(--frost3);
    --graph-node-attachment:         var(--green);

    --calendar-hover:                var(--frost3);
    --calendar-background-hover:     var(--light0);
    --calendar-week:                 var(--green);
    --calendar-today:                var(--green);

    --dataview-key:                  var(--text-faint);
    --dataview-key-background:       rgba(var(--frost2_x), 0.18);
    --dataview-value:                var(--text-faint);
    --dataview-value-background:     rgba(var(--green_x), 0.18);

    --tab-text-color-focused-active:         var(--green);
    --tab-text-color-focused-active-current: var(--frost3);
}

table
{
    border: 1px solid var(--background-secondary) !important;
    border-collapse: collapse;
}

thead
{
    border-bottom: 2px solid var(--background-modifier-border) !important;
}
  
th
{
    font-weight: 600 !important;
    border: 1px solid var(--background-secondary) !important;
}

td
{
    border-left: 1px solid var(--background-secondary) !important;
    border-right: 1px solid var(--background-secondary) !important;
    border-bottom: 1px solid var(--background-secondary) !important;
}

.markdown-rendered tbody tr:nth-child(even)
{
    background-color: var(--table-row-even-background) !important;
}

.markdown-rendered tbody tr:nth-child(odd)
{
    background-color: var(--table-row-odd-background) !important;
}

.markdown-rendered tbody tr:nth-child(even):hover,
.markdown-rendered tbody tr:nth-child(odd):hover
{
    background-color: var(--table-row-background-hover) !important;
}

.markdown-rendered mark
{
    background-color: var(--text-highlight-bg);
    color: var(--text-highlight-fg);
}

.markdown-rendered mark a
{
    color: var(--red) !important;
    font-weight: 600;
}

.search-result-file-matched-text
{
    color: var(--text-highlight-fg) !important;
}

.cm-hashtag-begin:hover, .cm-hashtag-end:hover
{
    color: var(--text-accent);
    /* background-color: var(--tag-background-hover); */
    text-decoration: underline;
}

input[type=checkbox]
{
    border: 1px solid var(--checkbox-color);
}

input[type=checkbox]:checked
{
    background-color: var(--checkbox-color);
    box-shadow: inset 0 0 0 2px var(--background-primary);
}

input[type=checkbox]:checked:after
{
    display: none;
}

code[class*="language-"],
pre[class*="language-"]
{
    line-height: var(--line-height-tight) !important;
}

.cm-url
{
    color: var(--link-url) !important;
}

.cm-url:hover
{
    color: var(--text-accent-hover) !important;
}

/* Keep highlight/marks the same between viewer and editor. */
.cm-highlight
{
    color: var(--text-highlight-fg) !important;
}

/* Keep inline code the same between viewer and editor. */
.cm-inline-code
{
    border-radius: var(--radius-s);
    font-size: var(--code-size);
    padding: 0.1em 0.25em;
}

.cm-formatting-code + .cm-inline-code
{
    border-radius: 0;
    padding: 0.1em 0;
}

.cm-formatting-code
{
    border-radius: var(--radius-s) 0 0 var(--radius-s);
    padding: 0.1em 0 0.1em 0.25em;
}

.cm-inline-code + .cm-formatting-code
{
    border-radius: 0 var(--radius-s) var(--radius-s) 0;
    padding: 0.1em 0.25em 0.1em 0;
}

.cm-line .cm-strong
{
    color: var(--bold-color) !important;
}

/*
 * Keep list bullet padding the same between viewer and editor.
 * This is annoying with the cursor in the editor as there is a gap.
 */
/*
.cm-formatting-list
{
     padding-right: 4px !important;
}
*/

/*
 * Keep sub-list indenting the same between viewer and editor.
 * This assumes --list-indent is default at 2em.
 */
/*
.cm-indent 
{
    text-indent: 1em !important;
}
*/

.mermaid .note
{
    fill: var(--mermaid-note) !important;
}

.mermaid .loopLine
{
    stroke: var(--mermaid-loopline) !important;
}

.mermaid .loopText>tspan,
.mermaid .entityLabel
{
    fill: var(--red) !important;
}

.mermaid .exclude-range
{
    fill: var(--mermaid-exclude) !important;
}

.mermaid .sequenceNumber
{
    fill: var(--mermaid-seqnum) !important;
}

.calendar .week-num
{
    color: var(--calendar-week) !important;
}

.calendar .today
{
    color: var(--calendar-today) !important;
}

.calendar .week-num:hover,
.calendar .day:hover
{
    color: var(--calendar-hover) !important;
    background-color: var(--calendar-background-hover) !important;
}

.markdown-embed-title
{
    color: var(--yellow);
    font-weight: 600 !important;
}

.cm-active
{
    background-color: var(--cursor-line-background) !important;
}

.nav-file-tag
{
    color: var(--nav-file-tag) !important;
}

.is-flashing
{
    background-color: var(--flashing-background) !important;
}

.dataview.inline-field-key
{
    border-top-left-radius: var(--radius-s);
    border-bottom-left-radius: var(--radius-s);
    padding-left: 4px;
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
    color: var(--dataview-key) !important;
    background-color: var(--dataview-key-background) !important;
}

.dataview.inline-field-value
{
    border-top-right-radius: var(--radius-s);
    border-bottom-right-radius: var(--radius-s);
    padding-right: 4px;
    font-family: var(--font-monospace);
    font-size: var(--font-smaller);
    color: var(--dataview-value) !important;
    background-color: var(--dataview-value-background) !important;
}

.suggestion-highlight
{
    color: var(--red);
}

/* =========================================================
   Obsidian Publish – deutsche UI-Texte per CSS
   ========================================================= */

/* "Powered by Obsidian" unten im Graphen ausblenden */
.site-footer a {
  display: none;
}

/* ---------------------------------------------------------
   "Links to this page" -> "Verweise auf diese Seite"
   --------------------------------------------------------- */

.mod-footer .published-section-header > .published-section-header-icon {
  display: none;
}

.mod-footer .published-section-header > span {
  visibility: hidden;
  display: block;
  height: 1lh;
}

.mod-footer .published-section-header > span::after {
  content: "Verweise auf diese Seite";
  visibility: visible;
  display: block;
  position: relative;
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* ---------------------------------------------------------
   "Interactive graph" -> "Netz des Gartens"
   --------------------------------------------------------- */

.graph-view-outer .published-section-header > .published-section-header-icon {
  display: none;
}

.graph-view-outer .published-section-header > span {
  visibility: hidden;
  display: block;
  height: 1lh;
}

.graph-view-outer .published-section-header > span::after {
  content: "Netz des Gartens";
  visibility: visible;
  display: block;
  position: relative;
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* ---------------------------------------------------------
   "On this page" -> "Inhalt dieser Seite"
   --------------------------------------------------------- */

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > .published-section-header-icon {
  display: none;
}

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > span {
  visibility: hidden;
  display: block;
  height: 1lh;
}

.outline-view-outer:not([style*="visibility: hidden"])
  .published-section-header
  > span::after {
  content: "Inhalt dieser Seite";
  visibility: visible;
  display: block;
  position: relative;
  bottom: 1lh;
  font-size: var(--component-title-size);
}

/* ---------------------------------------------------------
   "Search page or heading..." -> "Im Garten suchen ..."
   --------------------------------------------------------- */

.search-bar::placeholder {
  color: transparent !important;
}

.search-bar {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='32px' width='260px'><text x='30' y='19.5' fill='%2390a4b8' font-size='14'>Im Garten suchen ...</text></svg>") !important;
  background-repeat: no-repeat !important;
}

.search-bar:focus {
  background-image: none !important;
}

/* ---------------------------------------------------------
   404-Seite
   "Not found" -> "Seite nicht gefunden"
   "This page does not exist" -> "Diese Seite existiert nicht."
   --------------------------------------------------------- */

.not-found-title {
  visibility: hidden;
}

.not-found-title::after {
  content: "Seite nicht gefunden";
  visibility: visible;
  display: block;
}

.not-found-description {
  visibility: hidden;
}

.not-found-description::after {
  content: "Diese Seite existiert nicht.";
  visibility: visible;
  display: block;
}

/* =========================================================
   Dezente Callouts – blau/grün passend zum Quellblatt-Stil
   ans Ende der publish.css
   ========================================================= */

.callout {
  border-radius: 10px;
  border: 1px solid var(--background-modifier-border);
  box-shadow: none;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.callout .callout-title {
  font-weight: 600;
  gap: 0.45rem;
}

.callout .callout-content {
  color: var(--text-normal);
}

/* Allgemein eher helle, ruhige Flächen */
.theme-light .callout {
  background: rgba(79, 158, 201, 0.08);
}

.theme-dark .callout {
  background: rgba(79, 158, 201, 0.10);
}

/* NOTE / INFO – kühles Blau */
.callout[data-callout="note"],
.callout[data-callout="info"] {
  border-left: 4px solid rgb(79, 158, 201);
}

.theme-light .callout[data-callout="note"],
.theme-light .callout[data-callout="info"] {
  background: rgba(79, 158, 201, 0.10);
}

.theme-dark .callout[data-callout="note"],
.theme-dark .callout[data-callout="info"] {
  background: rgba(79, 158, 201, 0.12);
}

/* TIP / SUCCESS – Blattgrün */
.callout[data-callout="tip"],
.callout[data-callout="success"] {
  border-left: 4px solid rgb(128, 176, 28);
}

.theme-light .callout[data-callout="tip"],
.theme-light .callout[data-callout="success"] {
  background: rgba(128, 176, 28, 0.10);
}

.theme-dark .callout[data-callout="tip"],
.theme-dark .callout[data-callout="success"] {
  background: rgba(128, 176, 28, 0.12);
}

/* WARNING / CAUTION – gedämpftes gelbgrün */
.callout[data-callout="warning"],
.callout[data-callout="caution"] {
  border-left: 4px solid rgb(187, 219, 102);
}

.theme-light .callout[data-callout="warning"],
.theme-light .callout[data-callout="caution"] {
  background: rgba(187, 219, 102, 0.12);
}

.theme-dark .callout[data-callout="warning"],
.theme-dark .callout[data-callout="caution"] {
  background: rgba(187, 219, 102, 0.10);
}

/* DANGER / ERROR – nicht rot-knallig, sondern gedämpft olivgrün */
.callout[data-callout="danger"],
.callout[data-callout="error"] {
  border-left: 4px solid rgb(111, 168, 27);
}

.theme-light .callout[data-callout="danger"],
.theme-light .callout[data-callout="error"] {
  background: rgba(111, 168, 27, 0.12);
}

.theme-dark .callout[data-callout="danger"],
.theme-dark .callout[data-callout="error"] {
  background: rgba(111, 168, 27, 0.10);
}

/* QUOTE – sehr ruhig */
.callout[data-callout="quote"] {
  border-left: 4px solid rgb(126, 182, 205);
}

.theme-light .callout[data-callout="quote"] {
  background: rgba(126, 182, 205, 0.08);
}

.theme-dark .callout[data-callout="quote"] {
  background: rgba(126, 182, 205, 0.10);
}

/* Optional: zusammengeklappte Callouts etwas kompakter */
.callout.is-collapsible .callout-title {
  padding-bottom: 0.1rem;
}