/* ====================  css/berater.css  ====================
   KI-Berater auf jeder Seite (06.10.2026, js/berater.js): Knopf unten rechts, darüber das Chatfenster.
   Formensprache wie die Tafeln des Menüs und der Cookie-Hinweis: deckender dunkler Grund, Haarlinien, 2 px Radius.
   Das einzige Runde ist das KI-Zeichen, wie der Punkt im KI-Mockup. Am Telefon füllt das Fenster den Bildschirm. */

.berater-knopf{
  position: fixed; z-index: 45;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 16px 7px 7px;
  background: rgba(9,11,20,.94); color: var(--text);
  border: 1px solid rgba(140,170,240,.34); border-radius: 2px;
  box-shadow: 0 20px 44px -18px rgba(0,0,0,.95);
  font: 500 .9rem/1 var(--schrift); letter-spacing: .01em;
  cursor: pointer;
  transition: border-color .2s, transform .12s ease-out, opacity .2s, visibility .2s;
}
.berater-knopf:hover{ border-color: rgba(140,170,240,.7) }
.berater-knopf:active{ transform: scale(.97) }
.berater-knopf:focus-visible{ outline: 2px solid var(--papier); outline-offset: 3px }
/* Solange der Cookie-Hinweis unten steht oder das Fenster offen ist, tritt der Knopf zurück */
body:has(.einwilligung.ist-da) .berater-knopf,
.berater-knopf[aria-expanded="true"]{ opacity: 0; visibility: hidden; pointer-events: none }

.berater-zeichen{
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .03em; color: #fff;
  background: linear-gradient(135deg, var(--blau), var(--violett));
}

/* ---------- Fenster ---------- */
.berater-fenster{
  position: fixed; z-index: 46;
  right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
  width: min(400px, calc(100vw - 32px)); height: min(640px, calc(100svh - var(--kopf-h) - 32px));
  display: flex; flex-direction: column;
  background: var(--raum); color: var(--text);
  border: 1px solid var(--linie); border-radius: 2px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.95);
  font-family: var(--schrift);
  opacity: 0; translate: 0 10px;
  transition: opacity .2s ease-out, translate .2s ease-out;
}
.berater-fenster[hidden]{ display: none }
.berater-fenster.ist-offen{ opacity: 1; translate: 0 0 }
.berater-fenster p{ max-width: none }

