/* ============================================================
   Familium AVA
   Optik unverändert aus dem Prototyp übernommen.
   Ergänzt: Ausgangs-Button, Gespräch beenden, Fehlerhinweis.

   Mobile first. Alle Abnahmetests laufen zuerst auf iPhone Safari,
   Android Chrome und im Instagram-Browser.
   ============================================================ */

@import url('./fonts/fonts.css');

:root {
  --lila: #9a87b4;
  --lila-deep: #6e5c8c;
  --lila-soft: #e9e3f0;
  --beige: #f2ebe5;
  --paper: #fffdfb;
  --ink: #2a2a2a;
  --ink-soft: #5b5560;

  /* Höhe der Tastatur-sicheren Fläche. Wird von app.js gesetzt. */
  --viewport: 100dvh;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  background: var(--beige);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  display: flex;
  flex-direction: column;
  min-height: var(--viewport);
  /* Verhindert, dass iOS beim Fokus ins Eingabefeld hineinzoomt. */
  -webkit-text-size-adjust: 100%;
}

header.site {
  padding: 20px 20px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(154, 135, 180, 0.35);
  background: var(--beige);
}

.wordmark {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.14em;
}

.wordsub {
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  margin-top: 2px;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 0;
}

.col {
  width: 100%;
  max-width: 640px;
  padding: 0 18px;
}

/* ---------- Start-Screen ---------- */
#start {
  /* Seitlicher Rand am 11.09.2026 ergänzt. Vorher stand der Einleitungs-
     text am Handy fast an der Kante. 22px innen plus der Rand des
     Elternelements ergeben zusammen genug Luft. */
  padding: 34px 22px 60px;
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.22em;
  color: var(--lila-deep);
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 14px;
}

h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: clamp(28px, 6vw, 38px);
  line-height: 1.2;
  margin-bottom: 18px;
}

#start p,
#ok p,
#abgelaufen p {
  margin-bottom: 16px;
  max-width: 56ch;
}

.transparenz {
  background: var(--paper);
  border-left: 3px solid var(--lila);
  padding: 16px 18px;
  margin: 22px 0;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 17px;
  line-height: 1.6;
}

.transparenz strong {
  font-style: normal;
}

.privacy {
  font-size: 14px;
  color: var(--ink-soft);
}

/* ---------- Einwilligung vor der ersten Nachricht ---------- */
.einwilligung {
  background: var(--paper);
  border: 1px solid var(--lila);
  border-radius: 6px;
  padding: 16px 18px;
  margin-top: 24px;
}

.einwilligung label {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  cursor: pointer;
  font-size: 14px;
  line-height: 1.55;
}

.einwilligung input[type='checkbox'] {
  margin-top: 3px;
  accent-color: var(--lila-deep);
  flex: none;
  width: 20px;
  height: 20px;
}

.feinabdruck {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 11px;
  padding-left: 31px;
}

.feinabdruck a {
  color: var(--lila-deep);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.btn[disabled]:hover {
  background: var(--lila);
}

/* ---------- Dauerhafter KI-Hinweis im Chat ---------- */
#kihinweis {
  width: 100%;
  max-width: 640px;
  padding: 8px 18px;
  font-size: 12.5px;
  color: var(--ink-soft);
  text-align: center;
  border-bottom: 1px solid rgba(154, 135, 180, 0.3);
  flex: none;
}

.btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  background: var(--lila);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 26px;
  border-radius: 4px;
  margin-top: 24px;
  /* Mindestgrösse für Finger auf kleinen Displays. */
  min-height: 48px;
  transition: background 0.15s ease;
}

.btn:hover {
  background: #8a76a6;
}

.btn:focus-visible,
textarea:focus-visible,
input:focus-visible,
a:focus-visible,
.linkbtn:focus-visible {
  outline: 3px solid var(--lila-deep);
  outline-offset: 2px;
}

/* ---------- Chat ---------- */
#chat {
  display: none;
  flex: 1;
  flex-direction: column;
  width: 100%;
  align-items: center;
  min-height: 0;
}

#log {
  width: 100%;
  max-width: 640px;
  flex: 1;
  /* Seitlicher Rand am 11.09.2026 von 18 auf 26 erhöht. Auf einem
     iPhone stand der Text sonst fast an der Kante, und lange Zeilen
     lesen sich schwerer, je näher sie am Rand kleben. */
  padding: 22px 26px 8px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.msg {
  max-width: 92%;
  padding: 13px 16px;
  border-radius: 6px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.msg.assistant {
  background: var(--paper);
  border-left: 3px solid var(--lila);
  align-self: flex-start;
}

.msg.user {
  background: var(--lila-soft);
  align-self: flex-end;
}

.msg.system {
  background: transparent;
  border-left: 3px solid #c9c0d6;
  color: var(--ink-soft);
  font-size: 14px;
  align-self: flex-start;
}

/* Der Hinweis, wenn das Gespräch zu Ende ist (09.09.2026).
   Bewusst KEINE Nachricht: kein Kasten, kein Rand, keine Stimme. Das
   Letzte, was die Mama liest, soll ihr eigener Satz sein, nicht ein
   Hinweis auf Datenschutz. Deshalb klein, grau und unten. */
.endehinweis {
  margin: 18px 4px 4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  opacity: 0.75;
  text-align: center;
}

.msg h4 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  margin: 10px 0 2px;
}

.msg h4:first-child {
  margin-top: 0;
}

