/* ==========================================================================
   Puels.legal · "Frag Jonas" KI-Chat
   Premium-Floating-Button + Modal mit Suggested-Questions
   ========================================================================== */

/* --------------------------- Floating button --------------------------- */
#pl-ai-btn {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 2147482000;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  /* Runder Icon-Button ohne Text */
  width: 60px;
  height: 60px;
  padding: 0;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy, #14213D) 0%, var(--navy-hover, #1F3158) 100%);
  color: var(--text-on-dark, #F5F2EA);
  cursor: pointer;
  box-shadow:
    0 12px 28px -10px rgba(15,17,21,0.40),
    0 4px 12px -4px rgba(176,136,86,0.35),
    0 0 0 1px rgba(255,255,255,0.06) inset;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease,
              background 0.4s ease;
  isolation: isolate;
  /* WICHTIG: sichtbar, damit Status-Punkt + Tipp-Punkte über den Rand
     hinausragen dürfen (sich mit dem Symbol „schneiden"). */
  overflow: visible;
}

#pl-ai-btn:hover {
  transform: translateY(-3px) scale(1.04);
  background: linear-gradient(135deg, var(--navy-hover, #1F3158) 0%, var(--navy, #14213D) 100%);
  box-shadow:
    0 18px 38px -10px rgba(15,17,21,0.50),
    0 8px 18px -4px rgba(176,136,86,0.50),
    0 0 0 1px rgba(255,255,255,0.10) inset;
}

#pl-ai-btn .pl-ai-btn-icon {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  background: var(--navy, #14213D);
  flex: 0 0 auto;
}
#pl-ai-btn .pl-ai-btn-icon picture,
#pl-ai-btn .pl-ai-btn-icon img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;
  border-radius: 50%;
}

/* Label entfernt — falls noch im DOM, sicher ausblenden */
#pl-ai-btn .pl-ai-btn-label { display: none !important; }

/* Grüner Status-Punkt unten rechts, überlappt den Button-Rand */
#pl-ai-btn .pl-ai-btn-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #2BA876;
  border: 2.5px solid var(--navy, #14213D);
  box-shadow: 0 0 0 0 rgba(43,168,118,0.6);
  animation: pl-ai-online-pulse 2.2s ease-out infinite;
}

/* Drei sich bewegende Punkte oben rechts (Dauer-Animation) */
#pl-ai-btn .pl-ai-btn-typing {
  position: absolute;
  top: -7px;
  right: -7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 6px;
  border-radius: 100px;
  background: var(--gold, #B08856);
  box-shadow: 0 3px 8px -2px rgba(15,17,21,0.30);
}
#pl-ai-btn .pl-ai-btn-typing i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
  display: inline-block;
  animation: pl-ai-btn-bounce 1.2s ease-in-out infinite;
}
#pl-ai-btn .pl-ai-btn-typing i:nth-child(2) { animation-delay: 0.18s; }
#pl-ai-btn .pl-ai-btn-typing i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pl-ai-btn-bounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.6; }
  40%           { transform: translateY(-3px); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  #pl-ai-btn .pl-ai-btn-status,
  #pl-ai-btn .pl-ai-btn-typing i { animation: none; }
}

@media (max-width: 520px) {
  #pl-ai-btn {
    right: 1rem; bottom: 1rem;
    width: 54px; height: 54px;
  }
  #pl-ai-btn .pl-ai-btn-icon { width: 100%; height: 100%; }

  /* Modal nimmt auf Mobile fast den ganzen Bildschirm ein — größere
     Karte, mehr Inhalt sichtbar, dabei immer mit Safe-Area-Abstand
     oben (Statusbar/Notch) und unten (Home-Indicator).
     Größen-Strategie:
       vh  = Fallback für sehr alte Browser
       dvh = berücksichtigt iOS-Adressbar, ändert sich aber beim Auf-/Einklappen
       svh = SMALL viewport height: bleibt KONSTANT, egal ob die Adressbar
             ein- oder ausgeklappt ist — dadurch wird die Karte nicht mehr
             „lebendig" größer/kleiner. svh ist die letzte (gewinnende) Regel
             auf modernen Browsern (iOS 15.4+, Chrome 108+); ältere fallen
             automatisch auf dvh bzw. vh zurück. */
  #pl-ai-modal {
    padding: 0.4rem 0.4rem max(0.4rem, env(safe-area-inset-bottom, 0px)) !important;
    padding-top: max(2.5rem, env(safe-area-inset-top, 0px)) !important;
    align-items: flex-end !important;
    justify-content: center !important;
  }
  #pl-ai-modal .pl-ai-card {
    width: calc(100% - 0.8rem) !important;
    max-width: none !important;
    height: 90vh !important;
    height: 90dvh !important;
    height: 90svh !important;
    max-height: 90vh !important;
    max-height: 90dvh !important;
    max-height: 90svh !important;
    border-radius: 18px !important;
    margin-bottom: 0 !important;
  }
  /* Schließen-Button noch deutlicher sichtbar auf Mobile */
  #pl-ai-modal .pl-ai-close {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.24);
  }
  #pl-ai-modal .pl-ai-close svg { width: 20px; height: 20px; stroke-width: 2.6; }
  /* Header mit mehr vertikalem Raum, damit Titel + Untertitel
     im blauen Bereich nicht oben/unten abgeschnitten wirken.
     WICHTIG: overflow: visible — sonst clipt eine spätere
     generische .pl-ai-head-Regel (mit overflow:hidden) die
     Descender-Glyphen (g, p, j) am unteren Rand. */
  body #pl-ai-modal .pl-ai-head {
    padding: 1.4rem 1.1rem 1.35rem !important;
    align-items: center !important;
    gap: 0.7rem !important;
    overflow: visible !important;
    min-height: 0;
  }
  body #pl-ai-modal .pl-ai-titles {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    min-width: 0;
    overflow: visible !important;
  }
  body #pl-ai-modal .pl-ai-titles strong {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    display: block !important;
    padding: 0.05rem 0 !important;
  }
  body #pl-ai-modal .pl-ai-titles small {
    font-size: 0.74rem !important;
    line-height: 1.45 !important;
    display: block !important;
    color: rgba(255,255,255,0.7) !important;
    padding: 0.05rem 0 !important;
  }
  #pl-ai-modal .pl-ai-msgs { padding: 1rem 0.95rem 0.4rem; }
  #pl-ai-modal .pl-ai-form { padding: 0.85rem 0.95rem; }
}

