/* css styles */

/* color styles */
:root {
  /* Hintergründe */
  --bg-sand: #FFF5E6;
  --bg-orange: #FFD08A;
  --bg-petrol: #046E8F;
  --bg-violet: #462255; 
  --bg-dark: #1D1E26;
  --bg-light: #FFFFFF;

  /* Textfarben */
  --text-dark: #1D1E26;
  --text-light: #FFFFFF;
  --text-petrol: #046E8F;   /* nur auf weiß */
  --text-violet: #462255;   /* nur auf weiß */
  --text-sand: #FFF5E6;

}

/* So wird es eingesetzt:
section.petrol {
  background: var(--bg-petrol);
  color: var(--text-light);
} 
*/



h1, h2, h3 {
  font-weight: 300;
  letter-spacing: 0.02em;
}

h2 {
  border-bottom: 0px solid var(--bg-orange); /* #046E8F;  */
}

h3 {
  border-bottom: 1px solid var(--bg-petrol); /* #046E8F;  */
}

body {
  line-height: 1.7;
}

a {
  font-weight: 600;
  text-decoration: none;
  color: var(--text-petrol);
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover,
a:focus {
  color: var(--text-violet);
  border-bottom-color: currentColor;
}

/* #FF9933FF #C24841FF #FFFF33FF #8B5B45FF #87AFD1FF #EEB05AFF #DBC5A0FF */
/* #462255FF #FF8811FF #9DD9D2FF #046E8FFF #D44D5CFF */



/* Quotes */
.quote {
  font-family: "Source Serif", serif;  /*  "Lora"; */  
  font-weight: 600;
  font-size: 100%;
  font-style: italic;
}
body.quarto-light .quote {
  color: var(--text-petrol);  /* #2b7a78; #046E8F;*/
}

/* Boxen */
.orange-box {
  background-color: var(--bg-orange);
  color: var(--text-dark);
  border-radius: .3rem !important;
  margin: 1rem 0;
  padding: 1rem;
}

.orange-box a {
  color: var(--text-petrol);  /* #046E8F; */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.orange-box a:hover {
  color: var(--text-violet);
}

.tk-box {
  background-color: var(--bg-petrol); /* #046E8F; */
  color: var(--text-light); /* white; */
  border-radius: .3rem !important;
  margin: 1rem 0;
  padding: 1rem;
}

.tk-box a {
  color: var(--text-sand); /* #FFF5E6; */
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tk-box a:hover {
  color: var(--text-light); /* #FFAA55; */
}

.violet-box {
  background-color: var(--bg-violet); 
  color: var(--text-light); /* white; */
  border-radius: .3rem !important;
  margin: 1rem 0;
  padding: 1rem;
}

.violet-box a {
  color: var(--text-sand); /* #FFF5E6; */           
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.violet-box a:hover {
  color: var(--text-light); /* #FFAA55; */
}

.white-box {
  background-color: var(--bg-light);
  border-radius: .3rem !important;
  margin: 1rem 0;
  padding: 1rem;
}

.white-fig figcaption {
  color: var(--text-light); 
}
.orange-fig figcaption {
  color: var(--text-dark);
}

/* Floating innerhalb einer Box*/
.float-right {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
  max-width: 40%;
}

.float-left {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
  max-width: 40%;
}

.float-shape {
  float: right;
  shape-outside: circle(50%);
  margin-left: 1rem;
  width: 250px;
}

.hero {
  position: relative;
  width: 100%;
  color: var(--text-light); 
}

.hero img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-quote {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-light); 
}

.fw-bold {
  font-weight: bold !important;
  color: var(--text-light);  /*!important;*/
}

.bottom-text-container {
  display: flex;            /*Flexbox aktivieren */
  flex-direction: column;   /* Inhalte von oben nach unten anordnen */
  justify-content: flex-end; /* alles am unteren Rand ausrichten */
  height: 100%;             /* volle Höhe der Spalte */
}

blockquote {
  text-align: left;
  border-left: none;
}