/* CarloMedia WhatsApp-Kontakt 1.3: keine externen Schriften oder Bilder.
   Jede Regel hängt an .cmwa, damit Theme-Stile für button, a, input und
   svg nicht durchschlagen. */
.cmwa{
  --cmwa-color:#1f7a4d; --cmwa-bottom:20px; --cmwa-side:20px; --cmwa-lift:0px;
  --cmwa-ink:#111b21; --cmwa-muted:#667781; --cmwa-line:#e3e6e8; --cmwa-chat:#efeae2;
  position:fixed; bottom:calc(var(--cmwa-bottom) + var(--cmwa-lift) + env(safe-area-inset-bottom, 0px));
  z-index:99990; display:flex; flex-direction:column; gap:14px;
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--cmwa-ink); max-width:calc(100vw - 2 * var(--cmwa-side));
  box-sizing:border-box; text-align:left; letter-spacing:normal; text-transform:none;
  transition:bottom .2s ease;
}
.cmwa *,.cmwa *::before,.cmwa *::after{box-sizing:border-box}
.cmwa svg{display:block; flex:0 0 auto; max-width:none; overflow:visible}
.cmwa p{margin:0; padding:0}
.cmwa button{
  margin:0; font:inherit; letter-spacing:normal; text-transform:none; text-shadow:none;
  min-width:0; min-height:0; width:auto; height:auto; -webkit-appearance:none; appearance:none;
}
.cmwa--right{right:var(--cmwa-side); align-items:flex-end}
.cmwa--left{left:var(--cmwa-side); align-items:flex-start}

