:root {
  --bs-body-bg: #F1F1F1;
  --color-purple: #B558A1;
  --color-purple-light: #B558A133;
  --color-purple-medium: #B558A199;
  --color-green: #559B3B;
  --color-blue: #2F91BD;
  --color-grey: #A3A3A388;
  --color-turquoise: #18E9F1BB;
  --color-orange: #FFB300DD;
  --color-darkgrey: #32322D;
}

body {
  font-family: Jost, Arial, sans-serif;
  color: black;
  font-weight: 300;
}

h1 {
  font-family: Jost, 'Times New Roman', serif;
  font-size: clamp(1.75rem, 4vw + 1rem, 3.2em);
  font-weight: 600;
  text-align: center;
  color: black;
  margin: 3px 0 3px;
  padding-bottom: 5px;
  border-bottom: 1px black solid;
  word-break: break-word;
  hyphens: auto;
}


h2 {
  font-family: Jost, 'Times New Roman', serif;
  font-size: 1.8em;
  font-weight: 500;
  text-align: center;
  margin-top: 4vh !important;
  word-break: break-word;
  hyphens: auto;
}

h3 {
  font-family: Jost, 'Times New Roman', serif;
  font-weight: 500;
  font-size: 1.33em;
  margin-top: 5vh;
  padding-bottom: 20px;
  text-align: center;
}

hr {
  border: 0;
  height: 2px;
  background: #aaa;
  width: 50%;
  margin: 0 auto;
}

p {
  padding-left: 8px;
  padding-right: 8px;
  margin: 0 auto;
}

.narrative p {
  font-size: clamp(1rem, 0.5rem + 2vw, 1.3em) !important;
  font-weight: 400;
  line-height: clamp(1.25, 1.3, 1.4) !important;
  /*word-break: break-word;
  hyphens: auto;*/
}

#quarto-document-content p {
  padding-top: 10px;
  line-height: 1.4;
  text-align: left;
  font-size: clamp(0.9rem, 0.5rem + 2vw, 1.4em);
  max-width: min(70ch, calc(100vw - 2rem));
  padding-inline: clamp(1rem, 4vw, 2rem);
}

#quarto-document-content > p.with-border {
  border-top: 1px solid #222222;
  margin-top: 40px;
}

.page-full, section#quellen > p {
  max-width: min(90%, calc(100vw - 2rem));
  margin: 2% auto;
  padding-inline: clamp(0.75rem, 3vw, 1rem);
}

ul {
  max-width: 80%;
  margin-inline: auto;  
}

li {
  font-weight: 400 !important;
  font-size: 0.9em;
}

em {
  font-weight: 500;
  font-style: normal;
}

a {
  text-decoration: none;
  color: var(--color-darkgrey);
  background-image: linear-gradient(
    120deg,
    var(--color-purple-light) 0%,
    var(--color-purple-medium) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 30%; 
  background-position: 0 85%;
  transition: background-size 0.25s ease-in;
  padding: 0.375rem 0.5rem;
}

a:hover {
  background-size: 100% 100%; /* Effekt beim Drüberfahren: Volle Markierung */
}

.highlighted-text {
  font-weight: 500;
  background-color: var(--color-darkgrey);
  color: white;
  padding: 2px 4px;
  border-radius: 5px;
}

.highlighted-text-purple {
  background-color: var(--color-purple);
}

.highlighted-text-green {
  background-color: var(--color-green);
}

.highlighted-text-blue {
  background-color: var(--color-blue);
}

.highlighted-text-grey{
  background-color: var(--color-grey);
}

.highlighted-text-turquoise{
  background-color: var(--color-turquoise);
}

.highlighted-text-orange{
  background-color: var(--color-orange);
}

.highlighted-text-gradient-purple-blue {
  font-weight: 600;
  background: linear-gradient(90deg, var(--color-purple), var(--color-blue));
  color: white;
  padding: 2px 4px;
  border-radius: 5px;
}

.highlighted-text-gradient-green-black {
  font-weight: 600;
  background: linear-gradient(90deg, var(--color-darkgrey), var(--color-green));
  color: white;
  padding: 2px 4px;
  border-radius: 5px;
}

div.footer p {
  border-top: 1px solid #bbbbbb;
  margin: 4vh auto;
  text-align: center;
  padding-top: 1vh;
  font-size: 0.9em !important;
}


main.content {
    display: block !important;
  }
.page-full {
  grid-column: content;
  float: none !important;
  display: block !important;
}


@media (max-width: 640px) {
  p {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  
  #quarto-document-content > p {
    padding-inline: 1rem;
    font-size: 1.0rem;
    max-width: calc(100vw - 2rem); 
  }
  
  .page-full, section#quellen > p {
    max-width: 95%;  
    padding-inline: 1rem;
  }
}