/* Beanlings Kickoff · Coach im neuen Design (18.10.2026, Test). Gleiche Funktion wie das schwebende Coach-Fenster
   in layout.html (COACH CHATBOT WIDGET), Optik nach DESIGN_KICKOFF.md: Kabinentafel für den Coach, Kreidezettel für dich,
   harte Kanten, harte Schatten, Vereinsfarben nur als Akzent. Nur Tokens aus neu.css. Logik: coach.js */

/* ---------- Schwebender Knopf ---------- */
.nd .nd-coach-knopf{position:fixed;z-index:43;right:max(12px,env(safe-area-inset-right,0px));
  bottom:calc(var(--leiste-h) + env(safe-area-inset-bottom,0px) + 14px);
  width:56px;height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0;
  background:var(--v-tief);color:var(--kreide);border:2px solid var(--kontur);border-radius:2px;box-shadow:var(--hart);
  font:700 13px/1 var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:opacity 250ms steps(2),transform var(--takt) steps(1),box-shadow var(--takt) steps(1)}
.nd-coach-knopf .nd-symbol{width:24px;height:24px;color:var(--flutlicht)}
.nd-coach-knopf:active{transform:translate(3px,3px);box-shadow:none}
.nd-coach-knopf.leise{opacity:.35}
.nd-coach-knopf[hidden],.nd-coach-knopf.weg{display:none}
.nd-coach-knopf:focus-visible{outline:3px solid var(--flutlicht);outline-offset:2px}
/* über der Abriss-Leiste (Aufstellung speichern), damit nichts verdeckt wird */
body:has(.nd-abrissleiste:not([hidden])) .nd-coach-knopf{bottom:calc(var(--leiste-h) + env(safe-area-inset-bottom,0px) + 80px)}
/* Puls (wie alt: nach 3 Tagen, höchstens alle 14 Tage ohne Feedback) – in Takten statt Gleiten */
.nd-coach-knopf.puls{animation:ndCoachPuls 1000ms steps(4) 3}
@keyframes ndCoachPuls{0%,100%{box-shadow:var(--hart)}50%{box-shadow:3px 3px 0 var(--kontur),0 0 0 4px var(--flutlicht)}}
/* Inhalt am Seitenende nicht unter dem Knopf verstecken */
@media (max-width:1023px){
  body.nd.nd-mit-coach .nd-haupt{margin-bottom:calc(var(--leiste-h) + 84px + env(safe-area-inset-bottom,0px))}
  body.nd.nd-mit-coach .nd-offen-fuss{padding-bottom:calc(var(--s5) + 72px + env(safe-area-inset-bottom,0px))}
}
body.nd.offen .nd-coach-knopf{bottom:calc(env(safe-area-inset-bottom,0px) + 16px)}
@media (min-width:1024px){
  .nd .nd-coach-knopf{right:24px;bottom:24px;width:auto;height:48px;flex-direction:row;gap:8px;padding:0 16px 0 12px;font-size:16px}
  body:has(.nd-abrissleiste:not([hidden])) .nd-coach-knopf{bottom:88px}
}

/* ---------- Fenster ---------- */
.nd-coach{position:fixed;z-index:62;display:flex;flex-direction:column;background:var(--papier);color:var(--tinte);
  border:2px solid var(--kontur);box-shadow:var(--hart);overflow:hidden;font:400 15px/1.4 var(--text)}
.nd-coach[hidden]{display:none}
/* Handy: Vollbild-Blatt. Höhe/Lage folgen dem sichtbaren Bereich (coach.js, visualViewport), damit die Tastatur nichts verdeckt */
@media (max-width:639px){
  .nd-coach{left:0;right:0;top:0;height:var(--coach-h,100dvh);transform:translateY(var(--coach-y,0px));border:0;box-shadow:none;
    padding-top:env(safe-area-inset-top,0px)}
  html.nd-coach-offen,html.nd-coach-offen body{overflow:hidden}
}
@media (min-width:640px){
  .nd-coach{right:16px;bottom:calc(var(--leiste-h) + env(safe-area-inset-bottom,0px) + 84px);width:400px;
    height:min(560px,calc(100dvh - var(--leiste-h) - 120px));animation:ndHoch 250ms steps(4) both}
}
@media (min-width:1024px){
  .nd-coach{right:24px;bottom:88px;height:min(600px,calc(100dvh - 120px))}
}
body.nd.offen .nd-coach{bottom:calc(env(safe-area-inset-bottom,0px) + 84px)}
@media (max-width:639px){ body.nd.offen .nd-coach{bottom:auto} }

