/* Persönlicher Ansprechpartner — schwebendes Widget unten rechts (global).
   Self-contained (keine Abhängigkeit von app.css/konfigurator.css-Variablen). */
.mmd-berater {
  position: fixed; right: 22px; bottom: 24px; z-index: 850;
  font-family: "DM Sans", sans-serif;
}
.mmd-berater * { box-sizing: border-box; }

/* Gradient-Ring um den Avatar (dezent) */
.mmd-berater-ring {
  padding: 2px; border-radius: 999px;
  background: linear-gradient(135deg, #ff6a3d 0%, #ff2e74 45%, #8a4dff 100%);
}
/* flex:none — im Karten-Kopf darf der lange Rollen-Text das Foto nie schmal
   quetschen (Bubble muss immer rund bleiben, Julian 19.08.2026) */
.mmd-berater-avatar { display: block; width: 58px; height: 58px; flex: none; }
.mmd-berater-avatar img {
  width: 100%; height: 100%; border-radius: 999px; object-fit: cover;
  border: 2px solid #fff; display: block;
}
.mmd-berater-initial {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; border-radius: 999px; border: 2px solid #fff;
  background: #111; color: #fff; font-weight: 700; font-size: 22px;
}

/* Eingeklappter FAB */
.mmd-berater-fab {
  position: relative; display: block; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 999px; box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.mmd-berater-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22); }
.mmd-berater-fab:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
/* Touch: der Avatar ist auf dem Handy 30 px groß. Er bleibt so klein (er
   schwebt über dem Inhalt), bekommt aber ein unsichtbares 44-px-Trefferfeld
   (gemessen 10.09.2026). */
@media (hover: none) {
  .mmd-berater-fab::before { content: ""; position: absolute; inset: -7px; border-radius: 999px; }
}
.mmd-berater[data-offen="1"] .mmd-berater-fab { display: none; }

/* Inaktivitäts-Teaser: weiße Pille, fährt links neben dem Avatar raus */
.mmd-berater-teaser {
  position: absolute; right: calc(100% + 12px); bottom: 8px; white-space: nowrap;
  background: #fff; color: #111; font-family: inherit; font-size: 13.5px; font-weight: 600;
  padding: 11px 16px; border: none; border-radius: 999px; cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.16);
  opacity: 0; visibility: hidden; transform: translateX(10px);
  transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.2, 0.8, 0.3, 1), visibility 0.28s;
}
.mmd-berater-teaser::after {
  content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
  border: 6px solid transparent; border-left-color: #fff;
}
.mmd-berater-teaser--an { opacity: 1; visibility: visible; transform: translateX(0); }
.mmd-berater[data-offen="1"] .mmd-berater-teaser { opacity: 0; visibility: hidden; }

