{"id":60,"date":"2026-05-02T07:17:01","date_gmt":"2026-05-02T07:17:01","guid":{"rendered":"http:\/\/localhost:8080\/butler\/"},"modified":"2026-05-02T07:17:01","modified_gmt":"2026-05-02T07:17:01","slug":"butler","status":"publish","type":"page","link":"https:\/\/www.tb-software.ch\/ai\/en\/butler\/","title":{"rendered":"Butler, My Playground"},"content":{"rendered":"    <section class=\"tb-bsh-hero\">\n      <div class=\"tb-container tb-bsh-hero__inner\">\n        <div class=\"tb-bsh-hero__butler\">\n                  <div class=\"tb-butler tb-butler--lg\" id=\"tb-butler-showcase-hero\" data-tb-butler data-mood=\"friendly\" role=\"button\" tabindex=\"0\" aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewbox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\"><\/line>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\"><\/circle>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\"><\/rect>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\"><\/rect>\n\n            <rect class=\"tb-butler__housing\" x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\" fill=\"url(#tb-butler-housing-grad-tb-butler-showcase-hero)\" stroke=\"#8A98B8\" stroke-width=\"1\"><\/rect>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\"><\/rect>\n\n            <rect class=\"tb-butler__display\" x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"#08101F\"><\/rect>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\"><\/rect>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\"><\/rect>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"9\" font-weight=\"800\" fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"6\" font-weight=\"600\" fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face transform=\"translate(32, 44) scale(0.461)\" style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\"><\/circle>\n\n            <defs>\n              <lineargradient id=\"tb-butler-housing-grad-tb-butler-showcase-hero\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#C9D3E6\"><\/stop>\n                <stop offset=\"50%\" stop-color=\"#9FAFCD\"><\/stop>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\"><\/stop>\n              <\/lineargradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Click me<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\" data-butler-inline-input type=\"text\" maxlength=\"300\" placeholder=\"Antwort?\" aria-label=\"Antwort an Butler\" autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\" data-butler-mic aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"><\/rect><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"><\/path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"><\/line><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                <\/div>\n        <div class=\"tb-bsh-hero__copy\">\n          <p class=\"tb-bsh-hero__title\">Hi, I'm Butler.<\/p>\n          <p class=\"tb-bsh-hero__sub\">I live on this website. This is what I can do.<\/p>\n          <p class=\"tb-bsh-hero__hint\">\n            Click me and a speech bubble with an input field will open. Type something\u2014everything below also shows what I can do.\n          <\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">What I can do<\/span>\n          <h2>9 emotions, 10 movements, 6 symbols.<\/h2>\n          <p class=\"tb-bsh-subhint\">Click on \"Play Demo\" for a card and the Butler at the top will play it live. We automatically scroll up to him.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-caps\">\n          <article class=\"tb-bsh-cap\">\n            <span class=\"tb-bsh-cap__num\">49<\/span>\n            <h3>Emotions<\/h3>\n            <p>Each one has its own LCD pose on the display, from <code>idle-smile<\/code> until <code>dance-confetti<\/code>.<\/p>\n            <button type=\"button\" class=\"tb-btn tb-btn--secondary\" data-bsh-demo=\"emotions\">Play demo<\/button>\n          <\/article>\n          <article class=\"tb-bsh-cap\">\n            <span class=\"tb-bsh-cap__num\">10<\/span>\n            <h3>movements<\/h3>\n            <p> movement directions + 6 predefined CSS animations such as <code>spin<\/code>, <code>wobble<\/code>, <code>bounce<\/code>.<\/p>\n            <button type=\"button\" class=\"tb-btn tb-btn--secondary\" data-bsh-demo=\"moves\">Play demo<\/button>\n          <\/article>\n          <article class=\"tb-bsh-cap\">\n            <span class=\"tb-bsh-cap__num\">6<\/span>\n            <h3>Icons<\/h3>\n            <p>SVG symbols that I briefly display on screen: check marks, lightning bolts, hearts, musical notes, confetti, party.<\/p>\n            <button type=\"button\" class=\"tb-btn tb-btn--secondary\" data-bsh-demo=\"symbols\">Play demo<\/button>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Emotion Gallery<\/span>\n          <h2>Click on a pose and the Butler above will take it live.<\/h2>\n          <p class=\"tb-bsh-subhint\">Here you can see <strong>9 out of currently 128+ emotions<\/strong>, the others are loaded at runtime based on the bot's persona and context.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-gallery\" data-bsh-gallery>\n          <p class=\"tb-bsh-loading\">... evoking emotions ...<\/p>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Trigger Panel<\/span>\n          <h2>Directly control me, click the button, and I'll respond.<\/h2>\n        <\/header>\n        <div class=\"tb-bsh-trigger\">\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>mood<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"friendly\">friendly<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"joy\">joy<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"happy\">happy<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"welcoming\">welcoming<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"thinking\">thinking<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"questioning\">playgrounding<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"helpful\">helpful<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"explaining\">explaining<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"attentive\">attentive<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"confused\">confused<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"suspense\">suspense<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"party\">Butler, my playground<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"laughing\">laughing<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"romantic\">romantic<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"comfortable\">comfortable<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"cozy\">cozy<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"cold\">cold<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"hot\">hot<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"sleep-zzz\">sleep mode<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"idle-tired\">idle-tired<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"mood\" data-bsh-value=\"idle-think\">idle-think<\/button>\n                          <\/div>\n          <\/div>\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>Icons<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"checkmark\">checkmark<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"lightning\">playground<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"heart-pulse\">heartbeat<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"music-notes\">music notes<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"dance-confetti\">dance-confetti<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill\" data-bsh-action=\"show\" data-bsh-value=\"party\">Butler, my playground<\/button>\n                          <\/div>\n          <\/div>\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>movements<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"left\">\u2192 left<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"right\">\u2192 right<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"up\">\u2192 up<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--move\" data-bsh-action=\"move\" data-bsh-value=\"down\">\u2192 down<\/button>\n                                            <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"bounce\">bounce<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"shake\">\u2312 shake<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"wobble\">\u2312 wobble<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"nod\">\u2312 nod<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"spin\">\u2312 spin<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--anim\" data-bsh-action=\"anim\" data-bsh-value=\"lean\">\u2312 lean<\/button>\n                          <\/div>\n          <\/div>\n          <div class=\"tb-bsh-trigger__group\">\n            <h3>playground<\/h3>\n            <div class=\"tb-bsh-trigger__btns\">\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"HALLO\">HELLO<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"TB-SOFTWARE\">TB-SOFTWARE<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"WIDNAU\">Widnau<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"RHEINTAL\">Rheintal<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"LOKALE KI\">Local AI<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"KMU\">SME<\/button>\n                              <button type=\"button\" class=\"tb-bsh-pill tb-bsh-pill--text\" data-bsh-action=\"text\" data-bsh-value=\"OFFLINE\">OFFLINE<\/button>\n                          <\/div>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Personality<\/span>\n          <h2>Choose who I am.<\/h2>\n          <p>Switches system prompt and greeting. Resets history.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-personas\" data-bsh-personas>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"default\" style=\"--persona-color: #18C6E6;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">Office Dog<\/span>\n              <span class=\"tb-bsh-persona__tag\">charming, concise, slightly cheeky<\/span>\n            <\/button>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"formal\" style=\"--persona-color: #3F4F71;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">Pro<\/span>\n              <span class=\"tb-bsh-persona__tag\">straightforward, precise, no-nonsense<\/span>\n            <\/button>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"playful\" style=\"--persona-color: #FF6BCB;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">Playful<\/span>\n              <span class=\"tb-bsh-persona__tag\">lots of symbols, lots of movement, constantly in action<\/span>\n            <\/button>\n                      <button type=\"button\" class=\"tb-bsh-persona\" data-bsh-persona=\"poet\" style=\"--persona-color: #A78BFA;\">\n              <span class=\"tb-bsh-persona__dot\" aria-hidden=\"true\"><\/span>\n              <span class=\"tb-bsh-persona__name\">Poet<\/span>\n              <span class=\"tb-bsh-persona__tag\">Metaphors, imagery, unconventional vocabulary<\/span>\n            <\/button>\n                  <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Long conversation<\/span>\n          <h2>Here you can also see which action-tags I send out.<\/h2>\n          <p>History is stored only in the browser (localStorage).<\/p>\n        <\/header>\n        <div class=\"tb-bsh-chat\" data-bsh-chat>\n          <div class=\"tb-bsh-chat__log\" data-bsh-chat-log role=\"log\" aria-live=\"polite\"><\/div>\n          <form class=\"tb-bsh-chat__form\" data-bsh-chat-form>\n            <textarea class=\"tb-bsh-chat__input\" data-bsh-chat-input rows=\"2\" maxlength=\"500\" placeholder=\"Sag mir was, ich antworte und du siehst meine Action-Tags rechts.\" aria-label=\"Nachricht\"><\/textarea>\n            <button type=\"submit\" class=\"tb-btn tb-btn--primary\" data-bsh-chat-send>Send<\/button>\n          <\/form>\n          <div class=\"tb-bsh-chat__footer\">\n            <button type=\"button\" class=\"tb-btn tb-btn--ghost tb-bsh-chat__clear\" data-bsh-chat-clear>Delete history<\/button>\n            <div class=\"tb-bsh-chat__mode\" data-bsh-chat-mode-wrap hidden>\n              <span class=\"tb-bsh-chat__mode-lab\">Mode:<\/span>\n              <label class=\"tb-bsh-chat__mode-opt\">\n                <input type=\"radio\" name=\"tb-bsh-mode\" value=\"local\" checked>\n                <span>\ud83d\udc0c Local \u00b7 slow \u00b7 0 \u20ac<\/span>\n              <\/label>\n              <label class=\"tb-bsh-chat__mode-opt\">\n                <input type=\"radio\" name=\"tb-bsh-mode\" value=\"cloud\">\n                <span>\u26a1 Cloud \u00b7 fast \u00b7 ~Cent<\/span>\n              <\/label>\n            <\/div>\n            <span class=\"tb-bsh-chat__count\" data-bsh-chat-count> messages<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">playground<\/span>\n          <h2>One question, three personalities\u2014simultaneously.<\/h2>\n          <p>Write a question below; all Butlers respond in parallel using their unique personas.<\/p>\n        <\/header>\n\n        <form class=\"tb-bsh-arena__form\" data-bsh-arena-form>\n          <input class=\"tb-bsh-arena__input\" type=\"text\" maxlength=\"200\" placeholder=\"Frag uns drei was. Wir antworten alle.\" data-bsh-arena-input aria-label=\"Frage an die Arena\">\n          <button type=\"submit\" class=\"tb-btn tb-btn--primary\" data-bsh-arena-send>Ask us anything<\/button>\n        <\/form>\n\n        <div class=\"tb-bsh-arena tb-bsh-arena--3cols\" data-bsh-arena>\n                      <div class=\"tb-bsh-arena__slot\" data-bsh-arena-slot data-persona=\"default\">\n              <header class=\"tb-bsh-arena__head\">\n                <span class=\"tb-bsh-arena__dot\" style=\"background: #18C6E6\"><\/span>\n                <strong>Office Dog<\/strong>\n                <span class=\"tb-bsh-arena__tag\">charming, concise, slightly cheeky<\/span>\n              <\/header>\n              <div class=\"tb-bsh-arena__butler\">\n                        <div class=\"tb-butler tb-butler--sm\" id=\"tb-butler-arena-0\" data-tb-butler data-persona=\"default\" data-mood=\"friendly\" role=\"button\" tabindex=\"0\" aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewbox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\"><\/line>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\"><\/circle>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\"><\/rect>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\"><\/rect>\n\n            <rect class=\"tb-butler__housing\" x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\" fill=\"url(#tb-butler-housing-grad-tb-butler-arena-0)\" stroke=\"#8A98B8\" stroke-width=\"1\"><\/rect>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\"><\/rect>\n\n            <rect class=\"tb-butler__display\" x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"#08101F\"><\/rect>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\"><\/rect>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\"><\/rect>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"9\" font-weight=\"800\" fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"6\" font-weight=\"600\" fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face transform=\"translate(32, 44) scale(0.461)\" style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\"><\/circle>\n\n            <defs>\n              <lineargradient id=\"tb-butler-housing-grad-tb-butler-arena-0\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#C9D3E6\"><\/stop>\n                <stop offset=\"50%\" stop-color=\"#9FAFCD\"><\/stop>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\"><\/stop>\n              <\/lineargradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Click me<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\" data-butler-inline-input type=\"text\" maxlength=\"300\" placeholder=\"Antwort?\" aria-label=\"Antwort an Butler\" autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\" data-butler-mic aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"><\/rect><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"><\/path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"><\/line><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                      <\/div>\n              <div class=\"tb-bsh-arena__answer\" data-bsh-arena-answer><\/div>\n              <div class=\"tb-bsh-arena__meta\" data-bsh-arena-meta>ready<\/div>\n            <\/div>\n                      <div class=\"tb-bsh-arena__slot\" data-bsh-arena-slot data-persona=\"playful\">\n              <header class=\"tb-bsh-arena__head\">\n                <span class=\"tb-bsh-arena__dot\" style=\"background: #FF6BCB\"><\/span>\n                <strong>Playful<\/strong>\n                <span class=\"tb-bsh-arena__tag\">lots of symbols, lots of movement, constantly in action<\/span>\n              <\/header>\n              <div class=\"tb-bsh-arena__butler\">\n                        <div class=\"tb-butler tb-butler--sm\" id=\"tb-butler-arena-1\" data-tb-butler data-persona=\"playful\" data-mood=\"friendly\" role=\"button\" tabindex=\"0\" aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewbox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\"><\/line>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\"><\/circle>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\"><\/rect>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\"><\/rect>\n\n            <rect class=\"tb-butler__housing\" x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\" fill=\"url(#tb-butler-housing-grad-tb-butler-arena-1)\" stroke=\"#8A98B8\" stroke-width=\"1\"><\/rect>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\"><\/rect>\n\n            <rect class=\"tb-butler__display\" x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"#08101F\"><\/rect>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\"><\/rect>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\"><\/rect>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"9\" font-weight=\"800\" fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"6\" font-weight=\"600\" fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face transform=\"translate(32, 44) scale(0.461)\" style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\"><\/circle>\n\n            <defs>\n              <lineargradient id=\"tb-butler-housing-grad-tb-butler-arena-1\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#C9D3E6\"><\/stop>\n                <stop offset=\"50%\" stop-color=\"#9FAFCD\"><\/stop>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\"><\/stop>\n              <\/lineargradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Click me<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\" data-butler-inline-input type=\"text\" maxlength=\"300\" placeholder=\"Antwort?\" aria-label=\"Antwort an Butler\" autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\" data-butler-mic aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"><\/rect><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"><\/path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"><\/line><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                      <\/div>\n              <div class=\"tb-bsh-arena__answer\" data-bsh-arena-answer><\/div>\n              <div class=\"tb-bsh-arena__meta\" data-bsh-arena-meta>ready<\/div>\n            <\/div>\n                      <div class=\"tb-bsh-arena__slot\" data-bsh-arena-slot data-persona=\"formal\">\n              <header class=\"tb-bsh-arena__head\">\n                <span class=\"tb-bsh-arena__dot\" style=\"background: #3F4F71\"><\/span>\n                <strong>Pro<\/strong>\n                <span class=\"tb-bsh-arena__tag\">straightforward, precise, no-nonsense<\/span>\n              <\/header>\n              <div class=\"tb-bsh-arena__butler\">\n                        <div class=\"tb-butler tb-butler--sm\" id=\"tb-butler-arena-2\" data-tb-butler data-persona=\"formal\" data-mood=\"friendly\" role=\"button\" tabindex=\"0\" aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewbox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\"><\/line>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\"><\/circle>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\"><\/rect>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\"><\/rect>\n\n            <rect class=\"tb-butler__housing\" x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\" fill=\"url(#tb-butler-housing-grad-tb-butler-arena-2)\" stroke=\"#8A98B8\" stroke-width=\"1\"><\/rect>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\"><\/rect>\n\n            <rect class=\"tb-butler__display\" x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"#08101F\"><\/rect>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\"><\/rect>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\"><\/rect>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"9\" font-weight=\"800\" fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"6\" font-weight=\"600\" fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face transform=\"translate(32, 44) scale(0.461)\" style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\"><\/circle>\n\n            <defs>\n              <lineargradient id=\"tb-butler-housing-grad-tb-butler-arena-2\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#C9D3E6\"><\/stop>\n                <stop offset=\"50%\" stop-color=\"#9FAFCD\"><\/stop>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\"><\/stop>\n              <\/lineargradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Click me<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\" data-butler-inline-input type=\"text\" maxlength=\"300\" placeholder=\"Antwort?\" aria-label=\"Antwort an Butler\" autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\" data-butler-mic aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"><\/rect><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"><\/path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"><\/line><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                      <\/div>\n              <div class=\"tb-bsh-arena__answer\" data-bsh-arena-answer><\/div>\n              <div class=\"tb-bsh-arena__meta\" data-bsh-arena-meta>ready<\/div>\n            <\/div>\n                  <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">Your very own Butler<\/span>\n          <h2>Build your version.<\/h2>\n          <p>Name, accent color, and personality. Remains in the browser.<\/p>\n        <\/header>\n        <div class=\"tb-bsh-my\" data-bsh-my>\n          <form class=\"tb-bsh-my__form\">\n            <label class=\"tb-bsh-my__field\">\n              <span>Name<\/span>\n              <input type=\"text\" maxlength=\"24\" data-bsh-my-name placeholder=\"z. B. Pixel\" value=\"\">\n            <\/label>\n            <label class=\"tb-bsh-my__field\">\n              <span>accent color<\/span>\n              <input type=\"color\" data-bsh-my-color value=\"#18C6E6\">\n            <\/label>\n            <label class=\"tb-bsh-my__field\">\n              <span>Personality<\/span>\n              <select data-bsh-my-persona>\n                                  <option value=\"default\">Office Dog<\/option>\n                                  <option value=\"formal\">Pro<\/option>\n                                  <option value=\"playful\">Playful<\/option>\n                                  <option value=\"poet\">Poet<\/option>\n                              <\/select>\n            <\/label>\n            <button type=\"button\" class=\"tb-btn tb-btn--primary\" data-bsh-my-save>Save<\/button>\n            <button type=\"button\" class=\"tb-btn tb-btn--ghost\" data-bsh-my-reset>Reset<\/button>\n          <\/form>\n          <div class=\"tb-bsh-my__preview\">\n                    <div class=\"tb-butler tb-butler--lg\" id=\"tb-butler-my-butler\" data-tb-butler data-mood=\"friendly\" role=\"button\" tabindex=\"0\" aria-label=\"Butler AI, Klick zum Chat\">\n          <svg class=\"tb-butler__svg\" viewbox=\"0 0 200 220\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" aria-hidden=\"true\">\n            <line x1=\"78\" y1=\"8\" x2=\"78\" y2=\"24\" stroke=\"#7E8AAA\" stroke-width=\"1.75\" stroke-linecap=\"round\"><\/line>\n            <circle class=\"tb-butler__antenna\" cx=\"78\" cy=\"8\" r=\"3.5\" fill=\"#18C6E6\"><\/circle>\n\n            <rect x=\"84\" y=\"192\" width=\"32\" height=\"11\" rx=\"2\" fill=\"#A6B3CC\"><\/rect>\n            <rect x=\"74\" y=\"201\" width=\"52\" height=\"6\" rx=\"2\" fill=\"#8A98B8\"><\/rect>\n\n            <rect class=\"tb-butler__housing\" x=\"22\" y=\"24\" width=\"156\" height=\"166\" rx=\"20\" ry=\"20\" fill=\"url(#tb-butler-housing-grad-tb-butler-my-butler)\" stroke=\"#8A98B8\" stroke-width=\"1\"><\/rect>\n            <rect x=\"28\" y=\"30\" width=\"144\" height=\"4\" rx=\"2\" fill=\"rgba(255,255,255,0.32)\"><\/rect>\n\n            <rect class=\"tb-butler__display\" x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"#08101F\"><\/rect>\n            <rect x=\"32\" y=\"44\" width=\"136\" height=\"118\" rx=\"9\" ry=\"9\" fill=\"none\" stroke=\"#1B2238\" stroke-width=\"0.8\" opacity=\"0.7\"><\/rect>\n            <rect x=\"38\" y=\"48\" width=\"50\" height=\"2\" rx=\"1\" fill=\"rgba(255,255,255,0.05)\"><\/rect>\n\n            <text x=\"100\" y=\"178\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"9\" font-weight=\"800\" fill=\"rgba(34, 41, 62, 0.78)\" letter-spacing=\"1.2\">\n              BUTLER AI\n            <\/text>\n            <text x=\"100\" y=\"188.5\" text-anchor=\"middle\" font-family=\"ui-monospace, 'SF Mono', Monaco, monospace\" font-size=\"6\" font-weight=\"600\" fill=\"rgba(34, 41, 62, 0.62)\" letter-spacing=\"0.9\">\n              TB-SOFTWARE\n            <\/text>\n\n            <g class=\"tb-butler__face\" data-butler-face transform=\"translate(32, 44) scale(0.461)\" style=\"color: var(--tb-butler-cyan);\">\n              <g id=\"eyes\"><path d=\"M74 116 Q92 104 110 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><path d=\"M146 116 Q164 104 182 116\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n              <g id=\"mouth\"><path d=\"M96 178 Q128 196 160 178\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"6\" stroke-linecap=\"round\"><\/path><\/g>\n            <\/g>\n\n            <circle class=\"tb-butler__online-dot\" cx=\"160\" cy=\"156\" r=\"2.8\" fill=\"#10B981\"><\/circle>\n\n            <defs>\n              <lineargradient id=\"tb-butler-housing-grad-tb-butler-my-butler\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                <stop offset=\"0%\" stop-color=\"#C9D3E6\"><\/stop>\n                <stop offset=\"50%\" stop-color=\"#9FAFCD\"><\/stop>\n                <stop offset=\"100%\" stop-color=\"#7B8DB3\"><\/stop>\n              <\/lineargradient>\n            <\/defs>\n          <\/svg>\n\n          <!-- Klick-Hint: erscheint kurz nach Page-Load f\u00fcr 5s mit Pulse-\n               Effekt um neuen Besuchern zu zeigen, dass der Butler interaktiv\n               ist. Verschwindet auch sofort bei erstem Hover\/Klick. JS toggelt\n               .is-visible an. -->\n          <!-- Klick-Hint sitzt LINKS vom Butler (vgl. butler.css), Pfeil zeigt\n               nach rechts \u2192 Richtung Roboter. Hand-hoch-Emoji w\u00e4re verwirrend\n               weil der Hint horizontal nicht vertikal ausgerichtet ist. -->\n          <div class=\"tb-butler__clickhint\" data-butler-clickhint aria-hidden=\"true\">\n            <span>Click me<\/span>\n          <\/div>\n\n          <div class=\"tb-butler__bubble\" data-butler-bubble role=\"status\" aria-live=\"polite\" hidden>\n            <div class=\"tb-butler__bubble-text\" data-butler-bubble-text><\/div>\n            <form class=\"tb-butler__inline-form\" data-butler-inline-form hidden>\n              <input class=\"tb-butler__inline-input\" data-butler-inline-input type=\"text\" maxlength=\"300\" placeholder=\"Antwort?\" aria-label=\"Antwort an Butler\" autocomplete=\"off\">\n              <button type=\"button\" class=\"tb-speech-btn tb-butler__mic\" data-butler-mic aria-label=\"Spracheingabe starten\" title=\"Spracheingabe starten\" aria-pressed=\"false\" hidden>\n                <svg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"9\" y=\"2\" width=\"6\" height=\"12\" rx=\"3\"><\/rect><path d=\"M5 10v2a7 7 0 0 0 14 0v-2\"><\/path><line x1=\"12\" y1=\"19\" x2=\"12\" y2=\"22\"><\/line><\/svg>\n              <\/button>\n            <\/form>\n          <\/div>\n        <\/div>\n                    <p class=\"tb-bsh-my__name-display\" data-bsh-my-name-display><\/p>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n    <section class=\"tb-bsh-section tb-bsh-section--alt\">\n      <div class=\"tb-container\">\n        <header class=\"tb-bsh-section__head\">\n          <span class=\"tb-eyebrow\">How I'm made<\/span>\n          <h2>No secrets here, just SVG, JS, and a local language model.<\/h2>\n        <\/header>\n        <div class=\"tb-bsh-insights\">\n          <article>\n            <h3>SVG Display with 49 Faces<\/h3>\n            <p>Every emotion is unique <code>&lt;g id=\"face\"&gt;<\/code>-Snippet&lt;br&gt;that I replace when changing the display. Scalable, compact, fast.<\/p>\n          <\/article>\n          <article>\n            <h3>Local language model<\/h3>\n            <p>All responses come via a Swiss LLMProxy on our own hardware\u2014no external API account, no token bill at month's end.<\/p>\n          <\/article>\n          <article>\n            <h3>Action Log<\/h3>\n            <p>The AI may include control tags at the end of responses such as\n               <code>[mood:joy]<\/code> or <code>[anim:spin]<\/code> set. My JS extracts them and runs them on the display.<\/p>\n          <\/article>\n          <article>\n            <h3>0 Idle Behavior<\/h3>\n            <p>Winking, yawning, looking around, thinking of a word, displaying a symbol\u2026 If no one interacts, another mini-action runs every ~10 seconds.<\/p>\n          <\/article>\n          <article>\n            <h3> personas<\/h3>\n            <p>Office dog, pro, playful, poet; each is a short JSON file with system prompt and default mood. New persona = new file.<\/p>\n          <\/article>\n          <article>\n            <h3>plugin architecture<\/h3>\n            <p>Engine as <code>window.TbButler<\/code>, showcase components only consume the API. You could build your own robot with the same stack.<\/p>\n          <\/article>\n        <\/div>\n      <\/div>\n    <\/section>\n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-60","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages\/60","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=60"}],"version-history":[{"count":1,"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions"}],"predecessor-version":[{"id":61,"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=\/wp\/v2\/pages\/60\/revisions\/61"}],"wp:attachment":[{"href":"https:\/\/www.tb-software.ch\/ai\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=60"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}