:root {
  /* alpha-test CD Palette */
  --at-blue: #0073CF;
  --at-mid: #005A9E;
  --at-deep: #00243D;
  --at-deep2: #002C49;
  --at-red: #E2123F;
  --at-dred: #A70240;
  --at-ink: #37383A;

  /* App & Layout Surfaces */
  --bg-app: linear-gradient(180deg, #002C49 0%, #00243D 100%);   /* Chat-Pane (rechts) */
  --bg-permission:
    radial-gradient(55% 40% at 12% 8%, rgba(46,156,236,.85) 0%, rgba(46,156,236,0) 60%),
    radial-gradient(50% 38% at 92% 30%, rgba(0,176,214,.55) 0%, rgba(0,176,214,0) 58%),
    radial-gradient(60% 45% at 50% 96%, rgba(0,58,103,.7) 0%, rgba(0,58,103,0) 62%),
    #0073CF;
  --bg-visualizer: radial-gradient(120% 80% at 50% 10%, #1A8AE4 0%, #0073CF 50%, #005A9E 100%);
  --bg-msg-user: #0073CF;
  --bg-msg-assistant: rgba(255,255,255,.10);

  /* Textfarben */
  --text-primary: #fff;
  --text-on-surface: #fff;
  --link-primary: #fff;

  /* Focus/States */
  --focus-ring: #5DE3FF;

  /* Buttons – Inline (klein, im Text) */
  --btn-inline-color: #fff;
  --btn-inline-angle: 90deg;
  --btn-inline-start: #005A9E;
  --btn-inline-end: #0073CF;

  /* Buttons – Groß (Call-to-Action) */
  --btn-lg-angle: 90deg;
  --btn-lg-start: #E2123F;
  --btn-lg-end: #A70240;

  /* Sonstiges */
  --accent-strong: rgba(255,255,255,.4);

  /* Safe Areas */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --vk-offset: 0px;

  --opacity-bigB: 1;
}

#main,
.chatContainer,
#log {
  min-height: 0;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* Basis & A11y */
.visually-hidden {
  border: 0;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

a { color: var(--link-primary); }
a:visited { color: var(--link-primary); opacity: 0.8; }

* { box-sizing: border-box; margin: 0; padding: 0; }
*:focus-visible,
*:focus { outline: 2px solid var(--focus-ring); }

body {
  background: var(--at-deep);
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  font-family: "IBMPlexSans", system-ui, sans-serif;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-bottom: var(--safe-bottom);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  padding-top: var(--safe-top);
}

body.ios-app-mode {
  height: 100vh;
  height: -webkit-fill-available;
  padding-bottom: 0;
  padding-top: 0;
}

html,
body.ios-app-mode {
  background: var(--at-deep);
}

body.ios-app-mode #main,
body.ios-app-mode .chatContainer,
body.ios-app-mode #visualizer {
  margin: 0;
}

li { margin-left: 1rem; }

#main { display: none; flex: 1; overflow: hidden; }

#permission-message {
  align-items: center;
  background: var(--bg-permission);
  color: #fff;
  display: flex;
  flex: 1;
  flex-direction: column;
  font-size: 18px;
  gap: 40px;
  justify-content: center;
  padding: 20px;
  text-align: center;
}

/* Linke Seite – Visualizer */
#visualizer {
  align-items: center;
  background: var(--bg-visualizer);
  display: flex;
  flex: 0 0 42%;
  flex-direction: column;
  gap: 20px;
  justify-content: center;
  position: relative;
  width: 42%;
}

#logo {
  position: absolute;
  right: 32px;
  top: 28px;
  width: 132px;
}

#assistant-bubble {
  aspect-ratio: 1/1;
  border-radius: 50%;
  opacity: 0;
  position: relative;
  width: 180px;
}

/* Kugel-Zustände (unused, beibehalten) */
.idle { animation: idlePulse 3s ease-in-out infinite; }
@keyframes idlePulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.05) } }
.listening { animation: listenPulse 1.2s ease-in-out infinite; }
@keyframes listenPulse { 0%,100% { transform: scale(1) } 50% { transform: scale(1.15) } }
.speaking { animation: speakingWave 1.2s ease-in-out infinite; }
@keyframes speakingWave {
  0%,100% { transform: scale(1) }
  25% { transform: scale(1.1) }
  50% { transform: scale(.95) }
  75% { transform: scale(1.05) }
}