.typing {
  display: flex;
  gap: 5px;
  padding: 16px 18px;
  align-self: flex-start;
  background: var(--paper);
  border-left: 3px solid var(--lila);
  border-radius: 6px;
}

.typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lila);
  animation: blink 1.2s infinite;
}

.typing span:nth-child(2) {
  animation-delay: 0.2s;
}

.typing span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes blink {
  0%,
  80%,
  100% {
    opacity: 0.25;
  }
  40% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .typing span {
    animation: none;
    opacity: 0.6;
  }
  * {
    scroll-behavior: auto !important;
  }
}

/* ---------- Ausgangs-Button unter der Empfehlung ---------- */
.ausgang {
  align-self: flex-start;
  max-width: 88%;
}

.ausgang a {
  display: inline-block;
  background: var(--lila);
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 13px 22px;
  border-radius: 4px;
  min-height: 48px;
  line-height: 1.5;
}

.ausgang a:hover {
  background: #8a76a6;
}

/* ---------- Gate-Card ---------- */
.gate {
  background: var(--paper);
  border: 1px solid var(--lila);
  border-radius: 6px;
  padding: 18px;
  align-self: stretch;
}

.gate h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  margin-bottom: 10px;
}

.gate p {
  font-size: 14px;
  margin-bottom: 12px;
}

.gate input[type='email'] {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #c9c0d6;
  border-radius: 4px;
  font-family: 'Montserrat', system-ui, sans-serif;
  /* 16px verhindert das Hineinzoomen von iOS Safari beim Fokus. */
  font-size: 16px;
  background: #fff;
  min-height: 48px;
}

.gate .note {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* Der Einwilligungstext ist kleiner als der Rest der Karte
   (11.09.2026). Er muss lesbar sein und rechtlich vollständig, aber er
   ist nicht das, worauf die Mama hier schaut. Das ist die Frage oben
   und der Knopf unten. 12,5px ist die kleinste Stufe, die auf einem
   Handy noch ohne Mühe zu lesen ist. */
.gate label {
  display: flex;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 12px;
  align-items: flex-start;
  cursor: pointer;
}

.gate input[type='checkbox'] {
  margin-top: 4px;
  accent-color: var(--lila-deep);
  flex: none;
  width: 20px;
  height: 20px;
}

.gate .btn {
  margin-top: 16px;
  width: 100%;
  text-align: center;
}

.gate .btn[disabled] {
  opacity: 0.6;
  cursor: default;
}

.linkbtn {
  display: block;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--lila-deep);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 14px;
  text-decoration: underline;
  margin: 12px auto 0;
  padding: 10px;
}

.gate .err {
  color: #8c2f39;
  font-size: 13px;
  margin-top: 8px;
  display: none;
}

/* ---------- Krisen-Panel ---------- */
#crisis {
  display: none;
  width: 100%;
  max-width: 640px;
  background: var(--ink);
  color: var(--beige);
  border-radius: 6px;
  padding: 18px;
  margin: 0 18px 10px;
}

#crisis h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 19px;
  margin-bottom: 8px;
}

#crisis p {
  font-size: 14px;
  margin-bottom: 8px;
}

#crisis .num {
  font-weight: 600;
}

/* Erklärt, warum der Assistent im Krisenfall nichts mehr anbietet. */
#crisis .warum {
  font-size: 13px;
  opacity: 0.85;
  border-top: 1px solid rgba(242, 235, 229, 0.25);
  padding-top: 10px;
  margin-top: 12px;
  margin-bottom: 0;
}

#crisis a {
  color: var(--beige);
}

/* ---------- Eingabeleiste ---------- */
#bar {
  position: sticky;
  bottom: 0;
  width: 100%;
  background: var(--beige);
  border-top: 1px solid rgba(154, 135, 180, 0.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 18px calc(10px + env(safe-area-inset-bottom));
}

.barrow {
  width: 100%;
  max-width: 640px;
  display: flex;
  gap: 10px;
}

textarea {
  flex: 1;
  resize: none;
  min-height: 48px;
  max-height: 140px;
  padding: 12px 14px;
  border: 1px solid #c9c0d6;
  border-radius: 4px;
  font-family: 'Montserrat', system-ui, sans-serif;
  /* 16px verhindert das Hineinzoomen von iOS Safari beim Fokus. */
  font-size: 16px;
  line-height: 1.5;
  background: #fff;
}

#send {
  border: none;
  cursor: pointer;
  background: var(--lila);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  padding: 0 22px;
  border-radius: 4px;
  min-height: 48px;
}

#send:disabled {
  opacity: 0.5;
  cursor: default;
}

.legal {
  width: 100%;
  max-width: 640px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-top: 9px;
  line-height: 1.5;
}

.legal a {
  color: var(--ink-soft);
}

.legal .beenden {
  background: none;
  border: none;
  padding: 4px 6px;
  font: inherit;
  color: var(--ink-soft);
  text-decoration: underline;
  cursor: pointer;
}


/* ---------------------------------------------------------------
   Aufklappbarer Hinweis im Fuss (29.08.2026)
   ---------------------------------------------------------------
   Ersetzt das frühere Einwilligungs-Häkchen. Ruhig gesetzt: wer es
   wissen will, tippt drauf, wer schreiben will, wird nicht gestört. */
.legal .infotext {
  margin: 4px 0 6px;
  /* Mittig wie der Rest des Fusses. */
  text-align: center;
}

