/* ============================================================================
   Coffee Festival Europe — CHAT · das Fenster der digitalen Ansprechpartnerin
   (Stand 08.09.2026, Fassung 9 — neuer Ausloeser: Tintenscheibe, Sprechblase, Atem)

   Aufbau wie der Service-Chat auf contentag.com: eine Kugel unten links, die
   beim Zeigen zur Pille wird; darueber ein Fenster mit Bild, Anmeldung,
   Schnellfragen, Verlauf und Eingabezeile, dazu ein Reiter „Kontakt".
   Gesetzt in der Sprache dieser Seite: Tinte, Elfenbein, Ember, Archivo und
   MonoLabel. Alles im Fenster wird von assets/js/chat.js gebaut.
   ========================================================================== */
.fc{position:fixed;left:clamp(14px,2vw,30px);bottom:clamp(14px,2vw,30px);z-index:126;pointer-events:none;
  --fc-w:23rem;--fc-ink:#0B0806;
  opacity:0;visibility:hidden;transform:translateY(18px) scale(.9);
  transition:opacity .4s ease,transform .7s cubic-bezier(.18,1.3,.32,1),visibility 0s .4s}
.fc.on{opacity:1;visibility:visible;transform:none;transition-delay:0s}
/* beim Scrollen nach unten weicht die Kugel an den Rand, damit sie nichts verdeckt;
   sie kommt zurueck, sobald der Besucher nach oben scrollt oder anhaelt */
.fc.on.is-weg:not(.is-auf){transform:translate3d(-62%,0,0) scale(.86);opacity:.55;transition:opacity .35s ease,transform .5s cubic-bezier(.2,.9,.24,1)}
.fc.on.is-weg:not(.is-auf):hover{transform:none;opacity:1}
@keyframes fcAuftritt{0%{box-shadow:0 0 0 0 rgba(226,85,30,.6),0 18px 44px -24px rgba(0,0,0,.9)}60%{box-shadow:0 0 0 16px rgba(226,85,30,0),0 18px 44px -24px rgba(0,0,0,.9)}100%{box-shadow:0 0 0 0 rgba(226,85,30,0),0 18px 44px -24px rgba(0,0,0,.9)}}
.fc__box{pointer-events:auto;position:relative;display:flex;flex-direction:column;
  width:56px;max-width:calc(100vw - 1.6rem);border-radius:28px;overflow:hidden;
  background:var(--fc-ink);color:var(--ivory);
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7),0 2px 6px rgba(0,0,0,.25);
  transition:width .5s cubic-bezier(.2,.9,.24,1),border-radius .5s ease,background .5s ease,box-shadow .5s ease}
.fc__box::after{content:'';position:absolute;inset:0;z-index:9;pointer-events:none;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(244,238,228,.16);transition:box-shadow .5s ease}
.fc:not(.is-auf) .fc__box:hover::after{box-shadow:inset 0 0 0 1px rgba(226,85,30,.7)}
@media (hover:hover) and (pointer:fine){
  .fc:not(.is-auf) .fc__box:hover{width:14rem;box-shadow:0 24px 54px -26px rgba(226,85,30,.5)}
  .fc:not(.is-auf) .fc__box:hover .fc__slot{opacity:1;transform:none;transition-delay:.08s}
}
.fc.is-auf .fc__box{border-radius:22px;width:min(var(--fc-w),calc(100vw - 1.2rem));box-shadow:0 44px 96px -44px rgba(0,0,0,.96)}
.fc.is-auf .fc__box::after{box-shadow:inset 0 0 0 1px rgba(244,238,228,.14)}

/* ---- Ausloeser: Kugel + Beschriftung ---------------------------------------- */
.fc__row{display:flex;align-items:center;gap:0;min-height:56px}
.fc__open{flex:none;display:grid;place-items:center;width:56px;height:56px;border:0;padding:0;cursor:pointer;
  background:none;color:var(--ivory)}
.fc__ico{position:relative;width:26px;height:26px;color:var(--ivory);transition:transform .5s cubic-bezier(.2,1,.3,1)}
.fc__ico svg{width:100%;height:100%;display:block;overflow:visible}
/* Ruhe: die Kugel atmet alle sechs Sekunden einmal, ein Ember-Ring loest sich */
.fc:not(.is-auf) .fc__box{animation:fcBreath 6s ease-in-out infinite}
@keyframes fcBreath{0%,100%{transform:scale(1)}8%{transform:scale(1.05)}16%{transform:scale(1)}}
.fc__open::after{content:'';position:absolute;left:50%;top:50%;width:56px;height:56px;border-radius:50%;
  border:1px solid rgba(226,85,30,.7);transform:translate(-50%,-50%) scale(.7);opacity:0;pointer-events:none;
  animation:fcRing 6s ease-out infinite}
