/* Familienchat - dieselbe Grundform in beiden Bereichen. */
.chat {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  height: min(70vh, 40rem);
}
.chat__verlauf {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: .8rem;
  background: rgba(255, 255, 255, .6);
  border-radius: var(--r-lg, 16px);
  scroll-behavior: smooth;
}
.chat__blase {
  position: relative;
  align-self: flex-start;
  max-width: min(85%, 34rem);
  background: #fff;
  border-radius: 16px 16px 16px 4px;
  padding: .55rem .8rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}
.chat__blase--ich {
  align-self: flex-end;
  background: #dff1ff;
  border-radius: 16px 16px 4px 16px;
}
.chat__blase--weg { opacity: .55; font-style: italic; }
.chat__von {
  font-size: .78rem;
  font-weight: 800;
  color: #4a6076;
  display: flex;
  gap: .5rem;
  align-items: baseline;
  margin-bottom: .15rem;
}
.chat__zeit { font-weight: 500; opacity: .65; font-size: .72rem; }
.chat__text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.4; }
.chat__nurSticker { font-size: 2.8rem; line-height: 1.1; }
.chat__weg {
  position: absolute;
  top: .2rem;
  right: .3rem;
  border: none;
  background: transparent;
  font-size: 1rem;
  opacity: .35;
  cursor: pointer;
}
.chat__weg:hover { opacity: 1; }
.chat__hinweis {
  margin: auto;
  text-align: center;
  opacity: .65;
  padding: 1.5rem;
}
.chat__fuss { display: flex; flex-direction: column; gap: .5rem; }
.chat__sticker { display: flex; gap: .3rem; flex-wrap: wrap; }
.chat__stickerknopf {
  border: none;
  background: rgba(255, 255, 255, .75);
  border-radius: 10px;
  font-size: 1.25rem;
  padding: .25rem .4rem;
  cursor: pointer;
  line-height: 1;
}
.chat__stickerknopf:active { transform: scale(.9); }
.chat__zeile { display: flex; gap: .5rem; align-items: flex-end; }
.chat__eingabe {
  flex: 1;
  resize: none;
  font: inherit;
  padding: .6rem .8rem;
  border-radius: 14px;
  border: 2px solid #d7e2ec;
  background: #fff;
}
.chat__eingabe:focus { outline: none; border-color: var(--brand, #3fa9f5); }

/* Kinderansicht: alles eine Nummer groesser */
.chat--gross { height: min(72vh, 44rem); }
.chat--gross .chat__text { font-size: 1.15rem; }
.chat--gross .chat__von { font-size: .95rem; }
.chat--gross .chat__stickerknopf { font-size: 1.8rem; padding: .35rem .5rem; }
.chat--gross .chat__eingabe { font-size: 1.15rem; padding: .8rem 1rem; }
.chat--gross .chat__nurSticker { font-size: 3.6rem; }