.timeline {
  z-index: 30;
  height: var(--timeline-height);
  width: 100%;
  margin: 0 6ch;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--main-mono);
  font-size: var(--font-size-xs);
  background-color: var(--timeline-bg-color);
  cursor: var(--cursor-default);
  color: var(--timeline-color-next);

  & > button {
    text-align: center;
    margin: 0 1ch;
  }
}
.timeline > button {
  all: unset;
  cursor: pointer;
  font: inherit;
  text-align: center;
  margin: 0 1ch;
  padding: 0.2em 0.6em;
}

#date1 {
  color: var(--timeline-color-current);
  background: var(--timeline-bg-current);
}

.timeline > button.active {
  color: var(--timeline-color-current);
  background: var(--timeline-bg-current);
}

.page {
  display: none;
}

.page.active {
  display: block;
}

//*#page1:popover-open ~ .timeline > #date1,
#page2:popover-open ~ .timeline > #date2,
#page3:popover-open ~ .timeline > #date3,
#page4:popover-open ~ .timeline > #date4,
#page5:popover-open ~ .timeline > #date5,
#page6:popover-open ~ .timeline > #date6,
#page7:popover-open ~ .timeline > #date7,
#page8:popover-open ~ .timeline > #date8,
#page9:popover-open ~ .timeline > #date9,
#page10:popover-open ~ .timeline > #date10,
#page11:popover-open ~ .timeline > #date11,
#page12:popover-open ~ .timeline > #date12,
#page13:popover-open ~ .timeline > #date13 {
  color: var(--timeline-color-prev) !important;
  background-color: transparent !important;
  & + button {
    color: var(--timeline-color-current);
    background: var(--timeline-bg-current);
  }
}
*/ ul li {
  list-style: none;
  padding-left: 0;
  position: relative;
  padding-left: 0;
  line-height: 1.7ch;
}

ul li::before {
  content: "+";
  position: absolute;
  left: -2ch;
}

h2 {
  font-family: var(--main-header);
  font-size: var(--font-size-l);
  color: var(--main-text-color);
  text-align: center;
  line-height: 1;
}

.highlight {
  background: rgb(54, 9, 175);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  display: inline;
}
/*
.md-notes *,
.md-anleitung * {
    background-color: var(--marker-color-1);
    color: var(--accent-color-6);
    display: inline-block;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}
*/

.md-notes ul,
.md-notes ol,
.md-notes li,
.md-anleitung ul,
.md-anleitung ol,
.md-anleitung li {
  display: block;
  background: none;
  color: var(--main-text-color);
}

.md-anleitung h1,
.md-anleitung h2,
.md-anleitung h3,
.md-anleitung h4,
.md-anleitung h5,
.md-anleitung h6 {
  display: block;
  width: fit-content; /* Marker nur so breit wie Text */
  color: var(--main-text-color);
}

/* textformatierung*/
h1 {
  font-family: var(--main-text);
  text-transform: uppercase;
  text-align: center;
  font-size: 7vh;
  line-height: 2ch;
  margin: 10vh 1ch;

  color: var(--main-text-color);
  /*color: transparent;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);*/
}
h2 {
  font-family: var(--main-header);
  font-size: 18vh;
  transform: rotate(var(--almendra-angle));
  margin-bottom: 2ch;
  color: var(--main-text-color);
  text-align: center;
  z-index: 2;
  color: var(--main-text-color);
}
h3 {
  margin-top: 4rem;
  font-family: var(--text-kursive);
  font-size: var(--font-size-m);
  z-index: 2;
  color: var(--main-text-color);
}
h5 {
  font-family: var(--text-kursive);
  text-align: center;
  font-size: var(--font-size-xsl);
  letter-spacing: 0.02em;
  line-height: 2ch;
  margin: 10vh 1ch;
  transform: rotate(-5deg);
  color: var(--main-text-color);
}

h6 {
  font-family: var(--text-kursive);
  text-transform: uppercase;
  text-align: center;
  font-size: 20vh;
  line-height: 2ch;
  margin: 3ch 0ch 2ch 0ch;
  transform: rotate(var(--title-angle));
  line-height: 2.5ch;

  color: var(--main-text-color);

  /* Hier passiert die Magie */
  animation: shrink-it linear;
  animation-timeline: scroll(

  ); /* Bindet die Animation an den Scrollfortschritt */
}

@keyframes shrink-it {
  0% {
    font-size: 20vh;
    opacity: 1;
  }
  5% {
    font-size: 7vh;
    opacity: 1;
  }
  100% {
    font-size: 7vh;
    opacity: 1;
  }
}
.untertitel {
  font-family: var(--main-mono);
  text-transform: uppercase;
  text-align: center;
  line-height: 1ch;
  transform: rotate(var(--almendra-angle));
  line-height: 1.75ch;
  margin-bottom: 10ch;

  color: var(--main-text-color);

  /* Hier passiert die Magie */
  animation: shrink-it-booktitle-under linear;
  animation-timeline: scroll(

  ); /* Bindet die Animation an den Scrollfortschritt */
}
@keyframes shrink-it-booktitle-under {
  0% {
    margin-top: 1ch;
    font-size: 5vh;
    opacity: 1;
    margin-bottom: 2ch;
  }
  5% {
    font-size: 4.75vh;
    opacity: 1;
  }
  100% {
    font-size: 4.75vh;
    opacity: 1;
    margin-bottom: 10ch;
  }
}
.booktitle {
  /* Hier passiert die Magie */
  animation: shrink-it-booktitle-main linear;
  animation-timeline: scroll(

  ); /* Bindet die Animation an den Scrollfortschritt */
}
@keyframes shrink-it-booktitle-main {
  0% {
    font-size: 18vh;
    opacity: 1;
    margin-bottom: 0.5ch;
  }
  5% {
    font-size: 17.5vh;
    opacity: 1;
  }
  100% {
    font-size: 17.5vh;
    opacity: 1;
    margin-bottom: 2ch;
  }
}