.berater-kopf{
  flex: none; display: flex; align-items: center; gap: 12px;
  padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--linie);
}
.berater-kopf-text{ flex: 1; min-width: 0 }
.berater-titel{ font-size: .96rem; font-weight: 600; color: var(--text); line-height: 1.3 }
.berater-unter{ font-size: .74rem; color: var(--text-fern); line-height: 1.35 }
.berater-neu, .berater-zu{
  flex: none; height: 32px; padding: 0 10px;
  background: transparent; color: var(--text-leise);
  border: 1px solid var(--linie); border-radius: 2px;
  font: 500 .76rem/1 var(--schrift); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.berater-zu{ width: 32px; padding: 0; font-size: 1.15rem; line-height: 1 }
.berater-neu:hover, .berater-zu:hover{ color: var(--text); border-color: var(--text-leise) }
.berater-neu:focus-visible, .berater-zu:focus-visible{ outline: 2px solid var(--papier); outline-offset: 2px }

/* ---------- Verlauf ---------- */
.berater-verlauf{
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin;
}
.bn{ font-size: .92rem; line-height: 1.55; overflow-wrap: anywhere }
.bn--sie{
  align-self: flex-end; max-width: 85%;
  padding: 9px 13px; border-radius: 2px;
  background: rgba(140,170,240,.13); color: var(--text);
  white-space: pre-wrap;
}
.bn--ki{ align-self: stretch; color: var(--text) }
.bn--ki p + p, .bn--ki p + ul, .bn--ki ul + p{ margin-top: .6em }
.bn--ki ul{ padding-left: 1.1em }
.bn--ki li + li{ margin-top: .25em }
.bn--ki strong{ font-weight: 600; color: #fff }
.bn--ki a{ color: var(--text); text-decoration: underline; text-decoration-color: var(--text-fern); text-underline-offset: 3px }
.bn--ki a:hover{ text-decoration-color: var(--text) }
.bn--fehler .bn-text{ color: var(--text-leise) }

/* Seiten zur Antwort, Befund-Knopf, Kontakt */
.bn-seiten{ list-style: none; padding: 0 !important; margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px }
.bn-seiten li + li{ margin-top: 0 !important }
.bn-seiten a{
  display: inline-block; padding: 6px 10px; border: 1px solid var(--linie); border-radius: 2px;
  font-size: .8rem; text-decoration: none !important; color: var(--text-leise) !important;
  transition: color .2s, border-color .2s;
}
.bn-seiten a::after{ content: " →" }
.bn-seiten a:hover{ color: var(--text) !important; border-color: var(--text-leise) }
.bn-befund{ margin-top: 12px }
.bn-befund .knopf{ padding: 10px 16px; font-size: .84rem; text-decoration: none }
.bn-kontakt{ margin-top: 10px; font-size: .84rem; color: var(--text-leise) }
.bn-kontakt a{ color: var(--text) }

/* Vorschläge zum Einstieg */
.bn-vorschlaege{ display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 4px }
.bn-vorschlaege button{
  padding: 8px 12px; text-align: left;
  background: transparent; color: var(--text-leise);
  border: 1px solid var(--linie); border-radius: 2px;
  font: .84rem/1.35 var(--schrift); cursor: pointer;
  transition: color .2s, border-color .2s;
}
.bn-vorschlaege button:hover{ color: var(--text); border-color: var(--text-leise) }
.bn-vorschlaege button:focus-visible{ outline: 2px solid var(--papier); outline-offset: 2px }

/* Warten auf die erste Zeile: drei Punkte; „liest …“, wenn der Berater eine Seite nachschlägt */
.bn-warten{ display: inline-flex; gap: 5px; padding: 6px 0 }
.bn-warten i{
  width: 6px; height: 6px; border-radius: 50%; background: var(--text-fern);
  animation: bn-puls 1.1s ease-in-out infinite;
}
.bn-warten i:nth-child(2){ animation-delay: .15s }
.bn-warten i:nth-child(3){ animation-delay: .3s }
@keyframes bn-puls{ 0%, 80%, 100%{ opacity: .3 } 40%{ opacity: 1 } }
.bn-status{ font-size: .8rem; color: var(--text-fern) }

/* ---------- Eingabe ---------- */
.berater-eingabe{
  flex: none; display: flex; align-items: flex-end; gap: 8px;
  padding: 10px 12px 8px; border-top: 1px solid var(--linie);
}
.berater-eingabe textarea{
  flex: 1; min-width: 0; resize: none; max-height: 140px;
  padding: 10px 12px; border: 1px solid var(--linie); border-radius: 2px;
  background: var(--raum-hoch); color: var(--text);
  font: .92rem/1.45 var(--schrift);
}
.berater-eingabe textarea::placeholder{ color: var(--text-fern) }
.berater-eingabe textarea:focus{ outline: none; border-color: var(--text-leise) }
.berater-senden{
  flex: none; width: 42px; height: 42px;
  border: 1px solid var(--text); border-radius: 2px;
  background: transparent; color: var(--text);
  font: 600 1.1rem/1 var(--schrift); cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.berater-senden:hover:not(:disabled){ background: linear-gradient(96deg, var(--blau), var(--violett)); color: #fff; border-color: transparent }
.berater-senden:disabled{ opacity: .4; cursor: default }
.berater-senden:focus-visible{ outline: 2px solid var(--papier); outline-offset: 2px }
.berater-fuss{ flex: none; padding: 0 14px 12px; font-size: .72rem; color: var(--text-fern) }
.berater-fuss a{ color: var(--text-leise) }

/* Telefon: Fenster über den ganzen Bildschirm, Knopf nur mit Zeichen */
@media (max-width: 600px){
  .berater-knopf-text{ display: none }
  .berater-knopf{ padding: 7px }
  .berater-eingabe textarea{ font-size: 16px }   /* unter 16 px vergrößert Safari beim Antippen die Seite */
  .berater-fenster{
    inset: 0; width: 100%; height: 100%; height: 100dvh; border: 0; border-radius: 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
}

@media print{ .berater-knopf, .berater-fenster{ display: none !important } }