@keyframes fcRing{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}6%{opacity:.9}30%{transform:translate(-50%,-50%) scale(1.45);opacity:0}100%{transform:translate(-50%,-50%) scale(1.45);opacity:0}}
.fc.is-auf .fc__open::after{animation:none;opacity:0}
/* die zwei Zeilen in der Blase tippen: wachsen nacheinander, verschwinden, wachsen wieder */
.fc__ln{stroke-dasharray:1;stroke-dashoffset:1;transform-box:fill-box;transform-origin:left center}
.fc__ln--1{animation:fcType 4.8s ease-in-out infinite}
.fc__ln--2{animation:fcType 4.8s ease-in-out infinite .35s}
@keyframes fcType{0%{stroke-dashoffset:1}18%{stroke-dashoffset:0}70%{stroke-dashoffset:0;opacity:1}82%{opacity:0;stroke-dashoffset:0}90%{stroke-dashoffset:1;opacity:0}100%{stroke-dashoffset:1;opacity:1}}
.fc__ln{stroke-dasharray:1}
/* Blase <-> Kreuz beim Oeffnen */
.fc__bub,.fc__x2{transform-box:fill-box;transform-origin:center;transition:opacity .3s ease,transform .5s cubic-bezier(.2,1,.3,1)}
.fc__x2{opacity:0;transform:rotate(-90deg) scale(.6)}
.fc.is-auf .fc__bub{opacity:0;transform:rotate(45deg) scale(.6)}
.fc.is-auf .fc__x2{opacity:1;transform:none}
.fc.is-auf .fc__ln{animation:none}
/* beim Zeigen neigt sich die Blase zur Beschriftung */
@media (hover:hover){.fc:not(.is-auf) .fc__box:hover .fc__ico{transform:rotate(-8deg) scale(1.08)}
  .fc:not(.is-auf) .fc__box:hover{animation:none}}
.fc__slot{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding-right:18px;white-space:nowrap;
  opacity:0;transform:translateX(-8px);transition:opacity .3s ease,transform .45s cubic-bezier(.2,1,.3,1)}
.fc__slot b{font-family:var(--f-mono);font-weight:500;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.fc__slot span{font-size:.72rem;color:rgba(244,238,228,.6)}
.fc.is-auf .fc__row{display:none}

/* ---- Fenster ------------------------------------------------------------------ */
.fc__win{position:relative;flex:none;height:0;overflow:hidden;opacity:0;contain:layout paint;
  background:var(--fc-ink);transition:height .5s cubic-bezier(.32,.9,.3,1),opacity .3s ease}
.fc.is-auf .fc__win{opacity:1;transition-delay:0s,.12s}
.fc__pic{position:absolute;top:0;left:0;right:0;z-index:0;height:52%;line-height:0;opacity:1;transition:opacity .45s ease;overflow:hidden}
.fc__pic video,.fc__pic img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) brightness(.82);
  -webkit-mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.45) 70%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 38%,rgba(0,0,0,.45) 70%,transparent 100%)}
/* die Drohne faehrt langsam heran, solange das Fenster offen ist */
.fc.is-auf .fc__pic video{animation:fcDrone 18s cubic-bezier(.2,.6,.2,1) both}
@keyframes fcDrone{from{transform:scale(1)}to{transform:scale(1.1)}}
/* (Eckmarken auf dem Video entfernt, Fassung 3) */
.fc.is-kontakt .fc__pic,.fc.is-gespraech .fc__pic{opacity:0}
.fc__head{position:absolute;top:0;left:0;right:0;z-index:4;pointer-events:none;display:flex;align-items:center;
  justify-content:space-between;gap:1rem;padding:.9rem 1rem}
.fc__head button{pointer-events:auto}
.fc__back{position:absolute;left:1rem;top:.8rem;display:grid;place-items:center;width:28px;height:28px;border:0;cursor:pointer;
  border-radius:50%;color:var(--ivory);background:rgba(244,238,228,.1);opacity:0;transform:scale(.7) translateX(-6px);pointer-events:none;
  transition:opacity .3s,transform .45s cubic-bezier(.2,1.1,.3,1),background .3s}