/* --------------------------------- Modal ------------------------------- */
#pl-ai-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482800;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: clamp(1rem, 3vw, 2rem);
  pointer-events: none;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
}
#pl-ai-modal[hidden] { display: none !important; }

#pl-ai-modal .pl-ai-overlay {
  position: absolute;
  inset: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  pointer-events: auto;
  animation: pl-ai-fade 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes pl-ai-fade { from { opacity: 0; } }

#pl-ai-modal .pl-ai-card {
  position: relative;
  width: min(440px, 100%);
  /* Feste Höhe, damit die Karte von Anfang an dieselbe Größe hat und
     nicht erst klein startet und dann mit dem Inhalt mitwächst. Der
     Nachrichtenbereich (.pl-ai-msgs) füllt den Rest und scrollt.
     Höher angesetzt, damit auf der Website mehr Gesprächsverlauf
     sichtbar ist. */
  height: min(780px, calc(100vh - 2.5rem));
  max-height: min(780px, calc(100vh - 2.5rem));
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1px solid var(--border, #E6E0D2);
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 28px 60px -20px rgba(15,17,21,0.40),
    0 12px 24px -6px rgba(15,17,21,0.16);
  pointer-events: auto;
  /* Fließendes, weiches Aufgleiten — sanfte Ease-Out-Kurve ohne
     Überschwingen, etwas länger für ein elegantes Gefühl. */
  animation: pl-ai-rise 0.62s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
}
@keyframes pl-ai-rise {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Head */
#pl-ai-modal .pl-ai-head {
  /* NICHT schrumpfen: der blaue Kopf behält immer seine Anfangsgröße,
     egal wie viel im Chat steht. Nur der Nachrichtenbereich scrollt. */
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.1rem;
  background:
    radial-gradient(220px 80px at 0% 0%, rgba(212,179,106,0.16), transparent 70%),
    var(--navy, #14213D);
  color: #FFFFFF;
}
#pl-ai-modal .pl-ai-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright, #D4B36A), var(--gold, #B08856));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  position: relative;
}
/* (obsolet: weißer Status-Punkt entfernt — es gilt nur .pl-ai-avatar-status, grün) */
@keyframes pl-ai-avatar-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%      { box-shadow: 0 0 0 6px rgba(255,255,255,0.18); }
}
#pl-ai-modal .pl-ai-titles {
  display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0;
}
#pl-ai-modal .pl-ai-titles strong { font-size: 0.94rem; font-weight: 700; }
#pl-ai-modal .pl-ai-titles small {
  font-size: 0.74rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.1rem;
  line-height: 1.3;
}
/* Status-Zeile: grüner pulsierender Punkt · Online · antwortet sofort */
#pl-ai-modal .pl-ai-status {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.74rem;
  color: rgba(255,255,255,0.72);
}
#pl-ai-modal .pl-ai-status-dot {
  /* inline-block, damit der Punkt auch dann sichtbar ist, wenn das
     <small> auf Mobile per display:block gesetzt wird (inline-Elemente
     ignorieren width/height — inline-block nicht). */
  display: inline-block;
  vertical-align: middle;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #2BA876;
  box-shadow: 0 0 0 0 rgba(43,168,118,0.6);
  animation: pl-ai-online-pulse 2.2s ease-out infinite;
}
#pl-ai-modal .pl-ai-status-online {
  font-weight: 600;
  color: #6FE0B0;
}
#pl-ai-modal .pl-ai-status-sep { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  #pl-ai-modal .pl-ai-status-dot { animation: none; }
}
#pl-ai-modal .pl-ai-close {
  appearance: none; border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff; width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; flex: 0 0 auto;
  transition: background 0.2s ease, transform 0.2s ease;
}
#pl-ai-modal .pl-ai-close svg {
  width: 18px; height: 18px;
  stroke-width: 2.4;
}
#pl-ai-modal .pl-ai-close:hover {
  background: rgba(255,255,255,0.32);
  transform: scale(1.05);
}
#pl-ai-modal .pl-ai-close:active { transform: scale(0.95); }

