/* ---- Chat: Kachel an der Klebeleiste + Fenster ----
   Gestalt aus ChatKachel.tsx (freigegeben 25.08.2026), Schriften aus dieser Seite:
   Abhaya Libre fuer Gespraech, Inter fuer Kleinzeilen. Radius 0 (Regel 26). */
.gc-kachel{position:fixed;right:16px;bottom:16px;z-index:31;width:64px;height:64px;display:grid;place-items:center;
  background:#3D3733;border:0;padding:0;cursor:pointer;color:#F6F2EA;border-radius:0;
  transition:left 300ms cubic-bezier(0.23,1,0.32,1),right 300ms cubic-bezier(0.23,1,0.32,1),transform 160ms cubic-bezier(0.23,1,0.32,1)}
.gc-kachel:active{transform:scale(.96)}
.gc-kachel svg{width:28px;height:28px;display:block}
.gc-kachel:focus:not(:focus-visible),.gc-fenster button:focus:not(:focus-visible){outline:none}
.gc-kachel:focus-visible,.gc-fenster button:focus-visible{outline:1px solid #3D3733;outline-offset:2px}

.gc-fenster{position:fixed;right:24px;bottom:96px;width:min(392px,calc(100vw - 32px));height:min(560px,calc(100vh - 140px));
  display:flex;flex-direction:column;background:#F1ECE3;box-shadow:0 18px 48px rgba(0,0,0,.30);z-index:40;
  transform-origin:bottom right;opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;
  transition:opacity 200ms cubic-bezier(0.23,1,0.32,1),transform 200ms cubic-bezier(0.23,1,0.32,1)}
.gc-fenster.offen{opacity:1;transform:none;pointer-events:auto;
  transition:opacity 280ms cubic-bezier(0.23,1,0.32,1),transform 280ms cubic-bezier(0.23,1,0.32,1)}

/* Schleier wie hinter der Kalendertafel (tafel.css .gbt-schleier); nur am Handy sichtbar */
.gc-schleier{display:none;position:fixed;inset:0;z-index:39;background:rgba(38,34,30,.42);opacity:0;pointer-events:none;
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);transition:opacity 200ms cubic-bezier(.32,.72,0,1)}
.gc-schleier.da{opacity:1;pointer-events:auto;transition:opacity 280ms cubic-bezier(.32,.72,0,1)}

.gc-kopf{flex:0 0 auto;height:56px;background:#3D3733;display:flex;align-items:center;gap:12px;padding:0 26px;color:#F6F2EA}
.gc-kopf svg{width:24px;height:24px;flex:0 0 auto}
.gc-titel{flex:1 1 auto;font-family:Inter,system-ui,sans-serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1}
.gc-zu{background:none;border:0;padding:6px;cursor:pointer;display:grid;place-items:center;color:#F6F2EA}
.gc-zu svg{width:15px;height:15px}

.gc-verlauf{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:26px 26px 10px;
  display:flex;flex-direction:column;gap:16px;scrollbar-width:thin;scrollbar-color:rgba(58,52,47,.30) transparent}
.gc-verlauf::before{content:"";margin-top:auto}
.gc-perle{align-self:flex-start;max-width:86%;background:#EFEBE4;color:#211F1E;padding:15px 18px;box-shadow:0 1px 0 rgba(58,52,47,.08);
  font-family:"Abhaya Libre",Georgia,serif;font-size:17px;line-height:1.72;white-space:pre-wrap;word-break:break-word}
.gc-perle.gast{align-self:flex-end;background:#3D3733;color:#F6F2EA;padding:13px 17px;box-shadow:none}
.gc-perle a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.gc-tippt{align-self:flex-start;display:flex;gap:5px;padding:4px 2px}
.gc-tippt span{width:5px;height:5px;background:#8a8177;animation:gc-puls 1.1s ease-in-out infinite}
.gc-tippt span:nth-child(2){background:#b3aca1;animation-delay:.15s}
.gc-tippt span:nth-child(3){background:#cdc6b9;animation-delay:.3s}
@keyframes gc-puls{0%,100%{opacity:.45}50%{opacity:1}}

.gc-angebot{align-self:stretch;padding:16px 0 8px;border-top:1px solid rgba(58,52,47,.16)}
.gc-angebot .gc-klein{font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(58,52,47,.62);line-height:1.7}
.gc-angebot .gc-preis{font-family:"Abhaya Libre",Georgia,serif;font-size:24px;line-height:1.3;color:#211F1E;margin-top:8px}
.gc-angebot .gc-leise{font-family:"Abhaya Libre",Georgia,serif;font-size:15px;line-height:1.5;color:rgba(33,31,30,.66)}
.gc-angebot a{display:inline-block;margin-top:16px;color:#211F1E;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px;
  padding:8px 0;font-family:Inter,system-ui,sans-serif;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;line-height:1}

.gc-eingabe{flex:0 0 auto;border-top:1px solid rgba(58,52,47,.14);padding:12px 26px 14px}
.gc-feld{display:flex;align-items:flex-end;gap:10px;background:#FBF8F2;border:1px solid rgba(58,52,47,.16);padding:6px 6px 6px 16px}
.gc-feld textarea{flex:1 1 auto;min-width:0;border:0;outline:none;background:none;border-radius:0;font-family:"Abhaya Libre",Georgia,serif;font-size:17px;
  line-height:26px;color:#211F1E;padding:8px 0;resize:none;max-height:150px;overflow-y:hidden}
.gc-senden{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;background:transparent;border:0;padding:0;cursor:default;
  color:rgba(58,52,47,.38);transition:background-color 200ms ease}
.gc-senden.bereit{background:#3D3733;color:#F6F2EA;cursor:pointer}
.gc-senden svg{width:19px;height:19px}
/* Pflichthinweis nach Art. 50 KI-VO: lesbar, nicht nur vorhanden (Kontrast >= 4,5 : 1) */
.gc-fuss{flex:0 0 auto;padding:0 26px 14px 43px;font-family:Inter,system-ui,sans-serif;font-weight:300;font-size:9px;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(58,52,47,.78);line-height:1.7;white-space:pre-line}
.gc-dslink{color:inherit;text-decoration:underline;text-underline-offset:3px}

@media (max-width:809px){
  /* Die Leiste ist hier 56 px hoch (gemessen 16.09.2026) -- die Kachel gleich hoch, sonst steht sie 8 px ueber */
  body.mit-chat .klebeleiste{right:57px}
  .gc-kachel{right:0;bottom:0;width:56px;height:56px}
  .gc-kachel svg{width:26px;height:26px}
  /* Michael 16.09.2026: "gleich wie den Kalender mit Rand" -- Werte der Tafel am Handy gemessen:
     16 px Rand, Grund #F3EEE7, derselbe Schatten, derselbe Schleier dahinter. */
  .gc-fenster{left:16px;right:16px;top:calc(16px + env(safe-area-inset-top, 0px));bottom:calc(16px + env(safe-area-inset-bottom, 0px));
    width:auto;height:auto;background:#F3EEE7;
    box-shadow:0 40px 100px -30px rgba(38,34,30,.5),0 8px 24px -10px rgba(38,34,30,.25);
    transform-origin:bottom center;transform:translateY(24px)}
  .gc-fenster.offen{transform:none}
  .gc-schleier{display:block}
  .gc-fuss{padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px))}
}
@media (prefers-reduced-motion: reduce){
  .gc-kachel,.gc-fenster,.gc-fenster.offen{transition:opacity 200ms ease;transform:none}
  .gc-tippt span{animation:none}
}