:root {
  --text-grey: #4e4e4e;
  --r-heading-text-transform: none; /* No all-caps headings */

  /* Pallette */
  --ming: #006d77;
  --middle-blue-green: #83c5be;
  --alice-blue: #edf6f9;
  --unbleached-silk: #ffddd2;
  --dark-salmon: #e29578;
}

/*
ol li::marker {
  color: white;
}
*/

/*
ol.custom {
  list-style: none;
  counter-reset: custom-counter; 
}

ol.custom li {
  counter-increment: custom-counter; 
}


ol.custom li:nth-child(1)::marker { content: "① ";  font-size: 2em; }
ol.custom li:nth-child(2)::marker { content: "② ";  font-size: 2em; }
ol.custom li:nth-child(3)::marker { content: "③ ";  font-size: 2em; }
ol.custom li:nth-child(4)::marker { content: "④ ";  font-size: 2em; }
ol.custom li:nth-child(5)::marker { content: "⑤ ";  font-size: 2em; }
ol.custom li:nth-child(6)::marker { content: "⑥ ";  font-size: 2em; }
ol.custom li:nth-child(7)::marker { content: "⑦ ";  font-size: 2em; }
ol.custom li:nth-child(8)::marker { content: "⑧ ";  font-size: 2em; }
ol.custom li:nth-child(9)::marker { content: "⑨ ";  font-size: 2em; }
*/

ol.custom {
  list-style: none; /* Remove default numbers */
  counter-reset: custom-counter; /* Reset custom counter */
  padding-left: 2.5em; /* Adjust space for markers */
}

ol.custom > li {
  counter-increment: custom-counter; /* Increment counter for each list item */
  position: relative; /* Required for absolute positioning */
  padding-left: 5em; /* Space for the marker */
  padding-right: 2em;
}

ol.custom > li::before {
  position: absolute;
  left: 0;
  top: 50%; 
  transform: translateY(-50%); /* Center marker vertically */
  font-size: 3em;
}

/* Define custom markers for numbers 1-9 */
ol.custom > li:nth-child(1)::before { content: "①"; }
ol.custom > li:nth-child(2)::before { content: "②"; }
ol.custom > li:nth-child(3)::before { content: "③"; }
ol.custom > li:nth-child(4)::before { content: "④"; }
ol.custom > li:nth-child(5)::before { content: "⑤"; }
ol.custom > li:nth-child(6)::before { content: "⑥"; }
ol.custom > li:nth-child(7)::before { content: "⑦"; }
ol.custom > li:nth-child(8)::before { content: "⑧"; }
ol.custom > li:nth-child(9)::before { content: "⑨"; }


ul li::marker {
  content: "‣ "; /*https://www.toptal.com/designers/htmlarrows/symbols/*/
}

/*
blockquote.custom {
  font:1em/1.4em normal helvetica, sans-serif; 
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 50px;
  padding-left: 15px;
  border-left: 3px solid #ccc;
} 
*/

blockquote.custom {
  font:1em/1.4em normal helvetica, sans-serif;
  padding: 8px;
  background-color: #f5f1ed;
  border-top: 1px solid #f5f1ed;
  border-bottom: 1px solid #f5f1ed;
  margin: 5px;
  }


/*Timeline objekte*/


.timeline {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 800px;
    position: relative;
}

.timeline-item {
    display: flex;
    align-items: center;
    position: relative;
}

.timeline-box {
    padding: 15px 20px;
    font-size: 1.2em;
    color: white;
    font-weight: bold;
    width: max-content;
}

.content {
    font-size: 0.9em;
    max-width: 400px;
}

/* Farbschema */
.box-left {
    background-color: #511C29; 
    color: #f5f1ed;
}

.box-right {
    background-color: #c3774b; 
    color: black;
}

/* Aufsteigende Stufen: Die unteren Elemente starten links und wandern nach rechts */
.timeline-item:nth-child(1) { margin-left: 0px; }
.timeline-item:nth-child(2) { margin-left: 80px; }
.timeline-item:nth-child(3) { margin-left: 120px; }
.timeline-item:nth-child(4) { margin-left: 160px; }
.timeline-item:nth-child(5) { margin-left: 200px; }
.timeline-item:nth-child(6) { margin-left: 240px; }