.fc__back svg{width:12px;height:12px}
.fc__back:hover{background:rgba(226,85,30,.45)}
.fc.is-gespraech .fc__back{opacity:1;transform:none;pointer-events:auto;transition-delay:.14s}
.fc__tabs{display:flex;gap:.2rem;padding:.25rem;border-radius:999px;background:rgba(11,8,6,.5);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity .28s,transform .4s}
.fc.is-gespraech .fc__tabs{opacity:0;transform:translateX(-10px);pointer-events:none;visibility:hidden;transition:opacity .3s,transform .45s,visibility 0s .3s}
/* Die Reiter-Knoepfe erben "pointer-events:auto" aus .fc__head button und wuerden sonst
   unsichtbar ueber dem Zurueck-Knopf liegen und dessen Klick schlucken. */
.fc.is-gespraech .fc__tabs button{pointer-events:none}
.fc__tab{padding:.4rem .75rem;border-radius:999px;background:none;border:0;cursor:pointer;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(244,238,228,.6);transition:color .3s,background .3s}
.fc__tab.is-on{color:#fff;background:var(--ember-fest)}
.fc__tab:hover{color:var(--ivory)}
.fc__x{display:grid;place-items:center;width:26px;height:26px;flex:none;border:0;cursor:pointer;border-radius:50%;
  color:rgba(244,238,228,.7);background:rgba(244,238,228,.1);transition:color .3s,background .3s,transform .4s}
.fc__x svg{width:11px;height:11px}
.fc__x:hover{color:var(--ivory);background:rgba(226,85,30,.45);transform:rotate(90deg)}

.fc__body{position:absolute;inset:0;z-index:2;display:grid}
.fc__pane{grid-area:1/1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .34s,visibility 0s .34s}
.fc__pane.is-on{opacity:1;visibility:visible;pointer-events:auto;transition-delay:.06s,0s}
.fc__pane--chat{display:flex;flex-direction:column;padding:3.2rem 0 1rem}
.fc__tor,.fc__raum{margin-top:auto}
.fc__tor[hidden],.fc__raum[hidden]{display:none}

.fc__name{margin:0 1rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ember)}
.fc__hi{margin:.3rem 1rem 0;font-family:var(--f-display);font-weight:650;font-size:1.02rem;line-height:1.3;color:var(--ivory);
  letter-spacing:-.01em;text-shadow:0 1px 14px rgba(0,0,0,.85)}
.fc__chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:.9rem 1rem 0}
.fc__chip{padding:.5rem .9rem;border:0;cursor:pointer;border-radius:999px;background:rgba(244,238,228,.08);color:rgba(244,238,228,.8);
  font-family:var(--f-body);font-size:.82rem;text-align:left;transition:background .3s,color .3s,transform .3s}