.legal .infotext summary {
  cursor: pointer;
  display: inline;
}

/* Der aufgeklappte Text bleibt linksbündig. Mittig gesetzte Fliesstexte
   über mehrere Zeilen liest niemand gern. */
.legal .infotext p {
  margin: 8px auto 0;
  line-height: 1.6;
  max-width: 60ch;
  text-align: left;
}


/* ---------------------------------------------------------------
   Startbildschirm, gestaltet (29.08.2026)
   ---------------------------------------------------------------
   Vorher waren es fünf gleich aussehende Absätze am Stück. Jetzt hat
   jeder Block eine eigene Rolle: Anrede, AVA stellt sich vor, wofür
   sie steht, was hier erlaubt ist, das Kleingedruckte. */

/* Der erste Absatz spricht die Mama an, deshalb etwas grösser. */
#start .lead {
  font-size: 17.5px;
  line-height: 1.6;
  margin-bottom: 22px;
}

/* Die Haltung als Liste. Kein Aufzählungspunkt, sondern ein kurzer
   Strich in Lila, damit es ruhig bleibt und nicht nach Checkliste
   aussieht. */
#start .haltung {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  max-width: 56ch;
}

#start .haltung li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 11px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
}

#start .haltung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: 11px;
  height: 2px;
  background: var(--lila);
  border-radius: 1px;
}

/* Der Raum zum Ablassen. Das ist der Absatz, wegen dem sie bleibt
   oder geht, deshalb bekommt er eine eigene Fläche. */
#start .raum {
  background: var(--lila-soft);
  border-radius: 14px;
  padding: 20px 22px;
  margin: 0 0 22px;
  max-width: 56ch;
}

#start .raum p {
  margin-bottom: 12px;
}

#start .raum p:last-child {
  margin-bottom: 0;
}

/* Der KI-Hinweis steht bewusst ruhig da: wichtig, aber kein Alarm. */
#start .kihinweis-start {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 10px;
}

/* ---------------------------------------------------------------
   Startbildschirm: eine Handyhöhe, nicht mehr (29.08.2026)
   ---------------------------------------------------------------
   Vorgabe: Auf dem ersten Bildschirm darf nicht gescrollt werden
   müssen. Deshalb mittig gesetzt, wenig Blöcke, grosszügige Ruhe
   dazwischen. Wer hier Text ergänzt, muss die Höhe nachmessen. */
#start {
  text-align: center;
  padding: 26px 0 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(var(--viewport) - 150px);
}

#start h1 {
  font-size: clamp(30px, 8vw, 42px);
  line-height: 1.18;
  margin-bottom: 20px;
}

#start .lead {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 40ch;
  margin: 0 auto 22px;
}

#start .transparenz {
  border-left: none;
  border-top: 2px solid var(--lila);
  max-width: 40ch;
  margin: 0 auto 26px;
  font-size: 16px;
  text-align: center;
}

#start .btn {
  align-self: center;
}

/* Der schmale Fuss unter dem Startknopf. Pflichtlinks, leise gesetzt. */
#start .startfuss {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 18px auto 0;
}

#start .startfuss a {
  color: var(--ink-soft);
}

/* Der KI-Hinweis als ruhige Karte, nicht als Banner über die volle
   Breite. Ecken abgerundet wie die Sprechblasen im Chat. */
#start .transparenz {
  max-width: 34ch;
  border-radius: 12px;
  padding: 14px 18px;
}

/* ---------------------------------------------------------------
   AVA-Wortmarke im Kopf (30.08.2026)
   ---------------------------------------------------------------
   Das Bild bringt seine eigenen Ränder mit, deshalb wenig Abstand
   drumherum. Breite in Pixeln statt Prozent, damit es auf grossen
   Bildschirmen nicht riesig wird. */
.logo {
  display: block;
  width: 132px;
  height: auto;
  margin: 0 auto 2px;
}

@media (min-width: 700px) {
  .logo { width: 150px; }
}

/* ---------------------------------------------------------------
   Schrift im Gespräch auf schmalen Geräten (11.09.2026)
   ---------------------------------------------------------------
   Gemeldet vom Handy: Die Abschluss-Nachricht wirkt als Wand.

   16 auf 15 Pixel, und die Zeilen etwas enger. Weiter runter gehe ich
   bewusst nicht: Das liest eine erschöpfte Mama abends im Bett, oft
   ohne Brille. Unter 15 Pixel spart man ein paar Zeilen und verliert
   dafür Leserinnen. Die eigentliche Ursache war ohnehin eine andere,
   nämlich dass die Ansicht über den Gedanken zum Mitnehmen
   hinwegsprang. Das ist in app.js behoben. */
@media (max-width: 560px) {
  #start {
    padding-left: 26px;
    padding-right: 26px;
  }

  .msg {
    font-size: 15px;
    line-height: 1.58;
  }

  /* Die Anrede in der ersten Nachricht etwas grösser als die
     Zwischenüberschriften in der Zusammenfassung. Sie ist das Erste,
     was die Mama im Gespräch liest. */
  .msg h4:first-child {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .msg .satz p {
    font-size: 17px;
  }

  .gate h3 {
    font-size: 19px;
  }

  .gate p {
    font-size: 14.5px;
  }
}