/* KAI-Visualizer: Avatar in runder Bubble + Status-Pill + Name */
.kaiBlock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.kaiStage {
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
/* Avatar (avatar.js, 300px) bündig unten in die Bubble setzen */
/* Avatar (avatar.js) füllt die Bubble: Ebenen relativ zur Bubble-Größe dimensioniert
   + unten zentriert → skaliert automatisch mit (Desktop 280px / Mobile klein). */
.kaiStage .avatar-container {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0;
  transform: none; display: block !important;   /* avatar.js blendet sonst auf Mobile aus */
}
.kaiStage .avatar-mouth,
.kaiStage .avatar-blink {
  position: absolute; left: 50%; right: auto; top: auto; bottom: -14%;
  transform: translateX(-50%);
  width: 108%; height: auto;
  animation: none;   /* Idle-Pulsieren aus */
}
.kaiStage .avatar-mouth img,
.kaiStage .avatar-blink img { width: 100%; height: auto; display: block; }

.kaiPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  font: 600 13px/1 "IBMPlexSans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.kaiDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--at-red);
}
.kaiStage.is-talking { border-color: rgba(255,255,255,.85); }
.kaiName { text-align: center; }
.kaiName h2 {
  font: 700 24px/1 "IBMPlexSans", sans-serif;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin: 0;
}
.kaiName p {
  font: 400 13px/1.3 "IBMPlexSans", sans-serif;
  color: rgba(255,255,255,.7);
  margin: 6px 0 0;
}

/* Rechte Seite – Konversation */
#log {
  background: transparent;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  padding: 24px;
  gap: 14px;
}

.chatContainer {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-direction: column;
  background: var(--bg-app);
  position: relative;   /* Anker für den Theme-Toggle oben rechts */
}

body.app-mode #main {
  height: 100%;
}

body.app-mode .chatContainer {
  flex: 1;
  height: auto;
  min-height: 0;
  position: relative;
}

body.app-mode #log {
  padding-bottom: calc(90px + var(--safe-bottom) + var(--vk-offset));
}

body.app-mode #msgDialog {
  bottom: var(--vk-offset);
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
}

body.ios-app-mode #msgDialog {
  bottom: 0;
}

#msgDialog {
  background-color: rgba(0,20,34,.55);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: all .4s;
  width: 100%;
}

body.ios-app-mode #msgDialog {
  padding-bottom: 0;
}

/* Eingabe */
.chat-input {
  padding: 16px 20px 24px;
  position: relative;
  width: 100%;
}

.chat-input textarea {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 4px;
  box-shadow: none;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  min-height: 80px;
  overflow: auto;
  padding: 16px 130px 16px 16px;
  resize: none;
  width: 100%;
}
.chat-input textarea::placeholder { color: rgba(255,255,255,.5); }

#sendText {
  background: var(--at-blue);
  border: none;
  border-radius: 4px;
  bottom: 32px;
  color: #fff;
  font-size: 20px;
  height: 44px;
  position: absolute;
  right: 70px;
  width: 44px;
}

#closeKeyboard {
  background: transparent;
  border: none;
  color: rgba(255,255,255,.7);
  font-size: 24px;
  position: absolute;
  right: 24px;
  top: 22px;
}

/* Nachrichten */
.message {
  border-radius: 4px;
  line-height: 1.5;
  max-width: 78%;
  padding: 14px 18px;
  word-wrap: break-word;
}

.user {
  align-self: flex-end;
  background: var(--bg-msg-user);
  color: var(--text-on-surface);
  font-weight: 500;
}

.assistant {
  align-self: flex-start;
  background: var(--bg-msg-assistant);
  color: var(--text-on-surface);
}

/* Buttons inline (Links in Nachrichten) */
.button {
  align-self: center;
  background: var(--at-blue);
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 4px;
  color: #fff;
  display: inline-block;
  line-height: 1;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 12px 18px;
  position: relative;
  text-decoration: none;
  transition: all .3s ease;
  overflow: hidden;
}

.button::after {
  align-items: center;
  background: var(--at-mid);
  border-radius: 4px;
  content: attr(data-text);
  display: inline-flex;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: all 0.3s ease;
}

.button:hover::after { opacity: 1; }
.button:visited { color: var(--btn-inline-color); }

/* Buttons groß */
.bigbutton {
  align-self: center;
  background: linear-gradient(var(--btn-lg-angle), var(--btn-lg-start), var(--btn-lg-end));
  border-radius: 4px;
  box-shadow: none;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-size: large;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  line-height: 1;
  overflow: hidden;
  padding: 15px 26px;
  position: relative;
  text-decoration: none;
  transition: all .3s ease;
}

.bigbutton::after {
  align-items: center;
  background: linear-gradient(var(--btn-lg-angle), var(--btn-lg-end), var(--btn-lg-start));
  content: attr(data-text);
  display: inline-flex;
  font-size: large;
  inset: 0;
  justify-content: center;
  opacity: 0;
  position: absolute;
  transition: all 0.3s ease;
}