.fc__chip:hover{background:var(--ember);color:#fff;transform:translateY(-1px)}
.fc__chip--weiter{display:none;align-items:center;gap:.4rem;background:rgba(226,85,30,.16);color:var(--ivory);box-shadow:inset 0 0 0 1px rgba(226,85,30,.5)}
.fc.hat-verlauf .fc__chip--weiter{display:inline-flex}

/* Anmeldung */
.fc__tor{display:flex;flex-direction:column;padding:0 1rem}
.fc__tor .fc__name,.fc__tor .fc__hi{margin-inline:0}
.fc__tf{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.75rem}
.fc__in{width:100%;padding:.55rem .72rem;border:0;border-radius:10px;background:rgba(244,238,228,.06);
  box-shadow:inset 0 0 0 1px rgba(244,238,228,.16);font-family:var(--f-body);font-size:.84rem;color:var(--ivory);transition:box-shadow .3s,background .3s}
.fc__in::placeholder{color:rgba(244,238,228,.45)}
.fc__in:focus{outline:none;background:rgba(244,238,228,.09);box-shadow:inset 0 0 0 1px rgba(226,85,30,.8)}
.fc__in.fehlt{box-shadow:inset 0 0 0 1px rgba(226,85,30,.95)}
.fc__tor > .fc__in{margin-top:.4rem}
.fc__ok{position:relative;display:flex;gap:.5rem;align-items:flex-start;margin-top:.7rem;cursor:pointer;font-size:.7rem;line-height:1.45;color:rgba(244,238,228,.66)}
.fc__ok a{color:var(--ember-lo);text-decoration:underline;text-underline-offset:2px}
.fc__ok input{position:absolute;opacity:0;width:0;height:0}
.fc__hk{display:grid;place-items:center;width:15px;height:15px;flex:none;margin-top:1px;border-radius:4px;color:transparent;
  background:rgba(244,238,228,.06);box-shadow:inset 0 0 0 1px rgba(244,238,228,.3);transition:background .25s,color .25s}
.fc__hk svg{width:10px;height:10px}
.fc__ok input:checked + .fc__hk{background:var(--ember);color:#fff;box-shadow:none}
.fc__ok input:focus-visible + .fc__hk{box-shadow:0 0 0 2px var(--ember-lo)}
.fc__ok.fehlt .fc__hk{box-shadow:inset 0 0 0 1px rgba(226,85,30,.95)}
.fc__fax{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.fc__warn{margin:.55rem 0 0;font-size:.72rem;color:var(--ember-lo)}
.fc__warn:empty{display:none}
.fc__go{display:flex;align-items:center;justify-content:center;gap:.5rem;margin:.75rem 0 0;padding:.65rem 1rem;border:0;border-radius:999px;cursor:pointer;
  background:var(--ember-fest);color:#fff;font-family:var(--f-mono);font-weight:500;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  transition:background .3s,transform .3s}
.fc__go:hover{background:var(--ember)}
.fc__go:disabled{opacity:.5;cursor:default}
.fc__go svg{width:12px;height:12px}

/* Verlauf */
.fc__raum{display:flex;flex-direction:column;min-height:0}
.fc.is-gespraech .fc__start{display:none}
/* Zurueck aus dem Gespraech: nur der Startblock bleibt, der Verlauf tritt ab (er ist ueber
   "Gespraech fortsetzen" wieder da). So schiebt der Verlauf den Gruss nicht ins Video. */
.fc.hat-verlauf:not(.is-gespraech) .fc__log{display:none}
@keyframes fcRein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fc.hat-verlauf:not(.is-gespraech) .fc__start{animation:fcRein .42s cubic-bezier(.2,.9,.24,1) both}
/* Der Startblock legt sich mit einem weichen Verlauf ueber das Ende des Videos, damit
   Gruss und Chips auch bei vier Zeilen lesbar bleiben. */
.fc__start{position:relative;padding-top:1.4rem;margin-top:-1.2rem;
  background:linear-gradient(to bottom,rgba(11,8,6,0) 0,rgba(11,8,6,.92) 1.3rem,var(--fc-ink) 2rem)}
.fc__chip--weiter svg{width:12px;height:12px;flex:none}
.fc__log{display:flex;flex-direction:column;gap:.7rem;padding:0 1rem}
.fc__log:empty{display:none}
.fc__z{display:flex;flex-direction:column;gap:.2rem;max-width:88%;animation:fcRein .4s cubic-bezier(.2,.9,.24,1) both}
.fc__z--du{align-self:flex-end;align-items:flex-end}
@keyframes fcRein{from{opacity:0;transform:translateY(6px)}}
.fc__zk{display:flex;gap:.5rem;margin:0;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,228,.45)}
.fc__zk b{font-weight:500;color:var(--ember)}
.fc__z--du .fc__zk b{color:rgba(244,238,228,.75)}
.fc__zt{margin:0;padding:.55rem .8rem;border-radius:14px;font-size:.86rem;line-height:1.5;color:var(--ivory);background:rgba(244,238,228,.07);white-space:pre-wrap}
.fc__z--du .fc__zt{background:rgba(226,85,30,.2);border-bottom-right-radius:4px}
.fc__z--sie .fc__zt{border-bottom-left-radius:4px}
.fc__sys{margin:0;padding:0 1rem;font-size:.74rem;line-height:1.45;color:rgba(244,238,228,.5);font-style:italic}
.fc__tat{display:flex;flex-wrap:wrap;gap:.4rem;padding:0 1rem}
.fc__tatb{display:inline-flex;align-items:center;gap:.4rem;padding:.45rem .85rem;border-radius:999px;background:var(--ivory);color:var(--fc-ink);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;animation:fcRein .4s both;transition:background .3s,color .3s}
.fc__tatb svg{width:10px;height:10px}
.fc__tatb:hover{background:var(--ember);color:#fff}
.fc__mark{display:inline-flex;align-items:center;gap:.35rem;font-size:.74rem;color:var(--ember-lo)}
.fc__mark svg{width:11px;height:11px}
.fc__denkt{display:none;align-items:center;gap:4px;padding:0 1rem;margin-top:.5rem}
.fc.is-denkt .fc__denkt{display:flex}
.fc__denkt i{width:5px;height:5px;border-radius:50%;background:var(--ember);animation:fcDot 1.2s ease-in-out infinite}
.fc__denkt i:nth-child(2){animation-delay:.15s}.fc__denkt i:nth-child(3){animation-delay:.3s}
@keyframes fcDot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}

/* Eingabezeile */
.fc__ein{display:none;align-items:flex-end;gap:.5rem;padding:.6rem .6rem .6rem 1rem;box-shadow:inset 0 1px 0 rgba(244,238,228,.09)}
.fc.is-auf .fc__ein{display:flex}
.fc__ta{flex:1;min-width:0;height:20px;max-height:100px;padding:0;border:0;background:none;resize:none;color:var(--ivory);
  font-family:var(--f-body);font-size:.88rem;line-height:20px;outline:none}
.fc__ta::placeholder{color:rgba(244,238,228,.45)}
.fc__ta:disabled{color:rgba(244,238,228,.4)}
.fc__send{flex:none;display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;background:var(--ember-fest);color:#fff;transition:background .3s,transform .3s}
.fc__send svg{width:14px;height:14px}
.fc__send:hover{background:var(--ember);transform:translateY(-1px)}

/* Tageskontingent unter der Eingabezeile */
.fc__rest{display:none;margin:0;padding:0 1rem .6rem;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,228,.45)}
.fc__rest:not(:empty){display:block}
.fc.is-auf .fc__rest:not(:empty){display:block}
.fc:not(.is-auf) .fc__rest{display:none!important}
.fc__send:disabled{opacity:.4;cursor:default}

/* Kontakt-Reiter */
.fc__pane--kontakt{padding:3.2rem 1rem 1.1rem}
.fc__k{display:flex;flex-direction:column;gap:.9rem}
.fc__k b{display:block;font-family:var(--f-display);font-weight:650;font-size:1rem;color:var(--ivory);margin-bottom:.3rem}
.fc__k p{margin:0;font-size:.8rem;line-height:1.55;color:rgba(244,238,228,.7)}
.fc__k a{color:var(--ember-lo);text-decoration:none}
.fc__k a:hover{text-decoration:underline}
.fc__k dl{display:grid;grid-template-columns:auto 1fr;gap:.35rem .8rem;margin:0;font-size:.78rem}
.fc__k dt{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,238,228,.5);padding-top:.15rem}
.fc__k dd{margin:0}
.fc__klink{display:inline-flex;align-items:center;gap:.4rem;padding:.5rem .9rem;border-radius:999px;background:rgba(244,238,228,.08);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ivory)!important;transition:background .3s}
.fc__klink:hover{background:var(--ember);text-decoration:none!important}
.fc__klink svg{width:10px;height:10px;flex:none}
.fc__k p:last-child{display:flex;flex-wrap:wrap;gap:.45rem}

@media (max-width:760px){
  .fc{left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px))}
  .fc.is-auf{left:8px;bottom:8px}
  .fc.is-auf .fc__box{width:calc(100vw - 16px);border-radius:20px}
  .fc__tf{grid-template-columns:1fr}
  .fc__pic{height:44%}
  .fc__in{padding:.7rem .8rem;font-size:16px}   /* 16px: iOS zoomt sonst ins Feld */
  .fc__ta{font-size:16px;line-height:22px;height:22px}
  .fc__chip{padding:.6rem 1rem}
  .fc__go{padding:.8rem 1rem}
  /* Auf dem Telefon haengt der Knopf beim Runterscrollen nicht halb aus dem Bild,
     sondern taucht ganz nach unten weg und kommt nach 1,4 s (oder beim
     Hochscrollen) zurueck. Auf dem Desktop bleibt das seitliche Wegruecken. */
  .fc.on.is-weg:not(.is-auf){transform:translate3d(0,150%,0) scale(.9);opacity:0}
  .fc.on.is-weg:not(.is-auf):hover{transform:translate3d(0,150%,0) scale(.9);opacity:0}
  /* Solange das Fenster offen ist, steht der Kontakt-Orb rechts unten nicht
     mehr ueber dem Sendeknopf: er tritt ab, mit derselben Kurve wie beim Menue. */
  body.fc-open .orb{opacity:0!important;pointer-events:none!important}
}
@media (prefers-reduced-motion:reduce){
  .fc,.fc__box,.fc__win,.fc__z,.fc__tatb{transition:none;animation:none}
  .fc__denkt i,.fc__ln,.fc__open::after,.fc__box{animation:none!important}
  .fc__ln{stroke-dashoffset:0}
}
/* Menue offen: der Knopf tritt ab, sonst liegt er ueber Mailadresse und
   Social-Zeile am Fuss des Menues (z-index 126 ueber 125). */
body.menu-open .fc{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility 0s .25s}
/* Barrierefreiheitspanel offen: das Fenster tritt zurueck */
.a11y-open .fc{opacity:0;visibility:hidden}