/* ---------------------------------------------------------------
   Handy-Korrektur (30.08.2026)
   ---------------------------------------------------------------
   Gemeldet: Auf dem echten Gerät war die Schrift zu gross und der
   Startbildschirm oben abgeschnitten.

   Zwei Ursachen:

   1. Gemessen wurde mit 812 Pixeln Höhe. Ein echtes Handy zieht davon
      die Browserleisten ab, real bleiben eher 600 bis 660.

   2. "justify-content: center" schiebt zu hohen Inhalt in BEIDE
      Richtungen heraus. Was oben rausrutscht, ist nicht erreichbar,
      auch nicht durch Scrollen. Deshalb wird jetzt nur noch dann
      mittig ausgerichtet, wenn genug Platz da ist. */
#start {
  justify-content: flex-start;
  padding: 18px 0 28px;
  min-height: 0;
}

/* Erst ab dieser Höhe ist genug Luft zum Zentrieren. */
@media (min-height: 720px) {
  #start {
    justify-content: center;
    min-height: calc(var(--viewport) - 140px);
    padding: 26px 0 40px;
  }
}

/* Schriftgrössen auf kleinen Geräten zurücknehmen. */
@media (max-height: 719px) {
  .logo { width: 104px; }

  .wordsub { font-size: 12px; }

  #start h1 {
    font-size: clamp(24px, 6.5vw, 30px);
    margin-bottom: 12px;
  }

  #start .lead {
    font-size: 15px;
    line-height: 1.55;
    margin-bottom: 14px;
  }

  #start .transparenz {
    font-size: 14.5px;
    padding: 11px 15px;
    margin-bottom: 16px;
  }

  #start .startfuss {
    font-size: 11.5px;
    margin-top: 12px;
  }
}

/* Sehr kleine Geräte (altes iPhone SE, Browser mit zwei Leisten).
   Hier fehlten zuletzt rund 20 Pixel, die hier zusammenkommen. */
@media (max-height: 640px) {
  header.site { padding-top: 10px; padding-bottom: 8px; }

  .logo { width: 94px; }

  #start { padding: 12px 0 18px; }

  #start h1 { font-size: clamp(22px, 6vw, 27px); margin-bottom: 10px; }

  #start .lead { font-size: 14.5px; margin-bottom: 12px; }

  #start .transparenz { font-size: 14px; padding: 10px 14px; margin-bottom: 14px; }

  #start .startfuss { margin-top: 10px; }
}

/* ---------------------------------------------------------------
   Zweite Seite: Platz für die Nachrichten (30.08.2026)
   ---------------------------------------------------------------
   Gemessen auf 390x620: Kopf 88 + KI-Leiste 58 + Eingabe 50 + Fuss 87
   = 283 Pixel Rahmen, also 46 Prozent des Bildschirms. Für AVAs
   Begrüssung blieben 304 Pixel bei 452 Pixel Bedarf.

   Im Gespräch wird deshalb alles Beiwerk kleiner. Der Startbildschirm
   bleibt unverändert, dort ist Ruhe wichtiger als Platz. */
body.imGespraech header.site {
  padding-top: 10px;
  padding-bottom: 6px;
}

body.imGespraech .logo {
  width: 76px;
  margin-bottom: 0;
}

/* Die Tagline hat im Gespräch keine Aufgabe mehr. */
body.imGespraech .wordsub {
  display: none;
}

body.imGespraech #kihinweis {
  font-size: 12px;
  line-height: 1.4;
  padding: 7px 14px;
}

body.imGespraech .legal {
  font-size: 11.5px;
  line-height: 1.5;
  padding-top: 6px;
}

body.imGespraech .legal .infotext {
  margin: 2px 0 3px;
}

/* Im Gespräch etwas dichter setzen, damit AVAs Begrüssung ohne
   Scrollen in die Sprechblase passt. Auf dem Startbildschirm bleibt
   die luftigere Fassung, dort ist Platz. */
body.imGespraech .msg {
  padding: 11px 14px;
  line-height: 1.55;
}

body.imGespraech #log {
  gap: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

/* ---------------------------------------------------------------
   Gedanke zum Mitnehmen und das Aha darunter (08.09.2026)
   ---------------------------------------------------------------
   Zwei Blöcke, die zusammengehören und trotzdem verschieden aussehen
   müssen.

   Der Gedanke zum Mitnehmen steht im farbigen Kasten: der eine Satz,
   den sie sich selbst sagen kann. Abgesetzt, damit sie ihn
   wiederfindet, wenn sie hochscrollt, und damit man ihn abfotografieren
   mag. Ein Herz als einziges Symbol, sonst ruhig gehalten: Es geht um
   einen schweren Abend, nicht um eine Erfolgsmeldung.

   Das Aha steht darunter, ohne Kasten. Es erklärt und ordnet ein, und
   Erklärungen liest man als Text, nicht als Plakat. Nur die kleine
   Überschrift und ein Strich links halten es zusammen. */
.msg .satz {
  background: var(--lila-soft);
  border-radius: 12px;
  padding: 16px 18px;
  margin: 16px 0;
  text-align: center;
}

.msg .satz-label {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lila-deep);
  font-weight: 600;
  margin-bottom: 8px;
}

.msg .satz p {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
  margin: 0;
}

.msg .aha {
  border-left: 2px solid var(--lila-soft);
  padding: 2px 0 2px 14px;
  margin: 14px 0 16px;
}

.msg .aha-label {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lila-deep);
  font-weight: 600;
  margin-bottom: 6px;
}

.msg .aha p {
  margin: 0;
}


