/* ===== Landing: Header & Footer ===== */
header{
  position:fixed; z-index:30; top:0; left:0; right:0;
  height:calc(var(--head-h) + var(--safe-top));
  padding: calc(6px + var(--safe-top)) 16px 6px 16px;
  background:#f5f5f5; border-bottom:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:space-between;
  font-family:"Champagne Limousines", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
footer{
  position:fixed; z-index:30; left:0; right:0; bottom:0;
  height:calc(var(--foot-h) + var(--safe-bottom));
  padding-bottom:var(--safe-bottom);
  background:#f5f5f5; border-top:1px solid var(--c-border);
  display:flex; align-items:center; justify-content:center;
  font-family:"Champagne Limousines", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size:.6rem; color:var(--c-muted);
}

/* ===== Landing: Flächenfarben ===== */
body{ background:#fff; color:#111; }
/* WICHTIG: #messages Hintergrund wird NICHT mehr hier gesetzt, damit Logo-Hintergrund sichtbar ist */
/* Der weiße Hintergrund kommt von body, und das Logo liegt darüber */

/* ===== Landing: Bubble-Farbklima ===== */
.bubble.user{ background:#eef2f7; color:#111; border-top-right-radius:6px; }
.bubble.bot { background:#f8fafc; color:#111; border-top-left-radius:6px; }

/* ===== Landing: Input-Leiste visuell ===== */
.input-bar{ background:#fff; border-top:1px solid var(--c-border); }
.input-bar input{ border:1px solid #ccc; }
.input-bar button{
  background:#111; color:#fff;
}
.input-bar button:hover{ filter:brightness(1.05); }
.input-bar button:active{ transform:translateY(1px); }