/* Messages */
#pl-ai-modal .pl-ai-msgs {
  flex: 1 1 auto;
  /* min-height:0 ist entscheidend: ohne das weigert sich ein Flex-Item,
     unter seine Inhaltshöhe zu schrumpfen — dann wächst der Bereich über
     die Karte hinaus und drückt/staucht den blauen Kopf. Mit min-height:0
     scrollt stattdessen nur dieser Bereich, Kopf bleibt fix. */
  min-height: 0;
  overflow-y: auto;
  padding: 1.25rem 1.1rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--bg-cream, #F8F5EC);
}
#pl-ai-modal .pl-ai-msg {
  max-width: 85%;
  padding: 0.7rem 0.95rem;
  border-radius: 14px;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
#pl-ai-modal .pl-ai-msg-bot {
  background: #FFFFFF;
  border: 1px solid var(--border-soft, #EFEBDE);
  align-self: flex-start;
  color: var(--text, #1A2535);
  border-bottom-left-radius: 4px;
}
#pl-ai-modal .pl-ai-msg-user {
  background: var(--navy, #14213D);
  color: #FFFFFF;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
#pl-ai-modal .pl-ai-msg p { margin: 0; }

/* Suggestions */
#pl-ai-modal .pl-ai-suggestions {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#pl-ai-modal .pl-ai-suggestions-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold, #B08856);
  margin: 0.2rem 0 0.15rem;
}
#pl-ai-modal .pl-ai-suggest {
  appearance: none;
  text-align: left;
  background: #FFFFFF;
  border: 1px solid var(--border, #E6E0D2);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text, #1A2535);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
#pl-ai-modal .pl-ai-suggest:hover {
  border-color: var(--gold, #B08856);
  background: #FFFFFF;
  transform: translateX(2px);
}

/* Quick-Reply-Chips (Folgefragen nach einer Bot-Antwort) ---------------- */
#pl-ai-modal .pl-ai-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.15rem 0 0.35rem;
  align-self: flex-start;
  max-width: 92%;
  /* sanft einblenden */
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#pl-ai-modal .pl-ai-chips.pl-ai-chips-in {
  opacity: 1;
  transform: translateY(0);
}
#pl-ai-modal .pl-ai-chip {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--navy, #14213D);
  background: #FFFFFF;
  border: 1px solid rgba(176, 136, 86, 0.40);
  border-radius: 100px;
  padding: 0.46rem 0.85rem;
  box-shadow: 0 2px 8px -4px rgba(15, 17, 21, 0.12);
  transition: background 0.2s ease, border-color 0.2s ease,
              color 0.2s ease, transform 0.2s ease;
}
#pl-ai-modal .pl-ai-chip::before {
  content: "";
  display: inline-block;
  width: 5px; height: 5px;
  margin-right: 0.45rem;
  border-radius: 50%;
  background: var(--gold, #B08856);
  vertical-align: middle;
}
#pl-ai-modal .pl-ai-chip:hover {
  background: var(--navy, #14213D);
  border-color: var(--navy, #14213D);
  color: #FFFFFF;
  transform: translateY(-1px);
}
#pl-ai-modal .pl-ai-chip:hover::before { background: var(--gold-bright, #D4B36A); }
#pl-ai-modal .pl-ai-chip:active { transform: translateY(0) scale(0.97); }

/* Upload-Chip (Foto/PDF) — Navy-gefüllt mit Büroklammer statt Punkt */
#pl-ai-modal .pl-ai-chip-upload {
  background: var(--navy, #14213D);
  color: #FFFFFF;
  border-color: var(--navy, #14213D);
}
#pl-ai-modal .pl-ai-chip-upload::before {
  content: "📎";
  width: auto; height: auto;
  background: none;
  border-radius: 0;
  margin-right: 0.4rem;
  font-size: 0.9rem;
  line-height: 1;
}
#pl-ai-modal .pl-ai-chip-upload:hover {
  background: #1F3158;
  border-color: #1F3158;
  color: #FFFFFF;
}
#pl-ai-modal .pl-ai-chip-upload:hover::before { background: none; }

@media (prefers-reduced-motion: reduce) {
  #pl-ai-modal .pl-ai-chips { transition: none; opacity: 1; transform: none; }
}

/* Kategorie-Auswahl nach der Begrüßung -------------------------------- */
#pl-ai-modal .pl-ai-cats {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 0.6rem;
  align-self: stretch;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#pl-ai-modal .pl-ai-cats.pl-ai-cats-in { opacity: 1; transform: translateY(0); }