/* ===============================================================
   DESIGNPASS 15.09.2026
   ===============================================================
   Anlass: Am Rechner sah die Seite nach nichts aus. Gemeldet mit
   Bildschirmfoto in 2000 Pixel Breite.

   Drei Ursachen, alle hausgemacht:

   1. Alles war mobile first gebaut und hatte keine eigene Fassung
      für grosse Bildschirme. Kopfzeile, Hinweisleiste und
      Eingabeleiste zogen ihre Trennlinien quer über den ganzen
      Bildschirm, mittendrin stand eine 640 Pixel schmale Spalte.
      Das wirkt wie eine unfertige Rohseite.

   2. Der Hintergrund war flaches Beige ohne jede Tiefe, die
      Sprechblasen weisse Rechtecke mit 6 Pixel Ecken und einem
      harten Strich links.

   3. Zwischen Begruessung und Eingabeleiste stand am Rechner eine
      riesige leere Flaeche, weil der Gesprächsbereich die ganze
      Bildschirmhöhe füllt.

   Was sich geändert hat:

   - Hintergrund mit weichem Verlauf statt einer Farbe.
   - Ab 760 Pixel Breite liegt das Gespräch in einer Karte mit
     runden Ecken und weichem Schatten. Die Trennlinien enden an
     der Karte, nicht am Bildschirmrand. Damit verschwindet auch
     die leere Fläche: Die Karte hat eine eigene Höhe.
   - Sprechblasen runder, mit zartem Rand und Schatten, und mit
     einer abgeflachten Ecke unten, damit man sieht, wer spricht.
   - Ab 760 Pixel steht AVAs Wellenmarke als Avatar neben ihren
     Nachrichten.
   - Knöpfe in Lila-Dunkel mit weisser Schrift und als Pille.
     Nebeneffekt: der Kontrast erfüllt jetzt die Vorgabe,
     vorher stand dunkelgraue Schrift auf hellem Lila.
   - Startbildschirm liegt am Rechner ebenfalls in einer Karte.

   WICHTIG: Die mobile Fassung ist mühsam auf echten Geräten
   eingestellt worden, siehe die Blöcke vom 30.08. und 11.09.
   Alles, was Platz kostet, steht deshalb in einer Abfrage ab
   760 Pixel Breite. Farben, Ecken und Schatten gelten überall,
   sie kosten keine Höhe.
   =============================================================== */

:root {
  --linie: rgba(110, 92, 140, 0.16);
  --linie-stark: rgba(110, 92, 140, 0.26);
  --karte: rgba(255, 253, 251, 0.74);
  --schatten-karte: 0 1px 2px rgba(80, 64, 104, 0.04),
    0 10px 34px rgba(80, 64, 104, 0.08);
  --schatten-blase: 0 1px 2px rgba(80, 64, 104, 0.03),
    0 6px 18px rgba(80, 64, 104, 0.05);
}

