/* Startseite fuer Mitarbeitende (/start). Ergaenzt moos.css und landing.css; Farben nur aus den Tokens. */

/* Beispiel-Chat: Nachrichten erscheinen nacheinander. moos.css schaltet Animationen bei reduzierter Bewegung ab. */
.chat .msg-user { margin-left: 56px; }
.chat .msg-bot { margin-right: 56px; background: var(--surface); border: 1px solid var(--line); }
.chat .msg-ok { margin-right: 0; }
.chat .msg-wait { background: var(--warn-bg); border: 1px solid transparent; }
/* Erstes Kind ist die Fensterleiste, die Nachrichten beginnen beim zweiten. Gilt vor den Verzoegerungen aus landing.css. */
.chat .msg:nth-child(2) { animation-delay: 0s; }
.chat .msg:nth-child(3) { animation-delay: 0.2s; }
.chat .msg:nth-child(4) { animation-delay: 0.4s; }
.chat .msg:nth-child(5) { animation-delay: 0.6s; }
.chat .msg:nth-child(6) { animation-delay: 0.8s; }
.chat .msg:nth-child(7) { animation-delay: 1s; }

/* Beispiel-Zitat unter dem Einstieg: schmal, zentriert, ohne Person. */
.section.example { padding-block: 8px 72px; }
.section.example + .section { border-top: 0; }
.example-quote { max-width: 720px; margin: 0 auto; padding: 32px 36px; display: grid; gap: 14px; }
.example-quote blockquote { margin: 0; }
.example-quote blockquote p { font: 600 clamp(20px, 2.4vw, 26px)/1.35 var(--font-display); color: var(--head); letter-spacing: -0.015em; text-wrap: balance; }
.example-quote figcaption { font-size: 14px; color: var(--muted); }

/* Einrichtung */
.setup { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.setup-step { padding: 26px 24px; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 18px; align-items: start; }
.setup-step .step-no { margin: 0; }
.setup-body { display: grid; gap: 12px; min-width: 0; }
.setup-body p { color: var(--muted); }
.setup-body strong { color: var(--head); }
.other-clients { margin-top: 18px; }
/* Lange Firmenadressen duerfen umbrechen, sonst scrollt die Seite auf dem Handy quer. */
.other-clients code { overflow-wrap: anywhere; }

/* Hinweis fuer die IT: Connector einmal fuer die ganze Organisation. */
.for-it { margin-top: 18px; padding: 22px 24px; display: grid; gap: 8px; }
.for-it h3 { font: 600 17px/1.3 var(--font-display); color: var(--head); }
.for-it p { color: var(--muted); max-width: 75ch; }

/* Notweg mit Token: eingeklappt, funktioniert auch ohne Skript. */
.token-way { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 14px; }
.token-way summary { cursor: pointer; color: var(--muted); font-size: 14px; }
.token-body { display: grid; gap: 12px; margin-top: 14px; min-width: 0; }
.token-body p { color: var(--muted); }
.token-body strong { color: var(--head); }
.token-body code { overflow-wrap: anywhere; }

.tabs { display: grid; gap: 14px; min-width: 0; }
/* Ohne Skript gibt es keine Reiter: beide Anleitungen stehen untereinander mit eigener Ueberschrift. */
.tab-list { display: none; gap: 6px; flex-wrap: wrap; }
.tabs.ready .tab-list { display: flex; }
.tabs.ready .panel-title { display: none; }
.tab-list button { padding: 8px 14px; font-size: 13px; }
.tab-list button[aria-selected='true'] { background: var(--mark); border-color: var(--accent); color: var(--head); }
.tab-panel { display: grid; gap: 12px; min-width: 0; }
.tab-panel[hidden] { display: none; }
.tab-panel + .tab-panel { margin-top: 10px; }
.tabs.ready .tab-panel + .tab-panel { margin-top: 0; }
.panel-title { font: 600 15px/1.3 var(--font-display); color: var(--head); }

/* Codebloecke scrollen in sich, nie die Seite. */
.code { position: relative; min-width: 0; }
.code pre { margin: 0; padding: 16px 18px; font: 400 13px/1.7 var(--font-mono); color: var(--ink); background: var(--surface-code); border: 1px solid var(--line); border-radius: var(--radius-s); overflow-x: auto; white-space: pre; }
/* Platz fuer den Kopieren-Knopf nur, wenn das Skript ihn einblendet. */
.js .code pre { padding-right: 104px; }
.copy { position: absolute; top: 8px; right: 8px; padding: 7px 12px; font-size: 12px; }
/* moos.css setzt button auf inline-flex und hebt damit [hidden] auf. */
.copy[hidden] { display: none; }
.copy.done { color: var(--ok); border-color: var(--ok); }
.copy.failed { color: var(--warn); border-color: var(--warn); }

@media (max-width: 600px) {
  .chat .msg-user { margin-left: 16px; }
  .chat .msg-bot { margin-right: 16px; }
  .setup-step { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 22px 18px; }
  .code pre { font-size: 12px; padding: 14px; }
  .js .code pre { padding: 44px 14px 14px; }
  .example-quote { padding: 24px 22px; }
}

/* Ohne Skript laesst sich das Menue nicht aufklappen: dann stehen die Links offen im Kopf. */
@media (max-width: 900px) {
  html:not(.js) .head-row { flex-wrap: wrap; padding-block: 10px; }
  html:not(.js) .nav-toggle { display: none; }
  html:not(.js) .nav { display: flex; position: static; flex-direction: row; flex-wrap: wrap; padding: 0; background: none; border: 0; }
  html:not(.js) .nav a:not(.btn) { padding: 6px 10px; font-size: 14px; }
  html:not(.js) .nav .nav-cta { margin: 0 0 0 4px; padding: 7px 14px; }
}