#introduction {
  color: var(--main-text-color);
}

.assignment {
  font-family: var(--main-text);
  font-size: (--font-size-m);
  margin-bottom: 10ch;
  padding: 2ch;
  background-size: cover;
  background-repeat: no-repeat;
  /*background-color: #f5f0e6; /* fallback color */
  color: var(--main-text-color);
  /* Paper-like effects */
  /*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  border-radius: 2px;
  /*color: var(--main-text-color);*/
  font-family: var(--main-text);
  font-size: (--font-size-m);

  /*padding: 2ch;*/
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--main-text-color);
  /* Paper-like effects */
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);*/
  border-radius: 2px;
  /*color: var(--main-text-color);*/
}

code,
.design-rules {
  font-family: var(--main-mono);
  font-size: var(--font-size-xs);
  color: var(--main-text-color);
  & > h3 {
    font-family: var(--main-mono);
    font-size: var(--font-size-s);
  }
}

.design-rules.large {
  font-size: var(--font-size-s);
}
/* Hintergrundebene */
.parallax-bg {
  top: 30vh;
  position: fixed;
  pointer-events: none;
  overflow-x: scroll;
  display: flex;
  width: 100%;
  height: 40vh;
  opacity: 30%;
  & img {
    height: 100%;
    margin: 0 10%;
  }
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
  &::-webkit-scrollbar {
    display: none; /* For Chrome, Safari, and Opera */
  }

  img {
    mask-image: linear-gradient(
        to right,
        transparent,
        var(--main-text-color) 5%,
        var(--main-text-color) 95%,
        transparent
      ),
      linear-gradient(
        to bottom,
        transparent,
        var(--main-text-color) 5%,
        var(--main-text-color) 95%,
        transparent
      );
    mask-composite: intersect;
  }
}

.content,
.md-notes,
.chapter-title {
  position: relative;
  z-index: 2;
  color: var(--main-text-color);
}

.number {
  font-family: var(--main-header);
  font-size: var(--font-size-m);
}
.name {
  font-family: var(--text-kursive);
  font-weight: bold;
  font-size: var(--font-size-s);
}
.cursive {
  font-family: var(--text-kursive);
}

/* BENENNUNGEN classes
    <section class="md-notes">
    <section class="md-anleitung“>

    <section class="assignment">
    <section class="chapter-title">

    <section class="photos">

    <section class="workshop">
    <section class="design-rules">
  */

.book {
  color: var(--main-text-color);
  padding: 4rem 2rem;

  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
  height: 100%;
  gap: 2rem;

  & > section {
    grid-row: 1 / 5;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: subgrid;

    ul {
      font-family: var(--main-mono);
      font-size: 1.1rem;
    }
  }

  h2,
  p,
  h3 {
    margin: 0;
  }

  img {
    max-width: 100%;
    max-height: calc(var(--main-height) - 4rem);
  }
}

.authors {
  text-align: center;
}

@media screen and (min-width: 600px) {
  .book {
    grid-template-columns: 2fr 2fr;
    grid-template-rows: auto auto auto auto;
  }
}

#what,
#automation,
#print-version,
#imprint {
  li {
    font-family: var(--main-mono) !important;
  }
  h2 {
    margin-top: 2ch;
  }
}
.questions {
  text-transform: none;
  animation: grow-it-questions linear;
  animation-timeline: scroll();
}
/*@keyframes grow-it-questions {
  0% {
    font-size: var(--font-size-s);
    opacity: 1;
    margin-top: 10ch;
    margin-bottom: 5ch;
  }
  50% {
    font-size: var(--font-size-m);
    opacity: 1;
    margin-bottom: 5ch;
  }
  95% {
    font-size: var(--font-size-m);
    opacity: 1;
    margin-bottom: 5ch;
  }
  100% {
    font-size: var(--font-size-s);
    opacity: 1;
    margin-bottom: 2ch;
  }
}*/
.make-space {
  text-transform: none;
  animation: make-space linear;
  animation-timeline: scroll();
}
@keyframes make-space {
  0% {
    opacity: 1;
  }
  8% {
    opacity: 1;
    margin-top: 1.5ch;
    margin-bottom: 1.5ch;
  }
  10% {
    margin-top: 10ch;
    margin-bottom: 10ch;
  }
  15% {
    margin-top: 8ch;
    margin-bottom: 8ch;
  }
  20% {
    margin-top: 6ch;
    margin-bottom: 6ch;
  }
  25% {
    margin-top: 3ch;
    margin-bottom: 3ch;
  }
  100% {
    opacity: 1;
    margin-bottom: 1ch;
  }
}