/* ============ Anfragen: flüssiger, mit Bewegung (so hat Evi es gewollt) ============
   Liegt ganz zuletzt. Nur Aussehen und Bewegung, Logik in js/52-anfragen-optik.js. Gilt für
   Terminanfragen, Urlaubsanfragen und Krankmeldungen (Unternehmen und Mitarbeiter). Zeiten und Kurven
   aus der Politur (--dur…, --ease, --ease-feder), Farben nur über var(--…). */

/* ---- Fenster: Karten kommen nacheinander herein, später Zeichnen fährt nicht noch einmal ---- */
.modal.getauscht{animation:none;}
.modal.anf:not(.getauscht) .tf-teil,
.modal.ur:not(.getauscht):not(.ul) .tf-teil,
.modal.ur:not(.getauscht):not(.ul) .anf-fertig{animation:anfKarteRein .44s var(--ease) both;}
.modal.anf:not(.getauscht) .tf-teil:nth-of-type(2), .modal.ur:not(.getauscht):not(.ul) .tf-teil:nth-of-type(2){animation-delay:.07s;}
.modal.anf:not(.getauscht) .tf-teil:nth-of-type(3), .modal.ur:not(.getauscht):not(.ul) .tf-teil:nth-of-type(3){animation-delay:.14s;}
.modal.anf:not(.getauscht) .tf-teil:nth-of-type(n+4), .modal.ur:not(.getauscht):not(.ul) .tf-teil:nth-of-type(n+4){animation-delay:.2s;}
.modal.ur:not(.getauscht):not(.ul) .anf-fertig{animation-delay:.2s;}
@keyframes anfKarteRein{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

/* ---- Karten: ruhiger Übergang, Knöpfe nutzen die Breite ---- */
.anf-eine{transition:border-color var(--dur) var(--ease), background var(--dur) var(--ease);}
.anf-tun .btn{flex:1 1 auto;}
.anf-tun .btn:first-child:not(:only-child){flex-grow:1.5;}
.anf-eine .field{animation:anfAuf .32s var(--ease) both;transform-origin:top;}
@keyframes anfAuf{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.anf-eine .zeit-hinweis{animation:anfAuf .32s var(--ease) both;}

/* ---- Eine beantwortete Karte verlässt die Liste ---- */
.anf-eine{--abschied:var(--ok);--abschied-soft:var(--ok-soft);}
.anf-eine.kr-karte{--abschied:var(--krank);--abschied-soft:var(--krank-soft);}
.anf-eine.anf-fort{pointer-events:none;}
.anf-eine.anf-fort.ok{animation:anfOk .46s var(--ease) both;}
.anf-eine.anf-fort.nein{animation:anfNein .32s var(--ease) both;}
@keyframes anfOk{
  0%{transform:none;opacity:1;}
  38%{transform:scale(1.02);border-color:var(--abschied);background-color:var(--abschied-soft);box-shadow:0 0 0 4px var(--abschied-soft);opacity:1;}
  100%{transform:scale(.97) translateY(-4px);border-color:var(--abschied);background-color:var(--abschied-soft);box-shadow:0 0 0 0 transparent;opacity:0;}
}
@keyframes anfNein{
  0%{transform:none;opacity:1;}
  100%{transform:translateX(-34px);opacity:0;}
}
.anf-eine.zu{overflow:hidden;opacity:0;margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;border-width:0;min-height:0;
  transition:height .26s cubic-bezier(.4,0,.2,1), margin .26s cubic-bezier(.4,0,.2,1), padding .26s cubic-bezier(.4,0,.2,1), border-width .26s ease;}

/* ---- „Zuletzt beantwortet“: Zeichen davor, neue Zeile leuchtet einmal auf ---- */
.anf-f.ok, .anf-f.nein{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center;}
.anf-f.ok b, .anf-f.nein b{grid-column:2;}
.anf-f.ok span, .anf-f.nein span{grid-column:2;}
.anf-f-z{grid-row:1 / span 2;grid-column:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;}
.anf-f-z svg{width:12px;height:12px;}
.anf-f.ok .anf-f-z{background:var(--ok-soft);color:var(--ok);}
.anf-f.nein .anf-f-z{background:var(--surface);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line);}
.anf-neu{animation:anfNeu .8s var(--ease) both;}
@keyframes anfNeu{
  0%{opacity:0;transform:translateY(-8px) scale(.97);box-shadow:0 0 0 0 var(--accent-soft);}
  45%{opacity:1;transform:none;box-shadow:0 0 0 4px var(--accent-soft);}
  100%{opacity:1;transform:none;box-shadow:0 0 0 0 transparent;}
}

/* ---- Karten oben in der Startansicht: Druck gibt nach ---- */
.anf-karte{transition:transform var(--dur-schnell) var(--ease-feder), border-color var(--dur) var(--ease);}
.anf-karte:active{transform:scale(.99);}
@media (hover:hover) and (pointer:fine){
  .anf-karte:hover{border-color:var(--tn);}
}

/* ---- Die Rückmeldung in der Mitte (Senden, Annehmen, Ablehnen) ---- */
.erfolg{position:fixed;inset:0;z-index:1900;display:grid;place-items:center;padding:16px;pointer-events:none;animation:erfolgBlende .22s var(--ease) both;}
.erfolg::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.16);}
.erfolg.geht{animation:erfolgWeg .26s var(--ease) both;}
.erfolg-karte{position:relative;display:grid;justify-items:center;gap:5px;min-width:200px;max-width:min(320px,100%);padding:26px 26px 22px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-fenster,18px);box-shadow:var(--schatten-oben,0 12px 32px rgba(0,0,0,.2));
  text-align:center;animation:erfolgKarte .5s var(--ease-feder) both;}
