/* Complass-Assistent (KA1): start button and chat panel, built by assets/assistant.js (markup: templates/landing/_assistant.php).
   Colours come from the CI tokens in app.css (light and dark follow the site's theme mechanism); only the user bubble
   needs its own pair because dark mode inverts it to Messing. Do not add rules for other components here. */
.cw-root { --cw-user-bg: var(--dark); --cw-user-ink: var(--on-dark); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cw-root { --cw-user-bg: var(--accent-bright); --cw-user-ink: #13233f; } }
:root[data-theme="dark"] .cw-root { --cw-user-bg: var(--accent-bright); --cw-user-ink: #13233f; }
.cw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cw-launch[hidden], .cw-panel[hidden], .cw-root [hidden] { display: none; }
.cw-ai { font: 600 .66rem var(--font-sans); letter-spacing: .06em; padding: 1px 6px; border-radius: 999px; background: var(--accent-bright); color: #13233f; vertical-align: middle; }
.cw-panel { position: fixed; right: 20px; bottom: 20px; z-index: 1000; width: min(400px, calc(100vw - 40px)); height: min(640px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-top: 3px solid var(--accent-bright); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: cw-in 180ms ease-out; }
@keyframes cw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.cw-panel.cw-wide { width: min(820px, calc(100vw - 40px)); height: min(860px, calc(100vh - 40px)); height: min(860px, calc(100dvh - 40px)); }
.cw-panel.cw-wide .cw-log > * { max-width: 760px; }
@media (max-width: 480px) { .cw-grow { display: none; } }
@media (max-width: 480px) { .cw-panel { right: 0; bottom: 0; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } }
.cw-head { display: flex; align-items: flex-start; gap: 6px; padding: 12px 8px 10px 16px; border-bottom: 1px solid var(--line); }
.cw-title { flex: 1; min-width: 0; }
.cw-title h2 { margin: 0; font: 400 1.18rem/1.25 var(--font-display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cw-title p { margin: 2px 0 0; font-size: .78rem; color: var(--ink-faint); line-height: 1.4; }
.cw-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--radius); background: none; color: var(--ink-soft); cursor: pointer; flex: none; }
.cw-icon:hover { background: var(--inset); color: var(--ink); }
.cw-icon svg { width: 18px; height: 18px; }
.cw-log { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--inset); }
.cw-msg { position: relative; max-width: 92%; padding: 10px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.cw-msg p { margin: 0 0 6px; }
.cw-msg p:last-child { margin-bottom: 0; }
.cw-msg ul { margin: 0 0 6px; padding-left: 18px; }
.cw-bot { align-self: flex-start; background: var(--surface); border: 1px solid var(--line); border-top-left-radius: 3px; }
.cw-user { align-self: flex-end; background: var(--cw-user-bg); color: var(--cw-user-ink); border-top-right-radius: 3px; }
.cw-who { display: block; font: 600 .7rem var(--font-sans); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 3px; }
.cw-src { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line-strong); font-size: .82rem; }
.cw-src summary { min-height: 24px; cursor: pointer; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-faint); }
.cw-src summary:hover { color: var(--ink); }
.cw-src[open] summary { margin-bottom: 2px; }
.cw-src ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.cw-root a.cw-lk, .cw-legal a, .cw-note a { color: var(--accent-dark); text-decoration: underline; text-underline-offset: 3px; }
.cw-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cw-chip { padding: 6px 12px; min-height: 44px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--ink); font: 500 .82rem var(--font-sans); cursor: pointer; text-align: left; }
.cw-chip:hover { border-color: var(--accent); }
.cw-box { border-radius: var(--radius); padding: 10px 12px; font-size: .86rem; margin-top: 8px; }
.cw-box-info { background: var(--info-bg); color: var(--info-ink); border: 1px solid var(--info-line); }
.cw-box-ok { background: var(--ok-bg); color: var(--ok-ink); border: 1px solid var(--ok-line); margin-top: 0; }
.cw-box-warn { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-line); margin-top: 0; }
.cw-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 14px; border-radius: var(--radius); border: 1px solid transparent; font: 600 .86rem var(--font-sans); cursor: pointer; text-decoration: none; text-align: center; }
.cw-btn-main { background: var(--btn-bg); color: var(--btn-ink); }
.cw-btn-main:hover { background: var(--btn-bg-hover); }
.cw-btn-sec { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.cw-btn-sec:hover { border-color: var(--accent); }
.cw-btn:disabled, .cw-send:disabled { opacity: .55; cursor: not-allowed; }
.cw-form { display: grid; gap: 10px; }
.cw-form label { font-size: .84rem; font-weight: 600; display: block; margin-bottom: 3px; }
.cw-form .cw-opt { font-weight: 400; color: var(--ink-faint); }
.cw-form input[type="email"], .cw-form input[type="text"] { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; }
.cw-form .cw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cw-form [aria-invalid="true"] { border-color: var(--err-ink); }
.cw-pv-h { margin: 0 0 4px; font-size: .84rem; font-weight: 600; }
.cw-preview { margin: 0; background: var(--inset); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; font-size: .8rem; color: var(--ink-soft); max-height: 120px; overflow-y: auto; }
.cw-preview dt { font-weight: 600; color: var(--ink); }
.cw-preview dd { margin: 0 0 4px; overflow-wrap: anywhere; }
.cw-pv-line { display: block; }
.cw-consent { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
.cw-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent-dark); }
.cw-form .cw-consent label { font-weight: 400; font-size: .8rem; line-height: 1.45; color: var(--ink-soft); margin: 0; }
.cw-err { color: var(--err-ink); font-size: .8rem; margin: 2px 0 0; }
.cw-note { margin: 0; font-size: .78rem; color: var(--ink-faint); }
.cw-foot { border-top: 1px solid var(--line); padding: 10px 12px; background: var(--surface); }
.cw-input { display: flex; gap: 8px; }
.cw-input textarea { flex: 1; min-width: 0; resize: none; min-height: 44px; max-height: 110px; padding: 9px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: inherit; font-size: .9rem; line-height: 1.4; }
.cw-send { width: 44px; min-height: 44px; border: 0; border-radius: var(--radius); background: var(--btn-bg); color: var(--btn-ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.cw-send svg { width: 18px; height: 18px; }
.cw-legal { margin: 6px 2px 0; font-size: .72rem; color: var(--ink-faint); line-height: 1.4; }
.cw-typing { display: inline-flex; gap: 4px; }
.cw-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); animation: cw-blink 1s infinite; }
.cw-typing i:nth-child(3) { animation-delay: .2s; }
.cw-typing i:nth-child(4) { animation-delay: .4s; }
@keyframes cw-blink { 50% { opacity: .3; } }
.cw-root button:focus-visible, .cw-root a:focus-visible, .cw-root input:focus-visible, .cw-root textarea:focus-visible, .cw-preview:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .cw-panel, .cw-typing i { animation: none; } .cw-log { scroll-behavior: auto; } }
/* Floating figure Meles (preview 05.11.2026): the start button of the assistant. */
.cw-launch { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 900; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 500 .92rem var(--font-sans); cursor: pointer; }
.cw-launch:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 3px; }
/* Meles with clipboard, launcher figure (KA1 start button). Pairs with meles-klemmbrett-launcher.svg; classes prefixed cw-.
   The SVG uses presentation attributes only, so it needs no inline styles. Place it inline in the button: as <img> this CSS
   would not reach it. Ids are fixed, so use one inline copy per page or share one <defs>.

   Detail levels: the default is the simple figure for 56 and 68 px (plain clipboard lines, mitten paws, solid chain).
   Add cw-meles--large for about 100 px and up (ticks on the board, digits, claws, chain links).

   States, all set on the svg or button:
   - rest: every 20 seconds he bobs, blinks and sways for about 3 seconds to invite a click (Marc 05.11.2026). WCAG 2.2 criterion 2.2.2 then needs a way to
     stop it: .cw-pause sets data-motion="off" on .cw-root. Do not remove that button while the motion runs on.
   - hover and :focus-visible on .cw-launch: the free paw lifts and waves once.
   - data-state="loading" on the svg: looks down at the clipboard, the needle circles. The widget sets and removes it.
   - touch (no hover): the wave plays once when the button opens the panel, because assistant.js moves the figure into .cw-fig.
   - prefers-reduced-motion: no movement. Poses still change, instantly.
   The needle is two nested groups so that ending the circling cannot restart the sway. */