.nd-coach-kopf{flex:0 0 auto;background:var(--v-tief);color:var(--kreide);border-bottom:2px solid var(--kontur)}
.nd-coach-kopf-in{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) var(--s2) var(--s2) var(--s3)}
.nd-coach-bild{flex:0 0 auto;width:48px;height:48px;overflow:hidden;position:relative;background:var(--kreide);border:2px solid var(--kontur)}
.nd-coach-bild img{position:absolute;left:-8px;top:-2px;width:64px;height:64px;max-width:none;image-rendering:pixelated}
.nd-coach-kopf .titel{flex:1 1 auto;min-width:0}
.nd-coach-kopf h2{margin:0;font:400 32px/1 var(--anzeige);color:var(--kreide);outline:0}
.nd-coach-kopf p{margin:2px 0 0;font:600 13px/1.2 var(--text);color:#e9df9e}
.nd .nd-coach-zu{flex:0 0 auto;width:var(--ziel);height:var(--ziel);display:flex;align-items:center;justify-content:center;
  background:none;border:2px solid transparent;color:var(--kreide);cursor:pointer;padding:0}
.nd-coach-zu:hover{border-color:var(--kreide)}
.nd-coach-zu:focus-visible,.nd-coach button:focus-visible,.nd-coach input:focus-visible{outline:3px solid var(--flutlicht);outline-offset:2px}

.nd-coach-verlauf{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:var(--s4) var(--s3);display:flex;flex-direction:column;gap:var(--s3)}
.nd-coach-msg{max-width:88%;padding:10px 12px;border:2px solid var(--kontur);white-space:pre-line;overflow-wrap:anywhere}
.nd-coach-msg .wer{display:block;margin:0 0 4px;font:700 13px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase}
/* Coach spricht von der Kabinentafel (Kreide auf Schiefer) */
.nd-coach-msg.coach{align-self:flex-start;background:var(--schiefer);color:var(--kreide);box-shadow:var(--hart)}
.nd-coach-msg.coach .wer{color:#e9df9e}
/* Du schreibst auf einen Kreidezettel, Vereinsfarbe als Kante */
.nd-coach-msg.du{align-self:flex-end;background:var(--kreide);color:var(--tinte);box-shadow:inset 4px 0 0 var(--v1)}
.nd-coach-msg.du .wer{color:var(--v-text);text-align:right}
.nd-coach-hilfreich{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s2);margin-top:10px;padding-top:8px;border-top:2px dashed rgba(246,243,232,.25);white-space:normal}
.nd-coach-hilfreich span{font:600 13px/1.2 var(--text);color:#cfd8c9;margin-right:auto}
.nd .nd-coach-hilfreich button{min-height:var(--ziel);min-width:64px;padding:6px 12px;background:var(--kreide);color:var(--tinte);
  border:2px solid var(--kontur);border-radius:2px;font:700 15px/1 var(--text);cursor:pointer}
.nd-coach-hilfreich button:active{transform:translate(2px,2px)}

.nd-coach-themen h3{margin:var(--s2) 0 var(--s2);font:700 13px/1.2 var(--text);letter-spacing:.08em;text-transform:uppercase;color:var(--v-text)}
.nd-coach-themen .liste{display:flex;flex-wrap:wrap;gap:var(--s2)}
.nd .nd-coach-themen button{min-height:var(--ziel);padding:8px 12px;background:var(--kreide);color:var(--tinte);border:2px solid var(--tinte);
  border-radius:0;font:700 15px/1.1 var(--text);cursor:pointer;text-align:left}
.nd-coach-themen button:hover{background:var(--v-tief);color:#fff}

.nd-coach-tippt{align-self:flex-start;display:flex;gap:6px;padding:12px 14px;background:var(--schiefer);border:2px solid var(--kontur)}
.nd-coach-tippt i{width:8px;height:8px;background:var(--flutlicht);animation:ndCoachPunkt 750ms steps(2) infinite}
.nd-coach-tippt i:nth-child(2){animation-delay:250ms} .nd-coach-tippt i:nth-child(3){animation-delay:500ms}
@keyframes ndCoachPunkt{50%{opacity:.25}}

.nd-coach-eingabe{flex:0 0 auto;display:flex;gap:var(--s2);align-items:center;padding:var(--s2) var(--s3);background:var(--papier);border-top:2px solid var(--linie)}
.nd .nd-coach-eingabe .nd-feld{flex:1 1 auto;min-width:0;width:auto;font-size:16px;min-height:var(--ziel)}
.nd .nd-coach-eingabe .nd-knopf{flex:0 0 auto;padding:0;width:var(--ziel)}
.nd-coach-fuss{flex:0 0 auto;margin:0;padding:6px var(--s3) calc(8px + env(safe-area-inset-bottom,0px));font-size:13px;color:var(--tinte-leise);background:var(--papier)}
.nd .nd-coach-fuss button{background:none;border:0;padding:6px 2px;min-height:32px;color:var(--v-text);font:600 13px/1 var(--text);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .nd-coach,.nd-coach-knopf.puls,.nd-coach-tippt i{animation:none}
}