/* SCHWENK – KI-Beispiele 1.0.5 · four assistants, four looks. Fonts come from the site (local). */
dialog.kib{
  --head:'Archivo Condensed','Archivo Narrow',Arial,sans-serif; --body:'Inter',Arial,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace;
  --bg:#16191C; --res:#1E2225; --ink:#ECEBE6; --soft:#C8CCCE; --mute:#B3B9BC; --line:#2E3437; --acc:#FF6B1F; --acc-ink:#16191C;
  --bub:#1E2225; --bub-ink:#ECEBE6; --me:#FF6B1F; --me-ink:#16191C; --field:#16191C; --radius:0px;
  box-sizing:border-box; padding:0; position:fixed; inset:0; margin:auto!important; border:1px solid var(--line); max-width:none; max-height:none;
  width:min(1120px, calc(100vw - 48px)); height:min(780px, calc(100dvh - 48px));
  background:var(--bg); color:var(--ink); font-family:var(--body); font-size:16px; line-height:1.5; overflow:hidden;
}
dialog.kib *, dialog.kib *::before, dialog.kib *::after{box-sizing:border-box}
dialog.kib::backdrop{background:rgba(10,12,14,.74)}
dialog.kib:not([open]){display:none}

/* Themes */
dialog.kib[data-kib=skizze]{
  --bg:#F4F1EA; --res:#FBF9F4; --ink:#2F3538; --soft:#3E4548; --mute:#6B7174; --line:#DDD6C8; --acc:#FF6B1F; --acc-ink:#16191C;
  --bub:#FFFFFF; --bub-ink:#2F3538; --me:#2F3538; --me-ink:#F4F1EA; --field:#FFFFFF;
}
dialog.kib[data-kib=skizze] .kib-result{background-image:linear-gradient(#EFE9DD 1px,transparent 1px),linear-gradient(90deg,#EFE9DD 1px,transparent 1px);background-size:24px 24px}
dialog.kib[data-kib=leo]{
  --head:var(--body); --bg:#F3F6FA; --res:#FFFFFF; --ink:#13243A; --soft:#2B3D55; --mute:#5B6B80; --line:#D9E1EC; --acc:#1F4E8C; --acc-ink:#FFFFFF;
  --bub:#FFFFFF; --bub-ink:#13243A; --me:#1F4E8C; --me-ink:#FFFFFF; --field:#FFFFFF; --radius:14px; --warm:#D7263D;
}
dialog.kib[data-kib=weiche]{ --res:#121417; }
dialog.kib[data-kib=stempel]{
  --mono-on:1; --bg:#ECEAE4; --res:#E3DFD5; --ink:#2F3538; --soft:#3E4548; --mute:#5E6467; --line:#CFC9BC; --acc:#C2410C; --acc-ink:#FFFFFF;
  --bub:#FFFFFF; --bub-ink:#2F3538; --me:#2F3538; --me-ink:#ECEAE4; --field:#FFFFFF;
}

/* Frame */
.kib-frame{display:grid;grid-template-rows:auto auto minmax(0,1fr);height:100%}
.kib-head{display:flex;align-items:center;gap:14px;padding:12px 16px 12px 20px;border-bottom:1px solid var(--line)}
.kib-head-t{flex:1;min-width:0}
dialog.kib .kib-kicker{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
dialog.kib h2{margin:0;font-family:var(--head);font-weight:900;font-size:30px;line-height:1;letter-spacing:.02em;color:var(--ink);text-transform:uppercase}
dialog.kib[data-kib=leo] h2{font-weight:700;font-size:24px;text-transform:none;letter-spacing:0}
.kib-state{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
dialog.kib .kib-close{all:unset;box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;cursor:pointer;color:var(--ink);font-size:20px;border:1px solid var(--line);border-radius:var(--radius)}
dialog.kib .kib-close:focus-visible, dialog.kib .kib-btn:focus-visible, dialog.kib .kib-chip:focus-visible, dialog.kib .kib-tab:focus-visible, dialog.kib .kib-link:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
.kib-tabs{display:none}
.kib-body{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:0}
.kib-talk{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.kib-result{overflow:auto;padding:20px 24px 28px;background:var(--res);min-height:0}

/* Figures */
.kib-fig{display:inline-block;flex:none;line-height:0}
.kib-fig svg{width:100%;height:100%;overflow:visible}
.kib-fig-sm{width:44px;height:44px}
.kib-fig-lg{width:120px;height:120px;margin-bottom:12px}
.kib-fig-xs{width:28px;height:28px;margin-top:4px}
.kib-fig path,.kib-fig circle{vector-effect:non-scaling-stroke}
/* Skizze: a pencil that draws */
[data-kib=skizze] .kib-f-line{fill:none;stroke:var(--acc);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:40;stroke-dashoffset:0}
[data-kib=skizze] .kib-f-body{fill:#2F3538}
[data-kib=skizze] .kib-f-cone{fill:#E7D3B1;stroke:#2F3538;stroke-width:1}
[data-kib=skizze] .kib-f-cap{fill:var(--acc)}
[data-kib=skizze] .kib-f-pencil{transform-origin:22px 26px}
[data-kib=skizze][data-state=think] .kib-f-line{animation:kib-draw 1.2s linear infinite}
[data-kib=skizze][data-state=speak] .kib-f-pencil{animation:kib-scribble .5s ease-in-out infinite}
@keyframes kib-draw{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}
@keyframes kib-scribble{0%,100%{transform:translate(0,0) rotate(0)}25%{transform:translate(-1.5px,1px) rotate(-4deg)}75%{transform:translate(1.5px,-1px) rotate(3deg)}}
/* Leo: badge with pipe-bend eyes */
[data-kib=leo] .kib-f-badge{fill:#fff;stroke:var(--acc);stroke-width:3}
[data-kib=leo] .kib-f-eye{fill:none;stroke-width:3.2;stroke-linecap:round}
[data-kib=leo] .kib-f-cold{stroke:var(--acc)} [data-kib=leo] .kib-f-warm{stroke:var(--warm)}
[data-kib=leo] .kib-f-mouth{fill:none;stroke:#13243A;stroke-width:2.6;stroke-linecap:round;transform-origin:24px 31px}
[data-kib=leo] .kib-f-eyes{transform-origin:24px 20px}
[data-kib=leo][data-state=listen] .kib-f-eyes{animation:kib-blink 3.4s infinite}
[data-kib=leo][data-state=think] .kib-f-eyes{transform:translateY(-2px)}
[data-kib=leo][data-state=speak] .kib-f-mouth{animation:kib-talk .32s ease-in-out infinite alternate}
@keyframes kib-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.15)}}
@keyframes kib-talk{from{transform:scaleY(1)}to{transform:scaleY(.4)}}
/* Weiche: a switch with a moving dot */
[data-kib=weiche] .kib-f-track{fill:none;stroke:#4A5256;stroke-width:3;stroke-linecap:round}
[data-kib=weiche] .kib-f-branch{stroke:var(--acc)}
[data-kib=weiche] .kib-f-dot{fill:var(--acc)}
[data-kib=weiche][data-state=think] .kib-f-dot{animation:kib-pulse .9s ease-in-out infinite}
[data-kib=weiche][data-state=speak] .kib-f-dot{animation:kib-ride 1.1s ease-in-out infinite alternate}
@keyframes kib-pulse{50%{opacity:.35}}
@keyframes kib-ride{to{transform:translateX(10px)}}
/* Stempel: a rubber stamp */
[data-kib=stempel] .kib-f-stamp{fill:#2F3538}
[data-kib=stempel] .kib-f-rubber{fill:var(--acc)}
[data-kib=stempel] .kib-f-pad{stroke:var(--acc);stroke-width:3;stroke-linecap:round;opacity:.6}
[data-kib=stempel][data-state=think] .kib-f-stamp{animation:kib-hover 1s ease-in-out infinite alternate}
[data-kib=stempel][data-state=speak] .kib-f-stamp{animation:kib-hover .4s ease-in-out infinite alternate}
dialog.kib.kib-press[data-kib=stempel] .kib-f-stamp{animation:kib-press .5s ease-out}
@keyframes kib-hover{to{transform:translateY(-3px)}}
@keyframes kib-press{40%{transform:translateY(7px)}100%{transform:none}}

/* Start screen */
.kib-start{margin:auto;padding:32px 36px;max-width:540px}
dialog.kib h3{margin:0 0 12px;font-family:var(--head);font-weight:900;font-size:44px;line-height:.95;text-transform:uppercase;color:var(--ink)}
dialog.kib[data-kib=leo] h3{font-weight:700;font-size:30px;line-height:1.15;text-transform:none}
.kib-start p{margin:0 0 16px;color:var(--soft)}
dialog.kib .kib-tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border:1px solid var(--warm, var(--acc));color:var(--warm, var(--acc));border-radius:var(--radius)}
.kib-start-btns{margin:20px 0 16px}
dialog.kib .kib-privacy{font-size:13px;color:var(--mute);margin:0}
dialog.kib .kib-privacy a, dialog.kib .kib-consent a{color:inherit;text-decoration:underline}

/* Buttons */
.kib-row{display:flex;flex-wrap:wrap;gap:10px}
dialog.kib .kib-btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;cursor:pointer;
  font:600 15px/1.2 var(--body)!important;text-decoration:none!important;text-transform:none;letter-spacing:0;
  background:transparent!important;color:var(--ink)!important;border:2px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:none!important;
}
dialog.kib .kib-btn-primary{background:var(--acc)!important;color:var(--acc-ink)!important;border-color:var(--acc)!important;font-weight:700!important}
dialog.kib .kib-btn:disabled{opacity:.5;cursor:not-allowed}
dialog.kib .kib-btn:not(:disabled):hover{filter:brightness(1.08)}
dialog.kib .kib-link[hidden]{display:none}
dialog.kib .kib-link{all:unset;cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);text-decoration:underline;padding:8px 4px}

/* Conversation */
.kib-convo{display:flex;flex-direction:column;min-height:0;flex:1}
.kib-convo[hidden],.kib-start[hidden]{display:none}
.kib-log{flex:1;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px;min-height:0}
.kib-msg{display:flex;gap:8px;max-width:88%;align-items:flex-start;animation:kib-in .25s ease-out}
.kib-msg p{margin:0;padding:10px 14px;background:var(--bub);color:var(--bub-ink);border:1px solid var(--line);border-radius:var(--radius);white-space:pre-wrap}
.kib-msg-user{align-self:flex-end}
.kib-msg-user p{background:var(--me);color:var(--me-ink);border-color:var(--me)}
[data-kib=leo] .kib-msg-bot p{border-top-left-radius:4px} [data-kib=leo] .kib-msg-user p{border-top-right-radius:4px}
[data-kib=stempel] .kib-msg p{font-family:var(--mono);font-size:14px}
@keyframes kib-in{from{opacity:0;transform:translateY(6px)}}
.kib-typing{display:flex;gap:5px;padding:12px 4px 4px 40px}
.kib-typing i{width:7px;height:7px;border-radius:50%;background:var(--mute);animation:kib-dot 1s infinite}
.kib-typing i:nth-child(2){animation-delay:.15s}.kib-typing i:nth-child(3){animation-delay:.3s}
@keyframes kib-dot{50%{opacity:.25;transform:translateY(-3px)}}
.kib-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 20px}
.kib-chips:empty{display:none}
dialog.kib .kib-chip{
  display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;cursor:pointer;text-align:left;
  font:500 14px/1.25 var(--body)!important;text-decoration:none!important;
  background:var(--bub)!important;color:var(--ink)!important;border:1px solid var(--acc)!important;border-radius:var(--radius)!important;box-shadow:none!important;
}
[data-kib=leo] .kib-chip{border-radius:999px!important}
dialog.kib .kib-chip:hover{background:var(--acc)!important;color:var(--acc-ink)!important}
dialog.kib .kib-chip-tel{background:var(--acc)!important;color:var(--acc-ink)!important;font-weight:700!important}
.kib-input{display:flex;gap:8px;padding:14px 20px 4px}
.kib-input[hidden]{display:none}
dialog.kib .kib-input input{flex:1;min-width:0;min-height:48px;padding:10px 14px!important;font:16px/1.3 var(--body)!important;background:var(--field)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:none!important}
dialog.kib .kib-input input:focus{outline:2px solid var(--acc);outline-offset:0}
.kib-foot{display:flex;align-items:center;gap:12px;padding:4px 20px 12px}
dialog.kib .kib-status{flex:1;margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--mute)}

/* Result area */
.kib-res-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px}
dialog.kib .kib-res-label{margin:0;font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}
dialog.kib[data-kib=skizze] .kib-res-label{color:#C2410C}
.kib-count{font-family:var(--mono);font-size:12px;color:var(--mute)}
.kib-fields{display:grid;gap:10px;margin-bottom:22px}
.kib-field{display:grid;gap:3px}
.kib-field label{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
dialog.kib .kib-field textarea, dialog.kib .kib-send input, dialog.kib .kib-apply input, dialog.kib .kib-apply select, dialog.kib .kib-apply textarea{
  width:100%;min-height:44px;padding:9px 12px!important;resize:none;overflow:hidden;
  font:15px/1.4 var(--body)!important;background:var(--field)!important;color:var(--ink)!important;border:1px solid var(--line)!important;border-radius:var(--radius)!important;box-shadow:none!important;
}
dialog.kib .kib-apply textarea{overflow:auto}
dialog.kib textarea::placeholder, dialog.kib input::placeholder{color:var(--mute);opacity:.8}
.kib-field.kib-new textarea{animation:kib-flash 1.2s ease-out}
@keyframes kib-flash{from{border-color:var(--acc);box-shadow:0 0 0 3px color-mix(in srgb, var(--acc) 30%, transparent)}}
.kib-send{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--line)}
.kib-send-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.kib-send-grid label:last-child{grid-column:1/-1}
dialog.kib .kib-send label, dialog.kib .kib-apply label{display:grid;gap:3px;font-size:13px;color:var(--soft)}
dialog.kib .kib-consent{display:flex!important;gap:10px;align-items:flex-start;font-size:13px}
dialog.kib .kib-consent input{width:20px;height:20px;min-height:0;margin-top:1px;flex:none;accent-color:var(--acc)}
.kib-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
dialog.kib .kib-send-note{margin:0;font-size:13px;color:var(--soft)}

/* Skizze: the sketch */
.kib-sketch{background:#fff;border:1px solid var(--line);padding:10px;margin-bottom:16px}
.kib-sketch svg{display:block;width:100%;height:auto}
.kib-sketch path{fill:none;stroke:#2F3538;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke-dashoffset .8s ease-out}
.kib-sketch path.kib-sk-accent{stroke:var(--acc);stroke-width:3}

/* Leo: jobs and application */
.kib-jobs{display:grid;gap:12px;margin-bottom:16px}
.kib-job{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff;transition:border-color .2s, box-shadow .2s}
.kib-job-on{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc)}
dialog.kib .kib-job h4{margin:0 0 2px;font:700 17px/1.25 var(--body);color:var(--ink)}
.kib-job-art{margin:0 0 8px;font-size:13px;color:var(--warm)}
.kib-job ul{margin:0 0 12px;padding-left:18px;font-size:14px;color:var(--soft)}
.kib-job:not(.kib-job-on) ul, .kib-job:not(.kib-job-on) .kib-btn{display:none}
dialog.kib .kib-job-t{all:unset;cursor:pointer;display:block;width:100%}
dialog.kib .kib-job-t:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.kib-job:not(.kib-job-on) .kib-job-t::after{content:" ›";color:var(--acc)}
.kib-apply{display:grid;gap:10px;padding:16px;border:2px solid var(--acc);border-radius:var(--radius);background:#fff}
.kib-apply[hidden],.kib-leo-done[hidden],.kib-offer[hidden]{display:none}
.kib-leo-done{padding:16px;border-radius:var(--radius);background:#EAF1FA}
.kib-leo-done dl{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:8px 0 10px;font-size:14px}
.kib-leo-done dt{color:var(--mute)} .kib-leo-done dd{margin:0}

/* Weiche: track plan */
.kib-plan svg{display:block;width:100%;height:auto;max-height:52vh}
.kib-tr{fill:none;stroke:#3A4246;stroke-width:3;stroke-linecap:round;transition:stroke .3s}
.kib-tr-on{stroke:var(--acc);stroke-width:4}
.kib-tr-grp{font:500 10px var(--mono);letter-spacing:.12em;fill:var(--mute)}
.kib-st circle{fill:#121417;stroke:#5A6266;stroke-width:2;transition:all .3s}
.kib-st text{font:500 12px var(--body);fill:var(--soft)}
.kib-st-on circle{fill:var(--acc);stroke:var(--acc)}
.kib-st-on text{fill:var(--ink);font-weight:700}
.kib-tr-dot{fill:var(--acc);stroke:#121417;stroke-width:3}
.kib-offer{margin-top:16px;padding:18px;border:1px solid var(--acc);background:var(--bg);animation:kib-in .3s ease-out}
dialog.kib .kib-offer h4{margin:4px 0;font:900 34px/1 var(--head);text-transform:uppercase;color:var(--ink)}
.kib-offer p{margin:0 0 10px;color:var(--soft)}
dialog.kib .kib-offer-price{font-family:var(--mono);font-size:13px;color:var(--acc)}
dialog.kib .kib-offer-why{color:var(--ink)}

/* Stempel: the slip */
.kib-slip{position:relative;background:#FFFEFA;border:1px solid var(--line);padding:18px 18px 8px;margin-bottom:18px;
  background-image:repeating-linear-gradient(transparent 0 31px, #EEE9DE 31px 32px)}
.kib-slip .kib-field textarea{background:transparent!important;border:0!important;border-bottom:1px dashed var(--line)!important;font-family:var(--mono)!important;font-size:14px!important;padding-left:0!important}
.kib-marks{position:absolute;right:14px;top:44px;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.kib-mark{display:inline-block;padding:4px 12px;border:3px solid #2F6B3A;color:#2F6B3A;font:900 22px/1 var(--head);letter-spacing:.06em;transform:rotate(var(--r,6deg));opacity:.85;animation:kib-stamp .35s ease-out;mix-blend-mode:multiply}
.kib-mark-hot{border-color:var(--acc);color:var(--acc)}
@keyframes kib-stamp{from{transform:rotate(var(--r)) scale(1.8);opacity:0}}

/* Narrow screens: full screen, tabs between conversation and result */
@media (max-width:820px){
  dialog.kib{width:100vw;height:100dvh;max-height:100dvh;border:0}
  .kib-head{padding:8px 10px 8px 14px;gap:10px}
  dialog.kib h2{font-size:24px}
  .kib-state{display:none}
  .kib-tabs{display:flex;border-bottom:1px solid var(--line)}
  dialog.kib .kib-tab{all:unset;flex:1;text-align:center;padding:12px 8px;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);border-bottom:3px solid transparent}
  dialog.kib .kib-tab[aria-selected=true]{color:var(--ink);border-bottom-color:var(--acc)}
  .kib-badge{color:var(--acc)}
  .kib-body{grid-template-columns:1fr}
  .kib-talk{border-right:0}
  .kib-body[data-view=talk] .kib-result, .kib-body[data-view=result] .kib-talk{display:none}
  .kib-start{padding:24px 18px}
  .kib-fig-lg{width:84px;height:84px}
  dialog.kib h3{font-size:34px}
  .kib-log{padding:14px}
  .kib-chips,.kib-input,.kib-foot{padding-left:14px;padding-right:14px}
  .kib-result{padding:16px}
  .kib-send-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  dialog.kib *, dialog.kib *::before, dialog.kib *::after{animation:none!important;transition:none!important}
}

/* 1.0.4: video-avatar picture shown as a video call */
.kib-call{position:relative!important;overflow:hidden!important;isolation:isolate}
.kib-call img{animation:kib-kenburns 18s ease-in-out infinite alternate;transform-origin:50% 35%}
@keyframes kib-kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.kib-call::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,25,28,0) 55%,rgba(22,25,28,.78) 100%);pointer-events:none;z-index:1}
.kib-call-badge,.kib-call-note{position:absolute;z-index:2;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.kib-call-badge{top:12px;left:12px;padding:5px 9px 5px 22px;background:rgba(22,25,28,.72);color:#ECEBE6}
.kib-call-badge::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#FF6B1F;animation:kib-live 1.4s ease-in-out infinite}
@keyframes kib-live{50%{opacity:.3}}
.kib-call-note{top:42px;left:12px;padding:4px 9px;background:rgba(22,25,28,.72);color:#C8CCCE;font-size:10px}
.kib-call-sub{position:absolute;z-index:2;left:16px;right:64px;bottom:14px;margin:0;min-height:1.4em;color:#fff;font:500 15px/1.4 'Inter',Arial,sans-serif;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.kib-call-level{position:absolute;z-index:2;right:16px;bottom:18px;display:flex;gap:3px;align-items:flex-end;height:18px}
.kib-call-level i{display:block;width:4px;height:4px;background:#FF6B1F;transition:height .15s}
.kib-call-talk .kib-call-level i{animation:kib-lvl .5s ease-in-out infinite alternate}
.kib-call-talk .kib-call-level i:nth-child(2){animation-delay:.12s}.kib-call-talk .kib-call-level i:nth-child(3){animation-delay:.24s}.kib-call-talk .kib-call-level i:nth-child(4){animation-delay:.36s}
@keyframes kib-lvl{from{height:4px}to{height:18px}}
@media (prefers-reduced-motion:reduce){.kib-call img,.kib-call-badge::before,.kib-call-level i{animation:none!important}}