body {
    font-family: system-ui, sans-serif;
    background-color: #e5ddd5;
    margin: 0;
    padding: 0;
    /* display: flex; */
    /* flex-direction: column; */
    /* height: 100vh; */
  }
  
  header {
    background-color: #075e54;
    color: white;
    padding: 1rem;
    text-align: center;
  }
  
  main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  
  #chat-box {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .message {
    max-width: 75%;
    padding: 0.7rem 1rem;
    border-radius: 1.3rem;
    position: relative;
    animation: fadeIn 0.3s ease;
  }
  
  .message.from-user {
    align-self: flex-end;
    background-color: #dcf8c6;
    text-align: right;
  }
  
  .message.from-other {
    align-self: flex-start;
    background-color: #fff;
    text-align: left;
  }
  
  .message .sender {
    font-weight: bold;
    font-size: 0.85em;
    margin-bottom: 0.2rem;
    color: #555;
  }
  
  .message .text {
    font-size: 1rem;
  }
  
  #typing-indicator {
    padding: 0.5rem 1rem;
    font-style: italic;
    color: #888;
    margin-left: 0.5rem;
    margin-bottom: 0.5rem;
  }
  
  .hidden {
    display: none;
  }
  
  #choice-box {
    padding: 1rem;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border-top: 1px solid #ccc;
  }
  
  #choice-box button {
    padding: 0.7rem;
    border: none;
    border-radius: 1rem;
    background-color: #25d366;
    color: white;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
  }
  
  #choice-box button:hover {
    background-color: #1ebe5d;
  }
  
  footer {
    padding: 1rem;
    background-color: #e0e0e0;
    text-align: center;
  }
  
  button#startBtn {
    padding: 0.8rem 2rem;
    font-size: 1rem;
    background-color: #128c7e;
    color: white;
    border: none;
    border-radius: 1.5rem;
    cursor: pointer;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
  }
  
  /* Webkit-Fix: Eingabefeld und Dropdown immer dunkle Schrift, auch im nicht-fokussierten Zustand */
  input[type="text"], select, select option {
    color: #222 !important;
    background-color: #fff !important;
  }
  input[type="text"]::placeholder {
    color: #888 !important;
    opacity: 1 !important;
  }
  select:disabled, select[disabled] {
    color: #bbb !important;
    background-color: #f5f5f5 !important;
  }
  
  /* Webkit: explizit für nicht-fokussierte Dropdowns und Autofill */
  input[type="text"]:-webkit-autofill,
  select:-webkit-autofill {
    -webkit-text-fill-color: #222 !important;
    background-color: #fff !important;
  }
  select:not(:focus) {
    color: #222 !important;
    background-color: #fff !important;
  }
  
  #intro-image {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 1rem;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  
  @media (max-width: 600px) {
    #intro-image {
      max-width: 220px;
    }
    #intro-container {
      padding: 0.5rem;
    }
    #intro-text {
      font-size: 0.95rem;
    }
    .chat-frame {
      margin: 0.5rem auto;
      border-radius: 12px;
      height: auto;
      min-height: unset;
    }
  }