.bigbutton:hover::after { opacity: 1; }

.bigbutton.disabled {
  background: rgba(255,255,255,.15);
  box-shadow: none;
  color: transparent;
  pointer-events: none;
  position: relative;
}

.bigbutton.disabled::after {
  background: url("../img/loading.gif") no-repeat center center;
  background-size: contain;
  color: transparent;
  height: 100%;
  inset: 0;
  opacity: var(--opacity-bigB);
  position: absolute;
  width: 100%;
  z-index: 9999;
}

.system { font-weight: bold }

/* Footer & Controls */
#controls {
  background: var(--at-deep);
  border-top: 1px solid rgba(255,255,255,.16);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  padding: 15px;
}

#controls button {
  background: var(--at-blue);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  padding: 10px 20px;
  transition: background .2s;
}

#controls button:hover { background: var(--at-mid); }

#mailInp {
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 4px;
  color: var(--at-ink);
  font-size: 16px;
  padding: 10px 14px;
  width: 100%;
}

footer { display: none; }

/* Mail-Formular (Karte auf Blau) */
.MailForm {
  align-items: center;
  background-color: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  box-shadow: none;
  color: #fff;
  display: grid;
  font-size: large;
  gap: 20px;
  grid-column: 2;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
  justify-items: center;
  line-height: 1.5;
  padding: 24px 32px;
  width: 90%;
}

#InpLabelWrapper {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  font-size: small;
  gap: 6px;
  grid-column: 1/3;
  grid-row: 2/3;
  justify-content: center;
  justify-self: flex-start;
  margin-bottom: 20px;
  width: 100%;
}

#infoText { grid-column: 1/4; grid-row: 1; }
#sendMail { grid-column: 3/4; grid-row: 2; justify-self: flex-start; }

.consent {
  grid-column: 1/4;
  grid-row: 3;
  justify-self: flex-start;
  overflow: hidden;
  transition: all .4s;
  font-size: .8rem;
  color: rgba(255,255,255,.8);
}

/* Backdrop & Modal */
.backdrop {
  backdrop-filter: blur(2px);
  background: rgba(0,20,34,.5);
  height: 100vh;
  height: 100dvh;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity .2s ease;
  z-index: 4;
}

.backdrop.ended {
  opacity: 1;
  pointer-events: auto;
}

.MailForm.ended {
  position: fixed;
  right: 50%;
  top: 50%;
  transform: translate(+50%, -50%);
  z-index: 5;
  background-color: var(--at-deep);
  border-color: rgba(255,255,255,.2);
}

/* Utility Buttons */
.simpleButton {
  background-color: rgba(255,255,255,.14);
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  transition: all .3s;
}
.simpleButton:hover { background-color: rgba(255,255,255,.26); }
/* Zurück-Button (Chat-Seite, Web & App) – identisch zu den übrigen Seiten (at.css .at-back).
   index.html lädt at.css nicht, daher hier gespiegelt. */
.at-back { width: 40px; height: 40px; border-radius: 4px; background: rgba(255,255,255,.14);
  display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; flex-shrink: 0; font-size: 18px; }
.at-back:hover { background: rgba(255,255,255,.24); }

#openKeyboard {
  background-color: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 4px;
  bottom: 16px;
  color: #fff;
  font-size: 26px;
  left: 50%;
  position: relative;
  transform: translate(-50%,0%);
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  transition: opacity .3s ease, transform .3s ease, max-height .3s ease, max-width .3s ease, margin .3s ease, padding .3s ease;
}
#openKeyboard:hover { background-color: rgba(255,255,255,.22); }

body.app-mode #openKeyboard {
  bottom: calc(16px + var(--safe-bottom) + var(--vk-offset));
  left: 50%;
  position: absolute;
  transform: translate(-50%, 0%);
}

body.ios-app-mode #openKeyboard {
  bottom: calc(16px + var(--vk-offset));
}

#openKeyboard:disabled {
  opacity: 0;
  max-height: 0;
  max-width: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  transform: translate(-50%,-10px);
}

#muteMic {
  background-color: var(--at-red);
  border: none;
  border-radius: 4px;
  bottom: 16px;
  color: #fff;
  font-size: 22px;
  height: 48px;
  left: 90%;
  position: relative;
  transform: translate(-50%,0%);
  width: 48px;
}

body.app-mode #muteMic {
  bottom: calc(18px + var(--safe-bottom) + var(--vk-offset));
  left: auto;
  position: absolute;
  right: 12px;
  transform: none;
}