/* ---------- Hintergrund ---------- */
body {
  background-color: var(--beige);
  background-image:
    radial-gradient(120% 62% at 50% -8%, #ece4f3 0%, rgba(236, 228, 243, 0) 58%),
    radial-gradient(80% 50% at 100% 100%, #f7efe6 0%, rgba(247, 239, 230, 0) 60%);
  background-attachment: fixed;
}

/* ---------- Kopfzeile ---------- */
/* Die Linie quer über den Bildschirm fällt weg. Der Kopf schwebt
   über der Karte, die ihre eigenen Kanten hat. */
header.site {
  background: transparent;
  border-bottom: none;
  padding: 18px 20px 12px;
}

.wordsub {
  letter-spacing: 0.08em;
}

/* ---------- Sprechblasen ---------- */
.msg {
  border-radius: 18px;
}

.msg.assistant {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-bottom-left-radius: 7px;
  box-shadow: var(--schatten-blase);
}

.msg.user {
  background: var(--lila-soft);
  border: 1px solid rgba(110, 92, 140, 0.1);
  border-bottom-right-radius: 7px;
}

.msg.system {
  border-left: 2px solid var(--linie-stark);
  border-radius: 0 12px 12px 0;
  padding-left: 14px;
}

.typing {
  background: var(--paper);
  border: 1px solid var(--linie);
  border-left: 1px solid var(--linie);
  border-radius: 18px 18px 18px 7px;
  box-shadow: var(--schatten-blase);
  align-items: center;
}

/* Überschriften in einer Nachricht: Playfair wie bisher, aber mit
   Abstand, der aus dem Stylesheet kommt und nicht aus Leerzeilen im
   Text. Die Leerzeilen um die Überschriften herum entfernt render()
   in app.js, sonst klaffte darunter ein doppelter Abstand. */
.msg h4 {
  font-size: 17px;
  line-height: 1.35;
  /* Oben mehr Luft als unten: Eine Überschrift gehört zu dem, was
     unter ihr steht, nicht zu dem darüber. Mit 6px darunter klebte
     die Anrede in AVAs Begrüssung an der ersten Zeile, während
     zwischen den Sätzen eine ganze Leerzeile stand. Das wirkte
     unruhig (gemeldet mit Bildschirmfoto am 17.09.2026). */
  margin: 22px 0 10px;
  /* Playfair setzt das grosse E ein gutes Pixel weiter rechts an als
     Montserrat das U darunter. Auf dem Papier stehen beide Zeilen
     bündig, fürs Auge nicht. Die 1,2px holen das zurück. */
  text-indent: -1.2px;
}

/* ---------- Gedanke zum Mitnehmen ---------- */
/* Bleibt inhaltlich wie am 08.09. entschieden, sieht nur weicher aus:
   ein zarter Verlauf statt einer Fläche, damit der Kasten wie etwas
   wirkt, das man aufheben mag. */
.msg .satz {
  background: linear-gradient(170deg, #efe8f5 0%, #f7f2f9 100%);
  border: 1px solid rgba(110, 92, 140, 0.14);
  border-radius: 16px;
  padding: 18px 20px;
}

.msg .aha {
  border-left: 2px solid var(--linie-stark);
}

/* ---------- Knöpfe ---------- */
/* Lila-Dunkel mit weisser Schrift. Vorher stand fast schwarze Schrift
   auf hellem Lila, das erfüllte den Mindestkontrast nicht und sah
   zudem stumpf aus. Pillenform, weil sie freundlicher wirkt als die
   bisherigen 4 Pixel Ecken. */
.btn,
#send,
.ausgang a {
  background: var(--lila-deep);
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(110, 92, 140, 0.22);
  transition: background 0.15s ease, transform 0.15s ease;
}

.btn:hover,
#send:hover:not(:disabled),
.ausgang a:hover {
  background: #5e4d7a;
  transform: translateY(-1px);
}

.btn[disabled],
.btn[disabled]:hover {
  background: var(--lila-deep);
  transform: none;
  box-shadow: none;
}

.gate .btn {
  border-radius: 999px;
}

.linkbtn {
  text-decoration: none;
  border-bottom: 1px solid rgba(110, 92, 140, 0.4);
  width: auto;
  border-radius: 0;
}

/* ---------- Eingabefelder ---------- */
textarea,
.gate input[type='email'] {
  border: 1px solid var(--linie-stark);
  border-radius: 16px;
  box-shadow: inset 0 1px 2px rgba(80, 64, 104, 0.04);
  transition: border-color 0.15s ease;
}

textarea:focus,
.gate input[type='email']:focus {
  border-color: var(--lila);
}

/* ---------- Karten im Gespräch ---------- */
.gate,
.transparenz,
#crisis {
  border-radius: 18px;
}

.gate {
  border: 1px solid var(--linie-stark);
  box-shadow: var(--schatten-blase);
}

#start .transparenz {
  border-top: none;
  border: 1px solid var(--linie);
  background: rgba(255, 253, 251, 0.8);
}

/* ---------- Eingabeleiste ---------- */
#bar {
  background: rgba(247, 242, 236, 0.94);
  border-top: 1px solid var(--linie);
  backdrop-filter: blur(8px);
  /* Seitlich derselbe Wert wie bei #log (dort am 11.09.2026 von 18
     auf 26 erhöht). Sonst beginnt das Eingabefeld acht Pixel weiter
     links als die Sprechblasen darüber. Am Rechner war dieselbe
     Unsauberkeit deutlich zu sehen, auf dem Handy war sie nur
     kleiner (17.09.2026). */
  padding-left: 26px;
  padding-right: 26px;
}

/* ===============================================================
   Ab hier: nur grosse Bildschirme (ab 760 Pixel Breite).
   Auf dem Handy bleibt alles wie eingestellt.
   ===============================================================

   FASSUNG 2 vom 16.09.2026. Die erste Fassung legte das Gespräch in
   eine Karte mit Rahmen und Schatten. Verworfen, Alessia wollte keinen
   Kasten. Der Ansatz hier arbeitet ohne jeden Rahmen:

   - Nichts zieht mehr eine Linie quer über den Bildschirm. Der
     KI-Hinweis wird zur kleinen mittigen Pille, die Eingabeleiste
     verliert ihren Strich, die Kopfzeile hat ihren schon verloren.
   - Die leere Fläche unter der Begrüssung war das eigentliche
     Problem. Sie verschwindet, weil die Nachrichten jetzt von UNTEN
     wachsen, so wie in jedem Messenger: Die erste Nachricht steht
     direkt über dem Eingabefeld, der Platz bleibt darüber. Gemacht
     mit "margin-top: auto" auf der ersten Nachricht und nicht mit
     "justify-content: flex-end", weil Letzteres in einem
     Scrollbereich den oberen Rand abschneiden kann.
   - Der obere Rand des Gesprächs blendet weich aus, damit
     weggescrollte Nachrichten nicht an einer harten Kante abreissen.
   - Das Eingabefeld ist eine schwebende Pille mit Schatten.

   Die Gestaltung liegt also in den Sprechblasen, im Verlauf des
   Hintergrunds und in den Abständen, nicht in einem Rahmen.
   NACHTRAG 17.09.2026: Die Schwelle lag zuerst bei 760 Pixeln. Beim
   Vorführen aufgefallen, dass ein Fenster von 731 Pixeln damit auf die
   Handy-Fassung zurückfällt: Linien über die ganze Breite, leere
   Fläche unter der Begrüssung. Das trifft Tablets im Querformat,
   halbierte Fenster und kleine Notebooks.

   Die Schwelle liegt jetzt bei 600 Pixeln für alles, was keine Höhe
   kostet (Nachrichten von unten, Pille, schwebendes Eingabefeld).
   Was Platz braucht, steht weiter unten in eigenen Abfragen: der
   Avatar braucht Breite, der grössere Kopf braucht Höhe.
   =============================================================== */