#pl-ai-modal .pl-ai-cat {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1rem;
  border-radius: 14px;
  border: 1px solid var(--border, #E6E0D2);
  background: #FFFFFF;
  color: var(--navy, #14213D);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  box-shadow: 0 3px 12px -6px rgba(15, 17, 21, 0.10);
  transition: border-color 0.22s ease, background 0.22s ease,
              color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}
#pl-ai-modal .pl-ai-cat-label { flex: 1 1 auto; min-width: 0; }
#pl-ai-modal .pl-ai-cat-arrow {
  width: 18px; height: 18px;
  flex: 0 0 auto;
  color: var(--gold, #B08856);
  transition: transform 0.22s ease, color 0.22s ease;
}
#pl-ai-modal .pl-ai-cat:hover {
  border-color: var(--gold, #B08856);
  background: var(--navy, #14213D);
  color: #FFFFFF;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -10px rgba(20, 33, 61, 0.40);
}
#pl-ai-modal .pl-ai-cat:hover .pl-ai-cat-arrow {
  color: var(--gold-bright, #D4B36A);
  transform: translateX(3px);
}
#pl-ai-modal .pl-ai-cat:active { transform: translateY(0) scale(0.99); }

/* "Oder schildern Sie Ihr Anliegen frei." — dezenter Hinweis aufs Eingabefeld */
#pl-ai-modal .pl-ai-cat-free {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: none;
  border: 0;
  margin: 0.25rem 0 0;
  padding: 0.35rem 0.25rem;
  align-self: center;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-muted, #5C6878);
  text-decoration: underline;
  text-decoration-color: rgba(176, 136, 86, 0.45);
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}
#pl-ai-modal .pl-ai-cat-free:hover {
  color: var(--gold, #B08856);
  text-decoration-color: var(--gold, #B08856);
}

@media (prefers-reduced-motion: reduce) {
  #pl-ai-modal .pl-ai-cats { transition: none; opacity: 1; transform: none; }
  #pl-ai-modal .pl-ai-cat,
  #pl-ai-modal .pl-ai-cat-arrow { transition: none; }
}

/* Typing indicator + Label "Der Assistent schreibt …" */
#pl-ai-modal .pl-ai-msg-typing-wrap {
  align-self: flex-start;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 92%;
}
#pl-ai-modal .pl-ai-typing-label {
  font-size: 0.72rem;
  font-style: italic;
  color: var(--text-muted, #5C6878);
  white-space: nowrap;
  opacity: 0.85;
}
#pl-ai-modal .pl-ai-msg-typing p {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
#pl-ai-modal .pl-ai-msg-typing .t {
  width: 6px; height: 6px;
  background: var(--gold, #B08856);
  border-radius: 50%;
  opacity: 0.4;
  animation: pl-ai-typing 1.2s infinite ease-in-out;
}
#pl-ai-modal .pl-ai-msg-typing .t:nth-child(2) { animation-delay: 0.15s; }
#pl-ai-modal .pl-ai-msg-typing .t:nth-child(3) { animation-delay: 0.3s; }
@keyframes pl-ai-typing {
  0%, 100% { transform: translateY(0); opacity: 0.4; }
  50%      { transform: translateY(-4px); opacity: 1; }
}

/* Form */
#pl-ai-modal .pl-ai-form {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.1rem;
  background: #FFFFFF;
  border-top: 1px solid var(--border-soft, #EFEBDE);
}
#pl-ai-modal .pl-ai-input {
  flex: 1 1 auto;
  appearance: none;
  border: 1px solid var(--border, #E6E0D2);
  border-radius: 100px;
  padding: 0.65rem 0.95rem;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif);
  /* MUSS 16px sein — sonst zoomt iOS Safari beim Fokus automatisch
     in die ganze Seite rein und zoomt nicht sauber wieder zurück. */
  font-size: 16px;
  color: var(--text, #1A2535);
  background: var(--bg-cream, #F8F5EC);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#pl-ai-modal .pl-ai-input:focus {
  border-color: var(--gold, #B08856);
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(176,136,86,0.18);
}
#pl-ai-modal .pl-ai-send {
  appearance: none;
  border: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright, #D4B36A), var(--gold, #B08856));
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  box-shadow: 0 4px 12px -2px rgba(176,136,86,0.40);
}
#pl-ai-modal .pl-ai-send:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 8px 18px -2px rgba(176,136,86,0.55);
}

/* Footer */
#pl-ai-modal .pl-ai-foot {
  flex: 0 0 auto;
  padding: 0.7rem 1.1rem 0.95rem;
  background: #FFFFFF;
  border-top: 1px solid var(--border-soft, #EFEBDE);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
#pl-ai-modal .pl-ai-disclaimer {
  font-size: 0.72rem;
  line-height: 1.4;
  color: var(--text-muted, #5C6878);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
#pl-ai-modal .pl-ai-disc-text { flex: 1 1 auto; min-width: 0; }
#pl-ai-modal .pl-ai-disc-ack {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 0.05rem;
  border-radius: 50%;
  border: 1.5px solid rgba(176, 136, 86, 0.55);
  background: #FFFFFF;
  color: var(--gold, #B08856);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
#pl-ai-modal .pl-ai-disc-ack:hover {
  background: rgba(176, 136, 86, 0.12);
  transform: scale(1.08);
}
/* Bestätigt: Haken grün/gefüllt, Text ist bereits minimiert */
#pl-ai-modal .pl-ai-disclaimer.is-ack {
  align-items: center;
  color: rgba(20, 33, 61, 0.45);
}
#pl-ai-modal .pl-ai-disclaimer.is-ack .pl-ai-disc-ack {
  background: #2BA876;
  border-color: #2BA876;
  color: #FFFFFF;
  cursor: default;
  pointer-events: none;
}
#pl-ai-modal .pl-ai-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy, #14213D);
  text-decoration: none;
  align-self: flex-start;
  border-bottom: 1.5px solid var(--gold, #B08856);
  padding-bottom: 1px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
#pl-ai-modal .pl-ai-cta:hover {
  color: var(--gold, #B08856);
}

@media (max-width: 520px) {
  #pl-ai-modal { padding: 0; }
  #pl-ai-modal .pl-ai-card {
    width: 100%;
    max-height: 100vh;
    border-radius: 0;
    border: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #pl-ai-btn, #pl-ai-modal .pl-ai-card,
  #pl-ai-btn .pl-ai-btn-sparkle, #pl-ai-modal .pl-ai-avatar span,
  #pl-ai-modal .pl-ai-msg-typing .t { animation: none !important; transition: none !important; }
}


/* ==========================================================================
   Always-on floating chatbot — guaranteed bottom-right on every page
   ========================================================================== */

/* Hard-lock the floating button so no other rule can hide or displace it */
#pl-ai-btn {
  position: fixed !important;
  right: 1.5rem !important;
  bottom: 1.5rem !important;
  z-index: 2147482000 !important;
  pointer-events: auto !important;
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* When the urgent kuendigung-bar slides up, push the chatbot above it */
body.urgent-shown #pl-ai-btn {
  bottom: calc(1.5rem + 56px) !important;
  transition: bottom 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (max-width: 520px) {
  #pl-ai-btn {
    right: 1rem !important;
    bottom: 1rem !important;
  }
  body.urgent-shown #pl-ai-btn {
    bottom: calc(1rem + 64px) !important;
  }
}