.title-slide h1 {
  font-size: 2em;
}

.title-slide p {
  font-size: 0.8em;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.flex-center > * {
  margin: 0 1em;
  flex: 1 1 0; /* Make same width */
}

.prop {
  font-style: italic;
}

/* Masthead in combined image/text header */
.masthead {
  display: flex;
  justify-content: center;
  align-items: stretch;
  column-gap: 1rem;
}

.masthead img {
  max-height: 5rem;
  margin: 0;
}

/* Ensuring the section content fits within the viewport */
.content-wrapper {
  max-height: 100vh;
  overflow-y: auto;
  /* padding: 5vh; /* 1rem*/
}

.flex-center img {
  max-height: 5rem;
  margin: 0;
}

.table-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2rem; /* Adjust gap as needed */
  padding: 1rem;
}

.table-container table {
  font-size: 0.5em;
  /*border: 1px solid #ccc; /* Optional: for better visibility */
}

.table-wrapper {
  flex: 0 1 auto;
}

/* Container: not used */
.container {
  display: flex;
  align-items: center;
  /*margin-bottom: 1rem; /* Added to separate containers vertically */
  max-height: 5vh;
}

/* Fix heading spacing */
.reveal h1:last-child,
.reveal h2:last-child,
.reveal h3:last-child,
.reveal h4:last-child,
.reveal h5:last-child,
.reveal h6:last-child {
  margin: var(--r-heading-margin);
}

/* Small notes below list items (references etc) */
.note {
  display: block;
  font-size: 0.5em;
  color: var(--text-grey);
  margin-top: -0.2em;
  text-transform: initial;
  font-weight: initial;
}

/* No list style (no bullets etc.) */
.slides .list-none,
.slides .list-none ul {
  list-style: none;
}
.slides .list-none {
  margin-inline-start: 0;
}

/* Column helper (grid) */
.columns {
  display: grid;
  grid-auto-flow: column;
}

/* External links */
.reveal a[href^="http"] {
  color: var(--r-main-color);
  text-decoration: none;
}

/* Bibliography */
.csl-bib-body {
  margin-left: 2em;
  text-indent: -2em;
  text-align: left;
  font-size: 0.5em;
}

/* Code whitespace */
.reveal .code-wrapper code {
  white-space: pre-wrap;
  word-break: break-all;
}
/* Code line numbering width */
.reveal .hljs-ln-numbers {
  width: 3ex;
}

/* Inline icon image */
.icon {
  margin: 0;
  height: 0.8em;
  vertical-align: middle;
}

/* Custom fragment style: highlight-marker, highlight-current marker */
/* Use like highlight-red, highlight-current-red */
.reveal .slides section .fragment.highlight-marker,
.reveal .slides section .fragment.highlight-current-marker {
  opacity: 1;
  visibility: inherit;
  background-position-x: 100%;
}
.reveal .slides section .fragment.highlight-current-marker.current-fragment,
.reveal .slides section .fragment.highlight-marker.visible,
.marker {
  /* https://max.hn/thoughts/how-to-create-a-highlighter-marker-effect-in-css */
  margin: 0 -0.4em;
  padding: 0.1em 0.4em;
  border-radius: 0.8em 0.3em;
  background: transparent;
  background-image: linear-gradient(
    to right,
    rgba(255, 225, 0, 0.1),
    rgba(255, 225, 0, 0.7) 4%,
    rgba(255, 225, 0, 0.3) 50%,
    transparent 50%
  );
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  background-size: 200% 100%;
  background-position-x: 0;
}

/* Custom style for the red line and caption */
.reveal .slides section .fragment.custom-fragment {
  position: absolute;
  border-left: 6px solid red;
  height: 60px;
  color: red;
  left: 95%;
  padding: 5px;
  opacity: 1;
  visibility: inherit;
  display: none; /* Start hidden */
}

.reveal .slides section .fragment.custom-fragment.current-fragment {
  visibility: visible;
  display: block; /* Show when current */
}

.reveal .slides section .fragment.custom-fragment:not(.current-fragment) {
  visibility: hidden;
  display: none; /* Hide when not current */
}