body.ios-app-mode #muteMic {
  bottom: calc(18px + var(--vk-offset));
}

#muteMic:hover { background-color: var(--at-dred); }

.summaryWrapper {
  bottom: 16px;
  left: 16px;
  position: fixed;
  width: 56px;
  z-index: 6;
}

#summaryButton {
  background-color: rgba(255,255,255,.14);
  border-radius: 4px;
  color: #fff;
  font-size: 24px;
  height: 56px;
  width: 56px;
}
#summaryButton:hover { background-color: rgba(255,255,255,.26); }

.summaryHint {
  background: var(--at-deep);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 6px;
  bottom: calc(100% + 12px);
  color: #fff;
  font-size: 0.78rem;
  left: 50%;
  line-height: 1.4;
  padding: 8px 26px 8px 10px;
  position: absolute;
  transform: translateX(-15%);
  width: 185px;
  z-index: 5;
}

.summaryHint::after {
  border: 7px solid transparent;
  border-top-color: var(--at-deep);
  bottom: -14px;
  content: "";
  left: 14px;
  position: absolute;
}

.summaryHintClose {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  position: absolute;
  right: 6px;
  top: 5px;
}

.summaryModal {
  align-items: center;
  background: rgba(0, 20, 34, 0.6);
  bottom: 0;
  justify-content: center;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 10;
}

.summaryModalContent {
  background: var(--at-deep);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  color: #fff;
  max-height: 85vh;
  max-width: 520px;
  overflow-y: auto;
  padding: 48px 24px 24px;
  position: relative;
  width: 92%;
}

.summaryModalContent .MailForm {
  grid-template-columns: 1fr;
  padding: 10px 0;
  width: 100%;
  background: transparent;
  border: none;
}

.closeSummaryBtn {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  position: absolute;
  right: 12px;
  top: 8px;
}

/* Carousel */
.carousel-wrapper {
  background-color: transparent;
  height: 90px;
  overflow: hidden;
  position: relative;
  width: 70%;
}

.carousel {
  --carousel-item-width: 160px;
  --carousel-gap: 28px;
  --carousel-step: calc(var(--carousel-item-width) + var(--carousel-gap));
  align-items: center;
  animation: slide calc(var(--image-number)*4s) linear infinite;
  display: flex;
  gap: var(--carousel-gap);
}

.carousel img {
  flex-shrink: 0;
  max-height: 70px;
  width: var(--carousel-item-width);
  filter: brightness(0) invert(1);
  opacity: .85;
}

.fade {
  height: 100%;
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 25%;
  z-index: 2;
}

.fade-left {
  background: linear-gradient(to right, #0073CF, rgba(0,115,207,0));
  left: 0;
}

.fade-right {
  background: linear-gradient(to left, #005A9E, rgba(0,90,158,0));
  right: 0;
}

@keyframes slide {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-1 * var(--carousel-step) * var(--image-number))); }
}

/* Responsive – Mobile */
@media (max-width:1050px) {
  /* Tablet: Button raus aus der schmalen 1/3-Spalte -> eigene volle Zeile,
     sonst ragt der Absenden-Button über die Karte hinaus */
  #InpLabelWrapper { grid-column: 1/4; }
  #sendMail { grid-column: 1/4; grid-row: 4; justify-self: center; max-width: 100%; }
  #mailInp { width: 80%; }
  .MailForm { font-size: small; }
}

@media (max-height:740px) {
  .carousel-wrapper { height: 56px; }
  .carousel { --carousel-item-width: 90px; --carousel-gap: 20px; --carousel-step: calc(var(--carousel-item-width) + var(--carousel-gap)); }
  .carousel img { width: 90px; flex-shrink: 0; max-height: 44px; }
}

@media (max-height:460px) {
  #logo { display: none; }
}