/* Print: hide the floating button */
@media print {
  #pl-ai-btn,
  #pl-ai-modal { display: none !important; }
}


/* ==========================================================================
   Modal — JS-pinning Override
   Wenn position:fixed durch einen Containing-Block-Ancestor kaputt ist, faellt
   das JS auf position:absolute mit scrollY-basierter Positionierung zurueck.
   Diese Regel sichert, dass die !important-Inline-Styles immer greifen.
   ========================================================================== */
#pl-ai-modal {
  position: fixed;
  inset: 0;
  z-index: 2147482001;
}

/* Body-Scroll-Lock waehrend Modal offen — NUR auf Mobil (≤768px). Auf dem
   Desktop soll die Seite weiterscrollen koennen, auch wenn der Chatbot offen
   ist (das Modal liegt einfach per position:fixed darueber). Die Fixierung +
   Positionserhalt auf Mobil passiert in JS (body position:fixed mit
   top:-scrollY). Hier nur die overflow-Sperre. */
@media (max-width: 768px) {
  html.pl-ai-open {
    overflow: hidden !important;
  }
}

/* Ensure modal layer is above everything else, even fallback button */
#pl-ai-modal:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================ Avatar (Foto) ============================== */
#pl-ai-modal .pl-ai-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 50%;
  overflow: visible;
  background: var(--navy, #14213D);
  padding: 0;
  box-shadow:
    0 0 0 2px var(--gold, #B08856),
    0 8px 18px -6px rgba(212,179,106,0.45);
}
#pl-ai-modal .pl-ai-avatar picture,
#pl-ai-modal .pl-ai-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
}
#pl-ai-modal .pl-ai-avatar-status {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  background: #2BA876;
  border: 2px solid #14213D;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(43, 168, 118, 0.6);
  animation: pl-ai-online-pulse 2.4s ease-out infinite;
}
@keyframes pl-ai-online-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(43,168,118,0.65); }
  70%  { box-shadow: 0 0 0 8px rgba(43,168,118,0); }
  100% { box-shadow: 0 0 0 0   rgba(43,168,118,0); }
}

/* ==========================================================================
   Premium Polish — header, bubbles, suggestions, input, animations
   ========================================================================== */

/* Header — more premium */
#pl-ai-modal .pl-ai-head {
  padding: 1.1rem 1.25rem !important;
  gap: 0.85rem !important;
  background: linear-gradient(135deg, #14213D 0%, #1F3158 100%) !important;
  position: relative;
  overflow: hidden;
}
#pl-ai-modal .pl-ai-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 140px at 90% 50%, rgba(212,179,106,0.20), transparent 60%);
  pointer-events: none;
}
#pl-ai-modal .pl-ai-titles {
  position: relative;
  z-index: 1;
}
#pl-ai-modal .pl-ai-titles strong {
  font-size: 1.02rem !important;
  letter-spacing: -0.005em !important;
  font-weight: 700 !important;
}
#pl-ai-modal .pl-ai-titles small {
  font-size: 0.78rem !important;
  opacity: 0.72;
  margin-top: 0.1rem;
  display: block;
}

#pl-ai-modal .pl-ai-close {
  position: relative;
  z-index: 1;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.08) !important;
  transition: background 0.25s ease, transform 0.25s ease !important;
}
#pl-ai-modal .pl-ai-close:hover {
  background: rgba(255,255,255,0.18) !important;
  transform: rotate(90deg) scale(1.05);
}

/* Card itself — softer shadow & rounder corners */
#pl-ai-modal .pl-ai-card {
  border-radius: 22px !important;
  box-shadow:
    0 32px 80px -20px rgba(15,17,21,0.45),
    0 12px 32px -8px rgba(15,17,21,0.30),
    0 0 0 1px rgba(176,136,86,0.08) !important;
  overflow: hidden;
}

/* Message bubbles — finer typography */
#pl-ai-modal .pl-ai-msg p {
  font-size: 0.93rem !important;
  line-height: 1.55 !important;
  letter-spacing: 0.005em;
}
#pl-ai-modal .pl-ai-msg-bot {
  background: #FFFFFF !important;
  border: 1px solid rgba(176,136,86,0.14) !important;
  box-shadow: 0 4px 14px -8px rgba(15,17,21,0.10) !important;
  border-radius: 18px 18px 18px 6px !important;
  padding: 0.85rem 1rem !important;
  max-width: 86%;
}
#pl-ai-modal .pl-ai-msg-user {
  background: linear-gradient(135deg, #14213D, #1F3158) !important;
  border-radius: 18px 18px 6px 18px !important;
  padding: 0.75rem 0.95rem !important;
  max-width: 80%;
  margin-left: auto;
  box-shadow: 0 6px 16px -6px rgba(15,17,21,0.30);
}
#pl-ai-modal .pl-ai-msg-bot p { color: #14213D !important; }
#pl-ai-modal .pl-ai-msg-user p { color: #F5F2EA !important; }

