:root {
  /* Add these styles to your global stylesheet, which is used across all site pages. You only need to do this once. All elements in the library derive their variables and base styles from this central sheet, simplifying site-wide edits. For instance, if you want to modify how your h2's appear across the site, you just update it once in the global styles, and the changes apply everywhere. */
  --primary: #ff6a3e;
  --primaryLight: #ffba43;
  --secondary: #ffba43;
  --secondaryLight: #ffba43;
  --headerColor: #1a1a1a;
  --bodyTextColor: #4e4b66;
  --bodyTextColorWhite: #fafbfc;
  /* 13px - 16px */
  --topperFontSize: clamp(0.8125rem, 1.6vw, 1rem);
  /* 31px - 49px */
  --headerFontSize: clamp(1.9375rem, 3.9vw, 3.0625rem);
  --bodyFontSize: 1rem;
  /* 60px - 100px top and bottom */
  --sectionPadding: clamp(3.75rem, 7.82vw, 6.25rem) 1rem;
}

body {
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  /* prevents padding from affecting height and width */
  box-sizing: border-box;
  font-family: 'Fira Sans', sans-serif !important;
}
.cs-topper {
  font-size: var(--topperFontSize);
  line-height: 1.2em;
  text-transform: uppercase;
  text-align: inherit;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 0.25rem;
  display: block;
}

.cs-title {
  font-size: var(--headerFontSize);
  font-weight: 900;
  line-height: 1.2em;
  text-align: inherit;
  max-width: 43.75rem;
  margin: 0 0 1rem 0;
  color: var(--headerColor);
  position: relative;
}

.cs-text {
  font-size: var(--bodyFontSize);
  line-height: 1.5em;
  text-align: inherit;
  width: 100%;
  max-width: 40.625rem;
  margin: 0;
  color: var(--bodyTextColor);
}

body.dark-mode {
  background-color: #1a1a1a;
  color: #ffffff;
}

body.dark-mode a {
  color: #ffffff;
}

body.dark-mode #cs-navigation {
  background-color: #333;
}

body.dark-mode .cs-li-link {
  color: #ffffff;
}

body.dark-mode .cs-li-link:hover {
  color: #FFD700; /* Optional: Farbe ändern */
}

#cs-container{
  position:fixed;
}

div#div_conversational_ai{
  /*z-index: -2;*/
  position: relative;
  margin: auto;
  width: 80%;
  margin-top: 70px;
}
#main-content {
    padding: 1.5rem;
    line-height: 1.6;
  position: relative;
  margin: auto;
  width: 80%;
  }

  #main-content h2 {
    color: var(--primary);
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }

  #main-content ol {
    padding-left: 1.2rem;
  }

  #main-content li {
    margin-bottom: 1.5rem;
  }

  #main-content li strong {
    color: var(--primary);
    font-size: 1.1rem;
  }

  #main-content span {
    display: block;
    margin-top: 0.5rem;
    color: var(--bodyTextColor);
  }

  #main-content ul {
    margin-top: 0.5rem;
    padding-left: 1.2rem;
    list-style-type: disc;
  }

  #main-content ul li {
    margin-bottom: 0.4rem;
  }

  #main-content  {
    color: var(--bodyTextColor);
  }

body.dark-mode #main-content ul {
    color: white;
}
body.dark-mode #main-content span {
    color: white;
}
body.dark-mode #main-content ol {
    color: white;
}
body.dark-mode #main-content li {
    color: white;
}
body.dark-mode #main-content h2 {
    color: white;
}

.cs-ul-wrapper{
  z-index: 1 !important;
}

#chatbox > #messages div{
  padding: 10px;
  line-height: 1.6;
}
#chatbox{
  padding-top: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-bottom: 70px;
}

#messages {
  margin-bottom: 2rem;
}
#messages div.user {
  background-color: #fff8e1;
  align-self: flex-end;
}

.dark-mode #messages div.user {
  background-color: #4e4b66;
  align-self: flex-end;
}


#messages div.bot {
  align-self: flex-start;
}

#messages {
  max-height: 65vH;       /* oder z.B. 50vh für relative Höhe */
  overflow-y: auto;        /* Scrollen ermöglichen */
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-bottom: 1rem;
}

#send-message{
  margin-top: 0.8rem;
  padding: 0.5rem 1rem;
  background-color: #fc805a;
  color: white;
  font-size: 1rem;
  border-radius: 6px;
  cursor: pointer;
  margin-right: 1rem;
  float: right;
  border: 2px solid;
  border-color: #fc805a;
}

#send-message:hover {
  background-color: #ff6a3e;
  border-color: #ff6a3e;
}

#start-reflection {
  margin-top: 0.8rem;
  padding: 0.5rem 1rem;
  background-color: white;
  color: #69959f;
  font-size: 1rem;
  border: 2px solid;
  border-radius: 6px;
  border-color: #69959f;
  cursor: pointer;
  margin-right: 1rem;
  float: right;
}

#start-reflection:hover {
  background-color: #447083;
  color: white;
}

#site-footer {
    text-align: center;
    font-size: 0.9rem;
    color: #666;
    padding: 1rem;
    margin-top: 1rem;
    border-top: 1px solid #ddd;
}
@media (max-width: 600px) {
    #site-footer {
        font-size: 0.8rem;
        padding: 0.8rem;
    }
}
@media (max-width: 768px) {
  body {
    font-size: 18px;
  }

  h1, h2, h3, p, textarea, button, label, textarea {
    font-size: 110%;
  }

  #messages div {
    font-size: 0.9em;
  }
  textarea, button {
  padding: 12px;
  font-size: 1rem;
}
}

@media (max-width: 400px) {
#chatbox{
  padding-bottom: 150px;
}
}
/*
.bot {
  background-color: #f4f4f4;
  padding: 12px;
  margin: 8px 0;
  border-radius: 10px;
  font-family: sans-serif;
}*/

.bot h3 {
  margin-top: 0;
  color: #2c3e50;
}

.bot ul {
  padding-left: 20px;
}

.bot code {
  background: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: monospace;
}

.dark-mode .bot h3 {
  margin-top: 0;
  color: white;
}

.dark-mode .bot code {
  background: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: monospace;
  color: black;
}

/* Am besten in deine styles.css packen */
.bot.typing {
  font-style: italic;
  opacity: 0.7;
  margin: 0.5em 0;
}
/* Optional: animierter Punkt-Effekt */
.bot.typing::after {
  content: '';
  display: inline-block;
  width: 0.6em;
  animation: dots 1s steps(3,end) infinite;
}

@keyframes dots {
  0%, 20% { content: ''; }
  40%      { content: '.'; }
  60%      { content: '..'; }
  80%,100% { content: '...'; }
}

#user-input {
  resize: none;        /* kein manuelles Vergrößern per Ziehen */
  overflow-y: hidden;  /* versteckt Scrollbalken, wenn unterhalb max-Höhe */
}

textarea{
  width: 100%;
  height: 40px;
}