/* Light outline (Marc 05.11.2026): the figure floats over dark bands too, where its fur and contour fall below 3:1 */
.cw-meles { display: block; flex: none; width: 68px; height: 68px; overflow: visible; filter: drop-shadow(0 0 .6px #f7f3ea) drop-shadow(0 0 .6px #f7f3ea) drop-shadow(0 0 .6px #f7f3ea); }
@media (max-width: 640px) { .cw-launch .cw-meles { width: 56px; height: 56px; } }

.cw-meles--large .cw-gb-fine { display: inline; }
.cw-meles--large .cw-gb-small { display: none; }

.cw-gb-needle, .cw-gb-spin { transform-origin: 100px 157px; }
.cw-gb-shadow { transform-origin: 100px 189px; }
.cw-gb-blink { transform-box: fill-box; transform-origin: center; }
.cw-gb-wave { transform-origin: 50px 140px; }
.cw-gb-headpos { transform-origin: 100px 120px; }

/* Loading pose */
.cw-meles[data-state="loading"] .cw-gb-headpos { transform: translate(3px, 6px) rotate(4deg); }
.cw-meles[data-state="loading"] .cw-gb-pupil { transform: translate(3.5px, 4px); }
.cw-meles[data-state="loading"] .cw-gb-lid { visibility: visible; }
.cw-meles[data-state="loading"] .cw-gb-ringfront { visibility: hidden; }

/* Wave pose: without motion it simply holds while the pointer or focus stays. */
.cw-launch:focus-visible .cw-meles:not([data-state="loading"]) .cw-gb-wave { visibility: visible; }
.cw-launch:focus-visible .cw-meles:not([data-state="loading"]) .cw-gb-rest { visibility: hidden; }
@media (hover: hover) {
  .cw-launch:hover .cw-meles:not([data-state="loading"]) .cw-gb-wave { visibility: visible; }
  .cw-launch:hover .cw-meles:not([data-state="loading"]) .cw-gb-rest { visibility: hidden; }
}

@media (prefers-reduced-motion: no-preference) {
  .cw-launch .cw-gb-float { animation: cw-gb-float 20s ease-in-out infinite; }
  .cw-launch .cw-gb-shadow { animation: cw-gb-shade 20s ease-in-out infinite; }
  .cw-launch .cw-gb-needle { animation: cw-gb-sway 20s ease-in-out infinite; }
  .cw-launch .cw-gb-blink { animation: cw-gb-blink 20s linear infinite; }
  .cw-gb-headpos, .cw-gb-pupil { transition: transform .3s ease; }
  .cw-meles[data-state="loading"] .cw-gb-spin { animation: cw-gb-circle 1s linear infinite; }
  .cw-launch:focus-visible .cw-meles:not([data-state="loading"]) .cw-gb-wave { animation: cw-gb-wave 1.8s ease-in-out both; }
  .cw-launch:focus-visible .cw-meles:not([data-state="loading"]) .cw-gb-rest { animation: cw-gb-rest 1.8s linear both; }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .cw-launch:hover .cw-meles:not([data-state="loading"]) .cw-gb-wave { animation: cw-gb-wave 1.8s ease-in-out both; }
  .cw-launch:hover .cw-meles:not([data-state="loading"]) .cw-gb-rest { animation: cw-gb-rest 1.8s linear both; }
}
@media (prefers-reduced-motion: no-preference) and (hover: none) {
  .cw-fig .cw-meles:not([data-state="loading"]) .cw-gb-wave { animation: cw-gb-wave 1.8s ease-in-out both; }
  .cw-fig .cw-meles:not([data-state="loading"]) .cw-gb-rest { animation: cw-gb-rest 1.8s linear both; }
}

@keyframes cw-gb-float { 0%, 8%, 16%, 100% { transform: translateY(0); } 4%, 12% { transform: translateY(-7px); } }
@keyframes cw-gb-shade { 0%, 8%, 16%, 100% { transform: scaleX(1); opacity: 1; } 4%, 12% { transform: scaleX(.9); opacity: .72; } }
@keyframes cw-gb-sway { 0%, 16%, 100% { transform: rotate(0); } 5% { transform: rotate(-10deg); } 11% { transform: rotate(9deg); } }
@keyframes cw-gb-blink { 0%, 8%, 10%, 100% { transform: scaleY(1); } 9% { transform: scaleY(.08); } }
@keyframes cw-gb-circle { to { transform: rotate(360deg); } }
@keyframes cw-gb-wave {
  0% { visibility: visible; transform: rotate(-105deg); }
  20% { transform: rotate(0); }
  36% { transform: rotate(-13deg); }
  52% { transform: rotate(7deg); }
  68% { transform: rotate(-11deg); }
  82% { transform: rotate(0); }
  99% { visibility: visible; transform: rotate(-105deg); }
  100% { visibility: hidden; transform: rotate(-105deg); }
}
@keyframes cw-gb-rest { 0%, 99% { visibility: hidden; } 100% { visibility: visible; } }

@media (prefers-reduced-motion: reduce) {
  .cw-meles, .cw-meles * { animation: none !important; transition: none !important; }
}
.cw-fig { flex: none; width: 56px; height: 56px; }
.cw-fig .cw-meles { width: 56px; height: 56px; }
.cw-root[data-motion="off"] .cw-meles * { animation: none; }
/* Pause control: small mark, the target stays 44 px on touch devices (docs/DESIGN-GUIDELINES.md section 9) */
.cw-pause { position: fixed; right: max(84px, calc(env(safe-area-inset-right, 0px) + 84px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 900; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); box-shadow: 0 0 0 1px #9aa5b7, 0 1px 4px rgba(19, 35, 63, .25); cursor: pointer; }
.cw-pause span { display: block; width: 8px; height: 10px; border-left: 3px solid var(--ink-soft); border-right: 3px solid var(--ink-soft); }
.cw-root[data-motion="off"] .cw-pause span { width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--ink-soft); }
.cw-pause:focus-visible { outline: 3px solid var(--accent-bright); outline-offset: 2px; }
.cw-pause[hidden] { display: none; }
@media (max-width: 640px), (hover: none) { .cw-pause { width: 44px; height: 44px; right: max(72px, calc(env(safe-area-inset-right, 0px) + 72px)); bottom: max(22px, env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .cw-pause { display: none; } }
/* Speech bubble above the figure: only with the pointer or keyboard focus on it (Marc 05.11.2026), otherwise gone. */
.cw-tip { position: absolute; right: 6px; bottom: calc(100% + 8px); padding: 7px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); font: 500 .9rem var(--font-sans); white-space: nowrap; box-shadow: 0 4px 14px rgba(19, 35, 63, .18); }
.cw-tip::after { content: ""; position: absolute; right: 22px; bottom: -6px; width: 10px; height: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); transform: rotate(45deg); }
.cw-tip { opacity: 0; visibility: hidden; }
.cw-launch:focus-visible .cw-tip { opacity: 1; visibility: visible; }
@media (hover: hover) { .cw-launch:hover .cw-tip { opacity: 1; visibility: visible; } }
@media (prefers-reduced-motion: no-preference) { .cw-tip { transition: opacity .2s ease, visibility .2s; } }
.cw-root[data-tip="off"] .cw-tip { visibility: hidden !important; }

/* Touch devices: 16 px keeps iOS from zooming in on focus, the sources arrow gets a 44 px target (docs/DESIGN-GUIDELINES.md, section 9) */
@media (pointer: coarse) {
  .cw-input textarea, .cw-form input[type="email"], .cw-form input[type="text"] { font-size: 16px; }
  .cw-src summary { box-sizing: border-box; min-height: 44px; padding: 12px 0; }
}

/* An open conversation waits behind the button; the text for screen readers says the same */
.cw-launch[data-resume="true"]::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--accent-bright); border: 2px solid #fff; }
/* Check help "Was bedeutet das?" next to a question of a check page (block 3 of 2.37): revealed by assistant.js, 44 px touch target */
.cw-ask { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 4px; padding: 0 2px; border: 0; background: none; color: var(--accent-dark); font: 500 .86rem var(--font-sans); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cw-ask:hover { text-decoration-thickness: 2px; }
.cw-ask:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.cw-ask { align-self: flex-start; justify-self: start; width: auto; }
.cw-ask[hidden] { display: none; }