/* Typing indicator (3 animated dots) — wird vom JS als .pl-ai-typing eingehängt */
#pl-ai-modal .pl-ai-typing {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.7rem 0.95rem;
  background: #FFFFFF;
  border: 1px solid rgba(176,136,86,0.14);
  border-radius: 18px 18px 18px 6px;
  box-shadow: 0 4px 14px -8px rgba(15,17,21,0.10);
}
#pl-ai-modal .pl-ai-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold, #B08856);
  opacity: 0.55;
  animation: pl-ai-bounce 1.2s ease-in-out infinite;
}
#pl-ai-modal .pl-ai-typing span:nth-child(2) { animation-delay: 0.15s; }
#pl-ai-modal .pl-ai-typing span:nth-child(3) { animation-delay: 0.30s; }
@keyframes pl-ai-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30%           { transform: translateY(-5px); opacity: 1; }
}

/* Suggested questions — subtle border, softer hover */
#pl-ai-modal .pl-ai-suggest {
  background: #FFFFFF !important;
  border: 1px solid rgba(176,136,86,0.18) !important;
  border-radius: 14px !important;
  padding: 0.7rem 0.9rem !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.005em !important;
  color: #14213D !important;
  text-align: left !important;
  cursor: pointer;
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important;
}
#pl-ai-modal .pl-ai-suggest:hover {
  border-color: var(--gold, #B08856) !important;
  transform: translateX(3px) !important;
  box-shadow: 0 6px 14px -6px rgba(176,136,86,0.30) !important;
}

/* Input bar — softer, finer */
#pl-ai-modal .pl-ai-input-row {
  border-top: 1px solid rgba(176,136,86,0.14) !important;
  padding: 0.85rem 1rem !important;
  background: #FFFFFF !important;
}
#pl-ai-modal input.pl-ai-input,
#pl-ai-modal .pl-ai-input {
  background: #FAF7F0 !important;
  border: 1px solid rgba(176,136,86,0.20) !important;
  border-radius: 100px !important;
  padding: 0.7rem 1rem !important;
  /* WICHTIG: 16px = MINDEST-Schriftgröße, damit iOS Safari beim
     Fokussieren NICHT automatisch in die ganze Seite reinzoomt.
     Auf Desktop sieht 16px im runden Eingabefeld immer noch gut aus. */
  font-size: 16px !important;
  font-family: var(--font-sans, "Inter", system-ui, sans-serif) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
  touch-action: manipulation;
}
#pl-ai-modal .pl-ai-input:focus {
  outline: none !important;
  border-color: var(--gold, #B08856) !important;
  box-shadow: 0 0 0 3px rgba(212,179,106,0.20) !important;
}

/* Send button — premium glow */
#pl-ai-modal .pl-ai-send {
  width: 42px !important;
  height: 42px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--gold-bright, #D4B36A) 0%, var(--gold, #B08856) 100%) !important;
  box-shadow: 0 6px 14px -4px rgba(176,136,86,0.45) !important;
}
#pl-ai-modal .pl-ai-send:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 12px 22px -4px rgba(176,136,86,0.55) !important;
}

/* Disclaimer — gentler tone */
#pl-ai-modal .pl-ai-disclaimer {
  font-size: 0.74rem !important;
  color: rgba(20,33,61,0.60) !important;
  line-height: 1.55 !important;
  padding: 0.85rem 1.25rem 0 !important;
}

/* Booking-Link — gold underline */
#pl-ai-modal .pl-ai-booking {
  color: var(--gold, #B08856) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  border-bottom: 1.5px solid var(--gold, #B08856) !important;
  padding-bottom: 1px !important;
  display: inline-block !important;
  margin: 0.25rem 1.25rem 1rem !important;
  transition: color 0.25s ease !important;
}
#pl-ai-modal .pl-ai-booking:hover {
  color: var(--gold-bright, #D4B36A) !important;
}

/* Scroll-area subtle gradient mask at top */
#pl-ai-modal .pl-ai-msgs::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  height: 12px;
  background: linear-gradient(180deg, rgba(245,242,234,1), rgba(245,242,234,0));
  pointer-events: none;
  z-index: 1;
  margin-bottom: -12px;
}

@media (max-width: 520px) {
  #pl-ai-modal .pl-ai-avatar { width: 44px !important; height: 44px !important; }
  #pl-ai-modal .pl-ai-titles strong { font-size: 0.95rem !important; }
  #pl-ai-modal .pl-ai-card { border-radius: 18px 18px 0 0 !important; }
}