@media (min-width: 600px) {
  main {
    padding: 0 20px 22px;
  }

  #chat {
    width: 100%;
    max-width: 780px;
  }

  /* Der KI-Hinweis als kleine mittige Pille statt als Leiste über
     die ganze Breite. Pflichtangabe nach Art. 50 KI-Verordnung,
     bleibt also dauerhaft sichtbar, nimmt aber nur den Platz ein,
     den der Satz braucht. */
  #kihinweis {
    width: auto;
    max-width: none;
    margin: 4px auto 2px;
    padding: 7px 20px;
    border: 1px solid var(--linie);
    border-bottom: 1px solid var(--linie);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    font-size: 12.5px;
  }

  /* Links Platz für AVAs Avatar. */
  /* Gesprächsbereich und Eingabeleiste haben DENSELBEN Innenrand,
     auf beiden Seiten. Nur so stehen Sprechblasen und Eingabefeld auf
     einer Kante und die Spalte sitzt mittig. Wer hier einen Wert
     ändert, muss ihn bei #bar mitändern. */
  #log {
    max-width: none;
    padding: 18px 30px 14px;
    gap: 16px;
    /* Weiches Ausblenden oben. Rein kosmetisch: Wo der Browser das
       nicht kennt, sieht man eine harte Kante und sonst nichts. */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
    mask-image: linear-gradient(to bottom, transparent 0, #000 20px);
  }

  /* Der Gesprächsbereich ist so hoch wie sein Inhalt, nicht so hoch
     wie der Bildschirm. Erst dadurch stehen Hinweis, Nachrichten und
     Eingabefeld als EIN Block zusammen. Vorher füllte er die ganze
     Höhe, die Nachrichten hingen unten, und zwischen Hinweis und
     erster Nachricht stand eine leere Fläche (17.09.2026).

     Wächst das Gespräch über den Platz hinaus, schrumpft der Bereich
     bis zur Höhe von #chat und scrollt dann. Dafür braucht er
     min-height: 0, sonst schrumpft ein Scrollbereich in einem
     Flex-Layout nicht unter seinen Inhalt. */
  #log {
    flex: 0 1 auto;
    min-height: 0;
  }

  #crisis {
    max-width: none;
    margin: 0 30px 12px;
  }

  /* Der Block aus Hinweis, Gespräch und Eingabe bleibt beisammen und
     sitzt in der Mitte der Höhe. Auf einem hohen Bildschirm stand
     sonst die halbe Seite leer zwischen Kopf und erster Nachricht
     (gemeldet am 17.09.2026 mit Bildschirmfoto). Die beiden
     automatischen Ränder teilen den freien Platz gleichmässig auf
     oben und unten; ist kein Platz frei, sind sie wirkungslos. Es
     kann also nichts oben herausrutschen wie am 30.08. beim
     Startbildschirm. */
  #chat {
    flex: 0 1 auto;
    max-height: 900px;
    margin-top: auto;
    margin-bottom: auto;
  }

  /* Kein Strich über die ganze Breite, kein eigener Hintergrund.
     Das Feld selbst trägt die Form. */
  #bar {
    background: transparent;
    backdrop-filter: none;
    border-top: none;
    /* Seitlich derselbe Wert wie bei #log, siehe dort. */
    padding: 8px 30px 16px;
  }

  .barrow,
  .legal {
    max-width: none;
  }

  .barrow {
    align-items: flex-end;
  }

  textarea {
    border-radius: 24px;
    padding: 13px 18px;
    box-shadow: 0 2px 16px rgba(80, 64, 104, 0.08);
  }

  #send {
    padding: 0 26px;
  }

  /* Zeilen nicht endlos lang werden lassen. Langer Fliesstext über
     die volle Breite liest sich schlechter, egal wie viel Platz da
     ist. */
  .msg {
    max-width: min(94%, 58ch);
  }

  .msg.user {
    max-width: min(88%, 50ch);
  }

  .gate {
    max-width: 100%;
  }

  /* ---------- Startbildschirm am Rechner ---------- */
  /* Auch hier kein Kasten. Der Startbildschirm lebt von der
     Überschrift, von viel Luft und von der Mitte. */
  #start {
    width: 100%;
    max-width: 600px;
    padding: 30px 0 34px;
    min-height: 0;
    justify-content: flex-start;
  }

  #start h1 {
    font-size: 42px;
    line-height: 1.14;
    margin-bottom: 24px;
  }

  #start .lead {
    font-size: 17px;
    max-width: 44ch;
    margin-bottom: 26px;
  }

  #start .transparenz {
    max-width: 42ch;
    margin-bottom: 30px;
  }

  #start .startfuss {
    margin-top: 24px;
  }
}