.erfolg-karte b{font-size:16px;font-weight:650;letter-spacing:-.012em;color:var(--ink);}
.erfolg-karte span{font-size:13px;line-height:1.35;color:var(--ink-soft);overflow-wrap:anywhere;}
.erfolg-ring{--e:var(--accent);--e-soft:var(--accent-soft);position:relative;width:76px;height:76px;margin-bottom:8px;display:grid;place-items:center;}
.erfolg.angenommen .erfolg-ring{--e:var(--ok);--e-soft:var(--ok-soft);}
.erfolg.krank .erfolg-ring{--e:var(--krank);--e-soft:var(--krank-soft);}
.erfolg.abgelehnt .erfolg-ring{--e:var(--ink-soft);--e-soft:var(--surface-2);}
.erfolg-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--e-soft);animation:erfolgFuellung .42s .3s var(--ease-feder) both;}
.erfolg-kreis{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}
.erfolg-kreis circle{fill:none;stroke:var(--e);stroke-width:3;stroke-linecap:round;stroke-dasharray:1;animation:erfolgKreis .55s .08s var(--ease) both;}
.erfolg-z{position:relative;display:grid;place-items:center;color:var(--e);}
.erfolg-z svg{width:34px;height:34px;}
.erfolg-z svg path{stroke-dasharray:24;animation:erfolgStrich .42s .38s var(--ease) both;}
.erfolg.gesendet .erfolg-z svg{animation:erfolgFlieger .7s .22s var(--ease-feder) both;}
.erfolg.gesendet .erfolg-z svg path{stroke-dasharray:none;animation:none;}
.erfolg-ring i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--e);opacity:0;
  animation:erfolgPunkt .75s .46s var(--ease) both;}
.erfolg-ring i:nth-of-type(even){width:4px;height:4px;margin:-2px;opacity:0;}
@keyframes erfolgBlende{from{opacity:0;}to{opacity:1;}}
@keyframes erfolgWeg{from{opacity:1;}to{opacity:0;}}
@keyframes erfolgKarte{from{opacity:0;transform:translateY(14px) scale(.92);}to{opacity:1;transform:none;}}
@keyframes erfolgFuellung{from{opacity:0;transform:scale(.55);}to{opacity:1;transform:none;}}
@keyframes erfolgKreis{from{stroke-dashoffset:1;}to{stroke-dashoffset:0;}}
@keyframes erfolgStrich{from{stroke-dashoffset:24;}to{stroke-dashoffset:0;}}
@keyframes erfolgFlieger{from{opacity:0;transform:translate(-20px,16px) rotate(-14deg);}60%{opacity:1;}to{opacity:1;transform:none;}}
@keyframes erfolgPunkt{
  0%{opacity:0;transform:rotate(var(--w)) translateY(-30px) scale(.4);}
  30%{opacity:1;}
  100%{opacity:0;transform:rotate(var(--w)) translateY(-54px) scale(1);}
}
/* „Bewegung reduzieren“: die Karte steht einfach da. */
.erfolg.ruhig, .erfolg.ruhig *, .erfolg.ruhig *::before{animation:none !important;}
.erfolg.ruhig .erfolg-ring i{display:none;}
.erfolg.ruhig .erfolg-kreis circle{stroke-dashoffset:0;}
@media (prefers-reduced-motion:reduce){
  .modal.anf .tf-teil, .modal.ur .tf-teil, .modal.ur .anf-fertig, .anf-neu, .anf-eine .field, .anf-eine .zeit-hinweis{animation:none !important;}
}

/* Lange Titel („Urlaub & Krankmeldungen“) trennen weich, statt mitten im Wort umzubrechen. */
.tg-dlg-txt h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;}

/* ---- Die Meldung unten trägt ein Zeichen, das hereinspringt (showToast, js/02 und js/52) ----
   Haken = hat geklappt, Ausrufezeichen = ging nicht (die Meldung wackelt dabei leicht). Das Zeichen steht als
   Scheibe in der Farbe des Grundes mit Schrift in --ink: auf der dunklen Meldung in jedem Design lesbar. */
.toast.mit-z{display:flex;align-items:center;justify-content:center;gap:10px;padding-left:14px;}
.toast.mit-z.mit-knopf{padding-left:12px;}
.toast-text{min-width:0;overflow-wrap:anywhere;}
.toast-z{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ground);color:var(--ink);}
.toast-z svg{width:13px;height:13px;}
.toast-z.fehler{background:transparent;color:var(--ground);box-shadow:inset 0 0 0 2px var(--ground);}
.toast-z.fehler svg{width:12px;height:12px;}
@media (prefers-reduced-motion:no-preference){
  .toast.show .toast-z{animation:toastZ .46s .08s var(--ease-feder) both;}
  .toast.show .toast-z.ok svg path{stroke-dasharray:24;animation:erfolgStrich .36s .22s var(--ease) both;}
  .toast.show.fehler{animation:toastWackel .42s var(--ease) both;}
}
@keyframes toastZ{from{opacity:0;transform:scale(.3) rotate(-30deg);}to{opacity:1;transform:none;}}
@keyframes toastWackel{
  0%,100%{translate:0 0;}
  20%{translate:-6px 0;}
  40%{translate:5px 0;}
  60%{translate:-3px 0;}
  80%{translate:2px 0;}
}

/* ---- „Termin gespeichert“ / „Termin verschoben“ …: der Haken im Kopf springt herein ---- */
@media (prefers-reduced-motion:no-preference){
  .bs-haken{animation:toastZ .5s .12s var(--ease-feder) both;}
  .bs-haken svg path{stroke-dasharray:24;animation:erfolgStrich .4s .3s var(--ease) both;}
}