/* ============== Typing dots use existing markup .pl-ai-msg-typing ============== */
#pl-ai-modal .pl-ai-msg-typing { padding: 0.6rem 0.85rem !important; }
#pl-ai-modal .pl-ai-msg-typing p {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
#pl-ai-modal .pl-ai-msg-typing .t {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold, #B08856);
  opacity: 0.55;
  animation: pl-ai-bounce 1.2s ease-in-out infinite;
  display: inline-block;
}
#pl-ai-modal .pl-ai-msg-typing .t:nth-child(2) { animation-delay: 0.15s; }
#pl-ai-modal .pl-ai-msg-typing .t:nth-child(3) { animation-delay: 0.30s; }

/* ============== Smooth message reveal animation ============== */
#pl-ai-modal .pl-ai-msg-enter {
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.42s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
#pl-ai-modal .pl-ai-msg-enter.pl-ai-msg-enter-active {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   FIX (P0): Header-Text muss IMMER Cream/Weiss auf Navy sein
   ========================================================================== */
#pl-ai-modal .pl-ai-head,
#pl-ai-modal .pl-ai-head * {
  color: #F5F2EA !important;
}
#pl-ai-modal .pl-ai-head .pl-ai-titles strong {
  color: #FFFFFF !important;
  font-size: 1.04rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}
#pl-ai-modal .pl-ai-head .pl-ai-titles small {
  color: rgba(245, 242, 234, 0.80) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  display: block !important;
  margin-top: 0.15rem !important;
  line-height: 1.45 !important;
}
#pl-ai-modal .pl-ai-head .pl-ai-close {
  color: #F5F2EA !important;
}
#pl-ai-modal .pl-ai-head .pl-ai-close svg {
  stroke: #F5F2EA !important;
}

/* ==========================================================================
   FINAL OVERRIDE: Mobile header MUST be tall enough that the title
   "Frag Jonas" and subtitle never get visually clipped (descenders, top
   line). This block lives at the very end of the file so it wins on
   source-order against the premium variant above. We use html body for
   maximum specificity and !important on every property.
   ========================================================================== */
@media (max-width: 768px) {
  html body #pl-ai-modal .pl-ai-head {
    padding-top: 1.7rem !important;
    padding-right: 1.1rem !important;
    padding-bottom: 1.55rem !important;
    padding-left: 1.1rem !important;
    align-items: center !important;
    gap: 0.7rem !important;
    overflow: visible !important;
    min-height: 4.6rem !important;
    line-height: normal !important;
  }
  html body #pl-ai-modal .pl-ai-head::before {
    display: none !important;
  }
  html body #pl-ai-modal .pl-ai-titles {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0.1rem 0 !important;
  }
  html body #pl-ai-modal .pl-ai-titles strong {
    font-size: 0.96rem !important;
    line-height: 1.45 !important;
    display: block !important;
    overflow: visible !important;
    padding: 0.1rem 0 !important;
  }
  html body #pl-ai-modal .pl-ai-titles small {
    font-size: 0.76rem !important;
    line-height: 1.5 !important;
    display: block !important;
    overflow: visible !important;
    padding: 0.05rem 0 0.1rem !important;
    color: rgba(245, 242, 234, 0.80) !important;
  }

  /* ----------------------------------------------------------------
     iOS-Auto-Zoom-Fix: Wenn ein Input auf iOS Safari font-size < 16px
     hat, zoomt Safari automatisch beim Fokus rein und zoomt NICHT
     immer sauber wieder raus, wenn das Modal geschlossen wird. Folge:
     die Website wirkt nach dem Schließen vergrößert.
     Lösung: das Input-Feld bekommt auf Mobile exakt 16px font-size.
     ---------------------------------------------------------------- */
  html body #pl-ai-modal input.pl-ai-input,
  html body #pl-ai-modal .pl-ai-input {
    font-size: 16px !important;
    line-height: 1.4 !important;
  }
  /* Send-Button etwas größer für besseres Antippen */
  html body #pl-ai-modal .pl-ai-send {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
  }
  /* Form-Bar etwas mehr Luft */
  html body #pl-ai-modal .pl-ai-form,
  html body #pl-ai-modal .pl-ai-input-row {
    padding: 0.7rem 0.85rem max(0.7rem, env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Messages-Bereich bekommt mehr Platz, Bubbles dürfen breiter werden */
  html body #pl-ai-modal .pl-ai-msgs {
    padding: 0.85rem 0.9rem 0.5rem !important;
    gap: 0.7rem !important;
  }
  html body #pl-ai-modal .pl-ai-msg {
    max-width: 88% !important;
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
  }
  html body #pl-ai-modal .pl-ai-msg p {
    font-size: 0.94rem !important;
    line-height: 1.5 !important;
  }
  /* Suggestion-Buttons besser tappbar */
  html body #pl-ai-modal .pl-ai-suggest {
    padding: 0.8rem 0.95rem !important;
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
}

/* ==========================================================================
   Header-Actions: "Neues Gespräch"-Button (Reset) neben dem Schließen-X
   ========================================================================== */
#pl-ai-modal .pl-ai-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  position: relative;
  z-index: 2;
}
#pl-ai-modal .pl-ai-reset {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: rgba(255, 255, 255, 0.12);
  color: #F5F2EA;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.25s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
#pl-ai-modal .pl-ai-reset svg {
  width: 17px;
  height: 17px;
  stroke: #F5F2EA;
}
#pl-ai-modal .pl-ai-reset:hover {
  background: rgba(255, 255, 255, 0.22);
  transform: rotate(-180deg);
}
#pl-ai-modal .pl-ai-reset:active { transform: rotate(-180deg) scale(0.92); }