/* ---------- Schwebender Button ---------- */
.cmwa .cmwa__toggle{
  display:flex; align-items:center; gap:12px; padding:0; border:0; background:none;
  cursor:pointer; color:var(--cmwa-ink); box-shadow:none; border-radius:999px;
}
.cmwa--left .cmwa__toggle{flex-direction:row-reverse}
.cmwa .cmwa__toggle-circle{
  position:relative; display:grid; place-items:center; width:60px; height:60px; border-radius:50%;
  background:var(--cmwa-color); color:#fff;
  box-shadow:0 6px 20px rgba(0,0,0,.20),0 2px 6px rgba(0,0,0,.12);
  transition:transform .2s ease, box-shadow .2s ease;
}
.cmwa .cmwa__toggle-circle > svg{grid-area:1/1; transition:opacity .2s ease, transform .25s ease}
.cmwa .cmwa__toggle-icon{width:30px; height:30px}
.cmwa .cmwa__toggle-x{width:22px; height:22px; opacity:0; transform:rotate(-90deg) scale(.6)}
.cmwa.is-open .cmwa__toggle-icon{opacity:0; transform:rotate(90deg) scale(.6)}
.cmwa.is-open .cmwa__toggle-x{opacity:1; transform:none}
.cmwa .cmwa__toggle:hover .cmwa__toggle-circle{transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.24),0 3px 8px rgba(0,0,0,.14)}
.cmwa .cmwa__toggle-label{
  display:none; padding:10px 16px; border-radius:999px; background:#fff; color:var(--cmwa-ink);
  font-size:14px; font-weight:600; line-height:1.3; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.14); max-width:300px; overflow:hidden; text-overflow:ellipsis;
}
@media (min-width:769px){ .cmwa--with-label .cmwa__toggle-label{display:block} }
.cmwa.is-open .cmwa__toggle-label{display:none}
.cmwa .cmwa__toggle:focus-visible{outline:none}
.cmwa .cmwa__toggle:focus-visible .cmwa__toggle-circle,
.cmwa .cmwa__close:focus-visible,.cmwa .cmwa__send:focus-visible,.cmwa-inline:focus-visible{outline:3px solid #2271b1; outline-offset:3px}

/* ---------- Fenster ---------- */
.cmwa .cmwa__panel{
  width:370px; max-width:100%; background:#fff; border-radius:18px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.22),0 6px 16px rgba(0,0,0,.10);
  display:flex; flex-direction:column;
  max-height:calc(100vh - var(--cmwa-bottom) - var(--cmwa-lift) - 100px);
  transform-origin:bottom right; animation:cmwa-in .22s cubic-bezier(.2,.8,.2,1);
}
.cmwa--left .cmwa__panel{transform-origin:bottom left}
.cmwa .cmwa__panel[hidden]{display:none}
@supports (height:100dvh){ .cmwa .cmwa__panel{max-height:calc(100dvh - var(--cmwa-bottom) - var(--cmwa-lift) - 100px)} }
@keyframes cmwa-in{from{opacity:0; transform:translateY(12px) scale(.96)} to{opacity:1; transform:none}}

.cmwa .cmwa__head{
  display:flex; align-items:center; gap:12px; padding:14px 12px 14px 16px;
  background:var(--cmwa-color); color:#fff; flex:0 0 auto;
}
.cmwa .cmwa__avatar{
  position:relative; display:grid; place-items:center; width:42px; height:42px; border-radius:50%;
  background:#fff; color:var(--cmwa-color); flex:0 0 auto;
}
.cmwa .cmwa__avatar-icon{width:24px; height:24px}
.cmwa .cmwa__avatar::after{ /* kleiner Punkt: Kanal erreichbar, kein Online-Versprechen */
  content:""; position:absolute; right:0; bottom:1px; width:11px; height:11px; border-radius:50%;
  background:#25d366; border:2px solid var(--cmwa-color);
}
.cmwa .cmwa__who{display:flex; flex-direction:column; min-width:0; flex:1 1 auto; line-height:1.25}
.cmwa .cmwa__title{font-weight:700; font-size:16px; color:#fff; overflow-wrap:anywhere}
.cmwa .cmwa__subtitle{font-size:13px; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cmwa .cmwa__close{
  display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; flex:0 0 auto; line-height:0; box-shadow:none;
  transition:background .15s ease;
}
.cmwa .cmwa__close:hover{background:rgba(255,255,255,.26); color:#fff}
.cmwa .cmwa__close svg{width:18px; height:18px}

.cmwa .cmwa__body{
  display:flex; flex-direction:column; gap:12px; padding:16px; overflow-y:auto; overscroll-behavior:contain;
  background:var(--cmwa-chat); flex:1 1 auto; min-height:0;
}
/* Fester Fußbereich: Häkchen und Weiter-Knopf bleiben immer sichtbar */
.cmwa .cmwa__foot{
  flex:0 0 auto; display:flex; flex-direction:column; gap:10px; padding:12px 16px 14px;
  background:#fff; border-top:1px solid var(--cmwa-line);
}
.cmwa .cmwa__bubble{
  position:relative; align-self:flex-start; max-width:92%; padding:9px 12px; background:#fff; color:var(--cmwa-ink);
  border-radius:0 12px 12px 12px; box-shadow:0 1px 1px rgba(0,0,0,.08); font-size:14.5px; overflow-wrap:anywhere;
}
.cmwa .cmwa__bubble::before{
  content:""; position:absolute; left:-7px; top:0; border-style:solid; border-width:0 8px 9px 0;
  border-color:transparent #fff transparent transparent;
}
.cmwa .cmwa__label{font-size:13px; font-weight:600; color:var(--cmwa-muted); margin:4px 0 -6px}
.cmwa .cmwa__msg{
  display:block; width:100%; min-height:116px; margin:0; padding:10px 12px; resize:vertical;
  font:inherit; font-size:15px; line-height:1.45; color:var(--cmwa-ink); background:#fff;
  border:1px solid var(--cmwa-line); border-radius:12px; box-shadow:none;
}
.cmwa .cmwa__msg::placeholder{color:#8a969c; opacity:1}
.cmwa .cmwa__msg,.cmwa .cmwa__msg:focus{border-width:1px; border-style:solid}
.cmwa .cmwa__msg:focus{outline:none; border-color:var(--cmwa-color) !important; box-shadow:0 0 0 3px color-mix(in srgb, var(--cmwa-color) 20%, transparent)}
.cmwa .cmwa__hint{font-size:12.5px; line-height:1.45; color:var(--cmwa-muted)}

.cmwa .cmwa__consent{
  display:flex; gap:10px; align-items:flex-start; margin:0; padding:2px 0 0; cursor:pointer;
  background:none; border:0; border-radius:8px;
  font-size:12.5px; line-height:1.45; font-weight:400; color:var(--cmwa-ink); overflow-wrap:anywhere;
}
.cmwa .cmwa__check{
  flex:0 0 auto; width:18px; height:18px; min-width:18px; margin:1px 0 0; padding:0; position:static; opacity:1;
  accent-color:var(--cmwa-color); cursor:pointer; -webkit-appearance:checkbox; appearance:auto;
}
.cmwa .cmwa__consent a{color:var(--cmwa-color); text-decoration:underline; font-weight:600}
.cmwa.is-nudge .cmwa__consent{color:#b32d2e; animation:cmwa-nudge .35s ease 2}
@keyframes cmwa-nudge{0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)}}

.cmwa .cmwa__send{
  display:flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 18px;
  border-radius:999px; background:#b8c0c4; color:#fff; font-size:15px; font-weight:700; line-height:1.2;
  text-decoration:none; text-align:center; cursor:not-allowed; box-shadow:none;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cmwa .cmwa__send:hover,.cmwa .cmwa__send:focus,.cmwa .cmwa__send:visited{color:#fff; text-decoration:none}
.cmwa .cmwa__send-icon{width:20px; height:20px}
.cmwa .cmwa__send.is-ready{background:var(--cmwa-color); cursor:pointer; box-shadow:0 4px 14px color-mix(in srgb, var(--cmwa-color) 35%, transparent)}
.cmwa .cmwa__send.is-ready:hover{transform:translateY(-1px)}
.cmwa .cmwa__alt{font-size:12px; line-height:1.4; color:var(--cmwa-muted); text-align:center}

/* ---------- Knopf aus dem Shortcode ---------- */
.cmwa-inline{
  display:inline-flex; align-items:center; gap:10px; min-height:46px; padding:10px 22px; margin:0;
  border:0; border-radius:999px; background:var(--cmwa-color,#1f7a4d); color:#fff;
  font:inherit; font-weight:600; line-height:1.2; cursor:pointer; max-width:100%; white-space:normal; text-align:left;
}
.cmwa-inline:hover{filter:brightness(1.07); color:#fff}
.cmwa-inline__icon{width:20px; height:20px; flex:0 0 auto; display:block}

/* ---------- Handy: Fenster als Blatt über die volle Breite ---------- */
@media (max-width:480px){
  .cmwa .cmwa__toggle-circle{width:56px; height:56px}
  .cmwa .cmwa__toggle-icon{width:28px; height:28px}
  /* Geöffnet: Fenster über fast die ganze Höhe, runder Button weicht */
  .cmwa.is-open{
    left:10px; right:10px; max-width:none; align-items:stretch; justify-content:flex-end;
    top:max(10px, env(safe-area-inset-top, 0px));
    bottom:calc(var(--cmwa-lift) + 10px + env(safe-area-inset-bottom, 0px));
  }
  .cmwa.is-open .cmwa__toggle{display:none}
  .cmwa .cmwa__panel{width:100%; border-radius:16px}
  .cmwa.is-open .cmwa__panel{max-height:100%}
  .cmwa .cmwa__head{padding:12px 10px 12px 14px}
  .cmwa .cmwa__avatar{width:38px; height:38px}
  .cmwa .cmwa__body{padding:14px; gap:10px}
  .cmwa .cmwa__msg{min-height:84px}
  .cmwa .cmwa__foot{padding:10px 14px 12px}
}
/* Sehr niedrige Bildschirme (kleine Handys, Querformat) */
@media (max-height:600px){
  .cmwa .cmwa__bubble{display:none}
  .cmwa .cmwa__msg{min-height:64px}
}

/* Sichtbarkeit je Gerät */
@media (max-width:768px){ .cmwa--no-mobile{display:none !important} }
@media (min-width:769px){ .cmwa--no-desktop{display:none !important} }

@media (prefers-reduced-motion:reduce){
  .cmwa,.cmwa *{animation:none !important; transition:none !important}
}
@media print{ .cmwa{display:none !important} }