/* ===============================================================
   Der Avatar ist wieder raus (17.09.2026)
   ===============================================================
   Er hing 46 Pixel links aus der Spalte heraus. Sprechblasen und
   Eingabefeld standen zwar auf einer Kante, aber die sichtbare Fläche
   begann links früher als sie rechts endete, und der ganze Block sah
   nach links verschoben aus. Alessia: „das ist immernoch nicht mittig
   bündig". Sie hat recht, und der Avatar war das einzige Element, das
   aus der Kante fiel.

   Drei Wege wären möglich gewesen:

   1. Avatar rein in die Spalte und das Eingabefeld um dieselben 46
      Pixel einrücken. Dann wäre die weisse Eingabe-Pille sichtbar aus
      der Mitte gerutscht, also nur an eine andere Stelle verschoben.
   2. Die ganze Spalte um 23 Pixel verschieben, damit die sichtbare
      Fläche mittig sitzt. Dann stünde die Pille mit dem KI-Hinweis
      nicht mehr unter der Wortmarke.
   3. Den Avatar weglassen.

   Gewählt: der dritte. Jetzt gibt es genau eine linke und eine rechte
   Kante. Sprechblasen und Eingabefeld beginnen links auf demselben
   Pixel, die Nachrichten der Mama und der Senden-Knopf enden rechts
   auf demselben Pixel, und die Spalte sitzt mittig auf der Seite.

   Wenn AVAs Zeichen zurück soll, dann INNERHALB der Spalte, etwa in
   der ersten Zeile ihrer Nachricht. Nicht wieder daneben gehängt.
   =============================================================== */

/* ===============================================================
   Der grössere Kopf im Gespräch (16.09.2026)
   ===============================================================
   Die Verkleinerung vom 30.08. war eine Massnahme für die HÖHE von
   Handys, nicht für die Breite. Deshalb hängt die Rücknahme an beiden
   Maßen: genug Breite UND genug Höhe. Ein Handy im Querformat ist
   breit und trotzdem nur 390 Pixel hoch, dort bliebe für die
   Nachrichten sonst kaum etwas übrig.
   =============================================================== */
@media (min-width: 760px) and (min-height: 620px) {
  body.imGespraech header.site {
    padding-top: 20px;
    padding-bottom: 8px;
  }

  body.imGespraech .logo {
    width: 112px;
  }

  body.imGespraech .wordsub {
    display: block;
  }
}

/* ===============================================================
   Die Wellenmarke als Wasserzeichen (16.09.2026)
   ===============================================================
   Ganz leise, knapp 3 Prozent Deckkraft, unten mittig und hinter
   allem. Am 17.09.2026 von 4 auf 2,8 Prozent zurückgenommen und
   tiefer gesetzt: Auf einem hohen Bildschirm stand die Welle sonst
   als erkennbarer grauer Bogen hinter dem Eingabefeld. Jetzt schaut
   nur der Scheitel herein.
   Sie gibt dem Beige eine Struktur, ohne dass man sie als Bild
   wahrnimmt. Nur am Rechner, und nicht bei wenig Platz. */
@media (min-width: 760px) and (min-height: 620px) {
  body::before {
    content: '';
    position: fixed;
    left: 50%;
    bottom: -22%;
    transform: translateX(-50%);
    width: 760px;
    height: 760px;
    background: url('./logo/ava-wellenmarke-512-transparent.png') center / contain
      no-repeat;
    opacity: 0.028;
    pointer-events: none;
    z-index: 0;
  }

  header.site,
  main {
    position: relative;
    z-index: 1;
  }
}


/* ===============================================================
   Die Wortmarke atmet (16.09.2026)
   ===============================================================
   Wunsch von Alessia: Das AVA-Zeichen auf der Startseite soll
   pulsieren, „wie Wellen oder Atmen".

   Gewählt: Atmen, nicht Pulsieren. Ein Puls ist schnell und
   aufmerksamkeitshungrig, ein Atemzug ist langsam und beruhigt. Für
   eine erschöpfte Mama, die abends auf dieser Seite landet, ist das
   der richtige Ton. Ein Atemzug dauert hier fünf Sekunden: vier
   Zehntel einatmen, sechs Zehntel ausatmen. Das ist die Aufteilung,
   mit der Atemübungen arbeiten, und genau langsam genug, dass man die
   Bewegung eher spürt als sieht.

   Zwei Dinge bewegen sich zusammen:
   - die Marke selbst, 7,5 Prozent grösser und wieder zurück,
   - ein weicher lila Schein dahinter, der mit ihr aufgeht.

   Am 17.09.2026 von 4 auf 7,5 Prozent erhöht und der Schein von 0,4
   auf 0,6 Deckkraft, auf Wunsch: „ja könnte noch etwas mehr sein".
   Die fünf Sekunden bleiben. Mehr Ausschlag macht die Bewegung
   sichtbarer, schneller würde sie unruhig machen.

   NUR auf dem Startbildschirm. Im Gespräch hört das Atmen auf: Dort
   liest die Mama, und etwas, das sich am oberen Rand dauernd bewegt,
   zieht beim Lesen am Auge.

   Wer im Betriebssystem weniger Bewegung eingestellt hat, sieht kein
   Atmen. Das ist keine Kür, sondern eine Vorgabe der
   Barrierefreiheit: Bewegung kann Schwindel und Migräne auslösen.
   =============================================================== */
@keyframes atmen {
  0% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(154, 135, 180, 0));
  }
  40% {
    transform: scale(1.075);
    filter: drop-shadow(0 4px 22px rgba(154, 135, 180, 0.6));
  }
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(154, 135, 180, 0));
  }
}

body:not(.imGespraech) .logo {
  animation: atmen 5s ease-in-out infinite;
  /* Die Marke wächst aus ihrer Mitte, nicht aus der Ecke. */
  transform-origin: 50% 50%;
  /* Eigene Ebene, damit der Browser nur dieses Bild neu zeichnet und
     nicht bei jedem Schritt die halbe Seite. */
  will-change: transform, filter;
}

@media (prefers-reduced-motion: reduce) {
  body:not(.imGespraech) .logo {
    animation: none;
    will-change: auto;
  }
}