@media (prefers-reduced-motion: reduce) {
  #pl-ai-modal .pl-ai-reset { transition: background 0.2s ease; }
  #pl-ai-modal .pl-ai-reset:hover { transform: none; }
}

/* Mobile: Buttons etwas größer fürs Antippen */
@media (max-width: 768px) {
  html body #pl-ai-modal .pl-ai-reset {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.18);
  }
  html body #pl-ai-modal .pl-ai-reset svg { width: 19px; height: 19px; }
}

/* Klickbare Links in Bot-Nachrichten (z. B. Calendly-Termin). */
#pl-ai-modal .pl-ai-msgs a { color: #2BA876; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
#pl-ai-modal .pl-ai-msgs a:hover { color: #14213D; }

/* Calendly-Kalender direkt im Chat (Inline-Embed, kein neues Fenster). */
#pl-ai-modal .pl-ai-cal-wrap { width: 100%; margin: 0.5rem 0; }
#pl-ai-modal .pl-ai-cal-wrap .calendly-inline-widget { width: 100%; border-radius: 12px; overflow: hidden; background: #fff; }
#pl-ai-modal .pl-ai-cal-wrap a { display: inline-block; padding: 0.6rem 0.9rem; color: #2BA876; font-weight: 700; text-decoration: underline; }

/* Chatbot vergrößern, sobald der Calendly-Kalender im Chat geöffnet wird.
   Desktop: Karte füllt den verfügbaren Bereich des Modals voll aus
   (Seitenränder = clamp(1rem, 3vw, 2rem) vom Modal-Padding); Modal-
   Justify wechselt für diesen Zustand auf „center", damit links und
   rechts identische Abstände entstehen. */
#pl-ai-modal .pl-ai-card { transition: width .3s ease, height .3s ease, max-height .3s ease; }
#pl-ai-modal:has(.pl-ai-card.pl-ai-cal-open) {
  justify-content: center;
  align-items: center;
}
#pl-ai-modal .pl-ai-card.pl-ai-cal-open {
  width: 100%;
  max-width: none;
  height: calc(100vh - 2 * clamp(1rem, 3vw, 2rem));
  height: calc(100dvh - 2 * clamp(1rem, 3vw, 2rem));
  max-height: calc(100vh - 2 * clamp(1rem, 3vw, 2rem));
  max-height: calc(100dvh - 2 * clamp(1rem, 3vw, 2rem));
}
/* Desktop: Calendly soll ohne internes Scrollen passen. Dazu blenden wir
   beim Calendly-Modus die Chat-Eingabezeile aus (Iframe-Modus braucht sie
   nicht) und lassen das Iframe nahezu die volle Karten-Höhe einnehmen.
   Rechnung: Modal-Padding (~64px oben+unten) + Header (~70px) = 134px,
   plus ein Hauch Atmungsraum → 150px Reserve. */
@media (min-width: 521px) {
  #pl-ai-modal .pl-ai-card.pl-ai-cal-open .pl-ai-form { display: none !important; }
  #pl-ai-modal .pl-ai-card.pl-ai-cal-open .pl-ai-cal-wrap { margin: 0 !important; }
  #pl-ai-modal .pl-ai-card.pl-ai-cal-open .pl-ai-cal-wrap .calendly-inline-widget {
    height: calc(100vh - 150px) !important;
    height: calc(100dvh - 150px) !important;
    min-height: 700px;
  }
}
@media (max-width: 520px) {
  #pl-ai-modal .pl-ai-card.pl-ai-cal-open {
    width: calc(100% - 0.4rem) !important;
    /* Stabile Höhe mit svh (ändert sich nicht beim Ein-/Ausklappen der iOS-
       Adressleiste) — vh/dvh als Fallback für ältere Browser. */
    height: 96vh !important;
    height: 96dvh !important;
    height: 96svh !important;
    max-height: 96vh !important;
    max-height: 96dvh !important;
    max-height: 96svh !important;
  }
  /* Calendly-Kalender füllt auf Mobil den verfügbaren Bereich des Chat-Cards
     aus — kein „600px feste Höhe" mehr, das ständig nachgescrollt werden muss.
     So passt sich der Kalender dem Layout an, fühlt sich „fixiert" an, und der
     Nutzer scrollt nur noch innerhalb des Kalenders (Tagesauswahl). Die
     verbleibende Höhe = Card-Höhe (96svh) minus Header + Eingabezeile (~130px). */
  #pl-ai-modal .pl-ai-card.pl-ai-cal-open .pl-ai-cal-wrap {
    margin: 0 !important;
  }
  #pl-ai-modal .pl-ai-card.pl-ai-cal-open .pl-ai-cal-wrap .calendly-inline-widget {
    height: calc(96vh - 130px) !important;
    height: calc(96dvh - 130px) !important;
    height: calc(96svh - 130px) !important;
    min-height: 0 !important;
  }
}


/* Klicks auf die Webseite trotz geöffnetem Chatbot ermöglichen — NUR Desktop.
   Der Overlay über der ganzen Seite würde sonst alle Klicks abfangen. Auf
   Mobil (≤768px) bleibt das Verhalten wie bisher (Overlay fängt Klicks ab,
   sodass Tipps daneben nichts auf der Seite triggern). */
@media (min-width: 769px) {
  #pl-ai-modal .pl-ai-overlay {
    pointer-events: none;
  }
}