/* Aufgeklappte Karte */
.mmd-berater-karte {
  position: relative; width: 320px; max-width: calc(100vw - 32px);
  background: #fff; border-radius: 20px; padding: 22px;
  box-shadow: 0 20px 64px rgba(0, 0, 0, 0.24); color: #111;
  transform-origin: bottom right;
  animation: mmd-berater-auf 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  /* Mit KI-Chat kann die Karte hoch werden — nie über den Viewport hinaus,
     stattdessen intern scrollen (v.a. flache Fenster/Mobile-Querformat) */
  max-height: calc(100vh - 48px); max-height: calc(100svh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
}
@keyframes mmd-berater-auf {
  from { opacity: 0; transform: translateY(16px) scale(0.94); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
.mmd-berater-karte[hidden] { display: none; }
/* Schließen-× oben rechts: auf Touch der primäre Schließweg, auf Desktop nötig,
   sobald die Karte „gepinnt" ist (Interaktion im Chat, s. berater.js) */
.mmd-berater-zu {
  position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  border: none; background: none; border-radius: 9px; cursor: pointer;
  color: #a5a5a5; font-size: 21px; line-height: 1; padding: 0;
}
.mmd-berater-zu:hover { background: rgba(0, 0, 0, 0.06); color: #111; }
.mmd-berater-eyebrow {
  display: block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #767676; margin-bottom: 12px;
}
.mmd-berater-kopf { display: flex; align-items: center; gap: 14px; }
.mmd-berater-kopf .mmd-berater-avatar { width: 56px; height: 56px; }
.mmd-berater-wer { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mmd-berater-name { font-size: 19px; font-weight: 700; line-height: 1.15; }
.mmd-berater-rolle { font-size: 13px; color: #777; }
/* Eine Zeile statt zweier Reihen (Julian, 01.10.2026): E-Mail und WhatsApp
   nur als Zeichen, dann „Jetzt anrufen" mit der Nummer, ohne Zeichen. Der
   Anruf nimmt den Platz, der übrig bleibt — die Nummer ist die Information,
   die beiden anderen erkennt man am Symbol. */
.mmd-berater-aktionen { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.mmd-berater-btn {
  flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 40px; padding: 8px 10px; border: 1px solid #e2e2e0; border-radius: 11px;
  background: #fff; color: #111; font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.12s ease;
}
.mmd-berater-btn:hover { background: #f5f5f3; border-color: #cfcfca; transform: translateY(-1px); }
/* Nur das Zeichen: quadratisch, wächst nicht mit */
/* Reine Symbol-Knöpfe sind rund (Julian, 09.10.2026: „die Symbole unten sollten auch Kreise sein") */
.mmd-berater-btn--zeichen { flex: 0 0 auto; width: 44px; min-height: 44px; padding: 0; gap: 0; border-radius: 50%; }
/* Anrufen ohne Rahmen und kleiner — als Knopf lief die Nummer aus der Karte
   (Julian, 01.10.2026: „das Jetzt anrufen kann ohne Button und kleiner, damit
   es passt"). Es ist ohnehin der dritte, leiseste Weg. */
.mmd-berater-btn--anruf {
  flex: 1 1 auto; min-width: 0; justify-content: flex-start; gap: 0;
  border: 0; background: none; padding: 0 0 0 4px; font-size: 12.5px;
  white-space: normal;
}
.mmd-berater-btn--anruf:hover { background: none; transform: none; }
.mmd-berater-btn--anruf > span:first-child { white-space: nowrap; }
.mmd-berater-nummer { color: #777; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mmd-berater-btn--anruf:hover .mmd-berater-nummer { color: #111; }
/* Schmal (Handy): die Nummer bricht sonst aus der Zeile */
@media (max-width: 420px) {
  .mmd-berater-btn--anruf { font-size: 12.5px; }
}

/* ===== KI-Chat — Hauptelement der Karte, klassische Chat-Optik (Julian,
   17.08.2026): Nutzer-Nachrichten BLAU rechts (MMD-Akzent, wie im Konfigurator),
   Antworten hell links, echter Verlauf mit fester Fensterhöhe. Bleibt hidden,
   bis /ki-chat/status "live" meldet. ===== */
.mmd-chat { margin-top: 16px; position: relative; }
.mmd-chat[hidden] { display: none; }
.mmd-dai-gradient {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: linear-gradient(90deg, #f472b6, #8b5cf6);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #ec4899;
}
.mmd-chat-verlauf {
  display: flex; flex-direction: column; gap: 8px;
  /* Grundhöhe für Begrüßung, eigene Nachricht und Antwort (Abnahme 09.10.2026:
     „etwas größer, damit die eigene Nachricht sich sauberer einpflegt"); leer
     sah 200 px wie ein Fehler aus. Ab 320 px scrollt der Verlauf. */
  min-height: 170px; max-height: 320px; overflow-y: auto; overscroll-behavior: contain;
  margin-bottom: 10px; padding: 12px 10px; scrollbar-width: thin;
  background: #fff; border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 16px;
}
/* „i" sitzt in der Kopfzeile (nicht mehr absolut über dem Verlauf) — position:
   relative bleibt, damit der Tooltip weiter daran hängt. */
/* Name und KI-Zeichen auf einer Zeile (09.10.2026) */
.mmd-berater-namezeile { display: inline-flex; align-items: center; gap: 7px; }
.mmd-chat-info { position: relative; z-index: 2; display: inline-flex; }
.mmd-chat-info[hidden] { display: none; }
.mmd-chat-info button {
  width: 22px; height: 22px; border: 0; border-radius: 50%; background: none; padding: 0;
  cursor: help; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.mmd-chat-info button:hover, .mmd-chat-info.offen button { background: #f3f2ef; }
/* Der Hinweis stand mit fester Breite am rechten Rand und lief aus der Karte
   heraus (Julian, 01.10.2026: „hier ist die Schrift nicht sauber gesetzt wenn
   man drüber hovert"). Jetzt klemmt er sich in die Kartenbreite und bricht
   sauber um. */
.mmd-chat-info-pop {
  /* hängt seit 09.10.2026 am Stern hinter dem Namen: links ausgerichtet */
  /* Der Stern steht etwa in der Kartenmitte: rechts 96 px überstehen lassen,
     dann bleibt die 220-px-Blase ganz in der Karte (links wie rechts). */
  position: absolute; left: auto; right: -96px; top: calc(100% + 7px);
  width: 220px; max-width: calc(100vw - 48px);
  /* Die Markenzeile darüber steht auf nowrap, und das erbt die Blase: der Satz
     lief in einer Zeile aus ihr heraus (Julian, 01.10.2026). */
  white-space: normal; overflow-wrap: anywhere;
  background: #fff; border: 1px solid #ececea; border-radius: 10px; padding: 9px 11px;
  font-size: 11px; line-height: 1.45; color: #777;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.12);
  opacity: 0; visibility: hidden; transform: translateY(-3px); pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s 0.18s;
}
@media (hover: hover) {
  .mmd-chat-info:hover .mmd-chat-info-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}
.mmd-chat-info.offen .mmd-chat-info-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
/* Optik wie das D.AI-Popup auf der Website (Julian, 20.08.2026):
   graue KI-Bubble, schwarze Nutzer-Bubble, Pill-Eingabe, runder Senden-Button */
.mmd-chat-msg {
  max-width: 85%; padding: 10px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
}
.mmd-chat-msg--nutzer { align-self: flex-end; background: #0d0d0d; color: #fff; border-bottom-right-radius: 4px; }
.mmd-chat-msg--ki { align-self: flex-start; background: #f3f2ef; color: #0d0d0d; border-bottom-left-radius: 4px; }
/* Tipp-Indikator: drei nacheinander aufleuchtende Punkte (WhatsApp-Stil) */
.mmd-chat-tipp { display: inline-flex; align-items: center; gap: 4px; padding: 3px 2px; }
.mmd-chat-tipp i {
  width: 7px; height: 7px; border-radius: 50%; background: #b9b9b4;
  animation: mmd-tipp-huepf 1.2s ease-in-out infinite;
}
.mmd-chat-tipp i:nth-child(2) { animation-delay: 0.15s; }
.mmd-chat-tipp i:nth-child(3) { animation-delay: 0.3s; }
@keyframes mmd-tipp-huepf {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}
/* Neue Nachricht läuft wie in einem Messenger ein */
.mmd-chat-msg--neu { animation: mmd-msg-rein 0.28s cubic-bezier(0.2, 0.8, 0.3, 1); }
@keyframes mmd-msg-rein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mmd-chat-tipp i { animation: none; opacity: 0.6; }
  .mmd-chat-msg--neu { animation: none; }
}
.mmd-chat-msg--fehler { background: #fdf1f0; border-color: #f3d9d6; color: #9a3b32; }
.mmd-chat-aktionen { display: flex; flex-wrap: wrap; gap: 6px; align-self: flex-start; }
.mmd-chat-aktion {
  display: inline-flex; align-items: center; min-height: 32px; padding: 5px 12px;
  border: 1px solid #e2e2e0; border-radius: 999px; background: #fff;
  color: #111; font-size: 12.5px; font-weight: 600; text-decoration: none;
}
.mmd-chat-aktion:hover { background: #f5f5f3; border-color: #cfcfca; }
.mmd-chat-form { display: flex; gap: 8px; }
.mmd-chat-form input {
  flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 10px 14px;
  border: 1.5px solid rgba(0, 0, 0, 0.1); border-radius: 100px; background: #faf9f6; color: #0d0d0d;
  font-family: inherit; font-size: 16px; /* ≥16px = kein iOS-Zoom */
}
@media (hover: hover) and (pointer: fine) { .mmd-chat-form input { font-size: 13.5px; } }
.mmd-chat-form input:focus { outline: none; border-color: #111; }
.mmd-chat-form button {
  flex: none; width: 44px; min-height: 44px; border: none; border-radius: 50%;
  background: #0d0d0d; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.12s ease, opacity 0.15s ease;
}
.mmd-chat-form button:hover { transform: translateY(-1px); }
/* Zwischenhinweis vor Anruf/E-Mail (einmal pro Session) */
.mmd-chat-interstitial {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #f7f7f5;
  font-size: 13px; line-height: 1.45; color: #333;
}
.mmd-chat-interstitial[hidden] { display: none; }
.mmd-chat-interstitial p { margin: 0 0 8px; }
.mmd-chat-interstitial-btns { display: flex; gap: 10px; align-items: center; }
.mmd-chat-interstitial-btns button {
  border: none; border-radius: 999px; background: #111; color: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600; padding: 8px 14px; cursor: pointer;
}
.mmd-chat-interstitial-btns a { color: #777; font-size: 12.5px; text-decoration: underline; }
.mmd-chat-interstitial-btns a:hover { color: #111; }

/* Konfigurator: etwas Luft unter dem Wizard-Inhalt.
   Bis 25.08.2026 standen hier 50px Scroll-Band für Mobile — sie waren nötig,
   damit man den Inhalt über die Ansprechpartner-Blase hinwegschieben konnte. Der Ansprechpartner sitzt
   jetzt in der Nav (.mmd-berater--kopf), unten rechts steht nichts mehr im
   Weg, also ist das Band weg. */
body.kf-page .kf-step { padding-bottom: 14px; }

@media (max-width: 560px) {
  /* Kompakter + tiefer in die Ecke: im Konfigurator-Anfrage-Schritt sind die
     Buttons unten gepinnt — der Avatar darf sie nicht überlagern (18.08.2026) */
  .mmd-berater { right: 10px; bottom: 10px; }
  .mmd-berater-avatar { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .mmd-berater-fab, .mmd-berater-teaser, .mmd-berater-btn { transition: none; }
  .mmd-berater-karte { animation: none; }
}

/* ══ Variante „kopf": in der Icon-Reihe der Nav ═══════════════════════════════
   Im Konfigurator ist unten rechts Arbeitsfläche — auf dem Board liegen dort
   „Fertige Designs" und der Weg aufs Produkt, im Designfeld Zoom und Vollbild.
   Eine schwebende Blase nimmt genau diesen Platz weg (Julian, 25.08.2026).
   Also wandert derselbe Ansprechpartner nach oben: Avatar in der Icon-Reihe,
   die Karte klappt darunter auf. Gleiches Markup, gleicher Chat, gleiches
   Verhalten — nur die Verankerung dreht sich von unten nach oben.

   Die Regeln stehen absichtlich HINTER allen Basisregeln und Media-Queries:
   sonst gewinnt die 560px-Regel (right/bottom am Widget) gegen sie. */
.mmd-berater--kopf {
  position: relative; right: auto; bottom: auto; z-index: 900;
  display: flex; align-items: center;
  /* Der Trenner steht LINKS: der Avatar sitzt seit 27.08.2026 am rechten Ende
     der Reihe (Julian). Ein Strich rechts von ihm hätte gegen nichts mehr
     getrennt und sah aus wie ein abgeschnittener Rand.

     Die Werte sind ausgemessen, nicht geschätzt (Julian, 27.08.2026: „zum
     Strich muss dann links und rechts genau so viel Abstand sein"). Der Haken
     dabei: der Flaggen-Knopf links ist 31px breit, die Flagge darin nur 18px —
     rechts von ihr stehen 7px Luft, die man nicht sieht, die den Strich aber
     wegschieben. Rechnerisch waren beide Seiten fast gleich, optisch standen
     21px gegen 12px.

     Deshalb das negative margin: es zieht den Strich um genau die unsichtbare
     Hälfte dieser Luft zurück, damit links und rechts vom Strich dasselbe
     ANKOMMT. Rechnung: 10px Reihenabstand + (-2px) + 7px Knopf-Überstand = 15
     links, 15px padding = 15 rechts. */
  /* Seit 16.10.2026 OHNE Strich (Julian: „nur diese drei Striche abtrennen, und dieser
     Strich daneben muss halt weg") — die drei Punkte davor trennen; normaler Reihenabstand. */
  margin-left: 0; padding-left: 0;
}
/* Etwas größer als die Nav-Icons daneben (Julian: „als etwas größeren Punkt") */
.mmd-berater--kopf .mmd-berater-fab { box-shadow: none; }
.mmd-berater--kopf .mmd-berater-fab:hover { transform: none; box-shadow: none; }
.mmd-berater--kopf .mmd-berater-fab .mmd-berater-avatar { width: 34px; height: 34px; }
.mmd-berater--kopf .mmd-berater-fab .mmd-berater-ring { padding: 1.5px; }
/* Ohne bunten Ring in der Kopfzeile (Julian, 06.10.2026: „gibt erstmal keinen
   Mehrwert") — das Foto steht für sich, wie die Symbole daneben */
.mmd-berater--kopf .mmd-berater-ring { background: none; padding: 0; }
.mmd-berater--kopf .mmd-berater-fab .mmd-berater-avatar img,
.mmd-berater--kopf .mmd-berater-fab .mmd-berater-initial { border: 0; }
.mmd-berater--kopf .mmd-berater-fab .mmd-berater-avatar img,
.mmd-berater--kopf .mmd-berater-fab .mmd-berater-initial { border-width: 1.5px; }
.mmd-berater--kopf .mmd-berater-initial { font-size: 14px; }
/* Der Avatar bleibt stehen, wenn die Karte offen ist — er ist hier ein
   Menüpunkt, und ein verschwindender Menüpunkt lässt die Leiste zucken. */
.mmd-berater--kopf[data-offen="1"] .mmd-berater-fab { display: block; }
.mmd-berater--kopf[data-offen="1"] .mmd-berater-fab .mmd-berater-avatar { opacity: 0.75; }

/* Karte hängt unter dem Avatar statt über ihm. Der Abstand ist so gewählt,
   dass sie UNTER der Nav-Haarlinie beginnt, nicht mitten in der Leiste — sie
   soll wie angehängt wirken, nicht wie eingeschoben. */
.mmd-berater--kopf .mmd-berater-karte {
  position: absolute; top: calc(100% + 20px); right: -4px;
  transform-origin: top right;
  animation-name: mmd-berater-auf-oben;
  max-height: calc(100vh - 104px); max-height: calc(100svh - 104px);
}
@keyframes mmd-berater-auf-oben {
  from { opacity: 0; transform: translateY(-14px) scale(0.95); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: none; }
}
/* Der Teaser in der Nav (Julian, 27.08.2026: „Kann ich helfen? Eigentlich noch
   ganz nice. Vielleicht können wir die auch noch hinzufügen").

   Er hängt UNTER dem Avatar statt links daneben. Julians erster Gedanke war,
   die Icon-Reihe nach links zu schieben, damit die Pille daneben passt — das
   fällt tatsächlich mehr auf, verschiebt aber Klickziele, während jemand
   gerade auf eines zielt. Das ist die eine Bewegung, die eine Navigation nicht
   machen darf. Unter dem Avatar erreicht die Pille dieselbe Aufmerksamkeit
   über Bewegung: sie fährt nach unten aus, genau dorthin, wo gleich auch die
   Karte aufklappt. Der Weg ist damit derselbe, nur kleiner.

   Nichts an der Pille verschiebt Layout: sie liegt absolut über der Seite. */
.mmd-berater--kopf .mmd-berater-teaser {
  display: block;
  position: absolute; right: -2px; bottom: auto; top: calc(100% + 14px);
  left: auto; transform: translateY(-8px);
  font-size: 12.5px; padding: 8px 14px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}
/* Der Zipfel zeigt nach oben zum Avatar, nicht nach rechts. */
.mmd-berater--kopf .mmd-berater-teaser::after {
  left: auto; right: 16px; top: auto; bottom: 100%;
  transform: none; border-color: transparent transparent #fff transparent;
}
.mmd-berater--kopf .mmd-berater-teaser--an { transform: translateY(0); }

/* Die Icon-Reihe wird durch den Ansprechpartner um ein Element länger. Auf schmalen Fenstern
   stößt sie dann gegen das mittig fixierte Logo. Das Konfigurator-Icon ist im
   Konfigurator ohnehin redundant — es macht den Platz frei. Steht hier, weil
   es an dieser Variante hängt: ohne den Ansprechpartner in der Nav gibt es das Problem nicht. */
/* Seit 03.09.2026 gilt das für ALLE Seiten und steht in css/v4-nav.css
   (+ Startseiten-Inline): unter 640px weichen Produkte, Konfigurator und
   Wunschliste in den Schnellzugriff des Burger-Menüs. Die alten Regeln hier
   hingen an href="/konfigurator" und griffen auf /en/… ohnehin nicht. */

@media (max-width: 560px) {
  .mmd-berater--kopf { right: auto; bottom: auto; padding-left: 12px; margin-left: -2px; }
  .mmd-berater--kopf .mmd-berater-fab .mmd-berater-avatar { width: 30px; height: 30px; }
  /* Schmales Fenster: die 320px-Karte passt nicht mehr neben den Avatar.
     Sie spannt sich stattdessen unter der Nav über die ganze Breite — fixiert
     am Fenster, damit kein Elternteil sie beschneiden kann. */
  .mmd-berater--kopf .mmd-berater-karte {
    position: fixed; top: 60px; left: 10px; right: 10px; width: auto; max-width: none;
    max-height: calc(100vh - 76px); max-height: calc(100svh - 76px);
  }
}

/* ══ „Winkt" — der Teaser für die Kopf-Variante (27.08.2026) ═════════════════
   Unten rechts fährt eine Sprechblase neben dem Avatar aus. In der Nav ist
   dafür kein Platz, und ohne Ersatz wäre der Berater dort stumm. Also ein
   Punkt an der Ecke plus ein einmaliger, ruhiger Puls: sichtbar genug, um den
   Blick zu holen, leise genug, um beim Arbeiten nicht zu stören. */
.mmd-berater--kopf.mmd-berater--winkt .mmd-berater-fab::after {
  content: ''; position: absolute; top: 1px; right: 1px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--kf-akzent, #1d6bff); box-shadow: 0 0 0 2px #fff;
  animation: mmdBeraterPunkt 0.4s ease-out;
}
.mmd-berater--kopf .mmd-berater-fab { position: relative; }
.mmd-berater--kopf.mmd-berater--winkt .mmd-berater-avatar {
  animation: mmdBeraterPuls 2.2s ease-out 1;
}
@keyframes mmdBeraterPunkt {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes mmdBeraterPuls {
  0%, 100% { transform: scale(1); }
  8% { transform: scale(1.12); }
  16% { transform: scale(1); }
  24% { transform: scale(1.08); }
  32% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .mmd-berater--kopf.mmd-berater--winkt .mmd-berater-avatar,
  .mmd-berater--kopf.mmd-berater--winkt .mmd-berater-fab::after { animation: none; }
}

/* ── Mobil-Nachlese 15.09.2026 ──────────────────────────────────────────────
   Trefferflächen unter 44px, gemessen bei 360/390/414px mit Touch-Emulation.
   Das „i" im Chat maß 17×17, das Schließen-Kreuz 32×32 — letzteres ist laut
   dem Kommentar weiter oben in dieser Datei „auf Touch der primäre Schließweg".
   Nur die Trefferfläche wächst, die sichtbaren Kreise bleiben wie sie sind. */
@media (hover: none) and (pointer: coarse) {
  #mmd-berater-zu, #mmd-chat-info-btn { position: relative; }
  #mmd-berater-zu::before, #mmd-chat-info-btn::before {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%;
  }
}

/* ── KI-Chat mobil „von unten" (Julian, 16.10.2026) ───────────────────────
   berater.js hängt die Karte bis 560 px beim Öffnen in .mmd-berater-blatt:
   abgedunkelte Ebene über der ganzen Seite, die Karte unten über die volle
   Breite, mit Griff und großem ×. Tippen daneben, × oder Wischen schließt. */
.mmd-berater-blatt {
  position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end;
  background: rgba(10, 10, 10, 0.5); animation: mmd-blatt-schleier 0.25s ease;
}
.mmd-berater-blatt .mmd-berater-karte {
  position: relative; top: auto; right: auto; left: auto; width: 100%; max-width: none;
  border-radius: 22px 22px 0 0; padding: 32px 20px calc(22px + env(safe-area-inset-bottom));
  max-height: 88vh; max-height: 88svh; box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
  transform-origin: bottom center; animation: mmd-blatt-auf 0.34s cubic-bezier(0.16, 1, 0.3, 1);
  transition: transform 0.2s ease;
}
.mmd-berater-blatt .mmd-berater-karte::before {
  content: ""; position: absolute; top: 10px; left: 50%; width: 40px; height: 5px; margin-left: -20px;
  border-radius: 3px; background: rgba(13, 13, 13, 0.18);
}
.mmd-berater-blatt .mmd-berater-zu {
  top: 16px; right: 14px; width: 40px; height: 40px; border-radius: 50%;
  background: #f0efec; color: #555; font-size: 22px;
}
/* die Touch-Regel weiter oben setzt #mmd-berater-zu auf position:relative (ID schlägt Klasse) */
.mmd-berater-blatt #mmd-berater-zu { position: absolute; }
.mmd-berater-blatt .mmd-chat-verlauf { min-height: 30vh; min-height: 30svh; }
html.mmd-blatt-offen, html.mmd-blatt-offen body { overflow: hidden; }
@keyframes mmd-blatt-schleier { from { background: rgba(10, 10, 10, 0); } }
@keyframes mmd-blatt-auf { from { transform: translateY(100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .mmd-berater-blatt, .mmd-berater-blatt .mmd-berater-karte { animation: none; } }

/* Mobil-Runde 2 (Julian, 16.10.2026): das Cookie-Symbol (Cookiebot) lag über der Mail-Taste
   im Blatt — es weicht, solange das Blatt offen ist; die Seite dahinter scrollt nicht mit;
   mit Tastatur wird der Verlauf kürzer, damit Eingabe und Senden sichtbar bleiben. */
html.mmd-blatt-offen #CookiebotWidget, html.mmd-blatt-offen .CookiebotWidget { display: none !important; }
html.mmd-blatt-offen, html.mmd-blatt-offen body { overflow: hidden; }
.mmd-berater-blatt .mmd-berater-karte { max-height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.mmd-berater-blatt.mmd-blatt-tastatur .mmd-chat-verlauf { min-height: 0; max-height: 34vh; }

/* ── Tom-Chat mobil als ganzer Bildschirm (Julian, 17.10.2026) ──────────────
   Wie Intercom/WhatsApp-Widgets auf dem Handy: nichts von der Seite dahinter,
   nichts scrollt außer dem Verlauf. Die Höhe setzt berater.js (anTastatur) auf
   den sichtbaren Bereich über der Tastatur — Kopf bleibt oben, Eingabe sitzt
   direkt über der Tastatur. Von oben oder unten spielt so keine Rolle mehr. */
.mmd-berater-blatt.mmd-blatt-voll { background: #fff; align-items: stretch; touch-action: none; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-berater-karte {
  display: flex; flex-direction: column; height: 100%; max-height: none; overflow: hidden;
  border-radius: 0; box-shadow: none; padding: calc(12px + env(safe-area-inset-top)) 16px calc(10px + env(safe-area-inset-bottom));
  animation: mmd-blatt-auf 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.mmd-berater-blatt.mmd-blatt-voll .mmd-berater-karte::before { display: none; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-berater-kopf { flex: none; order: 0; padding-right: 48px; margin-bottom: 8px; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-berater-kopf .mmd-berater-avatar { width: 42px; height: 42px; }
.mmd-berater-blatt.mmd-blatt-voll #mmd-berater-zu { top: calc(10px + env(safe-area-inset-top)); right: 12px; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-berater-aktionen { flex: none; order: 1; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(13, 13, 13, 0.08); }
.mmd-berater-blatt.mmd-blatt-voll .mmd-chat { order: 2; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; margin: 0; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-chat[hidden] { display: none; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-chat-verlauf {
  flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
}
.mmd-berater-blatt.mmd-blatt-voll.mmd-blatt-tastatur .mmd-chat-verlauf { max-height: none; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-chat-form { flex: none; margin-top: 8px; }
.mmd-berater-blatt.mmd-blatt-voll .mmd-chat-interstitial { order: 3; }

.mmd-berater-blatt.mmd-blatt-voll #mmd-berater-zu:focus:not(:focus-visible) { outline: none; box-shadow: none; }