@media (max-width:800px) {
  .carousel-wrapper { height: 70px; }
  .carousel img { width: 140px; flex-shrink: 0; max-height: 50px; }
  .chatContainer { flex: 1; min-height: 0; }

  body.app-mode .chatContainer {
    height: auto;
  }
  #msgDialog { width: 100vw; }

  body:not(.app-mode) #muteMic {
    bottom: 18px;
    left: auto;
    position: fixed;
    right: 12px;
    transform: none;
  }

  #logo {
    right: 12px;
    top: 12px;
    width: 96px;
  }

  .chat-input { padding: 8px 16px 16px; }
  .chat-input textarea {
    min-height: 120px;
    padding: 12px 110px 14px 14px;
  }

  #main { flex-direction: column; }
  #mailInp { width: 100%; }
  #permission-message { align-items: flex-start; font-size: 14px; }
  /* Auswahl-Buttons (Mikro/Tastatur) gleich breit + zentriert statt textabhängig/linksbündig */
  #permission-message p { width: 100%; }
  #permission-message .bigbutton { display: block; width: 100%; max-width: 300px; margin: 6px auto; text-align: center; }

  footer {
    align-items: center;
    background-color: var(--at-deep);
    height: 20vh;
    height: 20dvh;
    justify-items: center;
    padding: 8px 0 12px;
    transition: all .3s;
    flex-direction: column;
  }

  /* Mobile Chat: große zentrierte KAI-Bubble + Pill darunter (wie Phone-Mockup) */
  #visualizer { flex: 0 0 auto; flex-direction: column; width: 100%; height: auto;
    padding: 26px 16px 18px; gap: 14px; }
  .kaiName { display: none; }
  .kaiStage { width: 150px; height: 150px; }
  .kaiBlock { flex-direction: column; align-items: center; gap: 14px; }
  body.ios-app-mode #visualizer {
    height: auto;
    padding-top: calc(26px + var(--safe-top));
  }
  #log { border-left: none; border-top: 1px solid rgba(255,255,255,.16); height: auto; padding:16px;}
  body.app-mode #log {
    flex: 1;
    height: auto;
    padding: 16px 16px calc(150px + var(--safe-bottom) + var(--vk-offset)) 16px;
  }

  body.ios-app-mode #log {
    padding: 16px 16px calc(150px + var(--vk-offset)) 16px;
  }
  body.ios-app-mode #msgDialog {
    max-height: calc(220px + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
  }
  body.ios-app-mode .chat-input {
    padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)) 16px;
  }
  body.ios-app-mode #sendText {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  }
  body.ios-app-mode #closeKeyboard {
    top: 8px;
  }
  #chatMessage{height:20%}
  #assistant-bubble { width: 20%; }

  .MailForm {
    display: none;
    font-size: large;
    gap: 5px;
    grid-template-columns: repeat(3,1fr);
    padding: 5px 10px;
  }

  .summaryModalContent .MailForm {
    display: grid;
    grid-template-columns: 1fr;
  }

  .carousel-wrapper { height: 64px; width: 55%; }
  .carousel img { max-height: 44px; }
}

@media (max-width:442px) {
  #logo {
    right: 10px;
    top: 10px;
    width: 84px;
  }

  body { font-size: small; }
  #mailInp { width: 80%; }
  .MailForm { font-size: small; }
  #sendMail { margin-right: 15px; }
}

/* ============================================================
   Theme-Toggle + Light-Mode für den CHAT-Bereich (rechte Seite).
   Der Visualizer links bleibt unberührt. Aktiv über body.chat-light;
   Default (ohne Klasse) = dunkel wie bisher.
   ============================================================ */
.theme-toggle {
  position: absolute; top: 16px; right: 16px; z-index: 40;
  width: 40px; height: 40px; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  /* dunkel-transluzent → auf hellem wie dunklem Chat-Hintergrund sichtbar */
  background: rgba(0,0,0,.28); color: #fff; border: 1px solid rgba(255,255,255,.18);
  font-size: 16px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: background .2s;
}
.theme-toggle:hover { background: rgba(0,0,0,.42); }

body.chat-light .chatContainer { background: #eef2f6; }
body.chat-light #log { color: #16263a; }
body.chat-light .assistant { background: #e3e9f1; color: #16263a; }
body.chat-light .assistant a { color: var(--at-blue); }
/* .user (Markenblau) bleibt – funktioniert auf hell */
body.chat-light #msgDialog { background-color: rgba(0,0,0,.04); border-top: 1px solid rgba(0,0,0,.1); }
body.chat-light .chat-input textarea {
  background: #fff; border: 1px solid rgba(0,0,0,.16); color: #16263a;
}
body.chat-light .chat-input textarea::placeholder { color: rgba(0,0,0,.4); }
body.chat-light #closeKeyboard { color: rgba(0,0,0,.55); }
body.chat-light #openKeyboard {
  background-color: rgba(0,0,0,.06); border: 1px solid rgba(0,0,0,.18); color: #16263a;
}
body.chat-light #openKeyboard:hover { background-color: rgba(0,0,0,.12); }
/* #sendText (blau) und #muteMic (rot) bleiben – auf hell gut sichtbar */

/* Mobil: Toggle nach oben auf den Visualizer (rechts unter dem Logo) statt an
   den Chat-Anfang. Muss NACH der .theme-toggle-Basisregel stehen, um zu greifen. */
@media (max-width: 800px) {
  .theme-toggle { position: fixed; top: 52px; right: 14px; }
}